ngx-pk-ui 0.0.1

package/fesm2022/ngx-pk-ui.mjs

@@ -0,0 +1,3117 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, Component, contentChildren, signal, Injectable, inject, effect, output, computed, Input, EventEmitter, Output, ContentChild, Host, Optional, forwardRef, Inject, Directive, HostListener, ContentChildren, NgModule, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgTemplateOutlet, NgStyle, CommonModule, NgClass } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Subject, of } from 'rxjs';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+class PkTab {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    content = viewChild.required('content');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: PkTab, isStandalone: true, selector: "pk-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pk-tab',
+                    template: `<ng-template #content><ng-content /></ng-template>`,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+class PkTabs {
+    tabs = contentChildren(PkTab, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    ngAfterContentInit() {
+        const firstEnabled = this.tabs().findIndex((t) => !t.disabled());
+        this.activeIndex.set(firstEnabled >= 0 ? firstEnabled : 0);
+    }
+    selectTab(index) {
+        if (!this.tabs()[index]?.disabled()) {
+            this.activeIndex.set(index);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkTabs, isStandalone: true, selector: "pk-tabs", queries: [{ propertyName: "tabs", predicate: PkTab, isSignal: true }], ngImport: i0, template: "<div class=\"pk-tabs\">\n  <ul class=\"pk-tabs__nav\" role=\"tablist\">\n    @for (tab of tabs(); track $index) {\n      <li\n        class=\"pk-tabs__nav-item\"\n        [class.pk-tabs__nav-item--active]=\"activeIndex() === $index\"\n        [class.pk-tabs__nav-item--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex() === $index\"\n        [attr.aria-disabled]=\"tab.disabled()\"\n        (click)=\"selectTab($index)\"\n        (keydown.enter)=\"selectTab($index)\"\n        (keydown.space)=\"selectTab($index)\"\n        tabindex=\"{{ tab.disabled() ? -1 : 0 }}\"\n      >\n        {{ tab.label() }}\n      </li>\n    }\n  </ul>\n  <div class=\"pk-tabs__content\" role=\"tabpanel\">\n    @if (tabs()[activeIndex()]) {\n      <ng-container *ngTemplateOutlet=\"tabs()[activeIndex()].content()\" />\n    }\n  </div>\n</div>\n", styles: [".pk-tabs__nav{display:flex;list-style:none;margin:0;padding:0;border-bottom:2px solid #e0e0e0}.pk-tabs__nav-item{padding:10px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#555;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}.pk-tabs__nav-item:hover:not(.pk-tabs__nav-item--disabled){color:var(--pk-btn-primary, #1976d2)}.pk-tabs__nav-item--active{color:var(--pk-btn-primary, #1976d2);border-bottom-color:var(--pk-btn-primary, #1976d2);font-weight:600}.pk-tabs__nav-item--disabled{color:#bdbdbd;cursor:not-allowed}.pk-tabs__content{padding:16px 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-tabs', imports: [NgTemplateOutlet], template: "<div class=\"pk-tabs\">\n  <ul class=\"pk-tabs__nav\" role=\"tablist\">\n    @for (tab of tabs(); track $index) {\n      <li\n        class=\"pk-tabs__nav-item\"\n        [class.pk-tabs__nav-item--active]=\"activeIndex() === $index\"\n        [class.pk-tabs__nav-item--disabled]=\"tab.disabled()\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex() === $index\"\n        [attr.aria-disabled]=\"tab.disabled()\"\n        (click)=\"selectTab($index)\"\n        (keydown.enter)=\"selectTab($index)\"\n        (keydown.space)=\"selectTab($index)\"\n        tabindex=\"{{ tab.disabled() ? -1 : 0 }}\"\n      >\n        {{ tab.label() }}\n      </li>\n    }\n  </ul>\n  <div class=\"pk-tabs__content\" role=\"tabpanel\">\n    @if (tabs()[activeIndex()]) {\n      <ng-container *ngTemplateOutlet=\"tabs()[activeIndex()].content()\" />\n    }\n  </div>\n</div>\n", styles: [".pk-tabs__nav{display:flex;list-style:none;margin:0;padding:0;border-bottom:2px solid #e0e0e0}.pk-tabs__nav-item{padding:10px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#555;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}.pk-tabs__nav-item:hover:not(.pk-tabs__nav-item--disabled){color:var(--pk-btn-primary, #1976d2)}.pk-tabs__nav-item--active{color:var(--pk-btn-primary, #1976d2);border-bottom-color:var(--pk-btn-primary, #1976d2);font-weight:600}.pk-tabs__nav-item--disabled{color:#bdbdbd;cursor:not-allowed}.pk-tabs__content{padding:16px 0}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PkTab), { isSignal: true }] }] } });
+
+class PkToastrService {
+    _counter = 0;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    show(type, message, title, duration = 4000) {
+        const toast = { id: ++this._counter, type, message, title, duration };
+        this.toasts.update((list) => [...list, toast]);
+        if (duration > 0) {
+            setTimeout(() => this.dismiss(toast.id), duration);
+        }
+    }
+    success(message, title, duration) {
+        this.show('success', message, title, duration);
+    }
+    error(message, title, duration) {
+        this.show('error', message, title, duration);
+    }
+    info(message, title, duration) {
+        this.show('info', message, title, duration);
+    }
+    warning(message, title, duration) {
+        this.show('warning', message, title, duration);
+    }
+    dismiss(id) {
+        this.toasts.update((list) => list.filter((t) => t.id !== id));
+    }
+    clear() {
+        this.toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PkToastr {
+    toastr = inject(PkToastrService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkToastr, isStandalone: true, selector: "pk-toastr", ngImport: i0, template: "<div class=\"pk-toastr-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toastr.toasts(); track toast.id) {\n    <div\n      class=\"pk-toast pk-toast--{{ toast.type }}\"\n      role=\"alert\"\n    >\n      @if (toast.title) {\n        <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n      }\n      <span class=\"pk-toast__message\">{{ toast.message }}</span>\n      <button\n        class=\"pk-toast__close\"\n        aria-label=\"Dismiss\"\n        (click)=\"toastr.dismiss(toast.id)\"\n      >\u2715</button>\n    </div>\n  }\n</div>\n", styles: [".pk-toastr-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px;pointer-events:none}.pk-toast{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;color:#fff;pointer-events:all;animation:pk-toast-in .25s ease}@keyframes pk-toast-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.pk-toast--success{background:#43a047}.pk-toast--error{background:#e53935}.pk-toast--info{background:#1e88e5}.pk-toast--warning{background:#fb8c00}.pk-toast__title{display:block;font-weight:700;margin-bottom:2px}.pk-toast__message{flex:1;font-size:14px}.pk-toast__close{background:none;border:none;color:#fffc;cursor:pointer;font-size:14px;padding:0;line-height:1;margin-left:auto;flex-shrink:0}.pk-toast__close:hover{color:#fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-toastr', template: "<div class=\"pk-toastr-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toastr.toasts(); track toast.id) {\n    <div\n      class=\"pk-toast pk-toast--{{ toast.type }}\"\n      role=\"alert\"\n    >\n      @if (toast.title) {\n        <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n      }\n      <span class=\"pk-toast__message\">{{ toast.message }}</span>\n      <button\n        class=\"pk-toast__close\"\n        aria-label=\"Dismiss\"\n        (click)=\"toastr.dismiss(toast.id)\"\n      >\u2715</button>\n    </div>\n  }\n</div>\n", styles: [".pk-toastr-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px;pointer-events:none}.pk-toast{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;color:#fff;pointer-events:all;animation:pk-toast-in .25s ease}@keyframes pk-toast-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.pk-toast--success{background:#43a047}.pk-toast--error{background:#e53935}.pk-toast--info{background:#1e88e5}.pk-toast--warning{background:#fb8c00}.pk-toast__title{display:block;font-weight:700;margin-bottom:2px}.pk-toast__message{flex:1;font-size:14px}.pk-toast__close{background:none;border:none;color:#fffc;cursor:pointer;font-size:14px;padding:0;line-height:1;margin-left:auto;flex-shrink:0}.pk-toast__close:hover{color:#fff}\n"] }]
+        }] });
+
+class PkAlertService {
+    /** The component reads this signal to know what (if anything) to display. */
+    slot = signal(null, ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    _open(config) {
+        return new Promise((resolve) => {
+            this.slot.set({ config, resolve });
+        });
+    }
+    success(message, title = 'Success') {
+        return this._open({ type: 'success', title, message });
+    }
+    warn(message, title = 'Warning') {
+        return this._open({ type: 'warn', title, message });
+    }
+    error(message, title = 'Error') {
+        return this._open({ type: 'error', title, message });
+    }
+    confirm(message, title = 'Confirm', confirmLabel = 'Yes', cancelLabel = 'No') {
+        return this._open({
+            type: 'confirm',
+            title,
+            message,
+            confirmLabel,
+            cancelLabel,
+        });
+    }
+    input(message, inputType = 'string', title = 'Input', defaultValue) {
+        return this._open({
+            type: 'input',
+            title,
+            message,
+            inputType,
+            defaultValue,
+        });
+    }
+    /** Called by the component after the user makes a choice. */
+    _resolve(value) {
+        const current = this.slot();
+        if (current) {
+            this.slot.set(null);
+            current.resolve(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PkAlert {
+    svc = inject(PkAlertService);
+    /** Local copy of input value while the dialog is open */
+    inputValue = signal(null, ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const slot = this.svc.slot();
+            if (slot) {
+                const def = slot.config.defaultValue;
+                this.inputValue.set(def !== undefined ? def : this._defaultFor(slot.config.inputType));
+            }
+        });
+    }
+    confirm() {
+        const slot = this.svc.slot();
+        if (!slot)
+            return;
+        const type = slot.config.type;
+        if (type === 'confirm') {
+            this.svc._resolve(true);
+        }
+        else if (type === 'input') {
+            this.svc._resolve(this.inputValue());
+        }
+        else {
+            this.svc._resolve(undefined);
+        }
+    }
+    cancel() {
+        const slot = this.svc.slot();
+        if (!slot)
+            return;
+        const type = slot.config.type;
+        this.svc._resolve(type === 'confirm' ? false : null);
+    }
+    _defaultFor(inputType) {
+        switch (inputType) {
+            case 'number': return 0;
+            case 'boolean': return false;
+            case 'date': return '';
+            default: return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkAlert, isStandalone: true, selector: "pk-alert", ngImport: i0, template: "@if (svc.slot(); as slot) {\n  <div class=\"pk-alert-backdrop\" (click)=\"cancel()\">\n    <div class=\"pk-alert-card pk-alert-card--{{ slot.config.type }}\"\n         role=\"dialog\"\n         aria-modal=\"true\"\n         (click)=\"$event.stopPropagation()\">\n\n      <div class=\"pk-alert-icon\">\n        @switch (slot.config.type) {\n          @case ('success') { \u2705 }\n          @case ('warn')    { \u26A0\uFE0F }\n          @case ('error')   { \u274C }\n          @case ('confirm') { \uD83E\uDD14 }\n          @case ('input')   { \u270F\uFE0F }\n        }\n      </div>\n\n      @if (slot.config.title) {\n        <h2 class=\"pk-alert-title\">{{ slot.config.title }}</h2>\n      }\n\n      <p class=\"pk-alert-message\">{{ slot.config.message }}</p>\n\n      @if (slot.config.type === 'input') {\n        <div class=\"pk-alert-input-wrap\">\n          @switch (slot.config.inputType) {\n            @case ('boolean') {\n              <label class=\"pk-alert-toggle\">\n                <input type=\"checkbox\" [checked]=\"!!inputValue()\"\n                       (change)=\"inputValue.set($any($event.target).checked)\" />\n                <span>{{ inputValue() ? 'Yes' : 'No' }}</span>\n              </label>\n            }\n            @case ('number') {\n              <input class=\"pk-alert-field\" type=\"number\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set(+$any($event.target).value)\"\n                     autofocus />\n            }\n            @case ('date') {\n              <input class=\"pk-alert-field\" type=\"date\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n            @default {\n              <input class=\"pk-alert-field\" type=\"text\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n          }\n        </div>\n      }\n\n      <div class=\"pk-alert-actions\">\n        @if (slot.config.type === 'confirm' || slot.config.type === 'input') {\n          <button class=\"pk-alert-btn pk-alert-btn--cancel\" (click)=\"cancel()\">\n            {{ slot.config.cancelLabel ?? 'Cancel' }}\n          </button>\n        }\n        <button class=\"pk-alert-btn pk-alert-btn--confirm pk-alert-btn--{{ slot.config.type }}\"\n                (click)=\"confirm()\">\n          {{ slot.config.confirmLabel ?? 'OK' }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".pk-alert-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000;animation:pk-backdrop-in .15s ease}@keyframes pk-backdrop-in{0%{opacity:0}to{opacity:1}}.pk-alert-card{background:#fff;border-radius:10px;padding:32px 28px 24px;min-width:320px;max-width:480px;width:90vw;box-shadow:0 8px 32px #0003;text-align:center;animation:pk-card-in .2s ease}@keyframes pk-card-in{0%{opacity:0;transform:scale(.92) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}.pk-alert-icon{font-size:40px;line-height:1;margin-bottom:12px}.pk-alert-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#222}.pk-alert-message{margin:0 0 20px;font-size:15px;color:#555;line-height:1.5}.pk-alert-input-wrap{margin-bottom:20px}.pk-alert-field{width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:6px;font-size:15px;outline:none;transition:border-color .15s;box-sizing:border-box}.pk-alert-field:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d22e}.pk-alert-toggle{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}.pk-alert-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.pk-alert-actions{display:flex;justify-content:center;gap:12px}.pk-alert-btn{padding:9px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}.pk-alert-btn:hover{opacity:.85}.pk-alert-btn--cancel{background:#f0f0f0;color:#444}.pk-alert-btn--confirm{color:#fff}.pk-alert-btn--confirm.pk-alert-btn--success{background:#43a047}.pk-alert-btn--confirm.pk-alert-btn--warn{background:#fb8c00}.pk-alert-btn--confirm.pk-alert-btn--error{background:#e53935}.pk-alert-btn--confirm.pk-alert-btn--confirm,.pk-alert-btn--confirm.pk-alert-btn--input{background:#1976d2}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-alert', imports: [FormsModule], template: "@if (svc.slot(); as slot) {\n  <div class=\"pk-alert-backdrop\" (click)=\"cancel()\">\n    <div class=\"pk-alert-card pk-alert-card--{{ slot.config.type }}\"\n         role=\"dialog\"\n         aria-modal=\"true\"\n         (click)=\"$event.stopPropagation()\">\n\n      <div class=\"pk-alert-icon\">\n        @switch (slot.config.type) {\n          @case ('success') { \u2705 }\n          @case ('warn')    { \u26A0\uFE0F }\n          @case ('error')   { \u274C }\n          @case ('confirm') { \uD83E\uDD14 }\n          @case ('input')   { \u270F\uFE0F }\n        }\n      </div>\n\n      @if (slot.config.title) {\n        <h2 class=\"pk-alert-title\">{{ slot.config.title }}</h2>\n      }\n\n      <p class=\"pk-alert-message\">{{ slot.config.message }}</p>\n\n      @if (slot.config.type === 'input') {\n        <div class=\"pk-alert-input-wrap\">\n          @switch (slot.config.inputType) {\n            @case ('boolean') {\n              <label class=\"pk-alert-toggle\">\n                <input type=\"checkbox\" [checked]=\"!!inputValue()\"\n                       (change)=\"inputValue.set($any($event.target).checked)\" />\n                <span>{{ inputValue() ? 'Yes' : 'No' }}</span>\n              </label>\n            }\n            @case ('number') {\n              <input class=\"pk-alert-field\" type=\"number\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set(+$any($event.target).value)\"\n                     autofocus />\n            }\n            @case ('date') {\n              <input class=\"pk-alert-field\" type=\"date\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n            @default {\n              <input class=\"pk-alert-field\" type=\"text\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n          }\n        </div>\n      }\n\n      <div class=\"pk-alert-actions\">\n        @if (slot.config.type === 'confirm' || slot.config.type === 'input') {\n          <button class=\"pk-alert-btn pk-alert-btn--cancel\" (click)=\"cancel()\">\n            {{ slot.config.cancelLabel ?? 'Cancel' }}\n          </button>\n        }\n        <button class=\"pk-alert-btn pk-alert-btn--confirm pk-alert-btn--{{ slot.config.type }}\"\n                (click)=\"confirm()\">\n          {{ slot.config.confirmLabel ?? 'OK' }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".pk-alert-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000;animation:pk-backdrop-in .15s ease}@keyframes pk-backdrop-in{0%{opacity:0}to{opacity:1}}.pk-alert-card{background:#fff;border-radius:10px;padding:32px 28px 24px;min-width:320px;max-width:480px;width:90vw;box-shadow:0 8px 32px #0003;text-align:center;animation:pk-card-in .2s ease}@keyframes pk-card-in{0%{opacity:0;transform:scale(.92) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}.pk-alert-icon{font-size:40px;line-height:1;margin-bottom:12px}.pk-alert-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#222}.pk-alert-message{margin:0 0 20px;font-size:15px;color:#555;line-height:1.5}.pk-alert-input-wrap{margin-bottom:20px}.pk-alert-field{width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:6px;font-size:15px;outline:none;transition:border-color .15s;box-sizing:border-box}.pk-alert-field:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d22e}.pk-alert-toggle{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}.pk-alert-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.pk-alert-actions{display:flex;justify-content:center;gap:12px}.pk-alert-btn{padding:9px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}.pk-alert-btn:hover{opacity:.85}.pk-alert-btn--cancel{background:#f0f0f0;color:#444}.pk-alert-btn--confirm{color:#fff}.pk-alert-btn--confirm.pk-alert-btn--success{background:#43a047}.pk-alert-btn--confirm.pk-alert-btn--warn{background:#fb8c00}.pk-alert-btn--confirm.pk-alert-btn--error{background:#e53935}.pk-alert-btn--confirm.pk-alert-btn--confirm,.pk-alert-btn--confirm.pk-alert-btn--input{background:#1976d2}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PkModalHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkModalHeader, isStandalone: true, selector: "pk-modal-header", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:16px 48px 16px 20px;border-bottom:1px solid #e0e0e0;font-size:17px;font-weight:600;color:#1a1a2e;line-height:1.4}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-modal-header', standalone: true, template: `<ng-content />`, styles: [":host{display:block;padding:16px 48px 16px 20px;border-bottom:1px solid #e0e0e0;font-size:17px;font-weight:600;color:#1a1a2e;line-height:1.4}\n"] }]
+        }] });
+
+class PkModalBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkModalBody, isStandalone: true, selector: "pk-modal-body", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:20px;flex:1;overflow-y:auto;color:#333;line-height:1.6;font-size:14px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalBody, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-modal-body', standalone: true, template: `<ng-content />`, styles: [":host{display:block;padding:20px;flex:1;overflow-y:auto;color:#333;line-height:1.6;font-size:14px}\n"] }]
+        }] });
+
+class PkModalFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkModalFooter, isStandalone: true, selector: "pk-modal-footer", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #e0e0e0;background:#f9f9f9;border-bottom-left-radius:10px;border-bottom-right-radius:10px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalFooter, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-modal-footer', standalone: true, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #e0e0e0;background:#f9f9f9;border-bottom-left-radius:10px;border-bottom-right-radius:10px}\n"] }]
+        }] });
+
+class PkModal {
+    openModal = input(false, ...(ngDevMode ? [{ debugName: "openModal" }] : /* istanbul ignore next */ []));
+    customStyle = input(null, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
+    customClass = input(null, ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    blur = input(true, ...(ngDevMode ? [{ debugName: "blur" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input('white', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    closeAny = input(false, ...(ngDevMode ? [{ debugName: "closeAny" }] : /* istanbul ignore next */ []));
+    closeMarker = input(true, ...(ngDevMode ? [{ debugName: "closeMarker" }] : /* istanbul ignore next */ []));
+    onClose = output();
+    dialogClass = computed(() => {
+        const classes = [
+            'pk-modal-dialog',
+            `pk-modal-dialog--${this.size()}`,
+            `pk-modal-dialog--theme-${this.theme()}`,
+        ];
+        const custom = this.customClass();
+        if (custom)
+            classes.push(custom);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "dialogClass" }] : /* istanbul ignore next */ []));
+    close() {
+        this.onClose.emit();
+    }
+    onOverlayClick() {
+        if (this.closeAny()) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkModal, isStandalone: true, selector: "pk-modal", inputs: { openModal: { classPropertyName: "openModal", publicName: "openModal", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, closeAny: { classPropertyName: "closeAny", publicName: "closeAny", isSignal: true, isRequired: false, transformFunction: null }, closeMarker: { classPropertyName: "closeMarker", publicName: "closeMarker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "@if (openModal()) {\n  <div\n    class=\"pk-modal-overlay\"\n    [class.pk-modal-overlay--blur]=\"blur()\"\n    (click)=\"onOverlayClick()\"\n  >\n    <div\n      [class]=\"dialogClass()\"\n      [ngStyle]=\"customStyle()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (closeMarker()) {\n        <button\n          class=\"pk-modal-close-btn\"\n          type=\"button\"\n          aria-label=\"Close modal\"\n          (click)=\"close()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n               fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      }\n\n      <ng-content select=\"pk-modal-header\" />\n      <ng-content select=\"pk-modal-body\" />\n      <ng-content select=\"pk-modal-footer\" />\n      <!-- fallback for unslotted content -->\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:pkModalFadeIn .18s ease}.pk-modal-overlay--blur{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.pk-modal-dialog{background:#fff;border:1px solid #eceff3;border-radius:10px;box-shadow:0 20px 60px #00000038,0 4px 16px #0000001a;position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 32px);animation:pkModalSlideIn .18s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pk-modal-dialog:before{content:\"\";position:absolute;top:0;left:0;right:0;height:5px;border-radius:10px 10px 0 0;background:transparent;pointer-events:none}.pk-modal-dialog--xs{max-width:280px}.pk-modal-dialog--sm{max-width:360px}.pk-modal-dialog--md{max-width:520px}.pk-modal-dialog--lg{max-width:760px}.pk-modal-dialog--xl{max-width:1020px}.pk-modal-dialog--2xl{max-width:1280px}.pk-modal-dialog--full{max-width:100%;height:calc(100vh - 32px);border-radius:0}.pk-modal-dialog--full:before{border-radius:0}.pk-modal-dialog--theme-white,.pk-modal-dialog--theme-none{background:#fff;border-color:#eceff3}.pk-modal-dialog--theme-success{background:linear-gradient(180deg,#f6fff9,#fff 22%);border-color:#b7e8cb;box-shadow:0 22px 60px #00000029,0 4px 14px #16a34a29}.pk-modal-dialog--theme-success:before{background:linear-gradient(90deg,#16a34a,#22c55e)}.pk-modal-dialog--theme-warn{background:linear-gradient(180deg,#fffdf5,#fff 22%);border-color:#f7d9a6;box-shadow:0 22px 60px #00000029,0 4px 14px #f59e0b2b}.pk-modal-dialog--theme-warn:before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.pk-modal-dialog--theme-error{background:linear-gradient(180deg,#fff8f8,#fff 22%);border-color:#f5b6b6;box-shadow:0 22px 60px #00000029,0 4px 14px #dc262629}.pk-modal-dialog--theme-error:before{background:linear-gradient(90deg,#dc2626,#ef4444)}.pk-modal-dialog--theme-sky{background:linear-gradient(180deg,#f4fbff,#fff 22%);border-color:#b8e4fd;box-shadow:0 22px 60px #00000029,0 4px 14px #0ea5e92b}.pk-modal-dialog--theme-sky:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.pk-modal-dialog--theme-blue{background:linear-gradient(180deg,#f5f8ff,#fff 22%);border-color:#b7c9fa;box-shadow:0 22px 60px #00000029,0 4px 14px #2563eb2b}.pk-modal-dialog--theme-blue:before{background:linear-gradient(90deg,#2563eb,#3b82f6)}.pk-modal-dialog--theme-gray{background:linear-gradient(180deg,#f8fafc,#fff 22%);border-color:#d2d8e1;box-shadow:0 22px 60px #00000029,0 4px 14px #47556929}.pk-modal-dialog--theme-gray:before{background:linear-gradient(90deg,#475569,#64748b)}.pk-modal-close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#999;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s,color .15s}.pk-modal-close-btn:hover{background:#f0f0f0;color:#333}.pk-modal-close-btn:active{background:#e0e0e0}@keyframes pkModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pkModalSlideIn{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-modal', imports: [NgStyle], template: "@if (openModal()) {\n  <div\n    class=\"pk-modal-overlay\"\n    [class.pk-modal-overlay--blur]=\"blur()\"\n    (click)=\"onOverlayClick()\"\n  >\n    <div\n      [class]=\"dialogClass()\"\n      [ngStyle]=\"customStyle()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (closeMarker()) {\n        <button\n          class=\"pk-modal-close-btn\"\n          type=\"button\"\n          aria-label=\"Close modal\"\n          (click)=\"close()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n               fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      }\n\n      <ng-content select=\"pk-modal-header\" />\n      <ng-content select=\"pk-modal-body\" />\n      <ng-content select=\"pk-modal-footer\" />\n      <!-- fallback for unslotted content -->\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:pkModalFadeIn .18s ease}.pk-modal-overlay--blur{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.pk-modal-dialog{background:#fff;border:1px solid #eceff3;border-radius:10px;box-shadow:0 20px 60px #00000038,0 4px 16px #0000001a;position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 32px);animation:pkModalSlideIn .18s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pk-modal-dialog:before{content:\"\";position:absolute;top:0;left:0;right:0;height:5px;border-radius:10px 10px 0 0;background:transparent;pointer-events:none}.pk-modal-dialog--xs{max-width:280px}.pk-modal-dialog--sm{max-width:360px}.pk-modal-dialog--md{max-width:520px}.pk-modal-dialog--lg{max-width:760px}.pk-modal-dialog--xl{max-width:1020px}.pk-modal-dialog--2xl{max-width:1280px}.pk-modal-dialog--full{max-width:100%;height:calc(100vh - 32px);border-radius:0}.pk-modal-dialog--full:before{border-radius:0}.pk-modal-dialog--theme-white,.pk-modal-dialog--theme-none{background:#fff;border-color:#eceff3}.pk-modal-dialog--theme-success{background:linear-gradient(180deg,#f6fff9,#fff 22%);border-color:#b7e8cb;box-shadow:0 22px 60px #00000029,0 4px 14px #16a34a29}.pk-modal-dialog--theme-success:before{background:linear-gradient(90deg,#16a34a,#22c55e)}.pk-modal-dialog--theme-warn{background:linear-gradient(180deg,#fffdf5,#fff 22%);border-color:#f7d9a6;box-shadow:0 22px 60px #00000029,0 4px 14px #f59e0b2b}.pk-modal-dialog--theme-warn:before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.pk-modal-dialog--theme-error{background:linear-gradient(180deg,#fff8f8,#fff 22%);border-color:#f5b6b6;box-shadow:0 22px 60px #00000029,0 4px 14px #dc262629}.pk-modal-dialog--theme-error:before{background:linear-gradient(90deg,#dc2626,#ef4444)}.pk-modal-dialog--theme-sky{background:linear-gradient(180deg,#f4fbff,#fff 22%);border-color:#b8e4fd;box-shadow:0 22px 60px #00000029,0 4px 14px #0ea5e92b}.pk-modal-dialog--theme-sky:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.pk-modal-dialog--theme-blue{background:linear-gradient(180deg,#f5f8ff,#fff 22%);border-color:#b7c9fa;box-shadow:0 22px 60px #00000029,0 4px 14px #2563eb2b}.pk-modal-dialog--theme-blue:before{background:linear-gradient(90deg,#2563eb,#3b82f6)}.pk-modal-dialog--theme-gray{background:linear-gradient(180deg,#f8fafc,#fff 22%);border-color:#d2d8e1;box-shadow:0 22px 60px #00000029,0 4px 14px #47556929}.pk-modal-dialog--theme-gray:before{background:linear-gradient(90deg,#475569,#64748b)}.pk-modal-close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#999;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s,color .15s}.pk-modal-close-btn:hover{background:#f0f0f0;color:#333}.pk-modal-close-btn:active{background:#e0e0e0}@keyframes pkModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pkModalSlideIn{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
+        }], propDecorators: { openModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModal", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], closeAny: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAny", required: false }] }], closeMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMarker", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+
+const PK_ICONS = {
+    // ── Navigation & UI ──────────────────────────────────────────────────────
+    'search': `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
+    'menu': `<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>`,
+    'close': `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
+    'sort': `<line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="9" y1="18" x2="15" y2="18"/>`,
+    'plus': `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
+    'list': `<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>`,
+    'reload': `<polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15"/>`,
+    // ── Users & Auth ─────────────────────────────────────────────────────────
+    'user': `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+    'users': `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+    'profile': `<rect x="2" y="3" width="20" height="18" rx="2"/><circle cx="12" cy="10" r="3"/><path d="M7 20v-1a5 5 0 0 1 10 0v1"/>`,
+    'login': `<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/>`,
+    'logout': `<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>`,
+    // ── Location ─────────────────────────────────────────────────────────────
+    'map': `<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>`,
+    'map-point': `<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>`,
+    // ── Files & Documents ────────────────────────────────────────────────────
+    'folder-close': `<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`,
+    'folder-open': `<path d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1"/><path d="M3 11h18l-1.5 8H4.5z"/>`,
+    'document': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`,
+    'report': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="15" x2="9" y2="18"/><line x1="12" y1="12" x2="12" y2="18"/><line x1="15" y1="13" x2="15" y2="18"/>`,
+    'csv': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="16" y2="18"/><line x1="12" y1="10" x2="12" y2="20"/>`,
+    'xls': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><rect x="8" y="11" width="8" height="7"/><line x1="12" y1="11" x2="12" y2="18"/><line x1="8" y1="14.5" x2="16" y2="14.5"/>`,
+    'pdf': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="12" y2="18"/>`,
+    'text': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="14" x2="16" y2="14"/><line x1="8" y1="17" x2="14" y2="17"/>`,
+    // ── Charts & Analytics ───────────────────────────────────────────────────
+    'chart-pie': `<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>`,
+    'chart-bar': `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/>`,
+    'dashboard': `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>`,
+    'venn': `<circle cx="9" cy="12" r="7"/><circle cx="15" cy="12" r="7"/>`,
+    // ── System & Infrastructure ──────────────────────────────────────────────
+    'database': `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>`,
+    'cog': `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
+    'setting': `<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>`,
+    'server': `<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>`,
+    'shield': `<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>`,
+    // ── Communication ────────────────────────────────────────────────────────
+    'email': `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>`,
+    'phone': `<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>`,
+    // ── Transfer ─────────────────────────────────────────────────────────────
+    'upload': `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>`,
+    'download': `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>`,
+    'export': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="12" x2="15" y2="12"/><polyline points="12.5 9.5 15 12 12.5 14.5"/>`,
+    'import': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="15" y1="12" x2="9" y2="12"/><polyline points="11.5 9.5 9 12 11.5 14.5"/>`,
+    // ── Links ────────────────────────────────────────────────────────────────
+    'link': `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
+    'unlink': `<path d="M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.004 5.004 0 0 0-7.07.12l-1.72 1.71"/><path d="M5.17 11.75l-1.72 1.71a5.004 5.004 0 0 0 .12 7.07 5.004 5.004 0 0 0 7.07-.12l1.71-1.71"/><line x1="8" y1="2" x2="8" y2="5"/><line x1="2" y1="8" x2="5" y2="8"/><line x1="16" y1="19" x2="16" y2="22"/><line x1="19" y1="16" x2="22" y2="16"/>`,
+    // ── Editing & Actions ────────────────────────────────────────────────────
+    'pencil': `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+    'save': `<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>`,
+    'trash': `<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>`,
+    'eye': `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
+    'eye-off': `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>`,
+    'print': `<polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>`,
+    // ── Status ───────────────────────────────────────────────────────────────
+    'check-mark': `<polyline points="20 6 9 17 4 12"/>`,
+    'check-mark-circle': `<circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10"/>`,
+    'success': `<circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/>`,
+    'warning': `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    'error': `<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>`,
+    'question': `<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    // ── Time ─────────────────────────────────────────────────────────────────
+    'clock': `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
+    'calendar': `<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>`,
+    'time': `<circle cx="12" cy="13" r="8"/><polyline points="12 9 12 13 15 13"/><line x1="9" y1="3" x2="15" y2="3"/><line x1="12" y1="3" x2="12" y2="5"/>`,
+    'wait': `<path d="M5 22h14M5 2h14M17 2v4l-5 4 5 4v4H7v-4l5-4-5-4V2"/>`,
+    // ── Medical & Transport ──────────────────────────────────────────────────
+    'ambulance': `<rect x="2" y="7" width="14" height="10" rx="1"/><path d="M16 10l5 1v5h-5"/><circle cx="6" cy="17" r="2"/><circle cx="17" cy="17" r="2"/><path d="M6 10h4M8 8v4"/>`,
+    'car': `<rect x="2" y="10" width="20" height="7" rx="2"/><path d="M6 10l2-4h8l2 4"/><circle cx="6.5" cy="17" r="1.5"/><circle cx="17.5" cy="17" r="1.5"/>`,
+    'car-crash': `<rect x="2" y="10" width="14" height="7" rx="2"/><path d="M5 10l2-4h6l2 4"/><circle cx="5.5" cy="17" r="1.5"/><circle cx="12.5" cy="17" r="1.5"/><line x1="19" y1="4" x2="23" y2="8"/><line x1="23" y1="4" x2="19" y2="8"/>`,
+    'bed': `<path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v4H2"/><path d="M2 17h20"/><circle cx="6" cy="8" r="2"/>`,
+    'xray': `<rect x="3" y="2" width="18" height="20" rx="2"/><line x1="12" y1="6" x2="12" y2="18"/><path d="M9 8c0 0 3 2 3 4s-3 4-3 4"/><path d="M15 8c0 0-3 2-3 4s3 4 3 4"/>`,
+    'lab': `<path d="M9 3h6"/><path d="M9 3v7l-5 9a1 1 0 0 0 .9 1.5h12.2a1 1 0 0 0 .9-1.5L15 10V3"/><circle cx="11" cy="16" r="1"/>`,
+    // ── Social ───────────────────────────────────────────────────────────────
+    'youtube': `<path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.95C18.88 4 12 4 12 4s-6.88 0-8.59.47a2.78 2.78 0 0 0-1.95 1.95A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.41 19.1C5.12 19.56 12 19.56 12 19.56s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.48z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/>`,
+    'facebook': `<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>`,
+    'line': `<path d="M20 12c0-4.4-3.58-8-8-8S4 7.6 4 12c0 3.74 2.7 6.9 6.41 7.6.25.05.59.16.68.36.08.18.05.47.02.66l-.11.67c-.03.2-.17.8.64.43 4.8-2.57 7.36-6.23 7.36-9.72z"/><line x1="9" y1="11" x2="9" y2="13"/><line x1="11.25" y1="11" x2="11.25" y2="13"/><line x1="13.5" y1="11" x2="13.5" y2="13"/><line x1="15" y1="11" x2="15" y2="13"/>`,
+    'telegram': `<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>`,
+    'wechat': `<path d="M9 3C5.1 3 2 5.9 2 9.5c0 2 1 3.8 2.6 5l-.6 2 2.4-1.1c.8.3 1.7.5 2.6.5 4.4 0 7-2.9 7-6.4C16 5.9 12.9 3 9 3z"/><path d="M16 9.2c.5-.1 1-.1 1.5-.1C21.1 9.1 24 11.6 24 14.7c0 1.5-.7 2.9-1.9 3.9l.5 1.8-2-1c-.6.2-1.3.3-2 .3-3 0-5.5-2-5.5-4.5 0-.4.1-.8.2-1.2"/>`,
+    'linkedin': `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`,
+};
+
+class PkIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    iconSet = input('pk', ...(ngDevMode ? [{ debugName: "iconSet" }] : /* istanbul ignore next */ []));
+    size = input(15, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input('currentColor', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    fillColor = input('none', ...(ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []));
+    viewBox = input('0 0 24 24', ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    // Material Symbols specific controls
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    fill = input(0, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    weight = input(400, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    grade = input(0, ...(ngDevMode ? [{ debugName: "grade" }] : /* istanbul ignore next */ []));
+    opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
+    sanitizer = inject(DomSanitizer);
+    svgHtml = computed(() => {
+        const paths = PK_ICONS[this.name()] ?? '';
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg"` +
+            ` width="${this.size()}" height="${this.size()}"` +
+            ` viewBox="${this.viewBox()}"` +
+            ` stroke="${this.color()}"` +
+            ` fill="${this.fillColor()}"` +
+            ` stroke-width="${this.strokeWidth()}"` +
+            ` stroke-linecap="round" stroke-linejoin="round">` +
+            paths +
+            `</svg>`;
+        return this.sanitizer.bypassSecurityTrustHtml(svg);
+    }, ...(ngDevMode ? [{ debugName: "svgHtml" }] : /* istanbul ignore next */ []));
+    materialVariantClass = computed(() => {
+        if (this.variant() === 'rounded') {
+            return 'material-symbols-rounded';
+        }
+        if (this.variant() === 'sharp') {
+            return 'material-symbols-sharp';
+        }
+        return 'material-symbols-outlined';
+    }, ...(ngDevMode ? [{ debugName: "materialVariantClass" }] : /* istanbul ignore next */ []));
+    materialVariationSettings = computed(() => {
+        return `'FILL' ${this.fill()}, 'wght' ${this.weight()}, 'GRAD' ${this.grade()}, 'opsz' ${this.opticalSize()}`;
+    }, ...(ngDevMode ? [{ debugName: "materialVariationSettings" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkIcon, isStandalone: true, selector: "pk-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSet: { classPropertyName: "iconSet", publicName: "iconSet", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fillColor: { classPropertyName: "fillColor", publicName: "fillColor", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (iconSet() === 'material-symbols') {
+      <span
+        class="pk-material-symbol"
+        [class.material-symbols-outlined]="materialVariantClass() === 'material-symbols-outlined'"
+        [class.material-symbols-rounded]="materialVariantClass() === 'material-symbols-rounded'"
+        [class.material-symbols-sharp]="materialVariantClass() === 'material-symbols-sharp'"
+        [style.font-size.px]="size()"
+        [style.color]="color()"
+        [style.font-variation-settings]="materialVariationSettings()"
+      >{{ name() }}</span>
+    } @else {
+      <span [innerHTML]="svgHtml()"></span>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host span{display:inline-flex;align-items:center;justify-content:center}:host span svg{display:block}.pk-material-symbol{line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-icon', template: `
+    @if (iconSet() === 'material-symbols') {
+      <span
+        class="pk-material-symbol"
+        [class.material-symbols-outlined]="materialVariantClass() === 'material-symbols-outlined'"
+        [class.material-symbols-rounded]="materialVariantClass() === 'material-symbols-rounded'"
+        [class.material-symbols-sharp]="materialVariantClass() === 'material-symbols-sharp'"
+        [style.font-size.px]="size()"
+        [style.color]="color()"
+        [style.font-variation-settings]="materialVariationSettings()"
+      >{{ name() }}</span>
+    } @else {
+      <span [innerHTML]="svgHtml()"></span>
+    }
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host span{display:inline-flex;align-items:center;justify-content:center}:host span svg{display:block}.pk-material-symbol{line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSet", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillColor", required: false }] }], viewBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewBox", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
+
+class PkDgColumnComponent {
+    el;
+    pkDgField;
+    pkDgFilterKey;
+    widthPx;
+    width;
+    headerText = '';
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        // Extract text content for header
+        const nativeElement = this.el.nativeElement;
+        this.headerText = nativeElement.textContent?.trim() || '';
+        // @Input('style.width.px') is bypassed by Angular's style binding pipeline —
+        // read from the host element's actual inline style as the reliable source
+        if (!this.widthPx) {
+            const styleWidth = nativeElement.style.width;
+            if (styleWidth && styleWidth.endsWith('px')) {
+                this.widthPx = parseInt(styleWidth, 10);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgColumnComponent, isStandalone: false, selector: "pk-dg-column", inputs: { pkDgField: "pkDgField", pkDgFilterKey: "pkDgFilterKey", widthPx: ["style.width.px", "widthPx"] }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pk-dg-column',
+                    template: '<ng-content></ng-content>',
+                    standalone: false,
+                    host: {
+                        'style': 'display: none'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { pkDgField: [{
+                type: Input
+            }], pkDgFilterKey: [{
+                type: Input
+            }], widthPx: [{
+                type: Input,
+                args: ['style.width.px']
+            }] } });
+
+class PkDgPageSizeComponent {
+    cdr;
+    pkPageSizeOptions = [10, 20, 50, 100];
+    pagination = null;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    setPagination(p) {
+        this.pagination = p;
+        this.cdr.detectChanges();
+    }
+    get currentSize() {
+        return this.pagination?.pkDgPageSize ?? this.pkPageSizeOptions[0];
+    }
+    onChange(event) {
+        const value = +event.target.value;
+        this.pagination?.onPageSizeChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPageSizeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPageSizeComponent, isStandalone: false, selector: "pk-dg-page-size", inputs: { pkPageSizeOptions: "pkPageSizeOptions" }, ngImport: i0, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeOptions; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPageSizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-page-size', standalone: false, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeOptions; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { pkPageSizeOptions: [{
+                type: Input
+            }] } });
+
+class PkDgPaginationComponent {
+    pageSize;
+    pkDgPageSize = 10;
+    totalItems = 0;
+    pkDgPageChange = new EventEmitter();
+    pkDgPageSizeChange = new EventEmitter();
+    currentPage = 1;
+    firstItem = 0;
+    lastItem = 0;
+    ngOnInit() {
+        this.updatePagination();
+    }
+    ngAfterContentInit() {
+        if (this.pageSize) {
+            this.pageSize.setPagination(this);
+        }
+    }
+    ngOnChanges() {
+        this.updatePagination();
+    }
+    updatePagination() {
+        this.firstItem = (this.currentPage - 1) * this.pkDgPageSize;
+        this.lastItem = Math.min(this.firstItem + this.pkDgPageSize, this.totalItems);
+    }
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.pkDgPageSize);
+    }
+    goToPage(page) {
+        if (page >= 1 && page <= this.totalPages) {
+            this.currentPage = page;
+            this.updatePagination();
+            this.pkDgPageChange.emit(page);
+        }
+    }
+    onPageSizeChange(size) {
+        this.pkDgPageSize = size;
+        this.currentPage = 1;
+        this.updatePagination();
+        this.pkDgPageSizeChange.emit(size);
+    }
+    get pages() {
+        const pages = [];
+        const maxVisible = 5;
+        let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
+        let end = Math.min(this.totalPages, start + maxVisible - 1);
+        if (end - start + 1 < maxVisible) {
+            start = Math.max(1, end - maxVisible + 1);
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPaginationComponent, isStandalone: false, selector: "pk-dg-pagination", inputs: { pkDgPageSize: "pkDgPageSize", totalItems: "totalItems" }, outputs: { pkDgPageChange: "pkDgPageChange", pkDgPageSizeChange: "pkDgPageSizeChange" }, queries: [{ propertyName: "pageSize", first: true, predicate: PkDgPageSizeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-dg-pagination\">\n  <div class=\"pagination-info\">\n    <ng-content></ng-content>\n  </div>\n  \n  <div class=\"pagination-controls\">\n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPage(currentPage - 1)\">\n      \u2039\n    </button>\n    \n    @for (page of pages; track page) {\n      <button \n        class=\"btn btn-sm\"\n        [class.btn-primary]=\"page === currentPage\"\n        [class.btn-link]=\"page !== currentPage\"\n        (click)=\"goToPage(page)\">\n        {{ page }}\n      </button>\n    }\n    \n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToPage(currentPage + 1)\">\n      \u203A\n    </button>\n  </div>\n</div>\n", styles: [".pk-dg-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid #e0e0e0;background:#fafafa}.pk-dg-pagination .pagination-info{color:#565656;font-size:14px}.pk-dg-pagination .pagination-controls{display:flex;gap:4px}.pk-dg-pagination .pagination-controls .btn{min-width:32px;padding:4px 8px}.pk-dg-pagination .pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-pagination', standalone: false, template: "<div class=\"pk-dg-pagination\">\n  <div class=\"pagination-info\">\n    <ng-content></ng-content>\n  </div>\n  \n  <div class=\"pagination-controls\">\n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPage(currentPage - 1)\">\n      \u2039\n    </button>\n    \n    @for (page of pages; track page) {\n      <button \n        class=\"btn btn-sm\"\n        [class.btn-primary]=\"page === currentPage\"\n        [class.btn-link]=\"page !== currentPage\"\n        (click)=\"goToPage(page)\">\n        {{ page }}\n      </button>\n    }\n    \n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToPage(currentPage + 1)\">\n      \u203A\n    </button>\n  </div>\n</div>\n", styles: [".pk-dg-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid #e0e0e0;background:#fafafa}.pk-dg-pagination .pagination-info{color:#565656;font-size:14px}.pk-dg-pagination .pagination-controls{display:flex;gap:4px}.pk-dg-pagination .pagination-controls .btn{min-width:32px;padding:4px 8px}.pk-dg-pagination .pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { pageSize: [{
+                type: ContentChild,
+                args: [PkDgPageSizeComponent]
+            }], pkDgPageSize: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], pkDgPageChange: [{
+                type: Output
+            }], pkDgPageSizeChange: [{
+                type: Output
+            }] } });
+
+class PkDgRowComponent {
+    pkDgItem;
+    detailTemplate;
+    isExpanded = false;
+    hasDetail = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgRowComponent, isStandalone: false, selector: "pk-dg-row", inputs: { pkDgItem: "pkDgItem" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true }], ngImport: i0, template: "<tr class=\"pk-dg-row\">\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon\n          iconSet=\"material-symbols\"\n          [name]=\"isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\"\n          [size]=\"16\"\n          color=\"currentColor\"\n        ></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-detail\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-detail\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"], dependencies: [{ 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: PkDgRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-row', standalone: false, host: {
+                        'style': 'display: contents'
+                    }, template: "<tr class=\"pk-dg-row\">\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon\n          iconSet=\"material-symbols\"\n          [name]=\"isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\"\n          [size]=\"16\"\n          color=\"currentColor\"\n        ></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-detail\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-detail\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"] }]
+        }], propDecorators: { pkDgItem: [{
+                type: Input
+            }], detailTemplate: [{
+                type: ContentChild,
+                args: ['detail']
+            }] } });
+
+class PkDgRowDetailComponent {
+    row;
+    constructor(row) {
+        this.row = row;
+    }
+    ngOnInit() {
+        if (this.row) {
+            this.row.hasDetail = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowDetailComponent, deps: [{ token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgRowDetailComponent, isStandalone: false, selector: "pk-dg-row-detail", host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowDetailComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pk-dg-row-detail',
+                    template: '<ng-content></ng-content>',
+                    standalone: false,
+                    host: {
+                        'style': 'display: contents'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: PkDgRowComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }] });
+
+class PkDgItemsDirective {
+    templateRef;
+    viewContainer;
+    datagrid;
+    _items = [];
+    _lastVersion = -1;
+    constructor(templateRef, viewContainer, datagrid) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.datagrid = datagrid;
+    }
+    ngDoCheck() {
+        if (this.datagrid) {
+            // Use version counter to detect real changes only
+            const version = this.datagrid.displayedItemsVersion;
+            if (version !== this._lastVersion) {
+                this._lastVersion = version;
+                this.renderItems();
+            }
+        }
+    }
+    set pkDgItemsOf(items) {
+        this._items = items || [];
+        // Push items to parent datagrid so it can handle pagination/sorting
+        if (this.datagrid) {
+            this.datagrid.items = this._items;
+            if (this.datagrid.pagination) {
+                this.datagrid.pagination.totalItems = this._items.length;
+                this.datagrid.pagination.updatePagination();
+            }
+            this.datagrid.updateDisplayedItems();
+        }
+    }
+    renderItems() {
+        this.viewContainer.clear();
+        const items = this.datagrid ? this.datagrid.displayedItems : this._items;
+        if (items && items.length > 0) {
+            items.forEach((item, index) => {
+                this.viewContainer.createEmbeddedView(this.templateRef, {
+                    $implicit: item,
+                    index: index,
+                    count: items.length
+                });
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgItemsDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: forwardRef(() => PkDatagridComponent), optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkDgItemsDirective, isStandalone: false, selector: "[pkDgItems]", inputs: { pkDgItemsOf: "pkDgItemsOf" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgItemsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pkDgItems]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PkDatagridComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => PkDatagridComponent)]
+                }] }], propDecorators: { pkDgItemsOf: [{
+                type: Input
+            }] } });
+class PkIfExpandedDirective {
+    templateRef;
+    viewContainer;
+    row;
+    constructor(templateRef, viewContainer, row) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.row = row;
+        // Mark row as having detail as soon as this directive is instantiated
+        if (this.row) {
+            this.row.hasDetail = true;
+        }
+    }
+    ngAfterViewInit() {
+        this.updateView();
+    }
+    ngDoCheck() {
+        this.updateView();
+    }
+    updateView() {
+        if (this.row && this.row.isExpanded) {
+            if (this.viewContainer.length === 0) {
+                this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+        }
+        else {
+            this.viewContainer.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIfExpandedDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkIfExpandedDirective, isStandalone: false, selector: "[pkIfExpanded]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIfExpandedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pkIfExpanded]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PkDgRowComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }] });
+class NowrapDirective {
+    nowrap = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NowrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NowrapDirective, isStandalone: false, selector: "[nowrap]", host: { properties: { "style.white-space": "nowrap ? \"nowrap\" : \"normal\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NowrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nowrap]',
+                    standalone: false,
+                    host: {
+                        '[style.white-space]': 'nowrap ? "nowrap" : "normal"'
+                    }
+                }]
+        }] });
+
+class PkDatagridComponent {
+    cdr;
+    columns;
+    pagination;
+    rowDetails;
+    expandDirectives;
+    get hasExpandCol() {
+        if (this.expandDirectives && this.expandDirectives.length > 0)
+            return true;
+        return this.rowDetails ? this.rowDetails.length > 0 : false;
+    }
+    pkDgLoading = false;
+    items = [];
+    filterValues = {};
+    pkDgRefresh = new EventEmitter();
+    filterChange = new EventEmitter();
+    displayedItems = [];
+    displayedItemsVersion = 0;
+    expandedRows = new Set();
+    sortColumn = null;
+    sortDirection = null;
+    activeFilterCol = null;
+    activeFilterHeader = '';
+    filterPopupPos = { top: 0, left: 0 };
+    // Column resize
+    columnWidths = [];
+    _resizingIdx = -1;
+    _resizeStartX = 0;
+    _resizeStartWidth = 0;
+    _resizeMoveRef = (e) => this._onResizeMove(e);
+    _resizeEndRef = () => this._onResizeEnd();
+    get totalWidth() {
+        const sum = this.columnWidths.reduce((acc, w) => acc + w, 0);
+        return sum + (this.hasExpandCol ? 32 : 0);
+    }
+    _initColumnWidths() {
+        const cols = this.columns ? this.columns.toArray() : [];
+        this.columnWidths = cols.map(c => c.widthPx ?? 120);
+    }
+    onDocumentClick() {
+        this.activeFilterCol = null;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterContentInit() {
+        // Listen to pagination changes first
+        if (this.pagination) {
+            this.pagination.pkDgPageChange.subscribe(() => this.updateDisplayedItems());
+            this.pagination.pkDgPageSizeChange.subscribe(() => this.updateDisplayedItems());
+        }
+        // Update displayed items after pagination is set up
+        this.updateDisplayedItems();
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.updateDisplayedItems();
+        }
+        if (changes['filterValues']) {
+            this.updateDisplayedItems();
+        }
+    }
+    ngAfterViewInit() {
+        // Force change detection after columns are fully initialized
+        // Also re-update displayed items to ensure pagination is initialized
+        setTimeout(() => {
+            if (this.pagination) {
+                this.pagination.totalItems = this.items.length;
+                this.pagination.updatePagination();
+            }
+            this._initColumnWidths();
+            this.updateDisplayedItems();
+        }, 0);
+    }
+    updateDisplayedItems() {
+        // If no items, set empty array
+        if (!this.items || this.items.length === 0) {
+            this.displayedItems = [];
+            return;
+        }
+        let result = [...this.items];
+        // Apply column filters
+        const filters = this.filterValues || {};
+        const activeFilterKeys = Object.keys(filters).filter((key) => {
+            const value = filters[key];
+            return value !== undefined && value !== null && `${value}`.trim() !== '';
+        });
+        if (activeFilterKeys.length > 0) {
+            result = result.filter((row) => {
+                return activeFilterKeys.every((key) => {
+                    const raw = row?.[key];
+                    const source = raw === undefined || raw === null ? '' : `${raw}`;
+                    const target = `${filters[key]}`.trim();
+                    return source.toLowerCase().includes(target.toLowerCase());
+                });
+            });
+        }
+        // Keep pagination counts in sync with filtered result
+        if (this.pagination) {
+            this.pagination.totalItems = result.length;
+            if (this.pagination.currentPage > this.pagination.totalPages && this.pagination.totalPages > 0) {
+                this.pagination.currentPage = this.pagination.totalPages;
+            }
+            if (this.pagination.currentPage < 1) {
+                this.pagination.currentPage = 1;
+            }
+            this.pagination.updatePagination();
+        }
+        // Apply sorting
+        if (this.sortColumn && this.sortDirection) {
+            result.sort((a, b) => {
+                const aVal = a[this.sortColumn];
+                const bVal = b[this.sortColumn];
+                if (aVal == null)
+                    return 1;
+                if (bVal == null)
+                    return -1;
+                if (typeof aVal === 'string') {
+                    const comparison = aVal.localeCompare(bVal);
+                    return this.sortDirection === 'asc' ? comparison : -comparison;
+                }
+                if (aVal < bVal)
+                    return this.sortDirection === 'asc' ? -1 : 1;
+                if (aVal > bVal)
+                    return this.sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        // Apply pagination
+        if (this.pagination) {
+            const start = this.pagination.firstItem;
+            const end = this.pagination.lastItem;
+            result = result.slice(start, end);
+        }
+        this.displayedItems = result;
+        this.displayedItemsVersion++;
+    }
+    onSort(field) {
+        if (this.sortColumn === field) {
+            if (this.sortDirection === 'asc') {
+                this.sortDirection = 'desc';
+            }
+            else if (this.sortDirection === 'desc') {
+                this.sortColumn = null;
+                this.sortDirection = null;
+            }
+            else {
+                this.sortDirection = 'asc';
+            }
+        }
+        else {
+            this.sortColumn = field;
+            this.sortDirection = 'asc';
+        }
+        this.updateDisplayedItems();
+    }
+    getSortIcon(field) {
+        if (this.sortColumn !== field)
+            return '';
+        return this.sortDirection === 'asc' ? '▲' : '▼';
+    }
+    toggleRowExpansion(row) {
+        if (this.expandedRows.has(row)) {
+            this.expandedRows.delete(row);
+        }
+        else {
+            this.expandedRows.add(row);
+        }
+    }
+    isRowExpanded(row) {
+        return this.expandedRows.has(row);
+    }
+    openFilter(key, event, headerText = '') {
+        event.stopPropagation();
+        if (this.activeFilterCol === key) {
+            this.activeFilterCol = null;
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        const popupWidth = 180;
+        const margin = 8;
+        let left = rect.left;
+        if (left + popupWidth + margin > window.innerWidth) {
+            left = rect.right - popupWidth;
+        }
+        if (left < margin) {
+            left = margin;
+        }
+        this.filterPopupPos = { top: rect.bottom + 4, left };
+        this.activeFilterHeader = headerText;
+        this.activeFilterCol = key;
+    }
+    onFilterInput(key, event) {
+        const value = event.target.value;
+        this.filterValues = { ...this.filterValues, [key]: value };
+        if (this.pagination) {
+            this.pagination.currentPage = 1;
+            this.pagination.updatePagination();
+        }
+        this.updateDisplayedItems();
+        this.filterChange.emit({ key, value });
+    }
+    // ── Column resize ───────────────────────────────────────────────
+    startResize(colIdx, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._resizingIdx = colIdx;
+        this._resizeStartX = event.clientX;
+        this._resizeStartWidth = this.columnWidths[colIdx];
+        document.addEventListener('mousemove', this._resizeMoveRef);
+        document.addEventListener('mouseup', this._resizeEndRef);
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+    }
+    _onResizeMove(event) {
+        if (this._resizingIdx < 0)
+            return;
+        const delta = event.clientX - this._resizeStartX;
+        this.columnWidths[this._resizingIdx] = Math.max(40, this._resizeStartWidth + delta);
+    }
+    _onResizeEnd() {
+        this._resizingIdx = -1;
+        document.removeEventListener('mousemove', this._resizeMoveRef);
+        document.removeEventListener('mouseup', this._resizeEndRef);
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+    }
+    ngOnDestroy() {
+        this._onResizeEnd();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatagridComponent, isStandalone: false, selector: "pk-datagrid", inputs: { pkDgLoading: "pkDgLoading", items: "items", filterValues: "filterValues" }, outputs: { pkDgRefresh: "pkDgRefresh", filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, queries: [{ propertyName: "pagination", first: true, predicate: PkDgPaginationComponent, descendants: true }, { propertyName: "columns", predicate: PkDgColumnComponent }, { propertyName: "rowDetails", predicate: PkDgRowDetailComponent, descendants: true }, { propertyName: "expandDirectives", predicate: PkIfExpandedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgField; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgField) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgField\"\n                    (click)=\"onSort(column.pkDgField)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      iconSet=\"material-symbols\"\n                      [name]=\"sortColumn === column.pkDgField ? (sortDirection === 'asc' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : 'unfold_more'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilterKey) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilterKey]\"\n                    (click)=\"openFilter(column.pkDgFilterKey, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilterKey && activeFilterCol === column.pkDgFilterKey) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilterKey] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilterKey, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-row\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-detail,.pk-datagrid tbody tr.pk-dg-row-detail:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-detail td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}\n"], dependencies: [{ 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: PkDatagridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-datagrid', standalone: false, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgField; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgField) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgField\"\n                    (click)=\"onSort(column.pkDgField)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      iconSet=\"material-symbols\"\n                      [name]=\"sortColumn === column.pkDgField ? (sortDirection === 'asc' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : 'unfold_more'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilterKey) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilterKey]\"\n                    (click)=\"openFilter(column.pkDgFilterKey, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilterKey && activeFilterCol === column.pkDgFilterKey) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilterKey] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilterKey, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-row\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-detail,.pk-datagrid tbody tr.pk-dg-row-detail:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-detail td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
+                type: ContentChildren,
+                args: [PkDgColumnComponent]
+            }], pagination: [{
+                type: ContentChild,
+                args: [PkDgPaginationComponent]
+            }], rowDetails: [{
+                type: ContentChildren,
+                args: [PkDgRowDetailComponent, { descendants: true }]
+            }], expandDirectives: [{
+                type: ContentChildren,
+                args: [PkIfExpandedDirective, { descendants: true }]
+            }], pkDgLoading: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], filterValues: [{
+                type: Input
+            }], pkDgRefresh: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
+class PkDgCellComponent {
+    set nowrap(value) {
+        this._nowrap = value;
+    }
+    get nowrap() { return this._nowrap; }
+    _nowrap = true;
+    tdStyle = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgCellComponent, isStandalone: false, selector: "pk-dg-cell", inputs: { nowrap: "nowrap", tdStyle: "tdStyle" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', isInline: true, styles: [":host{display:contents}:host td{padding:8px;color:#333;border:1px solid #e8e8e8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host td.wrap{white-space:normal;overflow:visible;text-overflow:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-cell', template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', standalone: false, host: {
+                        'style': 'display: contents'
+                    }, styles: [":host{display:contents}:host td{padding:8px;color:#333;border:1px solid #e8e8e8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host td.wrap{white-space:normal;overflow:visible;text-overflow:unset}\n"] }]
+        }], propDecorators: { nowrap: [{
+                type: Input
+            }], tdStyle: [{
+                type: Input
+            }] } });
+
+class PkDgFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgFooterComponent, isStandalone: false, selector: "pk-dg-footer", ngImport: i0, template: '<div class="pk-dg-footer"><ng-content></ng-content></div>', isInline: true, styles: [".pk-dg-footer{border-top:2px solid #e0e0e0;background:#fafafa}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-footer', template: '<div class="pk-dg-footer"><ng-content></ng-content></div>', standalone: false, styles: [".pk-dg-footer{border-top:2px solid #e0e0e0;background:#fafafa}\n"] }]
+        }] });
+
+class PkDatagridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, declarations: [PkDatagridComponent,
+            PkDgColumnComponent,
+            PkDgRowComponent,
+            PkDgCellComponent,
+            PkDgFooterComponent,
+            PkDgPaginationComponent,
+            PkDgPageSizeComponent,
+            PkDgRowDetailComponent,
+            PkDgItemsDirective,
+            PkIfExpandedDirective,
+            NowrapDirective], imports: [CommonModule,
+            FormsModule,
+            PkIcon], exports: [PkDatagridComponent,
+            PkDgColumnComponent,
+            PkDgRowComponent,
+            PkDgCellComponent,
+            PkDgFooterComponent,
+            PkDgPaginationComponent,
+            PkDgPageSizeComponent,
+            PkDgRowDetailComponent,
+            PkDgItemsDirective,
+            PkIfExpandedDirective,
+            NowrapDirective,
+            PkIcon] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, imports: [CommonModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PkDatagridComponent,
+                        PkDgColumnComponent,
+                        PkDgRowComponent,
+                        PkDgCellComponent,
+                        PkDgFooterComponent,
+                        PkDgPaginationComponent,
+                        PkDgPageSizeComponent,
+                        PkDgRowDetailComponent,
+                        PkDgItemsDirective,
+                        PkIfExpandedDirective,
+                        NowrapDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PkIcon
+                    ],
+                    exports: [
+                        PkDatagridComponent,
+                        PkDgColumnComponent,
+                        PkDgRowComponent,
+                        PkDgCellComponent,
+                        PkDgFooterComponent,
+                        PkDgPaginationComponent,
+                        PkDgPageSizeComponent,
+                        PkDgRowDetailComponent,
+                        PkDgItemsDirective,
+                        PkIfExpandedDirective,
+                        NowrapDirective,
+                        PkIcon
+                    ]
+                }]
+        }] });
+
+class DatepickerService {
+    activeDatepicker = new Subject();
+    // Notify when a datepicker is opened
+    openDatepicker(component) {
+        this.activeDatepicker.next(component);
+    }
+    // Subscribe to know when another datepicker opens
+    getActiveDatepicker() {
+        return this.activeDatepicker.asObservable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatepickerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatepickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class HolidayService {
+    constructor() { }
+    // Mock for testing
+    getHolidays(year) {
+        const mockHolidays = [
+            { date: new Date(2025, 0, 1), title: "วันขึ้นปีใหม่" },
+            { date: new Date(2025, 3, 13), title: "วันสงกรานต์" },
+            { date: new Date(2025, 3, 14), title: "วันสงกรานต์" },
+            { date: new Date(2025, 3, 15), title: "ชดเชยวันสงกรานต์" },
+            { date: new Date(2025, 3, 16), title: "ชดเชยวันสงกรานต์" },
+            { date: new Date(2025, 11, 25), title: "วันคริสต์มาส" }
+        ].filter(h => h.date.getFullYear() === year);
+        return of(mockHolidays);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HolidayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HolidayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HolidayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+  pk-datepicker เป็น component เพื่อใช้แทนการ input type="date"
+
+  การใช้งาน:
+    <pk-datepicker [..] ..></pk-datepicker>
+
+  input parameter:
+    disabled: true | false (default false) - กรณีไม่ต้องการให้เลือกวันที่
+    setNull: true | false (default true) - กรณีไม่ต้องการให้เลือกวันที่ ให้ set เป็น null
+    dateInput: true | false (default true) - กรณีต้องการให้ป้อนตัวเลขวันที่ได้
+    locale: TH | EN (default TH)
+    startOfWeek: 'monday' | 'sunday' = 'monday'
+    minDate: Date | null - กำหนดช่วงวันที่ที่สามารถเลือกได้
+    maxDate: Date | null - กำหนดช่วงวันที่ที่สามารถเลือกได้
+    [(ngModel)]="dateInput: Date" - กำหนดค่าเริ่มต้นของวันที่
+    style= "width: 140px;"
+
+  Output
+    (onDateChange): Date
+
+  Feature:
+    1.ปีที่เลือกได้ กรณีไม่ได้ระบุ minDate จะเลือกย้อนหลังได้ -20 ปี, หากไม่ได้ระบุ maxDate จะเลือกไปข้างหน้าได้ +10 ปี
+    2.ระบบจะแสดงวันหยุดได้โดยใช้ค่าจาก mainService.getHoliday
+*/
+class PkDatepickerComponent {
+    elementRef;
+    datepickerService;
+    holidayService;
+    disabled = false;
+    setNull = true;
+    dateInput = true;
+    locale = 'TH';
+    minDate = null;
+    maxDate = null;
+    startOfWeek = 'monday';
+    style = null;
+    placeholder = '';
+    onDateChange = new EventEmitter();
+    holidays = [];
+    innerValue = null;
+    isOpen = false;
+    currentMonth = new Date();
+    daysInMonth = [];
+    weekdays = [];
+    months = [];
+    years = [];
+    selectedMonth = new Date().getMonth();
+    selectedYear = new Date().getFullYear();
+    dropdownStyles = {};
+    onChange = () => { };
+    onTouched = () => { };
+    subscription;
+    get localeMode() {
+        return String(this.locale || '').trim().toUpperCase() === 'TH' ? 'TH' : 'EN';
+    }
+    constructor(elementRef, datepickerService, holidayService) {
+        this.elementRef = elementRef;
+        this.datepickerService = datepickerService;
+        this.holidayService = holidayService;
+    }
+    ngOnInit() {
+        this.currentMonth = this.innerValue ? new Date(this.innerValue) : new Date();
+        this.currentMonth.setDate(1);
+        this.adjustCurrentMonthToRange();
+        this.selectedMonth = this.currentMonth.getMonth();
+        this.selectedYear = this.localeMode === 'TH'
+            ? this.currentMonth.getFullYear() + 543
+            : this.currentMonth.getFullYear();
+        this.fetchHolidays(this.currentMonth.getFullYear());
+        this.updateCalendar();
+        this.generateMonths();
+        this.generateYears();
+        this.subscription = this.datepickerService.getActiveDatepicker().subscribe(activeComponent => {
+            if (activeComponent !== this && this.isOpen) {
+                this.isOpen = false;
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    onClickOutside(event) {
+        if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    onWindowResize() {
+        if (this.isOpen) {
+            this.updateDropdownPosition();
+        }
+    }
+    onWindowScroll() {
+        if (this.isOpen) {
+            this.updateDropdownPosition();
+        }
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(val) {
+        if (val !== this.innerValue && this.isDateInRange(val)) {
+            this.innerValue = val;
+            this.onChange(val);
+            this.onDateChange.emit(val);
+            this.currentMonth = new Date(val || new Date());
+            this.currentMonth.setDate(1);
+            this.adjustCurrentMonthToRange();
+            this.selectedMonth = this.currentMonth.getMonth();
+            this.selectedYear = this.localeMode === 'TH'
+                ? this.currentMonth.getFullYear() + 543
+                : this.currentMonth.getFullYear();
+            this.fetchHolidays(this.currentMonth.getFullYear());
+            this.updateCalendar();
+        }
+    }
+    get formattedDate() {
+        if (!this.innerValue)
+            return '';
+        const options = {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        };
+        return this.localeMode === 'TH'
+            ? this.innerValue.toLocaleDateString('th-TH', { ...options, year: 'numeric' })
+            : this.innerValue.toLocaleDateString('en-US', options);
+    }
+    get currentMonthYear() {
+        const options = {
+            month: 'long',
+            year: 'numeric'
+        };
+        return this.localeMode === 'TH'
+            ? this.currentMonth.toLocaleDateString('th-TH', options)
+            : this.currentMonth.toLocaleDateString('en-US', options);
+    }
+    get isTodayDisabled() {
+        return this.disabled || !this.isDateInRange(new Date());
+    }
+    get canGoPrevMonth() {
+        if (this.disabled || !this.minDate)
+            return true;
+        const prevMonth = new Date(this.currentMonth);
+        prevMonth.setMonth(prevMonth.getMonth() - 1);
+        return prevMonth.getTime() >= this.minDate.getTime();
+    }
+    get canGoNextMonth() {
+        if (this.disabled || !this.maxDate)
+            return true;
+        const nextMonth = new Date(this.currentMonth);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth.getTime() <= this.maxDate.getTime();
+    }
+    updateCalendar() {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), 1);
+        if (this.startOfWeek === 'monday') {
+            this.weekdays = this.localeMode === 'TH'
+                ? ['จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส', 'อา']
+                : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        }
+        else {
+            this.weekdays = this.localeMode === 'TH'
+                ? ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส']
+                : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        }
+        this.daysInMonth = [];
+        const firstDayOfMonth = this.currentMonth.getDay();
+        const daysInMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 0).getDate();
+        const startOffset = this.startOfWeek === 'monday' ? (firstDayOfMonth + 6) % 7 : firstDayOfMonth;
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const prevDate = new Date(this.currentMonth);
+            prevDate.setDate(this.currentMonth.getDate() - i - 1);
+            this.daysInMonth.push(prevDate);
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            const newDate = new Date(this.currentMonth);
+            newDate.setDate(i);
+            this.daysInMonth.push(newDate);
+        }
+        const totalCells = Math.ceil((startOffset + daysInMonth) / 7) * 7;
+        for (let i = daysInMonth + 1; this.daysInMonth.length < totalCells; i++) {
+            const nextDate = new Date(this.currentMonth);
+            nextDate.setDate(i);
+            this.daysInMonth.push(nextDate);
+        }
+    }
+    generateMonths() {
+        this.months = Array.from({ length: 12 }, (_, i) => {
+            const date = new Date(2000, i, 1);
+            return {
+                name: date.toLocaleString(this.localeMode === 'TH' ? 'th-TH' : 'en-US', { month: 'long' }),
+                value: i
+            };
+        });
+    }
+    generateYears() {
+        const currentYear = new Date().getFullYear();
+        let minYear;
+        let maxYear;
+        if (this.minDate && this.maxDate) {
+            minYear = this.minDate.getFullYear();
+            maxYear = this.maxDate.getFullYear();
+        }
+        else {
+            minYear = currentYear - 20;
+            maxYear = currentYear + 10;
+        }
+        this.years = [];
+        for (let i = minYear; i <= maxYear; i++) {
+            this.years.push(this.localeMode === 'TH' ? i + 543 : i);
+        }
+    }
+    fetchHolidays(year) {
+        // No adjustment needed, year is already Gregorian
+        this.holidayService.getHolidays(year).subscribe(holidays => {
+            this.holidays = holidays;
+            this.updateCalendar();
+        });
+    }
+    onMonthChange(month) {
+        this.selectedMonth = month;
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), month, 1);
+        this.adjustCurrentMonthToRange();
+        this.selectedYear = this.localeMode === 'TH'
+            ? this.currentMonth.getFullYear() + 543
+            : this.currentMonth.getFullYear();
+        this.fetchHolidays(this.currentMonth.getFullYear());
+    }
+    onYearChange(year) {
+        this.selectedYear = year;
+        const adjustedYear = this.localeMode === 'TH' ? year - 543 : year;
+        this.currentMonth = new Date(adjustedYear, this.currentMonth.getMonth(), 1);
+        this.adjustCurrentMonthToRange();
+        this.fetchHolidays(adjustedYear);
+    }
+    onChangeDate(event) {
+        let inputValue = event.target.value;
+        // แปลงปี พ.ศ. เป็น ค.ศ. ถ้าเป็น locale TH
+        if (this.localeMode === 'TH' && inputValue) {
+            // ตรวจสอบรูปแบบ DD/MM/YYYY (TH format)
+            const thaiDatePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+            const match = inputValue.match(thaiDatePattern);
+            if (match) {
+                const day = match[1];
+                const month = match[2];
+                const year = parseInt(match[3]);
+                // แปลง พ.ศ. เป็น ค.ศ. ถ้าปีมากกว่า 2400
+                if (year > 2400) {
+                    inputValue = `${year - 543}-${month}-${day}`;
+                }
+            }
+        }
+        const date = new Date(inputValue);
+        if (!date || isNaN(date.getTime())) {
+            return;
+        }
+        if (this.isDateInRange(date)) {
+            // this.onDateChange.emit(date);
+            this.value = date;
+            // this.currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+            // this.selectedMonth = this.currentMonth.getMonth();
+            // this.selectedYear = this.locale === 'TH'
+            //   ? this.currentMonth.getFullYear() + 543
+            //   : this.currentMonth.getFullYear();
+            // this.fetchHolidays(this.currentMonth.getFullYear());
+            // this.updateCalendar();
+            this.isOpen = false;
+            this.onTouched();
+        }
+        else {
+            event.target.value = this.formattedDate; // Reset to formatted date if out of range
+        }
+    }
+    resetDate() {
+        this.value = null;
+        this.isOpen = false;
+        this.onTouched();
+    }
+    prevMonth() {
+        if (this.canGoPrevMonth) {
+            this.currentMonth.setMonth(this.currentMonth.getMonth() - 1);
+            this.selectedMonth = this.currentMonth.getMonth();
+            this.selectedYear = this.localeMode === 'TH'
+                ? this.currentMonth.getFullYear() + 543
+                : this.currentMonth.getFullYear();
+            this.adjustCurrentMonthToRange();
+            this.fetchHolidays(this.currentMonth.getFullYear());
+        }
+    }
+    nextMonth() {
+        if (this.canGoNextMonth) {
+            this.currentMonth.setMonth(this.currentMonth.getMonth() + 1);
+            this.selectedMonth = this.currentMonth.getMonth();
+            this.selectedYear = this.localeMode === 'TH'
+                ? this.currentMonth.getFullYear() + 543
+                : this.currentMonth.getFullYear();
+            this.adjustCurrentMonthToRange();
+            this.fetchHolidays(this.currentMonth.getFullYear());
+        }
+    }
+    selectToday() {
+        const today = new Date();
+        if (this.isDateInRange(today)) {
+            this.value = today;
+            this.currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+            this.selectedMonth = this.currentMonth.getMonth();
+            this.selectedYear = this.localeMode === 'TH'
+                ? this.currentMonth.getFullYear() + 543
+                : this.currentMonth.getFullYear();
+            this.fetchHolidays(this.currentMonth.getFullYear());
+            this.updateCalendar();
+            this.isOpen = false;
+            this.onTouched();
+        }
+    }
+    writeValue(value) {
+        if (this.isDateInRange(value)) {
+            this.innerValue = value;
+            if (value) {
+                this.currentMonth = new Date(value.getFullYear(), value.getMonth(), 1);
+            }
+            else {
+                this.currentMonth = new Date();
+                this.currentMonth.setDate(1);
+                this.adjustCurrentMonthToRange();
+            }
+            this.selectedMonth = this.currentMonth.getMonth();
+            this.selectedYear = this.localeMode === 'TH'
+                ? this.currentMonth.getFullYear() + 543
+                : this.currentMonth.getFullYear();
+            this.fetchHolidays(this.currentMonth.getFullYear());
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onDateSelect(date) {
+        if (this.isDateInRange(date)) {
+            this.value = date;
+            this.isOpen = false;
+            this.onTouched();
+        }
+    }
+    togglePicker(event) {
+        if (!this.disabled) {
+            if (!this.isOpen) {
+                this.datepickerService.openDatepicker(this);
+            }
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                setTimeout(() => this.updateDropdownPosition(), 0);
+            }
+            event.stopPropagation();
+        }
+    }
+    updateDropdownPosition() {
+        const inputEl = this.elementRef.nativeElement.querySelector('.datepicker-input');
+        if (!inputEl)
+            return;
+        const rect = inputEl.getBoundingClientRect();
+        const margin = 8;
+        const dropdownWidth = 270;
+        const dropdownHeight = 360;
+        let left = rect.left;
+        let top = rect.bottom + 4;
+        if (left + dropdownWidth + margin > window.innerWidth) {
+            left = window.innerWidth - dropdownWidth - margin;
+        }
+        if (left < margin) {
+            left = margin;
+        }
+        if (top + dropdownHeight + margin > window.innerHeight && rect.top - dropdownHeight > margin) {
+            top = rect.top - dropdownHeight - 4;
+        }
+        if (top < margin) {
+            top = margin;
+        }
+        this.dropdownStyles = {
+            position: 'fixed',
+            top: `${top}px`,
+            left: `${left}px`,
+            zIndex: '2147483647'
+        };
+    }
+    isSelected(date) {
+        return this.innerValue?.toDateString() === date.toDateString();
+    }
+    isCurrentMonth(date) {
+        return date.getMonth() === this.currentMonth.getMonth() &&
+            date.getFullYear() === this.currentMonth.getFullYear();
+    }
+    isDateInRange(date) {
+        if (!date)
+            return true;
+        const time = date.getTime();
+        const minTime = this.minDate
+            ? new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate(), 0, 0, 0, 0).getTime()
+            : null;
+        const maxTime = this.maxDate
+            ? new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate(), 23, 59, 59, 999).getTime()
+            : null;
+        return (minTime === null || time >= minTime) &&
+            (maxTime === null || time <= maxTime);
+    }
+    isMonthDisabled(month) {
+        if (!this.minDate && !this.maxDate)
+            return false;
+        const year = this.localeMode === 'TH' ? this.selectedYear - 543 : this.selectedYear;
+        const startOfMonth = new Date(year, month, 1).getTime();
+        const endOfMonth = new Date(year, month + 1, 0).getTime();
+        const beforeMin = this.minDate ? endOfMonth < this.minDate.getTime() : false;
+        const afterMax = this.maxDate ? startOfMonth > this.maxDate.getTime() : false;
+        return beforeMin || afterMax;
+    }
+    isWeekend(date) {
+        return date.getDay() === 0 || date.getDay() === 6;
+    }
+    isExplicitHoliday(date) {
+        return this.holidays.some(holiday => holiday.date.getFullYear() === date.getFullYear() &&
+            holiday.date.getMonth() === date.getMonth() &&
+            holiday.date.getDate() === date.getDate());
+    }
+    getHolidayTitle(date) {
+        const holiday = this.holidays.find(h => h.date.getFullYear() === date.getFullYear() &&
+            h.date.getMonth() === date.getMonth() &&
+            h.date.getDate() === date.getDate());
+        return holiday ? holiday.title : '';
+    }
+    adjustCurrentMonthToRange() {
+        if (this.minDate && this.currentMonth.getTime() < this.minDate.getTime()) {
+            this.currentMonth = new Date(this.minDate);
+            this.currentMonth.setDate(1);
+        }
+        if (this.maxDate && this.currentMonth.getTime() > this.maxDate.getTime()) {
+            this.currentMonth = new Date(this.maxDate);
+            this.currentMonth.setDate(1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: DatepickerService }, { token: HolidayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatepickerComponent, isStandalone: true, selector: "pk-datepicker", inputs: { disabled: "disabled", setNull: "setNull", dateInput: "dateInput", locale: "locale", minDate: "minDate", maxDate: "maxDate", startOfWeek: "startOfWeek", style: "style", placeholder: "placeholder" }, outputs: { onDateChange: "onDateChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PkDatepickerComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"datepicker-container\" [class.datepicker-container--open]=\"isOpen\">\n  <input type=\"text\" [value]=\"formattedDate\" [disabled]=\"disabled\" [style]=\"style\"\n    [placeholder]=\"placeholder? placeholder : (localeMode === 'TH' ? '\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B' : 'DD/MM/YYYY')\"\n    [title]=\"placeholder? placeholder : (localeMode === 'TH' ? 'Click \u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48' : 'Click for select date')\"\n    (click)=\"togglePicker($event)\" class=\"datepicker-input\" [readonly]=\"!dateInput\" (change)=\"onChangeDate($event)\" />\n  @if (isOpen) {\n    <div class=\"datepicker-dropdown\" [ngStyle]=\"dropdownStyles\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button class=\"nav-btn\" (click)=\"prevMonth()\" [disabled]=\"!canGoPrevMonth\">\n            << </button>\n              <select [(ngModel)]=\"selectedMonth\" (ngModelChange)=\"onMonthChange($event)\" [disabled]=\"disabled\">\n                @for (month of months; track month.value) {\n                  <option [value]=\"month.value\" [disabled]=\"isMonthDisabled(month.value)\">{{ month.name }}</option>\n                }\n              </select>\n              <select [(ngModel)]=\"selectedYear\" (ngModelChange)=\"onYearChange($event)\" [disabled]=\"disabled\">\n                @for (year of years; track year) {\n                  <option [value]=\"year\">{{ year }}</option>\n                }\n              </select>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\" [disabled]=\"!canGoNextMonth\">>></button>\n        </div>\n\n        <div class=\"month-year-display\">{{ currentMonthYear }}</div>\n\n        <div class=\"weekdays\">\n          @for (weekday of weekdays; track weekday) {\n            <div class=\"weekday\">{{ weekday }}</div>\n          }\n        </div>\n\n        <div class=\"days\">\n          @for (day of daysInMonth; track day) {\n            <button\n              [class.selected]=\"isSelected(day)\"\n              [class.other-month]=\"!isCurrentMonth(day)\"\n              [class.weekend]=\"isWeekend(day)\"\n              [class.holiday]=\"isExplicitHoliday(day)\"\n              [disabled]=\"disabled || !isDateInRange(day)\"\n              [title]=\"isExplicitHoliday(day) ? getHolidayTitle(day) : ''\"\n              (click)=\"onDateSelect(day)\">\n              {{ day.getDate() }}\n            </button>\n          }\n        </div>\n\n        <div class=\"calendar-footer\">\n          <button class=\"today-btn\" (click)=\"selectToday()\" [disabled]=\"isTodayDisabled\">\n            {{ localeMode === 'TH' ? '\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49' : 'Today' }}\n          </button>\n          @if (setNull) {\n            <button class=\"reset-btn\" (click)=\"resetDate()\" [disabled]=\"disabled\">\n              {{ localeMode === 'TH' ? '\u0E25\u0E1A' : 'Clear' }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: [".datepicker-container{width:auto;min-width:160px;position:relative;display:inline-block;z-index:auto}.datepicker-container--open{z-index:9500}.datepicker-input{width:100%;min-width:160px;height:35px;padding:8px 12px;border:1px solid #777777;border-radius:4px;cursor:pointer;box-sizing:border-box}.datepicker-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.datepicker-dropdown{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a}.calendar{padding:10px;min-width:250px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:5px}.calendar-header select{padding:5px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;flex:1;font-size:14px;height:30px;box-sizing:border-box}.calendar-header select:disabled{background-color:#f5f5f5;cursor:not-allowed}.calendar-header select option:disabled{color:#999;background-color:#f5f5f5}.nav-btn{padding:3px 8px;font-size:14px;height:30px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;box-sizing:border-box}.nav-btn:hover:not(:disabled){background:#e0e0e0}.nav-btn:disabled{cursor:not-allowed;opacity:.6}.month-year-display{text-align:center;font-size:14px;font-weight:700;margin-bottom:5px;color:#333;background-color:#d3d3d3;padding:5px;border-radius:4px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}.weekday{text-align:center;font-size:12px;color:#666}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px}.days button{padding:8px;border:none!important;background:none;cursor:pointer;border-radius:50%}.days button:hover:not(.selected):not(:disabled){background:#f0f0f0}.days button.selected{background:#007bff;color:#fff}.days button.other-month{color:#999}.days button.weekend:not(.selected):not(:disabled){color:#e54a02}.days button.holiday:not(.selected):not(:disabled){color:red;font-weight:700}.days button:disabled{cursor:not-allowed;opacity:.6;color:#ccc}.calendar-footer{display:flex;justify-content:center;gap:2px}.today-btn{padding:5px 10px;font-size:12px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer}.today-btn:hover:not(:disabled){background:#e0e0e0}.today-btn:disabled{cursor:not-allowed;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-datepicker', imports: [FormsModule, NgStyle], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PkDatepickerComponent),
+                            multi: true
+                        }
+                    ], standalone: true, template: "<div class=\"datepicker-container\" [class.datepicker-container--open]=\"isOpen\">\n  <input type=\"text\" [value]=\"formattedDate\" [disabled]=\"disabled\" [style]=\"style\"\n    [placeholder]=\"placeholder? placeholder : (localeMode === 'TH' ? '\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B' : 'DD/MM/YYYY')\"\n    [title]=\"placeholder? placeholder : (localeMode === 'TH' ? 'Click \u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48' : 'Click for select date')\"\n    (click)=\"togglePicker($event)\" class=\"datepicker-input\" [readonly]=\"!dateInput\" (change)=\"onChangeDate($event)\" />\n  @if (isOpen) {\n    <div class=\"datepicker-dropdown\" [ngStyle]=\"dropdownStyles\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button class=\"nav-btn\" (click)=\"prevMonth()\" [disabled]=\"!canGoPrevMonth\">\n            << </button>\n              <select [(ngModel)]=\"selectedMonth\" (ngModelChange)=\"onMonthChange($event)\" [disabled]=\"disabled\">\n                @for (month of months; track month.value) {\n                  <option [value]=\"month.value\" [disabled]=\"isMonthDisabled(month.value)\">{{ month.name }}</option>\n                }\n              </select>\n              <select [(ngModel)]=\"selectedYear\" (ngModelChange)=\"onYearChange($event)\" [disabled]=\"disabled\">\n                @for (year of years; track year) {\n                  <option [value]=\"year\">{{ year }}</option>\n                }\n              </select>\n              <button class=\"nav-btn\" (click)=\"nextMonth()\" [disabled]=\"!canGoNextMonth\">>></button>\n        </div>\n\n        <div class=\"month-year-display\">{{ currentMonthYear }}</div>\n\n        <div class=\"weekdays\">\n          @for (weekday of weekdays; track weekday) {\n            <div class=\"weekday\">{{ weekday }}</div>\n          }\n        </div>\n\n        <div class=\"days\">\n          @for (day of daysInMonth; track day) {\n            <button\n              [class.selected]=\"isSelected(day)\"\n              [class.other-month]=\"!isCurrentMonth(day)\"\n              [class.weekend]=\"isWeekend(day)\"\n              [class.holiday]=\"isExplicitHoliday(day)\"\n              [disabled]=\"disabled || !isDateInRange(day)\"\n              [title]=\"isExplicitHoliday(day) ? getHolidayTitle(day) : ''\"\n              (click)=\"onDateSelect(day)\">\n              {{ day.getDate() }}\n            </button>\n          }\n        </div>\n\n        <div class=\"calendar-footer\">\n          <button class=\"today-btn\" (click)=\"selectToday()\" [disabled]=\"isTodayDisabled\">\n            {{ localeMode === 'TH' ? '\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49' : 'Today' }}\n          </button>\n          @if (setNull) {\n            <button class=\"reset-btn\" (click)=\"resetDate()\" [disabled]=\"disabled\">\n              {{ localeMode === 'TH' ? '\u0E25\u0E1A' : 'Clear' }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: [".datepicker-container{width:auto;min-width:160px;position:relative;display:inline-block;z-index:auto}.datepicker-container--open{z-index:9500}.datepicker-input{width:100%;min-width:160px;height:35px;padding:8px 12px;border:1px solid #777777;border-radius:4px;cursor:pointer;box-sizing:border-box}.datepicker-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.datepicker-dropdown{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a}.calendar{padding:10px;min-width:250px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:5px}.calendar-header select{padding:5px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;flex:1;font-size:14px;height:30px;box-sizing:border-box}.calendar-header select:disabled{background-color:#f5f5f5;cursor:not-allowed}.calendar-header select option:disabled{color:#999;background-color:#f5f5f5}.nav-btn{padding:3px 8px;font-size:14px;height:30px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;box-sizing:border-box}.nav-btn:hover:not(:disabled){background:#e0e0e0}.nav-btn:disabled{cursor:not-allowed;opacity:.6}.month-year-display{text-align:center;font-size:14px;font-weight:700;margin-bottom:5px;color:#333;background-color:#d3d3d3;padding:5px;border-radius:4px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}.weekday{text-align:center;font-size:12px;color:#666}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px}.days button{padding:8px;border:none!important;background:none;cursor:pointer;border-radius:50%}.days button:hover:not(.selected):not(:disabled){background:#f0f0f0}.days button.selected{background:#007bff;color:#fff}.days button.other-month{color:#999}.days button.weekend:not(.selected):not(:disabled){color:#e54a02}.days button.holiday:not(.selected):not(:disabled){color:red;font-weight:700}.days button:disabled{cursor:not-allowed;opacity:.6;color:#ccc}.calendar-footer{display:flex;justify-content:center;gap:2px}.today-btn{padding:5px 10px;font-size:12px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer}.today-btn:hover:not(:disabled){background:#e0e0e0}.today-btn:disabled{cursor:not-allowed;opacity:.6}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DatepickerService }, { type: HolidayService }], propDecorators: { disabled: [{
+                type: Input
+            }], setNull: [{
+                type: Input
+            }], dateInput: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], startOfWeek: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], onDateChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+class PkProgressComponent {
+    config = input({
+        type: 'line',
+        percent: 0,
+        status: 'normal',
+        showInfo: true,
+        strokeWidth: 8,
+        striped: false,
+        animated: false,
+        indeterminate: false,
+    }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    // Circle calculations
+    circleSize = computed(() => {
+        const strokeWidth = this.config().strokeWidth || 6;
+        return 120; // Fixed size for circle
+    }, ...(ngDevMode ? [{ debugName: "circleSize" }] : /* istanbul ignore next */ []));
+    radius = computed(() => {
+        const size = this.circleSize();
+        const strokeWidth = this.config().strokeWidth || 6;
+        return (size - strokeWidth) / 2;
+    }, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => {
+        return 2 * Math.PI * this.radius();
+    }, ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    offset = computed(() => {
+        const percent = this.config().percent || 0;
+        return this.circumference() * (1 - percent / 100);
+    }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkProgressComponent, isStandalone: true, selector: "pk-progress", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (config().type === 'circle') {
+      <!-- Circle Progress -->
+      <div class="pk-progress-circle" [style.width.px]="circleSize()" [style.height.px]="circleSize()">
+        <svg [attr.viewBox]="'0 0 ' + circleSize() + ' ' + circleSize()">
+          <!-- Background circle -->
+          <circle
+            class="pk-progress-circle-bg"
+            [attr.cx]="circleSize() / 2"
+            [attr.cy]="circleSize() / 2"
+            [attr.r]="radius()"
+            [attr.stroke-width]="config().strokeWidth || 6"
+            fill="none" />
+          
+          <!-- Progress circle -->
+          <circle
+            class="pk-progress-circle-path"
+            [class.pk-progress-success]="config().status === 'success'"
+            [class.pk-progress-error]="config().status === 'error'"
+            [class.pk-progress-warning]="config().status === 'warning'"
+            [attr.cx]="circleSize() / 2"
+            [attr.cy]="circleSize() / 2"
+            [attr.r]="radius()"
+            [attr.stroke-width]="config().strokeWidth || 6"
+            [attr.stroke-dasharray]="circumference()"
+            [attr.stroke-dashoffset]="offset()"
+            [style.stroke]="config().color || null"
+            fill="none" />
+        </svg>
+        
+        @if (config().showInfo) {
+          <div class="pk-progress-circle-text">
+            @if (config().status === 'success') {
+              <span class="pk-progress-icon">✓</span>
+            } @else if (config().status === 'error') {
+              <span class="pk-progress-icon">✕</span>
+            } @else {
+              <span>{{ config().percent }}%</span>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <!-- Line Progress -->
+      <div class="pk-progress-line">
+        @if (config().label) {
+          <div class="pk-progress-label">{{ config().label }}</div>
+        }
+        
+        <div class="pk-progress-outer">
+          <div 
+            class="pk-progress-inner"
+            [class.pk-progress-striped]="config().striped"
+            [class.pk-progress-animated]="config().animated"
+            [class.pk-progress-indeterminate]="config().indeterminate"
+            [style.height.px]="config().strokeWidth || 8">
+            <div 
+              class="pk-progress-bg"
+              [class.pk-progress-success]="config().status === 'success'"
+              [class.pk-progress-error]="config().status === 'error'"
+              [class.pk-progress-warning]="config().status === 'warning'"
+              [style.width.%]="config().indeterminate ? 30 : config().percent"
+              [style.background]="config().color || null">
+            </div>
+          </div>
+        </div>
+        
+        @if (config().showInfo) {
+          <div class="pk-progress-text">
+            @if (config().status === 'success') {
+              <span class="pk-progress-icon">✓</span>
+            } @else if (config().status === 'error') {
+              <span class="pk-progress-icon">✕</span>
+            } @else {
+              {{ config().percent }}%
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".pk-progress-line{display:flex;align-items:center;gap:.5rem}.pk-progress-label{flex-shrink:0;color:#565656;font-size:.875rem;font-weight:500}.pk-progress-outer{flex:1;background:#e8e8e8;border-radius:100px;overflow:hidden}.pk-progress-inner{width:100%;position:relative;background:transparent;border-radius:100px;overflow:hidden}.pk-progress-bg{height:100%;background:#0072a3;border-radius:100px;transition:width .3s ease}.pk-progress-success{background:#00a651!important}.pk-progress-error{background:#e62700!important}.pk-progress-warning{background:#ffc600!important}.pk-progress-striped .pk-progress-bg{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.pk-progress-animated .pk-progress-bg{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}.pk-progress-indeterminate .pk-progress-bg{animation:progress-indeterminate 2s linear infinite}@keyframes progress-indeterminate{0%{margin-left:0}50%{margin-left:70%}to{margin-left:0}}.pk-progress-text{flex-shrink:0;min-width:2.5rem;text-align:right;color:#565656;font-size:.875rem}.pk-progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center}.pk-progress-circle svg{transform:rotate(-90deg)}.pk-progress-circle-bg{stroke:#e8e8e8}.pk-progress-circle-path{stroke:#0072a3;stroke-linecap:round;transition:stroke-dashoffset .3s ease}.pk-progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#565656;font-size:1rem;font-weight:600}.pk-progress-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.75rem;font-weight:700}.pk-progress-success+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-success .pk-progress-icon{color:#fff;background:#00a651}.pk-progress-error+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-error .pk-progress-icon{color:#fff;background:#e62700}.pk-progress-warning+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-warning .pk-progress-icon{color:#fff;background:#ffc600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-progress', standalone: true, imports: [CommonModule], template: `
+    @if (config().type === 'circle') {
+      <!-- Circle Progress -->
+      <div class="pk-progress-circle" [style.width.px]="circleSize()" [style.height.px]="circleSize()">
+        <svg [attr.viewBox]="'0 0 ' + circleSize() + ' ' + circleSize()">
+          <!-- Background circle -->
+          <circle
+            class="pk-progress-circle-bg"
+            [attr.cx]="circleSize() / 2"
+            [attr.cy]="circleSize() / 2"
+            [attr.r]="radius()"
+            [attr.stroke-width]="config().strokeWidth || 6"
+            fill="none" />
+          
+          <!-- Progress circle -->
+          <circle
+            class="pk-progress-circle-path"
+            [class.pk-progress-success]="config().status === 'success'"
+            [class.pk-progress-error]="config().status === 'error'"
+            [class.pk-progress-warning]="config().status === 'warning'"
+            [attr.cx]="circleSize() / 2"
+            [attr.cy]="circleSize() / 2"
+            [attr.r]="radius()"
+            [attr.stroke-width]="config().strokeWidth || 6"
+            [attr.stroke-dasharray]="circumference()"
+            [attr.stroke-dashoffset]="offset()"
+            [style.stroke]="config().color || null"
+            fill="none" />
+        </svg>
+        
+        @if (config().showInfo) {
+          <div class="pk-progress-circle-text">
+            @if (config().status === 'success') {
+              <span class="pk-progress-icon">✓</span>
+            } @else if (config().status === 'error') {
+              <span class="pk-progress-icon">✕</span>
+            } @else {
+              <span>{{ config().percent }}%</span>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <!-- Line Progress -->
+      <div class="pk-progress-line">
+        @if (config().label) {
+          <div class="pk-progress-label">{{ config().label }}</div>
+        }
+        
+        <div class="pk-progress-outer">
+          <div 
+            class="pk-progress-inner"
+            [class.pk-progress-striped]="config().striped"
+            [class.pk-progress-animated]="config().animated"
+            [class.pk-progress-indeterminate]="config().indeterminate"
+            [style.height.px]="config().strokeWidth || 8">
+            <div 
+              class="pk-progress-bg"
+              [class.pk-progress-success]="config().status === 'success'"
+              [class.pk-progress-error]="config().status === 'error'"
+              [class.pk-progress-warning]="config().status === 'warning'"
+              [style.width.%]="config().indeterminate ? 30 : config().percent"
+              [style.background]="config().color || null">
+            </div>
+          </div>
+        </div>
+        
+        @if (config().showInfo) {
+          <div class="pk-progress-text">
+            @if (config().status === 'success') {
+              <span class="pk-progress-icon">✓</span>
+            } @else if (config().status === 'error') {
+              <span class="pk-progress-icon">✕</span>
+            } @else {
+              {{ config().percent }}%
+            }
+          </div>
+        }
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".pk-progress-line{display:flex;align-items:center;gap:.5rem}.pk-progress-label{flex-shrink:0;color:#565656;font-size:.875rem;font-weight:500}.pk-progress-outer{flex:1;background:#e8e8e8;border-radius:100px;overflow:hidden}.pk-progress-inner{width:100%;position:relative;background:transparent;border-radius:100px;overflow:hidden}.pk-progress-bg{height:100%;background:#0072a3;border-radius:100px;transition:width .3s ease}.pk-progress-success{background:#00a651!important}.pk-progress-error{background:#e62700!important}.pk-progress-warning{background:#ffc600!important}.pk-progress-striped .pk-progress-bg{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.pk-progress-animated .pk-progress-bg{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}.pk-progress-indeterminate .pk-progress-bg{animation:progress-indeterminate 2s linear infinite}@keyframes progress-indeterminate{0%{margin-left:0}50%{margin-left:70%}to{margin-left:0}}.pk-progress-text{flex-shrink:0;min-width:2.5rem;text-align:right;color:#565656;font-size:.875rem}.pk-progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center}.pk-progress-circle svg{transform:rotate(-90deg)}.pk-progress-circle-bg{stroke:#e8e8e8}.pk-progress-circle-path{stroke:#0072a3;stroke-linecap:round;transition:stroke-dashoffset .3s ease}.pk-progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#565656;font-size:1rem;font-weight:600}.pk-progress-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.75rem;font-weight:700}.pk-progress-success+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-success .pk-progress-icon{color:#fff;background:#00a651}.pk-progress-error+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-error .pk-progress-icon{color:#fff;background:#e62700}.pk-progress-warning+.pk-progress-text .pk-progress-icon,.pk-progress-circle.pk-progress-warning .pk-progress-icon{color:#fff;background:#ffc600}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+
+class PkTreeviewNodeComponent {
+    nodes = [];
+    selection = 'none';
+    nodeToggled = new EventEmitter();
+    selectionChanged = new EventEmitter();
+    toggleExpand(node, e) {
+        e.stopPropagation();
+        node._expanded = !node._expanded;
+        this.nodeToggled.emit(node);
+    }
+    onRowClick(node, e) {
+        if (this.selection === 'none') {
+            this.toggleExpand(node, e);
+        }
+        else {
+            this.onCheckClick(node, e);
+        }
+    }
+    onCheckClick(node, e) {
+        e.stopPropagation();
+        if (this.selection === 'single') {
+            this.clearAllSelection(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));
+    }
+    clearAllSelection(nodes) {
+        for (const n of nodes) {
+            n._selected = false;
+            if (n.children)
+                this.clearAllSelection(n.children);
+        }
+    }
+    setNodeAndChildren(node, selected) {
+        node._selected = selected;
+        node._indeterminate = false;
+        if (node.children) {
+            for (const c of node.children)
+                this.setNodeAndChildren(c, selected);
+        }
+    }
+    getSelected(nodes) {
+        const result = [];
+        for (const n of nodes) {
+            if (n._selected)
+                result.push(n);
+            if (n.children)
+                result.push(...this.getSelected(n.children));
+        }
+        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: `
+    <ul class="pk-tree-list">
+      @for (node of nodes; track node) {
+        <li class="pk-tree-item">
+          <!-- Row -->
+          <div class="pk-tree-row"
+            [class.pk-tree-row--selected]="node._selected"
+            (click)="onRowClick(node, $event)">
+            <!-- Expand toggle -->
+            <span class="pk-tree-toggle"
+              [style.visibility]="node.children?.length ? 'visible' : 'hidden'"
+              (click)="toggleExpand(node, $event)">
+              <pk-icon
+                iconSet="material-symbols"
+                [name]="node._expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'"
+                [size]="14"
+                color="#64748b">
+              </pk-icon>
+            </span>
+            <!-- Checkbox (single = radio style, multi = checkbox) -->
+            @if (selection !== 'none') {
+              <span class="pk-tree-check" (click)="onCheckClick(node, $event)">
+                <!-- multi: tri-state checkbox -->
+                @if (selection === 'multi') {
+                  <span class="pk-tree-cb"
+                    [class.pk-tree-cb--checked]="node._selected"
+                    [class.pk-tree-cb--indeterminate]="node._indeterminate && !node._selected">
+                    @if (node._selected) {
+                      <pk-icon iconSet="material-symbols" name="check" [size]="11" color="#fff"></pk-icon>
+                    }
+                    @if (node._indeterminate && !node._selected) {
+                      <span class="pk-tree-cb-dash"></span>
+                    }
+                  </span>
+                }
+                <!-- single: radio dot -->
+                @if (selection === 'single') {
+                  <span class="pk-tree-radio" [class.pk-tree-radio--checked]="node._selected"></span>
+                }
+              </span>
+            }
+            <!-- Icon -->
+            @if (node.icon) {
+              <span class="pk-tree-icon">
+                <pk-icon [name]="node.icon" [size]="16" color="#64748b"></pk-icon>
+              </span>
+            }
+            <!-- Label -->
+            <span class="pk-tree-label">
+              @if (node.routerLink) {
+                <a
+                  [routerLink]="node.routerLink"
+                  class="pk-tree-link"
+                (click)="$event.stopPropagation()">{{ node.label }}</a>
+              } @else {
+                {{ node.label }}
+              }
+            </span>
+          </div>
+          <!-- Recursive children -->
+          @if (node._expanded && node.children?.length) {
+            <div class="pk-tree-children">
+              <pk-treeview-node
+                [nodes]="node.children!"
+                [selection]="selection"
+                (nodeToggled)="nodeToggled.emit($event)"
+                (selectionChanged)="selectionChanged.emit($event)">
+              </pk-treeview-node>
+            </div>
+          }
+        </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 });
+}
+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: `
+    <ul class="pk-tree-list">
+      @for (node of nodes; track node) {
+        <li class="pk-tree-item">
+          <!-- Row -->
+          <div class="pk-tree-row"
+            [class.pk-tree-row--selected]="node._selected"
+            (click)="onRowClick(node, $event)">
+            <!-- Expand toggle -->
+            <span class="pk-tree-toggle"
+              [style.visibility]="node.children?.length ? 'visible' : 'hidden'"
+              (click)="toggleExpand(node, $event)">
+              <pk-icon
+                iconSet="material-symbols"
+                [name]="node._expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'"
+                [size]="14"
+                color="#64748b">
+              </pk-icon>
+            </span>
+            <!-- Checkbox (single = radio style, multi = checkbox) -->
+            @if (selection !== 'none') {
+              <span class="pk-tree-check" (click)="onCheckClick(node, $event)">
+                <!-- multi: tri-state checkbox -->
+                @if (selection === 'multi') {
+                  <span class="pk-tree-cb"
+                    [class.pk-tree-cb--checked]="node._selected"
+                    [class.pk-tree-cb--indeterminate]="node._indeterminate && !node._selected">
+                    @if (node._selected) {
+                      <pk-icon iconSet="material-symbols" name="check" [size]="11" color="#fff"></pk-icon>
+                    }
+                    @if (node._indeterminate && !node._selected) {
+                      <span class="pk-tree-cb-dash"></span>
+                    }
+                  </span>
+                }
+                <!-- single: radio dot -->
+                @if (selection === 'single') {
+                  <span class="pk-tree-radio" [class.pk-tree-radio--checked]="node._selected"></span>
+                }
+              </span>
+            }
+            <!-- Icon -->
+            @if (node.icon) {
+              <span class="pk-tree-icon">
+                <pk-icon [name]="node.icon" [size]="16" color="#64748b"></pk-icon>
+              </span>
+            }
+            <!-- Label -->
+            <span class="pk-tree-label">
+              @if (node.routerLink) {
+                <a
+                  [routerLink]="node.routerLink"
+                  class="pk-tree-link"
+                (click)="$event.stopPropagation()">{{ node.label }}</a>
+              } @else {
+                {{ node.label }}
+              }
+            </span>
+          </div>
+          <!-- Recursive children -->
+          @if (node._expanded && node.children?.length) {
+            <div class="pk-tree-children">
+              <pk-treeview-node
+                [nodes]="node.children!"
+                [selection]="selection"
+                (nodeToggled)="nodeToggled.emit($event)"
+                (selectionChanged)="selectionChanged.emit($event)">
+              </pk-treeview-node>
+            </div>
+          }
+        </li>
+      }
+    </ul>
+    `, 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
+            }], selection: [{
+                type: Input
+            }], nodeToggled: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }] } });
+
+class PkTreeviewComponent {
+    cdr;
+    /** Tree data */
+    nodes = [];
+    /** 'none' | 'single' | 'multi' */
+    selection = 'none';
+    /** Show "เลือกทั้งหมด" row (multi only) */
+    showSelectAll = true;
+    /** Initially expanded depth (0 = root collapsed) */
+    expandDepth = 1;
+    selected = new EventEmitter();
+    nodeToggle = new EventEmitter();
+    allSelected = false;
+    someSelected = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['nodes'] && this.nodes) {
+            this.initKeys(this.nodes, '', 0);
+            this.expandToDepth(this.nodes, 0);
+            this.updateSelectAllState();
+        }
+    }
+    initKeys(nodes, prefix, depth) {
+        nodes.forEach((n, i) => {
+            n.key = n.key ?? `${prefix}${i}`;
+            n._selected = n._selected ?? false;
+            n._indeterminate = false;
+            n._expanded = n._expanded ?? false;
+            if (n.children?.length)
+                this.initKeys(n.children, `${n.key}-`, depth + 1);
+        });
+    }
+    expandToDepth(nodes, depth) {
+        for (const n of nodes) {
+            n._expanded = n._expanded === true || depth < this.expandDepth;
+            if (n.children?.length)
+                this.expandToDepth(n.children, depth + 1);
+        }
+    }
+    toggleSelectAll() {
+        const target = !this.allSelected;
+        this.setAll(this.nodes, target);
+        this.updateSelectAllState();
+        this.selected.emit(this.getSelected(this.nodes));
+        this.cdr.markForCheck();
+    }
+    onNodeToggled(node) {
+        this.nodeToggle.emit(node);
+        this.cdr.markForCheck();
+    }
+    onSelectionChanged(selectedNodes) {
+        if (this.selection === 'multi') {
+            this.updateParentStates(this.nodes);
+            this.updateSelectAllState();
+        }
+        this.selected.emit(selectedNodes);
+        this.cdr.markForCheck();
+    }
+    setAll(nodes, selected) {
+        for (const n of nodes) {
+            n._selected = selected;
+            n._indeterminate = false;
+            if (n.children?.length)
+                this.setAll(n.children, selected);
+        }
+    }
+    /** Returns true=all-selected, false=none, 'indeterminate'=some */
+    updateParentStates(nodes) {
+        let allSel = true, noneSel = true;
+        for (const n of nodes) {
+            if (n.children?.length) {
+                const childState = this.updateParentStates(n.children);
+                if (childState === 'all') {
+                    n._selected = true;
+                    n._indeterminate = false;
+                }
+                else if (childState === 'none') {
+                    n._selected = false;
+                    n._indeterminate = false;
+                }
+                else {
+                    n._selected = false;
+                    n._indeterminate = true;
+                }
+            }
+            if (!n._selected)
+                allSel = false;
+            if (n._selected || n._indeterminate)
+                noneSel = false;
+        }
+        if (allSel)
+            return 'all';
+        if (noneSel)
+            return 'none';
+        return 'some';
+    }
+    updateSelectAllState() {
+        const state = this.calcSelectState(this.nodes);
+        this.allSelected = state === 'all';
+        this.someSelected = state === 'some';
+    }
+    calcSelectState(nodes) {
+        if (!nodes.length)
+            return 'none';
+        const leafs = this.getAllLeafs(nodes);
+        if (!leafs.length)
+            return 'none';
+        const selCount = leafs.filter(n => n._selected).length;
+        if (selCount === leafs.length)
+            return 'all';
+        if (selCount === 0)
+            return 'none';
+        return 'some';
+    }
+    getAllLeafs(nodes) {
+        const result = [];
+        for (const n of nodes) {
+            if (!n.children?.length)
+                result.push(n);
+            else
+                result.push(...this.getAllLeafs(n.children));
+        }
+        return result;
+    }
+    getSelected(nodes) {
+        const result = [];
+        for (const n of nodes) {
+            if (n._selected)
+                result.push(n);
+            if (n.children)
+                result.push(...this.getSelected(n.children));
+        }
+        return result;
+    }
+    /** Public API: get currently selected nodes */
+    getSelection() {
+        return this.getSelected(this.nodes);
+    }
+    /** Public API: clear all selection */
+    clearSelection() {
+        this.setAll(this.nodes, false);
+        this.updateSelectAllState();
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkTreeviewComponent, isStandalone: true, selector: "pk-treeview", inputs: { nodes: "nodes", selection: "selection", showSelectAll: "showSelectAll", expandDepth: "expandDepth" }, outputs: { selected: "selected", nodeToggle: "nodeToggle" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="pk-treeview">
+    
+      <!-- Select All (multi only) -->
+      @if (selection === 'multi' && showSelectAll) {
+        <div class="pk-tree-select-all">
+          <span class="pk-tree-cb"
+            [class.pk-tree-cb--checked]="allSelected"
+            [class.pk-tree-cb--indeterminate]="someSelected && !allSelected"
+            (click)="toggleSelectAll()">
+            @if (allSelected) {
+              <pk-icon iconSet="material-symbols" name="check" [size]="11" color="#fff"></pk-icon>
+            }
+            @if (someSelected && !allSelected) {
+              <span class="pk-tree-cb-dash"></span>
+            }
+          </span>
+          <span class="pk-tree-select-all-label" (click)="toggleSelectAll()">เลือกทั้งหมด</span>
+        </div>
+      }
+    
+      <pk-treeview-node
+        [nodes]="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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-treeview', imports: [PkIcon, PkTreeviewNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="pk-treeview">
+    
+      <!-- Select All (multi only) -->
+      @if (selection === 'multi' && showSelectAll) {
+        <div class="pk-tree-select-all">
+          <span class="pk-tree-cb"
+            [class.pk-tree-cb--checked]="allSelected"
+            [class.pk-tree-cb--indeterminate]="someSelected && !allSelected"
+            (click)="toggleSelectAll()">
+            @if (allSelected) {
+              <pk-icon iconSet="material-symbols" name="check" [size]="11" color="#fff"></pk-icon>
+            }
+            @if (someSelected && !allSelected) {
+              <span class="pk-tree-cb-dash"></span>
+            }
+          </span>
+          <span class="pk-tree-select-all-label" (click)="toggleSelectAll()">เลือกทั้งหมด</span>
+        </div>
+      }
+    
+      <pk-treeview-node
+        [nodes]="nodes"
+        [selection]="selection"
+        (nodeToggled)="onNodeToggled($event)"
+        (selectionChanged)="onSelectionChanged($event)">
+      </pk-treeview-node>
+    </div>
+    `, 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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nodes: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], expandDepth: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], nodeToggle: [{
+                type: Output
+            }] } });
+
+class PkTreeviewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewModule, imports: [PkTreeviewComponent, PkTreeviewNodeComponent], exports: [PkTreeviewComponent, PkTreeviewNodeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewModule, imports: [PkTreeviewComponent, PkTreeviewNodeComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTreeviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [PkTreeviewComponent, PkTreeviewNodeComponent],
+                    exports: [PkTreeviewComponent, PkTreeviewNodeComponent]
+                }]
+        }] });
+
+class PkSelectComponent {
+    elementRef = inject(ElementRef);
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    placeholder = input('เลือก...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    change = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    filteredOptions = computed(() => {
+        const query = this.searchQuery().toLowerCase();
+        if (!query)
+            return this.options();
+        return this.options().filter(option => this.getOptionLabel(option).toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const selected = this.selectedValues();
+        const opts = this.options();
+        if (selected.length === 0)
+            return '';
+        if (this.mode() === 'single') {
+            const option = opts.find(o => this.getOptionValue(o) === selected[0]);
+            return option ? this.getOptionLabel(option) : '';
+        }
+        else {
+            const labels = selected
+                .map(val => {
+                const option = opts.find(o => this.getOptionValue(o) === val);
+                return option ? this.getOptionLabel(option) : '';
+            })
+                .filter(Boolean);
+            return labels.join(', ');
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    toggleDropdown() {
+        if (this.disabled())
+            return;
+        this.isOpen.update(open => !open);
+        if (!this.isOpen()) {
+            this.searchQuery.set('');
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        const optionValue = this.getOptionValue(option);
+        if (this.mode() === 'single') {
+            this.selectedValues.set([optionValue]);
+            this.isOpen.set(false);
+            this.searchQuery.set('');
+            this.emitValue();
+        }
+        else {
+            const current = [...this.selectedValues()];
+            const index = current.indexOf(optionValue);
+            if (index > -1) {
+                current.splice(index, 1);
+            }
+            else {
+                current.push(optionValue);
+            }
+            this.selectedValues.set(current);
+            this.emitValue();
+        }
+    }
+    isSelected(value) {
+        return this.selectedValues().includes(value);
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        this.searchQuery.set(target.value);
+    }
+    onDocumentClick(event) {
+        // Close dropdown when clicking outside
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside && this.isOpen()) {
+            this.isOpen.set(false);
+            this.searchQuery.set('');
+        }
+    }
+    onCheckboxClick(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (option.disabled) {
+            return;
+        }
+        this.selectOption(option);
+    }
+    emitValue() {
+        const selected = this.selectedValues();
+        let value;
+        if (this.returnObjects()) {
+            const selectedOptions = selected
+                .map(selectedValue => this.options().find(option => this.getOptionValue(option) === selectedValue))
+                .filter(Boolean);
+            value = this.mode() === 'single'
+                ? selectedOptions[0] ?? null
+                : selectedOptions;
+        }
+        else {
+            value = this.mode() === 'single'
+                ? selected[0] ?? null
+                : selected;
+        }
+        this.onChange(value);
+        this.onTouched();
+        this.change.emit(value);
+    }
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.selectedValues.set([]);
+        }
+        else if (Array.isArray(value)) {
+            this.selectedValues.set(value.map(item => this.extractIncomingValue(item)));
+        }
+        else {
+            this.selectedValues.set([this.extractIncomingValue(value)]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Handled by disabled input
+    }
+    getOptionLabel(option) {
+        const field = this.labelField();
+        const fallbackField = this.valueField();
+        const value = option?.[field] ?? option?.label ?? option?.[fallbackField] ?? option?.value ?? '';
+        return `${value}`;
+    }
+    getOptionValue(option) {
+        const field = this.valueField();
+        const fallbackField = this.labelField();
+        return option?.[field] ?? option?.value ?? option?.[fallbackField] ?? option?.label ?? '';
+    }
+    extractIncomingValue(value) {
+        if (value !== null && typeof value === 'object') {
+            return value?.[this.valueField()] ?? value?.value ?? value?.[this.labelField()] ?? value?.label ?? '';
+        }
+        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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PkSelectComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="pk-select-container">
+      <div 
+        class="pk-select-trigger"
+        [class.pk-select-trigger-open]="isOpen()"
+        [class.pk-select-trigger-disabled]="disabled()"
+        (click)="toggleDropdown()">
+        <span class="pk-select-value">
+          @if (displayValue()) {
+            {{ displayValue() }}
+          } @else {
+            <span class="pk-select-placeholder">{{ placeholder() }}</span>
+          }
+        </span>
+        <span class="pk-select-arrow" [class.pk-select-arrow-open]="isOpen()">▼</span>
+      </div>
+
+      @if (isOpen()) {
+        <div class="pk-select-dropdown">
+          @if (searchable()) {
+            <div class="pk-select-search">
+              <input 
+                type="text"
+                class="pk-select-search-input"
+                [value]="searchQuery()"
+                (input)="onSearchInput($event)"
+                (click)="$event.stopPropagation()"
+                placeholder="ค้นหา..." />
+            </div>
+          }
+
+          <div class="pk-select-options">
+            @if (filteredOptions().length === 0) {
+              <div class="pk-select-no-options">ไม่พบข้อมูล</div>
+            }
+
+            @for (option of filteredOptions(); track getOptionValue(option)) {
+              <div 
+                class="pk-select-option"
+                [class.pk-select-option-selected]="isSelected(getOptionValue(option))"
+                [class.pk-select-option-disabled]="option.disabled"
+                (click)="!option.disabled && selectOption(option)">
+                
+                @if (mode() === 'multi') {
+                  <input 
+                    type="checkbox"
+                    class="pk-select-checkbox"
+                    [checked]="isSelected(getOptionValue(option))"
+                    [disabled]="option.disabled"
+                    (click)="onCheckboxClick(option, $event)"
+                    (change)="$event.stopPropagation()" />
+                }
+                
+                <span class="pk-select-option-label">{{ option.label }}</span>
+              </div>
+            }
+          </div>
+        </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"] });
+}
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PkSelectComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: `
+    <div class="pk-select-container">
+      <div 
+        class="pk-select-trigger"
+        [class.pk-select-trigger-open]="isOpen()"
+        [class.pk-select-trigger-disabled]="disabled()"
+        (click)="toggleDropdown()">
+        <span class="pk-select-value">
+          @if (displayValue()) {
+            {{ displayValue() }}
+          } @else {
+            <span class="pk-select-placeholder">{{ placeholder() }}</span>
+          }
+        </span>
+        <span class="pk-select-arrow" [class.pk-select-arrow-open]="isOpen()">▼</span>
+      </div>
+
+      @if (isOpen()) {
+        <div class="pk-select-dropdown">
+          @if (searchable()) {
+            <div class="pk-select-search">
+              <input 
+                type="text"
+                class="pk-select-search-input"
+                [value]="searchQuery()"
+                (input)="onSearchInput($event)"
+                (click)="$event.stopPropagation()"
+                placeholder="ค้นหา..." />
+            </div>
+          }
+
+          <div class="pk-select-options">
+            @if (filteredOptions().length === 0) {
+              <div class="pk-select-no-options">ไม่พบข้อมูล</div>
+            }
+
+            @for (option of filteredOptions(); track getOptionValue(option)) {
+              <div 
+                class="pk-select-option"
+                [class.pk-select-option-selected]="isSelected(getOptionValue(option))"
+                [class.pk-select-option-disabled]="option.disabled"
+                (click)="!option.disabled && selectOption(option)">
+                
+                @if (mode() === 'multi') {
+                  <input 
+                    type="checkbox"
+                    class="pk-select-checkbox"
+                    [checked]="isSelected(getOptionValue(option))"
+                    [disabled]="option.disabled"
+                    (click)="onCheckboxClick(option, $event)"
+                    (change)="$event.stopPropagation()" />
+                }
+                
+                <span class="pk-select-option-label">{{ option.label }}</span>
+              </div>
+            }
+          </div>
+        </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"] }] } });
+
+class PkAutocompleteComponent {
+    elementRef = inject(ElementRef);
+    // Inputs
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    fetchFn = input(null, ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
+    placeholder = input('ค้นหา...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    minChars = input(1, ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    // State
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    fetchedOptions = signal([], ...(ngDevMode ? [{ debugName: "fetchedOptions" }] : /* istanbul ignore next */ []));
+    debounceTimer = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Auto-fetch when search term changes
+        effect(() => {
+            const term = this.searchTerm();
+            const fn = this.fetchFn();
+            const min = this.minChars();
+            if (fn && term.length >= min) {
+                this.performSearch(term);
+            }
+        });
+    }
+    // Computed
+    filteredOptions = computed(() => {
+        const fetchFn = this.fetchFn();
+        const term = this.searchTerm().toLowerCase().trim();
+        // If using fetchFn, return fetched options
+        if (fetchFn) {
+            return this.fetchedOptions();
+        }
+        // Otherwise filter local options
+        const opts = this.options();
+        if (!term)
+            return opts;
+        return opts.filter(opt => opt.label.toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const selected = this.selectedValue();
+        if (!selected)
+            return this.searchTerm();
+        const opts = this.fetchFn() ? this.fetchedOptions() : this.options();
+        const option = opts.find(opt => opt.value === selected);
+        return option ? option.label : this.searchTerm();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onClickOutside(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onInput(event) {
+        const input = event.target;
+        const value = input.value;
+        this.searchTerm.set(value);
+        this.isOpen.set(true);
+        this.highlightedIndex.set(-1);
+        // Clear selection if input is cleared
+        if (!value) {
+            this.selectedValue.set(null);
+            this.onChange(null);
+        }
+        // Debounce search
+        if (this.fetchFn()) {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            if (value.length >= this.minChars()) {
+                this.debounceTimer = setTimeout(() => {
+                    this.performSearch(value);
+                }, this.debounceTime());
+            }
+        }
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isOpen.set(true);
+            // If no search term, fetch or show all options
+            if (!this.searchTerm() && this.fetchFn()) {
+                this.performSearch('');
+            }
+        }
+    }
+    onKeyDown(event) {
+        const opts = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.isOpen.set(true);
+                }
+                else {
+                    const newIndex = Math.min(this.highlightedIndex() + 1, opts.length - 1);
+                    this.highlightedIndex.set(newIndex);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                const newIndex = Math.max(this.highlightedIndex() - 1, 0);
+                this.highlightedIndex.set(newIndex);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                const idx = this.highlightedIndex();
+                if (idx >= 0 && idx < opts.length) {
+                    this.selectOption(opts[idx]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    async performSearch(term) {
+        const fn = this.fetchFn();
+        if (!fn)
+            return;
+        this.loading.set(true);
+        try {
+            const results = await fn(term);
+            this.fetchedOptions.set(results);
+        }
+        catch (error) {
+            console.error('Autocomplete fetch error:', error);
+            this.fetchedOptions.set([]);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.selectedValue.set(option.value);
+        this.searchTerm.set(option.label);
+        this.onChange(option.value);
+        this.onTouched();
+        this.close();
+    }
+    clear() {
+        this.searchTerm.set('');
+        this.selectedValue.set(null);
+        this.onChange(null);
+        this.isOpen.set(false);
+    }
+    close() {
+        this.isOpen.set(false);
+        this.highlightedIndex.set(-1);
+    }
+    isSelected(option) {
+        return this.selectedValue() === option.value;
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.selectedValue.set(value);
+        // Find and set display text
+        if (value) {
+            const opts = this.fetchFn() ? this.fetchedOptions() : this.options();
+            const option = opts.find(opt => opt.value === value);
+            if (option) {
+                this.searchTerm.set(option.label);
+            }
+        }
+        else {
+            this.searchTerm.set('');
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PkAutocompleteComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="relative w-full">
+      <!-- Input -->
+      <div class="relative">
+        <input
+          #inputElement
+          type="text"
+          [value]="displayValue()"
+          (input)="onInput($event)"
+          (focus)="onFocus()"
+          (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())"
+        />
+        
+        <!-- Loading Spinner or Clear Button -->
+        @if (loading()) {
+          <div class="absolute right-3 top-1/2 -translate-y-1/2">
+            <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">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        }
+      </div>
+
+      <!-- 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">
+          @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>
+          } @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">
+                <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>
+              @if (searchTerm()) {
+                <p class="text-xs mt-1">ลองค้นหาด้วยคำอื่น</p>
+              }
+            </div>
+          } @else {
+            @for (option of filteredOptions(); track option.value; let idx = $index) {
+              <button
+                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)">
+                {{ option.label }}
+                @if (isSelected(option)) {
+                  <span class="float-right text-blue-600">✓</span>
+                }
+              </button>
+            }
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], 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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PkAutocompleteComponent),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    <div class="relative w-full">
+      <!-- Input -->
+      <div class="relative">
+        <input
+          #inputElement
+          type="text"
+          [value]="displayValue()"
+          (input)="onInput($event)"
+          (focus)="onFocus()"
+          (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())"
+        />
+        
+        <!-- Loading Spinner or Clear Button -->
+        @if (loading()) {
+          <div class="absolute right-3 top-1/2 -translate-y-1/2">
+            <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">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        }
+      </div>
+
+      <!-- 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">
+          @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>
+          } @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">
+                <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>
+              @if (searchTerm()) {
+                <p class="text-xs mt-1">ลองค้นหาด้วยคำอื่น</p>
+              }
+            </div>
+          } @else {
+            @for (option of filteredOptions(); track option.value; let idx = $index) {
+              <button
+                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)">
+                {{ option.label }}
+                @if (isSelected(option)) {
+                  <span class="float-right text-blue-600">✓</span>
+                }
+              </button>
+            }
+          }
+        </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: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PkTypeaheadComponent {
+    elementRef;
+    items = [];
+    placeholder = '';
+    disabled = false;
+    style = '';
+    customClass = '';
+    customStyle = { width: '100%' };
+    labelField = 'label';
+    valueField = 'value';
+    allowCustomValue = true;
+    maxItems = 12;
+    minChars = 0;
+    itemSelected = new EventEmitter();
+    value = '';
+    isOpen = false;
+    highlightedIndex = -1;
+    onChange = () => { };
+    onTouch = () => { };
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    get filteredItems() {
+        const keyword = (this.value || '').trim().toLowerCase();
+        const normalizedItems = this.items || [];
+        if (keyword.length < this.minChars) {
+            return normalizedItems.slice(0, this.maxItems);
+        }
+        return normalizedItems
+            .filter(item => this.getItemLabel(item).toLowerCase().includes(keyword))
+            .slice(0, this.maxItems);
+    }
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+        this.isOpen = true;
+        this.highlightedIndex = this.filteredItems.length ? 0 : -1;
+    }
+    onFocus() {
+        if (this.disabled) {
+            return;
+        }
+        this.isOpen = true;
+        this.highlightedIndex = this.filteredItems.length ? 0 : -1;
+    }
+    onBlur() {
+        this.onTouch();
+        if (!this.allowCustomValue) {
+            const exactMatch = (this.items || []).find(item => this.getItemLabel(item) === this.value);
+            if (!exactMatch) {
+                this.value = '';
+                this.onChange(this.value);
+            }
+        }
+    }
+    onKeydown(event) {
+        if (!this.isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            this.isOpen = true;
+        }
+        if (!this.filteredItems.length) {
+            if (event.key === 'Escape') {
+                this.isOpen = false;
+            }
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.highlightedIndex = (this.highlightedIndex + 1) % this.filteredItems.length;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.highlightedIndex = this.highlightedIndex <= 0 ? this.filteredItems.length - 1 : this.highlightedIndex - 1;
+        }
+        if (event.key === 'Enter' && this.highlightedIndex >= 0) {
+            event.preventDefault();
+            this.selectItem(this.filteredItems[this.highlightedIndex]);
+        }
+        if (event.key === 'Escape') {
+            this.isOpen = false;
+        }
+    }
+    selectItem(item) {
+        this.value = this.getItemValue(item);
+        this.onChange(this.value);
+        this.itemSelected.emit(item);
+        this.isOpen = false;
+        this.highlightedIndex = -1;
+    }
+    getItemLabel(item) {
+        if (item == null) {
+            return '';
+        }
+        if (typeof item === 'string' || typeof item === 'number') {
+            return `${item}`;
+        }
+        return `${item[this.labelField] ?? item[this.valueField] ?? ''}`;
+    }
+    getItemValue(item) {
+        if (item == null) {
+            return '';
+        }
+        if (typeof item === 'string' || typeof item === 'number') {
+            return `${item}`;
+        }
+        return `${item[this.valueField] ?? item[this.labelField] ?? ''}`;
+    }
+    trackByItem(_, item) {
+        return this.getItemValue(item);
+    }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+            this.highlightedIndex = -1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTypeaheadComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkTypeaheadComponent, isStandalone: true, selector: "pk-typeahead", inputs: { items: "items", placeholder: "placeholder", disabled: "disabled", style: "style", customClass: "customClass", customStyle: "customStyle", labelField: "labelField", valueField: "valueField", allowCustomValue: "allowCustomValue", maxItems: "maxItems", minChars: "minChars" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PkTypeaheadComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"pk-typeahead\" [ngClass]=\"customClass\" [ngStyle]=\"customStyle\">\n  <input\n    type=\"text\"\n    class=\"pk-typeahead-input\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [style]=\"style\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\">\n\n  @if (isOpen && filteredItems.length > 0) {\n  <div class=\"pk-typeahead-panel\">\n    @for (item of filteredItems; track trackByItem($index, item); let index = $index) {\n    <button\n      type=\"button\"\n      class=\"pk-typeahead-option\"\n      [class.active]=\"index === highlightedIndex\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"selectItem(item)\">\n      {{ getItemLabel(item) }}\n    </button>\n    }\n  </div>\n  }\n</div>", styles: [".pk-typeahead{position:relative;display:inline-block}.pk-typeahead-input{width:100%;font-size:16px;padding:4px 8px;border:1px solid #999;border-radius:3px;background:#fff}.pk-typeahead-panel{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1200;max-height:260px;overflow-y:auto;background:#fff;border:1px solid #c9c9c9;border-radius:4px;box-shadow:0 6px 18px #00000024}.pk-typeahead-option{display:block;width:100%;padding:8px 10px;text-align:left;border:0;background:transparent;cursor:pointer;font-size:14px}.pk-typeahead-option:hover,.pk-typeahead-option.active{background:#eef5ff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkTypeaheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-typeahead', standalone: true, imports: [NgClass, NgStyle], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PkTypeaheadComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"pk-typeahead\" [ngClass]=\"customClass\" [ngStyle]=\"customStyle\">\n  <input\n    type=\"text\"\n    class=\"pk-typeahead-input\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [style]=\"style\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\">\n\n  @if (isOpen && filteredItems.length > 0) {\n  <div class=\"pk-typeahead-panel\">\n    @for (item of filteredItems; track trackByItem($index, item); let index = $index) {\n    <button\n      type=\"button\"\n      class=\"pk-typeahead-option\"\n      [class.active]=\"index === highlightedIndex\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"selectItem(item)\">\n      {{ getItemLabel(item) }}\n    </button>\n    }\n  </div>\n  }\n</div>", styles: [".pk-typeahead{position:relative;display:inline-block}.pk-typeahead-input{width:100%;font-size:16px;padding:4px 8px;border:1px solid #999;border-radius:3px;background:#fff}.pk-typeahead-panel{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1200;max-height:260px;overflow-y:auto;background:#fff;border:1px solid #c9c9c9;border-radius:4px;box-shadow:0 6px 18px #00000024}.pk-typeahead-option{display:block;width:100%;padding:8px 10px;text-align:left;border:0;background:transparent;cursor:pointer;font-size:14px}.pk-typeahead-option:hover,.pk-typeahead-option.active{background:#eef5ff}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], customStyle: [{
+                type: Input
+            }], labelField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], allowCustomValue: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], minChars: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of ngx-pk-ui
+ */
+// pk-tabs
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgCellComponent, PkDgColumnComponent, PkDgFooterComponent, PkDgItemsDirective, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowDetailComponent, PkIcon, PkIfExpandedDirective, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
+//# sourceMappingURL=ngx-pk-ui.mjs.map