shirkasoft-ui-components 1.0.0

package/fesm2022/shirkasoft-ui-components.mjs

@@ -0,0 +1,2748 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, input, output, viewChild, signal, computed, DestroyRef, effect, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, ElementRef, HostListener, ApplicationRef, EnvironmentInjector, createComponent, ViewContainerRef, untracked } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormControl, FormGroup, FormBuilder } from '@angular/forms';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
+import { LucideEyeOff, LucideEye, LucideSearch, LucideDynamicIcon, LucideX, LucideTriangleAlert, LucideInfo, LucideCircleX, LucideCheck, LucideLoader, LucideTrash2, LucideLoaderCircle, LucideMinimize2, LucideMaximize2, LucideChevronRight, LucideChevronLeft, LucideChevronDown, LucideFile, LucideUpload, LucideList, LucideWarehouse, LucideUserCog, LucideShieldCheck, LucideCalculator, LucidePercent, LucideDollarSign, LucideLineChart, LucideBot, LucideReceipt, LucideUsers, LucideTruck, LucideTag, LucideTags, LucideBox, LucidePackage, LucideLandmark, LucideBuilding, LucideUserPlus, LucideUserRoundX, LucideUserCheck, LucideUser, LucideLogOut, LucideSettings, LucideClock, LucideStar, LucideVideo, LucidePlay, LucideShare2, LucideCopy, LucideCircleCheck, LucideArchive, LucideFileText, LucidePresentation, LucideFileSpreadsheet, LucideRefreshCw, LucideCirclePlus, LucidePlus, LucideDownload, LucideToggleLeft, LucideToggleRight, LucideUserPen, LucideKey, LucidePencil, LucideFunnel, LucideInbox, LucideArrowUpDown, LucideArrowDown, LucideArrowUp, LucideChevronsRight, LucideChevronsLeft } from '@lucide/angular';
+import { Router } from '@angular/router';
+import { Subject, debounceTime } from 'rxjs';
+
+const icons$6 = {
+    search: LucideSearch,
+    eye: LucideEye,
+    'eye-off': LucideEyeOff,
+};
+class TextFieldComponent {
+    cdr = inject(ChangeDetectorRef);
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    formatCard = input(false, ...(ngDevMode ? [{ debugName: "formatCard" }] : /* istanbul ignore next */ []));
+    preventNegative = input(false, ...(ngDevMode ? [{ debugName: "preventNegative" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    numbersOnly = input(false, ...(ngDevMode ? [{ debugName: "numbersOnly" }] : /* istanbul ignore next */ []));
+    allowDecimals = input(false, ...(ngDevMode ? [{ debugName: "allowDecimals" }] : /* istanbul ignore next */ []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    isTextArea = input(false, ...(ngDevMode ? [{ debugName: "isTextArea" }] : /* istanbul ignore next */ []));
+    textAreaHeight = input('h-28', ...(ngDevMode ? [{ debugName: "textAreaHeight" }] : /* istanbul ignore next */ []));
+    searchMode = input(false, ...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
+    displayValue = input('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    searchButtonClick = output();
+    getIcon = (name) => icons$6[name] ?? LucideEye;
+    inputElement = viewChild('input', ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+    textareaElement = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaElement" }] : /* istanbul ignore next */ []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabledState = signal(false, ...(ngDevMode ? [{ debugName: "_disabledState" }] : /* istanbul ignore next */ []));
+    showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+    hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+    errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        if (this.searchMode() && this.displayValue()) {
+            return this.displayValue();
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    actualControl = computed(() => {
+        const ctrl = this.control();
+        if (ctrl)
+            return ctrl;
+        const fg = this.formGroup();
+        const lbl = this.label();
+        if (fg && lbl) {
+            return fg.get(lbl);
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+    shouldShowError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
+    }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+    wasFixedError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return this.hadError() && ctrl?.valid && ctrl?.touched;
+    }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+    getErrorMessages = computed(() => {
+        this.errorTracker();
+        const customError = this.errorMessage();
+        if (customError) {
+            return [customError];
+        }
+        const ctrl = this.actualControl();
+        if (!ctrl?.errors)
+            return [];
+        const customErrors = this.errorMessages();
+        const t = this.transloco;
+        return Object.keys(ctrl.errors).map((errorKey) => {
+            if (customErrors[errorKey])
+                return customErrors[errorKey];
+            switch (errorKey) {
+                case 'required':
+                    return t.translate('validation.required');
+                case 'email':
+                    return t.translate('validation.email');
+                case 'minlength':
+                    return t.translate('validation.minlength', {
+                        min: ctrl.errors['minlength'].requiredLength,
+                    });
+                case 'maxlength':
+                    return t.translate('validation.maxlength', {
+                        max: ctrl.errors['maxlength'].requiredLength,
+                    });
+                case 'pattern':
+                    return t.translate('validation.pattern');
+                default:
+                    return t.translate('validation.invalid');
+            }
+        });
+    }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+    effectiveType = computed(() => {
+        if (this.isTextArea())
+            return 'text';
+        if (this.type() === 'password' && this.showPassword())
+            return 'text';
+        return this.type();
+    }, ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+    transloco = inject(TranslocoService);
+    onChange = () => { };
+    onTouched = () => { };
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        effect(() => {
+            const ctrl = this.actualControl();
+            const shouldDisable = this.isDisabled();
+            if (ctrl && shouldDisable) {
+                Promise.resolve().then(() => {
+                    ctrl.disable();
+                });
+            }
+        });
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl) {
+                this.subscribed.set(false);
+                return;
+            }
+            if (this.subscribed())
+                return;
+            if (ctrl.invalid && ctrl.touched) {
+                this.hadError.set(true);
+            }
+            ctrl.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+                if (ctrl.invalid && ctrl.touched) {
+                    this.hadError.set(true);
+                }
+            });
+            ctrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+            });
+            this.subscribed.set(true);
+        });
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.errorTracker.update((v) => v + 1);
+        });
+    }
+    numberValidation(event) {
+        const allowedKeys = [
+            'Backspace',
+            'Tab',
+            'End',
+            'Home',
+            'ArrowLeft',
+            'ArrowRight',
+            'Delete',
+        ];
+        if (this.numbersOnly()) {
+            const isNumber = /^\d$/.test(event.key);
+            if (!isNumber && !allowedKeys.includes(event.key)) {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (this.allowDecimals() || this.type() === 'number') {
+            allowedKeys.push('.');
+        }
+        const isDecimal = event.key === '.' || event.key === ',';
+        const isNumber = !isNaN(Number(event.key));
+        if (allowedKeys.includes(event.key)) {
+            if (isDecimal) {
+                const input = event.target;
+                const currentValue = input.value;
+                const hasDecimalSeparator = currentValue.includes('.') || currentValue.includes(',');
+                if (hasDecimalSeparator) {
+                    event.preventDefault();
+                }
+            }
+            return;
+        }
+        if (isNumber) {
+            return;
+        }
+        event.preventDefault();
+    }
+    onBlur() {
+        this.onTouched();
+        this.errorTracker.update((v) => v + 1);
+        const ctrl = this.actualControl();
+        if (ctrl?.invalid && ctrl?.touched) {
+            this.hadError.set(true);
+        }
+    }
+    onCardInput(event) {
+        const input = event.target;
+        let value = input.value.replace(/[^0-9]/g, '');
+        if (value.length > 16) {
+            value = value.substring(0, 16);
+        }
+        let formatted = '';
+        for (let i = 0; i < value.length; i++) {
+            if (i > 0 && i % 4 === 0) {
+                formatted += '-';
+            }
+            formatted += value[i];
+        }
+        input.value = formatted;
+        this.onChange(formatted);
+    }
+    onInput(event) {
+        const input = event.target;
+        let newValue = input.value;
+        if (this.allowDecimals()) {
+            newValue = newValue.replace(/,/g, '.');
+            const parts = newValue.split('.');
+            if (parts.length > 2) {
+                newValue = parts[0] + '.' + parts.slice(1).join('');
+            }
+            if (parts.length > 1 && parts[1].length > 2) {
+                newValue = parts[0] + '.' + parts[1].substring(0, 2);
+            }
+        }
+        if (this.numbersOnly()) {
+            newValue = newValue.replace(/[^0-9]/g, '');
+        }
+        const maxLen = this.maxLength();
+        if (maxLen && newValue.length > maxLen) {
+            newValue = newValue.substring(0, maxLen);
+            input.value = newValue;
+            const ctrl = this.actualControl();
+            setTimeout(() => {
+                ctrl?.updateValueAndValidity();
+                this.errorTracker.update((v) => v + 1);
+            });
+        }
+        if (this.formatCard()) {
+            this.onCardInput(event);
+        }
+        else {
+            this.onChange(newValue);
+        }
+    }
+    togglePasswordVisibility() {
+        this.showPassword.update((v) => !v);
+    }
+    writeValue(value) {
+        let processedValue = value;
+        if (this.allowDecimals() && value) {
+            processedValue = String(value).replace(/,/g, '.');
+        }
+        if (this.numbersOnly() && value) {
+            processedValue = value.toString().replace(/[^0-9]/g, '');
+        }
+        const maxLen = this.maxLength();
+        if (maxLen && processedValue?.length > maxLen) {
+            processedValue = processedValue.substring(0, maxLen);
+        }
+        if (this.formatCard() && processedValue) {
+            const cleaned = processedValue.replace(/[^0-9]/g, '');
+            let formatted = '';
+            for (let i = 0; i < cleaned.length; i++) {
+                if (i > 0 && i % 4 === 0)
+                    formatted += '-';
+                formatted += cleaned[i];
+            }
+            this._value.set(formatted);
+        }
+        else {
+            this._value.set(processedValue);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledState.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextFieldComponent, isStandalone: true, selector: "shk-text-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, formatCard: { classPropertyName: "formatCard", publicName: "formatCard", isSignal: true, isRequired: false, transformFunction: null }, preventNegative: { classPropertyName: "preventNegative", publicName: "preventNegative", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, numbersOnly: { classPropertyName: "numbersOnly", publicName: "numbersOnly", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, isTextArea: { classPropertyName: "isTextArea", publicName: "isTextArea", isSignal: true, isRequired: false, transformFunction: null }, textAreaHeight: { classPropertyName: "textAreaHeight", publicName: "textAreaHeight", isSignal: true, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchButtonClick: "searchButtonClick" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    @if (!isTextArea()) {\n      <div class=\"flex\">\n        @if (searchMode()) {\n          @let isDisabledSearch = actualControl()?.disabled || isDisabled();\n          <input\n            #input\n            [id]=\"id()\"\n            type=\"text\"\n            [value]=\"displayValue() || ''\"\n            [placeholder]=\"placeholder() || label()\"\n            [readOnly]=\"true\"\n            [disabled]=\"isDisabledSearch\"\n            (click)=\"!isDisabledSearch && searchButtonClick.emit()\"\n            (keydown.enter)=\"!isDisabledSearch && searchButtonClick.emit()\"\n            (blur)=\"onBlur()\"\n            autocomplete=\"off\"\n            [class.cursor-pointer]=\"!isDisabledSearch\"\n            [class.cursor-not-allowed]=\"isDisabledSearch\"\n            [class._shk-bg-surface-50]=\"isDisabledSearch\"\n            [class.dark:[background-color:var(--shk-surface-800)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-500)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border dark:[border-color:var(--shk-surface-700)]': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-500)]': isDisabledSearch\n            }\"\n          />\n          <button\n            type=\"button\"\n            (click)=\"searchButtonClick.emit()\"\n            tabindex=\"-1\"\n            [disabled]=\"isDisabledSearch\"\n            class=\"px-3 flex items-center justify-center shrink-0 _shk-bg-primary hover:[background-color:var(--shk-primary-700)] text-white border _shk-border-primary rounded-r-lg transition-colors duration-200 disabled:[background-color:var(--shk-surface-300)] dark:disabled:[background-color:var(--shk-surface-700)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-700)] disabled:cursor-not-allowed\"\n          >\n            <svg [lucideIcon]=\"getIcon('search')\" class=\"w-4 h-4\"></svg>\n          </button>\n        }\n\n        @if (!searchMode()) {\n          <input\n            #input\n            [id]=\"id()\"\n            [maxlength]=\"maxLength() || (formatCard() ? 19 : null)\"\n            [min]=\"type() === 'number' && preventNegative() ? '0' : null\"\n            (keypress)=\"type() === 'number' || numbersOnly() ? numberValidation($event) : null\"\n            [type]=\"effectiveType()\"\n            [formControl]=\"$any(actualControl())\"\n            [placeholder]=\"placeholder() || label()\"\n            (input)=\"onInput($event)\"\n            autocomplete=\"new-password\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n              'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n              '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError()\n            }\"\n            [class.pr-8]=\"type() === 'password' && actualControl()?.value?.length > 0\"\n            [class.pr-3]=\"type() !== 'password' || !actualControl()?.value?.length\"\n          />\n\n          @if (type() === 'password' && actualControl()?.value?.length > 0) {\n            <button\n              type=\"button\"\n              (click)=\"togglePasswordVisibility()\"\n              [disabled]=\"actualControl()?.disabled\"\n              class=\"absolute right-3 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] focus:outline-none\"\n            >\n              @if (showPassword()) {\n                <svg [lucideIcon]=\"getIcon('eye-off')\" class=\"w-4 h-4\"></svg>\n              } @else {\n                <svg [lucideIcon]=\"getIcon('eye')\" class=\"w-4 h-4\"></svg>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n\n    @if (isTextArea()) {\n      <textarea\n        #textarea\n        [id]=\"id()\"\n        [formControl]=\"$any(actualControl())\"\n        [placeholder]=\"placeholder() || label()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\n        [class]=\"isTextArea() ? textAreaHeight() : 'h-28'\"\n        class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)] sm:text-sm\"\n        [ngClass]=\"{\n          'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n          'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n          '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError()\n        }\"\n      ></textarea>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-text-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextFieldComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    @if (!isTextArea()) {\n      <div class=\"flex\">\n        @if (searchMode()) {\n          @let isDisabledSearch = actualControl()?.disabled || isDisabled();\n          <input\n            #input\n            [id]=\"id()\"\n            type=\"text\"\n            [value]=\"displayValue() || ''\"\n            [placeholder]=\"placeholder() || label()\"\n            [readOnly]=\"true\"\n            [disabled]=\"isDisabledSearch\"\n            (click)=\"!isDisabledSearch && searchButtonClick.emit()\"\n            (keydown.enter)=\"!isDisabledSearch && searchButtonClick.emit()\"\n            (blur)=\"onBlur()\"\n            autocomplete=\"off\"\n            [class.cursor-pointer]=\"!isDisabledSearch\"\n            [class.cursor-not-allowed]=\"isDisabledSearch\"\n            [class._shk-bg-surface-50]=\"isDisabledSearch\"\n            [class.dark:[background-color:var(--shk-surface-800)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-500)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border dark:[border-color:var(--shk-surface-700)]': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-500)]': isDisabledSearch\n            }\"\n          />\n          <button\n            type=\"button\"\n            (click)=\"searchButtonClick.emit()\"\n            tabindex=\"-1\"\n            [disabled]=\"isDisabledSearch\"\n            class=\"px-3 flex items-center justify-center shrink-0 _shk-bg-primary hover:[background-color:var(--shk-primary-700)] text-white border _shk-border-primary rounded-r-lg transition-colors duration-200 disabled:[background-color:var(--shk-surface-300)] dark:disabled:[background-color:var(--shk-surface-700)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-700)] disabled:cursor-not-allowed\"\n          >\n            <svg [lucideIcon]=\"getIcon('search')\" class=\"w-4 h-4\"></svg>\n          </button>\n        }\n\n        @if (!searchMode()) {\n          <input\n            #input\n            [id]=\"id()\"\n            [maxlength]=\"maxLength() || (formatCard() ? 19 : null)\"\n            [min]=\"type() === 'number' && preventNegative() ? '0' : null\"\n            (keypress)=\"type() === 'number' || numbersOnly() ? numberValidation($event) : null\"\n            [type]=\"effectiveType()\"\n            [formControl]=\"$any(actualControl())\"\n            [placeholder]=\"placeholder() || label()\"\n            (input)=\"onInput($event)\"\n            autocomplete=\"new-password\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n              'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n              '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError()\n            }\"\n            [class.pr-8]=\"type() === 'password' && actualControl()?.value?.length > 0\"\n            [class.pr-3]=\"type() !== 'password' || !actualControl()?.value?.length\"\n          />\n\n          @if (type() === 'password' && actualControl()?.value?.length > 0) {\n            <button\n              type=\"button\"\n              (click)=\"togglePasswordVisibility()\"\n              [disabled]=\"actualControl()?.disabled\"\n              class=\"absolute right-3 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] focus:outline-none\"\n            >\n              @if (showPassword()) {\n                <svg [lucideIcon]=\"getIcon('eye-off')\" class=\"w-4 h-4\"></svg>\n              } @else {\n                <svg [lucideIcon]=\"getIcon('eye')\" class=\"w-4 h-4\"></svg>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n\n    @if (isTextArea()) {\n      <textarea\n        #textarea\n        [id]=\"id()\"\n        [formControl]=\"$any(actualControl())\"\n        [placeholder]=\"placeholder() || label()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\n        [class]=\"isTextArea() ? textAreaHeight() : 'h-28'\"\n        class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)] sm:text-sm\"\n        [ngClass]=\"{\n          'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n          'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n          '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError()\n        }\"\n      ></textarea>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], formatCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatCard", required: false }] }], preventNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventNegative", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], numbersOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbersOnly", required: false }] }], allowDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDecimals", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], isTextArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTextArea", required: false }] }], textAreaHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAreaHeight", required: false }] }], searchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMode", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], searchButtonClick: [{ type: i0.Output, args: ["searchButtonClick"] }], inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], textareaElement: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }] } });
+
+class NotificationService {
+    notificationsSignal = signal([], ...(ngDevMode ? [{ debugName: "notificationsSignal" }] : /* istanbul ignore next */ []));
+    currentId = 0;
+    notifications = this.notificationsSignal.asReadonly();
+    addNotification(message, type = 'info', showProgress = false, duration = 5000) {
+        const id = (++this.currentId).toString();
+        const notification = {
+            id,
+            message,
+            type,
+            progress: showProgress ? 0 : undefined,
+            showProgress,
+        };
+        this.notificationsSignal.update((notifications) => [
+            ...notifications,
+            notification,
+        ]);
+        if (duration > 0 && !showProgress) {
+            setTimeout(() => this.removeNotificationById(id), duration);
+        }
+        return id;
+    }
+    updateProgress(notificationId, progress) {
+        const currentNotifications = this.notificationsSignal();
+        const index = currentNotifications.findIndex((n) => n.id === notificationId);
+        if (index > -1 && currentNotifications[index].showProgress) {
+            const updatedProgress = Math.min(100, Math.max(0, progress));
+            this.notificationsSignal.update((notifications) => notifications.map((n, i) => i === index ? { ...n, progress: updatedProgress } : n));
+            if (progress >= 100) {
+                setTimeout(() => this.removeNotificationById(notificationId), 2000);
+            }
+        }
+    }
+    removeNotification(notification) {
+        this.removeNotificationById(notification.id);
+    }
+    removeNotificationById(notificationId) {
+        this.notificationsSignal.update((notifications) => notifications.filter((n) => n.id !== notificationId));
+    }
+    clearAll() {
+        this.notificationsSignal.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const icons$5 = {
+    check: LucideCheck,
+    'circle-x': LucideCircleX,
+    info: LucideInfo,
+    'triangle-alert': LucideTriangleAlert,
+    x: LucideX,
+};
+class NotificationComponent {
+    position = input('center-top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    notificationService = inject(NotificationService);
+    getIcon = (name) => icons$5[name] ?? LucideInfo;
+    iconMap = {
+        success: 'check',
+        error: 'circle-x',
+        info: 'info',
+        warning: 'triangle-alert',
+    };
+    getNotificationIcon(type) {
+        return this.iconMap[type] || 'info';
+    }
+    notifications = this.notificationService.notifications;
+    sortedNotifications = computed(() => [...this.notifications()].reverse(), ...(ngDevMode ? [{ debugName: "sortedNotifications" }] : /* istanbul ignore next */ []));
+    removeNotification(notification) {
+        this.notificationService.removeNotification(notification);
+    }
+    roundProgress(progress) {
+        return Math.round(progress || 0);
+    }
+    hasNotifications = computed(() => this.notifications().length > 0, ...(ngDevMode ? [{ debugName: "hasNotifications" }] : /* istanbul ignore next */ []));
+    positionClass = computed(() => {
+        const base = 'fixed top-4 z-[9999] space-y-4 sm:space-y-6 sm:top-6 lg:top-8';
+        switch (this.position()) {
+            case 'right-top':
+                return `${base} right-4`;
+            case 'left-top':
+                return `${base} left-4`;
+            default:
+                return `${base} left-1/2 -translate-x-1/2`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "positionClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: NotificationComponent, isStandalone: true, selector: "shk-notification", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"positionClass()\">\n  @for (notification of sortedNotifications(); track notification.id) {\n    <div\n      [ngClass]=\"{\n        '_shk-bg-green-soft _shk-dark-bg-green-soft _shk-border-green-400 dark:[border-color:var(--shk-success-600)] _shk-text-green-800 dark:[color:var(--shk-success-800)]':\n          notification.type === 'success',\n        '_shk-bg-red-soft _shk-dark-bg-red-soft _shk-border-red-400 dark:[border-color:var(--shk-error-600)] _shk-text-red-800 dark:[color:var(--shk-error-800)]':\n          notification.type === 'error',\n        '_shk-bg-blue-soft _shk-dark-bg-blue-soft _shk-border-blue-400 dark:[border-color:var(--shk-info-600)] _shk-text-blue-800 dark:[color:var(--shk-info-800)]':\n          notification.type === 'info',\n        '_shk-bg-yellow-soft _shk-dark-bg-yellow-soft _shk-border-yellow-400 dark:[border-color:var(--shk-warning-600)] _shk-text-yellow-800 dark:[color:var(--shk-warning-800)]':\n          notification.type === 'warning',\n      }\"\n      class=\"flex items-center w-full min-w-[320px] max-w-xs sm:max-w-sm lg:max-w-md p-4 mb-4 border-l-4 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 transform hover:scale-105 hover:shadow-xl\"\n      role=\"alert\"\n    >\n      <div\n        [ngClass]=\"{\n          '_shk-text-green-600': notification.type === 'success',\n          '_shk-text-red-600': notification.type === 'error',\n          '_shk-text-blue-600': notification.type === 'info',\n          '_shk-text-yellow-600': notification.type === 'warning',\n        }\"\n        class=\"inline-flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-lg bg-opacity-10\"\n      >\n        <svg [lucideIcon]=\"getIcon(getNotificationIcon(notification.type))\" class=\"w-6 h-6\"></svg>\n      </div>\n      <div class=\"ms-4 flex-1 text-sm font-medium break-words\">\n        {{ notification.message }}\n      </div>\n      <button\n        type=\"button\"\n        (click)=\"removeNotification(notification)\"\n        aria-label=\"Close\"\n        [ngClass]=\"{\n          '_shk-text-green-600 hover:[color:var(--shk-green-800)]':\n            notification.type === 'success',\n          '_shk-text-red-600 hover:[color:var(--shk-error-800)]': notification.type === 'error',\n          '_shk-text-blue-600 hover:[color:var(--shk-info-800)]': notification.type === 'info',\n          '_shk-text-yellow-600 hover:[color:var(--shk-warning-800)]':\n            notification.type === 'warning',\n        }\"\n        class=\"mx-2 -my-1.5 bg-transparent focus:outline-none\"\n      >\n        <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-notification', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"positionClass()\">\n  @for (notification of sortedNotifications(); track notification.id) {\n    <div\n      [ngClass]=\"{\n        '_shk-bg-green-soft _shk-dark-bg-green-soft _shk-border-green-400 dark:[border-color:var(--shk-success-600)] _shk-text-green-800 dark:[color:var(--shk-success-800)]':\n          notification.type === 'success',\n        '_shk-bg-red-soft _shk-dark-bg-red-soft _shk-border-red-400 dark:[border-color:var(--shk-error-600)] _shk-text-red-800 dark:[color:var(--shk-error-800)]':\n          notification.type === 'error',\n        '_shk-bg-blue-soft _shk-dark-bg-blue-soft _shk-border-blue-400 dark:[border-color:var(--shk-info-600)] _shk-text-blue-800 dark:[color:var(--shk-info-800)]':\n          notification.type === 'info',\n        '_shk-bg-yellow-soft _shk-dark-bg-yellow-soft _shk-border-yellow-400 dark:[border-color:var(--shk-warning-600)] _shk-text-yellow-800 dark:[color:var(--shk-warning-800)]':\n          notification.type === 'warning',\n      }\"\n      class=\"flex items-center w-full min-w-[320px] max-w-xs sm:max-w-sm lg:max-w-md p-4 mb-4 border-l-4 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 transform hover:scale-105 hover:shadow-xl\"\n      role=\"alert\"\n    >\n      <div\n        [ngClass]=\"{\n          '_shk-text-green-600': notification.type === 'success',\n          '_shk-text-red-600': notification.type === 'error',\n          '_shk-text-blue-600': notification.type === 'info',\n          '_shk-text-yellow-600': notification.type === 'warning',\n        }\"\n        class=\"inline-flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-lg bg-opacity-10\"\n      >\n        <svg [lucideIcon]=\"getIcon(getNotificationIcon(notification.type))\" class=\"w-6 h-6\"></svg>\n      </div>\n      <div class=\"ms-4 flex-1 text-sm font-medium break-words\">\n        {{ notification.message }}\n      </div>\n      <button\n        type=\"button\"\n        (click)=\"removeNotification(notification)\"\n        aria-label=\"Close\"\n        [ngClass]=\"{\n          '_shk-text-green-600 hover:[color:var(--shk-green-800)]':\n            notification.type === 'success',\n          '_shk-text-red-600 hover:[color:var(--shk-error-800)]': notification.type === 'error',\n          '_shk-text-blue-600 hover:[color:var(--shk-info-800)]': notification.type === 'info',\n          '_shk-text-yellow-600 hover:[color:var(--shk-warning-800)]':\n            notification.type === 'warning',\n        }\"\n        class=\"mx-2 -my-1.5 bg-transparent focus:outline-none\"\n      >\n        <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n      </button>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+class ToggleComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    mode = input('toggle', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    checked = input(undefined, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    _value = signal(false, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const manual = this.checked();
+            if (manual !== undefined) {
+                this._value.set(manual);
+            }
+        });
+    }
+    writeValue(value) {
+        this._value.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    toggle() {
+        if (this._disabled())
+            return;
+        const newValue = !this._value();
+        this._value.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.checkedChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ToggleComponent, isStandalone: true, selector: "shk-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div class="relative">
+      <label
+        class="inline-flex items-center gap-3 cursor-pointer select-none"
+        [class.opacity-50]="_disabled()"
+        [class.cursor-not-allowed]="_disabled()"
+      >
+        @if (mode() === 'toggle') {
+          <div class="relative flex-shrink-0" (click)="toggle()">
+            <div
+              class="w-10 h-6 rounded-full transition-colors duration-200"
+              [class._shk-bg-primary]="_value()"
+              [class._shk-bg-surface-300]="!_value()"
+              [class._shk-dark-bg-surface-600]="!_value()"
+            ></div>
+            <div
+              class="absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
+              [class.translate-x-4]="_value()"
+            ></div>
+          </div>
+        } @else {
+          <div
+            class="flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            [class._shk-bg-primary]="_value()"
+            [class._shk-border-primary]="_value()"
+            [class._shk-border-surface-300]="!_value()"
+            [class._shk-dark-border-surface-600]="!_value()"
+            (click)="toggle()"
+          >
+            @if (_value()) {
+              <svg class="w-3 h-3 text-white" viewBox="0 0 12 12" fill="none">
+                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            }
+          </div>
+        }
+        @if (label()) {
+          <span class="text-sm _shk-text-surface-700 _shk-dark-text-surface-300">
+            {{ label() }}
+          </span>
+        }
+      </label>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-toggle',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="relative">
+      <label
+        class="inline-flex items-center gap-3 cursor-pointer select-none"
+        [class.opacity-50]="_disabled()"
+        [class.cursor-not-allowed]="_disabled()"
+      >
+        @if (mode() === 'toggle') {
+          <div class="relative flex-shrink-0" (click)="toggle()">
+            <div
+              class="w-10 h-6 rounded-full transition-colors duration-200"
+              [class._shk-bg-primary]="_value()"
+              [class._shk-bg-surface-300]="!_value()"
+              [class._shk-dark-bg-surface-600]="!_value()"
+            ></div>
+            <div
+              class="absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
+              [class.translate-x-4]="_value()"
+            ></div>
+          </div>
+        } @else {
+          <div
+            class="flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            [class._shk-bg-primary]="_value()"
+            [class._shk-border-primary]="_value()"
+            [class._shk-border-surface-300]="!_value()"
+            [class._shk-dark-border-surface-600]="!_value()"
+            (click)="toggle()"
+          >
+            @if (_value()) {
+              <svg class="w-3 h-3 text-white" viewBox="0 0 12 12" fill="none">
+                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            }
+          </div>
+        }
+        @if (label()) {
+          <span class="text-sm _shk-text-surface-700 _shk-dark-text-surface-300">
+            {{ label() }}
+          </span>
+        }
+      </label>
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+class PriceInputComponent {
+    value = model.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isPercentage = model(false, ...(ngDevMode ? [{ debugName: "isPercentage" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(Infinity, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    showError = input(false, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    toggleMode() {
+        if (this.disabled())
+            return;
+        this.isPercentage.update(v => !v);
+    }
+    onInput(event) {
+        const input = event.target;
+        this.value.set(parseFloat(input.value) || 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PriceInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PriceInputComponent, isStandalone: true, selector: "shk-price-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, isPercentage: { classPropertyName: "isPercentage", publicName: "isPercentage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", isPercentage: "isPercentageChange" }, ngImport: i0, template: "<div>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"text-red-400\">*</span>\n      }\n    </div>\n  }\n  <div class=\"flex\">\n    <input\n      [id]=\"inputId()\"\n      type=\"number\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"value.set($event ?? 0)\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      step=\"0.01\"\n      class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed sm:text-sm\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': showError(),\n        '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !showError()\n      }\"\n    />\n    <button\n      type=\"button\"\n      (click)=\"toggleMode()\"\n      [disabled]=\"disabled()\"\n      class=\"px-3 py-2 text-sm font-medium border rounded-r-lg transition-colors shrink-0\"\n      [ngClass]=\"{\n        '_shk-bg-primary-soft _shk-border-primary-200 _shk-text-primary-700': isPercentage(),\n        '_shk-bg-white _shk-border _shk-text-surface-500 dark:[background-color:var(--shk-surface-800)] dark:[border-color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)]': !isPercentage(),\n        'cursor-not-allowed opacity-50': disabled()\n      }\"\n    >\n      {{ isPercentage() ? '%' : '$' }}\n    </button>\n  </div>\n  @if (showError()) {\n    <div class=\"text-xs _shk-text-red-500 mt-1\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PriceInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-price-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"text-red-400\">*</span>\n      }\n    </div>\n  }\n  <div class=\"flex\">\n    <input\n      [id]=\"inputId()\"\n      type=\"number\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"value.set($event ?? 0)\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      step=\"0.01\"\n      class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-200)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-800)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-800)] disabled:cursor-not-allowed sm:text-sm\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': showError(),\n        '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !showError()\n      }\"\n    />\n    <button\n      type=\"button\"\n      (click)=\"toggleMode()\"\n      [disabled]=\"disabled()\"\n      class=\"px-3 py-2 text-sm font-medium border rounded-r-lg transition-colors shrink-0\"\n      [ngClass]=\"{\n        '_shk-bg-primary-soft _shk-border-primary-200 _shk-text-primary-700': isPercentage(),\n        '_shk-bg-white _shk-border _shk-text-surface-500 dark:[background-color:var(--shk-surface-800)] dark:[border-color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)]': !isPercentage(),\n        'cursor-not-allowed opacity-50': disabled()\n      }\"\n    >\n      {{ isPercentage() ? '%' : '$' }}\n    </button>\n  </div>\n  @if (showError()) {\n    <div class=\"text-xs _shk-text-red-500 mt-1\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], isPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPercentage", required: false }] }, { type: i0.Output, args: ["isPercentageChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DatePickerComponent {
+    elementRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    transloco = inject(TranslocoService);
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    view = input('date', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    minValue = input('', ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    maxValue = input('', ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    locale = input('es', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    viewDecade = signal(Math.floor(new Date().getFullYear() / 10) * 10, ...(ngDevMode ? [{ debugName: "viewDecade" }] : /* istanbul ignore next */ []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabledState = signal(false, ...(ngDevMode ? [{ debugName: "_disabledState" }] : /* istanbul ignore next */ []));
+    subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+    valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+    errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+    hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    actualControl = computed(() => {
+        const ctrl = this.control();
+        if (ctrl)
+            return ctrl;
+        const fg = this.formGroup();
+        const lbl = this.label();
+        if (fg && lbl)
+            return fg.get(lbl);
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+    shouldShowError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
+    }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+    wasFixedError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return this.hadError() && ctrl?.valid && ctrl?.touched;
+    }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+    getErrorMessages = computed(() => {
+        this.errorTracker();
+        const customError = this.errorMessage();
+        if (customError)
+            return [customError];
+        const ctrl = this.actualControl();
+        if (!ctrl?.errors)
+            return [];
+        const customErrors = this.errorMessages();
+        const t = this.transloco;
+        return Object.keys(ctrl.errors).map((key) => {
+            if (customErrors[key])
+                return customErrors[key];
+            switch (key) {
+                case 'required':
+                    return t.translate('validation.required');
+                default:
+                    return t.translate('validation.invalid');
+            }
+        });
+    }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const value = this._value();
+        if (!value)
+            return '';
+        const v = this.view();
+        if (v === 'year') {
+            return value;
+        }
+        if (v === 'month') {
+            const [y, m] = value.split('-').map(Number);
+            const fmt = new Intl.DateTimeFormat(this.locale(), {
+                month: 'long',
+                year: 'numeric',
+            });
+            const label = fmt.format(new Date(y, m - 1, 1));
+            return label.charAt(0).toUpperCase() + label.slice(1);
+        }
+        const fmt = new Intl.DateTimeFormat(this.locale(), {
+            dateStyle: 'long',
+        });
+        return fmt.format(new Date(value + 'T12:00:00'));
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    monthNames = computed(() => {
+        const fmt = new Intl.DateTimeFormat(this.locale(), { month: 'short' });
+        return Array.from({ length: 12 }, (_, i) => {
+            const name = fmt.format(new Date(2000, i, 1)).replace('.', '');
+            return name.charAt(0).toUpperCase() + name.slice(1);
+        });
+    }, ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+    dayNames = computed(() => {
+        const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+        return Array.from({ length: 7 }, (_, i) => {
+            const name = fmt.format(new Date(2024, 0, i + 1));
+            return name.charAt(0).toUpperCase() + name.slice(1, 3);
+        });
+    }, ...(ngDevMode ? [{ debugName: "dayNames" }] : /* istanbul ignore next */ []));
+    daysInMonth = computed(() => {
+        return new Date(this.viewYear(), this.viewMonth() + 1, 0).getDate();
+    }, ...(ngDevMode ? [{ debugName: "daysInMonth" }] : /* istanbul ignore next */ []));
+    firstDayOfMonth = computed(() => {
+        return new Date(this.viewYear(), this.viewMonth(), 1).getDay();
+    }, ...(ngDevMode ? [{ debugName: "firstDayOfMonth" }] : /* istanbul ignore next */ []));
+    calendarDays = computed(() => {
+        const totalDays = this.daysInMonth();
+        const firstDay = this.firstDayOfMonth();
+        const days = [];
+        for (let i = 0; i < firstDay; i++)
+            days.push(null);
+        for (let i = 1; i <= totalDays; i++)
+            days.push(i);
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+    canGoPrev = computed(() => {
+        const v = this.view();
+        const min = this.minValue();
+        if (v === 'date') {
+            if (!min)
+                return true;
+            const prev = new Date(this.viewYear(), this.viewMonth() - 1, 1);
+            return prev >= new Date(min + 'T12:00:00');
+        }
+        if (v === 'month') {
+            const minY = min ? Number(min.split('-')[0]) : undefined;
+            return minY === undefined || this.viewYear() > minY;
+        }
+        const minY = min ? Number(min) : undefined;
+        return minY === undefined || this.viewYear() > minY;
+    }, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
+    canGoNext = computed(() => {
+        const v = this.view();
+        const max = this.maxValue();
+        if (v === 'date') {
+            if (!max)
+                return true;
+            const next = new Date(this.viewYear(), this.viewMonth() + 1, 1);
+            return next <= new Date(max + 'T12:00:00');
+        }
+        if (v === 'month') {
+            const maxY = max ? Number(max.split('-')[0]) : undefined;
+            return maxY === undefined || this.viewYear() < maxY;
+        }
+        const maxY = max ? Number(max) : undefined;
+        return maxY === undefined || this.viewYear() < maxY;
+    }, ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+    selectedYear = computed(() => {
+        const value = this._value();
+        return value ? Number(value.split('-')[0]) : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedYear" }] : /* istanbul ignore next */ []));
+    selectedMonth = computed(() => {
+        const value = this._value();
+        return value ? Number(value.split('-')[1]) - 1 : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : /* istanbul ignore next */ []));
+    selectedDay = computed(() => {
+        const value = this._value();
+        return value && this.view() === 'date' ? Number(value.split('-')[2]) : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
+    decadeYears = computed(() => {
+        const start = this.viewDecade();
+        return Array.from({ length: 12 }, (_, i) => start + i);
+    }, ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+    years = [];
+    constructor() {
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl) {
+                this.subscribed.set(false);
+                return;
+            }
+            if (this.subscribed())
+                return;
+            if (ctrl.invalid && ctrl.touched)
+                this.hadError.set(true);
+            ctrl.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+                if (ctrl.invalid && ctrl.touched)
+                    this.hadError.set(true);
+            });
+            this.subscribed.set(true);
+        });
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl)
+                return;
+            if (!this.valueSubscribed()) {
+                this.writeValue(ctrl.value);
+                ctrl.valueChanges
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((value) => {
+                    this.writeValue(value);
+                });
+                this.valueSubscribed.set(true);
+            }
+        });
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.syncViewToValue();
+            this.isOpen.set(true);
+        }
+    }
+    syncViewToValue() {
+        const val = this._value();
+        const v = this.view();
+        if (!val) {
+            const now = new Date();
+            this.viewYear.set(now.getFullYear());
+            this.viewMonth.set(now.getMonth());
+            this.viewDecade.set(Math.floor(now.getFullYear() / 10) * 10);
+            return;
+        }
+        if (v === 'year') {
+            this.viewYear.set(Number(val));
+        }
+        else if (v === 'month') {
+            this.viewYear.set(Number(val.split('-')[0]));
+        }
+        else {
+            const d = new Date(val + 'T12:00:00');
+            this.viewYear.set(d.getFullYear());
+            this.viewMonth.set(d.getMonth());
+        }
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.onTouched();
+        const ctrl = this.actualControl();
+        if (ctrl)
+            ctrl.markAsTouched();
+        this.errorTracker.update((v) => v + 1);
+        if (ctrl?.invalid && ctrl?.touched)
+            this.hadError.set(true);
+    }
+    prev() {
+        const v = this.view();
+        if (v === 'year') {
+            this.viewDecade.update((d) => d - 12);
+            this.viewYear.update((y) => y - 12);
+        }
+        else if (v === 'month') {
+            this.viewYear.update((y) => y - 1);
+        }
+        else {
+            this.viewMonth.update((m) => {
+                if (m === 0) {
+                    this.viewYear.update((y) => y - 1);
+                    return 11;
+                }
+                return m - 1;
+            });
+        }
+    }
+    next() {
+        const v = this.view();
+        if (v === 'year') {
+            this.viewDecade.update((d) => d + 12);
+            this.viewYear.update((y) => y + 12);
+        }
+        else if (v === 'month') {
+            this.viewYear.update((y) => y + 1);
+        }
+        else {
+            this.viewMonth.update((m) => {
+                if (m === 11) {
+                    this.viewYear.update((y) => y + 1);
+                    return 0;
+                }
+                return m + 1;
+            });
+        }
+    }
+    selectDay(day) {
+        const y = this.viewYear();
+        const m = String(this.viewMonth() + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        const value = `${y}-${m}-${d}`;
+        this.setValue(value);
+    }
+    selectMonth(monthIndex) {
+        const value = `${this.viewYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        this.setValue(value);
+    }
+    selectYear(year) {
+        const value = String(year);
+        this.setValue(value);
+    }
+    setValue(value) {
+        this._value.set(value);
+        this.onChange(value);
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(value);
+            ctrl.markAsDirty();
+        }
+        this.close();
+    }
+    isSelectedDay(day) {
+        return (this.selectedYear() === this.viewYear() &&
+            this.selectedMonth() === this.viewMonth() &&
+            this.selectedDay() === day);
+    }
+    isToday(day) {
+        const now = new Date();
+        return (this.viewYear() === now.getFullYear() &&
+            this.viewMonth() === now.getMonth() &&
+            day === now.getDate());
+    }
+    isSelectedMonth(monthIndex) {
+        return (this.selectedYear() === this.viewYear() &&
+            this.selectedMonth() === monthIndex);
+    }
+    isCurrentMonth(monthIndex) {
+        const now = new Date();
+        return (this.viewYear() === now.getFullYear() && monthIndex === now.getMonth());
+    }
+    isSelectedYear(year) {
+        return this.selectedYear() === year;
+    }
+    isCurrentYear(year) {
+        return new Date().getFullYear() === year;
+    }
+    writeValue(value) {
+        this._value.set(value || null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledState.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DatePickerComponent, isStandalone: true, selector: "shk-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n      class=\"flex items-center justify-between w-full px-3 py-2 text-left _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors sm:text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)]\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n        'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n        '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError(),\n      }\"\n    >\n      <span\n        [ngClass]=\"value() ? '_shk-text-surface-700 dark:[color:var(--shk-surface-200)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-500)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] shrink-0\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n        <path d=\"M16 2v4M8 2v4M3 10h18\"></path>\n      </svg>\n    </button>\n\n    @if (isOpen()) {\n      <div class=\"fixed inset-0 z-40 bg-black/30\" (click)=\"close()\"></div>\n      <div\n        class=\"fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 p-4 bg-white dark:[background-color:var(--shk-surface-800)] _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg shadow-xl\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (view() === 'date') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0 mb-1\">\n            @for (name of dayNames(); track $index) {\n              <div class=\"text-center text-xs font-medium _shk-text-surface-400 dark:[color:var(--shk-surface-500)] py-1\">\n                {{ name }}\n              </div>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0\">\n            @for (day of calendarDays(); track $index) {\n              @if (day !== null) {\n                <button\n                  type=\"button\"\n                  (click)=\"selectDay(day)\"\n                  class=\"py-1.5 text-sm rounded transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedDay(day),\n                    'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedDay(day) && !isToday(day),\n                  }\"\n                >\n                  {{ day }}\n                </button>\n              } @else {\n                <div></div>\n              }\n            }\n          </div>\n        }\n\n        @if (view() === 'month') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">{{ viewYear() }}</span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (name of monthNames(); track $index) {\n              <button\n                type=\"button\"\n                (click)=\"selectMonth($index)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedMonth($index),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedMonth($index) && !isCurrentMonth($index),\n                }\"\n              >\n                {{ name }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (view() === 'year') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">\n              {{ viewDecade() }} - {{ viewDecade() + 11 }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (year of decadeYears(); track year) {\n              <button\n                type=\"button\"\n                (click)=\"selectYear(year)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedYear(year),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedYear(year) && !isCurrentYear(year),\n                }\"\n              >\n                {{ year }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n      class=\"flex items-center justify-between w-full px-3 py-2 text-left _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border rounded-lg transition-colors sm:text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-500)]\"\n      [ngClass]=\"{\n        'border-red-500 focus:border-red-500 focus:ring-red-500': shouldShowError(),\n        'border-green-500 focus:border-green-500 focus:ring-green-500': wasFixedError(),\n        '_shk-border dark:[border-color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:[--tw-ring-color:var(--shk-primary-500)]': !shouldShowError() && !wasFixedError(),\n      }\"\n    >\n      <span\n        [ngClass]=\"value() ? '_shk-text-surface-700 dark:[color:var(--shk-surface-200)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-500)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] shrink-0\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\n        <path d=\"M16 2v4M8 2v4M3 10h18\"></path>\n      </svg>\n    </button>\n\n    @if (isOpen()) {\n      <div class=\"fixed inset-0 z-40 bg-black/30\" (click)=\"close()\"></div>\n      <div\n        class=\"fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 p-4 bg-white dark:[background-color:var(--shk-surface-800)] _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg shadow-xl\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        @if (view() === 'date') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">\n              {{ monthNames()[viewMonth()] }} {{ viewYear() }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0 mb-1\">\n            @for (name of dayNames(); track $index) {\n              <div class=\"text-center text-xs font-medium _shk-text-surface-400 dark:[color:var(--shk-surface-500)] py-1\">\n                {{ name }}\n              </div>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-7 gap-0\">\n            @for (day of calendarDays(); track $index) {\n              @if (day !== null) {\n                <button\n                  type=\"button\"\n                  (click)=\"selectDay(day)\"\n                  class=\"py-1.5 text-sm rounded transition-colors\"\n                  [ngClass]=\"{\n                    '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedDay(day),\n                    'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedDay(day) && !isToday(day),\n                  }\"\n                >\n                  {{ day }}\n                </button>\n              } @else {\n                <div></div>\n              }\n            }\n          </div>\n        }\n\n        @if (view() === 'month') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">{{ viewYear() }}</span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (name of monthNames(); track $index) {\n              <button\n                type=\"button\"\n                (click)=\"selectMonth($index)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedMonth($index),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedMonth($index) && !isCurrentMonth($index),\n                }\"\n              >\n                {{ name }}\n              </button>\n            }\n          </div>\n        }\n\n        @if (view() === 'year') {\n          <div class=\"flex items-center justify-between mb-3\">\n            <button\n              type=\"button\"\n              (click)=\"prev()\"\n              [disabled]=\"!canGoPrev()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"></path>\n              </svg>\n            </button>\n            <span class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">\n              {{ viewDecade() }} - {{ viewDecade() + 11 }}\n            </span>\n            <button\n              type=\"button\"\n              (click)=\"next()\"\n              [disabled]=\"!canGoNext()\"\n              class=\"p-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-30 disabled:cursor-not-allowed\"\n            >\n              <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"></path>\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"grid grid-cols-3 gap-1\">\n            @for (year of decadeYears(); track year) {\n              <button\n                type=\"button\"\n                (click)=\"selectYear(year)\"\n                class=\"py-2 text-sm rounded transition-colors\"\n                [ngClass]=\"{\n                  '_shk-bg-primary _shk-text-white hover:[background-color:var(--shk-primary-700)]': isSelectedYear(year),\n                  'ring-1 [--tw-ring-color:var(--shk-primary-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)]': !isSelectedYear(year) && !isCurrentYear(year),\n                }\"\n              >\n                {{ year }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+const icons$4 = {
+    info: LucideInfo,
+    'triangle-alert': LucideTriangleAlert,
+    x: LucideX,
+    'trash-2': LucideTrash2,
+    loader: LucideLoader,
+};
+class ConfirmDialogComponent {
+    getIcon = (name) => icons$4[name] ?? LucideTriangleAlert;
+    title = input('Confirmar acción', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input('¿Está seguro de realizar esta acción?', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    confirmLabel = input('Confirmar', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancelar', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    loadingText = input('Procesando…', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    type = input('danger', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    showCancel = input(true, ...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    resolveRef = signal(null, ...(ngDevMode ? [{ debugName: "resolveRef" }] : /* istanbul ignore next */ []));
+    closed = output();
+    show() {
+        this.visible.set(true);
+        return new Promise((resolve) => {
+            this.resolveRef.set(resolve);
+        });
+    }
+    onConfirm() {
+        this.visible.set(false);
+        const resolve = this.resolveRef();
+        if (resolve) {
+            resolve(true);
+            this.resolveRef.set(null);
+        }
+        this.closed.emit();
+    }
+    onCancel() {
+        this.visible.set(false);
+        const resolve = this.resolveRef();
+        if (resolve) {
+            resolve(false);
+            this.resolveRef.set(null);
+        }
+        this.closed.emit();
+    }
+    ngOnDestroy() {
+        this.resolveRef.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ConfirmDialogComponent, isStandalone: true, selector: "shk-confirm-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[9999] p-4\"\n    (click)=\"onCancel()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-800)] rounded-2xl shadow-2xl max-w-sm w-full animate-in fade-in zoom-in duration-200 overflow-hidden\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"h-1.5 w-full\"\n        [class._shk-gradient-red]=\"type() === 'danger'\"\n        [class._shk-gradient-blue]=\"type() === 'info'\"\n        [class._shk-bg-amber-400]=\"type() === 'warning'\"\n      ></div>\n      <div class=\"p-6\">\n        <div class=\"flex items-start gap-4 mb-4\">\n          <div\n            class=\"w-12 h-12 rounded-full flex items-center justify-center shrink-0\"\n            [ngClass]=\"{\n              '_shk-bg-red-soft _shk-dark-bg-red-soft _shk-text-red-600 dark:[color:var(--shk-error-400)]': type() === 'danger',\n              '_shk-bg-blue-soft _shk-dark-bg-blue-soft _shk-text-blue-600 dark:[color:var(--shk-info-400)]': type() === 'info',\n              '_shk-bg-amber-soft _shk-dark-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]': type() === 'warning',\n            }\"\n          >\n            @if (type() === 'info') {\n              <svg [lucideIcon]=\"getIcon('info')\" class=\"w-6 h-6\"></svg>\n            } @else {\n              <svg [lucideIcon]=\"getIcon('triangle-alert')\" class=\"w-6 h-6\"></svg>\n            }\n          </div>\n          <div>\n            <h3 class=\"text-lg font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-100)]\">{{ title() }}</h3>\n            <p class=\"_shk-text-surface-500 dark:[color:var(--shk-surface-400)] text-sm leading-relaxed mb-6\">{{ message() }}</p>\n          </div>\n        </div>\n        <div class=\"flex gap-3\">\n          @if (showCancel()) {\n            <button\n              type=\"button\"\n              (click)=\"onCancel()\"\n              [disabled]=\"loading()\"\n              class=\"flex-1 px-4 py-2 text-sm font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-600)] rounded-lg transition-colors flex items-center justify-center gap-2\"\n            >\n              <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n              {{ cancelLabel() }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"loading()\"\n            class=\"flex-1 px-4 py-2 text-sm font-semibold text-white rounded-lg shadow-md transition-all flex items-center justify-center gap-2\"\n            [class._shk-bg-red-600]=\"type() === 'danger'\"\n            [class.hover:[background-color:var(--shk-error-700)]]=\"type() === 'danger'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-error-500)_inset]]=\"type() === 'danger'\"\n            [class._shk-bg-primary]=\"type() === 'info'\"\n            [class.hover:[background-color:var(--shk-primary-700)]]=\"type() === 'info'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-primary-500)_inset]]=\"type() === 'info'\"\n            [class._shk-bg-amber-600]=\"type() === 'warning'\"\n            [class.hover:[background-color:var(--shk-amber-700)]]=\"type() === 'warning'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-amber-500)_inset]]=\"type() === 'warning'\"\n          >\n            @if (loading()) {\n              <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-4 h-4 animate-spin\"></svg>\n            } @else if (type() === 'danger') {\n              <svg [lucideIcon]=\"getIcon('trash-2')\" class=\"w-4 h-4\"></svg>\n            }\n            {{ loading() ? loadingText() : confirmLabel() }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-confirm-dialog', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[9999] p-4\"\n    (click)=\"onCancel()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-800)] rounded-2xl shadow-2xl max-w-sm w-full animate-in fade-in zoom-in duration-200 overflow-hidden\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"h-1.5 w-full\"\n        [class._shk-gradient-red]=\"type() === 'danger'\"\n        [class._shk-gradient-blue]=\"type() === 'info'\"\n        [class._shk-bg-amber-400]=\"type() === 'warning'\"\n      ></div>\n      <div class=\"p-6\">\n        <div class=\"flex items-start gap-4 mb-4\">\n          <div\n            class=\"w-12 h-12 rounded-full flex items-center justify-center shrink-0\"\n            [ngClass]=\"{\n              '_shk-bg-red-soft _shk-dark-bg-red-soft _shk-text-red-600 dark:[color:var(--shk-error-400)]': type() === 'danger',\n              '_shk-bg-blue-soft _shk-dark-bg-blue-soft _shk-text-blue-600 dark:[color:var(--shk-info-400)]': type() === 'info',\n              '_shk-bg-amber-soft _shk-dark-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]': type() === 'warning',\n            }\"\n          >\n            @if (type() === 'info') {\n              <svg [lucideIcon]=\"getIcon('info')\" class=\"w-6 h-6\"></svg>\n            } @else {\n              <svg [lucideIcon]=\"getIcon('triangle-alert')\" class=\"w-6 h-6\"></svg>\n            }\n          </div>\n          <div>\n            <h3 class=\"text-lg font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-100)]\">{{ title() }}</h3>\n            <p class=\"_shk-text-surface-500 dark:[color:var(--shk-surface-400)] text-sm leading-relaxed mb-6\">{{ message() }}</p>\n          </div>\n        </div>\n        <div class=\"flex gap-3\">\n          @if (showCancel()) {\n            <button\n              type=\"button\"\n              (click)=\"onCancel()\"\n              [disabled]=\"loading()\"\n              class=\"flex-1 px-4 py-2 text-sm font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-600)] rounded-lg transition-colors flex items-center justify-center gap-2\"\n            >\n              <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n              {{ cancelLabel() }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"loading()\"\n            class=\"flex-1 px-4 py-2 text-sm font-semibold text-white rounded-lg shadow-md transition-all flex items-center justify-center gap-2\"\n            [class._shk-bg-red-600]=\"type() === 'danger'\"\n            [class.hover:[background-color:var(--shk-error-700)]]=\"type() === 'danger'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-error-500)_inset]]=\"type() === 'danger'\"\n            [class._shk-bg-primary]=\"type() === 'info'\"\n            [class.hover:[background-color:var(--shk-primary-700)]]=\"type() === 'info'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-primary-500)_inset]]=\"type() === 'info'\"\n            [class._shk-bg-amber-600]=\"type() === 'warning'\"\n            [class.hover:[background-color:var(--shk-amber-700)]]=\"type() === 'warning'\"\n            [class.[box-shadow:0_0_0_1px_var(--shk-amber-500)_inset]]=\"type() === 'warning'\"\n          >\n            @if (loading()) {\n              <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-4 h-4 animate-spin\"></svg>\n            } @else if (type() === 'danger') {\n              <svg [lucideIcon]=\"getIcon('trash-2')\" class=\"w-4 h-4\"></svg>\n            }\n            {{ loading() ? loadingText() : confirmLabel() }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class ConfirmDialogService {
+    dialogRef = null;
+    destroyRef = inject(DestroyRef);
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    constructor() {
+        this.destroyRef.onDestroy(() => this.cleanupDialog());
+    }
+    async confirm(config) {
+        if (this.dialogRef)
+            this.cleanupDialog();
+        this.dialogRef = createComponent(ConfirmDialogComponent, {
+            environmentInjector: this.injector,
+        });
+        this.dialogRef.setInput('title', config.title ?? 'Confirmar acción');
+        this.dialogRef.setInput('message', config.message);
+        this.dialogRef.setInput('confirmLabel', config.confirmLabel ?? 'Confirmar');
+        this.dialogRef.setInput('cancelLabel', config.cancelLabel ?? 'Cancelar');
+        this.dialogRef.setInput('loadingText', config.loadingText ?? 'Procesando…');
+        this.dialogRef.setInput('type', config.type ?? 'danger');
+        this.dialogRef.setInput('showCancel', config.showCancel ?? true);
+        this.dialogRef.setInput('loading', config.loading ?? false);
+        document.body.appendChild(this.dialogRef.location.nativeElement);
+        this.appRef.attachView(this.dialogRef.hostView);
+        try {
+            return await this.dialogRef.instance.show();
+        }
+        finally {
+            this.cleanupDialog();
+        }
+    }
+    cleanupDialog() {
+        if (this.dialogRef) {
+            this.appRef.detachView(this.dialogRef.hostView);
+            this.dialogRef.destroy();
+            this.dialogRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class ModalService {
+    stackSignal = signal([], ...(ngDevMode ? [{ debugName: "stackSignal" }] : /* istanbul ignore next */ []));
+    closeRequestSignal = signal(0, ...(ngDevMode ? [{ debugName: "closeRequestSignal" }] : /* istanbul ignore next */ []));
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        this.router.events.subscribe(() => {
+            this.stackSignal.set([]);
+        });
+        this.destroyRef.onDestroy(() => this.stackSignal.set([]));
+    }
+    modalStack = computed(() => this.stackSignal(), ...(ngDevMode ? [{ debugName: "modalStack" }] : /* istanbul ignore next */ []));
+    currentModal = computed(() => {
+        const stack = this.stackSignal();
+        return stack.length > 0 ? stack[stack.length - 0] : null;
+    }, ...(ngDevMode ? [{ debugName: "currentModal" }] : /* istanbul ignore next */ []));
+    closeRequest = computed(() => this.closeRequestSignal(), ...(ngDevMode ? [{ debugName: "closeRequest" }] : /* istanbul ignore next */ []));
+    open(config) {
+        this.stackSignal.update((stack) => [...stack, config]);
+    }
+    accept() {
+        this.close();
+    }
+    close() {
+        const stack = this.stackSignal();
+        if (stack.length > 0) {
+            stack[stack.length - 1]?.onClose?.();
+            this.stackSignal.set(stack.slice(0, -1));
+            this.closeRequestSignal.update((v) => v + 1);
+        }
+    }
+    clear() {
+        this.stackSignal.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const icons$3 = {
+    x: LucideX,
+    check: LucideCheck,
+    'maximize-2': LucideMaximize2,
+    'minimize-2': LucideMinimize2,
+    'loader-circle': LucideLoaderCircle,
+};
+class ModalComponent {
+    getIcon = (name) => icons$3[name] ?? LucideX;
+    notificationSrv = inject(NotificationService);
+    destroyRef = inject(DestroyRef);
+    modalSrv = inject(ModalService);
+    transloco = inject(TranslocoService);
+    container = viewChild('dynamicContent', { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    currentConfig = signal(null, ...(ngDevMode ? [{ debugName: "currentConfig" }] : /* istanbul ignore next */ []));
+    title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "isProcessing" }] : /* istanbul ignore next */ []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isFormValid = signal(false, ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    componentRef = null;
+    subscriptions = [];
+    computedModalWidth = computed(() => {
+        return this.isExpanded() ? '100vw' : (this.currentConfig()?.width ?? '560px');
+    }, ...(ngDevMode ? [{ debugName: "computedModalWidth" }] : /* istanbul ignore next */ []));
+    modalButtonsVisible = computed(() => this.currentConfig()?.showButtons ?? true, ...(ngDevMode ? [{ debugName: "modalButtonsVisible" }] : /* istanbul ignore next */ []));
+    showExpandButton = computed(() => this.currentConfig()?.showExpandButton ?? false, ...(ngDevMode ? [{ debugName: "showExpandButton" }] : /* istanbul ignore next */ []));
+    cancelLabel = computed(() => this.currentConfig()?.cancelLabel || 'Cancelar', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    acceptLabel = computed(() => this.currentConfig()?.acceptLabel || 'Aceptar', ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const config = this.modalSrv.currentModal();
+            if (config) {
+                this.currentConfig.set(config);
+                this.title.set(config.title);
+                this.isExpanded.set(false);
+                this.visible.set(true);
+                setTimeout(() => {
+                    untracked(() => this.loadComponent(config));
+                });
+                this.isProcessing.set(false);
+                this.loading.set(false);
+            }
+            else {
+                this.visible.set(false);
+                this.currentConfig.set(null);
+            }
+        });
+        this.destroyRef.onDestroy(() => this.cleanup());
+    }
+    onVisibleChange(show) {
+        this.visible.set(show);
+        if (!show) {
+            this.closeModal();
+        }
+    }
+    loadComponent(config) {
+        const containerRef = this.container();
+        if (!containerRef)
+            return;
+        this.cleanup();
+        containerRef.clear();
+        this.componentRef = containerRef.createComponent(config.component);
+        if (config.data) {
+            Object.entries(config.data).forEach(([key, value]) => {
+                this.componentRef?.setInput(key, value);
+            });
+        }
+        const instance = this.componentRef.instance;
+        this.subscribeToOutput(instance.formValid, (valid) => this.isFormValid.set(valid));
+        this.subscribeToOutput(instance.submitSuccess, () => this.handleSubmit(true));
+        this.subscribeToOutput(instance.submitError, () => this.handleSubmit(false));
+        this.componentRef.changeDetectorRef.markForCheck();
+    }
+    subscribeToOutput(output, callback) {
+        if (output?.subscribe) {
+            this.subscriptions.push(output.subscribe(callback));
+        }
+    }
+    handleSubmit(success) {
+        this.isProcessing.set(false);
+        this.loading.set(false);
+        if (success) {
+            untracked(() => this.modalSrv.accept());
+        }
+    }
+    closeModal() {
+        if (this.componentRef?.instance?.handleCancel) {
+            this.componentRef.instance.handleCancel();
+        }
+        this.doClose();
+    }
+    doClose() {
+        this.visible.set(false);
+        this.isProcessing.set(false);
+        this.loading.set(false);
+        if (this.isExpanded()) {
+            this.isExpanded.set(false);
+        }
+        setTimeout(() => {
+            this.cleanup();
+            this.modalSrv.close();
+        }, 100);
+    }
+    toggleExpand() {
+        this.isExpanded.update((v) => !v);
+    }
+    onAccept() {
+        if (!this.componentRef || !this.isDynamicComponent(this.componentRef.instance))
+            return;
+        if (this.isProcessing())
+            return;
+        const instance = this.componentRef.instance;
+        const form = this.getForm(instance);
+        if (form) {
+            this.markAllAsTouched(form);
+            this.componentRef.changeDetectorRef.markForCheck();
+            if (this.hasRealErrors(form)) {
+                this.notificationSrv.addNotification(this.transloco.translate('modal.formInvalid'), 'warning');
+                return;
+            }
+        }
+        this.isProcessing.set(true);
+        this.loading.set(true);
+        instance.onSubmit();
+    }
+    getForm(instance) {
+        if (!instance['form'])
+            return null;
+        return typeof instance['form'] === 'function'
+            ? instance['form']()
+            : instance['form'];
+    }
+    hasRealErrors(control) {
+        if (control instanceof FormControl) {
+            const errors = control.errors;
+            return errors
+                ? Object.keys(errors).some((key) => key !== 'warning')
+                : false;
+        }
+        const groupErrors = control.errors;
+        if (groupErrors &&
+            Object.keys(groupErrors).some((key) => key !== 'warning')) {
+            return true;
+        }
+        return Object.values(control.controls).some((child) => this.hasRealErrors(child));
+    }
+    markAllAsTouched(control) {
+        control.markAsTouched();
+        control.updateValueAndValidity({ onlySelf: true, emitEvent: true });
+        if (control instanceof FormGroup) {
+            Object.values(control.controls).forEach((child) => this.markAllAsTouched(child));
+        }
+    }
+    isDynamicComponent(instance) {
+        return typeof instance?.onSubmit === 'function' && instance?.form !== undefined;
+    }
+    cleanup() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+        this.subscriptions = [];
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ModalComponent, isStandalone: true, selector: "shk-modal", viewQueries: [{ propertyName: "container", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm flex items-start justify-center z-40 p-4 pt-[5vh] sm:pt-[10vh] overflow-y-auto\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-800)] rounded-xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200\"\n      [class.w-[95vw]]=\"isExpanded()\"\n      [class.h-[90vh]]=\"isExpanded()\"\n      [class.w-full]=\"!isExpanded()\"\n      [style.max-width]=\"isExpanded() ? undefined : computedModalWidth()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"h-1.5 w-full _shk-gradient-emerald shrink-0\"></div>\n\n      <div class=\"flex items-center justify-between px-6 pt-4 pb-2 shrink-0\">\n        <span class=\"font-semibold text-lg _shk-text-surface-800 dark:[color:var(--shk-surface-100)]\">{{ title() }}</span>\n        <div class=\"flex items-center gap-2\">\n          @if (showExpandButton()) {\n            <button\n              type=\"button\"\n              (click)=\"toggleExpand()\"\n              class=\"p-1.5 rounded-lg hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] _shk-text-surface-500 dark:[color:var(--shk-surface-400)] transition-colors\"\n            >\n              @if (isExpanded()) {\n                <svg [lucideIcon]=\"getIcon('minimize-2')\" class=\"w-4 h-4\"></svg>\n              } @else {\n                <svg [lucideIcon]=\"getIcon('maximize-2')\" class=\"w-4 h-4\"></svg>\n              }\n            </button>\n          }\n          <button\n            type=\"button\"\n            (click)=\"closeModal()\"\n            class=\"p-1.5 rounded-lg hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] _shk-text-surface-500 dark:[color:var(--shk-surface-400)] transition-colors\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"overflow-y-auto px-6 py-4 flex-1 max-h-[70vh]\">\n        <ng-container #dynamicContent></ng-container>\n      </div>\n\n      @if (modalButtonsVisible()) {\n        <hr class=\"border-t _shk-border dark:[border-color:var(--shk-surface-700)] shrink-0\" />\n        <div class=\"flex justify-end gap-3 px-6 py-4 shrink-0\">\n          <button\n            type=\"button\"\n            (click)=\"closeModal()\"\n            [disabled]=\"loading()\"\n            class=\"px-4 py-2 text-sm font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-600)] rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"onAccept()\"\n            [disabled]=\"loading()\"\n            class=\"px-4 py-2 text-sm font-semibold _shk-text-white _shk-bg-primary hover:[background-color:var(--shk-primary-700)] rounded-lg shadow-md transition-all flex items-center gap-2 disabled:opacity-50\"\n          >\n            @if (loading()) {\n              <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 animate-spin\"></svg>\n            } @else {\n              <svg [lucideIcon]=\"getIcon('check')\" class=\"w-4 h-4\"></svg>\n            }\n            {{ acceptLabel() }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-modal', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm flex items-start justify-center z-40 p-4 pt-[5vh] sm:pt-[10vh] overflow-y-auto\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-800)] rounded-xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200\"\n      [class.w-[95vw]]=\"isExpanded()\"\n      [class.h-[90vh]]=\"isExpanded()\"\n      [class.w-full]=\"!isExpanded()\"\n      [style.max-width]=\"isExpanded() ? undefined : computedModalWidth()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"h-1.5 w-full _shk-gradient-emerald shrink-0\"></div>\n\n      <div class=\"flex items-center justify-between px-6 pt-4 pb-2 shrink-0\">\n        <span class=\"font-semibold text-lg _shk-text-surface-800 dark:[color:var(--shk-surface-100)]\">{{ title() }}</span>\n        <div class=\"flex items-center gap-2\">\n          @if (showExpandButton()) {\n            <button\n              type=\"button\"\n              (click)=\"toggleExpand()\"\n              class=\"p-1.5 rounded-lg hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] _shk-text-surface-500 dark:[color:var(--shk-surface-400)] transition-colors\"\n            >\n              @if (isExpanded()) {\n                <svg [lucideIcon]=\"getIcon('minimize-2')\" class=\"w-4 h-4\"></svg>\n              } @else {\n                <svg [lucideIcon]=\"getIcon('maximize-2')\" class=\"w-4 h-4\"></svg>\n              }\n            </button>\n          }\n          <button\n            type=\"button\"\n            (click)=\"closeModal()\"\n            class=\"p-1.5 rounded-lg hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] _shk-text-surface-500 dark:[color:var(--shk-surface-400)] transition-colors\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"overflow-y-auto px-6 py-4 flex-1 max-h-[70vh]\">\n        <ng-container #dynamicContent></ng-container>\n      </div>\n\n      @if (modalButtonsVisible()) {\n        <hr class=\"border-t _shk-border dark:[border-color:var(--shk-surface-700)] shrink-0\" />\n        <div class=\"flex justify-end gap-3 px-6 py-4 shrink-0\">\n          <button\n            type=\"button\"\n            (click)=\"closeModal()\"\n            [disabled]=\"loading()\"\n            class=\"px-4 py-2 text-sm font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-600)] rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"onAccept()\"\n            [disabled]=\"loading()\"\n            class=\"px-4 py-2 text-sm font-semibold _shk-text-white _shk-bg-primary hover:[background-color:var(--shk-primary-700)] rounded-lg shadow-md transition-all flex items-center gap-2 disabled:opacity-50\"\n          >\n            @if (loading()) {\n              <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 animate-spin\"></svg>\n            } @else {\n              <svg [lucideIcon]=\"getIcon('check')\" class=\"w-4 h-4\"></svg>\n            }\n            {{ acceptLabel() }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.ViewChild, args: ['dynamicContent', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+const icons$2 = {
+    'chevron-down': LucideChevronDown,
+    'chevron-left': LucideChevronLeft,
+    'chevron-right': LucideChevronRight,
+};
+class SelectComponent {
+    elementRef;
+    getIcon = (name) => icons$2[name] ?? LucideChevronDown;
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    validCombinations = input(undefined, ...(ngDevMode ? [{ debugName: "validCombinations" }] : /* istanbul ignore next */ []));
+    placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isAllDataLoaded = input(false, ...(ngDevMode ? [{ debugName: "isAllDataLoaded" }] : /* istanbul ignore next */ []));
+    allowCustomEntries = input(false, ...(ngDevMode ? [{ debugName: "allowCustomEntries" }] : /* istanbul ignore next */ []));
+    formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    isSearchable = input(false, ...(ngDevMode ? [{ debugName: "isSearchable" }] : /* istanbul ignore next */ []));
+    itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+    control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    usePagination = input(false, ...(ngDevMode ? [{ debugName: "usePagination" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorMessages = input({
+        required: 'Este campo es requerido',
+    }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    preserveSearchOnLoad = input(false, ...(ngDevMode ? [{ debugName: "preserveSearchOnLoad" }] : /* istanbul ignore next */ []));
+    emptyMessageKey = input('common.no_records', ...(ngDevMode ? [{ debugName: "emptyMessageKey" }] : /* istanbul ignore next */ []));
+    dropdownUpward = input(false, ...(ngDevMode ? [{ debugName: "dropdownUpward" }] : /* istanbul ignore next */ []));
+    showEmptyOption = input(true, ...(ngDevMode ? [{ debugName: "showEmptyOption" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    search = output();
+    filterInput = viewChild('filterInput', ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+    selectContainer = viewChild('selectContainer', ...(ngDevMode ? [{ debugName: "selectContainer" }] : /* istanbul ignore next */ []));
+    selectTrigger = viewChild('selectTrigger', ...(ngDevMode ? [{ debugName: "selectTrigger" }] : /* istanbul ignore next */ []));
+    dropdownContainer = viewChild('dropdownContainer', ...(ngDevMode ? [{ debugName: "dropdownContainer" }] : /* istanbul ignore next */ []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    searchTermChanged = signal(false, ...(ngDevMode ? [{ debugName: "searchTermChanged" }] : /* istanbul ignore next */ []));
+    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    debounceTimer = null;
+    errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+    hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+    subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+    valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    actualControl = computed(() => {
+        const ctrl = this.control();
+        if (ctrl)
+            return ctrl;
+        const fg = this.formGroup();
+        const lbl = this.label();
+        if (fg && lbl) {
+            return fg.get(lbl);
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+    shouldShowError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
+    }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+    wasFixedError = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        return this.hadError() && ctrl?.valid && ctrl?.touched;
+    }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const val = this._value();
+        const opts = this.options();
+        const isMultiple = this.multiple();
+        const ph = this.placeholder();
+        if (!val || (Array.isArray(val) && val.length === 0)) {
+            return ph;
+        }
+        if (isMultiple) {
+            const values = Array.isArray(val) ? val : [];
+            const selectedLabels = opts
+                .filter((option) => values.includes(option.value))
+                .map((option) => option.label);
+            if (selectedLabels.length === 0) {
+                return values.toString();
+            }
+            return selectedLabels.join(', ');
+        }
+        const selectedOption = opts.find((opt) => opt.value === val);
+        return selectedOption ? selectedOption.label : val;
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    getErrorMessages = computed(() => {
+        this.errorTracker();
+        const ctrl = this.actualControl();
+        if (!ctrl?.errors)
+            return [];
+        const customErrors = this.errorMessages();
+        const t = this.transloco;
+        return Object.keys(ctrl.errors).map((errorKey) => {
+            if (customErrors[errorKey])
+                return customErrors[errorKey];
+            switch (errorKey) {
+                case 'required':
+                    return t.translate('validation.required');
+                case 'email':
+                    return t.translate('validation.email');
+                case 'minlength':
+                    return t.translate('validation.minlength', {
+                        min: ctrl.errors['minlength'].requiredLength,
+                    });
+                case 'maxlength':
+                    return t.translate('validation.maxlength', {
+                        max: ctrl.errors['maxlength'].requiredLength,
+                    });
+                case 'pattern':
+                    return t.translate('validation.pattern');
+                default:
+                    return t.translate('validation.invalid');
+            }
+        });
+    }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const opts = this.options();
+        const term = this.searchTerm();
+        if (!term)
+            return opts;
+        const normalizedSearchTerm = this.normalizeText(term);
+        const matched = opts.filter((option) => this.normalizeText(option.label).includes(normalizedSearchTerm));
+        return matched.sort((a, b) => {
+            const aLbl = this.normalizeText(a.label);
+            const bLbl = this.normalizeText(b.label);
+            const aStarts = aLbl.startsWith(normalizedSearchTerm);
+            const bStarts = bLbl.startsWith(normalizedSearchTerm);
+            if (aStarts && !bStarts)
+                return -1;
+            if (!aStarts && bStarts)
+                return 1;
+            return 0;
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    paginatedOptions = computed(() => {
+        let filtered = this.filteredOptions();
+        const term = this.searchTerm();
+        const allowCustom = this.allowCustomEntries();
+        if (allowCustom && term && !filtered.some((o) => o.value === term)) {
+            filtered = [
+                {
+                    label: `${term} (nuevo)`,
+                    value: term,
+                    custom: true,
+                },
+                ...filtered,
+            ];
+        }
+        if (!this.usePagination()) {
+            return filtered;
+        }
+        const page = this.currentPage();
+        const perPage = this.itemsPerPage();
+        const startIndex = (page - 1) * perPage;
+        const endIndex = startIndex + perPage;
+        return filtered.slice(startIndex, endIndex);
+    }, ...(ngDevMode ? [{ debugName: "paginatedOptions" }] : /* istanbul ignore next */ []));
+    regularOptions = computed(() => {
+        const opts = this.paginatedOptions().filter((option) => !option.custom);
+        if (!this.multiple() && this.showEmptyOption()) {
+            return [{ label: '- Sin selección -', value: null }, ...opts];
+        }
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "regularOptions" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => {
+        if (!this.usePagination()) {
+            return 1;
+        }
+        const filtered = this.filteredOptions();
+        const perPage = this.itemsPerPage();
+        return Math.ceil(filtered.length / perPage);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    hasSelectedValues = computed(() => {
+        const val = this._value();
+        if (this.multiple()) {
+            return val && val.length > 0;
+        }
+        return !!val;
+    }, ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : /* istanbul ignore next */ []));
+    showCustomOption = computed(() => {
+        const term = this.searchTerm();
+        const opts = this.options();
+        return (this.allowCustomEntries() &&
+            term !== '' &&
+            !opts.some((o) => o.value === term));
+    }, ...(ngDevMode ? [{ debugName: "showCustomOption" }] : /* istanbul ignore next */ []));
+    transloco = inject(TranslocoService);
+    onChange = (_) => { };
+    onTouched = () => { };
+    destroyRef = inject(DestroyRef);
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        effect(() => {
+            const term = this.searchTerm();
+            if (term !== '' && this.isSearchable()) {
+                if (this.debounceTimer) {
+                    clearTimeout(this.debounceTimer);
+                }
+                this.debounceTimer = setTimeout(() => {
+                    this.search.emit(term);
+                }, 300);
+            }
+        });
+        effect(() => {
+            const isMultiple = this.multiple();
+            if (this._value() === null || this._value() === undefined) {
+                this._value.set(isMultiple ? [] : null);
+            }
+        });
+        effect(() => {
+            this.options();
+            this.currentPage.set(1);
+            if (!this.preserveSearchOnLoad() || !this.searchTermChanged()) {
+                this.searchTerm.set('');
+            }
+        });
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl) {
+                this.subscribed.set(false);
+                return;
+            }
+            if (this.subscribed())
+                return;
+            if (ctrl.invalid && ctrl.touched) {
+                this.hadError.set(true);
+            }
+            ctrl.statusChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+                if (ctrl.invalid && ctrl.touched) {
+                    this.hadError.set(true);
+                }
+            });
+            ctrl.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.errorTracker.update((v) => v + 1);
+            });
+            this.subscribed.set(true);
+        });
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.errorTracker.update((v) => v + 1);
+        });
+        effect(() => {
+            const ctrl = this.actualControl();
+            if (!ctrl)
+                return;
+            if (!this.valueSubscribed()) {
+                this.writeValue(ctrl.value);
+                ctrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                    this.writeValue(value);
+                });
+                this.valueSubscribed.set(true);
+            }
+        });
+    }
+    setDisabledState(isDisabled) {
+        this._isDisabled.set(isDisabled);
+    }
+    markAsTouchedAndUpdate() {
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.markAsTouched();
+            ctrl.updateValueAndValidity({ emitEvent: false });
+        }
+        this.onTouched();
+        this.errorTracker.update((v) => v + 1);
+        if (ctrl?.invalid) {
+            this.hadError.set(true);
+        }
+    }
+    normalizeText(text) {
+        return text
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase();
+    }
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    if (this.focusedIndex() >= 0) {
+                        const options = this.regularOptions();
+                        const selectedOption = options[this.focusedIndex()];
+                        if (selectedOption && !this.isOptionDisabled(selectedOption)) {
+                            this.selectOption(selectedOption);
+                        }
+                    }
+                }
+                else {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    this.isOpen.set(false);
+                    this.searchTerm.set('');
+                    this.focusedIndex.set(-1);
+                    this.selectTrigger()?.nativeElement.focus();
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggleDropdown();
+                }
+                else {
+                    this.moveFocus(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.moveFocus(-1);
+                }
+                break;
+            case 'Tab':
+                if (this.isOpen()) {
+                    this.isOpen.set(false);
+                    this.searchTerm.set('');
+                    this.focusedIndex.set(-1);
+                }
+                break;
+        }
+    }
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.focusedIndex() >= 0) {
+                    const options = this.regularOptions();
+                    const option = options[this.focusedIndex()];
+                    if (option && !this.isOptionDisabled(option)) {
+                        this.selectOption(option);
+                    }
+                }
+                else {
+                    const filtered = this.filteredOptions();
+                    if (filtered.length > 0) {
+                        this.selectOption(filtered[0]);
+                    }
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveFocus(-1);
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                event.preventDefault();
+                this.isOpen.set(false);
+                this.searchTerm.set('');
+                this.focusedIndex.set(-1);
+                this.selectTrigger()?.nativeElement.focus();
+                break;
+        }
+    }
+    moveFocus(direction) {
+        const options = this.regularOptions();
+        if (!options.length)
+            return;
+        let newIndex = this.focusedIndex();
+        do {
+            newIndex = newIndex + direction;
+            if (newIndex < 0)
+                newIndex = options.length - 1;
+            if (newIndex >= options.length)
+                newIndex = 0;
+        } while (this.isOptionDisabled(options[newIndex]) && options.length > 1);
+        this.focusedIndex.set(newIndex);
+        setTimeout(() => {
+            const container = this.dropdownContainer()?.nativeElement;
+            const activeItem = container?.querySelector('.select-option-active');
+            if (activeItem && container) {
+                const itemTop = activeItem.offsetTop;
+                const itemBottom = itemTop + activeItem.offsetHeight;
+                const containerScrollTop = container.scrollTop;
+                const containerHeight = container.clientHeight;
+                if (itemTop < containerScrollTop) {
+                    container.scrollTop = itemTop;
+                }
+                else if (itemBottom > containerScrollTop + containerHeight) {
+                    container.scrollTop = itemBottom - containerHeight;
+                }
+            }
+        });
+    }
+    getSelectedIndex() {
+        const currentVal = this._value();
+        const options = this.regularOptions();
+        if (currentVal === null || currentVal === undefined)
+            return -1;
+        const index = options.findIndex((opt) => opt.value === currentVal);
+        return index >= 0 ? index : -1;
+    }
+    isOptionDisabled(option) {
+        if (option.value === null)
+            return false;
+        const validCombos = this.validCombinations();
+        if (!validCombos || !this.multiple()) {
+            return false;
+        }
+        const currentSelection = Array.isArray(this._value()) ? this._value() : [];
+        if (currentSelection.length === 0) {
+            return false;
+        }
+        if (currentSelection.includes(option.value)) {
+            return false;
+        }
+        const hypotheticalSelection = [...currentSelection, option.value];
+        return !validCombos.some((combination) => {
+            const allSelected = hypotheticalSelection.every((selected) => combination.includes(selected));
+            const withinLimit = hypotheticalSelection.length <= combination.length;
+            return allSelected && withinLimit;
+        });
+    }
+    isSelected(option) {
+        const val = this._value();
+        if (this.multiple()) {
+            return Array.isArray(val) && val.includes(option.value);
+        }
+        return val === option.value;
+    }
+    nextPage() {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (current < total) {
+            this.currentPage.set(current + 1);
+        }
+    }
+    previousPage() {
+        const current = this.currentPage();
+        if (current > 1) {
+            this.currentPage.set(current - 1);
+        }
+    }
+    onClickOutside(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside && this.isOpen()) {
+            this.markAsTouchedAndUpdate();
+            this.isOpen.set(false);
+            this.searchTerm.set('');
+            this.focusedIndex.set(-1);
+        }
+    }
+    onCustomOptionClick() {
+        const term = this.searchTerm();
+        const customOption = {
+            label: term,
+            value: term,
+        };
+        this._value.set(customOption.value);
+        this.onChange(customOption.value);
+        this.selectionChange.emit(customOption.value);
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(customOption.value);
+        }
+        this.markAsTouchedAndUpdate();
+    }
+    onInputChange(event) {
+        const previousSearch = this.searchTerm();
+        const target = event.target;
+        this.searchTerm.set(target.value);
+        this.searchTermChanged.set(true);
+        if (previousSearch !== this.searchTerm()) {
+            this.search.emit(this.searchTerm());
+            if (this.allowCustomEntries() && this.searchTerm()) {
+                this._value.set(this.searchTerm());
+                this.onChange(this.searchTerm());
+                this.selectionChange.emit(this.searchTerm());
+            }
+        }
+        this.currentPage.set(1);
+    }
+    onOptionClick(option) {
+        if (this.isDisabled())
+            return;
+        if (this.allowCustomEntries() && option.value === this.searchTerm()) {
+            const customOption = {
+                label: this.searchTerm(),
+                value: this.searchTerm(),
+            };
+            this._value.set(customOption.value);
+            this.onChange(customOption.value);
+            this.selectionChange.emit(customOption.value);
+            this.isOpen.set(false);
+            this.searchTerm.set('');
+            const ctrl = this.actualControl();
+            if (ctrl) {
+                ctrl.setValue(customOption.value);
+            }
+            this.markAsTouchedAndUpdate();
+            return;
+        }
+        if (this.multiple()) {
+            this.toggleOption(option);
+        }
+        else {
+            this.selectOption(option);
+        }
+    }
+    selectOption(option) {
+        if (this.multiple()) {
+            this.toggleOption(option);
+            return;
+        }
+        this._value.set(option.value);
+        this.onChange(option.value);
+        this.onTouched();
+        this.selectionChange.emit(option.value);
+        this.isOpen.set(false);
+        const ctrl = this.actualControl();
+        if (ctrl) {
+            ctrl.setValue(option.value);
+        }
+        this.markAsTouchedAndUpdate();
+        this.focusedIndex.set(-1);
+        this.selectTrigger()?.nativeElement.focus();
+    }
+    toggleOption(option) {
+        if (this.isOptionDisabled(option))
+            return;
+        if (!this.multiple())
+            return;
+        let currentValue = this._value();
+        if (!Array.isArray(currentValue)) {
+            currentValue = [];
+        }
+        const index = currentValue.indexOf(option.value);
+        let newValue;
+        if (index === -1) {
+            newValue = [...currentValue, option.value];
+        }
+        else {
+            newValue = currentValue.filter((v) => v !== option.value);
+        }
+        this._value.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.selectionChange.emit(newValue);
+        this.markAsTouchedAndUpdate();
+    }
+    toggleDropdown() {
+        if (this.isDisabled())
+            return;
+        const wasOpen = this.isOpen();
+        this.isOpen.update((v) => !v);
+        if (!wasOpen && this.isOpen()) {
+            const selectedIdx = this.getSelectedIndex();
+            this.focusedIndex.set(selectedIdx);
+        }
+        else if (wasOpen && !this.isOpen()) {
+            this.searchTerm.set('');
+            this.focusedIndex.set(-1);
+            this.selectTrigger()?.nativeElement.focus();
+        }
+        if (this.isOpen() && this.isSearchable()) {
+            setTimeout(() => {
+                this.filterInput()?.nativeElement?.focus();
+            });
+        }
+        this.onTouched();
+    }
+    trackByFn(index, option) {
+        return option.value;
+    }
+    writeValue(value) {
+        if (value === null ||
+            value === undefined ||
+            value === '' ||
+            (Array.isArray(value) && value.length === 0)) {
+            this._value.set(this.multiple() ? [] : null);
+        }
+        else {
+            this._value.set(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SelectComponent, isStandalone: true, selector: "shk-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validCombinations: { classPropertyName: "validCombinations", publicName: "validCombinations", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isAllDataLoaded: { classPropertyName: "isAllDataLoaded", publicName: "isAllDataLoaded", isSignal: true, isRequired: false, transformFunction: null }, allowCustomEntries: { classPropertyName: "allowCustomEntries", publicName: "allowCustomEntries", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, isSearchable: { classPropertyName: "isSearchable", publicName: "isSearchable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, usePagination: { classPropertyName: "usePagination", publicName: "usePagination", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, preserveSearchOnLoad: { classPropertyName: "preserveSearchOnLoad", publicName: "preserveSearchOnLoad", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageKey: { classPropertyName: "emptyMessageKey", publicName: "emptyMessageKey", isSignal: true, isRequired: false, transformFunction: null }, dropdownUpward: { classPropertyName: "dropdownUpward", publicName: "dropdownUpward", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", search: "search" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true, isSignal: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #selectContainer\n  class=\"relative w-full font-sans outline-none\"\n>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div\n    #selectTrigger\n    class=\"flex justify-between items-center w-full px-3 py-2 border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-800)] focus-within:ring-1 focus-within:[--tw-ring-color:var(--shk-primary-500)] focus-within:[border-color:var(--shk-primary-500)] focus:outline-none focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] focus:[border-color:var(--shk-primary-500)] sm:text-sm\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"toggleDropdown()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled-select]=\"isDisabled()\"\n    [class._shk-border-red]=\"shouldShowError()\"\n  >\n    <div class=\"selected-value truncate\">\n      @if (isSearchable() && isOpen()) {\n        <input\n          #filterInput\n          type=\"text\"\n          class=\"w-full bg-transparent border-0 outline-none p-0 _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\"\n          placeholder=\"Buscar...\"\n          [value]=\"searchTerm()\"\n          (input)=\"onInputChange($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <span\n          [class._shk-text-surface-400]=\"!hasSelectedValues()\"\n          [class._shk-text-surface-700]=\"hasSelectedValues()\"\n        >\n          {{ displayValue() }}\n        </span>\n      }\n    </div>\n    <div\n      class=\"text-xs transition-transform duration-200 shrink-0 ml-2\"\n      [class.rotate-180]=\"isOpen()\"\n    >\n      <svg\n        [lucideIcon]=\"getIcon('chevron-down')\"\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n      ></svg>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      #dropdownContainer\n      (keydown)=\"onKeydown($event)\"\n      class=\"absolute left-0 right-0 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg\"\n      [class.top-full]=\"!dropdownUpward()\"\n      [class.bottom-full]=\"dropdownUpward()\"\n      [class.mt-1]=\"!dropdownUpward()\"\n      [class.mb-1]=\"dropdownUpward()\"\n    >\n      @if (showCustomOption()) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-700)] text-sm\"\n          (click)=\"onCustomOptionClick()\"\n        >\n          <span class=\"font-semibold _shk-text-primary\">Crear nuevo:</span>\n          <span class=\"_shk-text-surface-700 dark:[color:var(--shk-surface-200)] ml-1\">{{ searchTerm() }}</span>\n        </div>\n      }\n\n      @for (option of regularOptions(); track trackByFn($index, option); let i = $index) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-700)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\"\n          [class.opacity-50]=\"isOptionDisabled(option)\"\n          [class.select-option-active]=\"focusedIndex() === i\"\n          [class._shk-text-surface-400]=\"option.value === null\"\n          (click)=\"!isOptionDisabled(option) && onOptionClick(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"!isOptionDisabled(option) && toggleOption(option)\"\n              class=\"flex-shrink-0 [accent-color:var(--shk-primary-600)]\"\n            />\n            {{ option.label }}\n          } @else {\n            {{ option.label }}\n          }\n        </div>\n      }\n\n      <div class=\"px-3 py-2 text-center\">\n        @if (isLoading() && regularOptions().length === 0) {\n          <div class=\"flex items-center justify-center gap-2 text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\">\n            <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n              <circle\n                class=\"path\"\n                cx=\"25\"\n                cy=\"25\"\n                r=\"20\"\n                fill=\"none\"\n                stroke-width=\"5\"\n              ></circle>\n            </svg>\n            Cargando m\u00E1s resultados...\n          </div>\n        }\n\n        @if (!isLoading() && isAllDataLoaded() && regularOptions().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)] italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)] italic\">\n            {{ emptyMessageKey() | transloco }}\n          </div>\n        }\n      </div>\n\n      @if (usePagination() && totalPages() > 1) {\n        <div class=\"flex justify-between items-center px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-700)]\">\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"$event.stopPropagation(); previousPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n          </button>\n          <span class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n            {{ currentPage() }} de {{ totalPages() }}\n          </span>\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (click)=\"$event.stopPropagation(); nextPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-select', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TranslocoModule,
+                        LucideDynamicIcon,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  #selectContainer\n  class=\"relative w-full font-sans outline-none\"\n>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)] mb-1\">\n      {{ label() }}\n    </div>\n  }\n\n  <div\n    #selectTrigger\n    class=\"flex justify-between items-center w-full px-3 py-2 border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-800)] focus-within:ring-1 focus-within:[--tw-ring-color:var(--shk-primary-500)] focus-within:[border-color:var(--shk-primary-500)] focus:outline-none focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] focus:[border-color:var(--shk-primary-500)] sm:text-sm\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"toggleDropdown()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled-select]=\"isDisabled()\"\n    [class._shk-border-red]=\"shouldShowError()\"\n  >\n    <div class=\"selected-value truncate\">\n      @if (isSearchable() && isOpen()) {\n        <input\n          #filterInput\n          type=\"text\"\n          class=\"w-full bg-transparent border-0 outline-none p-0 _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\"\n          placeholder=\"Buscar...\"\n          [value]=\"searchTerm()\"\n          (input)=\"onInputChange($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <span\n          [class._shk-text-surface-400]=\"!hasSelectedValues()\"\n          [class._shk-text-surface-700]=\"hasSelectedValues()\"\n        >\n          {{ displayValue() }}\n        </span>\n      }\n    </div>\n    <div\n      class=\"text-xs transition-transform duration-200 shrink-0 ml-2\"\n      [class.rotate-180]=\"isOpen()\"\n    >\n      <svg\n        [lucideIcon]=\"getIcon('chevron-down')\"\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n      ></svg>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      #dropdownContainer\n      (keydown)=\"onKeydown($event)\"\n      class=\"absolute left-0 right-0 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg\"\n      [class.top-full]=\"!dropdownUpward()\"\n      [class.bottom-full]=\"dropdownUpward()\"\n      [class.mt-1]=\"!dropdownUpward()\"\n      [class.mb-1]=\"dropdownUpward()\"\n    >\n      @if (showCustomOption()) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-700)] text-sm\"\n          (click)=\"onCustomOptionClick()\"\n        >\n          <span class=\"font-semibold _shk-text-primary\">Crear nuevo:</span>\n          <span class=\"_shk-text-surface-700 dark:[color:var(--shk-surface-200)] ml-1\">{{ searchTerm() }}</span>\n        </div>\n      }\n\n      @for (option of regularOptions(); track trackByFn($index, option); let i = $index) {\n        <div\n          class=\"flex items-center gap-2 px-3 py-2 cursor-pointer hover:[background-color:var(--shk-surface-50)] dark:hover:[background-color:var(--shk-surface-700)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\"\n          [class.opacity-50]=\"isOptionDisabled(option)\"\n          [class.select-option-active]=\"focusedIndex() === i\"\n          [class._shk-text-surface-400]=\"option.value === null\"\n          (click)=\"!isOptionDisabled(option) && onOptionClick(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"!isOptionDisabled(option) && toggleOption(option)\"\n              class=\"flex-shrink-0 [accent-color:var(--shk-primary-600)]\"\n            />\n            {{ option.label }}\n          } @else {\n            {{ option.label }}\n          }\n        </div>\n      }\n\n      <div class=\"px-3 py-2 text-center\">\n        @if (isLoading() && regularOptions().length === 0) {\n          <div class=\"flex items-center justify-center gap-2 text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\">\n            <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n              <circle\n                class=\"path\"\n                cx=\"25\"\n                cy=\"25\"\n                r=\"20\"\n                fill=\"none\"\n                stroke-width=\"5\"\n              ></circle>\n            </svg>\n            Cargando m\u00E1s resultados...\n          </div>\n        }\n\n        @if (!isLoading() && isAllDataLoaded() && regularOptions().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)] italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)] italic\">\n            {{ emptyMessageKey() | transloco }}\n          </div>\n        }\n      </div>\n\n      @if (usePagination() && totalPages() > 1) {\n        <div class=\"flex justify-between items-center px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-700)]\">\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"$event.stopPropagation(); previousPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n          </button>\n          <span class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n            {{ currentPage() }} de {{ totalPages() }}\n          </span>\n          <button\n            class=\"bg-transparent border-0 cursor-pointer px-2 py-1 rounded hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (click)=\"$event.stopPropagation(); nextPage()\"\n          >\n            <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (shouldShowError()) {\n    <div class=\"mt-1 text-xs text-red-500 max-h-20 overflow-y-auto\" tabindex=\"-1\">\n      <ul class=\"list-disc pl-4 space-y-1\">\n        @for (error of getErrorMessages(); track error) {\n          <li>{{ error }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], validCombinations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validCombinations", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isAllDataLoaded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAllDataLoaded", required: false }] }], allowCustomEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomEntries", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], isSearchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearchable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], usePagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "usePagination", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], preserveSearchOnLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveSearchOnLoad", required: false }] }], emptyMessageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessageKey", required: false }] }], dropdownUpward: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownUpward", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], search: [{ type: i0.Output, args: ["search"] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], selectContainer: [{ type: i0.ViewChild, args: ['selectContainer', { isSignal: true }] }], selectTrigger: [{ type: i0.ViewChild, args: ['selectTrigger', { isSignal: true }] }], dropdownContainer: [{ type: i0.ViewChild, args: ['dropdownContainer', { isSignal: true }] }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+const icons$1 = {
+    upload: LucideUpload,
+    file: LucideFile,
+    x: LucideX,
+};
+class FileUploadComponent {
+    getIcon = (name) => icons$1[name] ?? LucideUpload;
+    transloco = inject(TranslocoService);
+    label = input('Cargar archivo', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    accept = input('image/*', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(2 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+    maxFiles = input(0, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    fileUploadText = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "fileUploadText" }] : /* istanbul ignore next */ []));
+    fileRecommendation = input('', ...(ngDevMode ? [{ debugName: "fileRecommendation" }] : /* istanbul ignore next */ []));
+    changeFilesText = input('Cambiar archivos', ...(ngDevMode ? [{ debugName: "changeFilesText" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    fileSelected = output();
+    fileRemoved = output();
+    fileError = output();
+    fileWarning = output();
+    selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
+    errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    previewUrls = new Map();
+    canAddMore = computed(() => {
+        if (!this.multiple())
+            return this.selectedFiles().length === 0;
+        const max = this.maxFiles();
+        if (max <= 0)
+            return true;
+        return this.selectedFiles().length < max;
+    }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : /* istanbul ignore next */ []));
+    maxReached = computed(() => {
+        const max = this.maxFiles();
+        if (max <= 0)
+            return false;
+        return this.selectedFiles().length >= max;
+    }, ...(ngDevMode ? [{ debugName: "maxReached" }] : /* istanbul ignore next */ []));
+    isImageFile(file) {
+        return file.type.startsWith('image/');
+    }
+    previewUrl(file) {
+        if (!this.previewUrls.has(file)) {
+            this.previewUrls.set(file, URL.createObjectURL(file));
+        }
+        return this.previewUrls.get(file) ?? '';
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.processFiles(Array.from(files));
+        }
+    }
+    onFileChange(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files && files.length > 0) {
+            this.processFiles(Array.from(files));
+        }
+        input.value = '';
+    }
+    processFiles(files) {
+        this.errorMessage.set('');
+        const validFiles = [];
+        for (const file of files) {
+            const error = this.validateFile(file);
+            if (error) {
+                this.fileError.emit(error);
+                this.errorMessage.set(error.message);
+                return;
+            }
+            const warning = this.checkSizeWarning(file);
+            if (warning) {
+                this.fileWarning.emit(warning);
+            }
+            validFiles.push(file);
+        }
+        const max = this.maxFiles();
+        if (max > 0) {
+            const currentCount = this.selectedFiles().length;
+            const allowed = max - currentCount;
+            if (validFiles.length > allowed) {
+                const errorMsg = this.transloco.translate('fileUpload.maxFiles', undefined, `Máximo ${max} archivos permitidos`);
+                this.errorMessage.set(errorMsg);
+                return;
+            }
+        }
+        if (this.multiple()) {
+            this.selectedFiles.set([...this.selectedFiles(), ...validFiles]);
+        }
+        else {
+            this.clearPreviews();
+            this.selectedFiles.set(validFiles);
+        }
+        this.fileSelected.emit(this.selectedFiles());
+    }
+    validateFile(file) {
+        const acceptStr = this.accept();
+        if (acceptStr && acceptStr !== '*') {
+            const acceptTypes = acceptStr.split(',').map((t) => t.trim());
+            const valid = acceptTypes.some((type) => {
+                if (type.endsWith('/*')) {
+                    const category = type.replace('/*', '');
+                    return file.type.startsWith(category);
+                }
+                if (type.startsWith('.')) {
+                    const ext = type.slice(1).toLowerCase();
+                    return file.name.toLowerCase().endsWith('.' + ext);
+                }
+                if (type.includes('/')) {
+                    return file.type === type;
+                }
+                return false;
+            });
+            if (!valid) {
+                return {
+                    type: 'type',
+                    message: this.transloco.translate('fileUpload.invalidType', { accept: acceptStr }, `Tipo de archivo no válido. Formatos aceptados: ${acceptStr}`),
+                    file,
+                };
+            }
+        }
+        if (this.maxFileSize() > 0 && file.size > this.maxFileSize()) {
+            return {
+                type: 'size',
+                message: this.transloco.translate('fileUpload.fileTooLarge', { size: this.formatFileSize(this.maxFileSize()) }, `El archivo excede el tamaño máximo de ${this.formatFileSize(this.maxFileSize())}`),
+                file,
+            };
+        }
+        return null;
+    }
+    checkSizeWarning(file) {
+        if (this.maxFileSize() > 0 && file.size > this.maxFileSize() * 0.9) {
+            return {
+                type: 'size',
+                message: this.transloco.translate('fileUpload.sizeWarning', { size: this.formatFileSize(this.maxFileSize()) }, `El archivo está cerca del límite de tamaño (${this.formatFileSize(this.maxFileSize())})`),
+                file,
+            };
+        }
+        return null;
+    }
+    removeFile(file) {
+        const url = this.previewUrls.get(file);
+        if (url) {
+            URL.revokeObjectURL(url);
+            this.previewUrls.delete(file);
+        }
+        this.selectedFiles.update((files) => files.filter((f) => f !== file));
+        this.errorMessage.set('');
+        if (this.selectedFiles().length === 0) {
+            this.fileRemoved.emit();
+        }
+    }
+    changeFiles() {
+        this.clearPreviews();
+        this.selectedFiles.set([]);
+        this.errorMessage.set('');
+    }
+    clearPreviews() {
+        for (const [file, url] of this.previewUrls) {
+            URL.revokeObjectURL(url);
+        }
+        this.previewUrls.clear();
+    }
+    formatFileSize(bytes) {
+        if (bytes < 1024)
+            return bytes + ' B';
+        if (bytes < 1024 * 1024)
+            return (bytes / 1024).toFixed(1) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FileUploadComponent, isStandalone: true, selector: "shk-file-upload", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, fileUploadText: { classPropertyName: "fileUploadText", publicName: "fileUploadText", isSignal: true, isRequired: false, transformFunction: null }, fileRecommendation: { classPropertyName: "fileRecommendation", publicName: "fileRecommendation", isSignal: true, isRequired: false, transformFunction: null }, changeFilesText: { classPropertyName: "changeFilesText", publicName: "changeFilesText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", fileError: "fileError", fileWarning: "fileWarning" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  @if (label()) {\n    <label class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)]\">\n      {{ label() }}\n    </label>\n  }\n\n  @if (canAddMore()) {\n    <div\n      class=\"relative border-2 border-dashed _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg p-4 transition-colors hover:[border-color:var(--shk-primary-400)] dark:hover:[border-color:var(--shk-primary-500)]\"\n      [class.border-red-400]=\"errorMessage()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <input\n        #fileInput\n        type=\"file\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"onFileChange($event)\"\n        class=\"hidden\"\n      />\n\n      <div\n        class=\"flex flex-col items-center gap-2 cursor-pointer\"\n        (click)=\"fileInput.click()\"\n        [class.drag-over]=\"isDragOver()\"\n      >\n        <svg [lucideIcon]=\"getIcon('upload')\" class=\"w-8 h-8 _shk-icon-subtle dark:[color:var(--shk-surface-600)]\"></svg>\n        <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\">\n          {{ fileUploadText() }}\n        </span>\n        @if (fileRecommendation()) {\n          <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            {{ fileRecommendation() }}\n          </span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (maxReached()) {\n    <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] text-center py-2\">\n      M\u00E1ximo {{ maxFiles() }} archivos alcanzado\n    </div>\n  }\n\n  @if (selectedFiles().length > 0) {\n    <div class=\"flex flex-wrap gap-3\">\n      @for (file of selectedFiles(); track file.name + file.size + file.lastModified) {\n        <div class=\"relative group\">\n          @if (isImageFile(file)) {\n            <img\n              [src]=\"previewUrl(file)\"\n              [alt]=\"file.name\"\n              class=\"w-20 h-20 object-cover rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)]\"\n            />\n          } @else {\n            <div class=\"w-20 h-20 rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)] flex flex-col items-center justify-center _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] gap-1\">\n              <svg [lucideIcon]=\"getIcon('file')\" class=\"w-6 h-6 _shk-text-surface-400\"></svg>\n              <span class=\"text-[10px] _shk-text-surface-400 truncate max-w-[70px] px-1 text-center\">{{ file.name }}</span>\n            </div>\n          }\n          <button\n            type=\"button\"\n            (click)=\"removeFile(file)\"\n            class=\"absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition shadow\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3 h-3\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n    @if (!multiple()) {\n      <button\n        type=\"button\"\n        (click)=\"changeFiles()\"\n        class=\"text-xs _shk-text-primary hover:[color:var(--shk-primary-700)] dark:[color:var(--shk-primary-400)] dark:hover:[color:var(--shk-primary-300)] underline cursor-pointer bg-transparent border-0\"\n      >\n        {{ changeFilesText() }}\n      </button>\n    }\n  }\n\n  @if (errorMessage()) {\n    <p class=\"text-xs _shk-text-red-500\">{{ errorMessage() }}</p>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-file-upload', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2\">\n  @if (label()) {\n    <label class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)]\">\n      {{ label() }}\n    </label>\n  }\n\n  @if (canAddMore()) {\n    <div\n      class=\"relative border-2 border-dashed _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg p-4 transition-colors hover:[border-color:var(--shk-primary-400)] dark:hover:[border-color:var(--shk-primary-500)]\"\n      [class.border-red-400]=\"errorMessage()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <input\n        #fileInput\n        type=\"file\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"onFileChange($event)\"\n        class=\"hidden\"\n      />\n\n      <div\n        class=\"flex flex-col items-center gap-2 cursor-pointer\"\n        (click)=\"fileInput.click()\"\n        [class.drag-over]=\"isDragOver()\"\n      >\n        <svg [lucideIcon]=\"getIcon('upload')\" class=\"w-8 h-8 _shk-icon-subtle dark:[color:var(--shk-surface-600)]\"></svg>\n        <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-400)]\">\n          {{ fileUploadText() }}\n        </span>\n        @if (fileRecommendation()) {\n          <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            {{ fileRecommendation() }}\n          </span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (maxReached()) {\n    <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] text-center py-2\">\n      M\u00E1ximo {{ maxFiles() }} archivos alcanzado\n    </div>\n  }\n\n  @if (selectedFiles().length > 0) {\n    <div class=\"flex flex-wrap gap-3\">\n      @for (file of selectedFiles(); track file.name + file.size + file.lastModified) {\n        <div class=\"relative group\">\n          @if (isImageFile(file)) {\n            <img\n              [src]=\"previewUrl(file)\"\n              [alt]=\"file.name\"\n              class=\"w-20 h-20 object-cover rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)]\"\n            />\n          } @else {\n            <div class=\"w-20 h-20 rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)] flex flex-col items-center justify-center _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] gap-1\">\n              <svg [lucideIcon]=\"getIcon('file')\" class=\"w-6 h-6 _shk-text-surface-400\"></svg>\n              <span class=\"text-[10px] _shk-text-surface-400 truncate max-w-[70px] px-1 text-center\">{{ file.name }}</span>\n            </div>\n          }\n          <button\n            type=\"button\"\n            (click)=\"removeFile(file)\"\n            class=\"absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition shadow\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3 h-3\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n    @if (!multiple()) {\n      <button\n        type=\"button\"\n        (click)=\"changeFiles()\"\n        class=\"text-xs _shk-text-primary hover:[color:var(--shk-primary-700)] dark:[color:var(--shk-primary-400)] dark:hover:[color:var(--shk-primary-300)] underline cursor-pointer bg-transparent border-0\"\n      >\n        {{ changeFilesText() }}\n      </button>\n    }\n  }\n\n  @if (errorMessage()) {\n    <p class=\"text-xs _shk-text-red-500\">{{ errorMessage() }}</p>\n  }\n</div>" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], fileUploadText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUploadText", required: false }] }], fileRecommendation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileRecommendation", required: false }] }], changeFilesText: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeFilesText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], fileWarning: [{ type: i0.Output, args: ["fileWarning"] }] } });
+
+const icons = {
+    'chevrons-left': LucideChevronsLeft,
+    'chevrons-right': LucideChevronsRight,
+    'chevron-left': LucideChevronLeft,
+    'chevron-right': LucideChevronRight,
+    'arrow-up': LucideArrowUp,
+    'arrow-down': LucideArrowDown,
+    'arrow-up-down': LucideArrowUpDown,
+    search: LucideSearch,
+    x: LucideX,
+    loader: LucideLoader,
+    inbox: LucideInbox,
+    filter: LucideFunnel,
+    funnel: LucideFunnel,
+    pencil: LucidePencil,
+    edit: LucidePencil,
+    'trash-2': LucideTrash2,
+    delete: LucideTrash2,
+    eye: LucideEye,
+    view: LucideEye,
+    key: LucideKey,
+    'change-password': LucideKey,
+    'user-pen': LucideUserPen,
+    'edit-user': LucideUserPen,
+    'toggle-right': LucideToggleRight,
+    activate: LucideToggleRight,
+    'toggle-left': LucideToggleLeft,
+    deactivate: LucideToggleLeft,
+    download: LucideDownload,
+    export: LucideDownload,
+    upload: LucideUpload,
+    import: LucideUpload,
+    plus: LucidePlus,
+    add: LucidePlus,
+    'circle-plus': LucideCirclePlus,
+    'eye-off': LucideEyeOff,
+    'refresh-cw': LucideRefreshCw,
+    'file-spreadsheet': LucideFileSpreadsheet,
+    presentation: LucidePresentation,
+    file: LucideFile,
+    'file-text': LucideFileText,
+    archive: LucideArchive,
+    'circle-check': LucideCircleCheck,
+    'circle-x': LucideCircleX,
+    check: LucideCheck,
+    copy: LucideCopy,
+    'share-2': LucideShare2,
+    play: LucidePlay,
+    video: LucideVideo,
+    star: LucideStar,
+    clock: LucideClock,
+    settings: LucideSettings,
+    'log-out': LucideLogOut,
+    logout: LucideLogOut,
+    user: LucideUser,
+    'user-check': LucideUserCheck,
+    'user-round-x': LucideUserRoundX,
+    'user-plus': LucideUserPlus,
+    building: LucideBuilding,
+    landmark: LucideLandmark,
+    package: LucidePackage,
+    box: LucideBox,
+    tags: LucideTags,
+    tag: LucideTag,
+    truck: LucideTruck,
+    users: LucideUsers,
+    receipt: LucideReceipt,
+    bot: LucideBot,
+    'line-chart': LucideLineChart,
+    'dollar-sign': LucideDollarSign,
+    percent: LucidePercent,
+    calculator: LucideCalculator,
+    'shield-check': LucideShieldCheck,
+    'user-cog': LucideUserCog,
+    warehouse: LucideWarehouse,
+    list: LucideList,
+};
+function getIcon(name) {
+    return icons[name] ?? LucidePlus;
+}
+class TableComponent {
+    fb = inject(FormBuilder);
+    cdr = inject(ChangeDetectorRef);
+    transloco = inject(TranslocoService);
+    getIcon = getIcon;
+    actionsHeaderLabel = toSignal(this.transloco.selectTranslate('common.actions'), { initialValue: 'Acciones' });
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rowsPerPage = input(10, ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+    rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    showActionRow = input(true, ...(ngDevMode ? [{ debugName: "showActionRow" }] : /* istanbul ignore next */ []));
+    customTemplates = input({}, ...(ngDevMode ? [{ debugName: "customTemplates" }] : /* istanbul ignore next */ []));
+    headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
+    rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+    hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+    defaultSortField = input('', ...(ngDevMode ? [{ debugName: "defaultSortField" }] : /* istanbul ignore next */ []));
+    defaultSortOrder = input(1, ...(ngDevMode ? [{ debugName: "defaultSortOrder" }] : /* istanbul ignore next */ []));
+    showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    serverSide = input(false, ...(ngDevMode ? [{ debugName: "serverSide" }] : /* istanbul ignore next */ []));
+    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    activeFilter = input('', ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []));
+    refresh = output();
+    pageChange = output();
+    filterChange = output();
+    searchChange = output();
+    filterClick = output();
+    originalData = signal([], ...(ngDevMode ? [{ debugName: "originalData" }] : /* istanbul ignore next */ []));
+    searchedData = signal([], ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
+    filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    displayedData = signal([], ...(ngDevMode ? [{ debugName: "displayedData" }] : /* istanbul ignore next */ []));
+    localTotalRecords = signal(0, ...(ngDevMode ? [{ debugName: "localTotalRecords" }] : /* istanbul ignore next */ []));
+    first = signal(0, ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+    showFilterInput = signal({}, ...(ngDevMode ? [{ debugName: "showFilterInput" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    sortField = signal('', ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+    sortOrder = signal(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+    rowsPerPageLocal = signal(10, ...(ngDevMode ? [{ debugName: "rowsPerPageLocal" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalRecords() / this.rowsPerPageLocal())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    currentPage = computed(() => Math.floor(this.first() / this.rowsPerPageLocal()) + 1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    columnFiltersForm;
+    filterSubject = new Subject();
+    columnsWithActions = computed(() => {
+        const columnsArray = this.columns();
+        const showAction = this.showActionRow();
+        const rowActionsArray = this.rowActions();
+        const translatedHeader = this.actionsHeaderLabel();
+        if (showAction && rowActionsArray.length > 0) {
+            const actionsWidth = rowActionsArray.length <= 2
+                ? '110px'
+                : rowActionsArray.length <= 3
+                    ? '130px'
+                    : '170px';
+            return [
+                {
+                    field: 'actions',
+                    header: translatedHeader || 'Acciones',
+                    width: actionsWidth,
+                    defaultSort: true,
+                },
+                ...columnsArray,
+            ];
+        }
+        return [...columnsArray];
+    }, ...(ngDevMode ? [{ debugName: "columnsWithActions" }] : /* istanbul ignore next */ []));
+    effectiveTotalRecords = computed(() => {
+        return this.serverSide() ? this.totalRecords() : this.localTotalRecords();
+    }, ...(ngDevMode ? [{ debugName: "effectiveTotalRecords" }] : /* istanbul ignore next */ []));
+    effectiveDisplayedData = computed(() => {
+        return this.serverSide() ? this.data() : this.displayedData();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedData" }] : /* istanbul ignore next */ []));
+    activeFilters = computed(() => {
+        const form = this.columnFiltersForm;
+        if (!form)
+            return {};
+        const active = {};
+        Object.keys(form.controls).forEach((field) => {
+            const value = form.get(field)?.value;
+            if (value !== null && value !== undefined && value !== '') {
+                active[field] = value;
+            }
+        });
+        return active;
+    }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.columnFiltersForm = this.fb.group({});
+        this.filterSubject.pipe(debounceTime(300)).subscribe(() => {
+            if (this.serverSide()) {
+                this.emitFilterChange();
+            }
+        });
+        effect(() => {
+            const newData = this.data();
+            untracked(() => {
+                this.originalData.set([...newData]);
+                if (!this.serverSide()) {
+                    this.applyFilters();
+                }
+            });
+        });
+        effect(() => {
+            const cols = this.columns();
+            untracked(() => {
+                this.setupColumnFilters(cols);
+            });
+        });
+        effect(() => {
+            const field = this.defaultSortField();
+            const order = this.defaultSortOrder();
+            if (field) {
+                untracked(() => {
+                    this.sortField.set(field);
+                    this.sortOrder.set(order);
+                    if (!this.serverSide()) {
+                        this.applySort();
+                        this.updateDisplayedData();
+                    }
+                });
+            }
+        });
+        effect(() => {
+            const activeFilters = this.activeFilters();
+            untracked(() => {
+                if (!this.serverSide()) {
+                    this.applyFilters();
+                }
+            });
+        });
+        effect(() => {
+            const query = this.searchQuery();
+            untracked(() => {
+                if (!this.serverSide()) {
+                    this.applySearch();
+                }
+            });
+        });
+        effect(() => {
+            this.rowsPerPageLocal.set(this.rowsPerPage());
+        });
+    }
+    setupColumnFilters(cols) {
+        const filterControls = {};
+        const filterVisibility = {};
+        cols.forEach((col) => {
+            if (col.filter) {
+                filterControls[col.field] = [col.filterType === 'select' ? null : ''];
+                filterVisibility[col.field] = false;
+            }
+        });
+        this.columnFiltersForm = this.fb.group(filterControls);
+        this.showFilterInput.set(filterVisibility);
+        Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+            this.columnFiltersForm.get(field)?.valueChanges.subscribe(() => {
+                this.first.set(0);
+                if (this.serverSide()) {
+                    this.filterSubject.next();
+                }
+                else {
+                    this.applyFilters();
+                }
+                this.cdr.markForCheck();
+            });
+        });
+    }
+    emitFilterChange() {
+        const filters = {};
+        Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+            const value = this.columnFiltersForm.get(field)?.value;
+            if (value !== null && value !== undefined && value !== '') {
+                filters[field] = value;
+            }
+        });
+        this.filterChange.emit({ filters });
+    }
+    applySearch() {
+        const original = this.originalData();
+        const query = this.searchQuery().toLowerCase();
+        if (!query) {
+            this.searchedData.set([...original]);
+        }
+        else {
+            const filtered = original.filter((item) => {
+                return Object.values(item).some((val) => {
+                    if (val === null || val === undefined)
+                        return false;
+                    return String(val).toLowerCase().includes(query);
+                });
+            });
+            this.searchedData.set(filtered);
+        }
+        this.applyColumnFilters();
+    }
+    applyFilters() {
+        this.applySearch();
+    }
+    applyColumnFilters() {
+        const data = this.searchedData();
+        let filtered = [...data];
+        this.columns().forEach((col) => {
+            if (col.filter) {
+                const filterValue = this.columnFiltersForm.get(col.field)?.value;
+                if (filterValue !== null && filterValue !== undefined && filterValue !== '') {
+                    if (col.filterType === 'select') {
+                        filtered = filtered.filter((item) => item[col.field] == filterValue);
+                    }
+                    else if (col.filterType === 'exact') {
+                        const searchTerm = String(filterValue).toLowerCase();
+                        filtered = filtered.filter((item) => String(item[col.field]).toLowerCase() === searchTerm);
+                    }
+                    else {
+                        const searchTerm = String(filterValue).toLowerCase();
+                        filtered = filtered.filter((item) => String(item[col.field]).toLowerCase().includes(searchTerm));
+                    }
+                }
+            }
+        });
+        this.filteredData.set(filtered);
+        this.localTotalRecords.set(filtered.length);
+        this.applySort();
+        this.updateDisplayedData();
+    }
+    updateDisplayedData() {
+        const filtered = this.filteredData();
+        const firstIndex = this.first();
+        const rows = this.rowsPerPageLocal();
+        const displayed = filtered.slice(firstIndex, firstIndex + rows);
+        this.displayedData.set(displayed);
+    }
+    onFilterClick(value) {
+        this.filterClick.emit(value);
+    }
+    toggleSort(field) {
+        if (this.sortField() === field) {
+            this.sortOrder.set(this.sortOrder() * -1);
+        }
+        else {
+            this.sortField.set(field);
+            this.sortOrder.set(1);
+        }
+        this.first.set(0);
+        if (!this.serverSide()) {
+            this.applySort();
+            this.updateDisplayedData();
+        }
+    }
+    applySort() {
+        const field = this.sortField();
+        const order = this.sortOrder();
+        if (!field)
+            return;
+        const data = [...this.filteredData()];
+        data.sort((a, b) => {
+            const va = a[field];
+            const vb = b[field];
+            if (va == null)
+                return 1;
+            if (vb == null)
+                return -1;
+            if (va < vb)
+                return -1 * order;
+            if (va > vb)
+                return 1 * order;
+            return 0;
+        });
+        this.filteredData.set(data);
+    }
+    onSearchInput(value) {
+        this.searchQuery.set(value);
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.searchChange.emit(value);
+        }
+    }
+    clearFilter(field) {
+        const column = this.columns().find((col) => col.field === field);
+        const value = column?.filterType === 'select' ? null : '';
+        this.columnFiltersForm.get(field)?.setValue(value);
+        const visibility = this.showFilterInput();
+        this.showFilterInput.set({ ...visibility, [field]: false });
+        this.cdr.markForCheck();
+    }
+    toggleFilter(field) {
+        const visibility = this.showFilterInput();
+        this.showFilterInput.set({ ...visibility, [field]: !visibility[field] });
+        this.cdr.markForCheck();
+    }
+    getPageReport() {
+        const total = this.effectiveTotalRecords();
+        if (total === 0)
+            return this.transloco.translate('table.pageReport', {
+                from: 0,
+                to: 0,
+                total: 0,
+            });
+        const from = this.first() + 1;
+        const to = Math.min(this.first() + this.rowsPerPageLocal(), total);
+        return this.transloco.translate('table.pageReport', { from, to, total });
+    }
+    goToFirst() {
+        const rows = this.rowsPerPageLocal();
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.pageChange.emit({
+                first: 0,
+                rows,
+                page: 0,
+                pageCount: Math.ceil(this.totalRecords() / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    goToLast() {
+        const total = this.serverSide()
+            ? this.totalRecords()
+            : this.filteredData().length;
+        const rows = this.rowsPerPageLocal();
+        const lastFirst = Math.max(0, Math.ceil(total / rows) * rows - rows);
+        this.first.set(lastFirst);
+        if (this.serverSide()) {
+            const page = Math.floor(lastFirst / rows);
+            this.pageChange.emit({
+                first: lastFirst,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    onRowsPerPageChange(rows) {
+        rows = Number(rows);
+        this.rowsPerPageLocal.set(rows);
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.pageChange.emit({
+                first: 0,
+                rows,
+                page: 0,
+                pageCount: Math.ceil(this.totalRecords() / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    refreshData() {
+        this.refresh.emit();
+    }
+    isFirstPage() {
+        return this.first() === 0;
+    }
+    isLastPage() {
+        const total = this.effectiveTotalRecords();
+        return this.first() + this.rowsPerPageLocal() >= total;
+    }
+    next() {
+        const total = this.serverSide()
+            ? this.totalRecords()
+            : this.filteredData().length;
+        const rows = this.rowsPerPageLocal();
+        let first = this.first() + rows;
+        if (first >= total) {
+            first = total - rows;
+        }
+        this.first.set(first);
+        if (this.serverSide()) {
+            const page = Math.floor(first / rows);
+            this.pageChange.emit({
+                first,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    prev() {
+        const rows = this.rowsPerPageLocal();
+        let first = this.first() - rows;
+        const total = this.serverSide()
+            ? this.totalRecords()
+            : this.filteredData().length;
+        if (first < 0) {
+            first = 0;
+        }
+        this.first.set(first);
+        if (this.serverSide()) {
+            const page = Math.floor(first / rows);
+            this.pageChange.emit({
+                first,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    reset() {
+        this.goToFirst();
+    }
+    getRowActionLabel(action, rowData) {
+        return typeof action.label === 'function'
+            ? action.label(rowData)
+            : action.label;
+    }
+    getRowActionIconName(action, rowData) {
+        return typeof action.icon === 'function'
+            ? action.icon(rowData)
+            : action.icon;
+    }
+    getRowActionClass(action, rowData) {
+        if (!action.class)
+            return '';
+        return typeof action.class === 'function'
+            ? action.class(rowData)
+            : action.class;
+    }
+    isHeaderActionDisabled(action) {
+        return action.isDisabled ? action.isDisabled() : false;
+    }
+    isHeaderActionVisible(action) {
+        return action.isVisible ? action.isVisible() : true;
+    }
+    isRowActionDisabled(action, rowData) {
+        return action.isDisabled ? action.isDisabled(rowData) : false;
+    }
+    isRowActionVisible(action, rowData) {
+        return action.isVisible ? action.isVisible(rowData) : true;
+    }
+    truncate(value, limit = 30) {
+        if (value === null || value === undefined)
+            return '';
+        const str = String(value);
+        return str.length > limit ? str.slice(0, limit) + '\u2026' : str;
+    }
+    getTagClass(severity) {
+        switch (severity) {
+            case 'success':
+                return '_shk-bg-green-soft _shk-text-green-600';
+            case 'danger':
+                return '_shk-bg-red-soft _shk-text-red-600';
+            case 'warn':
+                return '_shk-bg-yellow-soft _shk-text-yellow-600';
+            case 'info':
+                return '_shk-bg-blue-soft _shk-text-blue-600';
+            default:
+                return '_shk-bg-surface-100 _shk-text-surface-700 dark:[background-color:var(--shk-surface-700)] dark:[color:var(--shk-surface-300)]';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableComponent, isStandalone: true, selector: "shk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showActionRow: { classPropertyName: "showActionRow", publicName: "showActionRow", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, defaultSortField: { classPropertyName: "defaultSortField", publicName: "defaultSortField", isSignal: true, isRequired: false, transformFunction: null }, defaultSortOrder: { classPropertyName: "defaultSortOrder", publicName: "defaultSortOrder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", pageChange: "pageChange", filterChange: "filterChange", searchChange: "searchChange", filterClick: "filterClick" }, ngImport: i0, template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n              <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n                <svg [lucideIcon]=\"getIcon('search')\" class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"searchQuery()\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n                [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n                class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\n                       focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1\n                       focus:[--tw-ring-color:var(--shk-primary-500)]\"\n              />\n          </div>\n        }\n\n        @if (filters().length > 0) {\n          <div class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-800)] p-0.5 rounded-md ml-auto\">\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-200)] transition-all\"\n                [class]=\"f.value === activeFilter() ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]' : ''\"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"action.class || 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                (click)=\"action.onClick()\"\n              >\n              @if (action.icon) {\n                <svg\n                  [lucideIcon]=\"getIcon(action.icon)\"\n                  class=\"w-3.5 h-3.5\"\n                ></svg>\n              }\n              {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n\n    </div>\n  }\n\n  <div\n    class=\"card p-0 overflow-hidden\"\n    [class.shadow-lg]=\"hasShadow()\"\n  >\n\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table class=\"w-full\">\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.width || 'auto'\"\n                [style.min-width]=\"col.field === 'actions' ? '130px' : 'auto'\"\n                [style.max-width]=\"col.field === 'actions' ? 'none' : (col.width || '300px')\"\n                class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border-b _shk-border dark:[border-color:var(--shk-surface-700)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <div class=\"relative group\">\n                          @if (sortField() === col.field) {\n                            <svg [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-primary\"></svg>\n                          } @else {\n                            <svg [lucideIcon]=\"getIcon('arrow-up-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                          }\n                            <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ 'table.tooltips.sort' | transloco }}\n                            </span>\n                        </div>\n                      }\n                      @if (col.filter) {\n                        <div class=\"relative group\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                          <svg\n                            [lucideIcon]=\"getIcon('filter')\"\n                            class=\"w-3.5 h-3.5\"\n                            [class._shk-text-primary]=\"columnFiltersForm.get(col.field)?.value\"\n                          ></svg>\n                          <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                            {{ 'table.tooltips.filter' | transloco }}\n                          </span>\n                        </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"mt-2\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <input\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-700)] bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\n                                   focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\n                                   placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"col.filterPlaceholder || ('common.search_placeholder' | transloco)\"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <select\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-700)] bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">A/D</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (columnFiltersForm.get(col.field)?.value && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex items-center justify-center\">\n                  <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-6 h-6 animate-spin _shk-text-primary\"></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-800)] rounded-full flex items-center justify-center mb-4\">\n                    <svg [lucideIcon]=\"getIcon('inbox')\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                  </div>\n                  <p class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track $index) {\n              <tr class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)] whitespace-nowrap\"\n                    [style.max-width]=\"col.width || '300px'\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <span\n                          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                          [class]=\"getTagClass(col.tagSeverity ? col.tagSeverity(rowData) : undefined)\"\n                          [style]=\"col.tagStyle ? col.tagStyle(rowData) : undefined\"\n                        >\n                          {{ col.tagValue ? col.tagValue(rowData) : rowData[col.field] }}\n                        </span>\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of rowActions(); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <button\n                                type=\"button\"\n                                (click)=\"action.onClick(rowData)\"\n                                [class]=\"'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] rounded-md ' + getRowActionClass(action, rowData)\"\n                                [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                              <span class=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ getRowActionLabel(action, rowData) }}\n                              </span>\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n\n    <div class=\"flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-800)]\">\n      <div class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        <span>{{ 'table.rows' | transloco }}</span>\n        <select\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-700)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">{{ getPageReport() }}</div>\n      <div class=\"flex items-center gap-0.5\">\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">{{ currentPage() }} / {{ totalPages() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:nowrap;text-overflow:ellipsis}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow:auto}.table-scroll-wrapper table{table-layout:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        LucideDynamicIcon,
+                    ], template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n              <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n                <svg [lucideIcon]=\"getIcon('search')\" class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"searchQuery()\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n                [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n                class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-700)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\n                       focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1\n                       focus:[--tw-ring-color:var(--shk-primary-500)]\"\n              />\n          </div>\n        }\n\n        @if (filters().length > 0) {\n          <div class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-800)] p-0.5 rounded-md ml-auto\">\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-200)] transition-all\"\n                [class]=\"f.value === activeFilter() ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]' : ''\"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"action.class || 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                (click)=\"action.onClick()\"\n              >\n              @if (action.icon) {\n                <svg\n                  [lucideIcon]=\"getIcon(action.icon)\"\n                  class=\"w-3.5 h-3.5\"\n                ></svg>\n              }\n              {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n\n    </div>\n  }\n\n  <div\n    class=\"card p-0 overflow-hidden\"\n    [class.shadow-lg]=\"hasShadow()\"\n  >\n\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table class=\"w-full\">\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.width || 'auto'\"\n                [style.min-width]=\"col.field === 'actions' ? '130px' : 'auto'\"\n                [style.max-width]=\"col.field === 'actions' ? 'none' : (col.width || '300px')\"\n                class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] border-b _shk-border dark:[border-color:var(--shk-surface-700)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <div class=\"relative group\">\n                          @if (sortField() === col.field) {\n                            <svg [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-primary\"></svg>\n                          } @else {\n                            <svg [lucideIcon]=\"getIcon('arrow-up-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                          }\n                            <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ 'table.tooltips.sort' | transloco }}\n                            </span>\n                        </div>\n                      }\n                      @if (col.filter) {\n                        <div class=\"relative group\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                          <svg\n                            [lucideIcon]=\"getIcon('filter')\"\n                            class=\"w-3.5 h-3.5\"\n                            [class._shk-text-primary]=\"columnFiltersForm.get(col.field)?.value\"\n                          ></svg>\n                          <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                            {{ 'table.tooltips.filter' | transloco }}\n                          </span>\n                        </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"mt-2\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <input\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-700)] bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\n                                   focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\n                                   placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"col.filterPlaceholder || ('common.search_placeholder' | transloco)\"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <select\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-700)] bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">A/D</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (columnFiltersForm.get(col.field)?.value && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex items-center justify-center\">\n                  <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-6 h-6 animate-spin _shk-text-primary\"></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-800)] rounded-full flex items-center justify-center mb-4\">\n                    <svg [lucideIcon]=\"getIcon('inbox')\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                  </div>\n                  <p class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track $index) {\n              <tr class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-800)]\">\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)] whitespace-nowrap\"\n                    [style.max-width]=\"col.width || '300px'\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <span\n                          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                          [class]=\"getTagClass(col.tagSeverity ? col.tagSeverity(rowData) : undefined)\"\n                          [style]=\"col.tagStyle ? col.tagStyle(rowData) : undefined\"\n                        >\n                          {{ col.tagValue ? col.tagValue(rowData) : rowData[col.field] }}\n                        </span>\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of rowActions(); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <button\n                                type=\"button\"\n                                (click)=\"action.onClick(rowData)\"\n                                [class]=\"'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-700)] rounded-md ' + getRowActionClass(action, rowData)\"\n                                [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                              <span class=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ getRowActionLabel(action, rowData) }}\n                              </span>\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n\n    <div class=\"flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-800)]\">\n      <div class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        <span>{{ 'table.rows' | transloco }}</span>\n        <select\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-700)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-800)] _shk-text-surface-700 dark:[color:var(--shk-surface-200)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">{{ getPageReport() }}</div>\n      <div class=\"flex items-center gap-0.5\">\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-200)]\">{{ currentPage() }} / {{ totalPages() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:nowrap;text-overflow:ellipsis}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow:auto}.table-scroll-wrapper table{table-layout:fixed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPage", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showActionRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionRow", required: false }] }], customTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplates", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], defaultSortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortField", required: false }] }], defaultSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortOrder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }], refresh: [{ type: i0.Output, args: ["refresh"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }] } });
+
+class TooltipComponent {
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="relative group inline-flex">
+      <ng-content></ng-content>
+      @if (text()) {
+        <span
+          class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
+          [class.top-full]="position() === 'bottom'"
+          [class.bottom-full]="position() === 'top'"
+          [class.left-full]="position() === 'right'"
+          [class.mt-1]="position() === 'bottom'"
+          [class.mb-1]="position() === 'top'"
+          [class.ml-1]="position() === 'right'"
+          [class.left-1/2]="position() !== 'right'"
+          [class.-translate-x-1/2]="position() !== 'right'"
+          [class.top-1/2]="position() === 'right'"
+          [class.-translate-y-1/2]="position() === 'right'"
+        >
+          {{ text() }}
+        </span>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tooltip',
+                    standalone: true,
+                    template: `
+    <div class="relative group inline-flex">
+      <ng-content></ng-content>
+      @if (text()) {
+        <span
+          class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
+          [class.top-full]="position() === 'bottom'"
+          [class.bottom-full]="position() === 'top'"
+          [class.left-full]="position() === 'right'"
+          [class.mt-1]="position() === 'bottom'"
+          [class.mb-1]="position() === 'top'"
+          [class.ml-1]="position() === 'right'"
+          [class.left-1/2]="position() !== 'right'"
+          [class.-translate-x-1/2]="position() !== 'right'"
+          [class.top-1/2]="position() === 'right'"
+          [class.-translate-y-1/2]="position() === 'right'"
+        >
+          {{ text() }}
+        </span>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/* Theme — import theme.css in your global styles.css:
+   @import '@shirkasoft/ui-components/theme.css';
+   Override --shk-* CSS variables at :root or .dark to theme.
+*/
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmDialogComponent, ConfirmDialogService, DatePickerComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, SelectComponent, TableComponent, TextFieldComponent, ToggleComponent, TooltipComponent };
+//# sourceMappingURL=shirkasoft-ui-components.mjs.map