ngx-pk-ui 0.0.1 → 1.0.1

package/README.md

@@ -4,6 +4,10 @@ Angular 21 UI component library and CSS utilities.
 
 License: MIT
 
+Repository: https://github.com/superpck/ngx-pk-ui
+
+Demo & Usage: https://superpck.github.io/ngx-pk-ui/
+
 Source path:
 
 - `projects/ngx-pk-ui/src/lib` for components

package/fesm2022/ngx-pk-ui.mjs

@@ -1829,6 +1829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class PkTreeviewNodeComponent {
     nodes = [];
+    rootNodes = [];
     selection = 'none';
     nodeToggled = new EventEmitter();
     selectionChanged = new EventEmitter();
@@ -1848,14 +1849,15 @@ class PkTreeviewNodeComponent {
     onCheckClick(node, e) {
         e.stopPropagation();
         if (this.selection === 'single') {
-            this.clearAllSelection(this.nodes);
+            this.clearAllSelection(this.rootNodes.length ? this.rootNodes : this.nodes);
             node._selected = true;
         }
         else if (this.selection === 'multi') {
             const newState = !node._selected;
             this.setNodeAndChildren(node, newState);
         }
-        this.selectionChanged.emit(this.getSelected(this.nodes));
+        const root = this.rootNodes.length ? this.rootNodes : this.nodes;
+        this.selectionChanged.emit(this.getSelected(root));
     }
     clearAllSelection(nodes) {
         for (const n of nodes) {
@@ -1883,7 +1885,7 @@ class PkTreeviewNodeComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkTreeviewNodeComponent, isStandalone: true, selector: "pk-treeview-node", inputs: { nodes: "nodes", selection: "selection" }, outputs: { nodeToggled: "nodeToggled", selectionChanged: "selectionChanged" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkTreeviewNodeComponent, isStandalone: true, selector: "pk-treeview-node", inputs: { nodes: "nodes", rootNodes: "rootNodes", selection: "selection" }, outputs: { nodeToggled: "nodeToggled", selectionChanged: "selectionChanged" }, ngImport: i0, template: `
     <ul class="pk-tree-list">
       @for (node of nodes; track node) {
         <li class="pk-tree-item">
@@ -1947,6 +1949,7 @@ class PkTreeviewNodeComponent {
             <div class="pk-tree-children">
               <pk-treeview-node
                 [nodes]="node.children!"
+                [rootNodes]="rootNodes"
                 [selection]="selection"
                 (nodeToggled)="nodeToggled.emit($event)"
                 (selectionChanged)="selectionChanged.emit($event)">
@@ -1956,11 +1959,11 @@ class PkTreeviewNodeComponent {
         </li>
       }
     </ul>
-    `, isInline: true, styles: [".pk-tree-list{list-style:none;margin:0;padding:0}.pk-tree-item{margin:0}.pk-tree-row{display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.pk-tree-row:hover{background:#f1f5f9}.pk-tree-row--selected{background:#e0f2fe}.pk-tree-toggle{display:inline-flex;align-items:center;width:18px;cursor:pointer;flex-shrink:0}.pk-tree-check{display:inline-flex;align-items:center;flex-shrink:0;margin-right:2px}.pk-tree-icon{display:inline-flex;align-items:center;flex-shrink:0}.pk-tree-label{font-size:14px;color:#1e293b;flex:1}.pk-tree-link{color:inherit;text-decoration:none}.pk-tree-link:hover{text-decoration:underline}.pk-tree-children{padding-left:20px}.pk-tree-cb{width:15px;height:15px;border-radius:3px;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.pk-tree-cb--checked{background:#0ea5e9;border-color:#0ea5e9}.pk-tree-cb--indeterminate{border-color:#0ea5e9}.pk-tree-cb-dash{width:8px;height:2px;background:#0ea5e9;border-radius:1px;display:block}.pk-tree-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}.pk-tree-radio--checked{border-color:#0ea5e9;box-shadow:inset 0 0 0 3px #0ea5e9}\n"], dependencies: [{ kind: "component", type: PkTreeviewNodeComponent, selector: "pk-treeview-node", inputs: ["nodes", "selection"], outputs: ["nodeToggled", "selectionChanged"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".pk-tree-list{list-style:none;margin:0;padding:0}.pk-tree-item{margin:0}.pk-tree-row{display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.pk-tree-row:hover{background:#f1f5f9}.pk-tree-row--selected{background:#e0f2fe}.pk-tree-toggle{display:inline-flex;align-items:center;width:18px;cursor:pointer;flex-shrink:0}.pk-tree-check{display:inline-flex;align-items:center;flex-shrink:0;margin-right:2px}.pk-tree-icon{display:inline-flex;align-items:center;flex-shrink:0}.pk-tree-label{font-size:14px;color:#1e293b;flex:1}.pk-tree-link{color:inherit;text-decoration:none}.pk-tree-link:hover{text-decoration:underline}.pk-tree-children{padding-left:20px}.pk-tree-cb{width:15px;height:15px;border-radius:3px;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.pk-tree-cb--checked{background:#0ea5e9;border-color:#0ea5e9}.pk-tree-cb--indeterminate{border-color:#0ea5e9}.pk-tree-cb-dash{width:8px;height:2px;background:#0ea5e9;border-radius:1px;display:block}.pk-tree-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}.pk-tree-radio--checked{border-color:#0ea5e9;box-shadow:inset 0 0 0 3px #0ea5e9}\n"], dependencies: [{ kind: "component", type: PkTreeviewNodeComponent, selector: "pk-treeview-node", inputs: ["nodes", "rootNodes", "selection"], outputs: ["nodeToggled", "selectionChanged"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-treeview-node', imports: [RouterModule, PkIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pk-treeview-node', imports: [RouterModule, PkIcon], template: `
     <ul class="pk-tree-list">
       @for (node of nodes; track node) {
         <li class="pk-tree-item">
@@ -2024,6 +2027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <div class="pk-tree-children">
               <pk-treeview-node
                 [nodes]="node.children!"
+                [rootNodes]="rootNodes"
                 [selection]="selection"
                 (nodeToggled)="nodeToggled.emit($event)"
                 (selectionChanged)="selectionChanged.emit($event)">
@@ -2036,6 +2040,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     `, styles: [".pk-tree-list{list-style:none;margin:0;padding:0}.pk-tree-item{margin:0}.pk-tree-row{display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.pk-tree-row:hover{background:#f1f5f9}.pk-tree-row--selected{background:#e0f2fe}.pk-tree-toggle{display:inline-flex;align-items:center;width:18px;cursor:pointer;flex-shrink:0}.pk-tree-check{display:inline-flex;align-items:center;flex-shrink:0;margin-right:2px}.pk-tree-icon{display:inline-flex;align-items:center;flex-shrink:0}.pk-tree-label{font-size:14px;color:#1e293b;flex:1}.pk-tree-link{color:inherit;text-decoration:none}.pk-tree-link:hover{text-decoration:underline}.pk-tree-children{padding-left:20px}.pk-tree-cb{width:15px;height:15px;border-radius:3px;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.pk-tree-cb--checked{background:#0ea5e9;border-color:#0ea5e9}.pk-tree-cb--indeterminate{border-color:#0ea5e9}.pk-tree-cb-dash{width:8px;height:2px;background:#0ea5e9;border-radius:1px;display:block}.pk-tree-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}.pk-tree-radio--checked{border-color:#0ea5e9;box-shadow:inset 0 0 0 3px #0ea5e9}\n"] }]
         }], propDecorators: { nodes: [{
                 type: Input
+            }], rootNodes: [{
+                type: Input
             }], selection: [{
                 type: Input
             }], nodeToggled: [{
@@ -2214,12 +2220,13 @@ class PkTreeviewComponent {
     
       <pk-treeview-node
         [nodes]="nodes"
+        [rootNodes]="nodes"
         [selection]="selection"
         (nodeToggled)="onNodeToggled($event)"
         (selectionChanged)="onSelectionChanged($event)">
       </pk-treeview-node>
     </div>
-    `, isInline: true, styles: [".pk-treeview{font-family:inherit;font-size:14px}.pk-tree-select-all{display:flex;align-items:center;gap:6px;padding:4px 8px 6px;border-bottom:1px solid #e2e8f0;margin-bottom:4px;cursor:pointer}.pk-tree-select-all-label{font-size:13px;color:#475569;font-weight:500;-webkit-user-select:none;user-select:none}.pk-tree-cb{width:15px;height:15px;border-radius:3px;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;flex-shrink:0}.pk-tree-cb--checked{background:#0ea5e9;border-color:#0ea5e9}.pk-tree-cb--indeterminate{border-color:#0ea5e9}.pk-tree-cb-dash{width:8px;height:2px;background:#0ea5e9;border-radius:1px;display:block}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: PkTreeviewNodeComponent, selector: "pk-treeview-node", inputs: ["nodes", "selection"], outputs: ["nodeToggled", "selectionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".pk-treeview{font-family:inherit;font-size:14px}.pk-tree-select-all{display:flex;align-items:center;gap:6px;padding:4px 8px 6px;border-bottom:1px solid #e2e8f0;margin-bottom:4px;cursor:pointer}.pk-tree-select-all-label{font-size:13px;color:#475569;font-weight:500;-webkit-user-select:none;user-select:none}.pk-tree-cb{width:15px;height:15px;border-radius:3px;border:1.5px solid #94a3b8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;flex-shrink:0}.pk-tree-cb--checked{background:#0ea5e9;border-color:#0ea5e9}.pk-tree-cb--indeterminate{border-color:#0ea5e9}.pk-tree-cb-dash{width:8px;height:2px;background:#0ea5e9;border-radius:1px;display:block}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: PkTreeviewNodeComponent, selector: "pk-treeview-node", inputs: ["nodes", "rootNodes", "selection"], outputs: ["nodeToggled", "selectionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewComponent, decorators: [{
             type: Component,
@@ -2246,6 +2253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     
       <pk-treeview-node
         [nodes]="nodes"
+        [rootNodes]="nodes"
         [selection]="selection"
         (nodeToggled)="onNodeToggled($event)"
         (selectionChanged)="onSelectionChanged($event)">
@@ -2289,6 +2297,8 @@ class PkSelectComponent {
     labelField = input('label', ...(ngDevMode ? [{ debugName: "labelField" }] : /* istanbul ignore next */ []));
     valueField = input('value', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
     returnObjects = input(false, ...(ngDevMode ? [{ debugName: "returnObjects" }] : /* istanbul ignore next */ []));
+    customClass = input(null, ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    customStyle = input(null, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
     change = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
@@ -2432,18 +2442,19 @@ class PkSelectComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkSelectComponent, isStandalone: true, selector: "pk-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, returnObjects: { classPropertyName: "returnObjects", publicName: "returnObjects", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkSelectComponent, isStandalone: true, selector: "pk-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, returnObjects: { classPropertyName: "returnObjects", publicName: "returnObjects", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PkSelectComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div class="pk-select-container">
+    <div class="pk-select-container" [class]="customClass()">
       <div 
         class="pk-select-trigger"
         [class.pk-select-trigger-open]="isOpen()"
         [class.pk-select-trigger-disabled]="disabled()"
+        [ngStyle]="customStyle()"
         (click)="toggleDropdown()">
         <span class="pk-select-value">
           @if (displayValue()) {
@@ -2498,11 +2509,11 @@ class PkSelectComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".pk-select-container{position:relative;width:100%}.pk-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;transition:all .2s;min-height:38px}.pk-select-trigger:hover:not(.pk-select-trigger-disabled){border-color:#3b82f6}.pk-select-trigger-open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-trigger-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.pk-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-select-placeholder{color:#9ca3af}.pk-select-arrow{margin-left:8px;font-size:12px;color:#6b7280;transition:transform .2s}.pk-select-arrow-open{transform:rotate(180deg)}.pk-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.pk-select-search{padding:8px;border-bottom:1px solid #e5e7eb}.pk-select-search-input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none}.pk-select-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-options{overflow-y:auto;max-height:250px}.pk-select-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.pk-select-option:hover:not(.pk-select-option-disabled){background-color:#f3f4f6}.pk-select-option-selected{background-color:#dbeafe;color:#1e40af}.pk-select-option-disabled{opacity:.5;cursor:not-allowed}.pk-select-checkbox{margin-right:8px;cursor:pointer}.pk-select-option-label{flex:1}.pk-select-no-options{padding:16px 12px;text-align:center;color:#9ca3af;font-size:14px}\n"] });
+  `, isInline: true, styles: [".pk-select-container{position:relative;width:100%}.pk-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;transition:all .2s}.pk-select-trigger:hover:not(.pk-select-trigger-disabled){border-color:#3b82f6}.pk-select-trigger-open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-trigger-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.pk-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-select-placeholder{color:#9ca3af}.pk-select-arrow{margin-left:8px;font-size:12px;color:#6b7280;transition:transform .2s}.pk-select-arrow-open{transform:rotate(180deg)}.pk-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.pk-select-search{padding:8px;border-bottom:1px solid #e5e7eb}.pk-select-search-input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none}.pk-select-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-options{overflow-y:auto;max-height:250px}.pk-select-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.pk-select-option:hover:not(.pk-select-option-disabled){background-color:#f3f4f6}.pk-select-option-selected{background-color:#dbeafe;color:#1e40af}.pk-select-option-disabled{opacity:.5;cursor:not-allowed}.pk-select-checkbox{margin-right:8px;cursor:pointer}.pk-select-option-label{flex:1}.pk-select-no-options{padding:16px 12px;text-align:center;color:#9ca3af;font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-select', standalone: true, imports: [], providers: [
+            args: [{ selector: 'pk-select', standalone: true, imports: [NgStyle], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PkSelectComponent),
@@ -2511,11 +2522,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], host: {
                         '(document:click)': 'onDocumentClick($event)'
                     }, template: `
-    <div class="pk-select-container">
+    <div class="pk-select-container" [class]="customClass()">
       <div 
         class="pk-select-trigger"
         [class.pk-select-trigger-open]="isOpen()"
         [class.pk-select-trigger-disabled]="disabled()"
+        [ngStyle]="customStyle()"
         (click)="toggleDropdown()">
         <span class="pk-select-value">
           @if (displayValue()) {
@@ -2570,8 +2582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       }
     </div>
-  `, styles: [".pk-select-container{position:relative;width:100%}.pk-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;transition:all .2s;min-height:38px}.pk-select-trigger:hover:not(.pk-select-trigger-disabled){border-color:#3b82f6}.pk-select-trigger-open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-trigger-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.pk-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-select-placeholder{color:#9ca3af}.pk-select-arrow{margin-left:8px;font-size:12px;color:#6b7280;transition:transform .2s}.pk-select-arrow-open{transform:rotate(180deg)}.pk-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.pk-select-search{padding:8px;border-bottom:1px solid #e5e7eb}.pk-select-search-input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none}.pk-select-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-options{overflow-y:auto;max-height:250px}.pk-select-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.pk-select-option:hover:not(.pk-select-option-disabled){background-color:#f3f4f6}.pk-select-option-selected{background-color:#dbeafe;color:#1e40af}.pk-select-option-disabled{opacity:.5;cursor:not-allowed}.pk-select-checkbox{margin-right:8px;cursor:pointer}.pk-select-option-label{flex:1}.pk-select-no-options{padding:16px 12px;text-align:center;color:#9ca3af;font-size:14px}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], returnObjects: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnObjects", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+  `, styles: [".pk-select-container{position:relative;width:100%}.pk-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;transition:all .2s}.pk-select-trigger:hover:not(.pk-select-trigger-disabled){border-color:#3b82f6}.pk-select-trigger-open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-trigger-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.pk-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-select-placeholder{color:#9ca3af}.pk-select-arrow{margin-left:8px;font-size:12px;color:#6b7280;transition:transform .2s}.pk-select-arrow-open{transform:rotate(180deg)}.pk-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.pk-select-search{padding:8px;border-bottom:1px solid #e5e7eb}.pk-select-search-input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none}.pk-select-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pk-select-options{overflow-y:auto;max-height:250px}.pk-select-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s}.pk-select-option:hover:not(.pk-select-option-disabled){background-color:#f3f4f6}.pk-select-option-selected{background-color:#dbeafe;color:#1e40af}.pk-select-option-disabled{opacity:.5;cursor:not-allowed}.pk-select-checkbox{margin-right:8px;cursor:pointer}.pk-select-option-label{flex:1}.pk-select-no-options{padding:16px 12px;text-align:center;color:#9ca3af;font-size:14px}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], returnObjects: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnObjects", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 class PkAutocompleteComponent {
     elementRef = inject(ElementRef);
@@ -2583,6 +2595,8 @@ class PkAutocompleteComponent {
     debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     displayKey = input('label', ...(ngDevMode ? [{ debugName: "displayKey" }] : /* istanbul ignore next */ []));
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    customStyle = input(null, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
     // State
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -2758,16 +2772,16 @@ class PkAutocompleteComponent {
         // Handled by input() signal
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkAutocompleteComponent, isStandalone: true, selector: "pk-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayKey: { classPropertyName: "displayKey", publicName: "displayKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkAutocompleteComponent, isStandalone: true, selector: "pk-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayKey: { classPropertyName: "displayKey", publicName: "displayKey", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PkAutocompleteComponent),
                 multi: true,
             },
         ], ngImport: i0, template: `
-    <div class="relative w-full">
+    <div class="pk-autocomplete" [ngClass]="customClass()" [ngStyle]="customStyle()">
       <!-- Input -->
-      <div class="relative">
+      <div class="pk-autocomplete__input-wrap">
         <input
           #inputElement
           type="text"
@@ -2777,21 +2791,22 @@ class PkAutocompleteComponent {
           (keydown)="onKeyDown($event)"
           [placeholder]="placeholder()"
           [disabled]="disabled()"
-          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-          [class.pr-10]="loading() || (searchTerm() && !loading())"
+          [ngStyle]="customStyle()"
+          class="pk-autocomplete__input"
+          [class.pk-autocomplete__input--with-action]="loading() || (searchTerm() && !loading())"
         />
         
         <!-- Loading Spinner or Clear Button -->
         @if (loading()) {
-          <div class="absolute right-3 top-1/2 -translate-y-1/2">
+          <div class="pk-autocomplete__action">
             <div class="pk-spinner pk-spinner-sm"></div>
           </div>
         } @else if (searchTerm() && !disabled()) {
           <button
             type="button"
             (click)="clear()"
-            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            class="pk-autocomplete__clear-btn">
+            <svg class="pk-autocomplete__clear-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
             </svg>
           </button>
@@ -2800,20 +2815,20 @@ class PkAutocompleteComponent {
 
       <!-- Dropdown -->
       @if (isOpen() && !disabled()) {
-        <div class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto">
+        <div class="pk-autocomplete__dropdown">
           @if (loading()) {
-            <div class="px-4 py-8 text-center text-gray-500">
-              <div class="pk-spinner pk-spinner-sm mx-auto mb-2"></div>
-              <p class="text-sm">กำลังค้นหา...</p>
+            <div class="pk-autocomplete__state">
+              <div class="pk-spinner pk-spinner-sm"></div>
+              <p>กำลังค้นหา...</p>
             </div>
           } @else if (filteredOptions().length === 0) {
-            <div class="px-4 py-8 text-center text-gray-500">
-              <svg class="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="pk-autocomplete__state">
+              <svg class="pk-autocomplete__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
-              <p class="text-sm">ไม่พบข้อมูล</p>
+              <p>ไม่พบข้อมูล</p>
               @if (searchTerm()) {
-                <p class="text-xs mt-1">ลองค้นหาด้วยคำอื่น</p>
+                <p class="pk-autocomplete__subtext">ลองค้นหาด้วยคำอื่น</p>
               }
             </div>
           } @else {
@@ -2822,12 +2837,12 @@ class PkAutocompleteComponent {
                 type="button"
                 (click)="selectOption(option)"
                 [disabled]="option.disabled"
-                class="w-full px-4 py-2 text-left hover:bg-blue-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                [class.bg-blue-100]="highlightedIndex() === idx"
-                [class.font-medium]="isSelected(option)">
+                class="pk-autocomplete__option"
+                [class.pk-autocomplete__option--active]="highlightedIndex() === idx"
+                [class.pk-autocomplete__option--selected]="isSelected(option)">
                 {{ option.label }}
                 @if (isSelected(option)) {
-                  <span class="float-right text-blue-600">✓</span>
+                  <span class="pk-autocomplete__check">✓</span>
                 }
               </button>
             }
@@ -2835,25 +2850,20 @@ class PkAutocompleteComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".pk-autocomplete{position:relative;width:100%}.pk-autocomplete__input-wrap{position:relative}.pk-autocomplete__input{width:100%;height:40px;padding:0 14px;border:1px solid #d5d9e0;border-radius:10px;background:#fff;color:#1f2937;font-size:14px;line-height:1;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.pk-autocomplete__input::placeholder{color:#9aa3af}.pk-autocomplete__input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb24}.pk-autocomplete__input:disabled{background:#f4f6f8;color:#9aa3af;cursor:not-allowed}.pk-autocomplete__input--with-action{padding-right:40px}.pk-autocomplete__action,.pk-autocomplete__clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.pk-autocomplete__clear-btn{width:24px;height:24px;border:none;border-radius:999px;background:transparent;color:#98a2b3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pk-autocomplete__clear-btn:hover{background:#eef2f7;color:#4b5563}.pk-autocomplete__clear-icon{width:16px;height:16px}.pk-autocomplete__dropdown{position:absolute;z-index:50;width:100%;margin-top:6px;background:#fff;border:1px solid #dbe1e8;border-radius:12px;box-shadow:0 14px 30px #0f172a24;max-height:260px;overflow:auto}.pk-autocomplete__state{min-height:110px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#6b7280;font-size:13px}.pk-autocomplete__empty-icon{width:34px;height:34px;color:#c2cad4}.pk-autocomplete__subtext{margin:0;color:#9aa3af;font-size:12px}.pk-autocomplete__option{width:100%;padding:10px 14px;border:none;background:transparent;color:#1f2937;font-size:14px;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color .12s ease}.pk-autocomplete__option:hover{background:#f1f5ff}.pk-autocomplete__option--active{background:#e7efff}.pk-autocomplete__option--selected{font-weight:600}.pk-autocomplete__option:disabled{opacity:.45;cursor:not-allowed}.pk-autocomplete__check{color:#2563eb}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pk-autocomplete',
-                    standalone: true,
-                    imports: [FormsModule],
-                    providers: [
+            args: [{ selector: 'pk-autocomplete', standalone: true, imports: [FormsModule, NgClass, NgStyle], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PkAutocompleteComponent),
                             multi: true,
                         },
-                    ],
-                    template: `
-    <div class="relative w-full">
+                    ], template: `
+    <div class="pk-autocomplete" [ngClass]="customClass()" [ngStyle]="customStyle()">
       <!-- Input -->
-      <div class="relative">
+      <div class="pk-autocomplete__input-wrap">
         <input
           #inputElement
           type="text"
@@ -2863,21 +2873,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           (keydown)="onKeyDown($event)"
           [placeholder]="placeholder()"
           [disabled]="disabled()"
-          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-          [class.pr-10]="loading() || (searchTerm() && !loading())"
+          [ngStyle]="customStyle()"
+          class="pk-autocomplete__input"
+          [class.pk-autocomplete__input--with-action]="loading() || (searchTerm() && !loading())"
         />
         
         <!-- Loading Spinner or Clear Button -->
         @if (loading()) {
-          <div class="absolute right-3 top-1/2 -translate-y-1/2">
+          <div class="pk-autocomplete__action">
             <div class="pk-spinner pk-spinner-sm"></div>
           </div>
         } @else if (searchTerm() && !disabled()) {
           <button
             type="button"
             (click)="clear()"
-            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            class="pk-autocomplete__clear-btn">
+            <svg class="pk-autocomplete__clear-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
             </svg>
           </button>
@@ -2886,20 +2897,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
       <!-- Dropdown -->
       @if (isOpen() && !disabled()) {
-        <div class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto">
+        <div class="pk-autocomplete__dropdown">
           @if (loading()) {
-            <div class="px-4 py-8 text-center text-gray-500">
-              <div class="pk-spinner pk-spinner-sm mx-auto mb-2"></div>
-              <p class="text-sm">กำลังค้นหา...</p>
+            <div class="pk-autocomplete__state">
+              <div class="pk-spinner pk-spinner-sm"></div>
+              <p>กำลังค้นหา...</p>
             </div>
           } @else if (filteredOptions().length === 0) {
-            <div class="px-4 py-8 text-center text-gray-500">
-              <svg class="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="pk-autocomplete__state">
+              <svg class="pk-autocomplete__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
-              <p class="text-sm">ไม่พบข้อมูล</p>
+              <p>ไม่พบข้อมูล</p>
               @if (searchTerm()) {
-                <p class="text-xs mt-1">ลองค้นหาด้วยคำอื่น</p>
+                <p class="pk-autocomplete__subtext">ลองค้นหาด้วยคำอื่น</p>
               }
             </div>
           } @else {
@@ -2908,12 +2919,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type="button"
                 (click)="selectOption(option)"
                 [disabled]="option.disabled"
-                class="w-full px-4 py-2 text-left hover:bg-blue-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                [class.bg-blue-100]="highlightedIndex() === idx"
-                [class.font-medium]="isSelected(option)">
+                class="pk-autocomplete__option"
+                [class.pk-autocomplete__option--active]="highlightedIndex() === idx"
+                [class.pk-autocomplete__option--selected]="isSelected(option)">
                 {{ option.label }}
                 @if (isSelected(option)) {
-                  <span class="float-right text-blue-600">✓</span>
+                  <span class="pk-autocomplete__check">✓</span>
                 }
               </button>
             }
@@ -2921,10 +2932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       }
     </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayKey", required: false }] }], onClickOutside: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".pk-autocomplete{position:relative;width:100%}.pk-autocomplete__input-wrap{position:relative}.pk-autocomplete__input{width:100%;height:40px;padding:0 14px;border:1px solid #d5d9e0;border-radius:10px;background:#fff;color:#1f2937;font-size:14px;line-height:1;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.pk-autocomplete__input::placeholder{color:#9aa3af}.pk-autocomplete__input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb24}.pk-autocomplete__input:disabled{background:#f4f6f8;color:#9aa3af;cursor:not-allowed}.pk-autocomplete__input--with-action{padding-right:40px}.pk-autocomplete__action,.pk-autocomplete__clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.pk-autocomplete__clear-btn{width:24px;height:24px;border:none;border-radius:999px;background:transparent;color:#98a2b3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pk-autocomplete__clear-btn:hover{background:#eef2f7;color:#4b5563}.pk-autocomplete__clear-icon{width:16px;height:16px}.pk-autocomplete__dropdown{position:absolute;z-index:50;width:100%;margin-top:6px;background:#fff;border:1px solid #dbe1e8;border-radius:12px;box-shadow:0 14px 30px #0f172a24;max-height:260px;overflow:auto}.pk-autocomplete__state{min-height:110px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#6b7280;font-size:13px}.pk-autocomplete__empty-icon{width:34px;height:34px;color:#c2cad4}.pk-autocomplete__subtext{margin:0;color:#9aa3af;font-size:12px}.pk-autocomplete__option{width:100%;padding:10px 14px;border:none;background:transparent;color:#1f2937;font-size:14px;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color .12s ease}.pk-autocomplete__option:hover{background:#f1f5ff}.pk-autocomplete__option--active{background:#e7efff}.pk-autocomplete__option--selected{font-weight:600}.pk-autocomplete__option:disabled{opacity:.45;cursor:not-allowed}.pk-autocomplete__check{color:#2563eb}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayKey", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });