mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kam
95fbd0bd48
Several adev states show only plain text today. This brings the Angie mascot into them for warmer, more on-brand empty states, with no change to copy or behavior: - Search dialog: a magnifying-glass Angie on "Start typing to see results", a questioning Angie on "No results found". - API reference: a questioning Angie on "No API items found." and on the package filter's "No results found". - Deprecated API pages: the back-turned orthos pose in the shared deprecation warning. The mascots are decorative (aria-hidden) and sized per placement; the poses are added as SVG assets under assets/images/angie/. Also moves the Shiki highlighter init in the jsdoc-transforms spec into a beforeAll, fixing a flake where the spec failed under randomized test order.
95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<div ngCombobox #combobox="ngCombobox" class="docs-combobox-container" [(expanded)]="popupExpanded">
|
|
<div #origin class="docs-select-input-container">
|
|
<input
|
|
[attr.id]="id()"
|
|
[attr.name]="name()"
|
|
[value]="displayValue()"
|
|
placeholder="Select an option"
|
|
readonly
|
|
[tabindex]="-1"
|
|
/>
|
|
<span class="material-symbols-outlined docs-select-arrow" translate="no" aria-hidden="true"
|
|
>arrow_drop_down</span
|
|
>
|
|
</div>
|
|
|
|
<ng-template
|
|
[cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
|
|
[cdkConnectedOverlayOpen]="popupExpanded()"
|
|
[cdkConnectedOverlayDisableClose]="false"
|
|
(overlayOutsideClick)="popupExpanded.set(false)"
|
|
>
|
|
<ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
|
|
<div class="docs-select-popover">
|
|
<div class="docs-select-dialog" ngComboboxWidget>
|
|
<div class="example-combobox-container">
|
|
<div class="docs-select-search-container">
|
|
<span
|
|
class="material-symbols-outlined docs-select-search-icon"
|
|
translate="no"
|
|
aria-hidden="true"
|
|
>search</span
|
|
>
|
|
<input
|
|
ngCombobox
|
|
#innerCombobox="ngCombobox"
|
|
#searchInput
|
|
class="docs-select-search-input"
|
|
placeholder="Search..."
|
|
[(value)]="searchString"
|
|
[alwaysExpanded]="true"
|
|
(keydown.escape)="onSearchEscape($event)"
|
|
/>
|
|
</div>
|
|
|
|
<div aria-live="polite" class="cdk-visually-hidden">
|
|
{{ filteredOptions().length === 0 ? 'No results found for ' + searchString() : '' }}
|
|
</div>
|
|
|
|
<ng-template ngComboboxPopup [combobox]="innerCombobox">
|
|
<div class="example-popup example-popup-no-margin">
|
|
@if (filteredOptions().length === 0) {
|
|
<div class="docs-select-no-results">
|
|
<img
|
|
src="assets/images/angie/question.svg"
|
|
class="docs-select-no-results-angie"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>No results found</span>
|
|
</div>
|
|
}
|
|
<div
|
|
#listbox="ngListbox"
|
|
ngListbox
|
|
[(value)]="selectedValues"
|
|
[multi]="false"
|
|
ngComboboxWidget
|
|
class="docs-select-listbox"
|
|
focusMode="activedescendant"
|
|
tabindex="-1"
|
|
selectionMode="explicit"
|
|
(click)="onCommit()"
|
|
(keydown.enter)="onCommit()"
|
|
[activeDescendant]="listbox.activeDescendant()"
|
|
[class.example-empty]="filteredOptions().length === 0"
|
|
>
|
|
@for (option of filteredOptions(); track option.value) {
|
|
<div
|
|
ngOption
|
|
[value]="option.value"
|
|
[label]="option.label"
|
|
class="docs-select-option"
|
|
>
|
|
<span class="docs-select-option-label">{{ option.label }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-template>
|
|
</div>
|