diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html index a7e0c22c28ba..a7738807637c 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html @@ -5,18 +5,28 @@ [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> +
+ {{options().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
+ @if (options().length === 0) { +
No results found
+ } +
+ [activeDescendant]="listbox.activeDescendant()" + [class.example-empty]="options().length === 0"> @for (option of options(); track option) {
{{option}}
} +
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-dialog/simple-combobox-dialog-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-dialog/simple-combobox-dialog-example.html index 5bcfc7a3efca..5c2e125c6a08 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-dialog/simple-combobox-dialog-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-dialog/simple-combobox-dialog-example.html @@ -18,18 +18,29 @@ placeholder="Search..." [(ngModel)]="searchString" [alwaysExpanded]="true" (keydown.escape)="onSearchEscape($event)" /> + +
+ {{options().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
- @for (option of options(); track option) { -
- {{option}} - -
+
+ @if (options().length === 0) { +
No results found
} +
+ @for (option of options(); track option) { +
+ {{option}} + +
+ } +
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-example.css b/src/components-examples/aria/simple-combobox/simple-combobox-example.css index 6f239afd12e3..4bcf3d08001f 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-example.css +++ b/src/components-examples/aria/simple-combobox/simple-combobox-example.css @@ -360,3 +360,20 @@ ul[role='group'] { .example-grid-row[aria-selected='true'] .example-selected-icon { visibility: visible; } + +.example-no-results { + padding: 1rem; +} + +.example-empty { + position: absolute; + visibility: hidden; + pointer-events: none; + height: 0; + width: 0; + overflow: hidden; +} + +.example-popup-no-margin { + margin-block-start: 0; +} diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-grid/simple-combobox-grid-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-grid/simple-combobox-grid-example.html index 034d76666689..6117c726005e 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-grid/simple-combobox-grid-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-grid/simple-combobox-grid-example.html @@ -5,29 +5,38 @@ [(value)]="searchString" [(expanded)]="popupExpanded" (blur)="onBlur()" (click)="popupExpanded.set(true)" /> +
+ {{filteredItems().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
- @for (item of filteredItems(); track item.label; let i = $index) { -
-
- - check -
-
- +
+ @if (filteredItems().length === 0) { +
No results found
+ } +
+ @for (item of filteredItems(); track item.label; let i = $index) { +
+
+ + check +
+
+ +
+ }
- }
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.html index ca2fcde09a78..976a311321ca 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-highlight/simple-combobox-highlight-example.html @@ -7,19 +7,29 @@ [inlineSuggestion]="(searchString() || navigated()) ? selectedOption()[0] : undefined" />
+
+ {{options().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
- @for (option of options(); track option.name) { -
- {{option.name}} - -
+
+ @if (options().length === 0) { +
No results found
} +
+ @for (option of options(); track option.name) { +
+ {{option.name}} + +
+ } +
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html index b92662e2879c..68b91cd0d207 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-listbox/simple-combobox-listbox-example.html @@ -5,18 +5,28 @@ [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
+
+ {{options().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
- @for (option of options(); track option) { -
- {{option}} - -
+
+ @if (options().length === 0) { +
No results found
} +
+ @for (option of options(); track option) { +
+ {{option}} + +
+ } +
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-tree-auto-select/simple-combobox-tree-auto-select-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-tree-auto-select/simple-combobox-tree-auto-select-example.html index cf450a7a3ac0..fc50a3d48883 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-tree-auto-select/simple-combobox-tree-auto-select-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-tree-auto-select/simple-combobox-tree-auto-select-example.html @@ -5,15 +5,25 @@ [(value)]="searchString" [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" />
+
+ {{filteredGroups().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
    - -
+
+ @if (filteredGroups().length === 0) { +
No results found
+ } +
    + +
+
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.html index 8fdc99de79b6..e7fd0db9890e 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-tree-highlight/simple-combobox-tree-highlight-example.html @@ -7,15 +7,25 @@ [inlineSuggestion]="(searchString() || navigated()) ? selectedValues()[0] : undefined" />
+
+ {{filteredGroups().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
    - -
+
+ @if (filteredGroups().length === 0) { +
No results found
+ } +
    + +
+
diff --git a/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html b/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html index 16e41d50a106..4e0afa6015fe 100644 --- a/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html +++ b/src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html @@ -5,14 +5,24 @@ [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> +
+ {{filteredGroups().length === 0 ? 'No results found for ' + searchString() : ''}} +
+ -
    - -
+
+ @if (filteredGroups().length === 0) { +
No results found
+ } +
    + +
+