ngx-com 0.0.3 → 0.0.5

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

@@ -1,8 +1,9 @@
 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 { viewChild, input, output, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, signal, TemplateRef, Directive, ElementRef, ViewContainerRef, contentChild, linkedSignal, forwardRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
-import { NgControl } from '@angular/forms';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { ErrorStateMatcher, FormFieldControl } from 'ngx-com/components/form-field';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
@@ -62,6 +63,14 @@ const dropdownTriggerVariants = cva([
                 'bg-muted',
                 'hover:bg-muted-hover',
             ],
+            naked: [
+                'border-transparent',
+                'bg-transparent',
+                'shadow-none',
+                'focus:ring-0',
+                'focus:ring-offset-0',
+                'rounded-none',
+            ],
         },
         size: {
             sm: ['h-8', 'px-2', 'text-xs', 'gap-1'],
@@ -95,6 +104,24 @@ const dropdownTriggerVariants = cva([
             variant: 'outline',
             class: ['border-primary'],
         },
+        // Naked variant should not show ring when open (form-field provides focus styling)
+        {
+            open: true,
+            variant: 'naked',
+            class: ['ring-0', 'border-transparent'],
+        },
+        // Naked variant should not show error border (form-field provides error styling)
+        {
+            state: 'error',
+            variant: 'naked',
+            class: ['border-transparent', 'focus:ring-0'],
+        },
+        // Naked variant should not show success border (form-field provides styling)
+        {
+            state: 'success',
+            variant: 'naked',
+            class: ['border-transparent', 'focus:ring-0'],
+        },
     ],
     defaultVariants: {
         variant: 'default',
@@ -429,7 +456,6 @@ const dropdownChevronVariants = cva([
  *         `--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. */
@@ -497,10 +523,6 @@ class ComDropdownOption {
             this.hover.emit(this.value());
         }
     }
-    /** Gets the host element. */
-    getHostElement() {
-        return this.elementRef.nativeElement;
-    }
     /** Scrolls this option into view. */
     scrollIntoView() {
         this.optionRef()?.nativeElement.scrollIntoView({
@@ -620,7 +642,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *         `--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). */
@@ -670,10 +691,6 @@ class ComDropdownPanel {
     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();
@@ -1559,8 +1576,10 @@ class ComDropdown {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     liveAnnouncer = inject(LiveAnnouncer);
-    document = inject(DOCUMENT);
-    /** Optional NgControl for form integration. */
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    /** NgControl bound to this dropdown (if using reactive forms). */
     ngControl = inject(NgControl, { optional: true, self: true });
     /** Reference to the trigger button element. */
     triggerRef = viewChild.required('triggerElement');
@@ -1627,6 +1646,8 @@ class ComDropdown {
     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" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
     // ============ OUTPUTS ============
     /** Emitted when the value changes. */
     valueChange = output();
@@ -1639,6 +1660,8 @@ class ComDropdown {
     // ============ INTERNAL STATE ============
     /** Whether the panel is open. */
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Whether the trigger button is focused. */
+    _triggerFocused = signal(false, ...(ngDevMode ? [{ debugName: "_triggerFocused" }] : []));
     /** Current search query. */
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     /** Currently active (keyboard focused) option ID. */
@@ -1647,6 +1670,10 @@ class ComDropdown {
     internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
     // ============ COMPUTED STATE ============
     /** Trigger element ID. */
     triggerId = computed(() => `${this.dropdownId}-trigger`, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
@@ -1664,6 +1691,34 @@ class ComDropdown {
         }
         return val !== null && val !== undefined;
     }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the dropdown is focused (trigger focused or panel open). Implements FormFieldControl. */
+    focused = computed(() => this._triggerFocused() || this.isOpen(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. Label floats when focused or has a value. */
+    shouldLabelFloat = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        // Read reactive dependencies to trigger re-evaluation
+        this.isOpen();
+        this.hasValue();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Unique ID for the control. Implements FormFieldControl. */
+    id = this.triggerId;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     * Manual state takes precedence over auto-detected error state.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field. */
+    ariaDescribedBy = computed(() => this._describedByIds() || null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
     /** Selected value (single mode). */
     selectedValue = computed(() => {
         const val = this.internalValue();
@@ -1764,10 +1819,15 @@ class ComDropdown {
         const baseClasses = dropdownTriggerVariants({
             variant: this.variant(),
             size: this.size(),
-            state: this.state(),
+            state: this.effectiveState(),
             open: this.isOpen(),
         });
-        return mergeClasses(baseClasses, this.userClass());
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(baseClasses, paddingClasses, this.userClass());
     }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
     /** Computed panel classes. */
     panelClasses = computed(() => {
@@ -1792,14 +1852,10 @@ class ComDropdown {
     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);
@@ -1814,6 +1870,32 @@ class ComDropdown {
         // Disabled state is handled via the disabled input
         // When using forms, the form control's disabled state takes precedence
     }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        // Only toggle if click was outside the trigger button (not on it or inside it)
+        if (!this.disabled() && !this.triggerRef().nativeElement.contains(target)) {
+            this.toggle();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
     // ============ PUBLIC METHODS ============
     /** Opens the dropdown panel. */
     open() {
@@ -1990,6 +2072,12 @@ class ComDropdown {
         // Delegate to panel keydown handler
         this.onPanelKeydown(event);
     }
+    onTriggerFocus() {
+        this._triggerFocused.set(true);
+    }
+    onTriggerBlur() {
+        this._triggerFocused.set(false);
+    }
     onOptionHover(optionId) {
         this.activeOptionId.set(optionId);
     }
@@ -2185,7 +2273,7 @@ class ComDropdown {
         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: `
+    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 }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", 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" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], 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
@@ -2198,12 +2286,15 @@ class ComDropdown {
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-activedescendant]="activeDescendant()"
       [attr.aria-required]="required() || null"
-      [attr.aria-invalid]="state() === 'error' || null"
+      [attr.aria-invalid]="effectiveState() === 'error' || null"
+      [attr.aria-describedby]="ariaDescribedBy()"
       [attr.aria-disabled]="disabled() || null"
       [attr.tabindex]="disabled() ? -1 : 0"
       [disabled]="disabled()"
       (click)="toggle()"
       (keydown)="onTriggerKeydown($event)"
+      (focus)="onTriggerFocus()"
+      (blur)="onTriggerBlur()"
     >
       <!-- Selected value display -->
       <span class="flex-1 truncate text-left">
@@ -2394,12 +2485,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-activedescendant]="activeDescendant()"
       [attr.aria-required]="required() || null"
-      [attr.aria-invalid]="state() === 'error' || null"
+      [attr.aria-invalid]="effectiveState() === 'error' || null"
+      [attr.aria-describedby]="ariaDescribedBy()"
       [attr.aria-disabled]="disabled() || null"
       [attr.tabindex]="disabled() ? -1 : 0"
       [disabled]="disabled()"
       (click)="toggle()"
       (keydown)="onTriggerKeydown($event)"
+      (focus)="onTriggerFocus()"
+      (blur)="onTriggerBlur()"
     >
       <!-- Selected value display -->
       <span class="flex-1 truncate text-left">
@@ -2580,12 +2674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ComDropdownSearch,
                         ComDropdownTag,
                         ComDropdownGroup,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComDropdown) }], 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"] }] } });
+        }], 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 }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", 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