docs(aria/combobox): readonly example

Author: wagnermaciel

src/components-examples/aria/combobox/combobox-examples.css

@@ -18,6 +18,11 @@
   border-radius: var(--mat-sys-corner-extra-small);
 }
 
+.example-combobox-input[readonly='true'] {
+  cursor: pointer;
+  padding: 0.7rem 1rem;
+}
+
 .example-combobox-container:focus-within .example-combobox-input {
   outline: 1.5px solid var(--mat-sys-primary);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 25%, transparent);

src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html

@@ -0,0 +1,33 @@
+<div ngCombobox #combobox="ngCombobox" class="example-combobox-container" [readonly]="true">
+  <div class="example-combobox-input-container">
+    <input
+      ngComboboxInput
+      class="example-combobox-input"
+      placeholder="Search..."
+      [(value)]="searchString"
+    />
+    <span class="material-symbols-outlined example-icon example-arrow-icon">arrow_drop_down</span>
+  </div>
+
+  <div popover="manual" #popover class="example-popover">
+    <ng-template ngComboboxPopupContainer>
+      <div ngListbox class="example-listbox">
+        @for (option of options(); track option) {
+          <div
+            class="example-option example-selectable example-stateful"
+            ngOption
+            [value]="option"
+            [label]="option"
+          >
+            <span>{{option}}</span>
+            <span
+              aria-hidden="true"
+              class="material-symbols-outlined example-icon example-selected-icon"
+              >check</span
+            >
+          </div>
+        }
+      </div>
+    </ng-template>
+  </div>
+</div>

src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {
+  afterRenderEffect,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  signal,
+  viewChild,
+} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+/** @title Readonly combobox. */
+@Component({
+  selector: 'combobox-readonly-example',
+  templateUrl: 'combobox-readonly-example.html',
+  styleUrl: '../combobox-examples.css',
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    FormsModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxReadonlyExample {
+  popover = viewChild<ElementRef>('popover');
+  listbox = viewChild<Listbox<any>>(Listbox);
+  combobox = viewChild<Combobox<any>>(Combobox);
+
+  options = () => states;
+  searchString = signal('');
+
+  constructor() {
+    afterRenderEffect(() => {
+      const popover = this.popover()!;
+      const combobox = this.combobox()!;
+      combobox.pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
+
+      // TODO(wagnermaciel): Make this easier for developers to do.
+      this.listbox()?.pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
+    });
+  }
+
+  showPopover() {
+    const popover = this.popover()!;
+    const combobox = this.combobox()!;
+
+    const comboboxRect = combobox.pattern.inputs.inputEl()?.getBoundingClientRect();
+    const popoverEl = popover.nativeElement;
+
+    if (comboboxRect) {
+      popoverEl.style.width = `${comboboxRect.width}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
+      popoverEl.style.left = `${comboboxRect.left - 1}px`;
+    }
+
+    popover.nativeElement.showPopover();
+  }
+}
+
+const states = ['Option 1', 'Option 2', 'Option 3'];

src/components-examples/aria/combobox/index.ts

@@ -4,3 +4,4 @@ export {ComboboxHighlightExample} from './combobox-highlight/combobox-highlight-
 export {ComboboxTreeManualExample} from './combobox-tree-manual/combobox-tree-manual-example';
 export {ComboboxTreeAutoSelectExample} from './combobox-tree-auto-select/combobox-tree-auto-select-example';
 export {ComboboxTreeHighlightExample} from './combobox-tree-highlight/combobox-tree-highlight-example';
+export {ComboboxReadonlyExample} from './combobox-readonly/combobox-readonly-example';

src/dev-app/aria-combobox/combobox-demo.html

@@ -29,5 +29,10 @@ <h2>Combobox with tree popup and auto-select filtering</h2>
       <h2>Combobox with tree popup and highlight filtering</h2>
       <combobox-tree-highlight-example></combobox-tree-highlight-example>
     </div>
+
+    <div class="example-combobox-container">
+      <h2>Readonly Combobox</h2>
+      <combobox-readonly-example></combobox-readonly-example>
+    </div>
   </div>
 </div>

src/dev-app/aria-combobox/combobox-demo.ts

@@ -13,6 +13,7 @@ import {
   ComboboxTreeAutoSelectExample,
   ComboboxTreeHighlightExample,
   ComboboxTreeManualExample,
+  ComboboxReadonlyExample,
 } from '@angular/components-examples/aria/combobox';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
@@ -26,6 +27,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
     ComboboxTreeManualExample,
     ComboboxTreeAutoSelectExample,
     ComboboxTreeHighlightExample,
+    ComboboxReadonlyExample,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })