npm - shirkasoft-ui-components - Versions diffs - 1.0.23 → 1.0.26 - Mend

shirkasoft-ui-components 1.0.23 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +439 -268
package/fesm2022/shirkasoft-ui-components.mjs +411 -30
package/fesm2022/shirkasoft-ui-components.mjs.map +1 -1
package/package.json +3 -2
package/src/theme.css +32 -5
package/types/shirkasoft-ui-components.d.ts +137 -5

package/fesm2022/shirkasoft-ui-components.mjs CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } 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 { inject, ChangeDetectorRef, input, output, viewChild, signal, computed, DestroyRef, effect, forwardRef, ChangeDetectionStrategy, Component, Injectable, model, ElementRef, HostListener, ApplicationRef, EnvironmentInjector, createComponent, ViewContainerRef, untracked, PLATFORM_ID, Inject } 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 { 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, LucideBarChart3, LucideMenu, LucideBuilding2, LucideLayoutDashboard, LucideHome, LucideHouse, LucideBanknote, LucidePanelRight, LucideGlobe, LucideCalendarCheck, LucideCalendar, LucideSliders, LucideWallet, LucideBriefcase, LucideIdCard, LucideCreditCard, LucideChartLine, LucideChartPie, LucidePuzzle, LucideLayers, LucideShield } from '@lucide/angular';
 import { Router } from '@angular/router';
 import { Subject, debounceTime } from 'rxjs';
 import { Chart, registerables } from 'chart.js';
@@ -301,7 +301,7 @@ class TextFieldComponent {
                 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-600)] 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-100)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-400)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-400)]': 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-200)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-200)] 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]=\"autocomplete()\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] 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 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-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-600)] 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-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-400)] 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 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 }); }
+        ], 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-600)] 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-100)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-400)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-400)]': 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-200)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-200)] 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]=\"autocomplete()\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] 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 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-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-600)] 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-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-400)] 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 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 _shk-scrollbar\" 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,
@@ -311,7 +311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             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-600)] 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-100)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-400)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-400)]': 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-200)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-200)] 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]=\"autocomplete()\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] 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 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-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-600)] 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-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-400)] 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 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" }]
+                    ], 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-600)] 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-100)]]=\"isDisabledSearch\"\n            [class._shk-text-surface-400]=\"isDisabledSearch\"\n            [class.dark:[color:var(--shk-surface-400)]]=\"isDisabledSearch\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-l-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] sm:text-sm\"\n            [ngClass]=\"{\n              'border-red-500': shouldShowError() && !isDisabledSearch,\n              '_shk-border': !shouldShowError() || isDisabledSearch,\n              'cursor-pointer': !isDisabledSearch,\n              'cursor-not-allowed _shk-text-surface-400 dark:[color:var(--shk-surface-400)]': 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-200)] disabled:[border-color:var(--shk-surface-300)] dark:disabled:[border-color:var(--shk-surface-200)] 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]=\"autocomplete()\"\n            (blur)=\"onBlur()\"\n            class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] 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 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-400)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-600)] 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-700)] _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border rounded-lg transition-colors placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-400)] focus:outline-none focus:[background-color:var(--shk-surface-50)] dark:focus:[background-color:var(--shk-surface-100)] focus:ring-1 resize-none disabled:[background-color:var(--shk-surface-50)] dark:disabled:[background-color:var(--shk-surface-100)] disabled:cursor-not-allowed disabled:[color:var(--shk-surface-400)] dark:disabled:[color:var(--shk-surface-400)] 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 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 _shk-scrollbar\" 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 }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", 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 {
@@ -969,7 +969,7 @@ class DatePickerComponent {
                 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-600)] 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-100)] 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-200)] 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-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] 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-100)] _shk-border dark:[border-color:var(--shk-surface-200)] 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-200)] 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-600)]\">\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-200)] 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-400)] 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-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">{{ 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-200)] 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-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">\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-200)] 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-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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 }); }
+        ], 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-600)] 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-100)] 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-200)] 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-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] 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-100)] _shk-border dark:[border-color:var(--shk-surface-200)] 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-200)] 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-600)]\">\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-200)] 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-400)] 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-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">{{ 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-200)] 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-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">\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-200)] 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-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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 _shk-scrollbar\">\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,
@@ -979,7 +979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             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-600)] 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-100)] 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-200)] 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-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] 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-100)] _shk-border dark:[border-color:var(--shk-surface-200)] 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-200)] 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-600)]\">\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-200)] 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-400)] 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-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">{{ 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-200)] 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-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">\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-200)] 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-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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" }]
+                    ], 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-600)] 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-100)] 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-200)] 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-700)]' : '_shk-text-surface-400 dark:[color:var(--shk-surface-400)]'\"\n      >\n        {{ displayLabel() || placeholder() || label() }}\n      </span>\n      <svg\n        class=\"w-4 h-4 _shk-text-surface-400 dark:[color:var(--shk-surface-400)] 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-100)] _shk-border dark:[border-color:var(--shk-surface-200)] 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-200)] 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-600)]\">\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-200)] 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-400)] 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-700)]': isToday(day) && !isSelectedDay(day),\n                    '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">{{ 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-200)] 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-700)]': isCurrentMonth($index) && !isSelectedMonth($index),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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-200)] 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-600)]\">\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-200)] 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-700)]': isCurrentYear(year) && !isSelectedYear(year),\n                  '_shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]': !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 _shk-scrollbar\">\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']]
@@ -1313,11 +1313,11 @@ class ModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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-center justify-center z-40 p-4 pt-4 overflow-y-auto\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-100)] 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-800)]\">{{ 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] 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-600)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-300)] 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-emerald hover:[background-color:var(--shk-emerald-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 }); }
+    static { this.ɵ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-center justify-center z-40 p-4 pt-4 overflow-y-auto _shk-scrollbar\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-100)] 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-800)]\">{{ 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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] _shk-scrollbar\">\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-200)] 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-600)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-300)] 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-emerald hover:[background-color:var(--shk-emerald-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-center justify-center z-40 p-4 pt-4 overflow-y-auto\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-100)] 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-800)]\">{{ 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] 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-600)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-300)] 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-emerald hover:[background-color:var(--shk-emerald-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" }]
+            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-center justify-center z-40 p-4 pt-4 overflow-y-auto _shk-scrollbar\"\n    (click)=\"closeModal()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-100)] 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-800)]\">{{ 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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-200)] _shk-text-surface-500 dark:[color:var(--shk-surface-500)] 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] _shk-scrollbar\">\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-200)] 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-600)] _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] hover:[background-color:var(--shk-surface-200)] dark:hover:[background-color:var(--shk-surface-300)] 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-emerald hover:[background-color:var(--shk-emerald-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 = {
@@ -1933,7 +1933,7 @@ class SelectComponent {
                 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-600)] 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 rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] 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-700)]\"\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-800]=\"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-400)]\"\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-100)] border _shk-border 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-200)] 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-700)] 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-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\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\">\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 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 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\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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-600)]\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"], 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 }); }
+        ], 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-600)] 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 rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] 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-700)]\"\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-800]=\"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-400)]\"\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-100)] border _shk-border rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg _shk-scrollbar\"\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-200)] 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-700)] 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-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\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\">\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 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 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\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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-600)]\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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 _shk-scrollbar\" 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>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"], 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,
@@ -1949,7 +1949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             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-600)] 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 rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] 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-700)]\"\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-800]=\"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-400)]\"\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-100)] border _shk-border 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-200)] 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-700)] 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-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\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\">\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 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 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\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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-600)]\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"] }]
+                    ], 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-600)] 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 rounded-lg _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] transition-colors duration-150 cursor-pointer min-h-[2.5rem] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus-within:outline-none focus-within:[background-color:var(--shk-surface-50)] dark:focus-within:[background-color:var(--shk-surface-100)] 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-700)]\"\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-800]=\"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-400)]\"\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-100)] border _shk-border rounded-lg max-h-[240px] overflow-y-auto z-50 shadow-lg _shk-scrollbar\"\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-200)] 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-700)] 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-200)] text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\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\">\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 italic\">\n            No se encontraron coincidencias\n          </div>\n        }\n\n        @if (options().length === 0) {\n          <div class=\"text-sm _shk-text-surface-400 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\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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-600)]\">\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-200)] disabled:opacity-50 disabled:cursor-not-allowed _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\"\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 _shk-scrollbar\" 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>", styles: [".select-option-active{background-color:var(--shk-primary-50);outline:2px solid var(--shk-primary-500);outline-offset:-2px;color:var(--shk-primary-700)}\n"] }]
         }], 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:mousedown', ['$event']]
@@ -2226,7 +2226,7 @@ const icons = {
     warehouse: LucideWarehouse,
     list: LucideList,
 };
-function getIcon(name) {
+function getIcon$2(name) {
     return icons[name] ?? LucidePlus;
 }
 class TableComponent {
@@ -2234,7 +2234,7 @@ class TableComponent {
         this.fb = inject(FormBuilder);
         this.cdr = inject(ChangeDetectorRef);
         this.transloco = inject(TranslocoService);
-        this.getIcon = getIcon;
+        this.getIcon = getIcon$2;
         this.actionsHeaderLabel = toSignal(this.transloco.selectTranslate('common.actions'), { initialValue: 'Acciones' });
         this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -2689,7 +2689,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-100)] 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-700)] 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                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-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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-100)]\">\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-100)]\">\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-100)] 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-100)]\">\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-700)] whitespace-nowrap\"\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-200)] 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-100)]\">\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-700)]\">{{ 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 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-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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>\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%}.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 }); }
+    static { this.ɵ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-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-100)] 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-700)] 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                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-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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-100)]\">\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-100)]\">\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-100)] 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-100)]\">\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-700)] whitespace-nowrap\"\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-200)] 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-100)]\">\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-700)]\">{{ 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 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-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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>\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-x:auto;-webkit-overflow-scrolling:touch}.table-scroll-wrapper table{table-layout:fixed;min-width:100%}\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,
@@ -2698,7 +2698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         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-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-100)] 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-700)] 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                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-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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-100)]\">\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-100)]\">\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-100)] 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-100)]\">\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-700)] whitespace-nowrap\"\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-200)] 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-100)]\">\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-700)]\">{{ 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 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-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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>\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%}.table-scroll-wrapper table{table-layout:fixed}\n"] }]
+                    ], 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-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-100)] 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-700)] 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                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-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\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-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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-100)]\">\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-100)]\">\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-100)] 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-100)]\">\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-700)] whitespace-nowrap\"\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-200)] 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-100)]\">\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-700)]\">{{ 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 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-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] 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>\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-x:auto;-webkit-overflow-scrolling:touch}.table-scroll-wrapper table{table-layout:fixed;min-width:100%}\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 {
@@ -2810,25 +2810,372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 args: ['mouseenter']
             }] } });
-class ChartComponent {
-    static { this.registered = false; }
-    ngAfterViewInit() {
-        this.initialized = true;
-        this.initChart();
+const ICONS$1 = {
+    house: LucideHouse,
+    home: LucideHome,
+    dashboard: LucideLayoutDashboard,
+    warehouse: LucideWarehouse,
+    building: LucideBuilding,
+    'building-2': LucideBuilding2,
+    truck: LucideTruck,
+    users: LucideUsers,
+    user: LucideUser,
+    clients: LucideUsers,
+    box: LucideBox,
+    product: LucidePackage,
+    package: LucidePackage,
+    tags: LucideTags,
+    tag: LucideTag,
+    receipt: LucideReceipt,
+    orders: LucideReceipt,
+    bot: LucideBot,
+    settings: LucideSettings,
+    config: LucideSettings,
+    menu: LucideMenu,
+    'line-chart': LucideLineChart,
+    'bar-chart-3': LucideBarChart3,
+    star: LucideStar,
+    'dollar-sign': LucideDollarSign,
+    percent: LucidePercent,
+    calculator: LucideCalculator,
+    search: LucideSearch,
+    'shield-check': LucideShieldCheck,
+    'user-cog': LucideUserCog,
+    'chevrons-left': LucideChevronsLeft,
+    'chevrons-right': LucideChevronsRight,
+    'chevron-down': LucideChevronDown,
+    'chevron-left': LucideChevronLeft,
+    'chevron-right': LucideChevronRight,
+    'log-out': LucideLogOut,
+    logout: LucideLogOut,
+    x: LucideX,
+};
+function getIcon$1(name) {
+    if (!name)
+        return null;
+    return ICONS$1[name] ?? LucideMenu;
+}
+class SidebarComponent {
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        this.logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+        this.activeItemId = input('', ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+        this.userRole = input('', ...(ngDevMode ? [{ debugName: "userRole" }] : /* istanbul ignore next */ []));
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        this.showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+        this.responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+        this.fixed = input(false, ...(ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []));
+        this.hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+        this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        this.collapsedWidth = input('5rem', ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
+        this.defaultExpanded = input([], ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : /* istanbul ignore next */ []));
+        this.labelPipe = input((label) => label, ...(ngDevMode ? [{ debugName: "labelPipe" }] : /* istanbul ignore next */ []));
+        this.expandTooltip = input('Expandir', ...(ngDevMode ? [{ debugName: "expandTooltip" }] : /* istanbul ignore next */ []));
+        this.collapseTooltip = input('Colapsar', ...(ngDevMode ? [{ debugName: "collapseTooltip" }] : /* istanbul ignore next */ []));
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.mobileOpen = model(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+        this.itemClick = output();
+        this.toggle = output();
+        this.getIcon = getIcon$1;
+        this.selectedId = signal('', ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        this.expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        this.width = computed(() => this.collapsed() ? this.collapsedWidth() : this.expandedWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.navItems = computed(() => {
+            const role = this.userRole();
+            const base = this.groups().length
+                ? this.groups().flatMap((g) => g.items)
+                : this.items();
+            return base.filter((item) => {
+                if (!item.roles || item.roles.length === 0)
+                    return true;
+                return role ? item.roles.includes(role) : false;
+            });
+        }, ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.selectedId.set(this.activeItemId());
+        });
+        effect(() => {
+            const active = this.activeItemId();
+            if (!active)
+                return;
+            const parent = this.navItems().find((item) => item.children?.some((c) => c.id === active));
+            if (parent) {
+                this.expandedGroups.update((set) => {
+                    if (set.has(parent.id))
+                        return set;
+                    const next = new Set(set);
+                    next.add(parent.id);
+                    return next;
+                });
+            }
+        });
+        effect(() => {
+            const defs = this.defaultExpanded();
+            if (!defs.length)
+                return;
+            this.expandedGroups.update((set) => {
+                const next = new Set(set);
+                defs.forEach((id) => next.add(id));
+                return next;
+            });
+        });
     }
-    ngOnDestroy() {
-        this.chartInstance?.destroy();
+    onResize(_event) {
+        if (this.responsive() && this.isBrowser && window.innerWidth < 1024) {
+            this.mobileOpen.set(false);
+        }
     }
-    initChart() {
-        const ctx = this.canvasRef().nativeElement.getContext('2d');
-        if (!ctx)
+    label(item) {
+        return this.labelPipe()(item.label);
+    }
+    isItemActive(item) {
+        return !!item.id && item.id === this.selectedId();
+    }
+    isGroupActive(item) {
+        return item.children?.some((c) => c.id === this.selectedId()) ?? false;
+    }
+    isGroupExpanded(item) {
+        return this.expandedGroups().has(item.id);
+    }
+    toggleGroup(item) {
+        this.expandedGroups.update((set) => {
+            const next = new Set(set);
+            if (next.has(item.id)) {
+                next.delete(item.id);
+            }
+            else {
+                next.add(item.id);
+            }
+            return next;
+        });
+    }
+    onItemClick(item) {
+        if (item.disabled)
             return;
-        this.chartInstance = new Chart(ctx, {
-            type: this.type(),
-            data: this.data(),
-            options: this.options(),
+        this.selectedId.set(item.id);
+        this.itemClick.emit(item);
+        if (this.responsive() && this.isBrowser && window.innerWidth < 1024) {
+            this.mobileOpen.set(false);
+        }
+    }
+    onToggle() {
+        if (this.responsive() && this.isBrowser && window.innerWidth < 1024) {
+            this.mobileOpen.update((v) => !v);
+        }
+        else {
+            this.collapsed.update((v) => !v);
+            this.toggle.emit(this.collapsed());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SidebarComponent, isStandalone: true, selector: "shk-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, labelPipe: { classPropertyName: "labelPipe", publicName: "labelPipe", isSignal: true, isRequired: false, transformFunction: null }, expandTooltip: { classPropertyName: "expandTooltip", publicName: "expandTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapseTooltip: { classPropertyName: "collapseTooltip", publicName: "collapseTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", itemClick: "itemClick", toggle: "toggle" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<aside\n  [class.fixed]=\"fixed()\"\n  [class.relative]=\"!fixed()\"\n  [class.h-screen]=\"fixed()\"\n  [class.h-full]=\"!fixed()\"\n  class=\"top-0 left-0 flex flex-col shrink-0 sidebar-transition sidebar-mobile-transform z-40 _shk-bg-white dark:[background-color:var(--shk-surface-50)] border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n  [class.shadow-sm]=\"hasShadow()\"\n  [style.width]=\"width()\"\n  [style.transform]=\"responsive() ? (mobileOpen() ? 'translateX(0)' : 'translateX(-100%)') : null\"\n>\n  <!-- Mobile overlay backdrop -->\n  @if (responsive() && mobileOpen()) {\n    <div\n      class=\"fixed inset-0 bg-black/50 z-30 lg:hidden\"\n      (click)=\"mobileOpen.set(false)\"\n    ></div>\n  }\n\n  <!-- Logo / Brand -->\n  @if (logo() || title() || subtitle()) {\n    <div\n      class=\"flex items-center h-20 px-4 border-b _shk-border dark:[border-color:var(--shk-surface-100)] shrink-0\"\n    >\n      <div class=\"flex items-center gap-3 overflow-hidden\">\n        @if (logo()) {\n          <img [src]=\"logo()\" alt=\"Logo\" class=\"h-16 w-16 shrink-0 object-contain\" />\n        }\n        @if (!collapsed() && (title() || subtitle())) {\n          <div class=\"flex flex-col leading-tight whitespace-nowrap\">\n            @if (title()) {\n              <span class=\"text-lg font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)]\">\n                {{ title() }}\n              </span>\n            }\n            @if (subtitle()) {\n              <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n                {{ subtitle() }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Toggle button -->\n  @if (showToggle() && collapsible()) {\n    <button\n      type=\"button\"\n      (click)=\"onToggle()\"\n      class=\"group absolute -right-3 top-20 z-50 w-6 h-6 rounded-full bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-md max-lg:hidden flex items-center justify-center _shk-text-surface-600 dark:[color:var(--shk-surface-600)] hover:[background-color:var(--shk-primary-50)] dark:hover:[background-color:var(--shk-surface-200)] hover:[color:var(--shk-primary-600)] dark:hover:[color:var(--shk-primary-400)] transition-colors\"\n    >\n      @if (collapsed()) {\n        <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-3 h-3\"></svg>\n      } @else {\n        <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-3 h-3\"></svg>\n      }\n      <span\n        class=\"absolute left-full ml-1 top-1/2 -translate-y-1/2 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      >\n        {{ collapsed() ? expandTooltip() : collapseTooltip() }}\n      </span>\n    </button>\n  }\n\n  <ng-content select=\"[sidebarHeader]\"></ng-content>\n\n  <!-- Custom content between header and nav -->\n  <ng-content select=\"[sidebarContent]\"></ng-content>\n\n  <!-- Navigation -->\n  <nav class=\"flex-1 sidebar-scroll _shk-scrollbar py-4 px-3\">\n    <ul class=\"space-y-1\">\n      @for (item of navItems(); track item.id) {\n        @if (item.separator) {\n          <li class=\"my-2 border-t _shk-border dark:[border-color:var(--shk-surface-200)]\"></li>\n        }\n\n        @if (item.children?.length) {\n          <!-- Group -->\n          <li>\n            @if (collapsed()) {\n              <shk-tooltip [text]=\"label(item)\" position=\"right\" mode=\"fixed\">\n                <div\n                  class=\"flex items-center justify-center px-3 py-2.5 rounded-lg transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isGroupActive(item)\"\n                  [class._shk-text-white]=\"isGroupActive(item)\"\n                  [class._shk-text-surface-500]=\"!isGroupActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                </div>\n              </shk-tooltip>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"toggleGroup(item)\"\n                class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group relative\"\n                [class._shk-bg-primary]=\"isGroupActive(item)\"\n                [class._shk-text-white]=\"isGroupActive(item)\"\n                [class.shadow-md]=\"isGroupActive(item)\"\n                [class._shk-text-surface-700]=\"!isGroupActive(item)\"\n                [class.dark:[color:var(--shk-surface-600)]]=\"!isGroupActive(item)\"\n                [class.hover:[background-color:var(--shk-surface-100)]]=\"!isGroupActive(item)\"\n                [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isGroupActive(item)\"\n                [class.hover:[color:var(--shk-surface-900)]]=\"!isGroupActive(item)\"\n                [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isGroupActive(item)\"\n              >\n                @if (item.icon) {\n                  <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                }\n                <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item) }}</span>\n                <svg\n                  [lucideIcon]=\"getIcon('chevron-down')\"\n                  class=\"w-4 h-4 transition-transform duration-200 shrink-0\"\n                  [class.rotate-180]=\"isGroupExpanded(item)\"\n                ></svg>\n              </button>\n\n              @if (isGroupExpanded(item)) {\n                <ul class=\"ml-3 mt-1 space-y-1 border-l-2 _shk-border dark:[border-color:var(--shk-surface-200)] pl-2\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        (click)=\"onItemClick(child)\"\n                        class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200\"\n                        [class._shk-bg-primary]=\"isItemActive(child)\"\n                        [class._shk-text-white]=\"isItemActive(child)\"\n                        [class._shk-text-surface-600]=\"!isItemActive(child)\"\n                        [class.dark:[color:var(--shk-surface-400)]]=\"!isItemActive(child)\"\n                        [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(child)\"\n                        [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(child)\"\n                        [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(child)\"\n                        [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(child)\"\n                      >\n                        @if (child.icon) {\n                          <svg [lucideIcon]=\"getIcon(child.icon)\" class=\"w-4 h-4 shrink-0\"></svg>\n                        }\n                        <span class=\"whitespace-nowrap overflow-hidden\">{{ label(child) }}</span>\n                        @if (isItemActive(child)) {\n                          <span class=\"w-1.5 h-1.5 rounded-full bg-white shrink-0 ml-auto\"></span>\n                        }\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n          </li>\n        } @else {\n          <!-- Standalone item -->\n          <li>\n            @if (collapsed()) {\n              <shk-tooltip [text]=\"label(item)\" position=\"right\" mode=\"fixed\">\n                <button\n                  type=\"button\"\n                  (click)=\"onItemClick(item)\"\n                  class=\"w-full flex items-center justify-center px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isItemActive(item)\"\n                  [class._shk-text-white]=\"isItemActive(item)\"\n                  [class.shadow-md]=\"isItemActive(item)\"\n                  [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                  [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                </button>\n              </shk-tooltip>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n                class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                [class._shk-bg-primary]=\"isItemActive(item)\"\n                [class._shk-text-white]=\"isItemActive(item)\"\n                [class.shadow-md]=\"isItemActive(item)\"\n                [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(item)\"\n                [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(item)\"\n              >\n                @if (item.icon) {\n                  <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                }\n                <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item) }}</span>\n                @if (item.badge !== undefined) {\n                  <span\n                    class=\"text-xs font-bold px-2 py-0.5 rounded-full _shk-bg-primary _shk-text-white shrink-0\"\n                    [class.hidden]=\"collapsed()\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isItemActive(item)) {\n                  <span class=\"w-1.5 h-1.5 rounded-full bg-white shrink-0\"></span>\n                }\n              </button>\n            }\n          </li>\n        }\n      }\n    </ul>\n  </nav>\n\n  <!-- Footer -->\n  <div class=\"shrink-0 p-2 [&:empty]:hidden\">\n    <ng-content select=\"[sidebarFooter]\"></ng-content>\n  </div>\n</aside>\n", styles: [":host{display:block}.sidebar-transition{transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.sidebar-scroll{overflow-y:auto;overflow-x:visible}@media(min-width:1024px){.sidebar-mobile-transform{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: TooltipComponent, selector: "shk-tooltip", inputs: ["text", "position", "mode", "offset"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-sidebar', standalone: true, imports: [CommonModule, LucideDynamicIcon, TooltipComponent], template: "<aside\n  [class.fixed]=\"fixed()\"\n  [class.relative]=\"!fixed()\"\n  [class.h-screen]=\"fixed()\"\n  [class.h-full]=\"!fixed()\"\n  class=\"top-0 left-0 flex flex-col shrink-0 sidebar-transition sidebar-mobile-transform z-40 _shk-bg-white dark:[background-color:var(--shk-surface-50)] border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n  [class.shadow-sm]=\"hasShadow()\"\n  [style.width]=\"width()\"\n  [style.transform]=\"responsive() ? (mobileOpen() ? 'translateX(0)' : 'translateX(-100%)') : null\"\n>\n  <!-- Mobile overlay backdrop -->\n  @if (responsive() && mobileOpen()) {\n    <div\n      class=\"fixed inset-0 bg-black/50 z-30 lg:hidden\"\n      (click)=\"mobileOpen.set(false)\"\n    ></div>\n  }\n\n  <!-- Logo / Brand -->\n  @if (logo() || title() || subtitle()) {\n    <div\n      class=\"flex items-center h-20 px-4 border-b _shk-border dark:[border-color:var(--shk-surface-100)] shrink-0\"\n    >\n      <div class=\"flex items-center gap-3 overflow-hidden\">\n        @if (logo()) {\n          <img [src]=\"logo()\" alt=\"Logo\" class=\"h-16 w-16 shrink-0 object-contain\" />\n        }\n        @if (!collapsed() && (title() || subtitle())) {\n          <div class=\"flex flex-col leading-tight whitespace-nowrap\">\n            @if (title()) {\n              <span class=\"text-lg font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)]\">\n                {{ title() }}\n              </span>\n            }\n            @if (subtitle()) {\n              <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n                {{ subtitle() }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Toggle button -->\n  @if (showToggle() && collapsible()) {\n    <button\n      type=\"button\"\n      (click)=\"onToggle()\"\n      class=\"group absolute -right-3 top-20 z-50 w-6 h-6 rounded-full bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-md max-lg:hidden flex items-center justify-center _shk-text-surface-600 dark:[color:var(--shk-surface-600)] hover:[background-color:var(--shk-primary-50)] dark:hover:[background-color:var(--shk-surface-200)] hover:[color:var(--shk-primary-600)] dark:hover:[color:var(--shk-primary-400)] transition-colors\"\n    >\n      @if (collapsed()) {\n        <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-3 h-3\"></svg>\n      } @else {\n        <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-3 h-3\"></svg>\n      }\n      <span\n        class=\"absolute left-full ml-1 top-1/2 -translate-y-1/2 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      >\n        {{ collapsed() ? expandTooltip() : collapseTooltip() }}\n      </span>\n    </button>\n  }\n\n  <ng-content select=\"[sidebarHeader]\"></ng-content>\n\n  <!-- Custom content between header and nav -->\n  <ng-content select=\"[sidebarContent]\"></ng-content>\n\n  <!-- Navigation -->\n  <nav class=\"flex-1 sidebar-scroll _shk-scrollbar py-4 px-3\">\n    <ul class=\"space-y-1\">\n      @for (item of navItems(); track item.id) {\n        @if (item.separator) {\n          <li class=\"my-2 border-t _shk-border dark:[border-color:var(--shk-surface-200)]\"></li>\n        }\n\n        @if (item.children?.length) {\n          <!-- Group -->\n          <li>\n            @if (collapsed()) {\n              <shk-tooltip [text]=\"label(item)\" position=\"right\" mode=\"fixed\">\n                <div\n                  class=\"flex items-center justify-center px-3 py-2.5 rounded-lg transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isGroupActive(item)\"\n                  [class._shk-text-white]=\"isGroupActive(item)\"\n                  [class._shk-text-surface-500]=\"!isGroupActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                </div>\n              </shk-tooltip>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"toggleGroup(item)\"\n                class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group relative\"\n                [class._shk-bg-primary]=\"isGroupActive(item)\"\n                [class._shk-text-white]=\"isGroupActive(item)\"\n                [class.shadow-md]=\"isGroupActive(item)\"\n                [class._shk-text-surface-700]=\"!isGroupActive(item)\"\n                [class.dark:[color:var(--shk-surface-600)]]=\"!isGroupActive(item)\"\n                [class.hover:[background-color:var(--shk-surface-100)]]=\"!isGroupActive(item)\"\n                [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isGroupActive(item)\"\n                [class.hover:[color:var(--shk-surface-900)]]=\"!isGroupActive(item)\"\n                [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isGroupActive(item)\"\n              >\n                @if (item.icon) {\n                  <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                }\n                <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item) }}</span>\n                <svg\n                  [lucideIcon]=\"getIcon('chevron-down')\"\n                  class=\"w-4 h-4 transition-transform duration-200 shrink-0\"\n                  [class.rotate-180]=\"isGroupExpanded(item)\"\n                ></svg>\n              </button>\n\n              @if (isGroupExpanded(item)) {\n                <ul class=\"ml-3 mt-1 space-y-1 border-l-2 _shk-border dark:[border-color:var(--shk-surface-200)] pl-2\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        (click)=\"onItemClick(child)\"\n                        class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200\"\n                        [class._shk-bg-primary]=\"isItemActive(child)\"\n                        [class._shk-text-white]=\"isItemActive(child)\"\n                        [class._shk-text-surface-600]=\"!isItemActive(child)\"\n                        [class.dark:[color:var(--shk-surface-400)]]=\"!isItemActive(child)\"\n                        [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(child)\"\n                        [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(child)\"\n                        [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(child)\"\n                        [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(child)\"\n                      >\n                        @if (child.icon) {\n                          <svg [lucideIcon]=\"getIcon(child.icon)\" class=\"w-4 h-4 shrink-0\"></svg>\n                        }\n                        <span class=\"whitespace-nowrap overflow-hidden\">{{ label(child) }}</span>\n                        @if (isItemActive(child)) {\n                          <span class=\"w-1.5 h-1.5 rounded-full bg-white shrink-0 ml-auto\"></span>\n                        }\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n          </li>\n        } @else {\n          <!-- Standalone item -->\n          <li>\n            @if (collapsed()) {\n              <shk-tooltip [text]=\"label(item)\" position=\"right\" mode=\"fixed\">\n                <button\n                  type=\"button\"\n                  (click)=\"onItemClick(item)\"\n                  class=\"w-full flex items-center justify-center px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isItemActive(item)\"\n                  [class._shk-text-white]=\"isItemActive(item)\"\n                  [class.shadow-md]=\"isItemActive(item)\"\n                  [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                  [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                </button>\n              </shk-tooltip>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n                class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                [class._shk-bg-primary]=\"isItemActive(item)\"\n                [class._shk-text-white]=\"isItemActive(item)\"\n                [class.shadow-md]=\"isItemActive(item)\"\n                [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                [class.hover:[color:var(--shk-surface-900)]]=\"!isItemActive(item)\"\n                [class.dark:hover:[color:var(--shk-surface-700)]]=\"!isItemActive(item)\"\n              >\n                @if (item.icon) {\n                  <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                }\n                <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item) }}</span>\n                @if (item.badge !== undefined) {\n                  <span\n                    class=\"text-xs font-bold px-2 py-0.5 rounded-full _shk-bg-primary _shk-text-white shrink-0\"\n                    [class.hidden]=\"collapsed()\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isItemActive(item)) {\n                  <span class=\"w-1.5 h-1.5 rounded-full bg-white shrink-0\"></span>\n                }\n              </button>\n            }\n          </li>\n        }\n      }\n    </ul>\n  </nav>\n\n  <!-- Footer -->\n  <div class=\"shrink-0 p-2 [&:empty]:hidden\">\n    <ng-content select=\"[sidebarFooter]\"></ng-content>\n  </div>\n</aside>\n", styles: [":host{display:block}.sidebar-transition{transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.sidebar-scroll{overflow-y:auto;overflow-x:visible}@media(min-width:1024px){.sidebar-mobile-transform{transform:none!important}}\n"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], labelPipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPipe", required: false }] }], expandTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTooltip", required: false }] }], collapseTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTooltip", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+const ICONS = {
+    shield: LucideShield,
+    building: LucideBuilding,
+    'building-2': LucideBuilding2,
+    'layer-group': LucideLayers,
+    'puzzle-piece': LucidePuzzle,
+    'chart-pie': LucideChartPie,
+    'chart-line': LucideChartLine,
+    'credit-card': LucideCreditCard,
+    'id-card': LucideIdCard,
+    briefcase: LucideBriefcase,
+    truck: LucideTruck,
+    tags: LucideTags,
+    tag: LucideTag,
+    package: LucidePackage,
+    box: LucideBox,
+    'dollar-sign': LucideDollarSign,
+    wallet: LucideWallet,
+    percent: LucidePercent,
+    sliders: LucideSliders,
+    search: LucideSearch,
+    calendar: LucideCalendar,
+    'calendar-check': LucideCalendarCheck,
+    users: LucideUsers,
+    'user-cog': LucideUserCog,
+    globe: LucideGlobe,
+    'log-out': LucideLogOut,
+    logout: LucideLogOut,
+    'panel-right': LucidePanelRight,
+    home: LucideHome,
+    receipt: LucideReceipt,
+    bot: LucideBot,
+    star: LucideStar,
+    'file-invoice-dollar': LucideBanknote,
+    'file-contract': LucideFileText,
+    user: LucideUser,
+    menu: LucideMenu,
+    'chevron-down': LucideChevronDown,
+    x: LucideX,
+};
+function getIcon(name) {
+    if (!name)
+        return null;
+    return ICONS[name] ?? LucideMenu;
+}
+class RailSidebarComponent {
+    constructor() {
+        this.sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.activeUrl = input('', ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+        this.activeSectionKey = model('', ...(ngDevMode ? [{ debugName: "activeSectionKey" }] : /* istanbul ignore next */ []));
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.activeLang = input('es', ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
+        this.langs = input(['es', 'en'], ...(ngDevMode ? [{ debugName: "langs" }] : /* istanbul ignore next */ []));
+        this.logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+        this.appName = input('', ...(ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []));
+        this.userRole = input('', ...(ngDevMode ? [{ debugName: "userRole" }] : /* istanbul ignore next */ []));
+        this.labelPipe = input((label) => label, ...(ngDevMode ? [{ debugName: "labelPipe" }] : /* istanbul ignore next */ []));
+        this.railWidth = input('4.5rem', ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
+        this.expandedWidth = input('16.5rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        this.workspaceTooltip = input('Inicio', ...(ngDevMode ? [{ debugName: "workspaceTooltip" }] : /* istanbul ignore next */ []));
+        this.logoutTooltip = input('Cerrar sesión', ...(ngDevMode ? [{ debugName: "logoutTooltip" }] : /* istanbul ignore next */ []));
+        this.collapseTooltip = input('Colapsar', ...(ngDevMode ? [{ debugName: "collapseTooltip" }] : /* istanbul ignore next */ []));
+        this.expandTooltip = input('Expandir', ...(ngDevMode ? [{ debugName: "expandTooltip" }] : /* istanbul ignore next */ []));
+        this.sectionSelected = output();
+        this.itemClick = output();
+        this.setLang = output();
+        this.logoutRequested = output();
+        this.toggleSidebar = output();
+        this.workspaceClick = output();
+        this.getIcon = getIcon;
+        this.expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+        this.width = computed(() => this.collapsed() ? this.railWidth() : this.expandedWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.activeSection = computed(() => this.sections().find((s) => s.key === this.activeSectionKey()) ?? null, ...(ngDevMode ? [{ debugName: "activeSection" }] : /* istanbul ignore next */ []));
+        this.navItems = computed(() => {
+            const role = this.userRole();
+            const items = this.activeSection()?.items ?? [];
+            return items.filter((item) => {
+                if (!item.roles || item.roles.length === 0)
+                    return true;
+                return role ? item.roles.includes(role) : false;
+            });
+        }, ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const url = this.activeUrl();
+            if (!url)
+                return;
+            const section = this.sections().find((s) => {
+                if (s.matchPrefixes?.length) {
+                    return s.matchPrefixes.some((prefix) => url.startsWith(prefix));
+                }
+                return s.routerLink ? url.startsWith(s.routerLink) : false;
+            });
+            if (section) {
+                this.activeSectionKey.set(section.key);
+            }
+        });
+    }
+    label(label) {
+        return this.labelPipe()(label);
+    }
+    isSectionActive(section) {
+        return section.key === this.activeSectionKey();
+    }
+    isItemActive(item) {
+        if (!item.routerLink)
+            return false;
+        return this.bestMatchItem() === item;
+    }
+    isGroupActive(item) {
+        return (item.children?.some((c) => c.routerLink && this.matchesUrl(c.routerLink, this.activeUrl())) ?? false);
+    }
+    matchesUrl(routerLink, url) {
+        return url === routerLink || url.startsWith(routerLink + '/');
+    }
+    bestMatchItem() {
+        const url = this.activeUrl();
+        let best = null;
+        for (const item of this.navItems()) {
+            if (item.routerLink && this.matchesUrl(item.routerLink, url)) {
+                if (!best || item.routerLink.length > best.routerLink.length) {
+                    best = item;
+                }
+            }
+            for (const child of item.children ?? []) {
+                if (!child.routerLink || !this.matchesUrl(child.routerLink, url))
+                    continue;
+                if (!best || child.routerLink.length > best.routerLink.length) {
+                    best = child;
+                }
+            }
+        }
+        return best;
+    }
+    isGroupExpanded(item) {
+        return this.expandedGroups().has(item.id);
+    }
+    toggleGroup(item) {
+        this.expandedGroups.update((set) => {
+            const next = new Set(set);
+            if (next.has(item.id)) {
+                next.delete(item.id);
+            }
+            else {
+                next.add(item.id);
+            }
+            return next;
         });
     }
+    onSectionClick(section) {
+        this.activeSectionKey.set(section.key);
+        this.sectionSelected.emit({ key: section.key, routerLink: section.routerLink });
+        if (this.collapsed()) {
+            this.collapsed.set(false);
+            this.toggleSidebar.emit(false);
+        }
+    }
+    onItemClick(item) {
+        if (item.disabled)
+            return;
+        this.itemClick.emit(item);
+    }
+    onWorkspace() {
+        this.workspaceClick.emit();
+        if (this.collapsed()) {
+            this.collapsed.set(false);
+            this.toggleSidebar.emit(false);
+        }
+    }
+    onToggleLang() {
+        const langs = this.langs();
+        if (langs.length === 0)
+            return;
+        const idx = langs.indexOf(this.activeLang());
+        const next = langs[(idx + 1) % langs.length] ?? langs[0];
+        this.setLang.emit(next);
+    }
+    onToggleSidebar() {
+        this.collapsed.update((v) => !v);
+        this.toggleSidebar.emit(this.collapsed());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RailSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RailSidebarComponent, isStandalone: true, selector: "shk-rail-sidebar", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, activeSectionKey: { classPropertyName: "activeSectionKey", publicName: "activeSectionKey", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeLang: { classPropertyName: "activeLang", publicName: "activeLang", isSignal: true, isRequired: false, transformFunction: null }, langs: { classPropertyName: "langs", publicName: "langs", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null }, labelPipe: { classPropertyName: "labelPipe", publicName: "labelPipe", isSignal: true, isRequired: false, transformFunction: null }, railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, workspaceTooltip: { classPropertyName: "workspaceTooltip", publicName: "workspaceTooltip", isSignal: true, isRequired: false, transformFunction: null }, logoutTooltip: { classPropertyName: "logoutTooltip", publicName: "logoutTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapseTooltip: { classPropertyName: "collapseTooltip", publicName: "collapseTooltip", isSignal: true, isRequired: false, transformFunction: null }, expandTooltip: { classPropertyName: "expandTooltip", publicName: "expandTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSectionKey: "activeSectionKeyChange", collapsed: "collapsedChange", sectionSelected: "sectionSelected", itemClick: "itemClick", setLang: "setLang", logoutRequested: "logoutRequested", toggleSidebar: "toggleSidebar", workspaceClick: "workspaceClick" }, ngImport: i0, template: "<aside\n  class=\"h-full flex overflow-hidden shrink-0 _shk-bg-white dark:[background-color:var(--shk-surface-50)] border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n  [style.width]=\"width()\"\n>\n  <!-- Rail: vertical icon column -->\n  <div\n    class=\"h-full flex flex-col items-center shrink-0 px-[0.3rem] py-2 gap-1 border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    [style.width]=\"railWidth()\"\n  >\n    <!-- Workspace / logo -->\n    <div class=\"flex items-center justify-center w-full\">\n      <button\n        type=\"button\"\n        (click)=\"onWorkspace()\"\n        [class.is-collapsed]=\"collapsed()\"\n        class=\"rail-workspace w-[3.2rem] h-[3.2rem] rounded-xl _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] border-none grid place-items-center p-0 relative transition-all\"\n        [title]=\"workspaceTooltip()\"\n      >\n        @if (logo()) {\n          <img [src]=\"logo()\" alt=\"Logo\" class=\"rail-app-icon w-8 h-8 object-contain\" />\n        } @else {\n          <svg [lucideIcon]=\"getIcon('menu')\" class=\"rail-app-icon w-6 h-6 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"></svg>\n        }\n        @if (collapsed()) {\n          <svg [lucideIcon]=\"getIcon('panel-right')\" class=\"rail-toggle-icon w-5 h-5 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"></svg>\n        }\n      </button>\n    </div>\n\n    <!-- Section actions -->\n    <div class=\"rail-actions flex-1 flex flex-col items-center gap-1 pt-1\">\n      @for (section of sections(); track section.key) {\n        <shk-tooltip [text]=\"label(section.label)\" position=\"right\" mode=\"fixed\">\n          <button\n            type=\"button\"\n            (click)=\"onSectionClick(section)\"\n            class=\"rail-icon w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n            [class.is-active]=\"isSectionActive(section)\"\n            [attr.aria-label]=\"label(section.label)\"\n          >\n            <svg [lucideIcon]=\"getIcon(section.icon)\" class=\"w-5 h-5\"></svg>\n          </button>\n        </shk-tooltip>\n      }\n    </div>\n\n    <!-- Bottom: language + logout -->\n    <div class=\"rail-bottom mt-auto flex flex-col items-center gap-1\">\n      <button\n        type=\"button\"\n        (click)=\"onToggleLang()\"\n        class=\"rail-icon w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n        [title]=\"activeLang()\"\n      >\n        <div class=\"flex flex-col items-center gap-[0.15rem]\">\n          <svg [lucideIcon]=\"getIcon('globe')\" class=\"w-5 h-5\"></svg>\n          <span class=\"rail-lang-code text-[0.5rem] font-bold tracking-[0.05em] leading-none\">{{ activeLang() | uppercase }}</span>\n        </div>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"logoutRequested.emit()\"\n        class=\"rail-icon rail-logout w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n        [title]=\"logoutTooltip()\"\n      >\n        <svg [lucideIcon]=\"getIcon('log-out')\" class=\"w-5 h-5\"></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Nav: section panel (hidden when collapsed) -->\n  @if (!collapsed()) {\n    <div class=\"flex-1 min-w-0 flex flex-col _shk-bg-white dark:[background-color:var(--shk-surface-50)]\">\n      <!-- Brand header -->\n      <div class=\"flex items-center justify-between gap-2 px-3 py-4 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n        <span class=\"nav-app text-base font-bold whitespace-nowrap overflow-hidden text-ellipsis _shk-text-surface-800 dark:[color:var(--shk-surface-800)]\">\n          {{ appName() }}\n        </span>\n        <button\n          type=\"button\"\n          (click)=\"onToggleSidebar()\"\n          class=\"nav-toggle w-[1.8rem] h-[1.8rem] rounded-lg border-none bg-transparent grid place-items-center cursor-pointer shrink-0 transition-colors _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          [title]=\"collapseTooltip()\"\n        >\n          <svg [lucideIcon]=\"getIcon('panel-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n\n      <!-- Menu -->\n      <nav class=\"flex-1 overflow-y-auto _shk-scrollbar px-2 py-3\">\n        @if (activeSection()) {\n          <div class=\"px-2 pb-3\">\n            <span class=\"nav-section-label text-xs font-bold tracking-[0.08em] uppercase _shk-text-surface-400 dark:[color:var(--shk-surface-500)] block whitespace-nowrap overflow-hidden text-ellipsis\">\n              {{ label(activeSection()!.label) }}\n            </span>\n          </div>\n        }\n\n        <ul class=\"space-y-1\">\n          @for (item of navItems(); track item.id) {\n            @if (item.separator) {\n              <li class=\"my-2 border-t _shk-border dark:[border-color:var(--shk-surface-200)]\"></li>\n            }\n\n            @if (item.children?.length) {\n              <!-- Expandable group -->\n              <li>\n                <button\n                  type=\"button\"\n                  (click)=\"toggleGroup(item)\"\n                  class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isGroupActive(item)\"\n                  [class._shk-text-white]=\"isGroupActive(item)\"\n                  [class.shadow-md]=\"isGroupActive(item)\"\n                  [class._shk-text-surface-700]=\"!isGroupActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isGroupActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isGroupActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isGroupActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                  <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item.label) }}</span>\n                  <svg\n                    [lucideIcon]=\"getIcon('chevron-down')\"\n                    class=\"w-4 h-4 transition-transform duration-200 shrink-0\"\n                    [class.rotate-180]=\"isGroupExpanded(item)\"\n                  ></svg>\n                </button>\n\n                @if (isGroupExpanded(item)) {\n                  <ul class=\"ml-3 mt-1 space-y-1 border-l-2 _shk-border dark:[border-color:var(--shk-surface-200)] pl-2\">\n                    @for (child of item.children; track child.id) {\n                      <li>\n                        <button\n                          type=\"button\"\n                          (click)=\"onItemClick(child)\"\n                          class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200\"\n                          [class._shk-bg-primary]=\"isItemActive(child)\"\n                          [class._shk-text-white]=\"isItemActive(child)\"\n                          [class._shk-text-surface-600]=\"!isItemActive(child)\"\n                          [class.dark:[color:var(--shk-surface-400)]]=\"!isItemActive(child)\"\n                          [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(child)\"\n                          [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(child)\"\n                        >\n                          @if (child.icon) {\n                            <svg [lucideIcon]=\"getIcon(child.icon)\" class=\"w-4 h-4 shrink-0\"></svg>\n                          }\n                          <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(child.label) }}</span>\n                        </button>\n                      </li>\n                    }\n                  </ul>\n                }\n              </li>\n            } @else {\n              <!-- Standalone item -->\n              <li>\n                <button\n                  type=\"button\"\n                  (click)=\"onItemClick(item)\"\n                  class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isItemActive(item)\"\n                  [class._shk-text-white]=\"isItemActive(item)\"\n                  [class.shadow-md]=\"isItemActive(item)\"\n                  [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                  <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item.label) }}</span>\n                  @if (item.badge !== undefined) {\n                    <span class=\"text-xs font-bold px-2 py-0.5 rounded-full _shk-bg-primary _shk-text-white shrink-0\">\n                      {{ item.badge }}\n                    </span>\n                  }\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      </nav>\n    </div>\n  }\n</aside>\n", styles: [":host{display:block}.rail-workspace{cursor:pointer;transition:opacity .2s ease,box-shadow .2s ease}.rail-workspace.is-collapsed:hover{cursor:col-resize}.rail-workspace .rail-app-icon,.rail-workspace .rail-toggle-icon{grid-area:1 / 1 / 2 / 2;transition:opacity .2s ease}.rail-toggle-icon,.rail-workspace.is-collapsed:hover .rail-app-icon{opacity:0}.rail-workspace.is-collapsed:hover .rail-toggle-icon{opacity:1}.rail-icon{background:transparent;color:var(--shk-surface-700);border:1px solid transparent;transition:transform .18s ease,color .18s ease,background-color .18s ease,box-shadow .18s ease}.rail-icon svg{stroke-width:1.8}.rail-icon:hover{background:var(--shk-surface-100);color:var(--shk-primary-600)}.dark .rail-icon:hover{background:var(--shk-surface-200);color:var(--shk-primary-400)}.rail-icon.is-active{background:var(--shk-primary-600);color:#fff;box-shadow:0 1px 2px #0003}.dark .rail-icon.is-active{background:var(--shk-primary-500);color:#fff}.rail-logout:hover{color:var(--shk-error-500)}.dark .rail-logout:hover{color:var(--shk-error-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: TooltipComponent, selector: "shk-tooltip", inputs: ["text", "position", "mode", "offset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RailSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-rail-sidebar', standalone: true, imports: [CommonModule, LucideDynamicIcon, TooltipComponent], template: "<aside\n  class=\"h-full flex overflow-hidden shrink-0 _shk-bg-white dark:[background-color:var(--shk-surface-50)] border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n  [style.width]=\"width()\"\n>\n  <!-- Rail: vertical icon column -->\n  <div\n    class=\"h-full flex flex-col items-center shrink-0 px-[0.3rem] py-2 gap-1 border-r _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    [style.width]=\"railWidth()\"\n  >\n    <!-- Workspace / logo -->\n    <div class=\"flex items-center justify-center w-full\">\n      <button\n        type=\"button\"\n        (click)=\"onWorkspace()\"\n        [class.is-collapsed]=\"collapsed()\"\n        class=\"rail-workspace w-[3.2rem] h-[3.2rem] rounded-xl _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] border-none grid place-items-center p-0 relative transition-all\"\n        [title]=\"workspaceTooltip()\"\n      >\n        @if (logo()) {\n          <img [src]=\"logo()\" alt=\"Logo\" class=\"rail-app-icon w-8 h-8 object-contain\" />\n        } @else {\n          <svg [lucideIcon]=\"getIcon('menu')\" class=\"rail-app-icon w-6 h-6 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"></svg>\n        }\n        @if (collapsed()) {\n          <svg [lucideIcon]=\"getIcon('panel-right')\" class=\"rail-toggle-icon w-5 h-5 _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"></svg>\n        }\n      </button>\n    </div>\n\n    <!-- Section actions -->\n    <div class=\"rail-actions flex-1 flex flex-col items-center gap-1 pt-1\">\n      @for (section of sections(); track section.key) {\n        <shk-tooltip [text]=\"label(section.label)\" position=\"right\" mode=\"fixed\">\n          <button\n            type=\"button\"\n            (click)=\"onSectionClick(section)\"\n            class=\"rail-icon w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n            [class.is-active]=\"isSectionActive(section)\"\n            [attr.aria-label]=\"label(section.label)\"\n          >\n            <svg [lucideIcon]=\"getIcon(section.icon)\" class=\"w-5 h-5\"></svg>\n          </button>\n        </shk-tooltip>\n      }\n    </div>\n\n    <!-- Bottom: language + logout -->\n    <div class=\"rail-bottom mt-auto flex flex-col items-center gap-1\">\n      <button\n        type=\"button\"\n        (click)=\"onToggleLang()\"\n        class=\"rail-icon w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n        [title]=\"activeLang()\"\n      >\n        <div class=\"flex flex-col items-center gap-[0.15rem]\">\n          <svg [lucideIcon]=\"getIcon('globe')\" class=\"w-5 h-5\"></svg>\n          <span class=\"rail-lang-code text-[0.5rem] font-bold tracking-[0.05em] leading-none\">{{ activeLang() | uppercase }}</span>\n        </div>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"logoutRequested.emit()\"\n        class=\"rail-icon rail-logout w-[3.4rem] h-[3.4rem] rounded-[0.85rem] grid place-items-center transition-all cursor-pointer\"\n        [title]=\"logoutTooltip()\"\n      >\n        <svg [lucideIcon]=\"getIcon('log-out')\" class=\"w-5 h-5\"></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Nav: section panel (hidden when collapsed) -->\n  @if (!collapsed()) {\n    <div class=\"flex-1 min-w-0 flex flex-col _shk-bg-white dark:[background-color:var(--shk-surface-50)]\">\n      <!-- Brand header -->\n      <div class=\"flex items-center justify-between gap-2 px-3 py-4 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n        <span class=\"nav-app text-base font-bold whitespace-nowrap overflow-hidden text-ellipsis _shk-text-surface-800 dark:[color:var(--shk-surface-800)]\">\n          {{ appName() }}\n        </span>\n        <button\n          type=\"button\"\n          (click)=\"onToggleSidebar()\"\n          class=\"nav-toggle w-[1.8rem] h-[1.8rem] rounded-lg border-none bg-transparent grid place-items-center cursor-pointer shrink-0 transition-colors _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          [title]=\"collapseTooltip()\"\n        >\n          <svg [lucideIcon]=\"getIcon('panel-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n\n      <!-- Menu -->\n      <nav class=\"flex-1 overflow-y-auto _shk-scrollbar px-2 py-3\">\n        @if (activeSection()) {\n          <div class=\"px-2 pb-3\">\n            <span class=\"nav-section-label text-xs font-bold tracking-[0.08em] uppercase _shk-text-surface-400 dark:[color:var(--shk-surface-500)] block whitespace-nowrap overflow-hidden text-ellipsis\">\n              {{ label(activeSection()!.label) }}\n            </span>\n          </div>\n        }\n\n        <ul class=\"space-y-1\">\n          @for (item of navItems(); track item.id) {\n            @if (item.separator) {\n              <li class=\"my-2 border-t _shk-border dark:[border-color:var(--shk-surface-200)]\"></li>\n            }\n\n            @if (item.children?.length) {\n              <!-- Expandable group -->\n              <li>\n                <button\n                  type=\"button\"\n                  (click)=\"toggleGroup(item)\"\n                  class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isGroupActive(item)\"\n                  [class._shk-text-white]=\"isGroupActive(item)\"\n                  [class.shadow-md]=\"isGroupActive(item)\"\n                  [class._shk-text-surface-700]=\"!isGroupActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isGroupActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isGroupActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isGroupActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                  <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item.label) }}</span>\n                  <svg\n                    [lucideIcon]=\"getIcon('chevron-down')\"\n                    class=\"w-4 h-4 transition-transform duration-200 shrink-0\"\n                    [class.rotate-180]=\"isGroupExpanded(item)\"\n                  ></svg>\n                </button>\n\n                @if (isGroupExpanded(item)) {\n                  <ul class=\"ml-3 mt-1 space-y-1 border-l-2 _shk-border dark:[border-color:var(--shk-surface-200)] pl-2\">\n                    @for (child of item.children; track child.id) {\n                      <li>\n                        <button\n                          type=\"button\"\n                          (click)=\"onItemClick(child)\"\n                          class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200\"\n                          [class._shk-bg-primary]=\"isItemActive(child)\"\n                          [class._shk-text-white]=\"isItemActive(child)\"\n                          [class._shk-text-surface-600]=\"!isItemActive(child)\"\n                          [class.dark:[color:var(--shk-surface-400)]]=\"!isItemActive(child)\"\n                          [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(child)\"\n                          [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(child)\"\n                        >\n                          @if (child.icon) {\n                            <svg [lucideIcon]=\"getIcon(child.icon)\" class=\"w-4 h-4 shrink-0\"></svg>\n                          }\n                          <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(child.label) }}</span>\n                        </button>\n                      </li>\n                    }\n                  </ul>\n                }\n              </li>\n            } @else {\n              <!-- Standalone item -->\n              <li>\n                <button\n                  type=\"button\"\n                  (click)=\"onItemClick(item)\"\n                  class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200\"\n                  [class._shk-bg-primary]=\"isItemActive(item)\"\n                  [class._shk-text-white]=\"isItemActive(item)\"\n                  [class.shadow-md]=\"isItemActive(item)\"\n                  [class._shk-text-surface-700]=\"!isItemActive(item)\"\n                  [class.dark:[color:var(--shk-surface-600)]]=\"!isItemActive(item)\"\n                  [class.hover:[background-color:var(--shk-surface-100)]]=\"!isItemActive(item)\"\n                  [class.dark:hover:[background-color:var(--shk-surface-200)]]=\"!isItemActive(item)\"\n                >\n                  @if (item.icon) {\n                    <svg [lucideIcon]=\"getIcon(item.icon)\" class=\"w-5 h-5 shrink-0\"></svg>\n                  }\n                  <span class=\"flex-1 text-left whitespace-nowrap overflow-hidden\">{{ label(item.label) }}</span>\n                  @if (item.badge !== undefined) {\n                    <span class=\"text-xs font-bold px-2 py-0.5 rounded-full _shk-bg-primary _shk-text-white shrink-0\">\n                      {{ item.badge }}\n                    </span>\n                  }\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      </nav>\n    </div>\n  }\n</aside>\n", styles: [":host{display:block}.rail-workspace{cursor:pointer;transition:opacity .2s ease,box-shadow .2s ease}.rail-workspace.is-collapsed:hover{cursor:col-resize}.rail-workspace .rail-app-icon,.rail-workspace .rail-toggle-icon{grid-area:1 / 1 / 2 / 2;transition:opacity .2s ease}.rail-toggle-icon,.rail-workspace.is-collapsed:hover .rail-app-icon{opacity:0}.rail-workspace.is-collapsed:hover .rail-toggle-icon{opacity:1}.rail-icon{background:transparent;color:var(--shk-surface-700);border:1px solid transparent;transition:transform .18s ease,color .18s ease,background-color .18s ease,box-shadow .18s ease}.rail-icon svg{stroke-width:1.8}.rail-icon:hover{background:var(--shk-surface-100);color:var(--shk-primary-600)}.dark .rail-icon:hover{background:var(--shk-surface-200);color:var(--shk-primary-400)}.rail-icon.is-active{background:var(--shk-primary-600);color:#fff;box-shadow:0 1px 2px #0003}.dark .rail-icon.is-active{background:var(--shk-primary-500);color:#fff}.rail-logout:hover{color:var(--shk-error-500)}.dark .rail-logout:hover{color:var(--shk-error-400)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], activeSectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSectionKey", required: false }] }, { type: i0.Output, args: ["activeSectionKeyChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], activeLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeLang", required: false }] }], langs: [{ type: i0.Input, args: [{ isSignal: true, alias: "langs", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }], labelPipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPipe", required: false }] }], railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], workspaceTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceTooltip", required: false }] }], logoutTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoutTooltip", required: false }] }], collapseTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTooltip", required: false }] }], expandTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTooltip", required: false }] }], sectionSelected: [{ type: i0.Output, args: ["sectionSelected"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], setLang: [{ type: i0.Output, args: ["setLang"] }], logoutRequested: [{ type: i0.Output, args: ["logoutRequested"] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], workspaceClick: [{ type: i0.Output, args: ["workspaceClick"] }] } });
+class ChartComponent {
+    static { this.registered = false; }
     constructor() {
         this.type = input('bar', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         this.data = input({ datasets: [] }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -2851,6 +3198,38 @@ class ChartComponent {
             });
         });
     }
+    ngAfterViewInit() {
+        this.initialized = true;
+        this.initChart();
+    }
+    ngOnDestroy() {
+        this.chartInstance?.destroy();
+    }
+    resetCanvas() {
+        const canvas = this.canvasRef().nativeElement;
+        canvas.width = canvas.width;
+    }
+    initChart() {
+        this.resetCanvas();
+        const canvas = this.canvasRef().nativeElement;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        this.chartInstance = new Chart(ctx, {
+            type: this.type(),
+            data: this.deepClone(this.data()),
+            options: this.deepClone(this.options()),
+        });
+        this.chartInstance.resize();
+    }
+    deepClone(value) {
+        try {
+            if (typeof structuredClone === 'function')
+                return structuredClone(value);
+        }
+        catch { }
+        return JSON.parse(JSON.stringify(value));
+    }
     updateChart(type, data, options) {
         if (!this.chartInstance) {
             this.initChart();
@@ -2858,8 +3237,10 @@ class ChartComponent {
         }
         const config = this.chartInstance.config;
         if (type !== config.type) {
+            this.chartInstance.stop();
             this.chartInstance.destroy();
             this.chartInstance = null;
+            this.resetCanvas();
             this.initChart();
             return;
         }
@@ -2913,5 +3294,5 @@ function readThemeColors() {
  * Generated bundle index. Do not edit.
  */
-export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DatePickerComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, SelectComponent, TableComponent, TextFieldComponent, ToggleComponent, TooltipComponent, readThemeColors };
+export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DatePickerComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, SidebarComponent, TableComponent, TextFieldComponent, ToggleComponent, TooltipComponent, readThemeColors };
 //# sourceMappingURL=shirkasoft-ui-components.mjs.map