@frame-ui-ng/components 0.1.0-beta.0

package/fesm2022/frame-ui-ng-components-combobox.mjs

@@ -0,0 +1,859 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, DestroyRef, ElementRef, signal, contentChild, input, booleanAttribute, model, computed, effect, afterNextRender, ViewChild, Component, Renderer2, NgModule } from '@angular/core';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { NgTemplateOutlet } from '@angular/common';
+import { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';
+
+class FrComboboxContent {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxContent, isStandalone: true, selector: "ng-template[frComboboxContent]", exportAs: ["frComboboxContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frComboboxContent]',
+                    exportAs: 'frComboboxContent',
+                }]
+        }] });
+class FrComboboxPanel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxPanel, isStandalone: true, selector: "[frComboboxPanel], frame-combobox-panel", host: { attributes: { "role": "listbox" }, classAttribute: "frame-combobox__panel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxPanel], frame-combobox-panel',
+                    host: {
+                        class: 'frame-combobox__panel',
+                        role: 'listbox',
+                    },
+                }]
+        }] });
+class FrComboboxList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxList, isStandalone: true, selector: "[frComboboxList], frame-combobox-list", host: { classAttribute: "frame-combobox__list" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxList], frame-combobox-list',
+                    host: {
+                        class: 'frame-combobox__list',
+                    },
+                }]
+        }] });
+class FrComboboxEmpty {
+    root = inject(FrComboboxRootLookup);
+    hidden() {
+        return this.root.visibleCount() > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxEmpty, isStandalone: true, selector: "[frComboboxEmpty], frame-combobox-empty", host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "frame-combobox__empty" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxEmpty], frame-combobox-empty',
+                    host: {
+                        class: 'frame-combobox__empty',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                    },
+                }]
+        }] });
+class FrComboboxGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxGroup, isStandalone: true, selector: "[frComboboxGroup], frame-combobox-group", host: { classAttribute: "frame-combobox__group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxGroup], frame-combobox-group',
+                    host: {
+                        class: 'frame-combobox__group',
+                    },
+                }]
+        }] });
+class FrComboboxLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxLabel, isStandalone: true, selector: "[frComboboxLabel], frame-combobox-label", host: { classAttribute: "frame-combobox__label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxLabel], frame-combobox-label',
+                    host: {
+                        class: 'frame-combobox__label',
+                    },
+                }]
+        }] });
+class FrComboboxSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxSeparator, isStandalone: true, selector: "[frComboboxSeparator], frame-combobox-separator", host: { attributes: { "role": "separator" }, classAttribute: "frame-combobox__separator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxSeparator], frame-combobox-separator',
+                    host: {
+                        class: 'frame-combobox__separator',
+                        role: 'separator',
+                    },
+                }]
+        }] });
+class FrComboboxCollection {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxCollection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxCollection, isStandalone: true, selector: "[frComboboxCollection], frame-combobox-collection", host: { classAttribute: "frame-combobox__collection" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxCollection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxCollection], frame-combobox-collection',
+                    host: {
+                        class: 'frame-combobox__collection',
+                    },
+                }]
+        }] });
+// Resolved by the root file to avoid a circular import in decorator metadata.
+class FrComboboxRootLookup {
+}
+
+const POSITIONS = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+];
+class FrCombobox extends FrControlValueAccessor {
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    items = new Set();
+    itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
+    selectedLabels = new Map();
+    resizeObserver = null;
+    origin;
+    content = contentChild(FrComboboxContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    autoHighlight = input(false, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'invalid', transform: booleanAttribute });
+    itemToStringValue = input((item) => String(item ?? ''), ...(ngDevMode ? [{ debugName: "itemToStringValue" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showClear = input(false, { ...(ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.invalidInput() || this.formInvalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    anchorWidth = signal(null, ...(ngDevMode ? [{ debugName: "anchorWidth" }] : /* istanbul ignore next */ []));
+    highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
+    positions = POSITIONS;
+    selectedValues = computed(() => {
+        const value = this.value();
+        return Array.isArray(value) ? value : value === null ? [] : [value];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        if (this.multiple()) {
+            return this.query();
+        }
+        const value = this.value();
+        if (value === null || Array.isArray(value)) {
+            return this.query();
+        }
+        return this.query() || this.selectedLabels.get(value) || this.itemToStringValue()(value);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.selectedValues().length > 0 || this.query().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            if (this.debugVisible()) {
+                afterNextRender(() => this.open());
+            }
+        });
+        effect(() => {
+            this.query();
+            this.itemsVersion();
+            if (this.autoHighlight()) {
+                this.highlightedIndex.set(0);
+            }
+        });
+        queueMicrotask(() => {
+            this.measureAnchor();
+            this.attachResizeObserver();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+        });
+    }
+    registerItem(item) {
+        this.items.add(item);
+        this.bumpItems();
+    }
+    unregisterItem(item) {
+        this.items.delete(item);
+        this.bumpItems();
+    }
+    visibleItems() {
+        this.itemsVersion();
+        return Array.from(this.items).filter((item) => item.isVisible());
+    }
+    visibleCount() {
+        return this.visibleItems().length;
+    }
+    overlayMinWidth() {
+        return this.anchorWidth() ?? 0;
+    }
+    overlayPanelClasses() {
+        return ['frame-combobox-overlay', `frame-combobox-overlay--${this.overlaySide()}`];
+    }
+    isSelected(value) {
+        return this.selectedValues().some((selected) => Object.is(selected, value));
+    }
+    isHighlighted(item) {
+        return this.visibleItems()[this.highlightedIndex()] === item;
+    }
+    rememberItemLabel(value, label) {
+        this.selectedLabels.set(value, label);
+    }
+    itemVisible(label) {
+        const query = this.query().trim().toLowerCase();
+        return !query || label.toLowerCase().includes(query);
+    }
+    open() {
+        if (this.disabled()) {
+            return;
+        }
+        this.measureAnchor();
+        this.isOpen.set(true);
+    }
+    close() {
+        if (this.debugVisible()) {
+            return;
+        }
+        this.isOpen.set(false);
+        this.markAsTouched();
+    }
+    touch() {
+        this.markAsTouched();
+    }
+    clear() {
+        this.query.set('');
+        this.value.set(this.multiple() ? [] : null);
+        this.notifyValueChange(this.value());
+        this.markAsTouched();
+    }
+    selectItem(value, label) {
+        this.selectedLabels.set(value, label);
+        if (this.multiple()) {
+            const current = this.selectedValues();
+            const exists = current.some((item) => Object.is(item, value));
+            const next = exists ? current.filter((item) => !Object.is(item, value)) : [...current, value];
+            this.value.set(next);
+            this.notifyValueChange(next);
+            this.query.set('');
+            this.open();
+            return;
+        }
+        this.value.set(value);
+        this.notifyValueChange(value);
+        this.query.set('');
+        this.close();
+    }
+    removeItem(value) {
+        if (!this.multiple()) {
+            this.clear();
+            return;
+        }
+        const next = this.selectedValues().filter((item) => !Object.is(item, value));
+        this.value.set(next);
+        this.notifyValueChange(next);
+        this.markAsTouched();
+    }
+    updateQuery(value) {
+        this.query.set(value);
+        this.highlightedIndex.set(0);
+        this.open();
+    }
+    moveHighlight(delta) {
+        const count = this.visibleCount();
+        if (count === 0) {
+            this.highlightedIndex.set(0);
+            return;
+        }
+        this.highlightedIndex.set((this.highlightedIndex() + delta + count) % count);
+    }
+    selectHighlighted() {
+        const item = this.visibleItems()[this.highlightedIndex()];
+        item?.select();
+    }
+    handlePositionChange(event) {
+        this.overlaySide.set(event.connectionPair.overlayY === 'bottom' ? 'top' : 'bottom');
+    }
+    setViewValue(value) {
+        this.value.set(value);
+        this.query.set('');
+    }
+    bumpItems() {
+        this.itemsVersion.update((value) => value + 1);
+    }
+    measureAnchor() {
+        const element = this.origin?.elementRef.nativeElement ?? this.elementRef.nativeElement;
+        if (typeof element?.getBoundingClientRect !== 'function') {
+            this.anchorWidth.set(null);
+            return;
+        }
+        this.anchorWidth.set(element.getBoundingClientRect().width || null);
+    }
+    attachResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const element = this.origin?.elementRef.nativeElement ?? this.elementRef.nativeElement;
+        if (typeof element?.getBoundingClientRect !== 'function') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.measureAnchor());
+        this.resizeObserver.observe(element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCombobox, isStandalone: true, selector: "[frCombobox], frame-combobox", inputs: { autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null" }, classAttribute: "frame-combobox" }, providers: [
+            provideDsValueAccessor(FrCombobox),
+            {
+                provide: FrComboboxRootLookup,
+                useExisting: FrCombobox,
+            },
+        ], queries: [{ propertyName: "content", first: true, predicate: FrComboboxContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: CdkOverlayOrigin, descendants: true }], exportAs: ["frCombobox"], usesInheritance: true, ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayWidth]="overlayMinWidth()"
+      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
+      (overlayOutsideClick)="close()"
+      (positionChange)="handlePositionChange($event)"
+      (detach)="close()"
+    >
+      @if (content()) {
+        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCombobox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[frCombobox], frame-combobox',
+                    exportAs: 'frCombobox',
+                    imports: [CdkConnectedOverlay, CdkOverlayOrigin, NgTemplateOutlet],
+                    providers: [
+                        provideDsValueAccessor(FrCombobox),
+                        {
+                            provide: FrComboboxRootLookup,
+                            useExisting: FrCombobox,
+                        },
+                    ],
+                    host: {
+                        class: 'frame-combobox',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-invalid]': 'invalid() ? "" : null'
+                    },
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayWidth]="overlayMinWidth()"
+      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
+      (overlayOutsideClick)="close()"
+      (positionChange)="handlePositionChange($event)"
+      (detach)="close()"
+    >
+      @if (content()) {
+        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
+      }
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { origin: [{
+                type: ViewChild,
+                args: [CdkOverlayOrigin]
+            }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrComboboxContent), { isSignal: true }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class FrComboboxInput {
+    root = inject(FrCombobox);
+    elementRef = inject(ElementRef);
+    handleInput() {
+        this.root.updateQuery(this.elementRef.nativeElement.value);
+    }
+    handleBlur() {
+        this.root.touch();
+    }
+    handleKeydown(event) {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.root.open();
+            this.root.moveHighlight(1);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.root.open();
+            this.root.moveHighlight(-1);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.root.selectHighlighted();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.root.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxInput, isStandalone: true, selector: "input[frComboboxInput]", host: { attributes: { "autocomplete": "off", "role": "combobox", "type": "text" }, listeners: { "blur": "handleBlur()", "focus": "root.open()", "input": "handleInput()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-disabled": "root.disabled() ? \"true\" : null", "attr.aria-expanded": "root.isOpen() ? \"true\" : \"false\"", "attr.aria-invalid": "root.invalid() ? \"true\" : null", "attr.disabled": "root.disabled() ? \"\" : null", "attr.data-has-value": "root.hasValue() ? \"true\" : \"false\"", "value": "root.displayValue()" }, classAttribute: "frame-combobox__input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[frComboboxInput]',
+                    host: {
+                        class: 'frame-combobox__input',
+                        '[attr.aria-disabled]': 'root.disabled() ? "true" : null',
+                        '[attr.aria-expanded]': 'root.isOpen() ? "true" : "false"',
+                        '[attr.aria-invalid]': 'root.invalid() ? "true" : null',
+                        '[attr.disabled]': 'root.disabled() ? "" : null',
+                        '[attr.data-has-value]': 'root.hasValue() ? "true" : "false"',
+                        '[value]': 'root.displayValue()',
+                        autocomplete: 'off',
+                        role: 'combobox',
+                        type: 'text',
+                        '(blur)': 'handleBlur()',
+                        '(focus)': 'root.open()',
+                        '(input)': 'handleInput()',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                }]
+        }] });
+class FrComboboxTrigger {
+    root = inject(FrCombobox);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxTrigger, isStandalone: true, selector: "button[frComboboxTrigger]", host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "root.isOpen() ? root.close() : root.open()" }, properties: { "attr.aria-expanded": "root.isOpen() ? \"true\" : \"false\"", "attr.disabled": "root.disabled() ? \"\" : null" }, classAttribute: "frame-combobox__trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frComboboxTrigger]',
+                    host: {
+                        class: 'frame-combobox__trigger',
+                        '[attr.aria-expanded]': 'root.isOpen() ? "true" : "false"',
+                        '[attr.disabled]': 'root.disabled() ? "" : null',
+                        role: 'combobox',
+                        type: 'button',
+                        '(click)': 'root.isOpen() ? root.close() : root.open()',
+                    },
+                }]
+        }] });
+class FrComboboxClear {
+    root = inject(FrCombobox);
+    hidden() {
+        return !this.root.showClear() || !this.root.hasValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxClear, isStandalone: true, selector: "button[frComboboxClear]", host: { attributes: { "type": "button" }, listeners: { "click": "root.clear()" }, properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "frame-combobox__clear" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxClear, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frComboboxClear]',
+                    host: {
+                        class: 'frame-combobox__clear',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                        type: 'button',
+                        '(click)': 'root.clear()',
+                    },
+                }]
+        }] });
+
+class FrComboboxItem {
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    root = inject(FrCombobox);
+    mutationObserver = null;
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemLabel = input(null, { ...(ngDevMode ? { debugName: "itemLabel" } : /* istanbul ignore next */ {}), alias: 'label' });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    resolvedLabel = signal('', ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.itemLabel() ?? this.resolvedLabel(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.root.itemVisible(this.label()), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.root.registerItem(this);
+        this.destroyRef.onDestroy(() => {
+            this.mutationObserver?.disconnect();
+            this.root.unregisterItem(this);
+        });
+        afterNextRender(() => {
+            this.refreshResolvedLabel();
+            this.observeTextChanges();
+        });
+        effect(() => {
+            if (this.root.isSelected(this.value())) {
+                this.root.rememberItemLabel(this.value(), this.label());
+            }
+        });
+    }
+    isVisible() {
+        return this.visible();
+    }
+    isSelected() {
+        return this.root.isSelected(this.value());
+    }
+    isHighlighted() {
+        return this.root.isHighlighted(this);
+    }
+    select() {
+        if (!this.disabled() && this.isVisible()) {
+            this.root.selectItem(this.value(), this.label());
+        }
+    }
+    highlightSelf() {
+        const index = this.root.visibleItems().indexOf(this);
+        if (index >= 0) {
+            this.root.highlightedIndex.set(index);
+        }
+    }
+    resolveLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    refreshResolvedLabel() {
+        this.resolvedLabel.set(this.resolveLabel());
+    }
+    observeTextChanges() {
+        if (typeof MutationObserver === 'undefined' || this.itemLabel() !== null) {
+            return;
+        }
+        this.mutationObserver = new MutationObserver(() => this.refreshResolvedLabel());
+        this.mutationObserver.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrComboboxItem, isStandalone: true, selector: "button[frComboboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option", "type": "button" }, listeners: { "click": "select()", "mouseenter": "highlightSelf()" }, properties: { "attr.aria-selected": "isSelected() ? \"true\" : \"false\"", "attr.data-highlighted": "isHighlighted() ? \"\" : null", "attr.data-hidden": "isVisible() ? null : \"\"", "attr.data-selected": "isSelected() ? \"\" : null", "attr.disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-combobox__item" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frComboboxItem]',
+                    host: {
+                        class: 'frame-combobox__item',
+                        '[attr.aria-selected]': 'isSelected() ? "true" : "false"',
+                        '[attr.data-highlighted]': 'isHighlighted() ? "" : null',
+                        '[attr.data-hidden]': 'isVisible() ? null : ""',
+                        '[attr.data-selected]': 'isSelected() ? "" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        role: 'option',
+                        type: 'button',
+                        '(click)': 'select()',
+                        '(mouseenter)': 'highlightSelf()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+class FrComboboxItemIndicator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxItemIndicator, isStandalone: true, selector: "[frComboboxItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-combobox__item-indicator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxItemIndicator]',
+                    host: {
+                        class: 'frame-combobox__item-indicator',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class FrComboboxChips {
+    root = inject(FrCombobox);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxChips, isStandalone: true, selector: "[frComboboxChips], frame-combobox-chips", host: { properties: { "attr.data-disabled": "root.disabled() ? \"\" : null", "attr.data-invalid": "root.invalid() ? \"\" : null" }, classAttribute: "frame-combobox__chips" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChips, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxChips], frame-combobox-chips',
+                    host: {
+                        class: 'frame-combobox__chips',
+                        '[attr.data-disabled]': 'root.disabled() ? "" : null',
+                        '[attr.data-invalid]': 'root.invalid() ? "" : null',
+                    },
+                }]
+        }] });
+class FrComboboxValueList {
+    root = inject(FrCombobox);
+    values() {
+        return this.root.selectedValues();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxValueList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxValueList, isStandalone: true, selector: "[frComboboxValue], frame-combobox-value", host: { classAttribute: "frame-combobox__value" }, exportAs: ["frComboboxValue"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxValueList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxValue], frame-combobox-value',
+                    exportAs: 'frComboboxValue',
+                    host: {
+                        class: 'frame-combobox__value',
+                    },
+                }]
+        }] });
+class FrComboboxChip {
+    root = inject(FrCombobox);
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    removable = input(true, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        afterNextRender(() => this.attachDefaultRemoveButton());
+    }
+    remove() {
+        if (this.root.disabled()) {
+            return;
+        }
+        this.root.removeItem(this.value());
+    }
+    attachDefaultRemoveButton() {
+        const element = this.elementRef.nativeElement;
+        if (!this.removable() || element.querySelector('[frComboboxChipRemove], [frcomboboxchipremove]')) {
+            return;
+        }
+        const button = this.renderer.createElement('button');
+        const label = this.renderer.createText('×');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.setAttribute(button, 'aria-label', 'Remove selected item');
+        this.renderer.setAttribute(button, 'data-default-remove', '');
+        this.renderer.addClass(button, 'frame-combobox__chip-remove');
+        this.renderer.appendChild(button, label);
+        this.renderer.listen(button, 'click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.remove();
+        });
+        this.renderer.appendChild(element, button);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrComboboxChip, isStandalone: true, selector: "[frComboboxChip], frame-combobox-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-combobox__chip" }, exportAs: ["frComboboxChip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxChip], frame-combobox-chip',
+                    exportAs: 'frComboboxChip',
+                    host: {
+                        class: 'frame-combobox__chip',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }] } });
+class FrComboboxChipRemove {
+    chip = inject(FrComboboxChip);
+    remove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.chip.remove();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxChipRemove, isStandalone: true, selector: "button[frComboboxChipRemove]", host: { attributes: { "type": "button" }, listeners: { "click": "remove($event)" }, classAttribute: "frame-combobox__chip-remove" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChipRemove, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frComboboxChipRemove]',
+                    host: {
+                        class: 'frame-combobox__chip-remove',
+                        type: 'button',
+                        '(click)': 'remove($event)',
+                    },
+                }]
+        }] });
+class FrComboboxChipsInput {
+    root = inject(FrCombobox);
+    handleInput(event) {
+        this.root.updateQuery(event.target.value);
+    }
+    handleKeydown(event) {
+        if (event.key === 'Backspace' && this.root.query() === '') {
+            const values = this.root.selectedValues();
+            const last = values.at(-1);
+            if (last !== undefined) {
+                this.root.removeItem(last);
+            }
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.root.open();
+            this.root.moveHighlight(1);
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.root.selectHighlighted();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChipsInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxChipsInput, isStandalone: true, selector: "input[frComboboxChipsInput]", host: { attributes: { "autocomplete": "off", "type": "text" }, listeners: { "focus": "root.open()", "input": "handleInput($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.disabled": "root.disabled() ? \"\" : null", "value": "root.query()" }, classAttribute: "frame-combobox__chips-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChipsInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[frComboboxChipsInput]',
+                    host: {
+                        class: 'frame-combobox__chips-input',
+                        '[attr.disabled]': 'root.disabled() ? "" : null',
+                        '[value]': 'root.query()',
+                        autocomplete: 'off',
+                        type: 'text',
+                        '(focus)': 'root.open()',
+                        '(input)': 'handleInput($event)',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                }]
+        }] });
+class FrComboboxError {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxError, isStandalone: true, selector: "[frComboboxError], frame-combobox-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-combobox__error" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frComboboxError], frame-combobox-error',
+                    host: {
+                        class: 'frame-combobox__error',
+                        'aria-live': 'polite',
+                    },
+                }]
+        }] });
+
+class FrComboboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxModule, imports: [FrCombobox,
+            FrComboboxChip,
+            FrComboboxChipRemove,
+            FrComboboxChips,
+            FrComboboxChipsInput,
+            FrComboboxClear,
+            FrComboboxCollection,
+            FrComboboxContent,
+            FrComboboxEmpty,
+            FrComboboxError,
+            FrComboboxGroup,
+            FrComboboxInput,
+            FrComboboxItem,
+            FrComboboxItemIndicator,
+            FrComboboxLabel,
+            FrComboboxList,
+            FrComboboxPanel,
+            FrComboboxSeparator,
+            FrComboboxTrigger,
+            FrComboboxValueList], exports: [FrCombobox,
+            FrComboboxChip,
+            FrComboboxChipRemove,
+            FrComboboxChips,
+            FrComboboxChipsInput,
+            FrComboboxClear,
+            FrComboboxCollection,
+            FrComboboxContent,
+            FrComboboxEmpty,
+            FrComboboxError,
+            FrComboboxGroup,
+            FrComboboxInput,
+            FrComboboxItem,
+            FrComboboxItemIndicator,
+            FrComboboxLabel,
+            FrComboboxList,
+            FrComboboxPanel,
+            FrComboboxSeparator,
+            FrComboboxTrigger,
+            FrComboboxValueList] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrCombobox,
+                        FrComboboxChip,
+                        FrComboboxChipRemove,
+                        FrComboboxChips,
+                        FrComboboxChipsInput,
+                        FrComboboxClear,
+                        FrComboboxCollection,
+                        FrComboboxContent,
+                        FrComboboxEmpty,
+                        FrComboboxError,
+                        FrComboboxGroup,
+                        FrComboboxInput,
+                        FrComboboxItem,
+                        FrComboboxItemIndicator,
+                        FrComboboxLabel,
+                        FrComboboxList,
+                        FrComboboxPanel,
+                        FrComboboxSeparator,
+                        FrComboboxTrigger,
+                        FrComboboxValueList,
+                    ],
+                    exports: [
+                        FrCombobox,
+                        FrComboboxChip,
+                        FrComboboxChipRemove,
+                        FrComboboxChips,
+                        FrComboboxChipsInput,
+                        FrComboboxClear,
+                        FrComboboxCollection,
+                        FrComboboxContent,
+                        FrComboboxEmpty,
+                        FrComboboxError,
+                        FrComboboxGroup,
+                        FrComboboxInput,
+                        FrComboboxItem,
+                        FrComboboxItemIndicator,
+                        FrComboboxLabel,
+                        FrComboboxList,
+                        FrComboboxPanel,
+                        FrComboboxSeparator,
+                        FrComboboxTrigger,
+                        FrComboboxValueList,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxModule, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList };
+//# sourceMappingURL=frame-ui-ng-components-combobox.mjs.map