@hermes-ui/angular 0.1.4

package/fesm2022/hermes-ui-angular-forms-select.mjs

@@ -0,0 +1,606 @@
+import * as i0 from '@angular/core';
+import { Injectable, forwardRef, Input, Component, ViewChild, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@hermes-ui/angular/popover/common';
+import { HermesPopoverHostDirective, HermesPopoverType, HermesPopoverPosition, mapPopoverKeyToPosition, HermesPopoverContent, HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';
+import { uniqueIdFactory, Keys } from '@hermes-ui/angular/utils';
+import { Subject } from 'rxjs';
+import * as i3 from '@hermes-ui/angular/icon';
+import { ClarityIcons, angleIcon, checkIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import * as i2$1 from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Shared state for a single hermes-select instance, provided at the HermesSelect component
+ * level so the trigger, value, content, and every item can all read/mutate the same value
+ * and item registry without prop-drilling through content projection.
+ */
+class HermesSelectStateService {
+    constructor() {
+        this.disabled = false;
+        this.placeholder = '';
+        this.items = [];
+        this.listboxId = uniqueIdFactory();
+        this.valueChange = new Subject();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get selectedItem() {
+        return this.items.find(item => this.isSelected(item.value));
+    }
+    isSelected(value) {
+        return this._value !== undefined && this._value !== null && this._value === value;
+    }
+    registerItem(item) {
+        this.items.push(item);
+    }
+    unregisterItem(item) {
+        const index = this.items.indexOf(item);
+        if (index > -1) {
+            this.items.splice(index, 1);
+        }
+    }
+    selectValue(value) {
+        if (this.disabled || this._value === value) {
+            return;
+        }
+        this._value = value;
+        this.onChange(value);
+        this.valueChange.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectStateService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Root of a hermes-select. Renders nothing itself besides its projected content
+ * (typically a HermesSelectTrigger and a HermesSelectContent) and provides the
+ * HermesSelectStateService every descendant reads/writes through.
+ */
+class HermesSelect {
+    constructor(state, popoverService) {
+        this.state = state;
+        this.popoverService = popoverService;
+    }
+    get disabled() {
+        return this.state.disabled;
+    }
+    get placeholder() {
+        return this.state.placeholder;
+    }
+    set placeholder(value) {
+        this.state.placeholder = value ?? '';
+    }
+    ngOnInit() {
+        // A close (regardless of whether it happened through a selection, Escape, or an
+        // outside click) is the closest thing a listbox-style control has to a "blur".
+        this.subscription = this.popoverService.openChange.subscribe(open => {
+            if (!open) {
+                this.state.onTouched();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    writeValue(value) {
+        this.state.value = value;
+    }
+    registerOnChange(fn) {
+        this.state.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.state.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.state.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelect, deps: [{ token: HermesSelectStateService }, { token: i2.HermesPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesSelect, isStandalone: false, selector: "hermes-select", inputs: { placeholder: "placeholder" }, host: { properties: { "class.hermes-select": "true", "attr.data-disabled": "disabled || null" } }, providers: [
+            HermesSelectStateService,
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HermesSelect), multi: true },
+        ], hostDirectives: [{ directive: i2.HermesPopoverHostDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hermes-select',
+                    template: '<ng-content></ng-content>',
+                    providers: [
+                        HermesSelectStateService,
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HermesSelect), multi: true },
+                    ],
+                    hostDirectives: [HermesPopoverHostDirective],
+                    host: {
+                        '[class.hermes-select]': 'true',
+                        '[attr.data-disabled]': 'disabled || null',
+                    },
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: HermesSelectStateService }, { type: i2.HermesPopoverService }], propDecorators: { placeholder: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * The button that opens the listbox. A real <button> so Enter/Space activation and tab
+ * order come from the browser for free; only ArrowUp/ArrowDown need their own handling
+ * here, matching how a native <select> also opens on either arrow key.
+ */
+class HermesSelectTrigger {
+    constructor(state, popoverService) {
+        this.state = state;
+        this.popoverService = popoverService;
+        this.size = 'default';
+    }
+    ngAfterViewInit() {
+        this.state.triggerElement = this.buttonRef.nativeElement;
+    }
+    openOnArrowKey(event) {
+        if (this.state.disabled) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.popoverService.open) {
+            this.popoverService.open = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectTrigger, deps: [{ token: HermesSelectStateService }, { token: i2.HermesPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesSelectTrigger, isStandalone: false, selector: "hermes-select-trigger", inputs: { size: "size" }, host: { properties: { "class.hermes-select-trigger": "true", "attr.data-size": "size" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["triggerButton"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  #triggerButton\n  type=\"button\"\n  class=\"hermes-select-trigger-button\"\n  role=\"combobox\"\n  hermesPopoverOrigin\n  hermesPopoverOpenCloseButton\n  [disabled]=\"state.disabled\"\n  [attr.aria-expanded]=\"popoverService.open\"\n  [attr.aria-controls]=\"state.listboxId\"\n  aria-haspopup=\"listbox\"\n  (keydown.ArrowDown)=\"openOnArrowKey($event)\"\n  (keydown.ArrowUp)=\"openOnArrowKey($event)\"\n>\n  <ng-content></ng-content>\n  <hermes-icon shape=\"angle\" direction=\"down\" size=\"16\" class=\"hermes-select-trigger-icon\"></hermes-icon>\n</button>\n", dependencies: [{ kind: "component", type: i3.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i2.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectTrigger, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-select-trigger', host: {
+                        '[class.hermes-select-trigger]': 'true',
+                        '[attr.data-size]': 'size',
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  #triggerButton\n  type=\"button\"\n  class=\"hermes-select-trigger-button\"\n  role=\"combobox\"\n  hermesPopoverOrigin\n  hermesPopoverOpenCloseButton\n  [disabled]=\"state.disabled\"\n  [attr.aria-expanded]=\"popoverService.open\"\n  [attr.aria-controls]=\"state.listboxId\"\n  aria-haspopup=\"listbox\"\n  (keydown.ArrowDown)=\"openOnArrowKey($event)\"\n  (keydown.ArrowUp)=\"openOnArrowKey($event)\"\n>\n  <ng-content></ng-content>\n  <hermes-icon shape=\"angle\" direction=\"down\" size=\"16\" class=\"hermes-select-trigger-icon\"></hermes-icon>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: HermesSelectStateService }, { type: i2.HermesPopoverService }], propDecorators: { size: [{
+                type: Input
+            }], buttonRef: [{
+                type: ViewChild,
+                args: ['triggerButton', { static: true }]
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Displays a snapshot of the selected item's rendered markup inside the trigger, or the
+ * placeholder text when nothing is selected yet - mirrors shadcn's <SelectValue>.
+ *
+ * Reads HermesSelectItem.getLabelHtml() (an innerHTML snapshot) rather than re-rendering the
+ * item's projected content through a shared TemplateRef: <ng-content> hands out one real set
+ * of DOM nodes, and instantiating that same template a second time here would move them out
+ * of the item's own row instead of cloning them.
+ */
+class HermesSelectValue {
+    constructor(state, sanitizer) {
+        this.state = state;
+        this.sanitizer = sanitizer;
+    }
+    get resolvedPlaceholder() {
+        return this.placeholder ?? this.state.placeholder;
+    }
+    get valueHtml() {
+        const item = this.state.selectedItem;
+        // Trusted: this is a snapshot of markup this same app already rendered from its own
+        // hermes-select-item templates, not third-party or user-supplied HTML.
+        return item ? this.sanitizer.bypassSecurityTrustHtml(item.getLabelHtml()) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectValue, deps: [{ token: HermesSelectStateService }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesSelectValue, isStandalone: false, selector: "hermes-select-value", inputs: { placeholder: "placeholder" }, host: { properties: { "class.hermes-select-value": "true", "class.hermes-select-placeholder": "!state.selectedItem" } }, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n@if (state.selectedItem) {\n  <span [innerHTML]=\"valueHtml\"></span>\n} @else {\n  {{ resolvedPlaceholder }}\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-select-value', host: {
+                        '[class.hermes-select-value]': 'true',
+                        '[class.hermes-select-placeholder]': '!state.selectedItem',
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n@if (state.selectedItem) {\n  <span [innerHTML]=\"valueHtml\"></span>\n} @else {\n  {{ resolvedPlaceholder }}\n}\n" }]
+        }], ctorParameters: () => [{ type: HermesSelectStateService }, { type: i2$1.DomSanitizer }], propDecorators: { placeholder: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesSelectItem {
+    constructor(state, elementRef) {
+        this.state = state;
+        this.elementRef = elementRef;
+        this._disabled = false;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = !!value || value === '';
+    }
+    get selected() {
+        return this.state.isSelected(this.value);
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    getLabelHtml() {
+        return this.textEl?.nativeElement.innerHTML ?? '';
+    }
+    ngOnInit() {
+        this.state.registerItem(this);
+    }
+    ngOnDestroy() {
+        this.state.unregisterItem(this);
+    }
+    onSelect() {
+        if (this.disabled) {
+            return;
+        }
+        this.state.selectValue(this.value);
+    }
+    onKeydownSelect(event) {
+        // Space normally scrolls the page; both keys should only ever select.
+        event.preventDefault();
+        this.onSelect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectItem, deps: [{ token: HermesSelectStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesSelectItem, isStandalone: false, selector: "hermes-select-item", inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "click": "onSelect()", "keydown.enter": "onKeydownSelect($event)", "keydown.space": "onKeydownSelect($event)" }, properties: { "attr.aria-selected": "selected", "attr.aria-disabled": "disabled || null", "attr.tabindex": "-1", "class.hermes-select-item": "true", "class.selected": "selected", "class.disabled": "disabled" } }, viewQueries: [{ propertyName: "textEl", first: true, predicate: ["text"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<span #text class=\"hermes-select-item-text\">\n  <ng-content></ng-content>\n</span>\n<span class=\"hermes-select-item-indicator\">\n  @if (selected) {\n    <hermes-icon shape=\"check\" size=\"16\"></hermes-icon>\n  }\n</span>\n", dependencies: [{ kind: "component", type: i3.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-select-item', host: {
+                        role: 'option',
+                        '[attr.aria-selected]': 'selected',
+                        '[attr.aria-disabled]': 'disabled || null',
+                        '[attr.tabindex]': '-1',
+                        '[class.hermes-select-item]': 'true',
+                        '[class.selected]': 'selected',
+                        '[class.disabled]': 'disabled',
+                        '(click)': 'onSelect()',
+                        '(keydown.enter)': 'onKeydownSelect($event)',
+                        '(keydown.space)': 'onKeydownSelect($event)',
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<span #text class=\"hermes-select-item-text\">\n  <ng-content></ng-content>\n</span>\n<span class=\"hermes-select-item-indicator\">\n  @if (selected) {\n    <hermes-icon shape=\"check\" size=\"16\"></hermes-icon>\n  }\n</span>\n" }]
+        }], ctorParameters: () => [{ type: HermesSelectStateService }, { type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input
+            }], textEl: [{
+                type: ViewChild,
+                args: ['text', { static: true }]
+            }], disabled: [{
+                type: Input
+            }] } });
+
+const TYPEAHEAD_RESET_MS = 500;
+/**
+ * The listbox popup. Hosts HermesPopoverContent for positioning/overlay/outside-click/escape
+ * handling (the same primitive hermes-dropdown-menu uses) and owns arrow-key navigation,
+ * Home/End, and single-character typeahead across its projected hermes-select-item children.
+ */
+class HermesSelectContent {
+    constructor(state, popoverService, popoverContent, elementRef) {
+        this.state = state;
+        this.popoverService = popoverService;
+        this.popoverContent = popoverContent;
+        this.elementRef = elementRef;
+        this.canScrollUp = false;
+        this.canScrollDown = false;
+        this.subscriptions = [];
+        this.typeaheadBuffer = '';
+        popoverContent.contentType = HermesPopoverType.DROPDOWN;
+        popoverContent.contentAt = HermesPopoverPosition.BOTTOM_LEFT;
+        popoverService.panelClass.push('hermes-select-content-panel');
+    }
+    /**
+     * Fallback to hide when the overlay hasn't attached (or has just detached) this
+     * element's DOM node yet - mirrors hermes-dropdown-menu's own off-screen fallback.
+     */
+    get isOffScreen() {
+        return !this.popoverService.open;
+    }
+    ngAfterContentInit() {
+        this.subscriptions.push(this.popoverService.popoverVisible.subscribe(visible => {
+            if (visible) {
+                this.focusInitialItem();
+                // Wait for layout so scrollHeight reflects the now-visible content.
+                setTimeout(() => this.updateScrollButtonsVisibility());
+            }
+        }), this.state.valueChange.subscribe(() => this.updateItemAlignedPosition()), this.items.changes.subscribe(() => this.updateItemAlignedPosition()));
+        // Deferred one tick: HermesSelectTrigger sets state.triggerElement in its own
+        // ngAfterViewInit, which may not have run yet by the time this fires.
+        setTimeout(() => this.updateItemAlignedPosition());
+    }
+    onViewportScroll() {
+        this.updateScrollButtonsVisibility();
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        clearTimeout(this.typeaheadTimeout);
+    }
+    scrollBy(delta) {
+        this.viewport?.nativeElement.scrollBy({ top: delta });
+    }
+    /**
+     * Mirrors the "item-aligned" positioning a native <select> (and shadcn/Radix's Select)
+     * uses: instead of always dropping the popup below the trigger, it opens with the
+     * currently selected item lined up against the trigger, so the control feels like it
+     * expands in place rather than sliding a menu out from under itself. Falls back to a
+     * plain below-the-trigger dropdown position when there's no selection yet.
+     */
+    updateItemAlignedPosition() {
+        const base = mapPopoverKeyToPosition(HermesPopoverPosition.BOTTOM_LEFT, HermesPopoverType.DROPDOWN);
+        const trigger = this.state.triggerElement;
+        const selected = this.state.selectedItem;
+        if (!trigger || !selected) {
+            this.popoverContent.contentAt = base;
+            return;
+        }
+        const itemOffsetTop = this.offsetTopWithin(selected.nativeElement, this.elementRef.nativeElement);
+        const triggerHeight = trigger.getBoundingClientRect().height;
+        const itemHeight = selected.nativeElement.getBoundingClientRect().height;
+        this.popoverContent.contentAt = {
+            ...base,
+            originY: 'top',
+            overlayY: 'top',
+            // Centers the selected item's row against the trigger's own height, then cancels out
+            // how far that item already sits from the top of the (still off-screen) popup.
+            offsetY: (triggerHeight - itemHeight) / 2 - itemOffsetTop,
+        };
+    }
+    /**
+     * Walks the offsetParent chain rather than comparing getBoundingClientRect()s: while
+     * closed this element is `position: fixed` off-screen (see isOffScreen), so absolute
+     * screen coordinates aren't meaningful yet, but relative offsetTop distances still are.
+     */
+    offsetTopWithin(element, ancestor) {
+        let top = 0;
+        let node = element;
+        while (node && node !== ancestor) {
+            top += node.offsetTop;
+            node = node.offsetParent;
+        }
+        return top;
+    }
+    updateScrollButtonsVisibility() {
+        const el = this.viewport?.nativeElement;
+        if (!el) {
+            return;
+        }
+        this.canScrollUp = el.scrollTop > 0;
+        this.canScrollDown = Math.ceil(el.scrollTop + el.clientHeight) < el.scrollHeight;
+    }
+    onKeydown(event) {
+        const items = this.enabledItems();
+        if (!items.length) {
+            return;
+        }
+        const currentIndex = items.findIndex(item => item.nativeElement === document.activeElement);
+        switch (event.key) {
+            case Keys.ArrowDown:
+                event.preventDefault();
+                this.focusAt(items, currentIndex + 1 < items.length ? currentIndex + 1 : 0);
+                break;
+            case Keys.ArrowUp:
+                event.preventDefault();
+                this.focusAt(items, currentIndex > 0 ? currentIndex - 1 : items.length - 1);
+                break;
+            case Keys.Home:
+                event.preventDefault();
+                this.focusAt(items, 0);
+                break;
+            case Keys.End:
+                event.preventDefault();
+                this.focusAt(items, items.length - 1);
+                break;
+            default:
+                this.handleTypeahead(event, items);
+        }
+    }
+    enabledItems() {
+        return this.items?.filter(item => !item.disabled) ?? [];
+    }
+    focusAt(items, index) {
+        items[index]?.focus();
+    }
+    focusInitialItem() {
+        // The overlay's own content isn't attached/focusable synchronously with this emission.
+        setTimeout(() => {
+            const items = this.enabledItems();
+            if (!items.length) {
+                return;
+            }
+            (items.find(item => item.selected) ?? items[0]).focus();
+        });
+    }
+    handleTypeahead(event, items) {
+        if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        event.preventDefault();
+        clearTimeout(this.typeaheadTimeout);
+        this.typeaheadBuffer += event.key.toLowerCase();
+        this.typeaheadTimeout = setTimeout(() => (this.typeaheadBuffer = ''), TYPEAHEAD_RESET_MS);
+        const match = items.find(item => item.nativeElement.textContent?.trim().toLowerCase().startsWith(this.typeaheadBuffer));
+        match?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectContent, deps: [{ token: HermesSelectStateService }, { token: i2.HermesPopoverService }, { token: i2.HermesPopoverContent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesSelectContent, isStandalone: false, selector: "hermes-select-content", host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.id": "state.listboxId", "class.hermes-select-content": "true", "class.is-off-screen": "this.isOffScreen" } }, queries: [{ propertyName: "items", predicate: HermesSelectItem, descendants: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, static: true }], hostDirectives: [{ directive: i2.HermesPopoverContent }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n@if (canScrollUp) {\n  <button type=\"button\" class=\"hermes-select-scroll-button\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"scrollBy(-40)\">\n    <hermes-icon shape=\"angle\" direction=\"up\" size=\"16\"></hermes-icon>\n  </button>\n}\n<div #viewport class=\"hermes-select-viewport\" (scroll)=\"onViewportScroll()\">\n  <ng-content></ng-content>\n</div>\n@if (canScrollDown) {\n  <button type=\"button\" class=\"hermes-select-scroll-button\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"scrollBy(40)\">\n    <hermes-icon shape=\"angle\" direction=\"down\" size=\"16\"></hermes-icon>\n  </button>\n}\n", dependencies: [{ kind: "component", type: i3.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-select-content', hostDirectives: [HermesPopoverContent], host: {
+                        role: 'listbox',
+                        '[attr.id]': 'state.listboxId',
+                        '[class.hermes-select-content]': 'true',
+                        '(keydown)': 'onKeydown($event)',
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n@if (canScrollUp) {\n  <button type=\"button\" class=\"hermes-select-scroll-button\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"scrollBy(-40)\">\n    <hermes-icon shape=\"angle\" direction=\"up\" size=\"16\"></hermes-icon>\n  </button>\n}\n<div #viewport class=\"hermes-select-viewport\" (scroll)=\"onViewportScroll()\">\n  <ng-content></ng-content>\n</div>\n@if (canScrollDown) {\n  <button type=\"button\" class=\"hermes-select-scroll-button\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"scrollBy(40)\">\n    <hermes-icon shape=\"angle\" direction=\"down\" size=\"16\"></hermes-icon>\n  </button>\n}\n" }]
+        }], ctorParameters: () => [{ type: HermesSelectStateService }, { type: i2.HermesPopoverService }, { type: i2.HermesPopoverContent }, { type: i0.ElementRef }], propDecorators: { items: [{
+                type: ContentChildren,
+                args: [HermesSelectItem, { descendants: true }]
+            }], viewport: [{
+                type: ViewChild,
+                args: ['viewport', { static: true }]
+            }], isOffScreen: [{
+                type: HostBinding,
+                args: ['class.is-off-screen']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesSelectGroup {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesSelectGroup, isStandalone: false, selector: "hermes-select-group", host: { attributes: { "role": "group" }, properties: { "class.hermes-select-group": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hermes-select-group',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        role: 'group',
+                        '[class.hermes-select-group]': 'true',
+                    },
+                    standalone: false,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesSelectLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesSelectLabel, isStandalone: false, selector: "hermes-select-label", host: { properties: { "class.hermes-select-label": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hermes-select-label',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        '[class.hermes-select-label]': 'true',
+                    },
+                    standalone: false,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesSelectSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesSelectSeparator, isStandalone: false, selector: "hermes-select-separator", host: { attributes: { "role": "separator" }, properties: { "class.hermes-select-separator": "true" } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hermes-select-separator',
+                    template: '',
+                    host: {
+                        role: 'separator',
+                        '[class.hermes-select-separator]': 'true',
+                    },
+                    standalone: false,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const HERMES_SELECT_DIRECTIVES = [
+    HermesSelect,
+    HermesSelectTrigger,
+    HermesSelectValue,
+    HermesSelectContent,
+    HermesSelectItem,
+    HermesSelectGroup,
+    HermesSelectLabel,
+    HermesSelectSeparator,
+];
+class HermesSelectModule {
+    constructor() {
+        ClarityIcons.addIcons(angleIcon, checkIcon);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectModule, declarations: [HermesSelect,
+            HermesSelectTrigger,
+            HermesSelectValue,
+            HermesSelectContent,
+            HermesSelectItem,
+            HermesSelectGroup,
+            HermesSelectLabel,
+            HermesSelectSeparator], imports: [CommonModule, HermesIcon, HermesPopoverModuleNext], exports: [HermesSelect,
+            HermesSelectTrigger,
+            HermesSelectValue,
+            HermesSelectContent,
+            HermesSelectItem,
+            HermesSelectGroup,
+            HermesSelectLabel,
+            HermesSelectSeparator] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectModule, imports: [CommonModule, HermesIcon, HermesPopoverModuleNext] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, HermesIcon, HermesPopoverModuleNext],
+                    declarations: [HERMES_SELECT_DIRECTIVES],
+                    exports: [HERMES_SELECT_DIRECTIVES],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HermesSelect, HermesSelectContent, HermesSelectGroup, HermesSelectItem, HermesSelectLabel, HermesSelectModule, HermesSelectSeparator, HermesSelectStateService, HermesSelectTrigger, HermesSelectValue };
+//# sourceMappingURL=hermes-ui-angular-forms-select.mjs.map