@tekus/design-system 5.28.0 → 5.29.2

package/fesm2022/tekus-design-system-components-select.mjs

@@ -1,212 +1,444 @@
 import * as i0 from '@angular/core';
-import { inject, input, signal, model, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, Injectable, inject, viewChild, input, model, output, effect, ChangeDetectionStrategy, Component, ElementRef, Directive } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { Select } from 'primeng/select';
-import * as i3 from 'primeng/message';
+import * as i4 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { combineLatest, debounceTime, auditTime, distinctUntilChanged, map, tap, switchMap, of, scan } from 'rxjs';
+import * as i3 from 'primeng/api';
+
+class TkSelectManager {
+    constructor() {
+        /**
+         * Reactive signal for the current search query.
+         */
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        /**
+         * Reactive signal for the current pagination page.
+         */
+        this.page = signal(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional parameters to send to the data source.
+         */
+        this.fetchParams = signal({}, ...(ngDevMode ? [{ debugName: "fetchParams" }] : /* istanbul ignore next */ []));
+        /**
+         * Sorting field.
+         */
+        this.sortField = signal(undefined, ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+        /**
+         * Sorting order (1 for ASC, -1 for DESC).
+         */
+        this.sortOrder = signal(undefined, ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        /**
+         * Reactive signal indicating if data is currently being fetched.
+         */
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * Reactive signal indicating if there are more items to fetch.
+         */
+        this.hasMore = signal(true, ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+        /**
+         * Number of items per page to detect the end of data.
+         */
+        this.pageSize = 20;
+        /**
+         * Final accumulated list of items exposed as a Signal.
+         */
+        this.items = toSignal(combineLatest({
+            filter: toObservable(this.searchQuery).pipe(debounceTime(200)),
+            page: toObservable(this.page),
+            params: toObservable(this.fetchParams),
+            sortField: toObservable(this.sortField),
+            sortOrder: toObservable(this.sortOrder)
+        }).pipe(auditTime(0), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), map(data => ({ ...data, pageSize: this.pageSize })), tap((request) => {
+            if (request.page === 1) {
+                this.hasMore.set(true);
+            }
+            this.loading.set(true);
+        }), switchMap((request) => {
+            const fetcher$ = this.dataSource
+                ? this.dataSource.fetch(request)
+                : of([]);
+            return fetcher$.pipe(tap(results => {
+                if (results.length < this.pageSize) {
+                    this.hasMore.set(false);
+                }
+            }), map(results => ({ results, page: request.page })), tap(() => this.loading.set(false)));
+        }), scan((acc, { results, page }) => {
+            return page === 1 ? results : [...acc, ...results];
+        }, [])), { initialValue: [] });
+    }
+    /**
+     * Updates the search query and resets pagination.
+     * @param query - The new search string.
+     */
+    updateSearch(query) {
+        if (this.searchQuery() !== query) {
+            this.searchQuery.set(query);
+            this.page.set(1);
+            this.hasMore.set(true);
+        }
+    }
+    /**
+     * Increments the page to trigger the next data chunk.
+     */
+    loadNextPage() {
+        this.page.update(p => p + 1);
+    }
+    /**
+     * Configures the data provider for the manager.
+     * @param provider - Object implementing the SelectDataSource interface.
+     */
+    setDataSource(provider) {
+        this.dataSource = provider;
+    }
+    /**
+     * Updates additional fetch parameters and resets pagination.
+     * @param params - The new parameters object.
+     */
+    updateParams(params) {
+        if (JSON.stringify(this.fetchParams()) !== JSON.stringify(params)) {
+            this.fetchParams.set(params);
+            this.page.set(1);
+            this.hasMore.set(true);
+        }
+    }
+    /**
+     * Resets the manager state to its initial values.
+     */
+    reset() {
+        this.searchQuery.set('');
+        this.page.set(1);
+        this.hasMore.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager, decorators: [{
+            type: Injectable
+        }] });
 
 class SelectComponent {
     constructor() {
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.manager = inject((TkSelectManager));
+        /** PrimeNG Select instance */
+        this.selectComponent = viewChild('pSelect', ...(ngDevMode ? [{ debugName: "selectComponent" }] : /* istanbul ignore next */ []));
+        /** Final reactive list of items */
         /**
-         * @property {string} id
-         * @description
-         * HTML id attribute for the multiselect input.
-         *
+         * HTML id attribute for the select input.
          * @default 'select'
          */
         this.id = input('select', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<FormControl>} control
-         * @description
          * External FormControl used to read/set the input value.
-         * If not provided, an internal FormControl is created.
          */
         this.control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
         /**
-         * @property {T[]} options
-         * @description
-         * Array of available options displayed in the dropdown.
+         * Static options for synchronous mode.
+         * If provided, they take precedence over the manager's async stream.
          */
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
-         * @property {string} optionLabel
-         * @description
+         * Data source for asynchronous infinite scroll mode.
+         */
+        this.dataSource = model(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
          * Name of the property used to display the text of each option.
-         *
          * @default 'label'
          */
         this.optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
         /**
-         * @property {string} label
-         * @description
          * Floating label displayed above the select input.
          */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
-         * @property {boolean} showClear
-         * @description
          * Enables the clear button to remove the current selection.
-         *
          * @default true
          */
         this.showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
         /**
-         * @property {T | null} value
-         * @description
-         * Internal selected value. Synced with Angular forms and the model signal.
-         *
-         * @internal
-         */
-        this.value = null;
-        /**
-         * @property {boolean} disabled
-         * @description
          * Determines whether the select field is disabled.
-         *
          * @default false
          */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} errorMessage
-         * @description
          * Message to display when the control is invalid and touched.
          */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} hint
-         * @description
          * Hint text to display below the input.
          */
         this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
         /**
-         * @property {Signal<T | null>} model
-         * @description
+         * Enables filtering/search input.
+         * @default false
+         */
+        this.filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /**
+         * Placeholder text displayed when no value is selected.
+         * @default 'Select an option'
+         */
+        this.placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Loading state for the dropdown.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional parameters for the async data source.
+         * Useful for sending context like categoryId, parentId, etc.
+         */
+        this.fetchParams = input({}, ...(ngDevMode ? [{ debugName: "fetchParams" }] : /* istanbul ignore next */ []));
+        /**
+         * Field name to sort by in the async data source.
+         */
+        this.sortField = input(undefined, ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+        /**
+         * Order to sort by (1 for ASC, -1 for DESC).
+         */
+        this.sortOrder = input(undefined, ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        /**
+         * Internal writable signal for the disabled state.
+         */
+        this.internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
+        /**
          * Two-way binding model using Angular signals.
-         * Allows usage with the syntax: `[(model)]="myValue"`.
+         * This is the single source of truth for the selected value.
+         */
+        this.model = model(null, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /**
+         * Text to display when there are no options.
          */
-        this.model = model(...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /**
+         * Text to display when no results match the filter.
+         */
+        this.emptyFilterMessage = input('No results found', ...(ngDevMode ? [{ debugName: "emptyFilterMessage" }] : /* istanbul ignore next */ []));
         /**
-         * @event modelChange
-         * @description
          * Emits whenever the value changes.
-         * Payload: the selected item of type `T` or `null`.
-         *
-         * @example
-         * <tk-select (modelChange)="onChange($event)"></tk-select>
          */
         this.modelChange = output();
+        /**
+         * Emits the filter search term.
+         */
+        this.filterChange = output();
         // CVA callbacks
         this.onChangeFn = () => { };
         this.onTouchedFn = () => { };
-        this.init = (() => {
-            if (this.ngControl) {
-                this.ngControl.valueAccessor = this;
-            }
-        })();
-        /**
-         * @effect disabled → internalDisabled
-         * @description
-         * Synchronizes the disabled input signal with the internal disabled state.
-         */
-        this.syncDisabled = effect(() => {
+        this.scrollHandler = this.handleScroll.bind(this);
+        this.lastListContainer = null;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Synchronize parameters with the manager
+        effect(() => {
+            this.manager.updateParams(this.fetchParams());
+        });
+        effect(() => {
+            this.manager.sortField.set(this.sortField());
+            this.manager.sortOrder.set(this.sortOrder());
+        });
+        // Synchronize disabled state
+        effect(() => {
             this.internalDisabled.set(this.disabled());
-        }, ...(ngDevMode ? [{ debugName: "syncDisabled" }] : /* istanbul ignore next */ []));
-        /**
-         * @effect model → internal value
-         * @description
-         * Synchronizes changes coming from the Signal `model()` back into the internal value.
-         * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.
-         */
-        this.syncModel = effect(() => {
-            const v = this.model();
-            if (v !== this.value) {
-                this.value = v ?? null;
-                this.onChangeFn(v ?? null);
+        });
+        // Synchronize data source (Strictly necessary effect to bridge with manager)
+        effect(() => {
+            const source = this.dataSource();
+            if (source) {
+                this.manager.setDataSource(source);
             }
-        }, ...(ngDevMode ? [{ debugName: "syncModel" }] : /* istanbul ignore next */ []));
+        });
+    }
+    /**
+     * Displays the items from the manager if provided, otherwise the static options.
+     * Includes a "Ghost Option" logic to ensure the selected item is always visible
+     * even if it's not in the current loaded chunk of data.
+     */
+    get items() {
+        const baseItems = this.dataSource()
+            ? this.manager.items()
+            : this.options();
+        const selected = this.model();
+        if (!selected)
+            return baseItems;
+        // Check if selected item is already in the list to avoid duplicates
+        // We compare by stringifying or by a known 'id' field if possible
+        const exists = baseItems.some(item => {
+            if (item === selected)
+                return true;
+            const itemId = item?.['id'] || item?.['code'];
+            const selectedId = selected?.['id'] || selected?.['code'];
+            return itemId !== undefined && itemId === selectedId;
+        });
+        return exists ? baseItems : [selected, ...baseItems];
     }
-    // -----------------------------------
-    // CONTROL VALUE ACCESSOR (Forms API)
-    // -----------------------------------
     /**
-     * @method writeValue
-     * @description
-     * Receives value updates from Angular Forms and writes them into the component.
-     *
-     * @param {T | null} value - New value from the forms API.
+     * Receives value updates from Angular Forms API.
+     * @param value - New value from the forms API.
      */
     writeValue(value) {
         this.model.set(value);
     }
     /**
-     * @method registerOnChange
-     * @description
      * Registers a callback that is invoked when the component's value changes.
+     * @param fn - The callback function.
      */
     registerOnChange(fn) {
         this.onChangeFn = fn;
     }
     /**
-     * @method registerOnTouched
-     * @description
      * Registers a callback invoked when the component is touched.
+     * @param fn - The callback function.
      */
     registerOnTouched(fn) {
         this.onTouchedFn = fn;
     }
     /**
-     * @method setDisabledState
-     * @description
-     * Updates the disabled state of the select control.
-     *
-     * @param {boolean} isDisabled - Whether the component should be disabled.
+     * Updates the disabled state of the control.
+     * @param isDisabled - Whether the component should be disabled.
      */
     setDisabledState(isDisabled) {
         this.internalDisabled.set(isDisabled);
     }
-    // -----------------------------------
-    // UI EVENTS
-    // -----------------------------------
     /**
-     * @method handleChange
-     * @description
-     * Handles the selection event emitted by the PrimeNG Select component.
-     * Updates Angular Forms, Signals, and emits the modelChange event.
-     *
-     * @param event - Event containing the `value` of the selected option.
+     * Handles UI changes from the PrimeNG Select.
+     * @param event - Event containing the selected value.
      */
     handleChange(event) {
         const value = event.value ?? null;
-        this.value = value;
+        this.model.set(value);
         this.onChangeFn(value);
         this.onTouchedFn();
-        this.model.set(value);
         this.modelChange.emit(value);
         if (this.effectiveControl) {
-            this.effectiveControl.setValue(value);
+            this.effectiveControl.setValue(value, { emitEvent: false });
             this.effectiveControl.markAsDirty();
             this.effectiveControl.markAsTouched();
         }
     }
+    /**
+     * Handles filter input changes and notifies the manager.
+     * @param event - Filter event containing the search term.
+     */
+    handleFilter(event) {
+        const query = event.filter || '';
+        this.manager.updateSearch(query);
+        this.filterChange.emit(event);
+    }
+    /**
+     * Returns the underlying FormControl for validation state checking.
+     */
     get effectiveControl() {
         return this.ngControl?.control || null;
     }
+    /**
+     * Adds a scroll listener to the PrimeNG select list container when the panel opens.
+     */
+    onPanelShow() {
+        const listContainer = document.querySelector('.p-select-list-container');
+        if (listContainer) {
+            this.lastListContainer = listContainer;
+            listContainer.addEventListener('scroll', this.scrollHandler);
+        }
+    }
+    /**
+     * Cleans up state, removes listeners and resets the manager when the panel closes.
+     */
+    onPanelHide() {
+        this.removeScrollListener();
+        this.manager.reset();
+    }
+    /**
+     * Cleans up listeners on component destruction.
+     */
+    ngOnDestroy() {
+        this.removeScrollListener();
+    }
+    /**
+     * Safely removes the scroll event listener.
+     */
+    removeScrollListener() {
+        if (this.lastListContainer) {
+            this.lastListContainer.removeEventListener('scroll', this.scrollHandler);
+            this.lastListContainer = null;
+        }
+    }
+    /**
+     * Detects if the user has reached the bottom of the list.
+     */
+    handleScroll(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        // Trigger near the bottom (1px threshold)
+        const atBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1;
+        if (atBottom &&
+            this.manager.dataSource &&
+            !this.manager.loading() &&
+            this.manager.hasMore()) {
+            this.manager.loadNextPage();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n    effectiveControl?.invalid &&\n    (effectiveControl?.dirty || effectiveControl?.touched) &&\n    errorMessage()\n    ) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n      hint()\n      }}</p-message>\n    }\n  </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetchParams: { classPropertyName: "fetchParams", publicName: "fetchParams", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", model: "modelChange", modelChange: "modelChange", filterChange: "filterChange" }, providers: [TkSelectManager], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    #pSelect\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"items\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"model()\"\n    [filter]=\"filter()\"\n    [loading]=\"manager.loading()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\"\n    (onFilter)=\"handleFilter($event)\"\n    (onShow)=\"onPanelShow()\"\n    (onHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n    \n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n      @if (model()) {\n        <div>{{ $any(model())[optionLabel()] }}</div>\n      } @else if (placeholder()) {\n        <span class=\"text-secondary\">{{ placeholder() }}</span>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-select>\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n  <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n    effectiveControl?.invalid &&\n    (effectiveControl?.dirty || effectiveControl?.touched) &&\n    errorMessage()\n    ) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n      hint()\n      }}</p-message>\n    }\n  </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-select', providers: [TkSelectManager], imports: [
+                        FormsModule,
+                        Select,
+                        FloatLabelModule,
+                        MessageModule,
+                        ReactiveFormsModule,
+                        IconComponent,
+                    ], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    #pSelect\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"items\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"model()\"\n    [filter]=\"filter()\"\n    [loading]=\"manager.loading()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\"\n    (onFilter)=\"handleFilter($event)\"\n    (onShow)=\"onPanelShow()\"\n    (onHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n    \n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n      @if (model()) {\n        <div>{{ $any(model())[optionLabel()] }}</div>\n      } @else if (placeholder()) {\n        <span class=\"text-secondary\">{{ placeholder() }}</span>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-select>\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectComponent: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetchParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchParams", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
+
+class IntersectionDirective {
+    constructor() {
+        /**
+         * Emits when the element enters the viewport.
+         */
+        this.intersect = output();
+        this.element = inject(ElementRef);
+    }
+    /**
+     * Initializes the Intersection Observer on component mount.
+     */
+    ngOnInit() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                this.intersect.emit();
+            }
+        }, { threshold: 0.1 });
+        this.observer.observe(this.element.nativeElement);
+    }
+    /**
+     * Cleans up the observer to prevent memory leaks.
+     */
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IntersectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: IntersectionDirective, isStandalone: true, selector: "[tkIntersection]", outputs: { intersect: "intersect" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IntersectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tkIntersection]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { intersect: [{ type: i0.Output, args: ["intersect"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectComponent };
+export { IntersectionDirective, SelectComponent, TkSelectManager };
 //# sourceMappingURL=tekus-design-system-components-select.mjs.map