mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
f05d675651
Some checks are pending
DevInfra / assistant_to_the_branch_manager (push) Waiting to run
CI (push) / zone-js (push) Waiting to run
CI (push) / lint (push) Waiting to run
CI (push) / devtools (push) Waiting to run
CI (push) / test (push) Waiting to run
CI (push) / integration-tests (push) Waiting to run
CI (push) / adev (push) Waiting to run
CI (push) / vscode-ng-language-service (push) Waiting to run
CI (push) / publish-snapshots (push) Waiting to run
CI (push) / adev-deploy (push) Blocked by required conditions
Update ADEV Cross Repo Docs / Update Cross Repo ADEV Docs (push) Waiting to run
Performance Tracking / workflow (push) Blocked by required conditions
Performance Tracking / list (push) Waiting to run
OpenSSF Scorecard / Scorecards analysis (push) Waiting to run
This PR also replaces the implementation of the select component on ADEV due to the aria breaking changes
93 lines
3.4 KiB
HTML
93 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">No results found</div>
|
|
}
|
|
<div
|
|
#listbox="ngListbox"
|
|
ngListbox
|
|
[(value)]="selectedValues"
|
|
[multi]="false"
|
|
ngComboboxWidget
|
|
class="example-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>
|
|
<span
|
|
class="material-symbols-outlined docs-select-check-icon"
|
|
translate="no"
|
|
aria-hidden="true"
|
|
>check</span
|
|
>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-template>
|
|
</div>
|