ngx-com 0.0.1 → 0.0.3

package/fesm2022/ngx-com-components-dropdown.mjs

@@ -0,0 +1,2598 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, viewChild, input, output, computed, ChangeDetectionStrategy, Component, DestroyRef, signal, TemplateRef, Directive, ViewContainerRef, DOCUMENT, contentChild, linkedSignal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgControl } from '@angular/forms';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+/**
+ * CVA variants for the dropdown trigger button.
+ * Uses semantic theme tokens for consistent cross-theme styling.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-input-placeholder`, `--color-ring`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-warn`, `--color-success`, `--color-primary`, `--color-border`, `--radius-input`
+ */
+const dropdownTriggerVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-between',
+    'w-full',
+    'rounded-input',
+    'border',
+    'bg-input-background',
+    'text-input-foreground',
+    'ring-offset-background',
+    'transition-colors',
+    'duration-150',
+    'placeholder:text-input-placeholder',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'focus:ring-ring',
+    'disabled:cursor-not-allowed',
+    'disabled:bg-disabled',
+    'disabled:text-disabled-foreground',
+], {
+    variants: {
+        variant: {
+            default: [
+                'border-input-border',
+                'hover:border-border',
+            ],
+            outline: [
+                'border-2',
+                'border-input-border',
+                'hover:border-foreground',
+            ],
+            ghost: [
+                'border-transparent',
+                'bg-transparent',
+                'hover:bg-muted',
+            ],
+            filled: [
+                'border-transparent',
+                'bg-muted',
+                'hover:bg-muted-hover',
+            ],
+        },
+        size: {
+            sm: ['h-8', 'px-2', 'text-xs', 'gap-1'],
+            default: ['h-10', 'px-3', 'text-sm', 'gap-2'],
+            lg: ['h-12', 'px-4', 'text-base', 'gap-3'],
+        },
+        state: {
+            default: [],
+            error: [
+                'border-warn',
+                'focus:ring-warn',
+            ],
+            success: [
+                'border-success',
+                'focus:ring-success',
+            ],
+        },
+        open: {
+            true: ['ring-2', 'ring-ring', 'border-primary'],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            open: true,
+            variant: 'default',
+            class: ['border-primary'],
+        },
+        {
+            open: true,
+            variant: 'outline',
+            class: ['border-primary'],
+        },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        state: 'default',
+        open: false,
+    },
+});
+/**
+ * CVA variants for the dropdown panel (overlay).
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--radius-overlay`
+ */
+const dropdownPanelVariants = cva([
+    'z-50',
+    'overflow-hidden',
+    'rounded-overlay',
+    'border',
+    'border-border-subtle',
+    'bg-popover',
+    'text-popover-foreground',
+    'shadow-lg',
+    'outline-none',
+], {
+    variants: {
+        size: {
+            sm: ['text-xs'],
+            default: ['text-sm'],
+            lg: ['text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for individual dropdown options.
+ *
+ * @tokens `--color-popover-foreground`, `--color-muted`, `--color-primary-subtle`,
+ *         `--color-primary-subtle-foreground`, `--color-disabled-foreground`
+ */
+const dropdownOptionVariants = cva([
+    'relative',
+    'flex',
+    'w-full',
+    'cursor-pointer',
+    'select-none',
+    'items-center',
+    'outline-none',
+    'transition-colors',
+    'duration-100',
+], {
+    variants: {
+        size: {
+            sm: ['px-2', 'py-1.5', 'text-xs'],
+            default: ['px-3', 'py-2', 'text-sm'],
+            lg: ['px-4', 'py-3', 'text-base'],
+        },
+        state: {
+            default: [
+                'text-popover-foreground',
+                'hover:bg-muted',
+            ],
+            active: [
+                'bg-muted',
+                'text-popover-foreground',
+            ],
+            selected: [
+                'bg-primary-subtle',
+                'text-primary-subtle-foreground',
+            ],
+            'selected-active': [
+                'bg-primary-subtle',
+                'text-primary-subtle-foreground',
+                'brightness-95',
+            ],
+            disabled: [
+                'cursor-not-allowed',
+                'text-disabled-foreground',
+                'hover:bg-transparent',
+            ],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        state: 'default',
+    },
+});
+/**
+ * CVA variants for the search input.
+ *
+ * @tokens `--color-border-subtle`, `--color-input-placeholder`, `--color-disabled-foreground`
+ */
+const dropdownSearchVariants = cva([
+    'flex',
+    'h-10',
+    'w-full',
+    'border-b',
+    'border-border-subtle',
+    'bg-transparent',
+    'px-3',
+    'py-2',
+    'text-sm',
+    'placeholder:text-input-placeholder',
+    'outline-none',
+    'disabled:cursor-not-allowed',
+    'disabled:text-disabled-foreground',
+], {
+    variants: {
+        size: {
+            sm: ['h-8', 'px-2', 'text-xs'],
+            default: ['h-10', 'px-3', 'text-sm'],
+            lg: ['h-12', 'px-4', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for multi-select tags.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--radius-tag`
+ */
+const dropdownTagVariants = cva([
+    'inline-flex',
+    'items-center',
+    'gap-1',
+    'rounded-tag',
+    'font-medium',
+    'transition-colors',
+    'duration-100',
+], {
+    variants: {
+        size: {
+            sm: ['h-5', 'px-1.5', 'text-xs'],
+            default: ['h-6', 'px-2', 'text-xs'],
+            lg: ['h-7', 'px-2.5', 'text-sm'],
+        },
+        variant: {
+            default: [
+                'bg-muted',
+                'text-muted-foreground',
+                'hover:bg-muted-hover',
+            ],
+            primary: [
+                'bg-primary-subtle',
+                'text-primary-subtle-foreground',
+                'hover:brightness-95',
+            ],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        variant: 'primary',
+    },
+});
+/**
+ * CVA variants for the tag remove button.
+ *
+ * @tokens `--color-ring`, `--radius-interactive-sm`
+ */
+const dropdownTagRemoveVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-interactive-sm',
+    'opacity-70',
+    'transition-opacity',
+    'hover:opacity-100',
+    'focus:outline-none',
+    'focus:ring-1',
+    'focus:ring-ring',
+], {
+    variants: {
+        size: {
+            sm: ['h-3', 'w-3'],
+            default: ['h-3.5', 'w-3.5'],
+            lg: ['h-4', 'w-4'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the overflow badge (+N indicator).
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--radius-tag`
+ */
+const dropdownOverflowBadgeVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-tag',
+    'font-medium',
+    'text-muted-foreground',
+    'bg-muted',
+], {
+    variants: {
+        size: {
+            sm: ['h-5', 'px-1.5', 'text-xs'],
+            default: ['h-6', 'px-2', 'text-xs'],
+            lg: ['h-7', 'px-2.5', 'text-sm'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for group headers.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const dropdownGroupVariants = cva([
+    'flex',
+    'items-center',
+    'px-3',
+    'py-2',
+    'text-xs',
+    'font-semibold',
+    'uppercase',
+    'tracking-wider',
+    'text-muted-foreground',
+], {
+    variants: {
+        size: {
+            sm: ['px-2', 'py-1.5'],
+            default: ['px-3', 'py-2'],
+            lg: ['px-4', 'py-2.5'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the empty state.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const dropdownEmptyVariants = cva([
+    'flex',
+    'items-center',
+    'justify-center',
+    'px-3',
+    'py-6',
+    'text-muted-foreground',
+], {
+    variants: {
+        size: {
+            sm: ['px-2', 'py-4', 'text-xs'],
+            default: ['px-3', 'py-6', 'text-sm'],
+            lg: ['px-4', 'py-8', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the clear button.
+ *
+ * @tokens `--color-ring`, `--radius-interactive-sm`
+ */
+const dropdownClearVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-interactive-sm',
+    'opacity-50',
+    'transition-opacity',
+    'hover:opacity-100',
+    'focus:outline-none',
+    'focus:ring-1',
+    'focus:ring-ring',
+], {
+    variants: {
+        size: {
+            sm: ['h-4', 'w-4'],
+            default: ['h-5', 'w-5'],
+            lg: ['h-6', 'w-6'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the chevron icon.
+ */
+const dropdownChevronVariants = cva([
+    'shrink-0',
+    'opacity-50',
+    'transition-transform',
+    'duration-200',
+], {
+    variants: {
+        size: {
+            sm: ['h-3', 'w-3'],
+            default: ['h-4', 'w-4'],
+            lg: ['h-5', 'w-5'],
+        },
+        open: {
+            true: ['rotate-180'],
+            false: ['rotate-0'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        open: false,
+    },
+});
+
+/**
+ * A single option in the dropdown list.
+ * Implements CDK's Highlightable interface for keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-option
+ *   [value]="user"
+ *   [selected]="isSelected(user)"
+ *   [disabled]="user.inactive"
+ *   (select)="onSelect(user)"
+ * />
+ * ```
+ *
+ * @tokens `--color-popover-foreground`, `--color-muted`, `--color-primary-subtle`,
+ *         `--color-primary-subtle-foreground`, `--color-disabled-foreground`
+ */
+class ComDropdownOption {
+    elementRef = inject(ElementRef);
+    /** Reference to the option element for focus management. */
+    optionRef = viewChild('optionElement', ...(ngDevMode ? [{ debugName: "optionRef" }] : []));
+    /** The value this option represents. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Display text for this option (when no template is provided). */
+    displayText = input('', ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    /** Unique identifier for this option. */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** Index of this option in the list. */
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    /** Whether this option is currently selected. */
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /** Whether this option is currently active (keyboard focused). */
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /** Whether this option is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Custom template for rendering the option content. */
+    optionTemplate = input(null, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    /** Additional CSS classes to apply. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Emitted when the option is selected. */
+    select = output();
+    /** Emitted when the mouse enters the option. */
+    hover = output();
+    /** Computed option state for CVA styling. */
+    optionState = computed(() => {
+        if (this.disabled())
+            return 'disabled';
+        if (this.selected() && this.active())
+            return 'selected-active';
+        if (this.selected())
+            return 'selected';
+        if (this.active())
+            return 'active';
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "optionState" }] : []));
+    /** Computed CSS classes for the option. */
+    optionClasses = computed(() => {
+        const baseClasses = dropdownOptionVariants({
+            size: this.size(),
+            state: this.optionState(),
+        });
+        return mergeClasses(baseClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "optionClasses" }] : []));
+    /** Template context for custom option templates. */
+    templateContext = computed(() => ({
+        $implicit: this.value(),
+        index: this.index(),
+        selected: this.selected(),
+        active: this.active(),
+        disabled: this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    onOptionClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.select.emit(this.value());
+    }
+    onMouseEnter() {
+        if (!this.disabled()) {
+            this.hover.emit(this.value());
+        }
+    }
+    /** Gets the host element. */
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** Scrolls this option into view. */
+    scrollIntoView() {
+        this.optionRef()?.nativeElement.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    /** Focuses this option element. */
+    focus() {
+        this.optionRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownOption, isStandalone: true, selector: "com-dropdown-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, displayText: { classPropertyName: "displayText", publicName: "displayText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", hover: "hover" }, host: { classAttribute: "com-dropdown-option-host block" }, viewQueries: [{ propertyName: "optionRef", first: true, predicate: ["optionElement"], descendants: true, isSignal: true }], exportAs: ["comDropdownOption"], ngImport: i0, template: `
+    <div
+      #optionElement
+      [class]="optionClasses()"
+      [attr.role]="'option'"
+      [attr.id]="id()"
+      [attr.aria-selected]="selected()"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.data-active]="active() || null"
+      [attr.data-selected]="selected() || null"
+      [attr.data-disabled]="disabled() || null"
+      (click)="onOptionClick($event)"
+      (mouseenter)="onMouseEnter()"
+    >
+      @if (optionTemplate()) {
+        <ng-container
+          [ngTemplateOutlet]="optionTemplate()!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <span class="truncate">{{ displayText() }}</span>
+        @if (selected()) {
+          <svg
+            class="ml-auto h-4 w-4 shrink-0"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-option',
+                    exportAs: 'comDropdownOption',
+                    template: `
+    <div
+      #optionElement
+      [class]="optionClasses()"
+      [attr.role]="'option'"
+      [attr.id]="id()"
+      [attr.aria-selected]="selected()"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.data-active]="active() || null"
+      [attr.data-selected]="selected() || null"
+      [attr.data-disabled]="disabled() || null"
+      (click)="onOptionClick($event)"
+      (mouseenter)="onMouseEnter()"
+    >
+      @if (optionTemplate()) {
+        <ng-container
+          [ngTemplateOutlet]="optionTemplate()!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <span class="truncate">{{ displayText() }}</span>
+        @if (selected()) {
+          <svg
+            class="ml-auto h-4 w-4 shrink-0"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        }
+      }
+    </div>
+  `,
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-option-host block',
+                    },
+                }]
+        }], propDecorators: { optionRef: [{ type: i0.ViewChild, args: ['optionElement', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], displayText: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], hover: [{ type: i0.Output, args: ["hover"] }] } });
+
+/**
+ * The overlay panel containing the dropdown options.
+ * Supports virtual scrolling for large lists.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-panel
+ *   [options]="filteredOptions()"
+ *   [maxHeight]="'300px'"
+ *   [virtualScrollEnabled]="true"
+ * >
+ *   <ng-content />
+ * </com-dropdown-panel>
+ * ```
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
+ *         `--color-muted-foreground`, `--radius-overlay`
+ */
+class ComDropdownPanel {
+    elementRef = inject(ElementRef);
+    /** Reference to the panel element. */
+    panelRef = viewChild('panelElement', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
+    /** Reference to the virtual scroll viewport (when enabled). */
+    viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    /** Unique identifier for the panel. */
+    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** The processed options to display. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Maximum height of the panel. */
+    maxHeight = input('256px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    /** Whether multiple selection is enabled. */
+    multiselectable = input(false, ...(ngDevMode ? [{ debugName: "multiselectable" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Additional CSS classes to apply to the panel. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Whether virtual scrolling is enabled. */
+    virtualScrollEnabled = input(false, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : []));
+    /** Item size for virtual scrolling (in pixels). */
+    itemSize = input(40, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
+    /** The current search query (for empty state context). */
+    searchQuery = input('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    /** Custom empty state text. */
+    emptyText = input('No options available', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Template for rendering each option. */
+    optionTemplate = input.required(...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    /** Custom template for the empty state. */
+    emptyTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    /** Emitted when the panel is scrolled. */
+    scrolled = output();
+    /** Whether to show the empty state. */
+    showEmpty = computed(() => this.options().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+    /** Computed CSS classes for the panel. */
+    panelClasses = computed(() => {
+        const baseClasses = dropdownPanelVariants({ size: this.size() });
+        return mergeClasses(baseClasses, this.panelClass());
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed CSS classes for the empty state. */
+    emptyClasses = computed(() => {
+        return dropdownEmptyVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "emptyClasses" }] : []));
+    /** Template context for the empty state. */
+    emptyContext = computed(() => ({
+        $implicit: this.searchQuery(),
+    }), ...(ngDevMode ? [{ debugName: "emptyContext" }] : []));
+    /** Track function for options. */
+    trackByFn(_index, option) {
+        return option.id;
+    }
+    /** Gets the host element. */
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** Scrolls to a specific index. */
+    scrollToIndex(index) {
+        const vp = this.viewport();
+        if (this.virtualScrollEnabled() && vp) {
+            vp.scrollToIndex(index);
+        }
+        else {
+            const panelEl = this.panelRef()?.nativeElement;
+            const optionEl = panelEl?.querySelector(`[data-index="${index}"]`);
+            optionEl?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /** Scrolls an option into view. */
+    scrollOptionIntoView(optionElement) {
+        optionElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownPanel, isStandalone: true, selector: "com-dropdown-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollEnabled: { classPropertyName: "virtualScrollEnabled", publicName: "virtualScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: true, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, host: { classAttribute: "com-dropdown-panel-host block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelElement"], descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], exportAs: ["comDropdownPanel"], ngImport: i0, template: `
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      [attr.role]="'listbox'"
+      [attr.aria-multiselectable]="multiselectable() || null"
+      [attr.id]="panelId()"
+    >
+      <!-- Search slot -->
+      <ng-content select="[comDropdownSearch]" />
+
+      <!-- Options container -->
+      @if (virtualScrollEnabled()) {
+        <cdk-virtual-scroll-viewport
+          [itemSize]="itemSize()"
+          [maxBufferPx]="400"
+          [minBufferPx]="200"
+          [style.height]="maxHeight()"
+          class="overflow-auto"
+        >
+          <div
+            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
+            [attr.data-index]="i"
+          >
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          </div>
+        </cdk-virtual-scroll-viewport>
+      } @else {
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @for (option of options(); track option.id; let i = $index) {
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          }
+        </div>
+      }
+
+      <!-- Empty state -->
+      @if (showEmpty()) {
+        @if (emptyTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="emptyTemplate()!"
+            [ngTemplateOutletContext]="emptyContext()"
+          />
+        } @else {
+          <div [class]="emptyClasses()">
+            {{ emptyText() }}
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-panel',
+                    exportAs: 'comDropdownPanel',
+                    template: `
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      [attr.role]="'listbox'"
+      [attr.aria-multiselectable]="multiselectable() || null"
+      [attr.id]="panelId()"
+    >
+      <!-- Search slot -->
+      <ng-content select="[comDropdownSearch]" />
+
+      <!-- Options container -->
+      @if (virtualScrollEnabled()) {
+        <cdk-virtual-scroll-viewport
+          [itemSize]="itemSize()"
+          [maxBufferPx]="400"
+          [minBufferPx]="200"
+          [style.height]="maxHeight()"
+          class="overflow-auto"
+        >
+          <div
+            *cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
+            [attr.data-index]="i"
+          >
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          </div>
+        </cdk-virtual-scroll-viewport>
+      } @else {
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @for (option of options(); track option.id; let i = $index) {
+            <ng-container
+              [ngTemplateOutlet]="optionTemplate()"
+              [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+            />
+          }
+        </div>
+      }
+
+      <!-- Empty state -->
+      @if (showEmpty()) {
+        @if (emptyTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="emptyTemplate()!"
+            [ngTemplateOutletContext]="emptyContext()"
+          />
+        } @else {
+          <div [class]="emptyClasses()">
+            {{ emptyText() }}
+          </div>
+        }
+      }
+    </div>
+  `,
+                    imports: [
+                        NgTemplateOutlet,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-panel-host block',
+                    },
+                }]
+        }], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panelElement', { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], multiselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselectable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], virtualScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollEnabled", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: true }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }] } });
+
+/**
+ * Search input component for filtering dropdown options.
+ * Includes debouncing for better performance.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-search
+ *   [placeholder]="'Search...'"
+ *   [debounceTime]="300"
+ *   (searchChange)="onSearch($event)"
+ * />
+ * ```
+ *
+ * @tokens `--color-border-subtle`, `--color-input-placeholder`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--radius-interactive-sm`
+ */
+class ComDropdownSearch {
+    destroyRef = inject(DestroyRef);
+    /** Reference to the input element. */
+    inputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    /** Subject for debounced search. */
+    searchSubject = new Subject();
+    /** Current internal search value. */
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /** Placeholder text for the search input. */
+    placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Aria label for accessibility. */
+    ariaLabel = input('Search options', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Whether the search input is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Debounce time in milliseconds. */
+    debounceMs = input(300, ...(ngDevMode ? [{ debugName: "debounceMs" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Additional CSS classes to apply. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Emitted when the search value changes (after debounce). */
+    searchChange = output();
+    /** Emitted when a navigation key is pressed (for focus management). */
+    keyNav = output();
+    /** Whether to show the clear button. */
+    showClear = computed(() => this.internalValue().length > 0, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    /** Computed CSS classes for the search input. */
+    searchClasses = computed(() => {
+        const baseClasses = dropdownSearchVariants({ size: this.size() });
+        // Add left padding for the search icon
+        return mergeClasses(baseClasses, 'pl-9 pr-8', this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "searchClasses" }] : []));
+    ngOnInit() {
+        // Set up debounced search
+        this.searchSubject
+            .pipe(debounceTime(this.debounceMs()), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.searchChange.emit(value);
+        });
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.internalValue.set(value);
+        this.searchSubject.next(value);
+    }
+    onKeydown(event) {
+        // Let parent handle navigation keys
+        if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(event.key)) {
+            this.keyNav.emit(event);
+        }
+    }
+    clearSearch() {
+        this.internalValue.set('');
+        this.searchSubject.next('');
+        this.focus();
+    }
+    /** Focuses the search input. */
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Gets the current search value. */
+    getValue() {
+        return this.internalValue();
+    }
+    /** Sets the search value programmatically. */
+    setValue(value) {
+        this.internalValue.set(value);
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = value;
+        }
+        this.searchSubject.next(value);
+    }
+    /** Clears the search input. */
+    clear() {
+        this.clearSearch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownSearch, isStandalone: true, selector: "com-dropdown-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", keyNav: "keyNav" }, host: { properties: { "attr.comDropdownSearch": "true" }, classAttribute: "com-dropdown-search-host block" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["comDropdownSearch"], ngImport: i0, template: `
+    <div class="relative flex items-center">
+      <!-- Search icon -->
+      <svg
+        class="pointer-events-none absolute left-3 h-4 w-4 text-placeholder"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+
+      <!-- Input -->
+      <input
+        #searchInput
+        type="text"
+        [class]="searchClasses()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.autocomplete]="'off'"
+        [attr.autocapitalize]="'off'"
+        [attr.autocorrect]="'off'"
+        [attr.spellcheck]="'false'"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      />
+
+      <!-- Clear button -->
+      @if (showClear()) {
+        <button
+          type="button"
+          class="absolute right-3 flex h-4 w-4 items-center justify-center rounded-interactive-sm text-placeholder opacity-70 hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring"
+          [attr.aria-label]="'Clear search'"
+          (click)="clearSearch()"
+        >
+          <svg
+            class="h-3 w-3"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownSearch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-search',
+                    exportAs: 'comDropdownSearch',
+                    template: `
+    <div class="relative flex items-center">
+      <!-- Search icon -->
+      <svg
+        class="pointer-events-none absolute left-3 h-4 w-4 text-placeholder"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+
+      <!-- Input -->
+      <input
+        #searchInput
+        type="text"
+        [class]="searchClasses()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.autocomplete]="'off'"
+        [attr.autocapitalize]="'off'"
+        [attr.autocorrect]="'off'"
+        [attr.spellcheck]="'false'"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      />
+
+      <!-- Clear button -->
+      @if (showClear()) {
+        <button
+          type="button"
+          class="absolute right-3 flex h-4 w-4 items-center justify-center rounded-interactive-sm text-placeholder opacity-70 hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring"
+          [attr.aria-label]="'Clear search'"
+          (click)="clearSearch()"
+        >
+          <svg
+            class="h-3 w-3"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-search-host block',
+                        '[attr.comDropdownSearch]': 'true',
+                    },
+                }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], keyNav: [{ type: i0.Output, args: ["keyNav"] }] } });
+
+/**
+ * Tag component for displaying selected items in multi-select mode.
+ * Includes a remove button for deselection.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-tag
+ *   [value]="user"
+ *   [displayText]="user.name"
+ *   (remove)="onRemove(user)"
+ * />
+ * ```
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-ring`, `--radius-tag`, `--radius-interactive-sm`
+ */
+class ComDropdownTag {
+    /** The value this tag represents. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Display text for this tag. */
+    displayText = input('', ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    /** Index of this tag in the list. */
+    index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    /** Whether the tag (and its remove button) is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Tag variant for styling. */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Additional CSS classes for the tag. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Custom template for rendering the tag. */
+    tagTemplate = input(null, ...(ngDevMode ? [{ debugName: "tagTemplate" }] : []));
+    /** Emitted when the remove button is clicked. */
+    remove = output();
+    /** Computed CSS classes for the tag. */
+    tagClasses = computed(() => {
+        const baseClasses = dropdownTagVariants({
+            size: this.size(),
+            variant: this.variant(),
+        });
+        return mergeClasses(baseClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "tagClasses" }] : []));
+    /** Computed CSS classes for the remove button. */
+    removeClasses = computed(() => {
+        return dropdownTagRemoveVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "removeClasses" }] : []));
+    /** Template context for custom tag templates. */
+    templateContext = computed(() => ({
+        $implicit: this.value(),
+        index: this.index(),
+        remove: () => this.emitRemove(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    onRemove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.emitRemove();
+        }
+    }
+    emitRemove() {
+        this.remove.emit(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownTag, isStandalone: true, selector: "com-dropdown-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, displayText: { classPropertyName: "displayText", publicName: "displayText", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, tagTemplate: { classPropertyName: "tagTemplate", publicName: "tagTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { classAttribute: "com-dropdown-tag-host inline-flex" }, exportAs: ["comDropdownTag"], ngImport: i0, template: `
+    @if (tagTemplate()) {
+      <ng-container
+        [ngTemplateOutlet]="tagTemplate()!"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else {
+      <span [class]="tagClasses()">
+        <span class="truncate">{{ displayText() }}</span>
+        @if (!disabled()) {
+          <button
+            type="button"
+            [class]="removeClasses()"
+            [attr.aria-label]="'Remove ' + displayText()"
+            (click)="onRemove($event)"
+            (keydown.enter)="onRemove($event)"
+            (keydown.space)="onRemove($event)"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-full w-full"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        }
+      </span>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-tag',
+                    exportAs: 'comDropdownTag',
+                    template: `
+    @if (tagTemplate()) {
+      <ng-container
+        [ngTemplateOutlet]="tagTemplate()!"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else {
+      <span [class]="tagClasses()">
+        <span class="truncate">{{ displayText() }}</span>
+        @if (!disabled()) {
+          <button
+            type="button"
+            [class]="removeClasses()"
+            [attr.aria-label]="'Remove ' + displayText()"
+            (click)="onRemove($event)"
+            (keydown.enter)="onRemove($event)"
+            (keydown.space)="onRemove($event)"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-full w-full"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        }
+      </span>
+    }
+  `,
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-tag-host inline-flex',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], displayText: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayText", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], tagTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagTemplate", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+/**
+ * Group header component for categorized dropdown options.
+ *
+ * @example
+ * ```html
+ * <com-dropdown-group
+ *   [label]="'Fruits'"
+ *   [count]="5"
+ * />
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+class ComDropdownGroup {
+    /** The group label/key. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** The number of options in this group. */
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    /** Whether the group is expanded (for collapsible groups). */
+    expanded = input(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    /** Whether to show the count badge. */
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    /** Size variant for styling. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Additional CSS classes for the group header. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Custom template for rendering the group header. */
+    groupTemplate = input(null, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
+    /** Computed CSS classes for the group header. */
+    groupClasses = computed(() => {
+        const baseClasses = dropdownGroupVariants({ size: this.size() });
+        return mergeClasses(baseClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "groupClasses" }] : []));
+    /** Template context for custom group templates. */
+    templateContext = computed(() => ({
+        $implicit: this.label(),
+        expanded: this.expanded(),
+        count: this.count(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdownGroup, isStandalone: true, selector: "com-dropdown-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "com-dropdown-group-host block" }, exportAs: ["comDropdownGroup"], ngImport: i0, template: `
+    @if (groupTemplate()) {
+      <ng-container
+        [ngTemplateOutlet]="groupTemplate()!"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else {
+      <div [class]="groupClasses()">
+        <span>{{ label() }}</span>
+        @if (showCount()) {
+          <span class="ml-auto text-xs text-muted-foreground">
+            ({{ count() }})
+          </span>
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-dropdown-group',
+                    exportAs: 'comDropdownGroup',
+                    template: `
+    @if (groupTemplate()) {
+      <ng-container
+        [ngTemplateOutlet]="groupTemplate()!"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else {
+      <div [class]="groupClasses()">
+        <span>{{ label() }}</span>
+        @if (showCount()) {
+          <span class="ml-auto text-xs text-muted-foreground">
+            ({{ count() }})
+          </span>
+        }
+      </div>
+    }
+  `,
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'com-dropdown-group-host block',
+                        role: 'presentation',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: false }] }] } });
+
+/**
+ * Directive to mark a template as the custom option template.
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()">
+ *   <ng-template comDropdownOption let-user let-selected="selected">
+ *     <div class="flex items-center gap-2">
+ *       <span>{{ user.name }}</span>
+ *       @if (selected) {
+ *         <svg class="h-4 w-4"><!-- check --></svg>
+ *       }
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownOptionTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownOptionTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownOptionTpl, isStandalone: true, selector: "ng-template[comDropdownOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownOptionTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownOption]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom selected value template.
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()">
+ *   <ng-template comDropdownSelected let-user>
+ *     @if (user) {
+ *       <div class="flex items-center gap-2">
+ *         <img [src]="user.avatar" class="h-5 w-5 rounded-full" />
+ *         {{ user.name }}
+ *       </div>
+ *     } @else {
+ *       <span class="text-input-placeholder">Select user...</span>
+ *     }
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownSelectedTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownSelectedTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownSelectedTpl, isStandalone: true, selector: "ng-template[comDropdownSelected]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownSelectedTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownSelected]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom empty state template.
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()" [searchable]="true">
+ *   <ng-template comDropdownEmpty let-query>
+ *     <div class="flex flex-col items-center gap-2 py-6">
+ *       <svg class="h-8 w-8 text-muted-foreground"><!-- search icon --></svg>
+ *       <span>No results for "{{ query }}"</span>
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownEmptyTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownEmptyTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownEmptyTpl, isStandalone: true, selector: "ng-template[comDropdownEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownEmptyTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownEmpty]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom group header template.
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()" [groupBy]="groupByDepartment">
+ *   <ng-template comDropdownGroup let-group let-count="count">
+ *     <div class="flex items-center justify-between">
+ *       <span class="font-semibold">{{ group }}</span>
+ *       <span class="text-xs text-muted-foreground">({{ count }})</span>
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownGroupTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownGroupTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownGroupTpl, isStandalone: true, selector: "ng-template[comDropdownGroup]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownGroupTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownGroup]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom tag template (multi-select mode).
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()" [multiple]="true">
+ *   <ng-template comDropdownTag let-user let-remove="remove">
+ *     <div class="flex items-center gap-1 rounded bg-primary-subtle px-2 py-0.5 text-primary-subtle-foreground">
+ *       <img [src]="user.avatar" class="h-4 w-4 rounded-full" />
+ *       <span>{{ user.name }}</span>
+ *       <button type="button" (click)="remove()" class="ml-1">
+ *         <svg class="h-3 w-3"><!-- x icon --></svg>
+ *       </button>
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdownTagTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownTagTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDropdownTagTpl, isStandalone: true, selector: "ng-template[comDropdownTag]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdownTagTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comDropdownTag]',
+                }]
+        }] });
+
+/**
+ * Default compare function for primitive values.
+ * @param a First value.
+ * @param b Second value.
+ * @returns Whether the values are equal.
+ */
+function defaultCompareWith(a, b) {
+    return a === b;
+}
+/**
+ * Default display function for converting values to strings.
+ * @param value The value to display.
+ * @returns The string representation.
+ */
+function defaultDisplayWith(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return String(value);
+}
+/**
+ * Default filter function for search.
+ * @param option The option to test.
+ * @param query The search query.
+ * @param displayWith The display function to get the searchable text.
+ * @returns Whether the option matches the query.
+ */
+function defaultFilterWith(option, query, displayWith) {
+    const text = displayWith(option).toLowerCase();
+    return text.includes(query.toLowerCase());
+}
+/**
+ * Unique ID counter for generating option IDs.
+ */
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID for dropdown options.
+ * @param prefix Optional prefix for the ID.
+ * @returns A unique ID string.
+ */
+function generateDropdownId(prefix = 'com-dropdown') {
+    return `${prefix}-${uniqueIdCounter++}`;
+}
+
+/** Default position for the dropdown panel. */
+const DEFAULT_POSITIONS = [
+    // Below trigger, aligned start
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned start
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    // Below trigger, aligned end
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    // Above trigger, aligned end
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+];
+/** Threshold for enabling virtual scrolling. */
+const VIRTUAL_SCROLL_THRESHOLD = 50;
+/**
+ * Reusable dropdown/select component with full accessibility support.
+ * Implements ControlValueAccessor for Reactive Forms integration.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-input-placeholder`, `--color-ring`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`,
+ *         `--color-primary`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-warn`, `--color-success`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-placeholder`
+ *
+ * @example
+ * ```html
+ * <com-dropdown
+ *   [options]="users()"
+ *   [compareWith]="compareById"
+ *   formControlName="assignee"
+ *   placeholder="Select user..."
+ *   [searchable]="true"
+ * >
+ *   <ng-template comDropdownOption let-user let-selected="selected">
+ *     <span>{{ user.name }}</span>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+class ComDropdown {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    liveAnnouncer = inject(LiveAnnouncer);
+    document = inject(DOCUMENT);
+    /** Optional NgControl for form integration. */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    /** Reference to the trigger button element. */
+    triggerRef = viewChild.required('triggerElement');
+    /** Reference to the panel template. */
+    panelTemplateRef = viewChild.required('panelTemplate');
+    /** Content query for custom option template. */
+    optionTemplate = contentChild((ComDropdownOptionTpl), ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    /** Content query for custom selected template. */
+    selectedTemplate = contentChild((ComDropdownSelectedTpl), ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : []));
+    /** Content query for custom empty template. */
+    emptyTemplate = contentChild(ComDropdownEmptyTpl, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    /** Content query for custom group template. */
+    groupTemplate = contentChild(ComDropdownGroupTpl, ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
+    /** Content query for custom tag template. */
+    tagTemplate = contentChild((ComDropdownTagTpl), ...(ngDevMode ? [{ debugName: "tagTemplate" }] : []));
+    /** Overlay reference. */
+    overlayRef = null;
+    /** Unique ID for the dropdown. */
+    dropdownId = generateDropdownId();
+    // ============ INPUTS ============
+    /** Array of options to display. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Current value (single or array for multiple). */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Placeholder text when no value is selected. */
+    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Enable multi-select mode. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** Enable search/filter input. */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    /** Search input placeholder. */
+    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    /** Disable the dropdown. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Mark as required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Show clear button. */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /** Custom equality function for comparing values. */
+    compareWith = input(defaultCompareWith, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    /** Function to get display text from a value. */
+    displayWith = input(defaultDisplayWith, ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /** Custom filter function for search. */
+    filterWith = input(null, ...(ngDevMode ? [{ debugName: "filterWith" }] : []));
+    /** Function to group options by a key. */
+    groupBy = input(null, ...(ngDevMode ? [{ debugName: "groupBy" }] : []));
+    /** CVA variant for trigger styling. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Validation state. */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Additional CSS classes for the trigger. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Additional CSS classes for the panel. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Maximum height of the panel. */
+    maxHeight = input('256px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    /** Panel width strategy. */
+    panelWidth = input('trigger', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** Debounce time for search (ms). */
+    searchDebounceMs = input(300, ...(ngDevMode ? [{ debugName: "searchDebounceMs" }] : []));
+    /** Virtual scroll threshold. */
+    virtualScrollThreshold = input(VIRTUAL_SCROLL_THRESHOLD, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : []));
+    /** Maximum number of tags to display in multi-select mode. Set to null for no limit. */
+    maxVisibleTags = input(2, ...(ngDevMode ? [{ debugName: "maxVisibleTags" }] : []));
+    // ============ OUTPUTS ============
+    /** Emitted when the value changes. */
+    valueChange = output();
+    /** Emitted when search query changes. */
+    searchChange = output();
+    /** Emitted when panel opens. */
+    opened = output();
+    /** Emitted when panel closes. */
+    closed = output();
+    // ============ INTERNAL STATE ============
+    /** Whether the panel is open. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Current search query. */
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    /** Currently active (keyboard focused) option ID. */
+    activeOptionId = signal(null, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
+    /** Internal value state (managed by CVA or input). */
+    internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /** Live announcements for screen readers. */
+    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    // ============ COMPUTED STATE ============
+    /** Trigger element ID. */
+    triggerId = computed(() => `${this.dropdownId}-trigger`, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
+    /** Panel element ID. */
+    panelId = computed(() => `${this.dropdownId}-panel`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** Currently active descendant ID (for ARIA). */
+    activeDescendant = computed(() => {
+        return this.isOpen() ? this.activeOptionId() : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
+    /** Whether the dropdown has a value. */
+    hasValue = computed(() => {
+        const val = this.internalValue();
+        if (this.multiple()) {
+            return Array.isArray(val) && val.length > 0;
+        }
+        return val !== null && val !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Selected value (single mode). */
+    selectedValue = computed(() => {
+        const val = this.internalValue();
+        if (this.multiple() || Array.isArray(val)) {
+            return null;
+        }
+        return val;
+    }, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    /** Selected values (multiple mode). */
+    selectedValues = computed(() => {
+        const val = this.internalValue();
+        if (!this.multiple()) {
+            return [];
+        }
+        return Array.isArray(val) ? val : val !== null ? [val] : [];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    /** Tags visible in the trigger (limited by maxVisibleTags). */
+    visibleTags = computed(() => {
+        const all = this.selectedValues();
+        const max = this.maxVisibleTags();
+        if (max === null || all.length <= max) {
+            return all;
+        }
+        return all.slice(0, max);
+    }, ...(ngDevMode ? [{ debugName: "visibleTags" }] : []));
+    /** Count of hidden tags (for +N badge). */
+    hiddenTagsCount = computed(() => {
+        const all = this.selectedValues();
+        const max = this.maxVisibleTags();
+        if (max === null || all.length <= max) {
+            return 0;
+        }
+        return all.length - max;
+    }, ...(ngDevMode ? [{ debugName: "hiddenTagsCount" }] : []));
+    /** Processed options with display text and IDs. */
+    processedOptions = computed(() => {
+        const opts = this.options();
+        const display = this.displayWith();
+        return opts.map((opt, index) => ({
+            value: opt,
+            displayText: display(opt),
+            disabled: false, // Could be extended with disabledWith input
+            id: `${this.dropdownId}-option-${index}`,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "processedOptions" }] : []));
+    /** Filtered options based on search query. */
+    filteredOptions = computed(() => {
+        const opts = this.processedOptions();
+        const query = this.searchQuery().trim();
+        if (!query) {
+            return opts;
+        }
+        const filterFn = this.filterWith();
+        const display = this.displayWith();
+        return opts.filter((opt) => {
+            if (filterFn) {
+                return filterFn(opt.value, query);
+            }
+            return defaultFilterWith(opt.value, query, display);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    /** Grouped options (when groupBy is provided). */
+    groupedOptions = computed(() => {
+        const groupFn = this.groupBy();
+        if (!groupFn) {
+            return [];
+        }
+        const opts = this.filteredOptions();
+        const groups = new Map();
+        for (const opt of opts) {
+            const key = groupFn(opt.value);
+            const existing = groups.get(key) || [];
+            existing.push(opt);
+            groups.set(key, existing);
+        }
+        return Array.from(groups.entries()).map(([key, options]) => ({
+            key,
+            options,
+            expanded: true,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groupedOptions" }] : []));
+    /** Whether virtual scrolling should be enabled. */
+    virtualScrollEnabled = computed(() => {
+        return this.filteredOptions().length > this.virtualScrollThreshold();
+    }, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : []));
+    /** Context for selected template. */
+    selectedContext = computed(() => ({
+        $implicit: this.internalValue(),
+        placeholder: this.placeholder(),
+        multiple: this.multiple(),
+    }), ...(ngDevMode ? [{ debugName: "selectedContext" }] : []));
+    /** Context for empty template. */
+    emptyContext = computed(() => ({
+        $implicit: this.searchQuery(),
+    }), ...(ngDevMode ? [{ debugName: "emptyContext" }] : []));
+    /** Computed trigger classes. */
+    triggerClasses = computed(() => {
+        const baseClasses = dropdownTriggerVariants({
+            variant: this.variant(),
+            size: this.size(),
+            state: this.state(),
+            open: this.isOpen(),
+        });
+        return mergeClasses(baseClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    /** Computed panel classes. */
+    panelClasses = computed(() => {
+        return mergeClasses('w-full z-50 overflow-hidden rounded-overlay border border-border-subtle bg-popover text-popover-foreground shadow-lg outline-none', this.panelClass());
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed chevron classes. */
+    chevronClasses = computed(() => {
+        return dropdownChevronVariants({
+            size: this.size(),
+            open: this.isOpen(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "chevronClasses" }] : []));
+    /** Computed clear button classes. */
+    clearClasses = computed(() => {
+        return dropdownClearVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "clearClasses" }] : []));
+    /** Computed overflow badge classes. */
+    overflowBadgeClasses = computed(() => {
+        return dropdownOverflowBadgeVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "overflowBadgeClasses" }] : []));
+    // ============ CVA CALLBACKS ============
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Wire up NgControl if present
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        // Nothing special needed here since we use effects
+    }
+    // ============ CVA IMPLEMENTATION ============
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Disabled state is handled via the disabled input
+        // When using forms, the form control's disabled state takes precedence
+    }
+    // ============ PUBLIC METHODS ============
+    /** Opens the dropdown panel. */
+    open() {
+        if (this.disabled() || this.isOpen()) {
+            return;
+        }
+        this.createOverlay();
+        this.isOpen.set(true);
+        this.opened.emit();
+        // Set initial active option
+        const currentValue = this.internalValue();
+        if (currentValue !== null && !this.multiple()) {
+            const option = this.filteredOptions().find((opt) => this.compareWith()(opt.value, currentValue));
+            if (option) {
+                this.activeOptionId.set(option.id);
+            }
+        }
+        else {
+            const firstOption = this.filteredOptions()[0];
+            if (firstOption) {
+                this.activeOptionId.set(firstOption.id);
+            }
+        }
+        // Announce opening
+        this.announce(`${this.placeholder()} dropdown opened, ${this.filteredOptions().length} options available`);
+    }
+    /** Closes the dropdown panel. */
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.searchQuery.set('');
+        this.activeOptionId.set(null);
+        this.closed.emit();
+        this.onTouched();
+    }
+    /** Toggles the dropdown panel. */
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Clears the selection. */
+    clear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const newValue = this.multiple() ? [] : null;
+        this.updateValue(newValue);
+        this.announce('Selection cleared');
+    }
+    /** Checks if a value is selected. */
+    isSelected(value) {
+        const current = this.internalValue();
+        const compare = this.compareWith();
+        if (this.multiple()) {
+            const arr = Array.isArray(current) ? current : [];
+            return arr.some((v) => compare(v, value));
+        }
+        return current !== null && compare(current, value);
+    }
+    /** Checks if an option ID is the active one. */
+    isActive(optionId) {
+        return this.activeOptionId() === optionId;
+    }
+    // ============ EVENT HANDLERS ============
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                else {
+                    this.navigateOptions(event.key === 'ArrowDown' ? 1 : -1);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen() && this.activeOptionId()) {
+                    this.selectActiveOption();
+                }
+                else {
+                    this.toggle();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                    this.triggerRef().nativeElement.focus();
+                }
+                break;
+            case 'Home':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.navigateToFirst();
+                }
+                break;
+            case 'End':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.navigateToLast();
+                }
+                break;
+            case 'Tab':
+                // Close panel when tabbing away from trigger
+                if (this.isOpen()) {
+                    this.close();
+                }
+                // Don't prevent default - let Tab naturally move focus
+                break;
+            default:
+                // Type-ahead search
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this.typeAhead(event.key);
+                }
+                break;
+        }
+    }
+    onPanelKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.navigateOptions(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.navigateOptions(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActiveOption();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this.triggerRef().nativeElement.focus();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.navigateToFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.navigateToLast();
+                break;
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+        this.searchChange.emit(query);
+        // Reset active option to first result
+        const filtered = this.filteredOptions();
+        const firstFiltered = filtered[0];
+        if (firstFiltered) {
+            this.activeOptionId.set(firstFiltered.id);
+        }
+        else {
+            this.activeOptionId.set(null);
+        }
+    }
+    onSearchKeyNav(event) {
+        // Delegate to panel keydown handler
+        this.onPanelKeydown(event);
+    }
+    onOptionHover(optionId) {
+        this.activeOptionId.set(optionId);
+    }
+    selectOption(value) {
+        if (this.multiple()) {
+            this.toggleMultipleValue(value);
+        }
+        else {
+            this.updateValue(value);
+            this.close();
+            this.triggerRef().nativeElement.focus();
+        }
+    }
+    removeValue(value) {
+        const current = this.selectedValues();
+        const compare = this.compareWith();
+        const newValues = current.filter((v) => !compare(v, value));
+        this.updateValue(newValues.length > 0 ? newValues : []);
+        this.announce(`${this.displayWith()(value)} removed`);
+    }
+    trackByValue(item, _index) {
+        return item;
+    }
+    getGlobalIndex(groupKey, localIndex) {
+        const groups = this.groupedOptions();
+        let globalIndex = 0;
+        for (const group of groups) {
+            if (group.key === groupKey) {
+                return globalIndex + localIndex;
+            }
+            globalIndex += group.options.length;
+        }
+        return localIndex;
+    }
+    // ============ PRIVATE METHODS ============
+    createOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const hostEl = this.elementRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(hostEl)
+            .withPositions(DEFAULT_POSITIONS)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const hostWidth = hostEl.getBoundingClientRect().width;
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            ...this.getPanelWidthConfig(hostWidth),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        // Attach panel template
+        const portal = new TemplatePortal(this.panelTemplateRef(), this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on backdrop click
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        // Close on outside click
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    /**
+     * Returns overlay width configuration based on panelWidth setting.
+     * - 'trigger': min-width equals host, can grow wider
+     * - 'auto': no width constraint
+     * - specific value: exact width
+     */
+    getPanelWidthConfig(hostWidth) {
+        const config = this.panelWidth();
+        if (config === 'trigger') {
+            return { minWidth: hostWidth };
+        }
+        if (config === 'auto') {
+            return {};
+        }
+        return { width: config };
+    }
+    updateValue(value) {
+        this.internalValue.set(value);
+        this.onChange(value);
+        this.valueChange.emit(value);
+        // Announce selection
+        if (value !== null && !Array.isArray(value)) {
+            this.announce(`${this.displayWith()(value)} selected`);
+        }
+    }
+    toggleMultipleValue(value) {
+        const current = this.selectedValues();
+        const compare = this.compareWith();
+        const isAlreadySelected = current.some((v) => compare(v, value));
+        let newValues;
+        if (isAlreadySelected) {
+            newValues = current.filter((v) => !compare(v, value));
+            this.announce(`${this.displayWith()(value)} deselected`);
+        }
+        else {
+            newValues = [...current, value];
+            this.announce(`${this.displayWith()(value)} selected`);
+        }
+        this.updateValue(newValues.length > 0 ? newValues : []);
+    }
+    navigateOptions(direction) {
+        const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
+        if (options.length === 0) {
+            return;
+        }
+        const currentId = this.activeOptionId();
+        let currentIndex = options.findIndex((opt) => opt.id === currentId);
+        if (currentIndex === -1) {
+            currentIndex = direction === 1 ? -1 : options.length;
+        }
+        let nextIndex = currentIndex + direction;
+        // Wrap around
+        if (nextIndex < 0) {
+            nextIndex = options.length - 1;
+        }
+        else if (nextIndex >= options.length) {
+            nextIndex = 0;
+        }
+        // Skip disabled options
+        const startIndex = nextIndex;
+        let currentOption = options[nextIndex];
+        while (currentOption?.disabled) {
+            nextIndex += direction;
+            if (nextIndex < 0)
+                nextIndex = options.length - 1;
+            else if (nextIndex >= options.length)
+                nextIndex = 0;
+            if (nextIndex === startIndex)
+                return; // All disabled
+            currentOption = options[nextIndex];
+        }
+        const targetOption = options[nextIndex];
+        if (targetOption) {
+            this.activeOptionId.set(targetOption.id);
+        }
+    }
+    navigateToFirst() {
+        const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
+        const firstEnabled = options.find((opt) => !opt.disabled);
+        if (firstEnabled) {
+            this.activeOptionId.set(firstEnabled.id);
+        }
+    }
+    navigateToLast() {
+        const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
+        const lastEnabled = [...options].reverse().find((opt) => !opt.disabled);
+        if (lastEnabled) {
+            this.activeOptionId.set(lastEnabled.id);
+        }
+    }
+    selectActiveOption() {
+        const activeId = this.activeOptionId();
+        if (!activeId)
+            return;
+        const options = this.groupBy() ? this.flattenGroupedOptions() : this.filteredOptions();
+        const option = options.find((opt) => opt.id === activeId);
+        if (option && !option.disabled) {
+            this.selectOption(option.value);
+        }
+    }
+    flattenGroupedOptions() {
+        return this.groupedOptions().flatMap((group) => group.options);
+    }
+    typeAhead(char) {
+        // Simple type-ahead: find first option starting with the character
+        const options = this.filteredOptions();
+        const display = this.displayWith();
+        const lowerChar = char.toLowerCase();
+        const match = options.find((opt) => !opt.disabled && display(opt.value).toLowerCase().startsWith(lowerChar));
+        if (match) {
+            this.activeOptionId.set(match.id);
+            if (!this.isOpen()) {
+                this.selectOption(match.value);
+            }
+        }
+    }
+    announce(message) {
+        this.liveAnnouncement.set(message);
+        this.liveAnnouncer.announce(message, 'polite');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDropdown, isStandalone: true, selector: "com-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceMs: { classPropertyName: "searchDebounceMs", publicName: "searchDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleTags: { classPropertyName: "maxVisibleTags", publicName: "maxVisibleTags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", searchChange: "searchChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-dropdown-disabled": "disabled()", "class.com-dropdown-open": "isOpen()" }, classAttribute: "com-dropdown-host inline-block" }, queries: [{ propertyName: "optionTemplate", first: true, predicate: (ComDropdownOptionTpl), descendants: true, isSignal: true }, { propertyName: "selectedTemplate", first: true, predicate: (ComDropdownSelectedTpl), descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ComDropdownEmptyTpl, descendants: true, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ComDropdownGroupTpl, descendants: true, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: (ComDropdownTagTpl), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDropdown"], ngImport: i0, template: `
+    <!-- Trigger button -->
+    <button
+      #triggerElement
+      type="button"
+      role="combobox"
+      [class]="triggerClasses()"
+      [attr.id]="triggerId()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="panelId()"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-required]="required() || null"
+      [attr.aria-invalid]="state() === 'error' || null"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [disabled]="disabled()"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Selected value display -->
+      <span class="flex-1 truncate text-left">
+        @if (selectedTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="selectedTemplate()!.templateRef"
+            [ngTemplateOutletContext]="selectedContext()"
+          />
+        } @else if (multiple()) {
+          @if (selectedValues().length > 0) {
+            <span class="flex flex-wrap gap-1">
+              @for (item of visibleTags(); track trackByValue(item, $index); let i = $index) {
+                <com-dropdown-tag
+                  [value]="item"
+                  [displayText]="displayWith()(item)"
+                  [index]="i"
+                  [size]="size()"
+                  [disabled]="disabled()"
+                  [tagTemplate]="tagTemplate()?.templateRef ?? null"
+                  (remove)="removeValue($event)"
+                />
+              }
+              @if (hiddenTagsCount() > 0) {
+                <span [class]="overflowBadgeClasses()">
+                  +{{ hiddenTagsCount() }}
+                </span>
+              }
+            </span>
+          } @else {
+            <span class="text-placeholder">{{ placeholder() }}</span>
+          }
+        } @else {
+          @if (selectedValue() !== null && selectedValue() !== undefined) {
+            {{ displayWith()(selectedValue()!) }}
+          } @else {
+            <span class="text-placeholder">{{ placeholder() }}</span>
+          }
+        }
+      </span>
+
+      <!-- Clear button -->
+      @if (clearable() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear selection'"
+          (click)="clear($event)"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-full w-full"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      }
+
+      <!-- Chevron icon -->
+      <svg
+        [class]="chevronClasses()"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        #panelElement
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        [attr.role]="'listbox'"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-label]="placeholder()"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <!-- Search input -->
+        @if (searchable()) {
+          <com-dropdown-search
+            [placeholder]="searchPlaceholder()"
+            [size]="size()"
+            [debounceMs]="searchDebounceMs()"
+            (searchChange)="onSearchChange($event)"
+            (keyNav)="onSearchKeyNav($event)"
+          />
+        }
+
+        <!-- Options list -->
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @if (groupedOptions().length > 0) {
+            @for (group of groupedOptions(); track group.key) {
+              <!-- Group header -->
+              <com-dropdown-group
+                [label]="group.key"
+                [count]="group.options.length"
+                [expanded]="group.expanded"
+                [size]="size()"
+                [groupTemplate]="groupTemplate()?.templateRef ?? null"
+              />
+
+              <!-- Group options -->
+              @for (option of group.options; track option.id; let i = $index) {
+                <com-dropdown-option
+                  [value]="option.value"
+                  [displayText]="option.displayText"
+                  [id]="option.id"
+                  [index]="getGlobalIndex(group.key, i)"
+                  [selected]="isSelected(option.value)"
+                  [active]="isActive(option.id)"
+                  [disabled]="option.disabled"
+                  [size]="size()"
+                  [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                  (select)="selectOption($event)"
+                  (hover)="onOptionHover(option.id)"
+                />
+              }
+            }
+          } @else if (filteredOptions().length > 0) {
+            @for (option of filteredOptions(); track option.id; let i = $index) {
+              <com-dropdown-option
+                [value]="option.value"
+                [displayText]="option.displayText"
+                [id]="option.id"
+                [index]="i"
+                [selected]="isSelected(option.value)"
+                [active]="isActive(option.id)"
+                [disabled]="option.disabled"
+                [size]="size()"
+                [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                (select)="selectOption($event)"
+                (hover)="onOptionHover(option.id)"
+              />
+            }
+          } @else {
+            <!-- Empty state -->
+            @if (emptyTemplate()) {
+              <ng-container
+                [ngTemplateOutlet]="emptyTemplate()!.templateRef"
+                [ngTemplateOutletContext]="emptyContext()"
+              />
+            } @else {
+              <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
+                @if (searchQuery()) {
+                  No results for "{{ searchQuery() }}"
+                } @else {
+                  No options available
+                }
+              </div>
+            }
+          }
+        </div>
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ComDropdownOption, selector: "com-dropdown-option", inputs: ["value", "displayText", "id", "index", "selected", "active", "disabled", "size", "optionTemplate", "class"], outputs: ["select", "hover"], exportAs: ["comDropdownOption"] }, { kind: "component", type: ComDropdownSearch, selector: "com-dropdown-search", inputs: ["placeholder", "ariaLabel", "disabled", "debounceMs", "size", "class"], outputs: ["searchChange", "keyNav"], exportAs: ["comDropdownSearch"] }, { kind: "component", type: ComDropdownTag, selector: "com-dropdown-tag", inputs: ["value", "displayText", "index", "disabled", "size", "variant", "class", "tagTemplate"], outputs: ["remove"], exportAs: ["comDropdownTag"] }, { kind: "component", type: ComDropdownGroup, selector: "com-dropdown-group", inputs: ["label", "count", "expanded", "showCount", "size", "class", "groupTemplate"], exportAs: ["comDropdownGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-dropdown', exportAs: 'comDropdown', template: `
+    <!-- Trigger button -->
+    <button
+      #triggerElement
+      type="button"
+      role="combobox"
+      [class]="triggerClasses()"
+      [attr.id]="triggerId()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="panelId()"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-activedescendant]="activeDescendant()"
+      [attr.aria-required]="required() || null"
+      [attr.aria-invalid]="state() === 'error' || null"
+      [attr.aria-disabled]="disabled() || null"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [disabled]="disabled()"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <!-- Selected value display -->
+      <span class="flex-1 truncate text-left">
+        @if (selectedTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="selectedTemplate()!.templateRef"
+            [ngTemplateOutletContext]="selectedContext()"
+          />
+        } @else if (multiple()) {
+          @if (selectedValues().length > 0) {
+            <span class="flex flex-wrap gap-1">
+              @for (item of visibleTags(); track trackByValue(item, $index); let i = $index) {
+                <com-dropdown-tag
+                  [value]="item"
+                  [displayText]="displayWith()(item)"
+                  [index]="i"
+                  [size]="size()"
+                  [disabled]="disabled()"
+                  [tagTemplate]="tagTemplate()?.templateRef ?? null"
+                  (remove)="removeValue($event)"
+                />
+              }
+              @if (hiddenTagsCount() > 0) {
+                <span [class]="overflowBadgeClasses()">
+                  +{{ hiddenTagsCount() }}
+                </span>
+              }
+            </span>
+          } @else {
+            <span class="text-placeholder">{{ placeholder() }}</span>
+          }
+        } @else {
+          @if (selectedValue() !== null && selectedValue() !== undefined) {
+            {{ displayWith()(selectedValue()!) }}
+          } @else {
+            <span class="text-placeholder">{{ placeholder() }}</span>
+          }
+        }
+      </span>
+
+      <!-- Clear button -->
+      @if (clearable() && hasValue() && !disabled()) {
+        <button
+          type="button"
+          [class]="clearClasses()"
+          [attr.aria-label]="'Clear selection'"
+          (click)="clear($event)"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-full w-full"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      }
+
+      <!-- Chevron icon -->
+      <svg
+        [class]="chevronClasses()"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <!-- Panel template (rendered in overlay) -->
+    <ng-template #panelTemplate>
+      <div
+        #panelElement
+        [class]="panelClasses()"
+        [attr.id]="panelId()"
+        [attr.role]="'listbox'"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-label]="placeholder()"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <!-- Search input -->
+        @if (searchable()) {
+          <com-dropdown-search
+            [placeholder]="searchPlaceholder()"
+            [size]="size()"
+            [debounceMs]="searchDebounceMs()"
+            (searchChange)="onSearchChange($event)"
+            (keyNav)="onSearchKeyNav($event)"
+          />
+        }
+
+        <!-- Options list -->
+        <div
+          class="overflow-auto"
+          [style.maxHeight]="maxHeight()"
+        >
+          @if (groupedOptions().length > 0) {
+            @for (group of groupedOptions(); track group.key) {
+              <!-- Group header -->
+              <com-dropdown-group
+                [label]="group.key"
+                [count]="group.options.length"
+                [expanded]="group.expanded"
+                [size]="size()"
+                [groupTemplate]="groupTemplate()?.templateRef ?? null"
+              />
+
+              <!-- Group options -->
+              @for (option of group.options; track option.id; let i = $index) {
+                <com-dropdown-option
+                  [value]="option.value"
+                  [displayText]="option.displayText"
+                  [id]="option.id"
+                  [index]="getGlobalIndex(group.key, i)"
+                  [selected]="isSelected(option.value)"
+                  [active]="isActive(option.id)"
+                  [disabled]="option.disabled"
+                  [size]="size()"
+                  [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                  (select)="selectOption($event)"
+                  (hover)="onOptionHover(option.id)"
+                />
+              }
+            }
+          } @else if (filteredOptions().length > 0) {
+            @for (option of filteredOptions(); track option.id; let i = $index) {
+              <com-dropdown-option
+                [value]="option.value"
+                [displayText]="option.displayText"
+                [id]="option.id"
+                [index]="i"
+                [selected]="isSelected(option.value)"
+                [active]="isActive(option.id)"
+                [disabled]="option.disabled"
+                [size]="size()"
+                [optionTemplate]="optionTemplate()?.templateRef ?? null"
+                (select)="selectOption($event)"
+                (hover)="onOptionHover(option.id)"
+              />
+            }
+          } @else {
+            <!-- Empty state -->
+            @if (emptyTemplate()) {
+              <ng-container
+                [ngTemplateOutlet]="emptyTemplate()!.templateRef"
+                [ngTemplateOutletContext]="emptyContext()"
+              />
+            } @else {
+              <div class="flex items-center justify-center px-3 py-6 text-muted-foreground">
+                @if (searchQuery()) {
+                  No results for "{{ searchQuery() }}"
+                } @else {
+                  No options available
+                }
+              </div>
+            }
+          }
+        </div>
+      </div>
+    </ng-template>
+
+    <!-- Live announcer region -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, imports: [
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        ComDropdownOption,
+                        ComDropdownSearch,
+                        ComDropdownTag,
+                        ComDropdownGroup,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-dropdown-host inline-block',
+                        '[class.com-dropdown-disabled]': 'disabled()',
+                        '[class.com-dropdown-open]': 'isOpen()',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownOptionTpl), { isSignal: true }] }], selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownSelectedTpl), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownEmptyTpl), { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownGroupTpl), { isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComDropdownTagTpl), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterWith", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], searchDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceMs", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], maxVisibleTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTags", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// Public API for the dropdown component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
+//# sourceMappingURL=ngx-com-components-dropdown.mjs.map