@mathstack/ui 0.0.1-beta.0

package/fesm2022/mathstack-ui.mjs

@@ -0,0 +1,2175 @@
+import * as i0 from '@angular/core';
+import { Input, ViewChild, Component, ContentChildren, ContentChild, Injectable, Inject, EventEmitter, Output, forwardRef, TemplateRef, ViewEncapsulation, inject, DestroyRef, NgZone, NgModule, ChangeDetectionStrategy, InjectionToken, Directive } from '@angular/core';
+import { BehaviorSubject, startWith, map, distinctUntilChanged, withLatestFrom, take, delay, skip, combineLatest, filter, pairwise, switchMap, merge, mergeAll, debounceTime, Subject, of, shareReplay, fromEvent, scan } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT, AsyncPipe } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/cdk/platform';
+import { Platform } from '@angular/cdk/platform';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { runNgChangeDetectionThen, NgOnChangesUtilities, safeAssign } from '@mathstack/app-kit';
+import { MatIconModule } from '@angular/material/icon';
+import { ascending, min } from 'd3';
+import { isEqual } from 'lodash-es';
+import * as i2$1 from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+
+let nextUniqueId$3 = 0;
+class ListboxOptionComponent {
+    constructor(service) {
+        this.service = service;
+        /** Whether the option is selected.
+         * If this property is changed during this component's lifecycle, no new value will be emitted from the listbox.
+         * Box label and select all button will respond to changes.
+         * @default false
+         */
+        this.selected = false;
+        /** Whether the option is selected.
+         * If this property is changed during this component's lifecycle, no new value will be emitted from the listbox.
+         * Box label and select all button will respond to changes.
+         * @default false
+         */
+        this.disabled = false;
+        this.id = nextUniqueId$3++;
+        // Only used for to update styles on change in listbox.component.html
+        this._selected = new BehaviorSubject(false);
+        this.selected$ = this._selected.asObservable();
+        this._disabled = new BehaviorSubject(false);
+        this.disabled$ = this._disabled.asObservable();
+        this.externalPropertyChanges = new BehaviorSubject(null);
+        this.externalPropertyChanges$ = this.externalPropertyChanges.asObservable();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get valueToEmit() {
+        return this.value || this.label?.nativeElement?.innerText.trim();
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.updateDisabled(this.disabled);
+            if (!this.isFirstChangeAndValueIsFalse(changes, 'disabled')) {
+                this.externalPropertyChanges.next(this.getPropertyChange('disabled'));
+            }
+        }
+        if (changes['selected']) {
+            if (changes['selected'].isFirstChange()) {
+                this.updateSelected(this.selected);
+                if (this.selected) {
+                    this.externalPropertyChanges.next(this.getPropertyChange('selected'));
+                }
+            }
+            else if (!this.disabled && this.selected !== this._selected.value) {
+                this.updateSelected(this.selected);
+                this.externalPropertyChanges.next(this.getPropertyChange('selected'));
+            }
+        }
+    }
+    isFirstChangeAndValueIsFalse(change, property) {
+        return change[property].isFirstChange() && !this[property];
+    }
+    getPropertyChange(property) {
+        return {
+            property,
+            value: this[property],
+            comboboxId: this.service.id,
+            id: this.id,
+            optionValue: this.valueToEmit,
+        };
+    }
+    updateSelected(selected) {
+        this._selected.next(selected);
+    }
+    updateDisabled(disabled) {
+        this._disabled.next(disabled);
+    }
+    select() {
+        if (!this._disabled.value) {
+            this.updateSelected(true);
+        }
+    }
+    deselect() {
+        if (!this._disabled.value) {
+            this.updateSelected(false);
+        }
+    }
+    toggleSelected() {
+        this.updateSelected(!this._selected.value);
+    }
+    isSelected() {
+        return this._selected.value;
+    }
+    isDisabled() {
+        return this._disabled.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxOptionComponent, deps: [{ token: ComboboxService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ListboxOptionComponent, isStandalone: true, selector: "hsi-ui-listbox-option", inputs: { boxDisplayLabel: "boxDisplayLabel", value: "value", selected: "selected", disabled: "disabled", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "template", first: true, predicate: ["option"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #option>\n  <div class=\"hsi-ui-listbox-option-container\">\n    @if (isSelected()) {\n      <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n    }\n    <div\n      #label\n      class=\"hsi-ui-listbox-option-label\"\n      [attr.aria-label]=\"ariaLabel\"\n      ><ng-content></ng-content\n    ></div>\n  </div>\n</ng-template>\n\n<ng-template #selectedIcon\n  ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n  ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-listbox-option', imports: [CommonModule], template: "<ng-template #option>\n  <div class=\"hsi-ui-listbox-option-container\">\n    @if (isSelected()) {\n      <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n    }\n    <div\n      #label\n      class=\"hsi-ui-listbox-option-label\"\n      [attr.aria-label]=\"ariaLabel\"\n      ><ng-content></ng-content\n    ></div>\n  </div>\n</ng-template>\n\n<ng-template #selectedIcon\n  ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n  ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"] }]
+        }], ctorParameters: () => [{ type: ComboboxService }], propDecorators: { label: [{
+                type: ViewChild,
+                args: ['label']
+            }], template: [{
+                type: ViewChild,
+                args: ['option']
+            }], boxDisplayLabel: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+let nextUniqueId$2 = 0;
+class ListboxLabelComponent {
+    constructor(service) {
+        this.service = service;
+        this.id = `${this.service.id}-listbox-label-${nextUniqueId$2++}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxLabelComponent, deps: [{ token: ComboboxService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ListboxLabelComponent, isStandalone: true, selector: "hsi-ui-listbox-label", host: { classAttribute: "hsi-ui-listbox-label" }, viewQueries: [{ propertyName: "labelContent", first: true, predicate: ["label"], descendants: true }, { propertyName: "label", first: true, predicate: ["text"], descendants: true }], ngImport: i0, template: "<ng-template #label>\n  <p class=\"hsi-ui-listbox-label\" [id]=\"id\" role=\"presentation\" #text\n    ><ng-content></ng-content\n  ></p>\n</ng-template>\n", styles: [".hsi-ui-listbox-label{padding:var(--hsi-ui-listbox-label-padding);font-size:var(--hsi-ui-listbox-label-font-size);font-weight:var(--hsi-ui-listbox-label-font-weight);text-transform:var(--hsi-ui-listbox-label-text-transform);margin-right:var(--hsi-ui-listbox-label-margin-right)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-listbox-label', imports: [CommonModule], host: {
+                        class: 'hsi-ui-listbox-label',
+                    }, template: "<ng-template #label>\n  <p class=\"hsi-ui-listbox-label\" [id]=\"id\" role=\"presentation\" #text\n    ><ng-content></ng-content\n  ></p>\n</ng-template>\n", styles: [".hsi-ui-listbox-label{padding:var(--hsi-ui-listbox-label-padding);font-size:var(--hsi-ui-listbox-label-font-size);font-weight:var(--hsi-ui-listbox-label-font-weight);text-transform:var(--hsi-ui-listbox-label-text-transform);margin-right:var(--hsi-ui-listbox-label-margin-right)}\n"] }]
+        }], ctorParameters: () => [{ type: ComboboxService }], propDecorators: { labelContent: [{
+                type: ViewChild,
+                args: ['label']
+            }], label: [{
+                type: ViewChild,
+                args: ['text']
+            }] } });
+
+class ListboxGroupComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    ngAfterContentInit() {
+        this.options$ = this.options.changes.pipe(startWith(''), map(() => this.options.toArray()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxGroupComponent, deps: [{ token: ComboboxService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ListboxGroupComponent, isStandalone: true, selector: "hsi-ui-listbox-group", host: { classAttribute: "hsi-ui-listbox-group" }, queries: [{ propertyName: "label", first: true, predicate: ListboxLabelComponent, descendants: true }, { propertyName: "options", predicate: ListboxOptionComponent }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hsi-ui-listbox-group',
+                    template: `<ng-content></ng-content>`,
+                    host: {
+                        class: 'hsi-ui-listbox-group',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: ComboboxService }], propDecorators: { label: [{
+                type: ContentChild,
+                args: [ListboxLabelComponent]
+            }], options: [{
+                type: ContentChildren,
+                args: [ListboxOptionComponent]
+            }] } });
+
+class ListboxFilteringService {
+    updateSearchString(char) {
+        if (typeof this.searchTimeout === 'number') {
+            clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchString = '';
+        }, 500);
+        this.searchString += char;
+    }
+    resetSearch() {
+        clearTimeout(this.searchTimeout);
+        this.searchString = '';
+    }
+    getIndexByLetter(options, searchString, startIndex) {
+        const orderedOptions = [
+            ...options.slice(startIndex),
+            ...options.slice(0, startIndex),
+        ];
+        const firstMatch = this.filterOptionsBySearchString(orderedOptions, searchString)[0];
+        const allSameLetter = (array) => array.every((letter) => letter === array[0]);
+        if (firstMatch) {
+            return options.indexOf(firstMatch);
+        }
+        else if (allSameLetter(searchString.split(''))) {
+            const matches = this.filterOptionsBySearchString(orderedOptions, searchString[0]);
+            return options.indexOf(matches[0]);
+        }
+        else {
+            return -1;
+        }
+    }
+    filterOptionsBySearchString(options = [], searchString, exclude = []) {
+        return options.filter((option) => {
+            const matches = option.label?.nativeElement.innerText
+                .toLowerCase()
+                .indexOf(searchString.toLowerCase()) === 0;
+            return (matches &&
+                exclude
+                    .map((x) => x.label?.nativeElement.innerText)
+                    .indexOf(option.label?.nativeElement.innerText) < 0);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxFilteringService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxFilteringService, decorators: [{
+            type: Injectable
+        }] });
+
+class ListboxScrollService {
+    constructor(document) {
+        this.document = document;
+    }
+    isElementInView(element) {
+        const bounding = element.getBoundingClientRect();
+        return (bounding.top >= 0 &&
+            bounding.left >= 0 &&
+            bounding.bottom <=
+                (window.innerHeight || this.document.documentElement.clientHeight) &&
+            bounding.right <=
+                (window.innerWidth || this.document.documentElement.clientWidth));
+    }
+    isScrollable(element) {
+        return element && element.parentElement.clientHeight < element.scrollHeight;
+    }
+    maintainElementVisibility(activeElement, scrollParent) {
+        const { offsetHeight, offsetTop } = activeElement;
+        const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
+        const isAbove = offsetTop < scrollTop;
+        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+        if (isAbove) {
+            scrollParent.scrollTo(0, offsetTop);
+        }
+        else if (isBelow) {
+            scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
+        }
+    }
+    scrollToTop(scrollParent) {
+        scrollParent.scrollTo(0, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxScrollService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxScrollService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class ActiveIndexService {
+    constructor(service, filtering, scrolling) {
+        this.service = service;
+        this.filtering = filtering;
+        this.scrolling = scrolling;
+        this.activeIndex = new BehaviorSubject(null);
+        this.activeIndex$ = this.activeIndex.asObservable().pipe(distinctUntilChanged());
+    }
+    init(allOptions$, destroyRef) {
+        this.listenToActions(allOptions$, destroyRef);
+        this.initActiveId();
+        this.setActiveDescendant();
+    }
+    setScrollContentRef(scrollContentRef) {
+        this.scrollContentRef = scrollContentRef;
+    }
+    initActiveId() {
+        if (!this.service.nullActiveIdOnClose) {
+            this.activeIndex.next(0);
+        }
+    }
+    listenToActions(allOptions$, destroyRef) {
+        this.service.optionAction$
+            .pipe(takeUntilDestroyed(destroyRef), withLatestFrom(this.activeIndex$, allOptions$))
+            .subscribe(([action, activeIndex, options]) => {
+            if (!this.actionIsTypingChar(action)) {
+                if (action === OptionAction.last ||
+                    action === OptionAction.next ||
+                    action === OptionAction.pageDown) {
+                    this.setNextActiveIndex(action, activeIndex, options);
+                }
+                else if (action === OptionAction.first ||
+                    action === OptionAction.pageUp ||
+                    action === OptionAction.previous) {
+                    this.setPrevActiveIndex(action, activeIndex, options);
+                }
+                else if (action === OptionAction.zeroActiveIndex) {
+                    this.setActiveIndex(0, OptionAction.next, options);
+                }
+                else if (action === OptionAction.nullActiveIndex) {
+                    // should only be emitted from editable textboxes
+                    if (this.service.nullActiveIdOnClose) {
+                        this.setActiveIndex(null, OptionAction.next, options);
+                    }
+                }
+            }
+            else if (action.length === 1) {
+                this.updateActiveIndexFromKeyChar(action, options);
+            }
+        });
+    }
+    setNextActiveIndex(action, activeIndex, options) {
+        const maxIndex = options.length - 1;
+        if (activeIndex === null && action === OptionAction.next) {
+            this.setActiveIndex(0, OptionAction.next, options);
+        }
+        else {
+            this.setActiveIndex(this.getIndexForAction(activeIndex, maxIndex, action), OptionAction.next, options);
+        }
+    }
+    setPrevActiveIndex(action, activeIndex, options) {
+        const maxIndex = options.length - 1;
+        this.setActiveIndex(this.getIndexForAction(activeIndex, maxIndex, action), OptionAction.previous, options);
+    }
+    setActiveIndex(index, actionIfDisabled, options, scrollToIndex = true) {
+        if (index === this.activeIndex.value)
+            return;
+        if (index === null || options.every((x) => x.isDisabled())) {
+            this.handleActiveIndexWhenCannotBeSet();
+        }
+        else {
+            let attempt = index;
+            while (actionIfDisabled && options[attempt]?.isDisabled()) {
+                if (actionIfDisabled === OptionAction.next) {
+                    if (attempt === options.length - 1) {
+                        attempt = 0;
+                    }
+                    else {
+                        attempt++;
+                    }
+                }
+                else if (actionIfDisabled === OptionAction.previous) {
+                    if (attempt === 0) {
+                        attempt = options.length - 1;
+                    }
+                    else {
+                        attempt--;
+                    }
+                }
+            }
+            if (attempt >= 0 &&
+                attempt < options.length &&
+                !options[attempt]?.isDisabled()) {
+                if (scrollToIndex) {
+                    this.handleScrollingForNewIndex(attempt, options);
+                }
+                this.activeIndex.next(attempt);
+            }
+            else {
+                this.handleActiveIndexWhenCannotBeSet();
+            }
+        }
+    }
+    handleActiveIndexWhenCannotBeSet() {
+        this.service.emitTextboxFocus(FocusTextbox.includeMobile);
+        if (this.service.autoComplete !== AutoComplete.none) {
+            this.activeIndex.next(null);
+        }
+    }
+    handleScrollingForNewIndex(index, options) {
+        const indexEl = options[index].label?.nativeElement.parentElement;
+        if (indexEl && this.scrollContentRef.nativeElement) {
+            if (this.scrolling.isScrollable(this.scrollContentRef.nativeElement)) {
+                this.scrolling.maintainElementVisibility(indexEl, this.scrollContentRef.nativeElement);
+            }
+            if (!this.scrolling.isElementInView(indexEl)) {
+                indexEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+        }
+    }
+    getIndexForAction(currentIndex, maxIndex, action) {
+        const pageSize = 10; // used for pageup/pagedown
+        const loop = this.service.autoComplete !== AutoComplete.none;
+        const validIndex = currentIndex ?? 0;
+        const previous = () => {
+            if (loop) {
+                return validIndex === 0 ? maxIndex : validIndex - 1;
+            }
+            else {
+                return Math.max(0, validIndex - 1);
+            }
+        };
+        const next = () => {
+            if (loop) {
+                return validIndex === maxIndex ? 0 : validIndex + 1;
+            }
+            else {
+                return Math.min(maxIndex, validIndex + 1);
+            }
+        };
+        switch (action) {
+            case OptionAction.first:
+                return 0;
+            case OptionAction.last:
+                return maxIndex;
+            case OptionAction.previous:
+                return previous();
+            case OptionAction.next:
+                return next();
+            case OptionAction.pageUp:
+                return Math.max(0, validIndex - pageSize);
+            case OptionAction.pageDown:
+                return Math.min(maxIndex, validIndex + pageSize);
+            default:
+                return validIndex;
+        }
+    }
+    actionIsTypingChar(action) {
+        return !Object.values(OptionAction).includes(action);
+    }
+    updateActiveIndexFromKeyChar(char, options) {
+        this.filtering.updateSearchString(char);
+        const searchIndex = this.filtering.getIndexByLetter(options, this.filtering.searchString, this.activeIndex.value + 1);
+        if (searchIndex >= 0) {
+            this.setActiveIndex(searchIndex, OptionAction.next, options);
+        }
+        else {
+            this.filtering.resetSearch();
+        }
+    }
+    setActiveDescendant() {
+        const activeDescendant$ = this.activeIndex$.pipe(map((i) => {
+            if (i === null || i < 0) {
+                return null;
+            }
+            else {
+                return `${this.service.id}-listbox-option-${i}`;
+            }
+        }));
+        this.service.initActiveDescendant(activeDescendant$);
+    }
+    setActiveIndexToFirstSelectedOrDefault(options) {
+        let firstSelected = options.findIndex((x) => x.isSelected());
+        if (firstSelected === -1) {
+            if (this.service.shouldAutoSelectOnListboxClose) {
+                firstSelected = 0;
+            }
+            else {
+                firstSelected = this.service.nullActiveIdOnClose ? null : 0;
+            }
+        }
+        if (firstSelected > -1) {
+            this.setActiveIndex(firstSelected, OptionAction.next, options);
+        }
+        if (firstSelected === null) {
+            this.activeIndex.next(null);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ActiveIndexService, deps: [{ token: ComboboxService }, { token: ListboxFilteringService }, { token: ListboxScrollService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ActiveIndexService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ActiveIndexService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: ComboboxService }, { type: ListboxFilteringService }, { type: ListboxScrollService }] });
+
+class ListboxComponent {
+    constructor(service, activeIndex, filtering, scrolling, destroyRef) {
+        this.service = service;
+        this.activeIndex = activeIndex;
+        this.filtering = filtering;
+        this.scrolling = scrolling;
+        this.destroyRef = destroyRef;
+        this.findsOptionOnTyping = true;
+        this.isMultiSelect = false;
+        this.maxHeight = 300;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.valueChanges = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['isMultiSelect']) {
+            this.service.isMultiSelect = this.isMultiSelect;
+        }
+    }
+    ngAfterContentInit() {
+        this.service.setProjectedContent(this.groups, this.options);
+        this.options
+            .toArray()
+            .concat(this.groups.toArray().flatMap((group) => group.options?.toArray() ?? []))
+            .filter((option) => option instanceof SelectAllListboxOptionComponent)
+            .forEach((option) => {
+            option.setControlledOptions();
+            option.listenForOptionSelections();
+        });
+        this.activeIndex.init(this.service.allOptions$, this.destroyRef);
+        this.setSelectedEmitting();
+        this.setOnBlurEvent();
+        this.setOptionAction();
+        setTimeout(() => {
+            this.updateActiveIndexOnExternalChanges();
+        }, 0);
+    }
+    ngAfterViewInit() {
+        this.activeIndex.setScrollContentRef(this.scrollableContentRef);
+        this.setResetOnClose();
+        this.setOnOptionChanges();
+    }
+    setOnOptionChanges() {
+        this.service.allOptions$.pipe(take(1), delay(0)).subscribe(() => {
+            this.service.setProjectedContentIsInDOM();
+        });
+        // cannot pass allOptions$ to handleOptionClick through template because @if (allOptions | async; as allOptions) will delay rendering of option.template and option.label will not be defined when setBoxLabel is called. Thus subscribe and set allOptions in here.
+        this.service.allOptions$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((options) => {
+            this.service.allOptions = options;
+        });
+    }
+    setSelectedEmitting() {
+        this.service.selectedOptionsToEmit$
+            .pipe(takeUntilDestroyed(this.destroyRef), skip(1), map((options) => {
+            const selections = [];
+            for (const option of options) {
+                const value = option.valueToEmit;
+                selections.push(value);
+            }
+            return selections;
+        }))
+            .subscribe((value) => {
+            this.emitValue(value);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    emitValue(selections) {
+        const value = this.isMultiSelect ? selections : selections[0];
+        if (this.ngFormControl) {
+            this.ngFormControl.setValue(value);
+        }
+        else {
+            this.valueChanges.emit(value);
+        }
+    }
+    setOnBlurEvent() {
+        this.service.textboxBlur$
+            .pipe(takeUntilDestroyed(this.destroyRef), withLatestFrom(combineLatest([this.service.isOpen$, this.activeIndex.activeIndex$]), this.service.allOptions$), filter(([, [isOpen]]) => isOpen))
+            .subscribe(([, [isOpen, activeIndex], options]) => {
+            if (isOpen) {
+                if (this.shouldAutoSelectOptionOnBlur(activeIndex, options)) {
+                    const index = activeIndex ?? 0;
+                    this.selectOptionFromIndex(index, options);
+                }
+                this.service.closeListbox();
+            }
+        });
+    }
+    shouldAutoSelectOptionOnBlur(activeIndex, options) {
+        const activeIndexOptionIsSelected = options[activeIndex]?.isSelected();
+        return (this.service.shouldAutoSelectOnListboxClose &&
+            !activeIndexOptionIsSelected);
+    }
+    setOptionAction() {
+        this.service.optionAction$
+            .pipe(takeUntilDestroyed(this.destroyRef), withLatestFrom(this.activeIndex.activeIndex$, this.service.allOptions$))
+            .subscribe(([action, activeIndex, options]) => {
+            if (options.length === 0) {
+                this.service.emitTextboxFocus();
+                return;
+            }
+            if (!this.actionIsTypingChar(action)) {
+                if (action === OptionAction.select) {
+                    this.selectOptionFromIndex(activeIndex, options);
+                }
+                //double check because typesafety on this kind of sucks, could add && str.match(/\S| /)
+            }
+            else if (action.length === 1) {
+                this.activeIndex.updateActiveIndexFromKeyChar(action, options);
+            }
+            else {
+                throw new Error(`Invalid action: ${action}`);
+            }
+        });
+    }
+    actionIsTypingChar(action) {
+        return !Object.values(OptionAction).includes(action);
+    }
+    setResetOnClose() {
+        this.service.isOpen$
+            .pipe(takeUntilDestroyed(this.destroyRef), skip(1), filter((isOpen) => !isOpen), withLatestFrom(this.service.allOptions$))
+            .subscribe(([, options]) => {
+            this.activeIndex.setActiveIndexToFirstSelectedOrDefault(options);
+            this.resetScroll();
+            this.service.emitTextboxFocus(FocusTextbox.includeMobile);
+        });
+    }
+    resetScroll() {
+        if (this.scrolling.isScrollable(this.scrollableContentRef.nativeElement)) {
+            this.scrolling.scrollToTop(this.scrollableContentRef.nativeElement.parentElement);
+        }
+    }
+    getListboxLabelAsBoxPlaceholder() {
+        return this.label?.label?.nativeElement.innerText || '';
+    }
+    selectOptionFromIndex(index, options) {
+        this.handleOptionSelect(index, options);
+    }
+    handleOptionClick(event, optionIndex, groupIndex) {
+        event.stopPropagation();
+        this.service.setIsKeyboardEvent(false);
+        this.handleOptionSelect(optionIndex, this.service.allOptions, groupIndex);
+        if (!this.isMultiSelect) {
+            this.service.closeListbox();
+        }
+        this.service.emitTextboxFocus();
+    }
+    handleOptionSelect(optionIndex, options, groupIndex) {
+        const index = groupIndex
+            ? this.getOptionIndexFromGroups(groupIndex, optionIndex)
+            : optionIndex;
+        const option = options[index];
+        if (!option || option.isDisabled())
+            return;
+        this.toggleOptionSelected(option, options);
+        if (options[optionIndex].isSelected()) {
+            this.activeIndex.setActiveIndex(index, null, options);
+        }
+        else {
+            let nextSelectedIndex = options.findIndex((o, i) => i > optionIndex && o.isSelected());
+            if (nextSelectedIndex === -1) {
+                nextSelectedIndex = options.findIndex((o) => o.isSelected());
+            }
+            this.activeIndex.setActiveIndex(nextSelectedIndex, null, options);
+        }
+    }
+    toggleOptionSelected(option, options) {
+        if (!option || option.isDisabled()) {
+            this.service.emitTextboxFocus();
+            return;
+        }
+        if (this.isMultiSelect) {
+            option.toggleSelected();
+            this.updateSelectedOptionsToEmit(options);
+        }
+        else {
+            this.selectSingleSelectOption(option, options);
+        }
+    }
+    updateSelectedOptionsToEmit(options) {
+        const selected = this.getSelectedOptions(options);
+        this.service.setSelectedOptionsToEmit(selected);
+    }
+    selectSingleSelectOption(option, options) {
+        if (option.isSelected())
+            return;
+        options.forEach((o) => {
+            if (o !== option) {
+                o.deselect();
+            }
+        });
+        option.select();
+        this.updateSelectedOptionsToEmit(options);
+    }
+    isSelectAllListboxOption(option) {
+        return option instanceof SelectAllListboxOptionComponent;
+    }
+    getOptionIndexFromGroups(groupIndex, optionIndex) {
+        return (this.groups
+            .toArray()
+            .slice(0, groupIndex)
+            .reduce((acc, curr) => acc + curr.options.toArray().length, 0) +
+            optionIndex);
+    }
+    getSelectedOptions(options) {
+        return options?.filter((option) => !this.isSelectAllListboxOption(option) && option.isSelected());
+    }
+    updateActiveIndexOnExternalChanges() {
+        this.service.optionPropertyChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef), pairwise(), filter(([prev, curr]) => {
+            return !!prev && !!curr && prev.optionValue !== curr.optionValue;
+        }), withLatestFrom(this.service.allOptions$, this.activeIndex.activeIndex$))
+            .subscribe(([, options]) => {
+            this.activeIndex.setActiveIndexToFirstSelectedOrDefault(options);
+        });
+    }
+    handleOptionMousedown() {
+        this.service.ignoreBlur = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxComponent, deps: [{ token: ComboboxService }, { token: ActiveIndexService }, { token: ListboxFilteringService }, { token: ListboxScrollService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ListboxComponent, isStandalone: true, selector: "hsi-ui-listbox", inputs: { ngFormControl: "ngFormControl", findsOptionOnTyping: "findsOptionOnTyping", isMultiSelect: "isMultiSelect", maxHeight: "maxHeight" }, outputs: { valueChanges: "valueChanges" }, host: { classAttribute: "hsi-ui-listbox-component" }, providers: [
+            ListboxFilteringService,
+            ListboxScrollService,
+            ActiveIndexService,
+        ], queries: [{ propertyName: "label", first: true, predicate: ListboxLabelComponent }, { propertyName: "options", predicate: ListboxOptionComponent }, { propertyName: "groups", predicate: ListboxGroupComponent }], viewQueries: [{ propertyName: "scrollableContentRef", first: true, predicate: ["scrollableContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollableContent\n  role=\"listbox\"\n  tabindex=\"-1\"\n  [id]=\"service.id + '-listbox'\"\n  class=\"hsi-ui-listbox\"\n  [class.open]=\"service.isOpen$ | async\"\n  [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n  [attr.aria-labelledby]=\"\n    (service.label$ | async) ? service.comboboxLabelId : label?.id\n  \"\n  [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"label?.labelContent || nullContent\"\n  ></ng-container>\n  @if ((service.groups$ | async)?.length > 0) {\n    <ng-container *ngTemplateOutlet=\"groupedOptions\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"options\"></ng-container>\n  }\n</div>\n\n<ng-template #options>\n  @for (\n    option of service.allOptions$ | async;\n    track option.id;\n    let i = $index\n  ) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionTemplate;\n        context: {\n          $implicit: option,\n          index: i,\n          groupIndex: null,\n        }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptions>\n  @for (group of service.groups$ | async; track $index; let i = $index) {\n    <div class=\"hsi-ui-listbox-group-container\">\n      <div\n        role=\"group\"\n        tabIndex=\"-1\"\n        class=\"hsi-ui-listbox-group\"\n        [ngClass]=\"'listbox-group-' + i\"\n        [attr.aria-labelledby]=\"group.label?.id\"\n      >\n        @if (group.label) {\n          <div\n            role=\"presentation\"\n            [id]=\"group.label?.id\"\n            class=\"hsi-ui-listbox-group-label\"\n            [ngClass]=\"'hsi-ui-listbox-group-' + i + '-label'\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"group.label?.labelContent || nullContent\"\n            ></ng-container>\n          </div>\n        }\n        @for (\n          option of group.options$ | async;\n          track option.id;\n          let j = $index\n        ) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              optionTemplate;\n              context: {\n                $implicit: option,\n                index: j,\n                groupIndex: i,\n              }\n            \"\n          ></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #optionTemplate\n  let-option\n  let-index=\"index\"\n  let-groupIndex=\"groupIndex\"\n>\n  <div\n    role=\"option\"\n    tabindex=\"-1\"\n    [id]=\"\n      service.id +\n      '-listbox-option-' +\n      (groupIndex !== null\n        ? getOptionIndexFromGroups(groupIndex, index)\n        : index)\n    \"\n    class=\"hsi-ui-listbox-option\"\n    [class.grouped-option]=\"groupIndex !== null\"\n    [ngClass]=\"\n      groupIndex !== null\n        ? 'hsi-ui-listbox-option-' + getOptionIndexFromGroups(groupIndex, index)\n        : 'hsi-ui-listbox-option-' + index\n    \"\n    [class.current]=\"\n      (activeIndex.activeIndex$ | async) ===\n        (groupIndex !== null\n          ? getOptionIndexFromGroups(groupIndex, index)\n          : index) && (option.disabled$ | async) !== true\n    \"\n    [class.disabled]=\"option.disabled$ | async\"\n    [class.keyboard-current]=\"\n      (service.isKeyboardEvent$ | async) &&\n      (activeIndex.activeIndex$ | async) ===\n        (groupIndex !== null\n          ? getOptionIndexFromGroups(groupIndex, index)\n          : index) &&\n      (option.disabled$ | async) !== true\n    \"\n    [class.multi]=\"isMultiSelect\"\n    [class.selected]=\"option.selected$ | async\"\n    [attr.aria-checked]=\"isMultiSelect ? (option.selected$ | async) : null\"\n    [attr.aria-selected]=\"!isMultiSelect ? (option.selected$ | async) : null\"\n    [attr.aria-disabled]=\"option.disabled$ | async\"\n    data-cy=\"listbox-option\"\n    (click)=\"handleOptionClick($event, index, groupIndex)\"\n    (mousedown)=\"handleOptionMousedown()\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.template\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #nullContent></ng-template>\n", styles: [":host{position:absolute;top:100%;left:0;width:100%;z-index:var(--hsi-ui-listbox-z-index);background:var(--hsi-ui-listbox-background);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}:host ::-webkit-scrollbar-track{background:transparent}.hsi-ui-listbox{padding-top:var(--hsi-ui-listbox-padding-top);background:var(--hsi-ui-listbox-background);border-left:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-right:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius);max-height:var(--hsi-ui-listbox-max-height);overflow-y:auto}.hsi-ui-listbox:not(.open){display:none}.hsi-ui-listbox-option{display:block;cursor:pointer;margin-left:var(--hsi-ui-listbox-padding-left);margin-right:var(--hsi-ui-listbox-padding-right)}.hsi-ui-listbox-option:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option:last-child,.hsi-ui-listbox-option.current.keyboard-current:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option.current.keyboard-current:last-child{margin-bottom:var(--hsi-ui-listbox-padding-bottom);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}.hsi-ui-listbox-option:hover{background:var(--hsi-ui-listbox-option-hover-background);border-radius:var(--hsi-ui-listbox-option-hover-border-radius)}.hsi-ui-listbox-option.selected{background:var(--hsi-ui-listbox-option-selected-background);border-radius:var(--hsi-ui-listbox-option-selected-border-radius)}.hsi-ui-listbox-option.disabled{color:var(--hsi-ui-listbox-option-disabled-color)}.hsi-ui-listbox-option.current.keyboard-current{background:var(--hsi-ui-listbox-option-current-background);color:var(--hsi-ui-listbox-option-current-color);border-radius:var(--hsi-ui-listbox-option-current-border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ListboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-listbox', imports: [CommonModule], providers: [
+                        ListboxFilteringService,
+                        ListboxScrollService,
+                        ActiveIndexService,
+                    ], host: {
+                        class: 'hsi-ui-listbox-component',
+                    }, template: "<div\n  #scrollableContent\n  role=\"listbox\"\n  tabindex=\"-1\"\n  [id]=\"service.id + '-listbox'\"\n  class=\"hsi-ui-listbox\"\n  [class.open]=\"service.isOpen$ | async\"\n  [style.--hsi-ui-listbox-max-height.px]=\"maxHeight\"\n  [attr.aria-labelledby]=\"\n    (service.label$ | async) ? service.comboboxLabelId : label?.id\n  \"\n  [attr.aria-multiselectable]=\"isMultiSelect\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"label?.labelContent || nullContent\"\n  ></ng-container>\n  @if ((service.groups$ | async)?.length > 0) {\n    <ng-container *ngTemplateOutlet=\"groupedOptions\"></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"options\"></ng-container>\n  }\n</div>\n\n<ng-template #options>\n  @for (\n    option of service.allOptions$ | async;\n    track option.id;\n    let i = $index\n  ) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionTemplate;\n        context: {\n          $implicit: option,\n          index: i,\n          groupIndex: null,\n        }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #groupedOptions>\n  @for (group of service.groups$ | async; track $index; let i = $index) {\n    <div class=\"hsi-ui-listbox-group-container\">\n      <div\n        role=\"group\"\n        tabIndex=\"-1\"\n        class=\"hsi-ui-listbox-group\"\n        [ngClass]=\"'listbox-group-' + i\"\n        [attr.aria-labelledby]=\"group.label?.id\"\n      >\n        @if (group.label) {\n          <div\n            role=\"presentation\"\n            [id]=\"group.label?.id\"\n            class=\"hsi-ui-listbox-group-label\"\n            [ngClass]=\"'hsi-ui-listbox-group-' + i + '-label'\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"group.label?.labelContent || nullContent\"\n            ></ng-container>\n          </div>\n        }\n        @for (\n          option of group.options$ | async;\n          track option.id;\n          let j = $index\n        ) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              optionTemplate;\n              context: {\n                $implicit: option,\n                index: j,\n                groupIndex: i,\n              }\n            \"\n          ></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #optionTemplate\n  let-option\n  let-index=\"index\"\n  let-groupIndex=\"groupIndex\"\n>\n  <div\n    role=\"option\"\n    tabindex=\"-1\"\n    [id]=\"\n      service.id +\n      '-listbox-option-' +\n      (groupIndex !== null\n        ? getOptionIndexFromGroups(groupIndex, index)\n        : index)\n    \"\n    class=\"hsi-ui-listbox-option\"\n    [class.grouped-option]=\"groupIndex !== null\"\n    [ngClass]=\"\n      groupIndex !== null\n        ? 'hsi-ui-listbox-option-' + getOptionIndexFromGroups(groupIndex, index)\n        : 'hsi-ui-listbox-option-' + index\n    \"\n    [class.current]=\"\n      (activeIndex.activeIndex$ | async) ===\n        (groupIndex !== null\n          ? getOptionIndexFromGroups(groupIndex, index)\n          : index) && (option.disabled$ | async) !== true\n    \"\n    [class.disabled]=\"option.disabled$ | async\"\n    [class.keyboard-current]=\"\n      (service.isKeyboardEvent$ | async) &&\n      (activeIndex.activeIndex$ | async) ===\n        (groupIndex !== null\n          ? getOptionIndexFromGroups(groupIndex, index)\n          : index) &&\n      (option.disabled$ | async) !== true\n    \"\n    [class.multi]=\"isMultiSelect\"\n    [class.selected]=\"option.selected$ | async\"\n    [attr.aria-checked]=\"isMultiSelect ? (option.selected$ | async) : null\"\n    [attr.aria-selected]=\"!isMultiSelect ? (option.selected$ | async) : null\"\n    [attr.aria-disabled]=\"option.disabled$ | async\"\n    data-cy=\"listbox-option\"\n    (click)=\"handleOptionClick($event, index, groupIndex)\"\n    (mousedown)=\"handleOptionMousedown()\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.template\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #nullContent></ng-template>\n", styles: [":host{position:absolute;top:100%;left:0;width:100%;z-index:var(--hsi-ui-listbox-z-index);background:var(--hsi-ui-listbox-background);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}:host ::-webkit-scrollbar-track{background:transparent}.hsi-ui-listbox{padding-top:var(--hsi-ui-listbox-padding-top);background:var(--hsi-ui-listbox-background);border-left:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-right:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius);max-height:var(--hsi-ui-listbox-max-height);overflow-y:auto}.hsi-ui-listbox:not(.open){display:none}.hsi-ui-listbox-option{display:block;cursor:pointer;margin-left:var(--hsi-ui-listbox-padding-left);margin-right:var(--hsi-ui-listbox-padding-right)}.hsi-ui-listbox-option:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option:last-child,.hsi-ui-listbox-option.current.keyboard-current:not(.grouped-option):last-child,.hsi-ui-listbox-group-container:last-child .hsi-ui-listbox-option.current.keyboard-current:last-child{margin-bottom:var(--hsi-ui-listbox-padding-bottom);border-bottom-left-radius:var(--hsi-ui-combobox-border-radius);border-bottom-right-radius:var(--hsi-ui-combobox-border-radius)}.hsi-ui-listbox-option:hover{background:var(--hsi-ui-listbox-option-hover-background);border-radius:var(--hsi-ui-listbox-option-hover-border-radius)}.hsi-ui-listbox-option.selected{background:var(--hsi-ui-listbox-option-selected-background);border-radius:var(--hsi-ui-listbox-option-selected-border-radius)}.hsi-ui-listbox-option.disabled{color:var(--hsi-ui-listbox-option-disabled-color)}.hsi-ui-listbox-option.current.keyboard-current{background:var(--hsi-ui-listbox-option-current-background);color:var(--hsi-ui-listbox-option-current-color);border-radius:var(--hsi-ui-listbox-option-current-border-radius)}\n"] }]
+        }], ctorParameters: () => [{ type: ComboboxService }, { type: ActiveIndexService }, { type: ListboxFilteringService }, { type: ListboxScrollService }, { type: i0.DestroyRef }], propDecorators: { ngFormControl: [{
+                type: Input
+            }], findsOptionOnTyping: [{
+                type: Input
+            }], isMultiSelect: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], valueChanges: [{
+                type: Output
+            }], scrollableContentRef: [{
+                type: ViewChild,
+                args: ['scrollableContent']
+            }], label: [{
+                type: ContentChild,
+                args: [ListboxLabelComponent, { descendants: false }]
+            }], options: [{
+                type: ContentChildren,
+                args: [ListboxOptionComponent, { descendants: false }]
+            }], groups: [{
+                type: ContentChildren,
+                args: [ListboxGroupComponent]
+            }] } });
+
+class SelectAllListboxOptionComponent extends ListboxOptionComponent {
+    constructor(service, listboxComponent, destroyRef) {
+        super(service);
+        this.listboxComponent = listboxComponent;
+        this.destroyRef = destroyRef;
+        this.boxDisplayLabel = 'Select all';
+    }
+    // select all will not respond to changes in selected or disabled properties
+    // users should not attempt to change these properties
+    // TODO: better architecture for this
+    ngOnChanges() {
+        return;
+    }
+    updateSelected(selected) {
+        this._selected.next(selected);
+    }
+    setControlledOptions() {
+        this.controlledOptions$ = this.service.groups$.pipe(map((groups) => this.getControlledOptionsFromGroups(groups)));
+        this.controlledOptions$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((controlledOptions) => {
+            this.controlledOptions = controlledOptions;
+        });
+    }
+    getControlledOptionsFromGroups(groups) {
+        let controlledOptions = [];
+        if (groups.length > 0) {
+            const groupId = groups.findIndex((group) => {
+                return group.options.some((option) => option.id === this.id);
+            });
+            if (groupId > -1) {
+                controlledOptions = groups[groupId].options.filter((o) => o !== this);
+            }
+        }
+        else {
+            controlledOptions = this.listboxComponent.options.filter((option) => option !== this);
+        }
+        return controlledOptions;
+    }
+    listenForOptionSelections() {
+        const optionSelectionChanges$ = this.controlledOptions$.pipe(switchMap((options) => merge(options.map((o) => o.selected$))), mergeAll());
+        optionSelectionChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(0), withLatestFrom(this.controlledOptions$))
+            .subscribe(([, controlledOptions]) => {
+            this.updateSelectAllSelected(controlledOptions);
+        });
+    }
+    updateSelectAllSelected(controlledOptions) {
+        const allControlledOptionsSelected = controlledOptions.every((option) => option.isSelected());
+        this.updateSelected(allControlledOptionsSelected);
+    }
+    toggleSelected() {
+        this.updateSelected(!this._selected.value);
+        if (this._selected.value) {
+            this.controlledOptions.forEach((option) => option.select());
+        }
+        else {
+            this.controlledOptions.forEach((option) => option.deselect());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectAllListboxOptionComponent, deps: [{ token: ComboboxService }, { token: ListboxComponent }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: SelectAllListboxOptionComponent, isStandalone: true, selector: "hsi-ui-select-all-listbox-option", inputs: { boxDisplayLabel: "boxDisplayLabel" }, providers: [
+            {
+                provide: ListboxOptionComponent,
+                useExisting: forwardRef(() => SelectAllListboxOptionComponent),
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #option>\n  <div class=\"hsi-ui-listbox-option-container\">\n    @if (isSelected()) {\n      <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n    }\n    <div\n      #label\n      class=\"hsi-ui-listbox-option-label\"\n      [attr.aria-label]=\"ariaLabel\"\n      ><ng-content></ng-content\n    ></div>\n  </div>\n</ng-template>\n\n<ng-template #selectedIcon\n  ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n  ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectAllListboxOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-select-all-listbox-option', imports: [CommonModule], providers: [
+                        {
+                            provide: ListboxOptionComponent,
+                            useExisting: forwardRef(() => SelectAllListboxOptionComponent),
+                        },
+                    ], template: "<ng-template #option>\n  <div class=\"hsi-ui-listbox-option-container\">\n    @if (isSelected()) {\n      <ng-container *ngTemplateOutlet=\"selectedIcon\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"unselectedIcon\"></ng-container>\n    }\n    <div\n      #label\n      class=\"hsi-ui-listbox-option-label\"\n      [attr.aria-label]=\"ariaLabel\"\n      ><ng-content></ng-content\n    ></div>\n  </div>\n</ng-template>\n\n<ng-template #selectedIcon\n  ><ng-content select=\"[selectedIcon]\"></ng-content>\n</ng-template>\n<ng-template #unselectedIcon\n  ><ng-content select=\"[unselectedIcon]\"></ng-content>\n</ng-template>\n", styles: [".hsi-ui-listbox-option-container{display:var(--hsi-ui-listbox-option-container-display);flex-direction:var(--hsi-ui-listbox-option-container-flex-direction);align-items:var(--hsi-ui-listbox-option-container-align-items);cursor:var(--hsi-ui-listbox-option-cursor);padding:var(--hsi-ui-listbox-option-container-padding);gap:var(--hsi-ui-listbox-option-container-gap)}\n"] }]
+        }], ctorParameters: () => [{ type: ComboboxService }, { type: ListboxComponent }, { type: i0.DestroyRef }], propDecorators: { boxDisplayLabel: [{
+                type: Input
+            }] } });
+
+let nextUniqueId$1 = 0;
+var FocusTextbox;
+(function (FocusTextbox) {
+    FocusTextbox["default"] = "default";
+    FocusTextbox["includeMobile"] = "includeMobile";
+})(FocusTextbox || (FocusTextbox = {}));
+var Key;
+(function (Key) {
+    Key["ArrowDown"] = "ArrowDown";
+    Key["ArrowUp"] = "ArrowUp";
+    Key["End"] = "End";
+    Key["Enter"] = "Enter";
+    Key["Escape"] = "Escape";
+    Key["Home"] = "Home";
+    Key["LeftArrow"] = "ArrowLeft";
+    Key["PageDown"] = "PageDown";
+    Key["PageUp"] = "PageUp";
+    Key["RightArrow"] = "ArrowRight";
+    Key["Space"] = " ";
+    Key["Tab"] = "Tab";
+})(Key || (Key = {}));
+var OptionAction;
+(function (OptionAction) {
+    OptionAction["first"] = "first";
+    OptionAction["last"] = "last";
+    OptionAction["next"] = "next";
+    OptionAction["nullActiveIndex"] = "nullActiveIndex";
+    OptionAction["pageDown"] = "pageDown";
+    OptionAction["pageUp"] = "pageUp";
+    OptionAction["previous"] = "previous";
+    OptionAction["select"] = "select";
+    OptionAction["zeroActiveIndex"] = "zeroActiveIndex";
+})(OptionAction || (OptionAction = {}));
+var ListboxAction;
+(function (ListboxAction) {
+    ListboxAction["close"] = "close";
+    ListboxAction["open"] = "open";
+    ListboxAction["closeSelect"] = "closeSelect";
+})(ListboxAction || (ListboxAction = {}));
+var TextboxAction;
+(function (TextboxAction) {
+    TextboxAction["focus"] = "focus";
+    TextboxAction["setTextToValue"] = "setTextToValue";
+    TextboxAction["cursorRight"] = "cursorRight";
+    TextboxAction["cursorLeft"] = "cursorLeft";
+    TextboxAction["cursorFirst"] = "cursorFirst";
+    TextboxAction["cursorLast"] = "cursorLast";
+    TextboxAction["addChar"] = "addChar";
+    TextboxAction["type"] = "type";
+})(TextboxAction || (TextboxAction = {}));
+var AutoComplete;
+(function (AutoComplete) {
+    AutoComplete["none"] = "none";
+    AutoComplete["list"] = "list";
+    AutoComplete["both"] = "both";
+    AutoComplete["inline"] = "inline";
+})(AutoComplete || (AutoComplete = {}));
+class ComboboxService {
+    constructor(platform) {
+        this.platform = platform;
+        this.id = `combobox-${nextUniqueId$1++}`;
+        this.scrollContainerId = `${this.id}-scroll-container`;
+        this.comboboxLabelId = `${this.id}-label`;
+        this.autoComplete = AutoComplete.none;
+        this.hasEditableTextbox = false;
+        this.ignoreBlur = false;
+        this.isMultiSelect = false;
+        this.nullActiveIdOnClose = false;
+        this.scrollWhenOpened = false;
+        this.shouldAutoSelectOnListboxClose = false;
+        this.destroy$ = new Subject();
+        this.focusTextbox = new Subject();
+        this.focusTextbox$ = this.focusTextbox.asObservable();
+        this.isKeyboardEvent = new BehaviorSubject(false);
+        this.isKeyboardEvent$ = this.isKeyboardEvent.asObservable();
+        this._isOpen = new BehaviorSubject(false);
+        this.isOpen$ = this._isOpen.asObservable().pipe(distinctUntilChanged());
+        this.label = new BehaviorSubject(null);
+        this.label$ = this.label.asObservable();
+        this.optionAction = new Subject();
+        this.optionAction$ = this.optionAction.asObservable();
+        this.projectedContentIsInDOM = new BehaviorSubject(false);
+        this.projectedContentIsInDOM$ = this.projectedContentIsInDOM.asObservable();
+        this.selectedOptionsToEmit = new BehaviorSubject([]);
+        this.selectedOptionsToEmit$ = this.selectedOptionsToEmit.asObservable();
+        this.textboxBlur = new Subject();
+        this.textboxBlur$ = this.textboxBlur.asObservable();
+        this.touched = new BehaviorSubject(false);
+        this.touched$ = this.touched.asObservable();
+    }
+    get isOpen() {
+        return this._isOpen.value;
+    }
+    initActiveDescendant(source$) {
+        if (source$) {
+            this.activeDescendant$ = source$;
+        }
+        else {
+            this.activeDescendant$ = of(null);
+        }
+    }
+    setLabel(label) {
+        this.label.next(label);
+    }
+    openListbox() {
+        this._isOpen.next(true);
+    }
+    closeListbox() {
+        this._isOpen.next(false);
+    }
+    toggleListbox() {
+        this._isOpen.next(!this._isOpen.value);
+    }
+    setProjectedContentIsInDOM() {
+        this.projectedContentIsInDOM.next(true);
+    }
+    emitTextboxBlur() {
+        this.textboxBlur.next();
+    }
+    setTouched() {
+        this.touched.next(true);
+    }
+    emitTextboxFocus(focus = FocusTextbox.default) {
+        this.focusTextbox.next(focus);
+    }
+    emitOptionAction(action) {
+        this.optionAction.next(action);
+    }
+    isMobile() {
+        return this.platform.ANDROID || this.platform.IOS;
+    }
+    setProjectedContent(groups, options) {
+        this.setGroups(groups);
+        this.setAllOptions(groups, options);
+        this.optionPropertyChanges$ = this.allOptions$.pipe(switchMap((options) => merge(options.map((o) => o.externalPropertyChanges$))), mergeAll());
+    }
+    setGroups(groups) {
+        this.groups$ = groups.changes.pipe(startWith(''), map(() => groups.toArray()));
+    }
+    setAllOptions(groups, options) {
+        // will not track changes to properties, just if the list of options changes
+        if (groups.length > 0) {
+            this.allOptions$ = this.groups$.pipe(switchMap((groups) => combineLatest(groups.map((group) => group.options$))), map((optionArrays) => optionArrays.flat()), shareReplay(1));
+        }
+        else {
+            this.allOptions$ = options.changes.pipe(startWith(''), map(() => options.toArray()), shareReplay(1));
+        }
+    }
+    setSelectedOptionsToEmit(selected) {
+        this.selectedOptionsToEmit.next(selected);
+    }
+    getSelectedOptions(options) {
+        return options?.filter((option) => !this.isSelectAllListboxOption(option) && option.isSelected());
+    }
+    isSelectAllListboxOption(option) {
+        return option instanceof SelectAllListboxOptionComponent;
+    }
+    setIsKeyboardEvent(isKeyboardEvent) {
+        this.isKeyboardEvent.next(isKeyboardEvent);
+    }
+    destroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.focusTextbox.complete();
+        this.isKeyboardEvent.complete();
+        this._isOpen.complete();
+        this.label.complete();
+        this.optionAction.complete();
+        this.projectedContentIsInDOM.complete();
+        this.selectedOptionsToEmit.complete();
+        this.textboxBlur.complete();
+        this.touched.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxService, deps: [{ token: i1$1.Platform }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.Platform }] });
+
+class ComboboxLabelComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.service.setLabel(this);
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxLabelComponent, deps: [{ token: ComboboxService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ComboboxLabelComponent, isStandalone: true, selector: "hsi-ui-combobox-label", viewQueries: [{ propertyName: "labelContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template
+    ><p class="combobox-label" [id]="service.comboboxLabelId"
+      ><ng-content></ng-content></p
+  ></ng-template>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hsi-ui-combobox-label',
+                    template: `<ng-template
+    ><p class="combobox-label" [id]="service.comboboxLabelId"
+      ><ng-content></ng-content></p
+  ></ng-template>`,
+                }]
+        }], ctorParameters: () => [{ type: ComboboxService }], propDecorators: { labelContent: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class ComboboxComponent {
+    constructor(service, platform, zone, document, elRef, destroyRef) {
+        this.service = service;
+        this.platform = platform;
+        this.zone = zone;
+        this.document = document;
+        this.elRef = elRef;
+        this.destroyRef = destroyRef;
+    }
+    ngOnInit() {
+        this.handleOutsideClick();
+    }
+    ngOnDestroy() {
+        this.service.destroy();
+    }
+    handleOutsideClick() {
+        if (!this.document) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            merge(fromEvent(this.document, 'touchstart', { capture: true }), fromEvent(this.document, 'mousedown', { capture: true }))
+                .pipe(takeUntilDestroyed(this.destroyRef), withLatestFrom(this.service.isOpen$), filter(([event, isOpen]) => isOpen && !event.composedPath().includes(this.elRef.nativeElement)))
+                .subscribe(() => {
+                if (this.platform.IOS || this.platform.ANDROID) {
+                    this.service.emitTextboxFocus(FocusTextbox.includeMobile);
+                }
+                this.service.emitTextboxBlur();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxComponent, deps: [{ token: ComboboxService }, { token: i1$1.Platform }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ComboboxComponent, isStandalone: true, selector: "hsi-ui-combobox", host: { classAttribute: "hsi-ui-combobox" }, providers: [ComboboxService], queries: [{ propertyName: "labelComponent", first: true, predicate: ComboboxLabelComponent, descendants: true }], ngImport: i0, template: "@if (service.label$ | async; as label) {\n  <ng-template [ngTemplateOutlet]=\"label.labelContent\"></ng-template>\n}\n<ng-content></ng-content>\n", styles: ["html{--hsi-ui-combobox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-combobox-border-color: var(--hsi-adk-color-muted-primary-40, gray);--hsi-ui-combobox-border-style: solid;--hsi-ui-combobox-border-width: 1px;--hsi-ui-combobox-hover-border-color: var(--hsi-adk-color-muted-primary-20, darkgray);--hsi-ui-combobox-hover-cursor: pointer;--hsi-ui-combobox-max-width: none;--hsi-ui-textbox-display: flex;--hsi-ui-textbox-justify-content: space-between;--hsi-ui-textbox-align-items: center;--hsi-ui-textbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-textbox-border-bottom-open: 1px solid var(--hsi-adk-color-muted-primary-80, gray);--hsi-ui-textbox-padding: .75rem;--hsi-ui-textbox-label-text-overflow: ellipsis;--hsi-ui-textbox-label-white-space: nowrap;--hsi-ui-textbox-label-overflow: hidden;--hsi-ui-textbox-label-max-width: calc(var(--hsi-ui-combobox-max-width) - 1rem);--hsi-ui-textbox-icon-display: flex;--hsi-ui-textbox-icon-flex-direction: column;--hsi-ui-textbox-icon-justify-content: center;--hsi-ui-textbox-transition-duration: .15s;--hsi-ui-editable-textbox-padding: .5rem;--hsi-ui-editable-textbox-input-border: none;--hsi-ui-editable-textbox-input-border-bottom: 1px solid transparent;--hsi-ui-editable-textbox-input-border-radius: 0;--hsi-ui-editable-textbox-input-width: 100%;--hsi-ui-editable-textbox-input-padding: .25rem .5rem;--hsi-ui-editable-textbox-input-hover-border: 0;--hsi-ui-editable-textbox-input-hover-border-bottom: 1px solid var(--hsi-adk-color-muted-primary-70, gray);--hsi-ui-editable-textbox-input-hover-background: var(--hsi-adk-color-muted-primary-98, #f2f2f2);--hsi-ui-editable-textbox-input-hover-outline: none;--hsi-ui-listbox-z-index: 100;--hsi-ui-listbox-max-height: 300px;--hsi-ui-listbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-padding-top: .25rem;--hsi-ui-listbox-padding-right: .25rem;--hsi-ui-listbox-padding-bottom: .25rem;--hsi-ui-listbox-padding-left: .25rem;--hsi-ui-listbox-label-font-size: .9em;--hsi-ui-listbox-label-font-weight: var(--hsi-adk-font-weight-semibold, 600);--hsi-ui-listbox-label-text-transform: uppercase;--hsi-ui-listbox-label-padding: .25rem var(--hsi-ui-listbox-option-container-padding);--hsi-ui-listbox-label-margin-right: var(--hsi-ui-listbox-option-margin-right);--hsi-ui-listbox-option-hover-background: var(--hsi-adk-color-muted-primary-95, #f2f2f2);--hsi-ui-listbox-option-hover-border-radius: 0;--hsi-ui-listbox-option-selected-background: var(--hsi-adk-color-muted-primary-90, lightgray);--hsi-ui-listbox-option-selected-border-radius: 0;--hsi-ui-listbox-option-disabled-color: var(--hsi-adk-color-muted-primary-80, lightgray);--hsi-ui-listbox-option-current-background: var(--hsi-adk-color-muted-primary-40, darkgray);--hsi-ui-listbox-option-current-color: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-option-current-border-radius: 0;--hsi-ui-listbox-option-label-padding: .75rem;--hsi-ui-listbox-option-cursor: pointer;--hsi-ui-listbox-option-margin-right: .25rem;--hsi-ui-listbox-option-container-display: flex;--hsi-ui-listbox-option-container-flex-direction: row;--hsi-ui-listbox-option-container-align-items: center;--hsi-ui-listbox-option-container-padding: .5rem;--hsi-ui-listbox-option-container-gap: .5rem}.hsi-ui-combobox{display:block;position:relative;max-width:var(--hsi-ui-combobox-max-width)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-combobox', imports: [CommonModule, AsyncPipe], providers: [ComboboxService], encapsulation: ViewEncapsulation.None, host: { class: 'hsi-ui-combobox' }, template: "@if (service.label$ | async; as label) {\n  <ng-template [ngTemplateOutlet]=\"label.labelContent\"></ng-template>\n}\n<ng-content></ng-content>\n", styles: ["html{--hsi-ui-combobox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-combobox-border-color: var(--hsi-adk-color-muted-primary-40, gray);--hsi-ui-combobox-border-style: solid;--hsi-ui-combobox-border-width: 1px;--hsi-ui-combobox-hover-border-color: var(--hsi-adk-color-muted-primary-20, darkgray);--hsi-ui-combobox-hover-cursor: pointer;--hsi-ui-combobox-max-width: none;--hsi-ui-textbox-display: flex;--hsi-ui-textbox-justify-content: space-between;--hsi-ui-textbox-align-items: center;--hsi-ui-textbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-textbox-border-bottom-open: 1px solid var(--hsi-adk-color-muted-primary-80, gray);--hsi-ui-textbox-padding: .75rem;--hsi-ui-textbox-label-text-overflow: ellipsis;--hsi-ui-textbox-label-white-space: nowrap;--hsi-ui-textbox-label-overflow: hidden;--hsi-ui-textbox-label-max-width: calc(var(--hsi-ui-combobox-max-width) - 1rem);--hsi-ui-textbox-icon-display: flex;--hsi-ui-textbox-icon-flex-direction: column;--hsi-ui-textbox-icon-justify-content: center;--hsi-ui-textbox-transition-duration: .15s;--hsi-ui-editable-textbox-padding: .5rem;--hsi-ui-editable-textbox-input-border: none;--hsi-ui-editable-textbox-input-border-bottom: 1px solid transparent;--hsi-ui-editable-textbox-input-border-radius: 0;--hsi-ui-editable-textbox-input-width: 100%;--hsi-ui-editable-textbox-input-padding: .25rem .5rem;--hsi-ui-editable-textbox-input-hover-border: 0;--hsi-ui-editable-textbox-input-hover-border-bottom: 1px solid var(--hsi-adk-color-muted-primary-70, gray);--hsi-ui-editable-textbox-input-hover-background: var(--hsi-adk-color-muted-primary-98, #f2f2f2);--hsi-ui-editable-textbox-input-hover-outline: none;--hsi-ui-listbox-z-index: 100;--hsi-ui-listbox-max-height: 300px;--hsi-ui-listbox-background: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-padding-top: .25rem;--hsi-ui-listbox-padding-right: .25rem;--hsi-ui-listbox-padding-bottom: .25rem;--hsi-ui-listbox-padding-left: .25rem;--hsi-ui-listbox-label-font-size: .9em;--hsi-ui-listbox-label-font-weight: var(--hsi-adk-font-weight-semibold, 600);--hsi-ui-listbox-label-text-transform: uppercase;--hsi-ui-listbox-label-padding: .25rem var(--hsi-ui-listbox-option-container-padding);--hsi-ui-listbox-label-margin-right: var(--hsi-ui-listbox-option-margin-right);--hsi-ui-listbox-option-hover-background: var(--hsi-adk-color-muted-primary-95, #f2f2f2);--hsi-ui-listbox-option-hover-border-radius: 0;--hsi-ui-listbox-option-selected-background: var(--hsi-adk-color-muted-primary-90, lightgray);--hsi-ui-listbox-option-selected-border-radius: 0;--hsi-ui-listbox-option-disabled-color: var(--hsi-adk-color-muted-primary-80, lightgray);--hsi-ui-listbox-option-current-background: var(--hsi-adk-color-muted-primary-40, darkgray);--hsi-ui-listbox-option-current-color: var(--hsi-adk-color-primary-100, white);--hsi-ui-listbox-option-current-border-radius: 0;--hsi-ui-listbox-option-label-padding: .75rem;--hsi-ui-listbox-option-cursor: pointer;--hsi-ui-listbox-option-margin-right: .25rem;--hsi-ui-listbox-option-container-display: flex;--hsi-ui-listbox-option-container-flex-direction: row;--hsi-ui-listbox-option-container-align-items: center;--hsi-ui-listbox-option-container-padding: .5rem;--hsi-ui-listbox-option-container-gap: .5rem}.hsi-ui-combobox{display:block;position:relative;max-width:var(--hsi-ui-combobox-max-width)}\n"] }]
+        }], ctorParameters: () => [{ type: ComboboxService }, { type: i1$1.Platform }, { type: i0.NgZone }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { labelComponent: [{
+                type: ContentChild,
+                args: [ComboboxLabelComponent]
+            }] } });
+
+class TextboxComponent {
+    constructor() {
+        /*
+         * Whether the textbox label responds to selections in any way.
+         *
+         * If true, the textbox label will display the selected option(s) if no other label properties are provided.
+         *
+         * @default true
+         */
+        this.dynamicLabel = true;
+        this.findsOptionOnTyping = true;
+        this.openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
+        this.label = new BehaviorSubject('');
+        this.label$ = this.label.asObservable();
+        this.destroyRef = inject(DestroyRef);
+        this.service = inject(ComboboxService);
+        this.platform = inject(Platform);
+        this.zone = inject(NgZone);
+    }
+    ngOnInit() {
+        this.service.projectedContentIsInDOM$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((x) => !!x), 
+        // Required because the label is projected into the ListboxOption via <ng-content>, and the
+        // listbox options are <ng-template>s that are projected into the listbox via ngTemplateOutlet.
+        // We need this to ensure that the option labels are in the DOM to read from before we set the box label.
+        runNgChangeDetectionThen(this.zone))
+            .subscribe(() => {
+            this.setLabel();
+        });
+    }
+    ngAfterViewInit() {
+        this.setFocusListener();
+    }
+    setFocusListener() {
+        this.service.focusTextbox$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((focusType) => {
+            if (!this.isMobile() || focusType === FocusTextbox.includeMobile) {
+                this.focusBox();
+            }
+        });
+    }
+    focusBox() {
+        this.box.nativeElement.focus();
+    }
+    handleBlur(event) {
+        // DESCRIPTION OF HOW VARIOUS DEVICES/ASSISTIVE TECHNOLOGIES DO/NOT TRIGGER ANY BLUR EVENT (FocusEvent)
+        // clicking (desktop) will trigger a blur event (item is focused, user clicks away, blur event fires)
+        // keyboard navigation (desktop) will not trigger a blur event (item is focused, user navigates to another item, blur event does not fire)
+        // tapping (mobile) will trigger a blur event (item is focused, user taps away, blur event fires)
+        // swiping (VoiceOver) will trigger a blur event (item is focused, user swipes away, blur event fires)
+        // The code below (lines 106 - 116) will refocus the textbox when the textbox receives blur event, and the
+        // source of the blue event (related target) is something in the listbox.
+        // We keep the focus on the textbox so that we can continue to listen for keyboard events to provide
+        // keyboard navigation/interaction with the listbox options. The refocusing does not affect keyboard navigation,
+        // and is unnoticable to the user.
+        // However, VoiceOver (iOS assistive tech) will move the navigation back to the textbox when the textbox is focused,
+        // which means the user will need to strt navigating the options from the top of the listbox every time they select
+        // an option. (If we throw the focus). For this reason, we have decided that we will not support keyboard navigation
+        // (which would need to happen on a connected external keybord) on mobile devices, as keyboard nav requires that the
+        // focus stays on the textbox. Ostensibly it is standard practice to not support keyboard navigation on mobile devices.
+        if (!this.isMobile()) {
+            if (event.relatedTarget && this.isHtmlElement(event.relatedTarget)) {
+                // when the blur happens because a listbox option was focused
+                if (event.relatedTarget.id.includes('listbox') ||
+                    event.relatedTarget.classList.contains('listbox-group') ||
+                    event.relatedTarget.classList.contains('listbox-group-label')) {
+                    this.service.emitTextboxFocus();
+                    return;
+                }
+            }
+            this.service.emitTextboxBlur();
+        }
+    }
+    isHtmlElement(target) {
+        return 'id' in target;
+    }
+    isMobile() {
+        return this.platform.IOS || this.platform.ANDROID;
+    }
+    handleClick() {
+        this.service.setIsKeyboardEvent(false);
+        if (this.service.isOpen) {
+            this.service.closeListbox();
+        }
+        else {
+            this.service.setTouched();
+            this.service.openListbox();
+        }
+        this.focusBox();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            this.onEscape();
+        }
+        else {
+            this.service.setTouched();
+            const action = this.getActionFromKeydownEvent(event);
+            if (action) {
+                this.service.setIsKeyboardEvent(true);
+            }
+            this.handleKeyboardAction(action, event);
+        }
+    }
+    onEscape() {
+        this.service.closeListbox();
+        this.service.emitTextboxFocus();
+    }
+    getActionFromKeydownEvent(event) {
+        if (!this.service.isOpen && this.openKeys.includes(event.key)) {
+            return ListboxAction.open;
+        }
+        if (event.key === Key.Home) {
+            return OptionAction.first;
+        }
+        if (event.key === Key.End) {
+            return OptionAction.last;
+        }
+        if (this.findsOptionOnTyping && this.isTypingCharacter(event)) {
+            return TextboxAction.type;
+        }
+        if (this.service.isOpen) {
+            return this.getActionFromKeyEventWhenOpen(event);
+        }
+        else {
+            return null;
+        }
+    }
+    isTypingCharacter(event) {
+        const { key, altKey, ctrlKey, metaKey } = event;
+        return (key === 'Backspace' ||
+            key === 'Clear' ||
+            (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey));
+    }
+    getActionFromKeyEventWhenOpen(event) {
+        const { key, altKey } = event;
+        if (key === Key.ArrowUp && altKey) {
+            return ListboxAction.closeSelect;
+        }
+        else if (key === Key.ArrowDown && !altKey) {
+            return OptionAction.next;
+        }
+        else if (key === Key.ArrowUp) {
+            return OptionAction.previous;
+        }
+        else if (key === Key.PageUp) {
+            return OptionAction.pageUp;
+        }
+        else if (key === Key.PageDown) {
+            return OptionAction.pageDown;
+        }
+        else if (key === Key.Enter || key === Key.Space) {
+            return this.service.isMultiSelect
+                ? OptionAction.select
+                : ListboxAction.closeSelect;
+        }
+        else {
+            return null;
+        }
+    }
+    handleKeyboardAction(action, event) {
+        switch (action) {
+            case OptionAction.first:
+            case OptionAction.last:
+                this.service.openListbox();
+                this.focusBox();
+                event.preventDefault();
+                this.service.emitOptionAction(action);
+                break;
+            case OptionAction.next:
+            case OptionAction.pageDown:
+            case OptionAction.previous:
+            case OptionAction.pageUp:
+            case OptionAction.select:
+                event.preventDefault();
+                this.service.emitOptionAction(action);
+                break;
+            case ListboxAction.closeSelect:
+                event.preventDefault();
+                this.service.emitOptionAction(OptionAction.select);
+                this.service.closeListbox();
+                this.focusBox();
+                break;
+            case ListboxAction.close:
+                event.preventDefault();
+                this.service.closeListbox();
+                this.focusBox();
+                break;
+            case TextboxAction.type:
+                this.service.openListbox();
+                this.focusBox();
+                this.service.emitOptionAction(event.key);
+                break;
+            case ListboxAction.open:
+                event.preventDefault();
+                this.service.openListbox();
+                this.focusBox();
+        }
+    }
+    setLabel() {
+        if (this.dynamicLabel) {
+            combineLatest([
+                this.service.touched$,
+                this.service.allOptions$, // when options (not properties) change
+                this.service.selectedOptionsToEmit$, // when a user clicks
+                this.service.optionPropertyChanges$.pipe(filter((x) => !!x), startWith(null)), // on an outside change,
+            ])
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(([touched, options]) => {
+                const label = this.getComputedLabel(touched, options);
+                this.label.next(label);
+            });
+        }
+    }
+    getComputedLabel(touched, options) {
+        const selectedOptions = this.service.getSelectedOptions(options);
+        let label = '';
+        const numSelected = selectedOptions?.length;
+        if (touched || numSelected || this.customLabel || this.selectedCountLabel) {
+            if (this.customLabel && !this.service.hasEditableTextbox) {
+                label = this.customLabel(selectedOptions);
+            }
+            else if (this.selectedCountLabel && !this.service.hasEditableTextbox) {
+                if (numSelected === 1) {
+                    label = `${numSelected} ${this.selectedCountLabel.singular} selected`;
+                }
+                else {
+                    label = `${numSelected} ${this.selectedCountLabel.plural} selected`;
+                }
+            }
+            else {
+                label = this.getDefaultLabel(selectedOptions);
+            }
+        }
+        return label;
+    }
+    getDefaultLabel(selectedOptions) {
+        let label = '';
+        if (selectedOptions) {
+            label = selectedOptions
+                .reduce((acc, option) => {
+                const value = option.boxDisplayLabel ??
+                    option.label?.nativeElement.innerText.trim();
+                if (value) {
+                    acc.push(value);
+                }
+                return acc;
+            }, [])
+                .join(', ');
+        }
+        return label;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TextboxComponent, isStandalone: true, selector: "hsi-ui-textbox", inputs: { ariaLabel: "ariaLabel", selectedCountLabel: "selectedCountLabel", customLabel: "customLabel", dynamicLabel: "dynamicLabel", findsOptionOnTyping: "findsOptionOnTyping" }, host: { classAttribute: "hsi-ui-textbox" }, viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true }, { propertyName: "boxIcon", first: true, predicate: ["boxIcon"], descendants: true }], ngImport: i0, template: "<div\n  #box\n  class=\"hsi-ui-textbox-container\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [id]=\"service.id + '-textbox'\"\n  data-cy=\"combobox-textbox\"\n  (click)=\"handleClick()\"\n  (blur)=\"handleBlur($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  [attr.aria-label]=\"\n    (service.label$ | async) === null\n      ? ariaLabel || service.isMultiSelect\n        ? 'Select options'\n        : 'Select an option'\n      : null\n  \"\n  [attr.aria-labelledby]=\"\n    (service.label$ | async) !== null ? service.comboboxLabelId : null\n  \"\n  [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n  [attr.aria-expanded]=\"service.isOpen$ | async\"\n  [attr.aria-controls]=\"service.id + '-listbox'\"\n  aria-haspopup=\"listbox\"\n  [class.open]=\"service.isOpen$ | async\"\n  ><div\n    *ngIf=\"dynamicLabel && !!(label$ | async); else staticLabel\"\n    class=\"hsi-ui-textbox-label\"\n    data-cy=\"textbox-label\"\n    >{{ label$ | async }}</div\n  ><div\n    #boxIcon\n    class=\"hsi-ui-textbox-icon\"\n    [class.open]=\"service.isOpen$ | async\"\n    ><ng-content select=\"[boxIcon]\"></ng-content></div\n></div>\n<ng-template #staticLabel\n  ><div class=\"hsi-ui-textbox-label\" data-cy=\"textbox-label\"\n    ><ng-content select=\"[boxLabel]\"></ng-content></div\n></ng-template>\n", styles: [".hsi-ui-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-textbox-container:hover{border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-hover-border-color);cursor:var(--hsi-ui-combobox-hover-cursor)}.hsi-ui-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-textbox-label{text-overflow:var(--hsi-ui-textbox-label-text-overflow);white-space:var(--hsi-ui-textbox-label-white-space);overflow:var(--hsi-ui-textbox-label-overflow);max-width:var(--hsi-ui-textbox-label-max-width)}.hsi-ui-textbox-icon{display:var(--hsi-ui-textbox-icon-display);flex-direction:var(--hsi-ui-textbox-icon-flex-direction);justify-content:var(--hsi-ui-textbox-icon-justify-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-textbox', imports: [CommonModule], host: {
+                        class: 'hsi-ui-textbox',
+                    }, template: "<div\n  #box\n  class=\"hsi-ui-textbox-container\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [id]=\"service.id + '-textbox'\"\n  data-cy=\"combobox-textbox\"\n  (click)=\"handleClick()\"\n  (blur)=\"handleBlur($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  [attr.aria-label]=\"\n    (service.label$ | async) === null\n      ? ariaLabel || service.isMultiSelect\n        ? 'Select options'\n        : 'Select an option'\n      : null\n  \"\n  [attr.aria-labelledby]=\"\n    (service.label$ | async) !== null ? service.comboboxLabelId : null\n  \"\n  [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n  [attr.aria-expanded]=\"service.isOpen$ | async\"\n  [attr.aria-controls]=\"service.id + '-listbox'\"\n  aria-haspopup=\"listbox\"\n  [class.open]=\"service.isOpen$ | async\"\n  ><div\n    *ngIf=\"dynamicLabel && !!(label$ | async); else staticLabel\"\n    class=\"hsi-ui-textbox-label\"\n    data-cy=\"textbox-label\"\n    >{{ label$ | async }}</div\n  ><div\n    #boxIcon\n    class=\"hsi-ui-textbox-icon\"\n    [class.open]=\"service.isOpen$ | async\"\n    ><ng-content select=\"[boxIcon]\"></ng-content></div\n></div>\n<ng-template #staticLabel\n  ><div class=\"hsi-ui-textbox-label\" data-cy=\"textbox-label\"\n    ><ng-content select=\"[boxLabel]\"></ng-content></div\n></ng-template>\n", styles: [".hsi-ui-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-textbox-container:hover{border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-hover-border-color);cursor:var(--hsi-ui-combobox-hover-cursor)}.hsi-ui-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-textbox-label{text-overflow:var(--hsi-ui-textbox-label-text-overflow);white-space:var(--hsi-ui-textbox-label-white-space);overflow:var(--hsi-ui-textbox-label-overflow);max-width:var(--hsi-ui-textbox-label-max-width)}.hsi-ui-textbox-icon{display:var(--hsi-ui-textbox-icon-display);flex-direction:var(--hsi-ui-textbox-icon-flex-direction);justify-content:var(--hsi-ui-textbox-icon-justify-content)}\n"] }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], selectedCountLabel: [{
+                type: Input
+            }], customLabel: [{
+                type: Input
+            }], dynamicLabel: [{
+                type: Input
+            }], findsOptionOnTyping: [{
+                type: Input
+            }], box: [{
+                type: ViewChild,
+                args: ['box']
+            }], boxIcon: [{
+                type: ViewChild,
+                args: ['boxIcon']
+            }] } });
+
+class EditableTextboxComponent extends TextboxComponent {
+    constructor() {
+        super(...arguments);
+        this.autoSelect = false;
+        this.autoSelectTrigger = 'character';
+        this.displaySelected = true;
+        this.initialValue = '';
+        this.inputType = 'text';
+        this.placeholder = '';
+        this.valueChanges = new EventEmitter();
+        this.moveFocusToTextboxKeys = ['RightArrow', 'LeftArrow', 'Home', 'End'];
+        this.value = new BehaviorSubject('');
+        this.value$ = this.value.asObservable();
+        this.openKeys = ['ArrowDown', 'ArrowUp'];
+    }
+    ngOnInit() {
+        this.service.autoComplete = this.displaySelected
+            ? AutoComplete.list
+            : AutoComplete.none;
+        this.service.shouldAutoSelectOnListboxClose =
+            this.autoSelect && this.autoSelectTrigger === 'any';
+        this.service.nullActiveIdOnClose = true;
+        this.service.hasEditableTextbox = true;
+        super.ngOnInit();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.initialValue || this.ngFormControl?.value) {
+            this.value.next(this.initialValue || this.ngFormControl.value);
+        }
+    }
+    setLabel() {
+        this.service.selectedOptionsToEmit$ // when a user clicks
+            .pipe(skip(1))
+            .subscribe((selectedOptions) => this.onSelectionChange(selectedOptions));
+    }
+    onSelectionChange(selectedOptions) {
+        if (this.service.isMultiSelect) {
+            this.setAndEmitValue('');
+        }
+        else {
+            const label = selectedOptions.length
+                ? selectedOptions[0].label?.nativeElement.innerText.trim()
+                : '';
+            this.setAndEmitValue(label);
+        }
+    }
+    onInputChange(value) {
+        if (value === '') {
+            this.setAutoSelectWhenInputIsEmpty();
+        }
+        else {
+            this.service.shouldAutoSelectOnListboxClose = this.autoSelect;
+        }
+        this.setAndEmitValue(value);
+    }
+    setAndEmitValue(value) {
+        this.setValue(value);
+        this.emitValue(value);
+    }
+    setValue(value) {
+        this.value.next(value);
+    }
+    emitValue(value) {
+        if (this.ngFormControl) {
+            this.ngFormControl.setValue(value);
+        }
+        else {
+            this.valueChanges.emit(value);
+        }
+    }
+    handleClick() {
+        this.service.setIsKeyboardEvent(false);
+        if (this.service.isOpen) {
+            this.service.closeListbox();
+        }
+        else {
+            this.service.openListbox();
+            if (this.autoSelect) {
+                const inputValue = this.inputElRef.nativeElement.value;
+                if (inputValue === '') {
+                    this.setAutoSelectWhenInputIsEmpty();
+                }
+                else {
+                    this.service.shouldAutoSelectOnListboxClose = this.autoSelect;
+                }
+            }
+        }
+        this.service.emitTextboxFocus();
+    }
+    setAutoSelectWhenInputIsEmpty() {
+        this.service.shouldAutoSelectOnListboxClose = this.autoSelect
+            ? this.autoSelectTrigger === 'any'
+            : false;
+    }
+    onEscape() {
+        if (!this.service.isOpen) {
+            this.setAndEmitValue('');
+            this.service.emitOptionAction(OptionAction.nullActiveIndex);
+        }
+        else {
+            this.service.closeListbox();
+            this.service.emitTextboxFocus();
+        }
+    }
+    getActionFromKeydownEvent(event) {
+        if (event.ctrlKey || event.key === 'Shift') {
+            return null;
+        }
+        if (!this.service.isOpen && this.openKeys.includes(event.key)) {
+            return ListboxAction.open;
+        }
+        else if (!this.service.isOpen && event.key === Key.Tab) {
+            return null;
+        }
+        else if (event.key === Key.Enter &&
+            (this.service.shouldAutoSelectOnListboxClose
+                ? !this.service.isOpen
+                : true)) {
+            return ListboxAction.close;
+        }
+        else {
+            if (event.key === Key.RightArrow ||
+                event.key === Key.LeftArrow ||
+                event.key === Key.Space) {
+                this.service.emitTextboxFocus();
+                return null;
+            }
+            else {
+                return this.getActionFromKeydownEventWhenOpen(event);
+            }
+        }
+    }
+    getActionFromKeydownEventWhenOpen(event) {
+        const { key } = event;
+        if (key === Key.ArrowDown || key === 'Down') {
+            return OptionAction.next;
+        }
+        else if (key === Key.ArrowUp) {
+            return OptionAction.previous;
+        }
+        else if (key === Key.Enter || key === Key.Space) {
+            return this.service.isMultiSelect
+                ? OptionAction.select
+                : ListboxAction.closeSelect;
+        }
+        else if (key === Key.Home) {
+            return TextboxAction.cursorFirst;
+        }
+        else if (key === Key.End) {
+            return TextboxAction.cursorLast;
+        }
+        else if (this.isPrintableCharacter(key) || key === 'Backspace') {
+            return TextboxAction.addChar;
+        }
+        else if (key === Key.Tab) {
+            return ListboxAction.closeSelect;
+        }
+        else {
+            return null;
+        }
+    }
+    handleKeyboardAction(action, event) {
+        if (action === ListboxAction.closeSelect) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.service.emitOptionAction(OptionAction.select);
+            this.service.closeListbox();
+            if (event.key !== Key.Tab) {
+                this.service.emitTextboxFocus();
+            }
+            this.service.emitOptionAction(OptionAction.nullActiveIndex);
+        }
+        else if (action === OptionAction.next ||
+            action === OptionAction.previous ||
+            action === OptionAction.select) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.service.emitOptionAction(action);
+        }
+        else if (action === ListboxAction.open) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.service.emitOptionAction(OptionAction.zeroActiveIndex);
+            this.service.openListbox();
+            this.service.emitTextboxFocus();
+        }
+        else if (action === ListboxAction.close) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.service.closeListbox();
+            this.service.emitTextboxFocus();
+            this.service.emitOptionAction(OptionAction.nullActiveIndex);
+        }
+        else if (action === TextboxAction.cursorFirst ||
+            action === TextboxAction.cursorLast ||
+            action === TextboxAction.addChar) {
+            this.service.emitTextboxFocus();
+            if (!this.service.isOpen) {
+                this.service.openListbox();
+            }
+            if (action === TextboxAction.cursorFirst) {
+                this.inputElRef.nativeElement.setSelectionRange(0, 0);
+            }
+            else if (action === TextboxAction.cursorLast) {
+                this.inputElRef.nativeElement.setSelectionRange(this.inputElRef.nativeElement.value.length, this.inputElRef.nativeElement.value.length);
+            }
+            if (this.autoSelect && action === TextboxAction.addChar) {
+                this.service.emitOptionAction(OptionAction.zeroActiveIndex);
+            }
+            else {
+                this.service.emitOptionAction(OptionAction.nullActiveIndex);
+            }
+        }
+    }
+    isPrintableCharacter(str) {
+        return str.length === 1 && str.match(/\S| /);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditableTextboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: EditableTextboxComponent, isStandalone: true, selector: "hsi-ui-editable-textbox", inputs: { autoSelect: "autoSelect", autoSelectTrigger: "autoSelectTrigger", displaySelected: "displaySelected", initialValue: "initialValue", inputType: "inputType", ngFormControl: "ngFormControl", placeholder: "placeholder" }, outputs: { valueChanges: "valueChanges" }, host: { classAttribute: "hsi-ui-editable-textbox" }, viewQueries: [{ propertyName: "inputElRef", first: true, predicate: ["box"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"hsi-ui-editable-textbox-container\"\n  [class.open]=\"service.isOpen$ | async\"\n  #textInputTemplate\n>\n  <input\n    #box\n    class=\"hsi-ui-editable-textbox-input\"\n    [attr.type]=\"inputType\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [id]=\"service.id + '-textbox'\"\n    (click)=\"handleClick()\"\n    (blur)=\"handleBlur($event)\"\n    (keydown)=\"handleKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"\n      (service.label$ | async) === null\n        ? ariaLabel || placeholder || service.isMultiSelect\n          ? 'Search and select options'\n          : 'Search and select an option'\n        : null\n    \"\n    [attr.aria-labelledby]=\"\n      (service.label$ | async) !== null ? service.comboboxLabelId : null\n    \"\n    [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n    [attr.aria-expanded]=\"service.isOpen$ | async\"\n    [attr.aria-autocomplete]=\"service.autoComplete\"\n    [attr.aria-controls]=\"service.id + '-listbox'\"\n    aria-haspopup=\"listbox\"\n    data-cy=\"editable-textbox-input\"\n    [placeholder]=\"placeholder\"\n    [ngModel]=\"value$ | async\"\n    (ngModelChange)=\"onInputChange($event)\"\n  />\n  <div\n    class=\"hsi-ui-textbox-icon hsi-ui-editable-textbox-icon\"\n    [class.open]=\"service.isOpen$ | async\"\n  >\n    <ng-content select=\"[boxIcon]\"></ng-content\n  ></div>\n</div>\n", styles: [".hsi-ui-editable-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-editable-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-editable-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-editable-textbox-input{border:var(--hsi-ui-editable-textbox-input-border);border-bottom:var(--hsi-ui-editable-textbox-input-border-bottom);width:var(--hsi-ui-editable-textbox-input-width);padding:var(--hsi-ui-editable-textbox-input-padding);border-radius:var(--hsi-ui-editable-textbox-input-border-radius)}.hsi-ui-editable-textbox-input:hover,.hsi-ui-editable-textbox-input:focus{border:var(--hsi-ui-editable-textbox-input-hover-border);border-bottom:var(--hsi-ui-editable-textbox-input-hover-border-bottom);background:var(--hsi-ui-editable-textbox-input-hover-background);outline:var(--hsi-ui-editable-textbox-input-hover-outline)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditableTextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-editable-textbox', imports: [CommonModule, FormsModule], host: {
+                        class: 'hsi-ui-editable-textbox',
+                    }, template: "<div\n  class=\"hsi-ui-editable-textbox-container\"\n  [class.open]=\"service.isOpen$ | async\"\n  #textInputTemplate\n>\n  <input\n    #box\n    class=\"hsi-ui-editable-textbox-input\"\n    [attr.type]=\"inputType\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [id]=\"service.id + '-textbox'\"\n    (click)=\"handleClick()\"\n    (blur)=\"handleBlur($event)\"\n    (keydown)=\"handleKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"\n      (service.label$ | async) === null\n        ? ariaLabel || placeholder || service.isMultiSelect\n          ? 'Search and select options'\n          : 'Search and select an option'\n        : null\n    \"\n    [attr.aria-labelledby]=\"\n      (service.label$ | async) !== null ? service.comboboxLabelId : null\n    \"\n    [attr.aria-activedescendant]=\"service.activeDescendant$ | async\"\n    [attr.aria-expanded]=\"service.isOpen$ | async\"\n    [attr.aria-autocomplete]=\"service.autoComplete\"\n    [attr.aria-controls]=\"service.id + '-listbox'\"\n    aria-haspopup=\"listbox\"\n    data-cy=\"editable-textbox-input\"\n    [placeholder]=\"placeholder\"\n    [ngModel]=\"value$ | async\"\n    (ngModelChange)=\"onInputChange($event)\"\n  />\n  <div\n    class=\"hsi-ui-textbox-icon hsi-ui-editable-textbox-icon\"\n    [class.open]=\"service.isOpen$ | async\"\n  >\n    <ng-content select=\"[boxIcon]\"></ng-content\n  ></div>\n</div>\n", styles: [".hsi-ui-editable-textbox-container{display:var(--hsi-ui-textbox-display);justify-content:var(--hsi-ui-textbox-justify-content);align-items:var(--hsi-ui-textbox-align-items);background:var(--hsi-ui-textbox-background);border:var(--hsi-ui-combobox-border-width) solid var(--hsi-ui-combobox-border-color);padding:var(--hsi-ui-editable-textbox-padding);border-radius:var(--hsi-ui-combobox-border-radius);transition:border var(--hsi-ui-textbox-transition-duration) ease-in-out}.hsi-ui-editable-textbox-container.open{border-bottom:var(--hsi-ui-textbox-border-bottom-open);border-bottom-left-radius:0;border-bottom-right-radius:0}.hsi-ui-editable-textbox-input{border:var(--hsi-ui-editable-textbox-input-border);border-bottom:var(--hsi-ui-editable-textbox-input-border-bottom);width:var(--hsi-ui-editable-textbox-input-width);padding:var(--hsi-ui-editable-textbox-input-padding);border-radius:var(--hsi-ui-editable-textbox-input-border-radius)}.hsi-ui-editable-textbox-input:hover,.hsi-ui-editable-textbox-input:focus{border:var(--hsi-ui-editable-textbox-input-hover-border);border-bottom:var(--hsi-ui-editable-textbox-input-hover-border-bottom);background:var(--hsi-ui-editable-textbox-input-hover-background);outline:var(--hsi-ui-editable-textbox-input-hover-outline)}\n"] }]
+        }], propDecorators: { inputElRef: [{
+                type: ViewChild,
+                args: ['box']
+            }], autoSelect: [{
+                type: Input
+            }], autoSelectTrigger: [{
+                type: Input
+            }], displaySelected: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], ngFormControl: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], valueChanges: [{
+                type: Output
+            }] } });
+
+class HsiUiComboboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HsiUiComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: HsiUiComboboxModule, imports: [ComboboxComponent,
+            ComboboxLabelComponent,
+            TextboxComponent,
+            ListboxComponent,
+            ListboxGroupComponent,
+            ListboxOptionComponent,
+            ListboxLabelComponent,
+            EditableTextboxComponent,
+            SelectAllListboxOptionComponent], exports: [ComboboxComponent,
+            ComboboxLabelComponent,
+            TextboxComponent,
+            ListboxComponent,
+            ListboxGroupComponent,
+            ListboxLabelComponent,
+            ListboxOptionComponent,
+            EditableTextboxComponent,
+            SelectAllListboxOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HsiUiComboboxModule, imports: [ComboboxComponent,
+            TextboxComponent,
+            ListboxComponent,
+            ListboxOptionComponent,
+            ListboxLabelComponent,
+            EditableTextboxComponent,
+            SelectAllListboxOptionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HsiUiComboboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ComboboxComponent,
+                        ComboboxLabelComponent,
+                        TextboxComponent,
+                        ListboxComponent,
+                        ListboxGroupComponent,
+                        ListboxOptionComponent,
+                        ListboxLabelComponent,
+                        EditableTextboxComponent,
+                        SelectAllListboxOptionComponent,
+                    ],
+                    exports: [
+                        ComboboxComponent,
+                        ComboboxLabelComponent,
+                        TextboxComponent,
+                        ListboxComponent,
+                        ListboxGroupComponent,
+                        ListboxLabelComponent,
+                        ListboxOptionComponent,
+                        EditableTextboxComponent,
+                        SelectAllListboxOptionComponent,
+                    ],
+                }]
+        }] });
+
+class HsiUiDirectoryComponent {
+    constructor() {
+        this.level = 0;
+        this.path = '';
+        this.terminalItemsAreSelectable = true;
+        this.selectionElementRole = 'button';
+        /**
+         * Emits the activePath and selectedItem when a leaf item is selected.
+         *
+         * Constructed from the `value` of each item if provided, otherwise uses `name`.
+         */
+        this.selectionChanges = new EventEmitter();
+        /**
+         * @internal
+         *
+         * Internal, will have no effect if provided at root level.
+         */
+        this.stateChanges = new EventEmitter();
+        this.state = new BehaviorSubject({
+            activePath: '',
+            selectedItem: '',
+        });
+        this.state$ = this.state.asObservable();
+        this.open = {};
+    }
+    ngOnChanges(changes) {
+        if (NgOnChangesUtilities.inputObjectChanged(changes, 'selection')) {
+            this.state.next(this.selection);
+        }
+    }
+    toggleOpen(key) {
+        if (this.open[key] === undefined) {
+            this.open[key] = true;
+        }
+        else {
+            this.open[key] = !this.open[key];
+        }
+    }
+    // public events are emitted on leaf selection
+    selectItem(item) {
+        const itemValue = item.value || item.name;
+        const activePath = this.path ? `${this.path}/${itemValue}` : itemValue;
+        if (this.level === 0) {
+            this.selectionChanges.emit({
+                activePath: activePath,
+                selectedItem: itemValue,
+            });
+        }
+        else {
+            this.stateChanges.emit({ activePath, selectedItem: itemValue });
+        }
+    }
+    // called when child emits new _activePath value
+    setState(state) {
+        if (this.level === 0) {
+            this.state.next(state);
+            this.selectionChanges.emit({
+                activePath: state.activePath,
+                selectedItem: state.selectedItem,
+            });
+        }
+        else {
+            this.stateChanges.emit(state);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HsiUiDirectoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: HsiUiDirectoryComponent, isStandalone: true, selector: "hsi-ui-directory", inputs: { items: "items", level: "level", path: "path", terminalItemsAreSelectable: "terminalItemsAreSelectable", selectionElementRole: "selectionElementRole", selection: "selection" }, outputs: { selectionChanges: "selectionChanges", stateChanges: "stateChanges" }, usesOnChanges: true, ngImport: i0, template: "@for (item of items; track $index) {\n  @if (!!item.children && item.children.length > 0) {\n    <!-- This is the template for expandable nodes -->\n    <div [style.--level]=\"level\">\n      <div\n        class=\"item expandable\"\n        [ngClass]=\"'level-' + level\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"toggleOpen(item.name)\"\n        (enter)=\"toggleOpen(item.name)\"\n      >\n        <p class=\"name\">{{ item.name }}</p>\n        @if (open[item.name]) {\n          <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n            >expand_more</span\n          >\n        } @else {\n          <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n            >chevron_right</span\n          >\n        }\n      </div>\n      <hsi-ui-directory\n        [items]=\"item.children\"\n        [level]=\"level + 1\"\n        [terminalItemsAreSelectable]=\"terminalItemsAreSelectable\"\n        [path]=\"\n          path.concat(\n            level !== 0\n              ? '/' + (item.value || item.name)\n              : item.value || item.name\n          )\n        \"\n        [class.invisible]=\"!open[item.name]\"\n        (stateChanges)=\"setState($event)\"\n        [selection]=\"state$ | async\"\n      ></hsi-ui-directory>\n    </div>\n  } @else {\n    <!-- This is the template for leaf nodes -->\n    @if (terminalItemsAreSelectable) {\n      <div\n        class=\"item selectable\"\n        [ngClass]=\"'level-' + level\"\n        [attr.role]=\"selectionElementRole\"\n        tabindex=\"0\"\n        [style.--level]=\"level\"\n        [class.active]=\"\n          (state$ | async).activePath ===\n          (level > 0 ? path + '/' : '') + (item.value || item.name)\n        \"\n        (click)=\"selectItem(item)\"\n        (enter)=\"selectItem(item)\"\n      >\n        <p class=\"name\">{{ item.name }}</p>\n      </div>\n    } @else {\n      <div class=\"item\" [style.--level]=\"level\">\n        <p class=\"name\">{{ item.name }}</p>\n      </div>\n    }\n  }\n}\n", styles: [".invisible{display:none}.item{display:flex;align-items:center;justify-content:space-between;margin:1px 0;margin-left:calc(var(--level) * .5rem);padding-right:.5rem;padding-top:.25rem;padding-bottom:.25rem}.item.expandable:hover,.item.selectable:hover{cursor:pointer;background-color:var(--hsi-adk-color-muted-primary-95);transition:all .2s}.item.active{background-color:var(--hsi-adk-color-muted-primary-95);color:var(--hsi-adk-color-primary-40)}.arrow{color:var(--hsi-adk-color-muted-primary-40);width:16px}\n"], dependencies: [{ kind: "component", type: HsiUiDirectoryComponent, selector: "hsi-ui-directory", inputs: ["items", "level", "path", "terminalItemsAreSelectable", "selectionElementRole", "selection"], outputs: ["selectionChanges", "stateChanges"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HsiUiDirectoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-directory', imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of items; track $index) {\n  @if (!!item.children && item.children.length > 0) {\n    <!-- This is the template for expandable nodes -->\n    <div [style.--level]=\"level\">\n      <div\n        class=\"item expandable\"\n        [ngClass]=\"'level-' + level\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"toggleOpen(item.name)\"\n        (enter)=\"toggleOpen(item.name)\"\n      >\n        <p class=\"name\">{{ item.name }}</p>\n        @if (open[item.name]) {\n          <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n            >expand_more</span\n          >\n        } @else {\n          <span aria-hidden=\"true\" class=\"material-symbols-outlined arrow\"\n            >chevron_right</span\n          >\n        }\n      </div>\n      <hsi-ui-directory\n        [items]=\"item.children\"\n        [level]=\"level + 1\"\n        [terminalItemsAreSelectable]=\"terminalItemsAreSelectable\"\n        [path]=\"\n          path.concat(\n            level !== 0\n              ? '/' + (item.value || item.name)\n              : item.value || item.name\n          )\n        \"\n        [class.invisible]=\"!open[item.name]\"\n        (stateChanges)=\"setState($event)\"\n        [selection]=\"state$ | async\"\n      ></hsi-ui-directory>\n    </div>\n  } @else {\n    <!-- This is the template for leaf nodes -->\n    @if (terminalItemsAreSelectable) {\n      <div\n        class=\"item selectable\"\n        [ngClass]=\"'level-' + level\"\n        [attr.role]=\"selectionElementRole\"\n        tabindex=\"0\"\n        [style.--level]=\"level\"\n        [class.active]=\"\n          (state$ | async).activePath ===\n          (level > 0 ? path + '/' : '') + (item.value || item.name)\n        \"\n        (click)=\"selectItem(item)\"\n        (enter)=\"selectItem(item)\"\n      >\n        <p class=\"name\">{{ item.name }}</p>\n      </div>\n    } @else {\n      <div class=\"item\" [style.--level]=\"level\">\n        <p class=\"name\">{{ item.name }}</p>\n      </div>\n    }\n  }\n}\n", styles: [".invisible{display:none}.item{display:flex;align-items:center;justify-content:space-between;margin:1px 0;margin-left:calc(var(--level) * .5rem);padding-right:.5rem;padding-top:.25rem;padding-bottom:.25rem}.item.expandable:hover,.item.selectable:hover{cursor:pointer;background-color:var(--hsi-adk-color-muted-primary-95);transition:all .2s}.item.active{background-color:var(--hsi-adk-color-muted-primary-95);color:var(--hsi-adk-color-primary-40)}.arrow{color:var(--hsi-adk-color-muted-primary-40);width:16px}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], terminalItemsAreSelectable: [{
+                type: Input
+            }], selectionElementRole: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], selectionChanges: [{
+                type: Output
+            }], stateChanges: [{
+                type: Output
+            }] } });
+
+var SortDirection;
+(function (SortDirection) {
+    SortDirection["asc"] = "asc";
+    SortDirection["desc"] = "desc";
+})(SortDirection || (SortDirection = {}));
+class TableColumn {
+    constructor(init) {
+        /**
+         * Whether the column is sortable.
+         */
+        this.sortable = false;
+        /**
+         * The sort order of the column. Used to determine the order of sorting when multiple columns are sorted.
+         * Sorting tiebreaks are determined by increasing sortOrder number.
+         **/
+        this.sortOrder = Number.MAX_SAFE_INTEGER;
+        /**
+         * Whether the column is a row header.
+         */
+        this.isRowHeader = false;
+        this.sortDirection = SortDirection.asc;
+        this.getAlignment = () => 'left';
+        safeAssign(this, init);
+        this.initialSortDirection = this.sortDirection;
+        if (this.ascendingSortFunction === undefined) {
+            this.ascendingSortFunction = this.defaultSort;
+        }
+    }
+    defaultSort(a, b) {
+        const accessor = this.getSortValue || this.getFormattedValue;
+        return ascending(accessor(a), accessor(b));
+    }
+}
+
+/* eslint-disable @angular-eslint/prefer-standalone */
+class SingleSortHeaderComponent {
+    getColumnSortClasses() {
+        const baseClasses = [
+            'material-symbols-outlined',
+            this.column.sortDirection,
+        ];
+        return this.column.activelySorted
+            ? baseClasses.concat('actively-sorted')
+            : baseClasses;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SingleSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: SingleSortHeaderComponent, isStandalone: false, selector: "[hsi-ui-single-sort-header]", inputs: { column: "column", sortIcon: "sortIcon" }, ngImport: i0, template: "<div class=\"header-cell-sort\">\n  <span>{{ column.label }}</span>\n  <span\n    aria-hidden=\"true\"\n    class=\"material-symbols-outlined\"\n    [ngClass]=\"getColumnSortClasses()\"\n    >{{ sortIcon }}</span\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SingleSortHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[hsi-ui-single-sort-header]', standalone: false, template: "<div class=\"header-cell-sort\">\n  <span>{{ column.label }}</span>\n  <span\n    aria-hidden=\"true\"\n    class=\"material-symbols-outlined\"\n    [ngClass]=\"getColumnSortClasses()\"\n    >{{ sortIcon }}</span\n  >\n</div>\n" }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], sortIcon: [{
+                type: Input
+            }] } });
+
+class TableComponent {
+    constructor(destroyRef) {
+        this.destroyRef = destroyRef;
+        this.sortIcon = 'arrow_upward';
+        this.sort = new BehaviorSubject(null);
+        this.sort$ = this.sort.asObservable();
+    }
+    ngOnInit() {
+        this.setTableData();
+        this.setTableHeaders();
+        this.validateRowHeaders();
+    }
+    setTableData() {
+        const config$ = this.config$.pipe(withLatestFrom(this.sort$), map(([config, sort]) => () => {
+            const activeSortColumn = sort || this.getMinSortOrderColumn(config.columns);
+            const columns = this.getColumnsWithNewSortApplied(activeSortColumn, config.columns, false);
+            return {
+                data: this.sortData(config.data, activeSortColumn, columns),
+                columns,
+            };
+        }));
+        const sort$ = this.sort$.pipe(filter((sort) => sort !== null), map((sort) => (sortedConfig) => {
+            const columns = this.getColumnsWithNewSortApplied(sort, sortedConfig.columns);
+            return {
+                data: this.sortData(sortedConfig.data, sort, columns),
+                columns,
+            };
+        }));
+        const sortedConfig$ = merge(config$, sort$).pipe(scan((sortedConfig, changeFn) => changeFn(sortedConfig), {
+            data: [],
+            columns: [],
+        }), shareReplay(1) // do not remove sort toggle will be called twice
+        );
+        this.data$ = sortedConfig$.pipe(map((x) => x.data), shareReplay(1));
+        this.columns$ = sortedConfig$.pipe(map((x) => x.columns), shareReplay(1));
+    }
+    getMinSortOrderColumn(columns) {
+        const minSortOrder = min(columns, (x) => x.sortOrder);
+        return columns.find((x) => x.sortOrder === minSortOrder);
+    }
+    getColumnsWithNewSortApplied(activeSortColumn, columns, toggleSortDirection = true) {
+        const columnsWithSortDir = columns.map((x) => {
+            if (x.label === activeSortColumn.label) {
+                if (toggleSortDirection) {
+                    x.sortDirection =
+                        x.sortDirection === SortDirection.asc
+                            ? SortDirection.desc
+                            : SortDirection.asc;
+                }
+                x.activelySorted = true;
+            }
+            else {
+                if (toggleSortDirection) {
+                    x.sortDirection = x.initialSortDirection;
+                }
+                x.activelySorted = false;
+            }
+            return x;
+        });
+        return columnsWithSortDir;
+    }
+    setTableHeaders() {
+        this.tableHeaders$ = this.columns$.pipe(map((columns) => columns.map((x) => x.label)), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay(1));
+    }
+    validateRowHeaders() {
+        this.columns$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((columns) => {
+            const rowHeaders = columns.filter((x) => x.isRowHeader);
+            if (rowHeaders.length > 1) {
+                throw new Error('Table can only have one row header column. Please update your column config.');
+            }
+        });
+    }
+    sortTableByColumn(column) {
+        this.sort.next(column);
+    }
+    sortData(data, primaryColumnSort, columns) {
+        const sortedColumns = columns.slice().sort((columnA, columnB) => {
+            return columnA.label === primaryColumnSort.label
+                ? -1
+                : columnB.label === primaryColumnSort.label
+                    ? 1
+                    : columnA.sortOrder - columnB.sortOrder;
+        });
+        const sortedData = data.slice().sort((a, b) => {
+            for (const column of sortedColumns) {
+                let returnValue = column.ascendingSortFunction(a, b);
+                if (column.sortDirection === SortDirection.desc) {
+                    returnValue *= -1;
+                }
+                if (returnValue !== 0)
+                    return returnValue;
+            }
+            return 0;
+        });
+        return sortedData;
+    }
+    columnTrackingFunction(_, column) {
+        return column.label;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TableComponent, isStandalone: false, selector: "hsi-ui-table", inputs: { config$: "config$", sortIcon: "sortIcon" }, ngImport: i0, template: "<table class=\"table-container\" cdk-table [dataSource]=\"data$\">\n  <col\n    *ngFor=\"let column of columns$ | async; trackBy: columnTrackingFunction\"\n    span=\"1\"\n    [style]=\"'width:' + column.width\"\n  />\n\n  <ng-container\n    *ngFor=\"let column of columns$ | async; trackBy: columnTrackingFunction\"\n    [cdkColumnDef]=\"column.label\"\n  >\n    <ng-container\n      *ngIf=\"column.sortable; then sortIconCells; else basicCells\"\n    ></ng-container>\n    <ng-template #sortIconCells>\n      <th\n        hsi-ui-single-sort-header\n        scope=\"col\"\n        cdk-header-cell\n        *cdkHeaderCellDef=\"let element\"\n        [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n        [column]=\"column\"\n        [sortIcon]=\"sortIcon\"\n        (click)=\"sortTableByColumn(column)\"\n      ></th>\n      <td\n        cdk-cell\n        [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n        *cdkCellDef=\"let element\"\n        [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n        data-cy=\"table-cell\"\n      >\n        {{ column.getFormattedValue(element) }}\n      </td>\n    </ng-template>\n    <ng-template #basicCells>\n      <th\n        cdk-header-cell\n        *cdkHeaderCellDef=\"let element\"\n        [class]=\"column.getAlignment(element)\"\n        scope=\"col\"\n      >\n        {{ column.label }}\n      </th>\n      <td\n        cdk-cell\n        [ngClass]=\"[column.getAlignment(element), 'sorted-cell']\"\n        *cdkCellDef=\"let element\"\n        [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n        data-cy=\"table-cell\"\n      >\n        {{ column.getFormattedValue(element) }}\n      </td>\n    </ng-template>\n  </ng-container>\n\n  <tr\n    cdk-header-row\n    class=\"header\"\n    *cdkHeaderRowDef=\"tableHeaders$ | async\"\n  ></tr>\n  <tr\n    cdk-row\n    class=\"row\"\n    data-cy=\"table-row\"\n    *cdkRowDef=\"let row; columns: tableHeaders$ | async\"\n  ></tr>\n  <ng-template></ng-template>\n</table>\n", styles: [".table-container{border-spacing:0}.table-container td:last-child.left{padding-right:0}.table-container th:last-child.left{padding-right:0}.table-container th{vertical-align:bottom}.table-container th.sorted-header{padding-right:0}.table-container .header-cell-sort{display:flex;align-items:flex-end}.table-container .header-cell-sort:hover{cursor:pointer}.table-container .material-symbols-outlined{display:flex;justify-content:center;width:.9rem;height:1.2rem;font-size:1.25rem;margin-left:.2rem;margin-right:.4rem;opacity:.25;transition:all .15s ease-in-out}.table-container .material-symbols-outlined:hover{opacity:.75}.table-container .material-symbols-outlined.actively-sorted{opacity:1}.table-container .desc{transform:rotate(180deg)}.table-container .left{text-align:left}.table-container .right{text-align:right}.table-container .right .header-cell-sort{justify-content:flex-end}.table-container .right.sorted-cell{padding-right:1.5rem}.table-container .center{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$1.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$1.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$1.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$1.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: SingleSortHeaderComponent, selector: "[hsi-ui-single-sort-header]", inputs: ["column", "sortIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<table class=\"table-container\" cdk-table [dataSource]=\"data$\">\n  <col\n    *ngFor=\"let column of columns$ | async; trackBy: columnTrackingFunction\"\n    span=\"1\"\n    [style]=\"'width:' + column.width\"\n  />\n\n  <ng-container\n    *ngFor=\"let column of columns$ | async; trackBy: columnTrackingFunction\"\n    [cdkColumnDef]=\"column.label\"\n  >\n    <ng-container\n      *ngIf=\"column.sortable; then sortIconCells; else basicCells\"\n    ></ng-container>\n    <ng-template #sortIconCells>\n      <th\n        hsi-ui-single-sort-header\n        scope=\"col\"\n        cdk-header-cell\n        *cdkHeaderCellDef=\"let element\"\n        [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n        [column]=\"column\"\n        [sortIcon]=\"sortIcon\"\n        (click)=\"sortTableByColumn(column)\"\n      ></th>\n      <td\n        cdk-cell\n        [ngClass]=\"[column.getAlignment(element), 'sorted-header']\"\n        *cdkCellDef=\"let element\"\n        [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n        data-cy=\"table-cell\"\n      >\n        {{ column.getFormattedValue(element) }}\n      </td>\n    </ng-template>\n    <ng-template #basicCells>\n      <th\n        cdk-header-cell\n        *cdkHeaderCellDef=\"let element\"\n        [class]=\"column.getAlignment(element)\"\n        scope=\"col\"\n      >\n        {{ column.label }}\n      </th>\n      <td\n        cdk-cell\n        [ngClass]=\"[column.getAlignment(element), 'sorted-cell']\"\n        *cdkCellDef=\"let element\"\n        [attr.scope]=\"column.isRowHeader ? 'row' : null\"\n        data-cy=\"table-cell\"\n      >\n        {{ column.getFormattedValue(element) }}\n      </td>\n    </ng-template>\n  </ng-container>\n\n  <tr\n    cdk-header-row\n    class=\"header\"\n    *cdkHeaderRowDef=\"tableHeaders$ | async\"\n  ></tr>\n  <tr\n    cdk-row\n    class=\"row\"\n    data-cy=\"table-row\"\n    *cdkRowDef=\"let row; columns: tableHeaders$ | async\"\n  ></tr>\n  <ng-template></ng-template>\n</table>\n", styles: [".table-container{border-spacing:0}.table-container td:last-child.left{padding-right:0}.table-container th:last-child.left{padding-right:0}.table-container th{vertical-align:bottom}.table-container th.sorted-header{padding-right:0}.table-container .header-cell-sort{display:flex;align-items:flex-end}.table-container .header-cell-sort:hover{cursor:pointer}.table-container .material-symbols-outlined{display:flex;justify-content:center;width:.9rem;height:1.2rem;font-size:1.25rem;margin-left:.2rem;margin-right:.4rem;opacity:.25;transition:all .15s ease-in-out}.table-container .material-symbols-outlined:hover{opacity:.75}.table-container .material-symbols-outlined.actively-sorted{opacity:1}.table-container .desc{transform:rotate(180deg)}.table-container .left{text-align:left}.table-container .right{text-align:right}.table-container .right .header-cell-sort{justify-content:flex-end}.table-container .right.sorted-cell{padding-right:1.5rem}.table-container .center{text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { config$: [{
+                type: Input
+            }], sortIcon: [{
+                type: Input
+            }] } });
+
+class HsiUiTableConfig {
+}
+
+class TableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: TableModule, declarations: [TableComponent, SingleSortHeaderComponent], imports: [CommonModule, CdkTableModule, MatIconModule], exports: [TableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableModule, imports: [CommonModule, CdkTableModule, MatIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TableComponent, SingleSortHeaderComponent],
+                    imports: [CommonModule, CdkTableModule, MatIconModule],
+                    exports: [TableComponent],
+                }]
+        }] });
+
+const HSI_UI_TAB_CONTENT = new InjectionToken('TabContent');
+/**
+ * Allows a tab to be lazy-loaded when it is activated when used as a directive on an ng-template. It is recommended that this be used when the content of the tab requires calculations.
+ *
+ * Has the same functionality as https://material.angular.io/components/tabs/overview#lazy-loading
+ */
+class TabContentDirective {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(/** Content for the tab. */ template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: TabContentDirective, isStandalone: true, selector: "[hsiUiTabContent]", providers: [
+            { provide: HSI_UI_TAB_CONTENT, useExisting: TabContentDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hsiUiTabContent]',
+                    providers: [
+                        { provide: HSI_UI_TAB_CONTENT, useExisting: TabContentDirective },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TabBodyComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TabBodyComponent, isStandalone: true, selector: "hsi-ui-tab-body", queries: [{ propertyName: "lazyLoadedContent", first: true, predicate: TabContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "bodyContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hsi-ui-tab-body',
+                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                }]
+        }], propDecorators: { bodyContent: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        lazyLoadedContent: [{
+                type: ContentChild,
+                args: [TabContentDirective, { read: TemplateRef, static: true }]
+            }] } });
+
+let nextUniqueId = 0;
+class TabLabelComponent {
+    constructor() {
+        this.id = `tab-label-${nextUniqueId++}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TabLabelComponent, isStandalone: true, selector: "hsi-ui-tab-label", inputs: { value: "value" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "labelContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template
+    ><div #label class="tab-label" [id]="id"><ng-content></ng-content></div
+  ></ng-template>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hsi-ui-tab-label',
+                    template: `<ng-template
+    ><div #label class="tab-label" [id]="id"><ng-content></ng-content></div
+  ></ng-template>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['label']
+            }], labelContent: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class TabsService {
+    constructor() {
+        this.activeTab = new BehaviorSubject(null);
+        this.activeTab$ = this.activeTab.asObservable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsService, decorators: [{
+            type: Injectable
+        }] });
+
+class TabItemComponent {
+    constructor(service) {
+        this.service = service;
+        this.isActive = false;
+    }
+    ngOnChanges() {
+        if (this.isActive) {
+            this.service.activeTab.next(this);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabItemComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TabItemComponent, isStandalone: true, selector: "hsi-ui-tab-item", inputs: { isActive: "isActive", value: "value" }, queries: [{ propertyName: "bodyComponent", first: true, predicate: TabBodyComponent, descendants: true }, { propertyName: "labelComponent", first: true, predicate: TabLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hsi-ui-tab-item',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], ctorParameters: () => [{ type: TabsService }], propDecorators: { isActive: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], bodyComponent: [{
+                type: ContentChild,
+                args: [TabBodyComponent]
+            }], labelComponent: [{
+                type: ContentChild,
+                args: [TabLabelComponent]
+            }] } });
+
+class TabsComponent {
+    constructor(service, destroyRef) {
+        this.service = service;
+        this.destroyRef = destroyRef;
+        this.tabChange = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        this.tabItems$ = this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef), startWith(''), map(() => this.tabs.toArray()));
+        this.initializeActiveTab();
+    }
+    initializeActiveTab() {
+        if (!this.service.activeTab.value) {
+            this.service.activeTab.next(this.tabs.first);
+        }
+    }
+    selectTab(tabItem) {
+        if (this.service.activeTab.value !== tabItem) {
+            this.service.activeTab.next(tabItem);
+            this.emitNewActiveTab(tabItem);
+        }
+    }
+    emitNewActiveTab(tabItem) {
+        const value = tabItem.value ??
+            tabItem.labelComponent.labelElement.nativeElement.innerText;
+        this.tabChange.emit(value);
+    }
+    handleKeydown(event, tabItem) {
+        const tabIndex = this.tabs.toArray().indexOf(tabItem);
+        let cancelOtherActions = false;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.selectTab(tabItem);
+                cancelOtherActions = true;
+                break;
+            case 'ArrowRight':
+            case 'Right':
+                this.focusNextTab(tabIndex);
+                cancelOtherActions = true;
+                break;
+            case 'ArrowLeft':
+            case 'Left':
+                this.focusPreviousTab(tabIndex);
+                cancelOtherActions = true;
+                break;
+            case 'Home':
+                this.focusTab(this.tabs.first);
+                cancelOtherActions = true;
+                break;
+            case 'End':
+                this.focusTab(this.tabs.last);
+                cancelOtherActions = true;
+                break;
+            default:
+                break;
+        }
+        if (cancelOtherActions) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    focusTab(tabItem) {
+        tabItem.labelComponent.labelElement.nativeElement.parentElement?.focus();
+    }
+    focusNextTab(tabIndex) {
+        if (tabIndex < this.tabs.length - 1) {
+            this.focusTab(this.tabs.toArray()[tabIndex + 1]);
+        }
+        else {
+            this.focusTab(this.tabs.first);
+        }
+    }
+    focusPreviousTab(tabIndex) {
+        if (tabIndex > 0) {
+            this.focusTab(this.tabs.toArray()[tabIndex - 1]);
+        }
+        else {
+            this.focusTab(this.tabs.last);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TabsComponent, isStandalone: true, selector: "hsi-ui-tabs", outputs: { tabChange: "tabChange" }, providers: [TabsService], queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0, template: "<ng-container *ngIf=\"service.activeTab$ | async as activeTab\">\n  <div class=\"tab-list\" role=\"tablist\">\n    <div\n      *ngFor=\"let item of tabItems$ | async\"\n      role=\"tab\"\n      [tabindex]=\"activeTab === item ? 0 : -1\"\n      class=\"tab-label-container\"\n      (click)=\"selectTab(item)\"\n      (keydown)=\"handleKeydown($event, item)\"\n      [attr.aria-selected]=\"activeTab === item\"\n      [class.active]=\"activeTab === item\"\n      aria-controls=\"tabs-component-body\"\n      data-cy=\"level\"\n    >\n      <ng-container *ngIf=\"item.labelComponent\">\n        <ng-container *ngTemplateOutlet=\"item.labelComponent.labelContent\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <div\n    class=\"tabs-body\"\n    id=\"tabs-component-body\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTab?.labelComponent?.id\"\n  >\n    @if (activeTab.bodyComponent) {\n      @if (activeTab.bodyComponent?.lazyLoadedContent) {\n        <ng-container\n          *ngTemplateOutlet=\"activeTab.bodyComponent.lazyLoadedContent\"\n        >\n        </ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"activeTab.bodyComponent.bodyContent\">\n        </ng-container>\n      }\n    }\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hsi-ui-tabs', imports: [CommonModule], providers: [TabsService], template: "<ng-container *ngIf=\"service.activeTab$ | async as activeTab\">\n  <div class=\"tab-list\" role=\"tablist\">\n    <div\n      *ngFor=\"let item of tabItems$ | async\"\n      role=\"tab\"\n      [tabindex]=\"activeTab === item ? 0 : -1\"\n      class=\"tab-label-container\"\n      (click)=\"selectTab(item)\"\n      (keydown)=\"handleKeydown($event, item)\"\n      [attr.aria-selected]=\"activeTab === item\"\n      [class.active]=\"activeTab === item\"\n      aria-controls=\"tabs-component-body\"\n      data-cy=\"level\"\n    >\n      <ng-container *ngIf=\"item.labelComponent\">\n        <ng-container *ngTemplateOutlet=\"item.labelComponent.labelContent\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <div\n    class=\"tabs-body\"\n    id=\"tabs-component-body\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTab?.labelComponent?.id\"\n  >\n    @if (activeTab.bodyComponent) {\n      @if (activeTab.bodyComponent?.lazyLoadedContent) {\n        <ng-container\n          *ngTemplateOutlet=\"activeTab.bodyComponent.lazyLoadedContent\"\n        >\n        </ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"activeTab.bodyComponent.bodyContent\">\n        </ng-container>\n      }\n    }\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: TabsService }, { type: i0.DestroyRef }], propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [TabItemComponent]
+            }], tabChange: [{
+                type: Output
+            }] } });
+
+class TabsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: TabsModule, imports: [TabsComponent,
+            TabLabelComponent,
+            TabItemComponent,
+            TabBodyComponent,
+            TabContentDirective], exports: [TabsComponent,
+            TabLabelComponent,
+            TabItemComponent,
+            TabBodyComponent,
+            TabContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsModule, imports: [TabsComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        TabsComponent,
+                        TabLabelComponent,
+                        TabItemComponent,
+                        TabBodyComponent,
+                        TabContentDirective,
+                    ],
+                    exports: [
+                        TabsComponent,
+                        TabLabelComponent,
+                        TabItemComponent,
+                        TabBodyComponent,
+                        TabContentDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoComplete, ComboboxComponent, ComboboxLabelComponent, ComboboxService, EditableTextboxComponent, FocusTextbox, HSI_UI_TAB_CONTENT, HsiUiComboboxModule, HsiUiDirectoryComponent, HsiUiTableConfig, Key, ListboxAction, ListboxComponent, ListboxGroupComponent, ListboxLabelComponent, ListboxOptionComponent, OptionAction, SelectAllListboxOptionComponent, SortDirection, TabBodyComponent, TabContentDirective, TabItemComponent, TabLabelComponent, TableColumn, TableComponent, TableModule, TabsComponent, TabsModule, TextboxAction, TextboxComponent };
+//# sourceMappingURL=mathstack-ui.mjs.map