main - ea25472 docs(aria/combobox): material select demo (#32336)

Author: wagnermaciel

docs-content/examples-highlighted/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example-html.html

@@ -1,33 +1,26 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngCombobox</span> #<span class="hljs-attr">combobox</span>=<span class="hljs-string">&quot;ngCombobox&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-container&quot;</span> [<span class="hljs-attr">readonly</span>]=<span class="hljs-string">&quot;true&quot;</span> [<span class="hljs-attr">disabled</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-input-container&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
-      <span class="hljs-attr">ngComboboxInput</span>
-      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-input&quot;</span>
-      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Search...&quot;</span>
-      [(<span class="hljs-attr">value</span>)]=<span class="hljs-string">&quot;searchString&quot;</span>
-    /&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;material-symbols-outlined example-icon example-arrow-icon&quot;</span>&gt;</span>arrow_drop_down<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngCombobox</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">disabled</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> #<span class="hljs-attr">origin</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-select&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-text&quot;</span>&gt;</span>{{ displayValue() }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Label dropdown&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Select a label&quot;</span> <span class="hljs-attr">ngComboboxInput</span> /&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-arrow material-symbols-outlined&quot;</span>&gt;</span>arrow_drop_down<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">popover</span>=<span class="hljs-string">&quot;manual&quot;</span> #<span class="hljs-attr">popover</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-popover&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
+    [<span class="hljs-attr">cdkConnectedOverlay</span>]=<span class="hljs-string">&quot;{origin, usePopover: &#x27;inline&#x27;, matchWidth: true}&quot;</span>
+    [<span class="hljs-attr">cdkConnectedOverlayOpen</span>]=<span class="hljs-string">&quot;true&quot;</span>
+  &gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngComboboxPopupContainer</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngListbox</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-listbox&quot;</span>&gt;</span>
-        @for (option of options(); track option) {
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
-            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-option example-selectable example-stateful&quot;</span>
-            <span class="hljs-attr">ngOption</span>
-            [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;option&quot;</span>
-            [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;option&quot;</span>
-          &gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{option}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>
-              <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>
-              <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;material-symbols-outlined example-icon example-selected-icon&quot;</span>
-              &gt;</span>check&lt;/span
-            &gt;
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-        }
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-popup-container&quot;</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngListbox</span>&gt;</span>
+          @for (label of labels; track label.value) {
+            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngOption</span> [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;label.value&quot;</span> [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;label.value&quot;</span>&gt;</span>
+              <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-option-icon material-symbols-outlined&quot;</span>&gt;</span>{{label.icon}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+              <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-option-text&quot;</span>&gt;</span>{{label.value}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+              <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-option-check material-symbols-outlined&quot;</span>&gt;</span>check<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+          }
+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

docs-content/examples-highlighted/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example-ts.html

@@ -17,61 +17,78 @@
   afterRenderEffect,
   <span class="hljs-title class_">ChangeDetectionStrategy</span>,
   <span class="hljs-title class_">Component</span>,
-  <span class="hljs-title class_">ElementRef</span>,
   signal,
   viewChild,
+  viewChildren,
 } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
-<span class="hljs-keyword">import</span> {<span class="hljs-title class_">FormsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">OverlayModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/overlay&#x27;</span>;
 
 <span class="hljs-comment">/** <span class="hljs-doctag">@title</span> Disabled readonly combobox. */</span>
 <span class="hljs-meta">@Component</span>({
   <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;combobox-readonly-disabled-example&#x27;</span>,
   <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;combobox-readonly-disabled-example.html&#x27;</span>,
-  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;../combobox-examples.css&#x27;</span>,
+  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;../select-examples.css&#x27;</span>,
   <span class="hljs-attr">imports</span>: [
     <span class="hljs-title class_">Combobox</span>,
     <span class="hljs-title class_">ComboboxInput</span>,
     <span class="hljs-title class_">ComboboxPopup</span>,
     <span class="hljs-title class_">ComboboxPopupContainer</span>,
     <span class="hljs-title class_">Listbox</span>,
     <span class="hljs-title class_">Option</span>,
-    <span class="hljs-title class_">FormsModule</span>,
+    <span class="hljs-title class_">OverlayModule</span>,
   ],
   <span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ComboboxReadonlyDisabledExample</span> {
-  popover = viewChild&lt;<span class="hljs-title class_">ElementRef</span>&gt;(<span class="hljs-string">&#x27;popover&#x27;</span>);
-  listbox = viewChild&lt;<span class="hljs-title class_">Listbox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Listbox</span>);
-  combobox = viewChild&lt;<span class="hljs-title class_">Combobox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Combobox</span>);
+  <span class="hljs-comment">/** The string that is displayed in the combobox. */</span>
+  displayValue = <span class="hljs-title function_">signal</span>(<span class="hljs-string">&#x27;&#x27;</span>);
 
-  options = <span class="hljs-function">() =&gt;</span> states;
-  searchString = <span class="hljs-title function_">signal</span>(<span class="hljs-string">&#x27;&#x27;</span>);
+  <span class="hljs-comment">/** The combobox listbox popup. */</span>
+  listbox = viewChild&lt;<span class="hljs-title class_">Listbox</span>&lt;<span class="hljs-built_in">string</span>&gt;&gt;(<span class="hljs-title class_">Listbox</span>);
 
-  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
-      <span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
-      <span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
-      combobox.<span class="hljs-title function_">expanded</span>() ? <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">showPopover</span>() : popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">hidePopover</span>();
+  <span class="hljs-comment">/** The options available in the listbox. */</span>
+  options = viewChildren&lt;<span class="hljs-title class_">Option</span>&lt;<span class="hljs-built_in">string</span>&gt;&gt;(<span class="hljs-title class_">Option</span>);
 
-      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-title function_">scrollActiveItemIntoView</span>();
-    });
-  }
+  <span class="hljs-comment">/** A reference to the ng aria combobox. */</span>
+  combobox = viewChild&lt;<span class="hljs-title class_">Combobox</span>&lt;<span class="hljs-built_in">string</span>&gt;&gt;(<span class="hljs-title class_">Combobox</span>);
 
-  <span class="hljs-title function_">showPopover</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
-    <span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
+  <span class="hljs-comment">/** The labels that are available for selection. */</span>
+  labels = [
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Important&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;label&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Starred&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;star&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Work&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;work&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Personal&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;person&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;To Do&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;checklist&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Later&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;schedule&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Read&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;menu_book&#x27;</span>},
+    {<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Travel&#x27;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;flight&#x27;</span>},
+  ];
 
-    <span class="hljs-keyword">const</span> comboboxRect = combobox.<span class="hljs-title function_">inputElement</span>()?.<span class="hljs-title function_">getBoundingClientRect</span>();
-    <span class="hljs-keyword">const</span> popoverEl = popover.<span class="hljs-property">nativeElement</span>;
+  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
+    <span class="hljs-comment">// Updates the display value when the listbox values change.</span>
+    <span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
+      <span class="hljs-keyword">const</span> values = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-title function_">values</span>() || [];
+      <span class="hljs-keyword">if</span> (values.<span class="hljs-property">length</span> === <span class="hljs-number">0</span>) {
+        <span class="hljs-variable language_">this</span>.<span class="hljs-property">displayValue</span>.<span class="hljs-title function_">set</span>(<span class="hljs-string">&#x27;Select a label&#x27;</span>);
+      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (values.<span class="hljs-property">length</span> === <span class="hljs-number">1</span>) {
+        <span class="hljs-variable language_">this</span>.<span class="hljs-property">displayValue</span>.<span class="hljs-title function_">set</span>(values[<span class="hljs-number">0</span>]);
+      } <span class="hljs-keyword">else</span> {
+        <span class="hljs-variable language_">this</span>.<span class="hljs-property">displayValue</span>.<span class="hljs-title function_">set</span>(<span class="hljs-string">`<span class="hljs-subst">${values[<span class="hljs-number">0</span>]}</span> + <span class="hljs-subst">${values.length - <span class="hljs-number">1</span>}</span> more`</span>);
+      }
+    });
 
-    <span class="hljs-keyword">if</span> (comboboxRect) {
-      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.width}</span>px`</span>;
-      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.bottom + <span class="hljs-number">4</span>}</span>px`</span>;
-      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.left - <span class="hljs-number">1</span>}</span>px`</span>;
-    }
+    <span class="hljs-comment">// Scrolls to the active item when the active option changes.</span>
+    <span class="hljs-comment">// The slight delay here is to ensure animations are done before scrolling.</span>
+    <span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
+      <span class="hljs-keyword">const</span> option = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">options</span>().<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">opt</span> =&gt;</span> opt.<span class="hljs-title function_">active</span>());
+      <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> option?.<span class="hljs-property">element</span>.<span class="hljs-title function_">scrollIntoView</span>({<span class="hljs-attr">block</span>: <span class="hljs-string">&#x27;nearest&#x27;</span>}), <span class="hljs-number">50</span>);
+    });
 
-    popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">showPopover</span>();
+    <span class="hljs-comment">// Resets the listbox scroll position when the combobox is closed.</span>
+    <span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
+      <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()?.<span class="hljs-title function_">expanded</span>()) {
+        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-property">element</span>.<span class="hljs-title function_">scrollTo</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>), <span class="hljs-number">150</span>);
+      }
+    });
   }
 }
-
-<span class="hljs-keyword">const</span> states = [<span class="hljs-string">&#x27;Option 1&#x27;</span>, <span class="hljs-string">&#x27;Option 2&#x27;</span>, <span class="hljs-string">&#x27;Option 3&#x27;</span>];