shirkasoft-ui-components 1.1.3 → 1.2.0

package/fesm2022/shirkasoft-ui-components.mjs

@@ -1,62 +1,154 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, 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, PLATFORM_ID, Inject, Directive, contentChildren } 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, linkedSignal, PLATFORM_ID, Directive, contentChildren } 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, LucideArrowDown, LucideArrowUp, LucideArrowLeft, LucideArrowRight, LucideFilter, LucideCalculator, LucideMoreHorizontal, LucideMenu, LucideCircleCheck, LucideGlobe, LucideWallet, LucidePercent, LucideDollarSign, LucideCreditCard, LucideTag, LucideTruck, LucidePackage, LucideShoppingCart, LucideFolderOpen, LucideFileText, LucideHome, LucideMapPin, LucidePhone, LucideMail, LucideLock, LucideChevronUp, LucideSparkles, LucideCopy, LucideRocket, LucideRefreshCw, LucideDownload, LucideAlertCircle, LucideAlertTriangle, LucideSettings, LucideClock, LucideCalendarCheck, LucideCalendar, LucideStar, LucideUsers, LucideUser, LucideSave, LucidePencil, LucidePlus, LucideCircleHelp, LucideList, LucideWarehouse, LucideUserCog, LucideShieldCheck, LucideLineChart, LucideBot, LucideReceipt, LucideTags, LucideBox, LucideLandmark, LucideBuilding, LucideUserPlus, LucideUserRoundX, LucideUserCheck, LucideLogOut, LucideVideo, LucidePlay, LucideShare2, LucideArchive, LucidePresentation, LucideFileSpreadsheet, LucideCirclePlus, LucideToggleLeft, LucideToggleRight, LucideUserPen, LucideKey, LucideFunnel, LucideInbox, LucideArrowUpDown, LucideChevronsRight, LucideChevronsLeft, LucideBarChart3, LucideBuilding2, LucideLayoutDashboard, LucideHouse, LucideBanknote, LucidePanelRight, LucideSliders, LucideBriefcase, LucideIdCard, LucideChartLine, LucideChartPie, LucidePuzzle, LucideLayers, LucideShield, LucideUserRound, LucideUtensils, LucideShip, LucideBus, LucideMountain, LucideCar, LucideTicket, LucideHotel, LucideCalendarDays, LucideCircleAlert, LucideStickyNote, LucideCoins, LucideMap, LucideClipboardCheck, LucideScrollText } from '@lucide/angular';
+import { LucideX, LucideUpload, LucideTriangleAlert, LucideTrash2, LucideSearch, LucideRefreshCw, LucidePlus, LucidePanelRight, LucideMinimize2, LucideMenu, LucideMaximize2, LucideLogOut, LucideLoaderCircle, LucideLoader, LucideInfo, LucideInbox, LucideGlobe, LucideFunnel, LucideFile, LucideEyeOff, LucideEye, LucideCirclePlus, LucideCircleQuestionMark, LucideChevronsRight, LucideChevronsLeft, LucideChevronRight, LucideChevronLeft, LucideChevronDown, LucideCalendarDays, LucideCheck, LucideArrowUpDown, LucideArrowLeft, LucideDynamicIcon, LucideTag, LucidePackage, LucideUserRound, LucideMapPin, LucideUtensils, LucideShield, LucideShip, LucideBus, LucideMountain, LucideCar, LucideTicket, LucideHotel } from '@lucide/angular';
 import { Router, RouterLink } from '@angular/router';
 import { Subject, debounceTime, BehaviorSubject } from 'rxjs';
 import { Chart, registerables } from 'chart.js';
 
-const icons$9 = {
-    search: LucideSearch,
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Maps the icon names used across the library to their Lucide component. */
+const ICONS = {
+    'arrow-left': LucideArrowLeft,
+    'arrow-up-down': LucideArrowUpDown,
+    check: LucideCheck,
+    'calendar-days': LucideCalendarDays,
+    'chevron-down': LucideChevronDown,
+    'chevron-left': LucideChevronLeft,
+    'chevron-right': LucideChevronRight,
+    'chevrons-left': LucideChevronsLeft,
+    'chevrons-right': LucideChevronsRight,
+    'circle-help': LucideCircleQuestionMark,
+    'circle-plus': LucideCirclePlus,
     eye: LucideEye,
     'eye-off': LucideEyeOff,
+    file: LucideFile,
+    filter: LucideFunnel,
+    globe: LucideGlobe,
+    inbox: LucideInbox,
+    info: LucideInfo,
+    loader: LucideLoader,
+    'loader-circle': LucideLoaderCircle,
+    'log-out': LucideLogOut,
+    'maximize-2': LucideMaximize2,
+    menu: LucideMenu,
+    'minimize-2': LucideMinimize2,
+    'panel-right': LucidePanelRight,
+    plus: LucidePlus,
+    refresh: LucideRefreshCw,
+    search: LucideSearch,
+    'trash-2': LucideTrash2,
+    'triangle-alert': LucideTriangleAlert,
+    upload: LucideUpload,
+    x: LucideX,
 };
+/**
+ * Resolves the icon passed to a component into a lucide component.
+ * Accepts a registered string name, an existing lucide component or a LucideIconData object.
+ */
+function getIcon(icon, fallback = LucideCircleQuestionMark) {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        return ICONS[icon] ?? fallback;
+    }
+    if (typeof icon === 'function') {
+        return icon;
+    }
+    return fallback;
+}
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Text input (or textarea) that implements ControlValueAccessor with built-in
+ * validation messages, card/number formatting, password reveal and search mode.
+ */
 class TextFieldComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
+        /** id attribute applied to the native input. */
         this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Formats the value as a credit card number (XXXX-XXXX-XXXX-XXXX). */
         this.formatCard = input(false, ...(ngDevMode ? [{ debugName: "formatCard" }] : /* istanbul ignore next */ []));
+        /** Blocks the minus sign from being typed. */
         this.preventNegative = input(false, ...(ngDevMode ? [{ debugName: "preventNegative" }] : /* istanbul ignore next */ []));
+        /** Label rendered above the field. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Native input type ('text', 'password', 'number', etc.). */
         this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Allows digits only, stripping any other character. */
         this.numbersOnly = input(false, ...(ngDevMode ? [{ debugName: "numbersOnly" }] : /* istanbul ignore next */ []));
+        /** When true, allows decimals and normalizes ',' to '.'. */
         this.allowDecimals = input(false, ...(ngDevMode ? [{ debugName: "allowDecimals" }] : /* istanbul ignore next */ []));
+        /** Maximum number of characters the user can type. */
         this.maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+        /** Placeholder text of the native input. */
         this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Custom messages keyed by validation error name. */
         this.errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+        /** Parent reactive form used to resolve the control by label. */
         this.formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Reactive control bound directly to this field. */
         this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Disables the field. */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Custom error message shown regardless of validation errors. */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /** Renders a textarea instead of an input. */
         this.isTextArea = input(false, ...(ngDevMode ? [{ debugName: "isTextArea" }] : /* istanbul ignore next */ []));
+        /** Height classes applied when `isTextArea` is true. */
         this.textAreaHeight = input('h-28', ...(ngDevMode ? [{ debugName: "textAreaHeight" }] : /* istanbul ignore next */ []));
+        /** Renders the field as a read-only search trigger. */
         this.searchMode = input(false, ...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
+        /** Value shown when `searchMode` is enabled. */
         this.displayValue = input('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        /** Native autocomplete attribute. */
         this.autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        /** Emitted when the search button is clicked (search mode). */
         this.searchButtonClick = output();
-        this.getIcon = (name) => icons$9[name] ?? LucideEye;
+        this.getIcon = (name) => getIcon(name, LucideEye);
+        /** Reference to the native input element. */
         this.inputElement = viewChild('input', ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+        /** Reference to the native textarea element. */
         this.textareaElement = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaElement" }] : /* istanbul ignore next */ []));
+        /** Internal raw value of the field. */
         this._value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Reactive disabled state from the form control. */
         this._disabledState = signal(false, ...(ngDevMode ? [{ debugName: "_disabledState" }] : /* istanbul ignore next */ []));
+        /** Whether the password is currently revealed. */
         this.showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        /** Tracks whether the control was in error at some point (for "was fixed" UX). */
         this.hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+        /** Counter bumped to trigger recomputation of derived error signals. */
         this.errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+        /** Text displayed in search mode when `displayValue` is set. */
         this.displayLabel = computed(() => {
             if (this.searchMode() && this.displayValue()) {
                 return this.displayValue();
             }
             return '';
         }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+        /** Prevents re-subscribing to the same form control. */
         this.subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
+        /** Effective disabled state combining the input and the form binding. */
         this.isDisabled = computed(() => this.disabled() || this._disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Current field value. */
         this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Resolves the reactive control: explicit `control` or `formGroup.get(label)`. */
         this.actualControl = computed(() => {
             const ctrl = this.control();
             if (ctrl)
@@ -68,16 +160,19 @@ class TextFieldComponent {
             }
             return undefined;
         }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+        /** True when the resolved control is invalid and dirty or touched. */
         this.shouldShowError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
         }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+        /** True when the control had an error before and is now valid (success state). */
         this.wasFixedError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return this.hadError() && ctrl?.valid && ctrl?.touched;
         }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+        /** Resolved list of error messages for the current control state. */
         this.getErrorMessages = computed(() => {
             this.errorTracker();
             const customError = this.errorMessage();
@@ -112,6 +207,7 @@ class TextFieldComponent {
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+        /** Effective input type (handles textarea and password reveal). */
         this.effectiveType = computed(() => {
             if (this.isTextArea())
                 return 'text';
@@ -120,7 +216,9 @@ class TextFieldComponent {
             return this.type();
         }, ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
         this.transloco = inject(TranslocoService);
+        /** Callback notified with the new value (ControlValueAccessor). */
         this.onChange = () => { };
+        /** Callback notified when the field is touched (ControlValueAccessor). */
         this.onTouched = () => { };
         this.destroyRef = inject(DestroyRef);
         effect(() => {
@@ -160,6 +258,7 @@ class TextFieldComponent {
             this.errorTracker.update((v) => v + 1);
         });
     }
+    /** Prevents disallowed characters based on the `numbersOnly`/`allowDecimals` config. */
     numberValidation(event) {
         const allowedKeys = [
             'Backspace',
@@ -198,6 +297,7 @@ class TextFieldComponent {
         }
         event.preventDefault();
     }
+    /** Marks the field as touched and refreshes the error state. */
     onBlur() {
         this.onTouched();
         this.errorTracker.update((v) => v + 1);
@@ -206,6 +306,7 @@ class TextFieldComponent {
             this.hadError.set(true);
         }
     }
+    /** Formats the raw input as a credit card number and notifies the control. */
     onCardInput(event) {
         const input = event.target;
         let value = input.value.replace(/[^0-9]/g, '');
@@ -222,6 +323,7 @@ class TextFieldComponent {
         input.value = formatted;
         this.onChange(formatted);
     }
+    /** Handles raw input: applies number/card/max-length formatting and notifies the control. */
     onInput(event) {
         const input = event.target;
         let newValue = input.value;
@@ -255,9 +357,11 @@ class TextFieldComponent {
             this.onChange(newValue);
         }
     }
+    /** Toggles the visibility of a password field. */
     togglePasswordVisibility() {
         this.showPassword.update((v) => !v);
     }
+    /** Sets the value from the form control applying the same formatting rules. */
     writeValue(value) {
         let processedValue = value;
         if (this.allowDecimals() && value) {
@@ -284,12 +388,15 @@ class TextFieldComponent {
             this._value.set(processedValue);
         }
     }
+    /** Registers the callback invoked on value changes (ControlValueAccessor). */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /** Registers the callback invoked when the field is touched. */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** Reflects the disabled state of the form control. */
     setDisabledState(isDisabled) {
         this._disabledState.set(isDisabled);
         this.cdr.markForCheck();
@@ -314,12 +421,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     ], 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 }] }] } });
 
+/**
+ * Central notification store. Components push/update/remove notifications
+ * reactively through signals for the notification component to render.
+ */
 class NotificationService {
     constructor() {
+        /** Reactive list of visible notifications. */
         this.notificationsSignal = signal([], ...(ngDevMode ? [{ debugName: "notificationsSignal" }] : /* istanbul ignore next */ []));
+        /** Monotonic id counter for new notifications. */
         this.currentId = 0;
+        /** Readonly reactive list of visible notifications. */
         this.notifications = this.notificationsSignal.asReadonly();
     }
+    /**
+     * Adds a notification and returns its id. When `showProgress` is false and
+     * `duration` is positive, it auto-removes after that many ms.
+     */
     addNotification(message, type = 'info', showProgress = false, duration = 5000) {
         const id = (++this.currentId).toString();
         const notification = {
@@ -338,6 +456,7 @@ class NotificationService {
         }
         return id;
     }
+    /** Updates a progress notification; auto-removes when progress hits 100. */
     updateProgress(notificationId, progress) {
         const currentNotifications = this.notificationsSignal();
         const index = currentNotifications.findIndex((n) => n.id === notificationId);
@@ -349,12 +468,15 @@ class NotificationService {
             }
         }
     }
+    /** Removes the given notification. */
     removeNotification(notification) {
         this.removeNotificationById(notification.id);
     }
+    /** Removes the notification with the given id. */
     removeNotificationById(notificationId) {
         this.notificationsSignal.update((notifications) => notifications.filter((n) => n.id !== notificationId));
     }
+    /** Removes every visible notification. */
     clearAll() {
         this.notificationsSignal.set([]);
     }
@@ -368,27 +490,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }] });
 
-const icons$8 = {
-    check: LucideCheck,
-    'circle-x': LucideCircleX,
-    info: LucideInfo,
-    'triangle-alert': LucideTriangleAlert,
-    x: LucideX,
-};
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Toast notification host that renders the notifications pushed through the
+ * NotificationService in the configured position.
+ */
 class NotificationComponent {
     constructor() {
+        /** Position of the notification stack: center, right or left top. */
         this.position = input('center-top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         this.notificationService = inject(NotificationService);
-        this.getIcon = (name) => icons$8[name] ?? LucideInfo;
+        this.getIcon = (name) => getIcon(name, LucideInfo);
+        /** Maps each notification type to its internal icon name. */
         this.iconMap = {
             success: 'check',
             error: 'circle-x',
             info: 'info',
             warning: 'triangle-alert',
         };
+        /** Live list of active notifications. */
         this.notifications = this.notificationService.notifications;
+        /** Notifications sorted with the newest first. */
         this.sortedNotifications = computed(() => [...this.notifications()].reverse(), ...(ngDevMode ? [{ debugName: "sortedNotifications" }] : /* istanbul ignore next */ []));
+        /** Whether there are notifications to show. */
         this.hasNotifications = computed(() => this.notifications().length > 0, ...(ngDevMode ? [{ debugName: "hasNotifications" }] : /* istanbul ignore next */ []));
+        /** CSS classes positioning the stack according to `position`. */
         this.positionClass = computed(() => {
             const base = 'fixed top-4 z-[9999] space-y-4 sm:space-y-6 sm:top-6 lg:top-8';
             switch (this.position()) {
@@ -401,12 +531,15 @@ class NotificationComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "positionClass" }] : /* istanbul ignore next */ []));
     }
+    /** Resolves the icon name for a notification type. */
     getNotificationIcon(type) {
         return this.iconMap[type] || 'info';
     }
+    /** Removes a notification through the service. */
     removeNotification(notification) {
         this.notificationService.removeNotification(notification);
     }
+    /** Rounds the progress value of a notification. */
     roundProgress(progress) {
         return Math.round(progress || 0);
     }
@@ -418,15 +551,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-notification', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"positionClass()\">\n  @for (notification of sortedNotifications(); track notification.id) {\n    <div\n      [ngClass]=\"{\n        'bg-green-50/80 dark:bg-green-900/30 border-green-400 dark:border-green-600 text-green-800 dark:text-green-200':\n          notification.type === 'success',\n        'bg-red-50/80 dark:bg-red-900/30 border-red-400 dark:border-red-600 text-red-800 dark:text-red-200':\n          notification.type === 'error',\n        'bg-blue-50/80 dark:bg-blue-900/30 border-blue-400 dark:border-blue-600 text-blue-800 dark:text-blue-200':\n          notification.type === 'info',\n        'bg-yellow-50/80 dark:bg-yellow-900/30 border-yellow-400 dark:border-yellow-500 text-yellow-800 dark:text-yellow-200':\n          notification.type === 'warning',\n      }\"\n      class=\"flex items-center w-full min-w-[320px] max-w-xs sm:max-w-sm lg:max-w-md p-4 mb-4 border-l-4 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 transform hover:scale-105 hover:shadow-xl\"\n      role=\"alert\"\n    >\n      <div\n        [ngClass]=\"{\n          'text-green-600': notification.type === 'success',\n          'text-red-600': notification.type === 'error',\n          'text-blue-600': notification.type === 'info',\n          'text-yellow-600': notification.type === 'warning',\n        }\"\n        class=\"inline-flex items-center justify-center flex-shrink-0 w-10 h-10 rounded-lg bg-opacity-10\"\n      >\n        <svg [lucideIcon]=\"getIcon(getNotificationIcon(notification.type))\" class=\"w-6 h-6\"></svg>\n      </div>\n      <div class=\"ms-4 flex-1 text-sm font-medium break-words\">\n        {{ notification.message }}\n      </div>\n      <button\n        type=\"button\"\n        (click)=\"removeNotification(notification)\"\n        aria-label=\"Close\"\n        [ngClass]=\"{\n          'text-green-600 hover:text-green-800':\n            notification.type === 'success',\n          'text-red-600 hover:text-red-800': notification.type === 'error',\n          'text-blue-600 hover:text-blue-800': notification.type === 'info',\n          'text-yellow-600 hover:text-yellow-800':\n            notification.type === 'warning',\n        }\"\n        class=\"mx-2 -my-1.5 bg-transparent focus:outline-none\"\n      >\n        <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Switch / checkbox component that implements ControlValueAccessor so it can
+ * be used with reactive and template-driven forms.
+ */
 class ToggleComponent {
     constructor() {
+        /** Text displayed next to the control. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Visual style: 'toggle' (switch) or 'checkbox'. Defaults to 'toggle'. */
         this.mode = input('toggle', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Manually controlled checked state (supports one-way binding). */
         this.checked = input(undefined, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /** Emitted with the new value when the user toggles the control. */
         this.checkedChange = output();
+        /** Internal controlled/reactive value. */
         this._value = signal(false, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Reactive disabled state. */
         this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        /** Callback notified with the new value on change (ControlValueAccessor). */
         this.onChange = () => { };
+        /** Callback notified when the control loses focus or is touched. */
         this.onTouched = () => { };
         effect(() => {
             const manual = this.checked();
@@ -435,18 +585,26 @@ class ToggleComponent {
             }
         });
     }
+    /** Sets the value from the form control. */
     writeValue(value) {
         this._value.set(!!value);
     }
+    /** Registers the callback invoked on value changes (ControlValueAccessor). */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /** Registers the callback invoked when the control is touched. */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** Reflects the disabled state of the form control. */
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
     }
+    /**
+     * Inverts the current value (unless disabled), notifies the form control,
+     * marks the control as touched and emits `checkedChange`.
+     */
     toggle() {
         if (this._disabled())
             return;
@@ -568,24 +726,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Numeric input tailored for currency values with a optional percentage mode.
+ * Uses two-way bindable models: `value` and `isPercentage`.
+ */
 class PriceInputComponent {
     constructor() {
+        /** Numeric value, bindable with [(value)]. */
         this.value = model.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Whether the input works as a percentage, bindable with [(isPercentage)]. */
         this.isPercentage = model(false, ...(ngDevMode ? [{ debugName: "isPercentage" }] : /* istanbul ignore next */ []));
+        /** Label displayed above the field. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** id attribute applied to the native input. */
         this.inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        /** Marks the field as required. */
         this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /** Disables the input. */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Minimum allowed value. */
         this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Maximum allowed value. */
         this.max = input(Infinity, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Shows the error styling on the field. */
         this.showError = input(false, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+        /** Message rendered when the field is in error state. */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     }
+    /** Toggles between amount and percentage modes (unless disabled). */
     toggleMode() {
         if (this.disabled())
             return;
         this.isPercentage.update(v => !v);
     }
+    /** Parses the user input and updates the bound `value`. */
     onInput(event) {
         const input = event.target;
         this.value.set(parseFloat(input.value) || 0);
@@ -598,38 +777,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-price-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-600)] mb-1\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"text-red-400\">*</span>\n      }\n    </div>\n  }\n  <div class=\"flex\">\n    <input\n      [id]=\"inputId()\"\n      type=\"number\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"value.set($event ?? 0)\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      step=\"0.01\"\n      class=\"block w-full px-3 py-2 _shk-text-surface-700 dark:[color:var(--shk-surface-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: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': showError(),\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)]': !showError()\n      }\"\n    />\n    <button\n      type=\"button\"\n      (click)=\"toggleMode()\"\n      [disabled]=\"disabled()\"\n      class=\"px-3 py-2 text-sm font-medium border rounded-r-lg transition-colors shrink-0\"\n      [ngClass]=\"{\n        '_shk-bg-primary-soft _shk-border-primary-200 _shk-text-primary-700 dark:[background-color:var(--shk-primary-900)] dark:[border-color:var(--shk-primary-700)] dark:[color:var(--shk-primary-300)]': isPercentage(),\n        '_shk-bg-white _shk-border _shk-text-surface-500 dark:[background-color:var(--shk-surface-100)] dark:[border-color:var(--shk-surface-200)] dark:[color:var(--shk-surface-400)]': !isPercentage(),\n        'cursor-not-allowed opacity-50': disabled()\n      }\"\n    >\n      {{ isPercentage() ? '%' : '$' }}\n    </button>\n  </div>\n  @if (showError()) {\n    <div class=\"text-xs _shk-text-red-500 mt-1\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], isPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPercentage", required: false }] }, { type: i0.Output, args: ["isPercentageChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Date/time picker implemented as a ControlValueAccessor. Supports choosing a
+ * day, month or year, optional time selection (with seconds/12-hour format),
+ * min/max constraints and locale-aware labels.
+ */
 class DatePickerComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         this.transloco = inject(TranslocoService);
+        /** HTML id for the input (for label/for pairing). */
         this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Granularity of the picker ('date' | 'month' | 'year'). */
         this.view = input('date', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** Label shown above the input. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Placeholder of the input. */
         this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** FormGroup used to resolve the control from `label`. */
         this.formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Directly bound FormControl. */
         this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Disables the picker. */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Custom error message displayed (overrides translated ones). */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /** Per-validation-key custom error messages. */
         this.errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+        /** Minimum allowed date (YYYY-MM-DD) or year/month string. */
         this.minValue = input('', ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /** Maximum allowed date (YYYY-MM-DD) or year/month string. */
         this.maxValue = input('', ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /** Locale used for month/day names and formatted labels. */
         this.locale = input('es', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Edits only the time portion of the value. */
+        this.timeOnly = input(false, ...(ngDevMode ? [{ debugName: "timeOnly" }] : /* istanbul ignore next */ []));
+        /** Shows the time selectors alongside the date. */
+        this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        /** Hour format: '12' or '24'. */
+        this.hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        /** Whether the seconds selector is shown. */
+        this.showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        /** Step (in minutes) for the minute selector. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown calendar is open. */
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Year currently displayed in the calendar. */
         this.viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+        /** Month currently displayed in the calendar (0-based). */
         this.viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+        /** Starting year of the decade shown in year view. */
         this.viewDecade = signal(Math.floor(new Date().getFullYear() / 10) * 10, ...(ngDevMode ? [{ debugName: "viewDecade" }] : /* istanbul ignore next */ []));
+        /** Hour selected in the time selectors. */
+        this.viewHour = signal(0, ...(ngDevMode ? [{ debugName: "viewHour" }] : /* istanbul ignore next */ []));
+        /** Minute selected in the time selectors. */
+        this.viewMinute = signal(0, ...(ngDevMode ? [{ debugName: "viewMinute" }] : /* istanbul ignore next */ []));
+        /** Second selected in the time selectors. */
+        this.viewSecond = signal(0, ...(ngDevMode ? [{ debugName: "viewSecond" }] : /* istanbul ignore next */ []));
+        /** Meridiem selected in 12-hour format. */
+        this.viewMeridiem = signal('AM', ...(ngDevMode ? [{ debugName: "viewMeridiem" }] : /* istanbul ignore next */ []));
+        /** Date part selected but not yet committed until the time is confirmed. */
+        this.pendingDate = signal(null, ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
+        /** Underlying value (mirrors the reactive control). */
         this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Disabled state coming from the reactive form infrastructure. */
         this._disabledState = signal(false, ...(ngDevMode ? [{ debugName: "_disabledState" }] : /* istanbul ignore next */ []));
+        /** Whether status subscriptions have been attached to the control. */
         this.subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
         this.valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+        /** Counter used to recompute the error helpers reactively. */
         this.errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+        /** Whether an error was displayed at some point. */
         this.hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+        /** ControlValueAccessor callbacks. */
         this.onChange = () => { };
         this.onTouched = () => { };
+        /** Current value of the picker. */
         this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Whether the picker is disabled (input or reactive form). */
         this.isDisabled = computed(() => this.disabled() || this._disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Resolves the control from `control` input or `formGroup`+`label`. */
         this.actualControl = computed(() => {
             const ctrl = this.control();
             if (ctrl)
@@ -640,16 +874,19 @@ class DatePickerComponent {
                 return fg.get(lbl);
             return undefined;
         }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+        /** Whether the bound control should show its error message. */
         this.shouldShowError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
         }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+        /** Whether an error was fixed (invalid before, now valid and touched). */
         this.wasFixedError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return this.hadError() && ctrl?.valid && ctrl?.touched;
         }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+        /** Validation error messages to display, custom or translated. */
         this.getErrorMessages = computed(() => {
             this.errorTracker();
             const customError = this.errorMessage();
@@ -671,28 +908,54 @@ class DatePickerComponent {
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+        /** Date part displayed in the calendar (pending date or committed value). */
+        this.displayedDate = computed(() => {
+            if (this.timeOnly())
+                return null;
+            const value = this.pendingDate();
+            if (value)
+                return value;
+            const current = this._value();
+            if (!current)
+                return null;
+            return this.datePartOf(current);
+        }, ...(ngDevMode ? [{ debugName: "displayedDate" }] : /* istanbul ignore next */ []));
+        /** Human-readable label for the selected value in the input. */
         this.displayLabel = computed(() => {
             const value = this._value();
             if (!value)
                 return '';
+            if (this.timeOnly()) {
+                return this.formatTimeFromValue(value);
+            }
+            const datePart = this.datePartOf(value);
+            const timePart = value.includes('T') ? value.split('T')[1] : null;
             const v = this.view();
+            let label;
             if (v === 'year') {
-                return value;
+                label = datePart;
             }
-            if (v === 'month') {
-                const [y, m] = value.split('-').map(Number);
+            else if (v === 'month') {
+                const [y, m] = datePart.split('-').map(Number);
                 const fmt = new Intl.DateTimeFormat(this.locale(), {
                     month: 'long',
                     year: 'numeric',
                 });
-                const label = fmt.format(new Date(y, m - 1, 1));
-                return label.charAt(0).toUpperCase() + label.slice(1);
+                label = fmt.format(new Date(y, m - 1, 1));
+                label = label.charAt(0).toUpperCase() + label.slice(1);
             }
-            const fmt = new Intl.DateTimeFormat(this.locale(), {
-                dateStyle: 'long',
-            });
-            return fmt.format(new Date(value + 'T12:00:00'));
+            else {
+                const fmt = new Intl.DateTimeFormat(this.locale(), {
+                    dateStyle: 'long',
+                });
+                label = fmt.format(new Date(datePart + 'T12:00:00'));
+            }
+            if (this.showTime() && timePart) {
+                label += ' ' + this.formatTimeFromValue(timePart);
+            }
+            return label;
         }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+        /** Localized short month names for the year view. */
         this.monthNames = computed(() => {
             const fmt = new Intl.DateTimeFormat(this.locale(), { month: 'short' });
             return Array.from({ length: 12 }, (_, i) => {
@@ -700,6 +963,7 @@ class DatePickerComponent {
                 return name.charAt(0).toUpperCase() + name.slice(1);
             });
         }, ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+        /** Localized short weekday names for the calendar header. */
         this.dayNames = computed(() => {
             const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
             return Array.from({ length: 7 }, (_, i) => {
@@ -707,12 +971,15 @@ class DatePickerComponent {
                 return name.charAt(0).toUpperCase() + name.slice(1, 3);
             });
         }, ...(ngDevMode ? [{ debugName: "dayNames" }] : /* istanbul ignore next */ []));
+        /** Number of days in the currently viewed month. */
         this.daysInMonth = computed(() => {
             return new Date(this.viewYear(), this.viewMonth() + 1, 0).getDate();
         }, ...(ngDevMode ? [{ debugName: "daysInMonth" }] : /* istanbul ignore next */ []));
+        /** Weekday index (0=Sunday) of the first day of the viewed month. */
         this.firstDayOfMonth = computed(() => {
             return new Date(this.viewYear(), this.viewMonth(), 1).getDay();
         }, ...(ngDevMode ? [{ debugName: "firstDayOfMonth" }] : /* istanbul ignore next */ []));
+        /** Calendar grid: nulls for leading blanks then the days of the month. */
         this.calendarDays = computed(() => {
             const totalDays = this.daysInMonth();
             const firstDay = this.firstDayOfMonth();
@@ -723,6 +990,7 @@ class DatePickerComponent {
                 days.push(i);
             return days;
         }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+        /** Whether the prev navigation button is allowed by `minValue`. */
         this.canGoPrev = computed(() => {
             const v = this.view();
             const min = this.minValue();
@@ -739,6 +1007,7 @@ class DatePickerComponent {
             const minY = min ? Number(min) : undefined;
             return minY === undefined || this.viewYear() > minY;
         }, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
+        /** Whether the next navigation button is allowed by `maxValue`. */
         this.canGoNext = computed(() => {
             const v = this.view();
             const max = this.maxValue();
@@ -755,23 +1024,29 @@ class DatePickerComponent {
             const maxY = max ? Number(max) : undefined;
             return maxY === undefined || this.viewYear() < maxY;
         }, ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+        /** Year of the displayed date, if any. */
         this.selectedYear = computed(() => {
-            const value = this._value();
+            const value = this.displayedDate();
             return value ? Number(value.split('-')[0]) : null;
         }, ...(ngDevMode ? [{ debugName: "selectedYear" }] : /* istanbul ignore next */ []));
+        /** Month index (0-based) of the displayed date, if any. */
         this.selectedMonth = computed(() => {
-            const value = this._value();
+            const value = this.displayedDate();
             return value ? Number(value.split('-')[1]) - 1 : null;
         }, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : /* istanbul ignore next */ []));
+        /** Day of the displayed date, if any (date view only). */
         this.selectedDay = computed(() => {
-            const value = this._value();
+            const value = this.displayedDate();
             return value && this.view() === 'date' ? Number(value.split('-')[2]) : null;
         }, ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
+        /** 12 years of the viewed decade for the year view. */
         this.decadeYears = computed(() => {
             const start = this.viewDecade();
             return Array.from({ length: 12 }, (_, i) => start + i);
         }, ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+        /** (Unused legacy placeholder) plain year list. */
         this.years = [];
+        // Attach error-state subscriptions to the validated control once found.
         effect(() => {
             const ctrl = this.actualControl();
             if (!ctrl) {
@@ -791,6 +1066,7 @@ class DatePickerComponent {
             });
             this.subscribed.set(true);
         });
+        // One-way sync from the reactive control to the internal value signal.
         effect(() => {
             const ctrl = this.actualControl();
             if (!ctrl)
@@ -806,6 +1082,7 @@ class DatePickerComponent {
             }
         });
     }
+    /** Closes the dropdown when clicking outside the component. */
     onDocumentClick(event) {
         if (!this.isOpen())
             return;
@@ -813,9 +1090,11 @@ class DatePickerComponent {
             this.close();
         }
     }
+    /** Closes the dropdown on Escape. */
     onEscape() {
         this.close();
     }
+    /** Opens/closes the dropdown, syncing the calendar to the current value. */
     toggle() {
         if (this.isDisabled())
             return;
@@ -827,6 +1106,7 @@ class DatePickerComponent {
             this.isOpen.set(true);
         }
     }
+    /** Aligns the calendar view signals with the current value (or today). */
     syncViewToValue() {
         const val = this._value();
         const v = this.view();
@@ -835,20 +1115,38 @@ class DatePickerComponent {
             this.viewYear.set(now.getFullYear());
             this.viewMonth.set(now.getMonth());
             this.viewDecade.set(Math.floor(now.getFullYear() / 10) * 10);
+            this.viewHour.set(now.getHours());
+            this.viewMinute.set(now.getMinutes());
+            this.viewSecond.set(now.getSeconds());
+            this.pendingDate.set(this.toISODate(now));
             return;
         }
+        const datePart = this.datePartOf(val);
+        const timePart = val.includes('T') ? val.split('T')[1] : undefined;
         if (v === 'year') {
-            this.viewYear.set(Number(val));
+            this.viewYear.set(Number(datePart));
         }
         else if (v === 'month') {
-            this.viewYear.set(Number(val.split('-')[0]));
+            this.viewYear.set(Number(datePart.split('-')[0]));
         }
         else {
-            const d = new Date(val + 'T12:00:00');
+            const d = new Date(datePart + 'T12:00:00');
             this.viewYear.set(d.getFullYear());
             this.viewMonth.set(d.getMonth());
         }
+        const time = timePart ?? (this.timeOnly() ? val : undefined);
+        if (time) {
+            const [h, m, ss] = time.split(':').map(Number);
+            this.viewHour.set(h || 0);
+            this.viewMinute.set(m || 0);
+            this.viewSecond.set(ss || 0);
+            if (this.hourFormat() === '12') {
+                this.viewMeridiem.set(h >= 12 ? 'PM' : 'AM');
+            }
+        }
+        this.pendingDate.set(datePart);
     }
+    /** Closes the dropdown, marks the control as touched and refreshes errors. */
     close() {
         if (!this.isOpen())
             return;
@@ -861,6 +1159,7 @@ class DatePickerComponent {
         if (ctrl?.invalid && ctrl?.touched)
             this.hadError.set(true);
     }
+    /** Navigates the calendar to the previous year/month/decade. */
     prev() {
         const v = this.view();
         if (v === 'year') {
@@ -880,6 +1179,7 @@ class DatePickerComponent {
             });
         }
     }
+    /** Navigates the calendar to the next year/month/decade. */
     next() {
         const v = this.view();
         if (v === 'year') {
@@ -899,22 +1199,38 @@ class DatePickerComponent {
             });
         }
     }
+    /** Selects a day of the month (pending if time is shown). */
     selectDay(day) {
         const y = this.viewYear();
         const m = String(this.viewMonth() + 1).padStart(2, '0');
         const d = String(day).padStart(2, '0');
         const value = `${y}-${m}-${d}`;
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
         this.setValue(value);
     }
+    /** Selects a month of the year (pending if time is shown). */
     selectMonth(monthIndex) {
         const value = `${this.viewYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
         this.setValue(value);
     }
+    /** Selects a year (pending if time is shown). */
     selectYear(year) {
         const value = String(year);
+        if (this.showTime()) {
+            this.pendingDate.set(value);
+            return;
+        }
         this.setValue(value);
     }
-    setValue(value) {
+    /** Commits a value, updates the component, the control and the outputs. */
+    setValue(value, close = true) {
         this._value.set(value);
         this.onChange(value);
         const ctrl = this.actualControl();
@@ -922,19 +1238,115 @@ class DatePickerComponent {
             ctrl.setValue(value);
             ctrl.markAsDirty();
         }
-        this.close();
+        if (close)
+            this.close();
     }
+    /** Confirms the selected time and commits the combined date+time value. */
+    confirmTime() {
+        const h = this.viewHour();
+        const m = this.viewMinute();
+        const s = this.viewSecond();
+        let time = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+        if (this.showSeconds())
+            time += `:${String(s).padStart(2, '0')}`;
+        if (this.timeOnly()) {
+            this.setValue(time);
+            return;
+        }
+        const datePart = this.pendingDate() ??
+            `${this.viewYear()}-${String(this.viewMonth() + 1).padStart(2, '0')}-01`;
+        this.setValue(`${datePart}T${time}`);
+    }
+    /** Reads the hour selected in the time selector. */
+    onHourChange(event) {
+        this.viewHour.set(Number(event.target.value));
+    }
+    /** Reads the minute selected in the time selector. */
+    onMinuteChange(event) {
+        this.viewMinute.set(Number(event.target.value));
+    }
+    /** Reads the second selected in the time selector. */
+    onSecondChange(event) {
+        this.viewSecond.set(Number(event.target.value));
+    }
+    /** Current meridiem ("AM"/"PM") for the 12-hour format. */
+    meridiem() {
+        return this.viewMeridiem();
+    }
+    /** Reads the meridiem selected in the time selector. */
+    onMeridiemChange(event) {
+        this.viewMeridiem.set(event.target.value);
+    }
+    /** Splits the date part from a full ISO "date" or "dateTtime" value. */
+    datePartOf(value) {
+        const i = value.indexOf('T');
+        return i >= 0 ? value.slice(0, i) : value;
+    }
+    /** Formats a raw time string ("HH:mm[:ss]") using the configured format. */
+    formatTimeFromValue(time) {
+        const [h, m, ss] = time.split(':').map(Number);
+        return this.formatTime(h || 0, m || 0, ss || 0);
+    }
+    /** Formats hour/minute/second according to hour format and seconds option. */
+    formatTime(h, m, s) {
+        if (this.hourFormat() === '12') {
+            const h12 = h % 12 || 12;
+            const suffix = h < 12 ? ' AM' : ' PM';
+            return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')}${suffix}`;
+        }
+        let label = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+        if (this.showSeconds())
+            label += `:${String(s).padStart(2, '0')}`;
+        return label;
+    }
+    /** Formats a Date as a YYYY-MM-DD ISO string. */
+    toISODate(date) {
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    }
+    /** Whether the given day matches the currently selected date. */
     isSelectedDay(day) {
         return (this.selectedYear() === this.viewYear() &&
             this.selectedMonth() === this.viewMonth() &&
             this.selectedDay() === day);
     }
+    /** Hours available in the time selector ('12' maps to 0..11 or 12..23). */
+    hoursRange() {
+        if (this.hourFormat() === '12') {
+            const oneToTwelve = Array.from({ length: 12 }, (_, i) => i + 1);
+            return this.viewMeridiem() === 'PM'
+                ? oneToTwelve.map((h) => (h === 12 ? 12 : h + 12))
+                : oneToTwelve.map((h) => (h === 12 ? 0 : h));
+        }
+        return Array.from({ length: 24 }, (_, i) => i);
+    }
+    /** Minutes available in the time selector, stepped by `minuteStep`. */
+    minutesRange() {
+        const step = this.minuteStep();
+        return Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+    }
+    /** Seconds available in the time selector (0..59). */
+    secondsRange() {
+        return Array.from({ length: 60 }, (_, i) => i);
+    }
+    /** Formats an hour for display in the selector (12-hour aware). */
+    hourDisplay(hour) {
+        if (this.hourFormat() === '12') {
+            return String(hour % 12 || 12).padStart(2, '0');
+        }
+        return String(hour).padStart(2, '0');
+    }
+    /** Pads a minute value with a leading zero. */
+    minutesLabel(value) {
+        return String(value).padStart(2, '0');
+    }
+    /** Whether the given day is today's date. */
     isToday(day) {
         const now = new Date();
         return (this.viewYear() === now.getFullYear() &&
             this.viewMonth() === now.getMonth() &&
             day === now.getDate());
     }
+    /** Whether the given month matches the selected month and year. */
     isSelectedMonth(monthIndex) {
         return (this.selectedYear() === this.viewYear() &&
             this.selectedMonth() === monthIndex);
@@ -963,13 +1375,13 @@ class DatePickerComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DatePickerComponent, isStandalone: true, selector: "shk-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DatePickerComponent, isStandalone: true, selector: "shk-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"relative mb-4\">\n  @if (label()) {\n    <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-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 }); }
+        ], 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 (!timeOnly() && 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 (!timeOnly() && 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 (!timeOnly() && 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\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <div class=\"flex items-center justify-center gap-1\">\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewHour()\"\n                (change)=\"onHourChange($event)\"\n                aria-label=\"Hora\"\n              >\n                @for (h of hoursRange(); track h) {\n                  <option [value]=\"h\">{{ hourDisplay(h) }}</option>\n                }\n              </select>\n              <span class=\"_shk-text-surface-400\">:</span>\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewMinute()\"\n                (change)=\"onMinuteChange($event)\"\n                aria-label=\"Minutos\"\n              >\n                @for (minutes of minutesRange(); track minutes) {\n                  <option [value]=\"minutes\">{{ minutesLabel(minutes) }}</option>\n                }\n              </select>\n              @if (showSeconds()) {\n                <span class=\"text-sm _shk-text-surface-400\">:</span>\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"viewSecond()\"\n                  (change)=\"onSecondChange($event)\"\n                  aria-label=\"Segundos\"\n                >\n                  @for (seconds of secondsRange(); track seconds) {\n                    <option [value]=\"seconds\">{{ minutesLabel(seconds) }}</option>\n                  }\n                </select>\n              }\n              @if (hourFormat() === '12') {\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"meridiem()\"\n                  (change)=\"onMeridiemChange($event)\"\n                  aria-label=\"AM/PM\"\n                >\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              }\n            </div>\n            <button\n              type=\"button\"\n              (click)=\"confirmTime()\"\n              class=\"mt-3 w-full py-2 text-sm _shk-bg-primary _shk-text-white rounded-lg hover:[background-color:var(--shk-primary-700)] transition-colors\"\n            >\n              {{ timeOnly() ? 'Confirmar' : 'Introducir hora' }}\n            </button>\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 }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -979,8 +1391,8 @@ 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 _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: [{
+                    ], 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 (!timeOnly() && 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 (!timeOnly() && 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 (!timeOnly() && 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\n        @if (timeOnly() || showTime()) {\n          <div class=\"mt-3 pt-3 _shk-border dark:[border-color:var(--shk-surface-200)]\">\n            <div class=\"flex items-center justify-center gap-1\">\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewHour()\"\n                (change)=\"onHourChange($event)\"\n                aria-label=\"Hora\"\n              >\n                @for (h of hoursRange(); track h) {\n                  <option [value]=\"h\">{{ hourDisplay(h) }}</option>\n                }\n              </select>\n              <span class=\"_shk-text-surface-400\">:</span>\n              <select\n                class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                [value]=\"viewMinute()\"\n                (change)=\"onMinuteChange($event)\"\n                aria-label=\"Minutos\"\n              >\n                @for (minutes of minutesRange(); track minutes) {\n                  <option [value]=\"minutes\">{{ minutesLabel(minutes) }}</option>\n                }\n              </select>\n              @if (showSeconds()) {\n                <span class=\"text-sm _shk-text-surface-400\">:</span>\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"viewSecond()\"\n                  (change)=\"onSecondChange($event)\"\n                  aria-label=\"Segundos\"\n                >\n                  @for (seconds of secondsRange(); track seconds) {\n                    <option [value]=\"seconds\">{{ minutesLabel(seconds) }}</option>\n                  }\n                </select>\n              }\n              @if (hourFormat() === '12') {\n                <select\n                  class=\"px-2 py-1.5 text-sm _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md\"\n                  [value]=\"meridiem()\"\n                  (change)=\"onMeridiemChange($event)\"\n                  aria-label=\"AM/PM\"\n                >\n                  <option value=\"AM\">AM</option>\n                  <option value=\"PM\">PM</option>\n                </select>\n              }\n            </div>\n            <button\n              type=\"button\"\n              (click)=\"confirmTime()\"\n              class=\"mt-3 w-full py-2 text-sm _shk-bg-primary _shk-text-white rounded-lg hover:[background-color:var(--shk-primary-700)] transition-colors\"\n            >\n              {{ timeOnly() ? 'Confirmar' : 'Introducir hora' }}\n            </button>\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 }] }], timeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOnly", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
@@ -988,34 +1400,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-const icons$7 = {
-    info: LucideInfo,
-    'triangle-alert': LucideTriangleAlert,
-    x: LucideX,
-    'trash-2': LucideTrash2,
-    loader: LucideLoader,
-};
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Confirmation dialog opened via `show()` which resolves a Promise<boolean>
+ * with the user's choice.
+ */
 class ConfirmDialogComponent {
     constructor() {
-        this.getIcon = (name) => icons$7[name] ?? LucideTriangleAlert;
+        this.getIcon = (name) => getIcon(name, LucideTriangleAlert);
+        /** Title shown in the dialog header. */
         this.title = input('Confirmar acción', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Message body of the dialog. */
         this.message = input('¿Está seguro de realizar esta acción?', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Label of the confirm button. */
         this.confirmLabel = input('Confirmar', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+        /** Label of the cancel button. */
         this.cancelLabel = input('Cancelar', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+        /** Text shown on the confirm button while `loading` is true. */
         this.loadingText = input('Procesando…', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+        /** Visual style: 'danger', 'info' or 'warning'. */
         this.type = input('danger', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Shows a spinner and disables the confirm button. */
         this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Whether the cancel button is shown. */
         this.showCancel = input(true, ...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
+        /** Controls dialog visibility. */
         this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Resolver of the currently pending confirmation promise. */
         this.resolveRef = signal(null, ...(ngDevMode ? [{ debugName: "resolveRef" }] : /* istanbul ignore next */ []));
+        /** Emitted whenever the dialog is closed (confirm or cancel). */
         this.closed = output();
     }
+    /** Opens the dialog and returns a promise resolving with the user choice. */
     show() {
         this.visible.set(true);
         return new Promise((resolve) => {
             this.resolveRef.set(resolve);
         });
     }
+    /** Resolves with `true` when the user confirms. */
     onConfirm() {
         this.visible.set(false);
         const resolve = this.resolveRef();
@@ -1025,6 +1452,7 @@ class ConfirmDialogComponent {
         }
         this.closed.emit();
     }
+    /** Resolves with `false` when the user cancels. */
     onCancel() {
         this.visible.set(false);
         const resolve = this.resolveRef();
@@ -1034,6 +1462,7 @@ class ConfirmDialogComponent {
         }
         this.closed.emit();
     }
+    /** Clears the pending resolver on destroy. */
     ngOnDestroy() {
         this.resolveRef.set(null);
     }
@@ -1045,14 +1474,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-confirm-dialog', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[9999] p-4\"\n    (click)=\"onCancel()\"\n  >\n    <div\n      class=\"bg-white dark:[background-color:var(--shk-surface-100)] rounded-2xl shadow-2xl max-w-sm w-full animate-in fade-in zoom-in duration-200 overflow-hidden\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div\n        class=\"h-1.5 w-full\"\n        [class.bg-gradient-to-r]=\"type() !== 'warning'\"\n        [class.from-red-400]=\"type() === 'danger'\"\n        [class.to-red-600]=\"type() === 'danger'\"\n        [class.from-blue-400]=\"type() === 'info'\"\n        [class.to-blue-600]=\"type() === 'info'\"\n        [class.bg-amber-400]=\"type() === 'warning'\"\n      ></div>\n      <div class=\"p-6\">\n        <div class=\"flex items-start gap-4 mb-4\">\n          <div\n            class=\"w-12 h-12 rounded-full flex items-center justify-center shrink-0\"\n            [ngClass]=\"{\n              'bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400': type() === 'danger',\n              'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400': type() === 'info',\n              'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400': type() === 'warning',\n            }\"\n          >\n            @if (type() === 'info') {\n              <svg [lucideIcon]=\"getIcon('info')\" class=\"w-6 h-6\"></svg>\n            } @else {\n              <svg [lucideIcon]=\"getIcon('triangle-alert')\" class=\"w-6 h-6\"></svg>\n            }\n          </div>\n          <div>\n            <h3 class=\"text-lg font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)]\">{{ title() }}</h3>\n            <p class=\"_shk-text-surface-500 dark:[color:var(--shk-surface-400)] text-sm leading-relaxed mb-6\">{{ message() }}</p>\n          </div>\n        </div>\n        <div class=\"flex gap-3\">\n          @if (showCancel()) {\n            <button\n              type=\"button\"\n              (click)=\"onCancel()\"\n              [disabled]=\"loading()\"\n              class=\"flex-1 px-4 py-2 text-sm font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-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 justify-center gap-2\"\n            >\n              <svg [lucideIcon]=\"getIcon('x')\" class=\"w-4 h-4\"></svg>\n              {{ cancelLabel() }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            (click)=\"onConfirm()\"\n            [disabled]=\"loading()\"\n            class=\"flex-1 px-4 py-2 text-sm font-semibold text-white rounded-lg shadow-md transition-all flex items-center justify-center gap-2\"\n            [class.bg-red-600]=\"type() === 'danger'\"\n            [class.hover:bg-red-700]=\"type() === 'danger'\"\n            [class.shadow-red-500/20]=\"type() === 'danger'\"\n            [class.bg-primary-600]=\"type() === 'info'\"\n            [class.hover:bg-primary-700]=\"type() === 'info'\"\n            [class.shadow-primary-500/20]=\"type() === 'info'\"\n            [class.bg-amber-600]=\"type() === 'warning'\"\n            [class.hover:bg-amber-700]=\"type() === 'warning'\"\n            [class.shadow-amber-500/20]=\"type() === 'warning'\"\n          >\n            @if (loading()) {\n              <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-4 h-4 animate-spin\"></svg>\n            } @else if (type() === 'danger') {\n              <svg [lucideIcon]=\"getIcon('trash-2')\" class=\"w-4 h-4\"></svg>\n            }\n            {{ loading() ? loadingText() : confirmLabel() }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+/**
+ * Programmatically opens the confirmation dialog and resolves a Promise
+ * with the user's decision (true = confirm, false = cancel).
+ */
 class ConfirmDialogService {
     constructor() {
+        /** Reference to the currently open dialog, if any. */
         this.dialogRef = null;
         this.destroyRef = inject(DestroyRef);
         this.appRef = inject(ApplicationRef);
         this.injector = inject(EnvironmentInjector);
         this.destroyRef.onDestroy(() => this.cleanupDialog());
     }
+    /**
+     * Opens a confirmation dialog with the given configuration and returns a
+     * promise resolving with the user's choice.
+     */
     async confirm(config) {
         if (this.dialogRef)
             this.cleanupDialog();
@@ -1076,6 +1514,7 @@ class ConfirmDialogService {
             this.cleanupDialog();
         }
     }
+    /** Detaches and destroys the mounted dialog if present. */
     cleanupDialog() {
         if (this.dialogRef) {
             this.appRef.detachView(this.dialogRef.hostView);
@@ -1091,29 +1530,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Global modal manager. Opens modals on a stack, exposing reactive access to
+ * the current modal and the top-most opened config.
+ */
 class ModalService {
     constructor() {
+        /** Stack of open modals (top-most renders on top). */
         this.stackSignal = signal([], ...(ngDevMode ? [{ debugName: "stackSignal" }] : /* istanbul ignore next */ []));
+        /** Counter emitted on each close, used to trigger close animations. */
         this.closeRequestSignal = signal(0, ...(ngDevMode ? [{ debugName: "closeRequestSignal" }] : /* istanbul ignore next */ []));
         this.router = inject(Router);
         this.destroyRef = inject(DestroyRef);
+        /** Reactive list of open modals. */
         this.modalStack = computed(() => this.stackSignal(), ...(ngDevMode ? [{ debugName: "modalStack" }] : /* istanbul ignore next */ []));
+        /** Top-most modal on the stack, or null. */
         this.currentModal = computed(() => {
             const stack = this.stackSignal();
             return stack.length > 0 ? stack[stack.length - 1] : null;
         }, ...(ngDevMode ? [{ debugName: "currentModal" }] : /* istanbul ignore next */ []));
+        /** Reactive close-request counter. */
         this.closeRequest = computed(() => this.closeRequestSignal(), ...(ngDevMode ? [{ debugName: "closeRequest" }] : /* istanbul ignore next */ []));
+        // Close all modals on navigation and on service destruction.
         this.router.events.subscribe(() => {
             this.stackSignal.set([]);
         });
         this.destroyRef.onDestroy(() => this.stackSignal.set([]));
     }
+    /** Opens a new modal on top of the stack. */
     open(config) {
         this.stackSignal.update((stack) => [...stack, config]);
     }
+    /** Alias of `close()` used by the accept button. */
     accept() {
         this.close();
     }
+    /** Closes the top-most modal, invoking its onClose callback. */
     close() {
         const stack = this.stackSignal();
         if (stack.length > 0) {
@@ -1122,6 +1574,7 @@ class ModalService {
             this.closeRequestSignal.update((v) => v + 1);
         }
     }
+    /** Closes all open modals at once. */
     clear() {
         this.stackSignal.set([]);
     }
@@ -1133,37 +1586,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-const icons$6 = {
-    x: LucideX,
-    check: LucideCheck,
-    'maximize-2': LucideMaximize2,
-    'minimize-2': LucideMinimize2,
-    'loader-circle': LucideLoaderCircle,
-};
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Modal dialog that renders a dynamically loaded component, tracks its
+ * form validity and submit outputs, and delegates accept/cancel to the
+ * shared ModalService.
+ */
 class ModalComponent {
     constructor() {
-        this.getIcon = (name) => icons$6[name] ?? LucideX;
+        this.getIcon = (name) => getIcon(name, LucideX);
         this.notificationSrv = inject(NotificationService);
         this.destroyRef = inject(DestroyRef);
         this.modalSrv = inject(ModalService);
         this.transloco = inject(TranslocoService);
         this.cdr = inject(ChangeDetectorRef);
+        /** Reference where the dynamic content is rendered. */
         this.container = viewChild('dynamicContent', { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        /** Configuration of the modal currently open (from the service). */
         this.currentConfig = signal(null, ...(ngDevMode ? [{ debugName: "currentConfig" }] : /* istanbul ignore next */ []));
+        /** Modal title. */
         this.title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Whether the modal is visible. */
         this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Generic loading flag for the footer actions. */
         this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Whether the accept action is being processed. */
         this.isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "isProcessing" }] : /* istanbul ignore next */ []));
+        /** Whether the modal is currently expanded to fullscreen. */
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        /** True when the dynamic component reports a valid form. */
         this.isFormValid = signal(false, ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+        /** Reference to the dynamically created component. */
         this.componentRef = null;
+        /** Subscriptions to the dynamic component outputs. */
         this.subscriptions = [];
+        /** Width of the modal (fullscreen when expanded). */
         this.computedModalWidth = computed(() => {
             return this.isExpanded() ? '100vw' : (this.currentConfig()?.width ?? '560px');
         }, ...(ngDevMode ? [{ debugName: "computedModalWidth" }] : /* istanbul ignore next */ []));
+        /** Whether the footer buttons should be rendered. */
         this.modalButtonsVisible = computed(() => this.currentConfig()?.showButtons ?? true, ...(ngDevMode ? [{ debugName: "modalButtonsVisible" }] : /* istanbul ignore next */ []));
+        /** Whether the expand/fullscreen button is shown. */
         this.showExpandButton = computed(() => this.currentConfig()?.showExpandButton ?? false, ...(ngDevMode ? [{ debugName: "showExpandButton" }] : /* istanbul ignore next */ []));
+        /** Resolved cancel button label. */
         this.cancelLabel = computed(() => this.currentConfig()?.cancelLabel || 'Cancelar', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+        /** Resolved accept button label. */
         this.acceptLabel = computed(() => this.currentConfig()?.acceptLabel || 'Aceptar', ...(ngDevMode ? [{ debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
         effect(() => {
             const config = this.modalSrv.currentModal();
@@ -1187,6 +1658,7 @@ class ModalComponent {
         });
         this.destroyRef.onDestroy(() => this.cleanup());
     }
+    /** Updates visibility when the backdrop/close controls change. */
     onVisibleChange(show) {
         this.visible.set(show);
         if (!show) {
@@ -1194,6 +1666,7 @@ class ModalComponent {
         }
         this.cdr.markForCheck();
     }
+    /** Creates the dynamic component and wires its form/submit outputs. */
     loadComponent(config) {
         const containerRef = this.container();
         if (!containerRef)
@@ -1216,11 +1689,13 @@ class ModalComponent {
         this.componentRef.changeDetectorRef.markForCheck();
         this.cdr.markForCheck();
     }
+    /** Subscribes to a dynamic component output if it exists. */
     subscribeToOutput(output, callback) {
         if (output?.subscribe) {
             this.subscriptions.push(output.subscribe(callback));
         }
     }
+    /** Finalizes the submit flow, accepting the modal on success. */
     handleSubmit(success) {
         this.isProcessing.set(false);
         this.loading.set(false);
@@ -1229,12 +1704,14 @@ class ModalComponent {
             untracked(() => this.modalSrv.accept());
         }
     }
+    /** Closes the modal, calling the dynamic component's `handleCancel` if any. */
     closeModal() {
         if (this.componentRef?.instance?.handleCancel) {
             this.componentRef.instance.handleCancel();
         }
         this.doClose();
     }
+    /** Performs the actual close sequence and cleanup. */
     doClose() {
         this.visible.set(false);
         this.isProcessing.set(false);
@@ -1248,10 +1725,12 @@ class ModalComponent {
             this.modalSrv.close();
         }, 100);
     }
+    /** Toggles between normal width and fullscreen. */
     toggleExpand() {
         this.isExpanded.update((v) => !v);
         this.cdr.markForCheck();
     }
+    /** Validates the dynamic component form and triggers its `onSubmit`. */
     onAccept() {
         if (!this.componentRef || !this.isDynamicComponent(this.componentRef.instance))
             return;
@@ -1273,6 +1752,7 @@ class ModalComponent {
         this.cdr.markForCheck();
         instance.onSubmit();
     }
+    /** Resolves the dynamic component's form (property or getter function). */
     getForm(instance) {
         if (!instance['form'])
             return null;
@@ -1280,6 +1760,7 @@ class ModalComponent {
             ? instance['form']()
             : instance['form'];
     }
+    /** Recursively checks for real validation errors (ignoring 'warning'). */
     hasRealErrors(control) {
         if (control instanceof FormControl) {
             const errors = control.errors;
@@ -1294,6 +1775,7 @@ class ModalComponent {
         }
         return Object.values(control.controls).some((child) => this.hasRealErrors(child));
     }
+    /** Marks a form (and all its descendants) as touched. */
     markAllAsTouched(control) {
         control.markAsTouched();
         control.updateValueAndValidity({ onlySelf: true, emitEvent: true });
@@ -1301,9 +1783,11 @@ class ModalComponent {
             Object.values(control.controls).forEach((child) => this.markAllAsTouched(child));
         }
     }
+    /** True when the component exposes both `onSubmit` and a `form`. */
     isDynamicComponent(instance) {
         return typeof instance?.onSubmit === 'function' && instance?.form !== undefined;
     }
+    /** Unsubscribes outputs and destroys the dynamic component. */
     cleanup() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions = [];
@@ -1320,56 +1804,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             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$5 = {
-    'chevron-down': LucideChevronDown,
-    'chevron-left': LucideChevronLeft,
-    'chevron-right': LucideChevronRight,
-};
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Custom select that works as a ControlValueAccessor: single/multiple
+ * selection, searchable, keyboard navigation, pagination, custom entries and
+ * reactive-form integration.
+ */
 class SelectComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this.getIcon = (name) => icons$5[name] ?? LucideChevronDown;
+        /** Resolves icon names to lucide components, falling back to a chevron. */
+        this.getIcon = (name) => getIcon(name, LucideChevronDown);
+        /** Available options. */
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Enables multi-select mode. */
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** Restricts multi-selection to the given value combinations. */
         this.validCombinations = input(undefined, ...(ngDevMode ? [{ debugName: "validCombinations" }] : /* istanbul ignore next */ []));
+        /** Placeholder shown when there is no selection. */
         this.placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Label used to bind the control inside a `formGroup`. */
         this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Shows a loading state while options are being fetched. */
         this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        /** Marks that all options have been loaded (used with pagination + search). */
         this.isAllDataLoaded = input(false, ...(ngDevMode ? [{ debugName: "isAllDataLoaded" }] : /* istanbul ignore next */ []));
+        /** Allows creating new entries from the typed search term. */
         this.allowCustomEntries = input(false, ...(ngDevMode ? [{ debugName: "allowCustomEntries" }] : /* istanbul ignore next */ []));
+        /** Parent form group to resolve the control from `label`. */
         this.formGroup = input(undefined, ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Enables the search input inside the dropdown. */
         this.isSearchable = input(false, ...(ngDevMode ? [{ debugName: "isSearchable" }] : /* istanbul ignore next */ []));
+        /** Number of options loaded per page when pagination is enabled. */
         this.itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+        /** FormControl bound externally (used instead of `formGroup`/`label`). */
         this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Paginates the option list instead of rendering it all at once. */
         this.usePagination = input(false, ...(ngDevMode ? [{ debugName: "usePagination" }] : /* istanbul ignore next */ []));
+        /** Disables the whole select. */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Custom per-validation-error messages shown under the select. */
         this.errorMessages = input({
             required: 'Este campo es requerido',
         }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+        /** Keeps the search term when options reload. */
         this.preserveSearchOnLoad = input(false, ...(ngDevMode ? [{ debugName: "preserveSearchOnLoad" }] : /* istanbul ignore next */ []));
+        /** Translation key of the "no records" empty message. */
         this.emptyMessageKey = input('common.no_records', ...(ngDevMode ? [{ debugName: "emptyMessageKey" }] : /* istanbul ignore next */ []));
+        /** Opens the dropdown above the trigger instead of below. */
         this.dropdownUpward = input(false, ...(ngDevMode ? [{ debugName: "dropdownUpward" }] : /* istanbul ignore next */ []));
+        /** Shows the "no selection" option in single-select mode. */
         this.showEmptyOption = input(true, ...(ngDevMode ? [{ debugName: "showEmptyOption" }] : /* istanbul ignore next */ []));
+        /** Emits when the selection changes (new value or array in multiple mode). */
         this.selectionChange = output();
+        /** Emits the debounced search term while typing. */
         this.search = output();
+        /** Reference to the filter input inside the dropdown (when searchable). */
         this.filterInput = viewChild('filterInput', ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+        /** Reference to the select container element. */
         this.selectContainer = viewChild('selectContainer', ...(ngDevMode ? [{ debugName: "selectContainer" }] : /* istanbul ignore next */ []));
+        /** Reference to the trigger button. */
         this.selectTrigger = viewChild('selectTrigger', ...(ngDevMode ? [{ debugName: "selectTrigger" }] : /* istanbul ignore next */ []));
+        /** Reference to the dropdown list container. */
         this.dropdownContainer = viewChild('dropdownContainer', ...(ngDevMode ? [{ debugName: "dropdownContainer" }] : /* istanbul ignore next */ []));
+        /** Underlying selection value (mirrors the reactive control). */
         this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        /** Whether the dropdown is open. */
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Index of the currently focused option for keyboard navigation. */
         this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+        /** Current search term (searchable mode). */
         this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        /** Current page of the paginated dropdown. */
         this.currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        /** Tracks whether the user typed in the search input. */
         this.searchTermChanged = signal(false, ...(ngDevMode ? [{ debugName: "searchTermChanged" }] : /* istanbul ignore next */ []));
+        /** Internal disabled state from the reactive form (setDisabledState). */
         this._isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+        /** Debounce timer handle for the search output. */
         this.debounceTimer = null;
+        /** Error-state counter used to recompute error helpers reactively. */
         this.errorTracker = signal(0, ...(ngDevMode ? [{ debugName: "errorTracker" }] : /* istanbul ignore next */ []));
+        /** Whether an error has been shown at some point (for "fixed" messaging). */
         this.hadError = signal(false, ...(ngDevMode ? [{ debugName: "hadError" }] : /* istanbul ignore next */ []));
+        /** Whether control status/value subscriptions have been attached. */
         this.subscribed = signal(false, ...(ngDevMode ? [{ debugName: "subscribed" }] : /* istanbul ignore next */ []));
         this.valueSubscribed = signal(false, ...(ngDevMode ? [{ debugName: "valueSubscribed" }] : /* istanbul ignore next */ []));
+        /** Current selection value. */
         this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** True when the select is disabled via input or by the reactive form. */
         this.isDisabled = computed(() => this.disabled() || this._isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Resolves the form control from `control` or from `formGroup`+`label`. */
         this.actualControl = computed(() => {
             const ctrl = this.control();
             if (ctrl)
@@ -1381,16 +1910,19 @@ class SelectComponent {
             }
             return undefined;
         }, ...(ngDevMode ? [{ debugName: "actualControl" }] : /* istanbul ignore next */ []));
+        /** Whether the bound control should display its error (invalid + touched/dirty). */
         this.shouldShowError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return ctrl?.invalid && (ctrl?.dirty || ctrl?.touched);
         }, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+        /** Whether an error was shown before and the control is now valid + touched. */
         this.wasFixedError = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
             return this.hadError() && ctrl?.valid && ctrl?.touched;
         }, ...(ngDevMode ? [{ debugName: "wasFixedError" }] : /* istanbul ignore next */ []));
+        /** Text shown in the trigger: the selected label(s) or the placeholder. */
         this.displayValue = computed(() => {
             const val = this._value();
             const opts = this.options();
@@ -1412,6 +1944,7 @@ class SelectComponent {
             const selectedOption = opts.find((opt) => opt.value === val);
             return selectedOption ? selectedOption.label : val;
         }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        /** List of validation error messages for the bound control. */
         this.getErrorMessages = computed(() => {
             this.errorTracker();
             const ctrl = this.actualControl();
@@ -1442,6 +1975,7 @@ class SelectComponent {
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "getErrorMessages" }] : /* istanbul ignore next */ []));
+        /** Options filtered by the search term (matches first, then contains). */
         this.filteredOptions = computed(() => {
             const opts = this.options();
             const term = this.searchTerm();
@@ -1461,6 +1995,7 @@ class SelectComponent {
                 return 0;
             });
         }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        /** Options for the current page, with a synthetic custom entry when allowed. */
         this.paginatedOptions = computed(() => {
             let filtered = this.filteredOptions();
             const term = this.searchTerm();
@@ -1484,6 +2019,7 @@ class SelectComponent {
             const endIndex = startIndex + perPage;
             return filtered.slice(startIndex, endIndex);
         }, ...(ngDevMode ? [{ debugName: "paginatedOptions" }] : /* istanbul ignore next */ []));
+        /** Non-custom options, including the empty option in single-select mode. */
         this.regularOptions = computed(() => {
             const opts = this.paginatedOptions().filter((option) => !option.custom);
             if (!this.multiple() && this.showEmptyOption()) {
@@ -1491,6 +2027,7 @@ class SelectComponent {
             }
             return opts;
         }, ...(ngDevMode ? [{ debugName: "regularOptions" }] : /* istanbul ignore next */ []));
+        /** Total pages of the filtered option list (1 when pagination is off). */
         this.totalPages = computed(() => {
             if (!this.usePagination()) {
                 return 1;
@@ -1499,6 +2036,7 @@ class SelectComponent {
             const perPage = this.itemsPerPage();
             return Math.ceil(filtered.length / perPage);
         }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+        /** Whether there is at least one selected value. */
         this.hasSelectedValues = computed(() => {
             const val = this._value();
             if (this.multiple()) {
@@ -1506,6 +2044,7 @@ class SelectComponent {
             }
             return !!val;
         }, ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : /* istanbul ignore next */ []));
+        /** Whether the custom optional entry should be offered for the current term. */
         this.showCustomOption = computed(() => {
             const term = this.searchTerm();
             const opts = this.options();
@@ -1514,9 +2053,12 @@ class SelectComponent {
                 !opts.some((o) => o.value === term));
         }, ...(ngDevMode ? [{ debugName: "showCustomOption" }] : /* istanbul ignore next */ []));
         this.transloco = inject(TranslocoService);
+        /** ControlValueAccessor onChange callback. */
         this.onChange = (_) => { };
+        /** ControlValueAccessor onTouched callback. */
         this.onTouched = () => { };
         this.destroyRef = inject(DestroyRef);
+        // Debounced search emission whenever the term changes (searchable mode).
         effect(() => {
             const term = this.searchTerm();
             if (term !== '' && this.isSearchable()) {
@@ -1528,12 +2070,15 @@ class SelectComponent {
                 }, 300);
             }
         });
+        // Normalizes the value to arrays in multiple mode when empty.
         effect(() => {
             const isMultiple = this.multiple();
             if (this._value() === null || this._value() === undefined) {
                 this._value.set(isMultiple ? [] : null);
             }
         });
+        // Resets to the first page when options reload, clearing the search
+        // term unless it must be preserved.
         effect(() => {
             this.options();
             this.currentPage.set(1);
@@ -1541,6 +2086,7 @@ class SelectComponent {
                 this.searchTerm.set('');
             }
         });
+        // Subscribes to the bound control status/value changes to track errors.
         effect(() => {
             const ctrl = this.actualControl();
             if (!ctrl) {
@@ -1567,11 +2113,13 @@ class SelectComponent {
             });
             this.subscribed.set(true);
         });
+        // Forces error recomputation when the active translation changes.
         this.transloco.langChanges$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.errorTracker.update((v) => v + 1);
         });
+        // One-way sync from the reactive control to the internal value signal.
         effect(() => {
             const ctrl = this.actualControl();
             if (!ctrl)
@@ -1585,9 +2133,11 @@ class SelectComponent {
             }
         });
     }
+    /** Sets the disabled state coming from the reactive form infrastructure. */
     setDisabledState(isDisabled) {
         this._isDisabled.set(isDisabled);
     }
+    /** Marks the control as touched and updates validity and error state. */
     markAsTouchedAndUpdate() {
         const ctrl = this.actualControl();
         if (ctrl) {
@@ -1600,12 +2150,14 @@ class SelectComponent {
             this.hadError.set(true);
         }
     }
+    /** Strips accents and lowercases text for accent-insensitive matching. */
     normalizeText(text) {
         return text
             .normalize('NFD')
             .replace(/[\u0300-\u036f]/g, '')
             .toLowerCase();
     }
+    /** Keyboard handler for the trigger element (open/close/navigate/select). */
     onKeydown(event) {
         if (this.isDisabled())
             return;
@@ -1658,6 +2210,7 @@ class SelectComponent {
                 break;
         }
     }
+    /** Keyboard handler for the search input inside a searchable dropdown. */
     handleKeyDown(event) {
         switch (event.key) {
             case 'Enter':
@@ -1697,6 +2250,7 @@ class SelectComponent {
                 break;
         }
     }
+    /** Moves the focused option index by `direction`, skipping disabled ones. */
     moveFocus(direction) {
         const options = this.regularOptions();
         if (!options.length)
@@ -1727,6 +2281,7 @@ class SelectComponent {
             }
         });
     }
+    /** Index of the currently selected option, or -1. */
     getSelectedIndex() {
         const currentVal = this._value();
         const options = this.regularOptions();
@@ -1735,6 +2290,7 @@ class SelectComponent {
         const index = options.findIndex((opt) => opt.value === currentVal);
         return index >= 0 ? index : -1;
     }
+    /** Whether an option is disabled based on the valid combinations rule. */
     isOptionDisabled(option) {
         if (option.value === null)
             return false;
@@ -1756,6 +2312,7 @@ class SelectComponent {
             return allSelected && withinLimit;
         });
     }
+    /** Whether an option is currently selected. */
     isSelected(option) {
         const val = this._value();
         if (this.multiple()) {
@@ -1763,6 +2320,7 @@ class SelectComponent {
         }
         return val === option.value;
     }
+    /** Goes to the next options page when possible. */
     nextPage() {
         const total = this.totalPages();
         const current = this.currentPage();
@@ -1770,12 +2328,14 @@ class SelectComponent {
             this.currentPage.set(current + 1);
         }
     }
+    /** Goes to the previous options page when possible. */
     previousPage() {
         const current = this.currentPage();
         if (current > 1) {
             this.currentPage.set(current - 1);
         }
     }
+    /** Closes the dropdown when a click happens outside the component. */
     onClickOutside(event) {
         const clickedInside = this.elementRef.nativeElement.contains(event.target);
         if (!clickedInside && this.isOpen()) {
@@ -1785,6 +2345,7 @@ class SelectComponent {
             this.focusedIndex.set(-1);
         }
     }
+    /** Selects a typed free-text value as a new custom entry. */
     onCustomOptionClick() {
         const term = this.searchTerm();
         const customOption = {
@@ -1802,6 +2363,7 @@ class SelectComponent {
         }
         this.markAsTouchedAndUpdate();
     }
+    /** Handles typing in the search input (updates term and emits search). */
     onInputChange(event) {
         const previousSearch = this.searchTerm();
         const target = event.target;
@@ -1817,6 +2379,7 @@ class SelectComponent {
         }
         this.currentPage.set(1);
     }
+    /** Selects or toggles the clicked option (custom entries included). */
     onOptionClick(option) {
         if (this.isDisabled())
             return;
@@ -1844,6 +2407,7 @@ class SelectComponent {
             this.selectOption(option);
         }
     }
+    /** Selects a single option and updates the control/outputs. */
     selectOption(option) {
         if (this.multiple()) {
             this.toggleOption(option);
@@ -1862,6 +2426,7 @@ class SelectComponent {
         this.focusedIndex.set(-1);
         this.selectTrigger()?.nativeElement.focus();
     }
+    /** Toggles an option in multiple mode, honoring the valid combinations. */
     toggleOption(option) {
         if (this.isOptionDisabled(option))
             return;
@@ -1885,6 +2450,7 @@ class SelectComponent {
         this.selectionChange.emit(newValue);
         this.markAsTouchedAndUpdate();
     }
+    /** Opens/closes the dropdown and manages focus/selection state. */
     toggleDropdown() {
         if (this.isDisabled())
             return;
@@ -1906,9 +2472,11 @@ class SelectComponent {
         }
         this.onTouched();
     }
+    /** trackBy for rendered options so Angular reuses DOM nodes by value. */
     trackByFn(index, option) {
         return option.value;
     }
+    /** Writes an external value into the internal signal (ControlValueAccessor). */
     writeValue(value) {
         if (value === null ||
             value === undefined ||
@@ -1920,9 +2488,11 @@ class SelectComponent {
             this._value.set(value);
         }
     }
+    /** Stores the onChange callback (ControlValueAccessor). */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /** Stores the onTouched callback (ControlValueAccessor). */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -1955,31 +2525,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 args: ['document:mousedown', ['$event']]
             }] } });
 
-const icons$4 = {
-    upload: LucideUpload,
-    file: LucideFile,
-    x: LucideX,
-};
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Drag & drop file uploader with file type/size validation, image previews,
+ * multiple files support and localized error messages.
+ */
 class FileUploadComponent {
     constructor() {
-        this.getIcon = (name) => icons$4[name] ?? LucideUpload;
+        this.getIcon = (name) => getIcon(name, LucideUpload);
         this.transloco = inject(TranslocoService);
+        /** Main label of the uploader. */
         this.label = input('Cargar archivo', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Accepted MIME types/extensions (e.g. 'image/*', '.pdf'). */
         this.accept = input('image/*', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        /** Maximum allowed size per file (bytes). */
         this.maxFileSize = input(2 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+        /** Maximum number of files (0 = unlimited). */
         this.maxFiles = input(0, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+        /** Text of the file picker button. */
         this.fileUploadText = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "fileUploadText" }] : /* istanbul ignore next */ []));
+        /** Helper text shown next to the label. */
         this.fileRecommendation = input('', ...(ngDevMode ? [{ debugName: "fileRecommendation" }] : /* istanbul ignore next */ []));
+        /** Text shown when files are already loaded. */
         this.changeFilesText = input('Cambiar archivos', ...(ngDevMode ? [{ debugName: "changeFilesText" }] : /* istanbul ignore next */ []));
+        /** Enables selecting more than one file at once. */
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** Emitted with the currently selected files. */
         this.fileSelected = output();
+        /** Emitted when the last selected file is removed. */
         this.fileRemoved = output();
+        /** Emitted when a file fails validation (type/size). */
         this.fileError = output();
+        /** Emitted when a file is near the size limit. */
         this.fileWarning = output();
+        /** Currently selected files. */
         this.selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
+        /** Localized error message displayed to the user. */
         this.errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /** Whether the user is dragging files over the zone. */
         this.isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+        /** Object URLs used for image previews. */
         this.previewUrls = new Map();
+        /** Whether another selection is allowed. */
         this.canAddMore = computed(() => {
             if (!this.multiple())
                 return this.selectedFiles().length === 0;
@@ -1988,6 +2579,7 @@ class FileUploadComponent {
                 return true;
             return this.selectedFiles().length < max;
         }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : /* istanbul ignore next */ []));
+        /** True when the maximum number of files has been reached. */
         this.maxReached = computed(() => {
             const max = this.maxFiles();
             if (max <= 0)
@@ -1995,25 +2587,30 @@ class FileUploadComponent {
             return this.selectedFiles().length >= max;
         }, ...(ngDevMode ? [{ debugName: "maxReached" }] : /* istanbul ignore next */ []));
     }
+    /** Whether the file is an image (used for previews). */
     isImageFile(file) {
         return file.type.startsWith('image/');
     }
+    /** Returns (creating on demand) the object URL for a file preview. */
     previewUrl(file) {
         if (!this.previewUrls.has(file)) {
             this.previewUrls.set(file, URL.createObjectURL(file));
         }
         return this.previewUrls.get(file) ?? '';
     }
+    /** Marks the drop zone as active while dragging over it. */
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
         this.isDragOver.set(true);
     }
+    /** Clears the drag-over state when the drag leaves the zone. */
     onDragLeave(event) {
         event.preventDefault();
         event.stopPropagation();
         this.isDragOver.set(false);
     }
+    /** Processes the files dropped on the zone. */
     onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -2023,6 +2620,7 @@ class FileUploadComponent {
             this.processFiles(Array.from(files));
         }
     }
+    /** Processes the files picked from the native file input. */
     onFileChange(event) {
         const input = event.target;
         const files = input.files;
@@ -2031,6 +2629,7 @@ class FileUploadComponent {
         }
         input.value = '';
     }
+    /** Validates and appends the received files, emitting errors/warnings. */
     processFiles(files) {
         this.errorMessage.set('');
         const validFiles = [];
@@ -2066,6 +2665,7 @@ class FileUploadComponent {
         }
         this.fileSelected.emit(this.selectedFiles());
     }
+    /** Validates a file against `accept` and `maxFileSize`. */
     validateFile(file) {
         const acceptStr = this.accept();
         if (acceptStr && acceptStr !== '*') {
@@ -2101,6 +2701,7 @@ class FileUploadComponent {
         }
         return null;
     }
+    /** Emits a warning when the file is close to the size limit (>90%). */
     checkSizeWarning(file) {
         if (this.maxFileSize() > 0 && file.size > this.maxFileSize() * 0.9) {
             return {
@@ -2111,6 +2712,7 @@ class FileUploadComponent {
         }
         return null;
     }
+    /** Removes a file, revoking its preview URL. */
     removeFile(file) {
         const url = this.previewUrls.get(file);
         if (url) {
@@ -2123,17 +2725,20 @@ class FileUploadComponent {
             this.fileRemoved.emit();
         }
     }
+    /** Clears all selected files and previews. */
     changeFiles() {
         this.clearPreviews();
         this.selectedFiles.set([]);
         this.errorMessage.set('');
     }
+    /** Revokes every stored preview object URL. */
     clearPreviews() {
         for (const [file, url] of this.previewUrls) {
             URL.revokeObjectURL(url);
         }
         this.previewUrls.clear();
     }
+    /** Human readable size (B/KB/MB). */
     formatFileSize(bytes) {
         if (bytes < 1024)
             return bytes + ' B';
@@ -2149,75 +2754,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-file-upload', standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2\">\n  @if (label()) {\n    <label class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-300)]\">\n      {{ label() }}\n    </label>\n  }\n\n  @if (canAddMore()) {\n    <div\n      class=\"relative border-2 border-dashed _shk-border dark:[border-color:var(--shk-surface-700)] rounded-lg p-4 transition-colors hover:[border-color:var(--shk-primary-400)] dark:hover:[border-color:var(--shk-primary-500)]\"\n      [class.border-red-400]=\"errorMessage()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n    >\n      <input\n        #fileInput\n        type=\"file\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"onFileChange($event)\"\n        class=\"hidden\"\n      />\n\n      <div\n        class=\"flex flex-col items-center gap-2 cursor-pointer\"\n        (click)=\"fileInput.click()\"\n        [class.drag-over]=\"isDragOver()\"\n      >\n        <svg [lucideIcon]=\"getIcon('upload')\" class=\"w-8 h-8 _shk-icon-subtle dark:[color:var(--shk-surface-600)]\"></svg>\n        <span class=\"text-sm _shk-text-surface-700 dark:[color:var(--shk-surface-300)]\">\n          {{ fileUploadText() }}\n        </span>\n        @if (fileRecommendation()) {\n          <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            {{ fileRecommendation() }}\n          </span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (maxReached()) {\n    <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] text-center py-2\">\n      M\u00E1ximo {{ maxFiles() }} archivos alcanzado\n    </div>\n  }\n\n  @if (selectedFiles().length > 0) {\n    <div class=\"flex flex-wrap gap-3\">\n      @for (file of selectedFiles(); track file.name + file.size + file.lastModified) {\n        <div class=\"relative group\">\n          @if (isImageFile(file)) {\n            <img\n              [src]=\"previewUrl(file)\"\n              [alt]=\"file.name\"\n              class=\"w-20 h-20 object-cover rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)]\"\n            />\n          } @else {\n            <div class=\"w-20 h-20 rounded-lg _shk-border dark:[border-color:var(--shk-surface-700)] flex flex-col items-center justify-center _shk-bg-surface-50 dark:[background-color:var(--shk-surface-800)] gap-1\">\n              <svg [lucideIcon]=\"getIcon('file')\" class=\"w-6 h-6 _shk-text-surface-400\"></svg>\n              <span class=\"text-[10px] _shk-text-surface-400 truncate max-w-[70px] px-1 text-center\">{{ file.name }}</span>\n            </div>\n          }\n          <button\n            type=\"button\"\n            (click)=\"removeFile(file)\"\n            class=\"absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition shadow\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3 h-3\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n    @if (!multiple()) {\n      <button\n        type=\"button\"\n        (click)=\"changeFiles()\"\n        class=\"text-xs _shk-text-primary hover:[color:var(--shk-primary-700)] dark:[color:var(--shk-primary-400)] dark:hover:[color:var(--shk-primary-300)] underline cursor-pointer bg-transparent border-0\"\n      >\n        {{ changeFilesText() }}\n      </button>\n    }\n  }\n\n  @if (errorMessage()) {\n    <p class=\"text-xs _shk-text-red-500\">{{ errorMessage() }}</p>\n  }\n</div>" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], fileUploadText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUploadText", required: false }] }], fileRecommendation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileRecommendation", required: false }] }], changeFilesText: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeFilesText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], fileWarning: [{ type: i0.Output, args: ["fileWarning"] }] } });
 
-const ICONS$2 = {
-    plus: LucidePlus,
-    'circle-plus': LucidePlus,
-    pencil: LucidePencil,
-    edit: LucidePencil,
-    'trash-2': LucideTrash2,
-    delete: LucideTrash2,
-    save: LucideSave,
-    x: LucideX,
-    close: LucideX,
-    check: LucideCheck,
-    search: LucideSearch,
-    user: LucideUser,
-    users: LucideUsers,
-    star: LucideStar,
-    calendar: LucideCalendar,
-    'calendar-check': LucideCalendarCheck,
-    clock: LucideClock,
-    settings: LucideSettings,
-    'alert-triangle': LucideAlertTriangle,
-    warning: LucideAlertTriangle,
-    'alert-circle': LucideAlertCircle,
-    info: LucideInfo,
-    download: LucideDownload,
-    upload: LucideUpload,
-    refresh: LucideRefreshCw,
-    rocket: LucideRocket,
-    copy: LucideCopy,
-    sparkles: LucideSparkles,
-    'chevron-down': LucideChevronDown,
-    'chevron-up': LucideChevronUp,
-    'chevron-left': LucideChevronLeft,
-    'chevron-right': LucideChevronRight,
-    eye: LucideEye,
-    'eye-off': LucideEyeOff,
-    lock: LucideLock,
-    mail: LucideMail,
-    phone: LucidePhone,
-    'map-pin': LucideMapPin,
-    home: LucideHome,
-    'file-text': LucideFileText,
-    'folder-open': LucideFolderOpen,
-    'shopping-cart': LucideShoppingCart,
-    package: LucidePackage,
-    truck: LucideTruck,
-    tag: LucideTag,
-    'credit-card': LucideCreditCard,
-    'dollar-sign': LucideDollarSign,
-    percent: LucidePercent,
-    wallet: LucideWallet,
-    globe: LucideGlobe,
-    'circle-check': LucideCircleCheck,
-    'circle-x': LucideCircleX,
-    menu: LucideMenu,
-    'more-horizontal': LucideMoreHorizontal,
-    calculator: LucideCalculator,
-    filter: LucideFilter,
-    'arrow-right': LucideArrowRight,
-    'arrow-left': LucideArrowLeft,
-    'arrow-up': LucideArrowUp,
-    'arrow-down': LucideArrowDown,
-};
-/** Resolves a lucide icon name to its component. Falls back to a help circle. */
-function getIcon$6(name) {
-    if (!name)
-        return null;
-    return ICONS$2[name] ?? LucideCircleHelp;
-}
-
 const SEVERITY_CLASS = {
     secondary: '_shk-tag-secondary',
     success: '_shk-tag-success',
@@ -2235,13 +2771,13 @@ class TagComponent {
         this.severity = input('secondary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
         /** Renders the tag with fully rounded corners (pill). */
         this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
-        /** Optional leading lucide icon name. */
+        /** Optional leading lucide icon name or component. */
         this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /** Inline styles applied to the tag. */
         this.style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
         /** Extra CSS classes. */
         this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
-        this.getIcon = getIcon$6;
+        this.getIcon = getIcon;
         this.tagClass = computed(() => {
             const base = 'inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium';
             const severity = SEVERITY_CLASS[this.severity()] ?? SEVERITY_CLASS.secondary;
@@ -2279,22 +2815,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 
 const TOOLTIP_Z_INDEX = '2147483647';
 /**
- * Tooltip que se renderiza en `document.body` con `position: fixed`, de modo
- * que siempre flota por encima de cualquier contenedor (tablas con
- * `overflow: hidden`, modales, scroll wrappers, etc.) y nunca queda
- * recortado ni pasa por debajo de su elemento ancla.
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Tooltip rendered in `document.body` with `position: fixed`, so it always
+ * floats above any container (tables with `overflow: hidden`, modals, scroll
+ * wrappers, etc.) and never gets clipped or hidden behind its anchor element.
  */
 class TooltipComponent {
     constructor() {
+        /** Content of the tooltip. */
         this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Preferred placement relative to the trigger. */
         this.position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** 'hover' shows on mouse enter; 'fixed' stays pinned to the content. */
         this.mode = input('hover', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Distance (px) between the tooltip and the trigger. */
         this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
         this.host = inject((ElementRef));
         this.document = inject(DOCUMENT);
+        /** The dynamically created tooltip element. */
         this.tooltipEl = null;
+        /** Unsubscribe callbacks for the scroll/resize listeners. */
         this.cleanup = null;
     }
+    /** Shows the tooltip over the host trigger on mouseenter. */
     onMouseEnter() {
         if (!this.text())
             return;
@@ -2303,9 +2850,11 @@ class TooltipComponent {
             return;
         this.show(trigger);
     }
+    /** Hides the tooltip on mouseleave. */
     onMouseLeave() {
         this.hide();
     }
+    /** Creates and positions the tooltip element on `document.body`. */
     show(trigger) {
         this.removeTooltip();
         const el = this.document.createElement('span');
@@ -2351,6 +2900,7 @@ class TooltipComponent {
             window.removeEventListener('resize', onScrollOrResize);
         };
     }
+    /** Computes the tooltip position, clamped to the viewport. */
     computePosition(rect, width, height) {
         const off = this.offset();
         const viewportW = this.document.defaultView?.innerWidth ?? 0;
@@ -2374,6 +2924,7 @@ class TooltipComponent {
         const top = Math.max(margin, Math.min(y, Math.max(margin, viewportH - height - margin)));
         return { left, top };
     }
+    /** Fades the tooltip out and removes it from the DOM. */
     hide() {
         if (!this.tooltipEl)
             return;
@@ -2384,12 +2935,14 @@ class TooltipComponent {
             el.remove();
         }, 150);
     }
+    /** Removes the tooltip and its listeners. */
     removeTooltip() {
         this.cleanup?.();
         this.cleanup = null;
         this.tooltipEl?.remove();
         this.tooltipEl = null;
     }
+    /** Cleans up the tooltip on component destroy. */
     ngOnDestroy() {
         this.removeTooltip();
     }
@@ -2419,87 +2972,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 args: ['mouseleave']
             }] } });
 
-const icons$3 = {
-    'chevrons-left': LucideChevronsLeft,
-    'chevrons-right': LucideChevronsRight,
-    'chevron-left': LucideChevronLeft,
-    'chevron-right': LucideChevronRight,
-    'arrow-up': LucideArrowUp,
-    'arrow-down': LucideArrowDown,
-    'arrow-up-down': LucideArrowUpDown,
-    search: LucideSearch,
-    x: LucideX,
-    loader: LucideLoader,
-    inbox: LucideInbox,
-    filter: LucideFunnel,
-    funnel: LucideFunnel,
-    pencil: LucidePencil,
-    edit: LucidePencil,
-    'trash-2': LucideTrash2,
-    delete: LucideTrash2,
-    eye: LucideEye,
-    view: LucideEye,
-    key: LucideKey,
-    'change-password': LucideKey,
-    'user-pen': LucideUserPen,
-    'edit-user': LucideUserPen,
-    'toggle-right': LucideToggleRight,
-    activate: LucideToggleRight,
-    'toggle-left': LucideToggleLeft,
-    deactivate: LucideToggleLeft,
-    download: LucideDownload,
-    export: LucideDownload,
-    upload: LucideUpload,
-    import: LucideUpload,
-    plus: LucidePlus,
-    add: LucidePlus,
-    'circle-plus': LucideCirclePlus,
-    'eye-off': LucideEyeOff,
-    'refresh-cw': LucideRefreshCw,
-    'file-spreadsheet': LucideFileSpreadsheet,
-    presentation: LucidePresentation,
-    file: LucideFile,
-    'file-text': LucideFileText,
-    archive: LucideArchive,
-    'circle-check': LucideCircleCheck,
-    'circle-x': LucideCircleX,
-    check: LucideCheck,
-    copy: LucideCopy,
-    'share-2': LucideShare2,
-    play: LucidePlay,
-    video: LucideVideo,
-    star: LucideStar,
-    clock: LucideClock,
-    settings: LucideSettings,
-    'log-out': LucideLogOut,
-    logout: LucideLogOut,
-    user: LucideUser,
-    'user-check': LucideUserCheck,
-    'user-round-x': LucideUserRoundX,
-    'user-plus': LucideUserPlus,
-    building: LucideBuilding,
-    landmark: LucideLandmark,
-    package: LucidePackage,
-    box: LucideBox,
-    tags: LucideTags,
-    tag: LucideTag,
-    truck: LucideTruck,
-    users: LucideUsers,
-    receipt: LucideReceipt,
-    bot: LucideBot,
-    'line-chart': LucideLineChart,
-    'dollar-sign': LucideDollarSign,
-    percent: LucidePercent,
-    calculator: LucideCalculator,
-    'shield-check': LucideShieldCheck,
-    'user-cog': LucideUserCog,
-    warehouse: LucideWarehouse,
-    list: LucideList,
-};
-function getIcon$5(name) {
-    return icons$3[name] ?? LucidePlus;
-}
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Data table with sorting, column filters, global search, pagination,
+ * row/header actions, tag cells and optional server-side mode.
+ */
 class TableComponent {
+    /** Returns the effective CSS width for a column ('actions' included). */
     getColumnWidth(col) {
         return col.width || this.DEFAULT_COLUMN_WIDTH;
     }
@@ -2508,69 +2991,109 @@ class TableComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.transloco = inject(TranslocoService);
         this.destroyRef = inject(DestroyRef);
-        this.getIcon = getIcon$5;
+        /** Maps icon names to lucide components, falling back to a plus icon. */
+        this.getIcon = (name) => getIcon(name, LucidePlus);
         /**
-         * FIX responsive: ancho mínimo que toma cada columna (excepto 'actions',
-         * que ya tiene su propio ancho calculado) SOLO en pantallas angostas
-         * (ver el media query en `styles`). En pantallas anchas esta variable no
-         * se usa: las columnas se estiran normalmente al 100% del contenedor,
-         * igual que antes. Ajustable por columna vía `col.width` si alguna
-         * necesita más o menos espacio en mobile.
+         * Minimum width applied to each column (except `actions`, which keeps its
+         * own computed width) only on narrow screens. On wide screens columns
+         * stretch normally to fill the container width. Can be overridden per
+         * column via `col.width`.
          */
         this.DEFAULT_COLUMN_WIDTH = '140px';
+        /** Signal with the translated "Actions" header label. */
         this.actionsHeaderLabel = toSignal(this.transloco.selectTranslate('common.actions'), {
             initialValue: 'Acciones',
         });
-        // FIX #14: idioma como señal para que los textos traducidos de forma
-        // imperativa (transloco.translate) se recalculen al cambiar de idioma.
+        /** Signal reacting to language changes so imperative translations are recomputed. */
         this.currentLang = toSignal(this.transloco.langChanges$, {
             initialValue: this.transloco.getActiveLang(),
         });
+        /** Reactive signal of loaded translations so pageReport is not stuck with raw keys. */
+        this.translations = toSignal(this.transloco.selectTranslation());
+        /** Full dataset. In server-side mode only the current page rows. */
         this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Column definitions (field, header, filterable, tag cell options, etc.). */
         this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Number of rows displayed per page. */
         this.rowsPerPage = input(10, ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+        /** Options shown in the rows-per-page selector. */
         this.rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
+        /** Whether the table is in loading state (shows the overlay/skeleton). */
         this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Whether to render the row actions column. */
         this.showActionRow = input(true, ...(ngDevMode ? [{ debugName: "showActionRow" }] : /* istanbul ignore next */ []));
+        /** Custom cell/header templates keyed by column field. */
         this.customTemplates = input({}, ...(ngDevMode ? [{ debugName: "customTemplates" }] : /* istanbul ignore next */ []));
+        /** Actions rendered in the table header. */
         this.headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
+        /** Actions rendered per row (icon, label, class, visibility/disabled). */
         this.rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+        /** Whether the table container renders a drop shadow. */
         this.hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+        /** Field used as the default initial sort. */
         this.defaultSortField = input('', ...(ngDevMode ? [{ debugName: "defaultSortField" }] : /* istanbul ignore next */ []));
+        /** Order used by the default initial sort (1 asc, -1 desc). */
         this.defaultSortOrder = input(1, ...(ngDevMode ? [{ debugName: "defaultSortOrder" }] : /* istanbul ignore next */ []));
+        /** Whether the global search input is shown. */
         this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+        /** Placeholder for the global search input. */
         this.searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /** Message shown when there are no rows. */
         this.emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Enables server-side pagination/filtering/sorting mode. */
         this.serverSide = input(false, ...(ngDevMode ? [{ debugName: "serverSide" }] : /* istanbul ignore next */ []));
+        /** Total number of records in server-side mode (for pagination math). */
         this.totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+        /** Optional prebuilt filter chips (label + value) shown above the table. */
         this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        /** Currently active filter chip value. */
         this.activeFilter = input('', ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []));
+        /** Emits when the user clicks the refresh button. */
         this.refresh = output();
+        /** Emits page changes (server-side mode) with first/rows/page info. */
         this.pageChange = output();
+        /** Emits the active column filters. */
         this.filterChange = output();
+        /** Emits the debounced global search term. */
         this.searchChange = output();
+        /** Emits when a filter chip is clicked. */
         this.filterClick = output();
+        /** Internal copy of the input data used as the base for search/filter. */
         this.originalData = signal([], ...(ngDevMode ? [{ debugName: "originalData" }] : /* istanbul ignore next */ []));
+        /** Rows after the global search is applied. */
         this.searchedData = signal([], ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
+        /** Rows after column filters are applied. */
         this.filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+        /** Rows belonging to the current page (after slicing). */
         this.displayedData = signal([], ...(ngDevMode ? [{ debugName: "displayedData" }] : /* istanbul ignore next */ []));
+        /** Local total records after filtering (client mode). */
         this.localTotalRecords = signal(0, ...(ngDevMode ? [{ debugName: "localTotalRecords" }] : /* istanbul ignore next */ []));
+        /** Index of the first row of the current page. */
         this.first = signal(0, ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+        /** Visibility map for each column filter input. */
         this.showFilterInput = signal({}, ...(ngDevMode ? [{ debugName: "showFilterInput" }] : /* istanbul ignore next */ []));
+        /** Current global search term. */
         this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        /** Currently sorted field. */
         this.sortField = signal('', ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+        /** Current sort direction (1 asc, -1 desc). */
         this.sortOrder = signal(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
-        this.rowsPerPageLocal = signal(10, ...(ngDevMode ? [{ debugName: "rowsPerPageLocal" }] : /* istanbul ignore next */ []));
+        /** Local rows per page, kept in sync with the `rowsPerPage` input. */
+        this.rowsPerPageLocal = linkedSignal(() => this.rowsPerPage(), ...(ngDevMode ? [{ debugName: "rowsPerPageLocal" }] : /* istanbul ignore next */ []));
+        /** Total number of pages based on the effective record count. */
         this.totalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalRecords() / this.rowsPerPageLocal())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+        /** Current page number (1-based). */
         this.currentPage = computed(() => Math.floor(this.first() / this.rowsPerPageLocal()) + 1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-        // FIX #4 (medio): debounce también para el buscador global en modo servidor.
+        /** Subjects used to debounce column filters (server mode) and search. */
         this.filterSubject = new Subject();
         this.searchSubject = new Subject();
-        // FIX #3/#crítico: para evitar reconstruir el FormGroup (y perder lo escrito
-        // por el usuario) cuando `columns()` cambia de referencia pero el set de
-        // campos filtrables es el mismo.
+        /**
+         * Signature of the last built set of filterable fields (+filter type) to
+         * avoid rebuilding the form (and losing user input) on reference changes.
+         */
         this.lastFilterFieldsSignature = '';
         this.columnFilterSubscriptions = [];
+        /** Columns array with the leading `actions` column when row actions exist. */
         this.columnsWithActions = computed(() => {
             const columnsArray = this.columns();
             const showAction = this.showActionRow();
@@ -2590,16 +3113,24 @@ class TableComponent {
             }
             return [...columnsArray];
         }, ...(ngDevMode ? [{ debugName: "columnsWithActions" }] : /* istanbul ignore next */ []));
+        /** Total records: server-provided in server mode, locally computed otherwise. */
         this.effectiveTotalRecords = computed(() => {
             return this.serverSide() ? this.totalRecords() : this.localTotalRecords();
         }, ...(ngDevMode ? [{ debugName: "effectiveTotalRecords" }] : /* istanbul ignore next */ []));
+        /**
+         * Rows rendered by the template: the input data in server-side mode or the
+         * locally sliced/page current rows otherwise.
+         */
         this.effectiveDisplayedData = computed(() => {
             return this.serverSide() ? this.data() : this.displayedData();
         }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedData" }] : /* istanbul ignore next */ []));
-        // FIX #14: pageReport ahora es un computed reactivo (incluye idioma como
-        // dependencia) en vez de un método imperativo llamado desde el template.
+        /**
+         * Reactive "X to Y of Z" report. Depends on loaded translations and the
+         * active language so it always reflects the translated template.
+         */
         this.pageReport = computed(() => {
-            this.currentLang(); // fuerza recálculo al cambiar de idioma
+            this.translations(); // forces recomputation when translations finish loading
+            this.currentLang(); // forces recomputation when the language changes
             const total = this.effectiveTotalRecords();
             if (total === 0) {
                 return this.transloco.translate('table.pageReport', {
@@ -2613,6 +3144,7 @@ class TableComponent {
             return this.transloco.translate('table.pageReport', { from, to, total });
         }, ...(ngDevMode ? [{ debugName: "pageReport" }] : /* istanbul ignore next */ []));
         this.columnFiltersForm = this.fb.group({});
+        // Debounced column-filter changes (server-side mode only).
         this.filterSubject
             .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
@@ -2620,11 +3152,14 @@ class TableComponent {
                 this.emitFilterChange();
             }
         });
+        // Debounced global search changes (server-side mode only).
         this.searchSubject
             .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
             this.searchChange.emit(value);
         });
+        // When input data changes, refresh the internal copy and re-apply filters
+        // unless the server already handles the filtering.
         effect(() => {
             const newData = this.data();
             untracked(() => {
@@ -2634,12 +3169,14 @@ class TableComponent {
                 }
             });
         });
+        // Rebuild the column filter form whenever the columns change.
         effect(() => {
             const cols = this.columns();
             untracked(() => {
                 this.setupColumnFilters(cols);
             });
         });
+        // Apply the default sort once when the default fields are provided.
         effect(() => {
             const field = this.defaultSortField();
             const order = this.defaultSortOrder();
@@ -2654,6 +3191,7 @@ class TableComponent {
                 });
             }
         });
+        // Apply the global search locally whenever the term changes.
         effect(() => {
             const query = this.searchQuery();
             untracked(() => {
@@ -2662,18 +3200,12 @@ class TableComponent {
                 }
             });
         });
-        effect(() => {
-            this.rowsPerPageLocal.set(this.rowsPerPage());
-        });
     }
     /**
-     * FIX crítico: antes se reconstruía el FormGroup completo (perdiendo el
-     * texto escrito por el usuario en los filtros y el estado de visibilidad
-     * de cada filtro) cada vez que `columns()` cambiaba de referencia, aunque
-     * el conjunto de campos filtrables fuera idéntico. Ahora comparamos una
-     * "firma" del set de campos+tipo de filtro y solo reconstruimos si
-     * realmente cambió. Además, las suscripciones previas se limpian antes de
-     * crear las nuevas para no acumular fugas de memoria.
+     * Builds (or keeps) the reactive form with one control per filterable
+     * column. The form is only rebuilt when the set of filterable
+     * fields/filter types changes, preserving the values already typed by the
+     * user otherwise. Previous subscriptions are unsubscribed to avoid leaks.
      */
     setupColumnFilters(cols) {
         const filterableCols = cols.filter((c) => c.filter);
@@ -2682,7 +3214,7 @@ class TableComponent {
             return;
         }
         this.lastFilterFieldsSignature = signature;
-        // Limpiar suscripciones anteriores antes de reconstruir.
+        // Clean up previous subscriptions before rebuilding.
         this.columnFilterSubscriptions.forEach((sub) => sub.unsubscribe());
         this.columnFilterSubscriptions = [];
         const previousValues = {};
@@ -2724,6 +3256,7 @@ class TableComponent {
             }
         });
     }
+    /** Collects the non-empty column filter values and emits them. */
     emitFilterChange() {
         const filters = {};
         Object.keys(this.columnFiltersForm.controls).forEach((field) => {
@@ -2734,6 +3267,7 @@ class TableComponent {
         });
         this.filterChange.emit({ filters });
     }
+    /** Applies the global search over the original data (client mode). */
     applySearch() {
         const original = this.originalData();
         const query = this.searchQuery().toLowerCase();
@@ -2752,9 +3286,14 @@ class TableComponent {
         }
         this.applyColumnFilters();
     }
+    /** Entry point that applies search (which cascades into column filters). */
     applyFilters() {
         this.applySearch();
     }
+    /**
+     * Applies every column filter on top of the searched data using each
+     * column's `filterType` ('select', 'exact' or text contains).
+     */
     applyColumnFilters() {
         const data = this.searchedData();
         let filtered = [...data];
@@ -2781,6 +3320,7 @@ class TableComponent {
         this.applySort();
         this.updateDisplayedData();
     }
+    /** Slices the filtered rows for the current page. */
     updateDisplayedData() {
         const filtered = this.filteredData();
         const firstIndex = this.first();
@@ -2788,9 +3328,11 @@ class TableComponent {
         const displayed = filtered.slice(firstIndex, firstIndex + rows);
         this.displayedData.set(displayed);
     }
+    /** Emits the filter chip clicked in the template. */
     onFilterClick(value) {
         this.filterClick.emit(value);
     }
+    /** Toggles the sort direction of a column (first click sorts ascending). */
     toggleSort(field) {
         if (this.sortField() === field) {
             this.sortOrder.set(this.sortOrder() * -1);
@@ -2806,11 +3348,8 @@ class TableComponent {
         }
     }
     /**
-     * FIX: se documenta explícitamente el criterio de valores null/undefined.
-     * Se mantienen SIEMPRE al final de la lista, sin importar la dirección del
-     * orden (comportamiento común e intencional en tablas de datos). Si en tu
-     * caso de uso prefieres que "sigan" la dirección del sort, multiplica
-     * ambos returns por `order`.
+     * Sorts the filtered rows by the current field. Rows with null/undefined
+     * values are always kept at the end regardless of sort direction.
      */
     applySort() {
         const field = this.sortField();
@@ -2824,7 +3363,7 @@ class TableComponent {
             if (va == null && vb == null)
                 return 0;
             if (va == null)
-                return 1; // nulls siempre al final
+                return 1; // nulls always at the end
             if (vb == null)
                 return -1;
             if (va < vb)
@@ -2835,6 +3374,7 @@ class TableComponent {
         });
         this.filteredData.set(data);
     }
+    /** Handles the global search input (updates query, resets page, debounces server mode). */
     onSearchInput(value) {
         this.searchQuery.set(value);
         this.first.set(0);
@@ -2842,6 +3382,7 @@ class TableComponent {
             this.searchSubject.next(value);
         }
     }
+    /** Clears a column filter value and hides its input. */
     clearFilter(field) {
         const column = this.columns().find((col) => col.field === field);
         const value = column?.filterType === 'select' ? null : '';
@@ -2850,24 +3391,25 @@ class TableComponent {
         this.showFilterInput.set({ ...visibility, [field]: false });
         this.cdr.markForCheck();
     }
+    /** Toggles the visibility of a column filter input. */
     toggleFilter(field) {
         const visibility = this.showFilterInput();
         this.showFilterInput.set({ ...visibility, [field]: !visibility[field] });
         this.cdr.markForCheck();
     }
     /**
-     * FIX #5 (falsy zero): antes el template usaba `columnFiltersForm.get(field)?.value`
-     * directamente en un `@if`/`[class]`, lo cual falla cuando el valor es `0`
-     * (número), ya que `0` es falsy en JS. Este helper compara explícitamente
-     * contra null/undefined/''.
+     * Whether a column filter is non-empty. Avoids treating the number 0 as
+     * "no value".
      */
     hasFilterValue(field) {
         const value = this.columnFiltersForm.get(field)?.value;
         return value !== null && value !== undefined && value !== '';
     }
+    /** Returns the reactive page report string (template helper). */
     getPageReport() {
         return this.pageReport();
     }
+    /** Goes to the first page (emits pageChange in server-side mode). */
     goToFirst() {
         const rows = this.rowsPerPageLocal();
         this.first.set(0);
@@ -2883,6 +3425,7 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /** Goes to the last page (emits pageChange in server-side mode). */
     goToLast() {
         const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
         const rows = this.rowsPerPageLocal();
@@ -2901,6 +3444,7 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /** Updates rows-per-page and resets to the first page. */
     onRowsPerPageChange(rows) {
         rows = Number(rows);
         this.rowsPerPageLocal.set(rows);
@@ -2917,16 +3461,20 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /** Emits the refresh output. */
     refreshData() {
         this.refresh.emit();
     }
+    /** Whether the current page is the first one. */
     isFirstPage() {
         return this.first() === 0;
     }
+    /** Whether the current page is the last one. */
     isLastPage() {
         const total = this.effectiveTotalRecords();
         return this.first() + this.rowsPerPageLocal() >= total;
     }
+    /** Moves to the next page (emits pageChange in server-side mode). */
     next() {
         const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
         const rows = this.rowsPerPageLocal();
@@ -2948,6 +3496,7 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /** Moves to the previous page (emits pageChange in server mode). */
     prev() {
         const rows = this.rowsPerPageLocal();
         let first = this.first() - rows;
@@ -2969,68 +3518,97 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /** Resets the table to the first page. */
     reset() {
         this.goToFirst();
     }
+    /** Resolves the row action label, static or per-row function. */
     getRowActionLabel(action, rowData) {
         return typeof action.label === 'function' ? action.label(rowData) : action.label;
     }
+    /**
+     * Resolves the row action icon: a lucide component, a function returning
+     * the icon name, or a raw string resolved by the central icon map.
+     */
     getRowActionIconName(action, rowData) {
-        return typeof action.icon === 'function' ? action.icon(rowData) : action.icon;
+        const icon = action.icon;
+        if (typeof icon === 'function') {
+            if (icon.prototype === undefined) {
+                return icon(rowData);
+            }
+            return icon;
+        }
+        return icon;
     }
+    /** Resolves the CSS class of a row action, static or per-row function. */
     getRowActionClass(action, rowData) {
         if (!action.class)
             return '';
         return typeof action.class === 'function' ? action.class(rowData) : action.class;
     }
+    /** Whether a header action is disabled. */
     isHeaderActionDisabled(action) {
         return action.isDisabled ? action.isDisabled() : false;
     }
+    /** Whether a header action is visible. */
     isHeaderActionVisible(action) {
         return action.isVisible ? action.isVisible() : true;
     }
+    /** Whether a row action is disabled for the given row. */
     isRowActionDisabled(action, rowData) {
         return action.isDisabled ? action.isDisabled(rowData) : false;
     }
+    /** Whether a row action is visible for the given row. */
     isRowActionVisible(action, rowData) {
         return action.isVisible ? action.isVisible(rowData) : true;
     }
+    /** Truncates a value with an ellipsis past the given character limit. */
     truncate(value, limit = 30) {
         if (value === null || value === undefined)
             return '';
         const str = String(value);
         return str.length > limit ? str.slice(0, limit) + '\u2026' : str;
     }
+    /** Resolves the value displayed inside a tag cell, static or per-row function. */
     getTagValue(col, rowData) {
         return col.tagValue ? col.tagValue(rowData) : String(rowData[col.field] ?? '');
     }
+    /** Resolves and validates the tag severity, falling back to 'secondary'. */
     getTagSeverity(col, rowData) {
         const raw = col.tagSeverity ? col.tagSeverity(rowData) : 'secondary';
-        const allowed = ['secondary', 'success', 'info', 'warning', 'danger', 'contrast'];
+        const allowed = [
+            'secondary',
+            'success',
+            'info',
+            'warning',
+            'danger',
+            'contrast',
+        ];
         return allowed.includes(raw) ? raw : 'secondary';
     }
+    /** Resolves whether the tag in a cell is rounded, static or per-row function. */
     getTagRounded(col, rowData) {
         if (typeof col.tagRounded === 'function')
             return col.tagRounded(rowData);
         return col.tagRounded ?? false;
     }
+    /** Resolves the icon shown inside a tag cell, static or per-row function. */
     getTagIcon(col, rowData) {
         if (typeof col.tagIcon === 'function')
             return col.tagIcon(rowData);
         return col.tagIcon ?? '';
     }
+    /** Resolves the CSS styles of a tag cell, static or per-row function. */
     getTagStyle(col, rowData) {
         return col.tagStyle ? col.tagStyle(rowData) || {} : {};
     }
     /**
-     * FIX #7 (medio): trackBy real por identidad de fila en vez de `$index`.
-     * Si tu dato no tiene `id`/`_id`, cae de vuelta al índice (comportamiento
-     * anterior), pero se recomienda pasar filas con un identificador único.
+     * trackBy for row identity: prefers `id`/`_id` and falls back to the index.
      */
     trackByRow(row, index) {
         return row?.id ?? row?._id ?? index;
     }
-    /** FIX accesibilidad: soporte de teclado (Enter/Espacio) para ordenar columnas. */
+    /** Keyboard support (Enter/Space) for sorting a column header. */
     onHeaderKeydown(event, col) {
         if (col.field === 'actions' || !col.sortable)
             return;
@@ -3039,7 +3617,7 @@ class TableComponent {
             this.toggleSort(col.field);
         }
     }
-    /** FIX accesibilidad: valor aria-sort para el <th> correspondiente. */
+    /** Accessible aria-sort value for a given column header. */
     getAriaSort(col) {
         if (col.field === 'actions' || !col.sortable)
             return 'none';
@@ -3062,92 +3640,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     ], template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\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      <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            <label [for]=\"'shk-table-search'\" class=\"sr-only\">{{\n              searchPlaceholder() || ('common.search_placeholder' | transloco)\n            }}</label>\n            <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n              <svg\n                [lucideIcon]=\"getIcon('search')\"\n                class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n              ></svg>\n            </div>\n            <input\n              id=\"shk-table-search\"\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 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\"\n            />\n          </div>\n        }\n        @if (filters().length > 0) {\n          <div\n            class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\"\n            role=\"group\"\n          >\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                [attr.aria-pressed]=\"f.value === activeFilter()\"\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]=\"\n                  f.value === activeFilter()\n                    ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]'\n                    : ''\n                \"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\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]=\"\n                  '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                  (action.class || '')\n                \"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n                (click)=\"action.onClick()\"\n              >\n                @if (action.icon) {\n                  <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n                }\n                {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div class=\"card p-0 overflow-hidden\" [class.shadow-lg]=\"hasShadow()\">\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table>\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                scope=\"col\"\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                (keydown)=\"onHeaderKeydown($event, col)\"\n                [tabindex]=\"col.field !== 'actions' && col.sortable ? 0 : -1\"\n                [attr.role]=\"col.field !== 'actions' && col.sortable ? 'button' : null\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.field === 'actions' ? col.width : null\"\n                [style.min-width]=\"col.field === 'actions' ? col.width : null\"\n                [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\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 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] focus:outline-none focus-visible:ring-1 focus-visible:[--tw-ring-color:var(--shk-primary-500)]\"\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                        <shk-tooltip [text]=\"'table.tooltips.sort' | transloco\">\n                          @if (sortField() === col.field) {\n                            <svg\n                              [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-primary\"\n                            ></svg>\n                          } @else {\n                            <svg\n                              [lucideIcon]=\"getIcon('arrow-up-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                            ></svg>\n                          }\n                        </shk-tooltip>\n                      }\n                      @if (col.filter) {\n                        <shk-tooltip [text]=\"'table.tooltips.filter' | transloco\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            [attr.aria-label]=\"'table.tooltips.filter' | transloco\"\n                            [attr.aria-expanded]=\"showFilterInput()[col.field] || false\"\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]=\"hasFilterValue(col.field)\"\n                            ></svg>\n                          </button>\n                        </shk-tooltip>\n                      }\n                    </div>\n                  </div>\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                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <input\n                            [id]=\"'shk-filter-' + col.field\"\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)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"\n                              col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                            \"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <select\n                            [id]=\"'shk-filter-' + col.field\"\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\">{{ 'table.filterAll' | transloco }}</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (hasFilterValue(col.field) && 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        @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\n                  class=\"flex items-center justify-center\"\n                  role=\"status\"\n                  [attr.aria-label]=\"'common.loading' | transloco\"\n                >\n                  <svg\n                    [lucideIcon]=\"getIcon('loader')\"\n                    class=\"w-6 h-6 animate-spin _shk-text-primary\"\n                  ></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\n                    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                  >\n                    <svg\n                      [lucideIcon]=\"getIcon('inbox')\"\n                      class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                    ></svg>\n                  </div>\n                  <p\n                    class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n                  >\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 trackByRow(rowData, $index)) {\n              <tr\n                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              >\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\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                    [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <shk-tag\n                          [value]=\"getTagValue(col, rowData)\"\n                          [severity]=\"getTagSeverity(col, rowData)\"\n                          [rounded]=\"getTagRounded(col, rowData)\"\n                          [icon]=\"getTagIcon(col, rowData)\"\n                          [style]=\"getTagStyle(col, rowData)\"\n                        />\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                              <shk-tooltip\n                                [text]=\"getRowActionLabel(action, rowData)\"\n                                position=\"top\"\n                              >\n                                <button\n                                  type=\"button\"\n                                  (click)=\"action.onClick(rowData)\"\n                                  [class]=\"\n                                    'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' +\n                                    getRowActionClass(action, rowData)\n                                  \"\n                                  [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                  [attr.aria-label]=\"getRowActionLabel(action, rowData)\"\n                                >\n                                  <svg\n                                    [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                    class=\"w-4 h-4\"\n                                  ></svg>\n                                </button>\n                              </shk-tooltip>\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n    <div\n      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    >\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        {{ pageReport() }}\n      </div>\n      <div\n        class=\"flex items-center gap-0.5\"\n        role=\"navigation\"\n      >\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\n          class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          >{{ currentPage() }} / {{ totalPages() }}</span\n        >\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div\n        class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\"\n      >\n        <label [for]=\"'shk-rows-per-page'\">{{ 'table.rows' | transloco }}</label>\n        <select\n          id=\"shk-rows-per-page\"\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</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th,table td{white-space:nowrap;overflow:hidden;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;overflow-y:hidden;border-radius:inherit;-webkit-overflow-scrolling:touch;container-type:inline-size}.table-scroll-wrapper table{table-layout:fixed;width:100%}@container (max-width: 768px){.table-scroll-wrapper{scroll-snap-type:x mandatory}.table-scroll-wrapper table{table-layout:auto;width:100%}.table-scroll-wrapper th:not([data-shk-actions]),.table-scroll-wrapper td:not([data-shk-actions]){min-width:var(--shk-col-width, 140px);max-width:var(--shk-col-width, 140px)}.table-scroll-wrapper th,.table-scroll-wrapper td{scroll-snap-align:start}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\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"] }] } });
 
-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$4(name) {
-    if (!name)
-        return null;
-    return ICONS$1[name] ?? LucideMenu;
-}
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Collapsible vertical navigation sidebar with groups, icons, badges,
+ * role-based filtering, responsive mobile drawer and tooltips.
+ */
 class SidebarComponent {
-    constructor(platformId) {
-        this.platformId = platformId;
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        /** Flat list of navigation items (used when no groups are provided). */
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Grouped navigation items; takes precedence over `items`. */
         this.groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        /** Brand title shown at the top of the sidebar. */
         this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Subtitle under the title. */
         this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Brand logo image/url shown at the top. */
         this.logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+        /** id of the item currently highlighted as active. */
         this.activeItemId = input('', ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+        /** Role used to filter items that declare `roles`. */
         this.userRole = input('', ...(ngDevMode ? [{ debugName: "userRole" }] : /* istanbul ignore next */ []));
+        /** Whether the sidebar can collapse into a rail. */
         this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        /** Shows the expand/collapse toggle button. */
         this.showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+        /** Enables the mobile drawer behaviour below lg breakpoint. */
         this.responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+        /** Keeps the sidebar fixed while the page scrolls. */
         this.fixed = input(false, ...(ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []));
+        /** Adds a drop shadow to the sidebar. */
         this.hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+        /** Width in expanded state. */
         this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        /** Width when collapsed. */
         this.collapsedWidth = input('5rem', ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
+        /** Group ids opened by default on load. */
         this.defaultExpanded = input([], ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : /* istanbul ignore next */ []));
+        /** Optional transform applied to item labels (e.g. i18n). */
         this.labelPipe = input((label) => label, ...(ngDevMode ? [{ debugName: "labelPipe" }] : /* istanbul ignore next */ []));
+        /** Tooltip for the expand action. */
         this.expandTooltip = input('Expandir', ...(ngDevMode ? [{ debugName: "expandTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip for the collapse action. */
         this.collapseTooltip = input('Colapsar', ...(ngDevMode ? [{ debugName: "collapseTooltip" }] : /* istanbul ignore next */ []));
+        /** Collapsed state, bindable with [(collapsed)]. */
         this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Mobile drawer open state, bindable with [(mobileOpen)]. */
         this.mobileOpen = model(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+        /** Emitted when a navigation item is clicked. */
         this.itemClick = output();
+        /** Emitted with the new collapsed state after toggling. */
         this.toggle = output();
-        this.getIcon = getIcon$4;
+        this.getIcon = (name) => getIcon(name, LucideMenu);
+        /** Currently selected item id. */
         this.selectedId = signal('', ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        /** Set of group ids currently expanded. */
         this.expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
-        this.isBrowser = isPlatformBrowser(this.platformId);
+        this.isBrowser = false;
+        /** Current sidebar width depending on the collapsed state. */
         this.width = computed(() => this.collapsed() ? this.collapsedWidth() : this.expandedWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /** Navigation items after group flattening and role filtering. */
         this.navItems = computed(() => {
             const role = this.userRole();
-            const base = this.groups().length
-                ? this.groups().flatMap((g) => g.items)
-                : this.items();
+            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 */ []));
+        if (isPlatformBrowser(this.platformId)) {
+            this.isBrowser = isPlatformBrowser(this.platformId);
+        }
         effect(() => {
             this.selectedId.set(this.activeItemId());
         });
@@ -3177,23 +3746,29 @@ class SidebarComponent {
             });
         });
     }
+    /** Closes the mobile drawer when the window grows below lg. */
     onResize(_event) {
         if (this.responsive() && this.isBrowser && window.innerWidth < 1024) {
             this.mobileOpen.set(false);
         }
     }
+    /** Applies the `labelPipe` transform to an item label. */
     label(item) {
         return this.labelPipe()(item.label);
     }
+    /** Whether the item matches the selected id. */
     isItemActive(item) {
         return !!item.id && item.id === this.selectedId();
     }
+    /** Whether one of the item's children is currently active. */
     isGroupActive(item) {
         return item.children?.some((c) => c.id === this.selectedId()) ?? false;
     }
+    /** Whether a group is expanded. */
     isGroupExpanded(item) {
         return this.expandedGroups().has(item.id);
     }
+    /** Toggles the expanded state of a group. */
     toggleGroup(item) {
         this.expandedGroups.update((set) => {
             const next = new Set(set);
@@ -3206,6 +3781,7 @@ class SidebarComponent {
             return next;
         });
     }
+    /** Selects an item, emits `itemClick` and closes the mobile drawer when needed. */
     onItemClick(item) {
         if (item.disabled)
             return;
@@ -3215,6 +3791,7 @@ class SidebarComponent {
             this.mobileOpen.set(false);
         }
     }
+    /** Toggles collapse (desktop) or the mobile drawer (below lg). */
     onToggle() {
         if (this.responsive() && this.isBrowser && window.innerWidth < 1024) {
             this.mobileOpen.update((v) => !v);
@@ -3224,93 +3801,80 @@ class SidebarComponent {
             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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarComponent, deps: [], 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: "@if (responsive() && mobileOpen()) {\n  <!-- Mobile overlay backdrop (sibling of aside: must NOT be inside the\n       transformed aside, otherwise it becomes its containing block and\n       only covers the sidebar, also blocking nav clicks on mobile) -->\n  <div\n    class=\"fixed inset-0 bg-black/50 z-30 lg:hidden\"\n    (click)=\"mobileOpen.set(false)\"\n  ></div>\n}\n\n<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  <!-- 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-soft]=\"isItemActive(child)\"\n                        [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                        [class._shk-text-primary-700]=\"isItemActive(child)\"\n                        [class.dark:[color:var(--shk-primary-300)]]=\"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 _shk-bg-primary 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: "@if (responsive() && mobileOpen()) {\n  <!-- Mobile overlay backdrop (sibling of aside: must NOT be inside the\n       transformed aside, otherwise it becomes its containing block and\n       only covers the sidebar, also blocking nav clicks on mobile) -->\n  <div\n    class=\"fixed inset-0 bg-black/50 z-30 lg:hidden\"\n    (click)=\"mobileOpen.set(false)\"\n  ></div>\n}\n\n<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  <!-- 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-soft]=\"isItemActive(child)\"\n                        [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                        [class._shk-text-primary-700]=\"isItemActive(child)\"\n                        [class.dark:[color:var(--shk-primary-300)]]=\"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 _shk-bg-primary 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: [{
+        }], ctorParameters: () => [], 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$3(name) {
-    if (!name)
-        return null;
-    return ICONS[name] ?? LucideMenu;
-}
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Narrow "rail" sidebar that expands into sections. Supports sections, roles,
+ * language switching, collapse/expand and responsive tooltips.
+ */
 class RailSidebarComponent {
     constructor() {
+        /** Sections presented as expandable areas of the rail. */
         this.sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        /** Current location url used to detect the active section/item. */
         this.activeUrl = input('', ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+        /** Key of the active section, bindable with [(activeSectionKey)]. */
         this.activeSectionKey = model('', ...(ngDevMode ? [{ debugName: "activeSectionKey" }] : /* istanbul ignore next */ []));
+        /** Collapsed (rail only) state, bindable with [(collapsed)]. */
         this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Active language code. */
         this.activeLang = input('es', ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
+        /** Languages available in the language switcher. */
         this.langs = input(['es', 'en'], ...(ngDevMode ? [{ debugName: "langs" }] : /* istanbul ignore next */ []));
+        /** Brand logo image/url. */
         this.logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+        /** Application name shown when expanded. */
         this.appName = input('', ...(ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []));
+        /** Role used to filter items that declare `roles`. */
         this.userRole = input('', ...(ngDevMode ? [{ debugName: "userRole" }] : /* istanbul ignore next */ []));
+        /** Optional transform applied to item labels (e.g. i18n). */
         this.labelPipe = input((label) => label, ...(ngDevMode ? [{ debugName: "labelPipe" }] : /* istanbul ignore next */ []));
+        /** Width of the collapsed rail. */
         this.railWidth = input('4.5rem', ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
+        /** Width when a section is expanded. */
         this.expandedWidth = input('16.5rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+        /** Tooltip for the workspace/home action. */
         this.workspaceTooltip = input('Inicio', ...(ngDevMode ? [{ debugName: "workspaceTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip for the logout action. */
         this.logoutTooltip = input('Cerrar sesión', ...(ngDevMode ? [{ debugName: "logoutTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip for collapsing the sidebar. */
         this.collapseTooltip = input('Colapsar', ...(ngDevMode ? [{ debugName: "collapseTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip for expanding the sidebar. */
         this.expandTooltip = input('Expandir', ...(ngDevMode ? [{ debugName: "expandTooltip" }] : /* istanbul ignore next */ []));
+        /** Emitted when a section is selected, with its key and optional route. */
         this.sectionSelected = output();
+        /** Emitted when a navigation item is clicked. */
         this.itemClick = output();
+        /** Emitted with the next language code when the user switches language. */
         this.setLang = output();
+        /** Emitted when the user requests to log out. */
         this.logoutRequested = output();
+        /** Emitted with the new collapsed state after toggling. */
         this.toggleSidebar = output();
+        /** Emitted when the workspace/home entry is clicked. */
         this.workspaceClick = output();
-        this.getIcon = getIcon$3;
+        this.getIcon = (name) => getIcon(name, LucideMenu);
+        /** Set of group ids currently expanded. */
         this.expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+        /** Current sidebar width depending on the collapsed state. */
         this.width = computed(() => this.collapsed() ? this.railWidth() : this.expandedWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /** The section currently selected. */
         this.activeSection = computed(() => this.sections().find((s) => s.key === this.activeSectionKey()) ?? null, ...(ngDevMode ? [{ debugName: "activeSection" }] : /* istanbul ignore next */ []));
+        /** Items of the active section, filtered by role. */
         this.navItems = computed(() => {
             const role = this.userRole();
             const items = this.activeSection()?.items ?? [];
@@ -3335,23 +3899,29 @@ class RailSidebarComponent {
             }
         });
     }
+    /** Applies the `labelPipe` transform to a label. */
     label(label) {
         return this.labelPipe()(label);
     }
+    /** Whether the section matches the active key. */
     isSectionActive(section) {
         return section.key === this.activeSectionKey();
     }
+    /** Whether the item is the best route match for the active url. */
     isItemActive(item) {
         if (!item.routerLink)
             return false;
         return this.bestMatchItem() === item;
     }
+    /** Whether one of the item's children matches the active url. */
     isGroupActive(item) {
         return (item.children?.some((c) => c.routerLink && this.matchesUrl(c.routerLink, this.activeUrl())) ?? false);
     }
+    /** Exact or prefix match between a router link and the active url. */
     matchesUrl(routerLink, url) {
         return url === routerLink || url.startsWith(routerLink + '/');
     }
+    /** Longest (most specific) item whose route matches the active url. */
     bestMatchItem() {
         const url = this.activeUrl();
         let best = null;
@@ -3371,9 +3941,11 @@ class RailSidebarComponent {
         }
         return best;
     }
+    /** Whether a group is expanded. */
     isGroupExpanded(item) {
         return this.expandedGroups().has(item.id);
     }
+    /** Toggles the expanded state of a group. */
     toggleGroup(item) {
         this.expandedGroups.update((set) => {
             const next = new Set(set);
@@ -3386,6 +3958,7 @@ class RailSidebarComponent {
             return next;
         });
     }
+    /** Selects a section, emits `sectionSelected` and expands the rail when collapsed. */
     onSectionClick(section) {
         this.activeSectionKey.set(section.key);
         this.sectionSelected.emit({ key: section.key, routerLink: section.routerLink });
@@ -3394,11 +3967,13 @@ class RailSidebarComponent {
             this.toggleSidebar.emit(false);
         }
     }
+    /** Emits `itemClick` for a navigation item (skipping disabled items). */
     onItemClick(item) {
         if (item.disabled)
             return;
         this.itemClick.emit(item);
     }
+    /** Emits `workspaceClick` and expands the sidebar if it was collapsed. */
     onWorkspace() {
         this.workspaceClick.emit();
         if (this.collapsed()) {
@@ -3406,6 +3981,7 @@ class RailSidebarComponent {
             this.toggleSidebar.emit(false);
         }
     }
+    /** Cycles to the next language and emits `setLang`. */
     onToggleLang() {
         const langs = this.langs();
         if (langs.length === 0)
@@ -3414,26 +3990,43 @@ class RailSidebarComponent {
         const next = langs[(idx + 1) % langs.length] ?? langs[0];
         this.setLang.emit(next);
     }
+    /** Toggles collapse and emits `toggleSidebar`. */
     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-soft]=\"isItemActive(child)\"\n                          [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                          [class._shk-text-primary-700]=\"isItemActive(child)\"\n                          [class.dark:[color:var(--shk-primary-300)]]=\"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.label) }}</span>\n                          @if (isItemActive(child)) {\n                            <span class=\"w-1.5 h-1.5 rounded-full _shk-bg-primary shrink-0 ml-auto\"></span>\n                          }\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" }] }); }
+    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-soft]=\"isItemActive(child)\"\n                          [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                          [class._shk-text-primary-700]=\"isItemActive(child)\"\n                          [class.dark:[color:var(--shk-primary-300)]]=\"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.label) }}</span>\n                          @if (isItemActive(child)) {\n                            <span class=\"w-1.5 h-1.5 rounded-full _shk-bg-primary shrink-0 ml-auto\"></span>\n                          }\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;height:100%}.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-soft]=\"isItemActive(child)\"\n                          [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                          [class._shk-text-primary-700]=\"isItemActive(child)\"\n                          [class.dark:[color:var(--shk-primary-300)]]=\"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.label) }}</span>\n                          @if (isItemActive(child)) {\n                            <span class=\"w-1.5 h-1.5 rounded-full _shk-bg-primary shrink-0 ml-auto\"></span>\n                          }\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"] }]
+            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-soft]=\"isItemActive(child)\"\n                          [class._shk-bg-primary-soft-dark]=\"isItemActive(child)\"\n                          [class._shk-text-primary-700]=\"isItemActive(child)\"\n                          [class.dark:[color:var(--shk-primary-300)]]=\"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.label) }}</span>\n                          @if (isItemActive(child)) {\n                            <span class=\"w-1.5 h-1.5 rounded-full _shk-bg-primary shrink-0 ml-auto\"></span>\n                          }\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;height:100%}.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"] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Chart.js wrapper that renders line, bar, pie, doughnut or polarArea charts
+ * and updates them reactively as the inputs change.
+ */
 class ChartComponent {
+    /** Guarantees Chart.js plugins are only registered once. */
     static { this.registered = false; }
     constructor() {
+        /** Type of chart to render. */
         this.type = input('bar', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Chart.js datasets payload. */
         this.data = input({ datasets: [] }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Chart.js options object. */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Reference to the inner canvas element. */
         this.canvasRef = viewChild.required('canvas');
+        /** Live Chart.js instance. */
         this.chartInstance = null;
+        /** Whether the view has been initialized yet. */
         this.initialized = false;
         if (!ChartComponent.registered) {
             Chart.register(...registerables);
@@ -3450,17 +4043,21 @@ class ChartComponent {
             });
         });
     }
+    /** Creates the initial chart once the canvas is available. */
     ngAfterViewInit() {
         this.initialized = true;
         this.initChart();
     }
+    /** Destroys the Chart.js instance. */
     ngOnDestroy() {
         this.chartInstance?.destroy();
     }
+    /** Clears the canvas by reassigning its width. */
     resetCanvas() {
         const canvas = this.canvasRef().nativeElement;
         canvas.width = canvas.width;
     }
+    /** Creates a new Chart.js instance on the canvas. */
     initChart() {
         this.resetCanvas();
         const canvas = this.canvasRef().nativeElement;
@@ -3474,6 +4071,7 @@ class ChartComponent {
         });
         this.chartInstance.resize();
     }
+    /** Deep clones a value to detach it from Angular's reactive objects. */
     deepClone(value) {
         try {
             if (typeof structuredClone === 'function')
@@ -3482,6 +4080,7 @@ class ChartComponent {
         catch { }
         return JSON.parse(JSON.stringify(value));
     }
+    /** Applies the new data/options, rebuilding the chart when the type changes. */
     updateChart(type, data, options) {
         if (!this.chartInstance) {
             this.initChart();
@@ -3520,6 +4119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Default dataset colors used by the ChartComponent when no palette is provided. */
 const COLOR_PALETTE = [
     { bg: 'rgba(59, 130, 246, 0.2)', border: 'rgb(59, 130, 246)' },
     { bg: 'rgba(34, 197, 94, 0.2)', border: 'rgb(34, 197, 94)' },
@@ -3528,6 +4133,10 @@ const COLOR_PALETTE = [
     { bg: 'rgba(236, 72, 153, 0.2)', border: 'rgb(236, 72, 153)' },
     { bg: 'rgba(6, 182, 212, 0.2)', border: 'rgb(6, 182, 212)' },
 ];
+/**
+ * Reads the current `--shk-*` CSS variables from the document and returns
+ * the text, muted and border colors used by charts to follow the active theme.
+ */
 function readThemeColors() {
     const docStyle = getComputedStyle(document.documentElement);
     return {
@@ -3537,34 +4146,6 @@ function readThemeColors() {
     };
 }
 
-const icons$2 = {
-    plus: LucidePlus,
-    pencil: LucidePencil,
-    'trash-2': LucideTrash2,
-    delete: LucideTrash2,
-    'circle-plus': LucideCirclePlus,
-    'circle-help': LucideCircleHelp,
-    calendar: LucideCalendar,
-    'calendar-days': LucideCalendarDays,
-    clock: LucideClock,
-    tag: LucideTag,
-    package: LucidePackage,
-    info: LucideInfo,
-    inbox: LucideInbox,
-    hotel: LucideHotel,
-    ticket: LucideTicket,
-    car: LucideCar,
-    mountain: LucideMountain,
-    bus: LucideBus,
-    ship: LucideShip,
-    shield: LucideShield,
-    utensils: LucideUtensils,
-    'map-pin': LucideMapPin,
-    'user-round': LucideUserRound,
-};
-function getIcon$2(name) {
-    return icons$2[name] ?? LucideCircleHelp;
-}
 const DEFAULT_MARKER_GRADIENTS = [
     'bg-gradient-to-br from-blue-500 to-blue-600',
     'bg-gradient-to-br from-emerald-500 to-emerald-600',
@@ -3592,24 +4173,24 @@ const DEFAULT_SUPPLIER_ICON_COLORS = {
     package: { bg: '#84cc16', text: '#ffffff' },
     other: { bg: '#e0fbfc', text: '#293241' },
 };
-/** Maps a sub-item `type` to a lucide icon name. */
+/** Maps a sub-item `type` to a lucide icon component. */
 const DEFAULT_SUPPLIER_TYPE_ICONS = {
-    accommodation: 'hotel',
-    air_tickets: 'ticket',
-    rent_a_car: 'car',
-    excursion: 'mountain',
-    transfer: 'bus',
-    cruise: 'ship',
-    insurance: 'shield',
-    restaurant: 'utensils',
-    visit: 'map-pin',
-    guide: 'user-round',
-    package: 'package',
-    other: 'tag',
+    accommodation: LucideHotel,
+    air_tickets: LucideTicket,
+    rent_a_car: LucideCar,
+    excursion: LucideMountain,
+    transfer: LucideBus,
+    cruise: LucideShip,
+    insurance: LucideShield,
+    restaurant: LucideUtensils,
+    visit: LucideMapPin,
+    guide: LucideUserRound,
+    package: LucidePackage,
+    other: LucideTag,
 };
 class TimelineComponent {
     constructor() {
-        this.getIcon = getIcon$2;
+        this.getIcon = (name) => getIcon(name, LucideCircleQuestionMark);
         /** Timeline data. */
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         // ---------- Layout ----------
@@ -3649,7 +4230,7 @@ class TimelineComponent {
         this.itemActions = input([], ...(ngDevMode ? [{ debugName: "itemActions" }] : /* istanbul ignore next */ []));
         this.subItemActions = input([], ...(ngDevMode ? [{ debugName: "subItemActions" }] : /* istanbul ignore next */ []));
         // ---------- Sub-item icon mapping ----------
-        /** Maps a sub-item `type` to a lucide icon name. */
+        /** Maps a sub-item `type` to a lucide icon (name or component). */
         this.iconMap = input({}, ...(ngDevMode ? [{ debugName: "iconMap" }] : /* istanbul ignore next */ []));
         /** Maps a sub-item `type` to its icon-box colors. */
         this.iconColors = input({}, ...(ngDevMode ? [{ debugName: "iconColors" }] : /* istanbul ignore next */ []));
@@ -3726,7 +4307,14 @@ class TimelineComponent {
         return typeof action.label === 'function' ? action.label(item) : action.label;
     }
     getItemActionIconName(action, item) {
-        return typeof action.icon === 'function' ? action.icon(item) : action.icon;
+        const icon = action.icon;
+        if (typeof icon === 'function') {
+            if (icon.prototype === undefined) {
+                return icon(item);
+            }
+            return icon;
+        }
+        return icon;
     }
     getItemActionClass(action, item) {
         if (!action.class)
@@ -3744,7 +4332,14 @@ class TimelineComponent {
         return typeof action.label === 'function' ? action.label(item, sub) : action.label;
     }
     getSubItemActionIconName(action, item, sub) {
-        return typeof action.icon === 'function' ? action.icon(item, sub) : action.icon;
+        const icon = action.icon;
+        if (typeof icon === 'function') {
+            if (icon.prototype === undefined) {
+                return icon(item, sub);
+            }
+            return icon;
+        }
+        return icon;
     }
     isSubItemActionVisible(action, item, sub) {
         return action.isVisible ? action.isVisible(item, sub) : true;
@@ -3753,28 +4348,26 @@ class TimelineComponent {
         return action.isDisabled ? action.isDisabled(item, sub) : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TimelineComponent, isStandalone: true, selector: "shk-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, markerSize: { classPropertyName: "markerSize", publicName: "markerSize", isSignal: true, isRequired: false, transformFunction: null }, markerGradients: { classPropertyName: "markerGradients", publicName: "markerGradients", isSignal: true, isRequired: false, transformFunction: null }, showOpposite: { classPropertyName: "showOpposite", publicName: "showOpposite", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, showSubItemMeta: { classPropertyName: "showSubItemMeta", publicName: "showSubItemMeta", isSignal: true, isRequired: false, transformFunction: null }, showSubItemPrice: { classPropertyName: "showSubItemPrice", publicName: "showSubItemPrice", isSignal: true, isRequired: false, transformFunction: null }, showSubItemCount: { classPropertyName: "showSubItemCount", publicName: "showSubItemCount", isSignal: true, isRequired: false, transformFunction: null }, subItemCountLabel: { classPropertyName: "subItemCountLabel", publicName: "subItemCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, showAddItem: { classPropertyName: "showAddItem", publicName: "showAddItem", isSignal: true, isRequired: false, transformFunction: null }, addItemLabel: { classPropertyName: "addItemLabel", publicName: "addItemLabel", isSignal: true, isRequired: false, transformFunction: null }, addItemIcon: { classPropertyName: "addItemIcon", publicName: "addItemIcon", isSignal: true, isRequired: false, transformFunction: null }, addItemTooltip: { classPropertyName: "addItemTooltip", publicName: "addItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, showAddSubItem: { classPropertyName: "showAddSubItem", publicName: "showAddSubItem", isSignal: true, isRequired: false, transformFunction: null }, addSubItemLabel: { classPropertyName: "addSubItemLabel", publicName: "addSubItemLabel", isSignal: true, isRequired: false, transformFunction: null }, addSubItemTooltip: { classPropertyName: "addSubItemTooltip", publicName: "addSubItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, subItemActions: { classPropertyName: "subItemActions", publicName: "subItemActions", isSignal: true, isRequired: false, transformFunction: null }, iconMap: { classPropertyName: "iconMap", publicName: "iconMap", isSignal: true, isRequired: false, transformFunction: null }, iconColors: { classPropertyName: "iconColors", publicName: "iconColors", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, showEmptyState: { classPropertyName: "showEmptyState", publicName: "showEmptyState", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, editTooltip: { classPropertyName: "editTooltip", publicName: "editTooltip", isSignal: true, isRequired: false, transformFunction: null }, deleteTooltip: { classPropertyName: "deleteTooltip", publicName: "deleteTooltip", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, noSubItemsMessage: { classPropertyName: "noSubItemsMessage", publicName: "noSubItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addItem: "addItem", addSubItem: "addSubItem", itemClick: "itemClick", subItemClick: "subItemClick" }, ngImport: i0, template: "<div class=\"space-y-4\">\n\n  <!-- ============ Header ============ -->\n  @if (showHeader() && (headerTitle() || showAddItem() || headerActions().length > 0)) {\n    <div class=\"flex flex-wrap items-center justify-between gap-2\">\n      @if (headerTitle()) {\n        <div class=\"text-sm font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n          {{ headerTitle() }}\n        </div>\n      }\n      <div class=\"flex items-center gap-1.5 ml-auto\">\n        @if (showAddItem()) {\n          <button\n            type=\"button\"\n            (click)=\"addItem.emit()\"\n            [attr.aria-label]=\"addItemTooltip()\"\n            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\"\n          >\n            <svg [lucideIcon]=\"getIcon(addItemIcon())\" class=\"w-3.5 h-3.5\"></svg>\n            {{ addItemLabel() }}\n          </button>\n        }\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 [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Timeline ============ -->\n  @if (items().length > 0) {\n    <div class=\"relative\">\n      @if (showLine()) {\n        <div [class]=\"lineClass()\" aria-hidden=\"true\"></div>\n      }\n\n      @for (item of items(); track item.id; let i = $index) {\n        @if (alignment() === 'alternate') {\n          <div class=\"relative flex items-start gap-4 lg:grid lg:grid-cols-2 lg:gap-0\">\n            <!-- Marker (centered on desktop) -->\n            <div [class]=\"alternateMarkerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n\n            <!-- Content card -->\n            <div\n              class=\"flex-1 min-w-0\"\n              [class.lg:order-1]=\"$even\"\n              [class.lg:order-2]=\"!$even\"\n              [class.lg:pr-12]=\"$even\"\n              [class.lg:pl-12]=\"!$even\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n\n            <!-- Opposite info -->\n            @if (showOpposite()) {\n              <div\n                class=\"hidden lg:flex lg:items-center\"\n                [class.lg:order-2]=\"$even\"\n                [class.lg:order-1]=\"!$even\"\n                [class.lg:justify-end]=\"$even\"\n                [class.lg:pl-12]=\"!$even\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['opposite'] || itemInfo; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Left alignment -->\n          <div class=\"relative flex items-start gap-4\">\n            <div [class]=\"markerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n            <div class=\"flex-1 min-w-0\">\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  } @else if (showEmptyState()) {\n    <!-- ============ Empty state ============ -->\n    <div class=\"text-center py-12\">\n      @if (customTemplates()['empty']) {\n        <ng-container *ngTemplateOutlet=\"customTemplates()['empty']\"></ng-container>\n      } @else {\n        <div class=\"w-16 h-16 mx-auto mb-4 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center\">\n          <svg [lucideIcon]=\"getIcon(emptyIcon())\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n        </div>\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">{{ emptyMessage() }}</p>\n      }\n    </div>\n  }\n\n  <!-- ============ Templates ============ -->\n\n  <ng-template #defaultMarker let-item let-index=\"index\">\n    <span class=\"font-bold\">{{ markerText(item, index) }}</span>\n  </ng-template>\n\n  <ng-template #itemInfo let-item>\n    <div>\n      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n        <div class=\"mb-2\">\n          <span class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            @if (item.badgeIcon) {\n              <svg [lucideIcon]=\"getIcon(item.badgeIcon)\" class=\"w-3 h-3\"></svg>\n            }\n            {{ item.badge }}\n          </span>\n        </div>\n      }\n      @if (item.title) {\n        <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ item.title }}</div>\n      }\n      @let subCount = (item.subItems?.length || 0);\n      @if (item.subtitle || (showSubItemCount() && subCount > 0)) {\n        <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] mt-1\">\n          {{ item.subtitle || (subCount + ' ' + subItemCountLabel()) }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #card let-item>\n    @let subItems = item.subItems || [];\n    <div class=\"shk-timeline-card mb-4 bg-white dark:[background-color:var(--shk-surface-50)] rounded-xl border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm overflow-hidden\">\n      <!-- Header (mobile in alternate, always in left) -->\n      <div class=\"flex items-center gap-2 px-4 pt-4 pb-2\" [class.lg:hidden]=\"alignment() === 'alternate'\">\n        <ng-container *ngTemplateOutlet=\"itemInfo; context: { $implicit: item }\"></ng-container>\n      </div>\n\n      <!-- Description -->\n      @if (showDescription() && item.description) {\n        <div class=\"px-4 pt-3\">\n          @if (customTemplates()['description']) {\n            <ng-container *ngTemplateOutlet=\"customTemplates()['description']; context: { $implicit: item }\"></ng-container>\n          } @else {\n            <p class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)] leading-relaxed\">{{ item.description }}</p>\n          }\n        </div>\n      }\n\n      <!-- Sub items -->\n      @if (subItems.length > 0) {\n        <div class=\"mt-2\">\n          @for (sub of subItems; track sub.id) {\n            <ng-container\n              *ngTemplateOutlet=\"customTemplates()['subItem'] || defaultSubItem; context: { $implicit: item, subItem: sub }\"\n            ></ng-container>\n          }\n        </div>\n      } @else if (noSubItemsMessage()) {\n        <div class=\"px-4 py-6 text-center\">\n          <div class=\"inline-flex items-center gap-2 text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            <svg [lucideIcon]=\"getIcon('info')\" class=\"w-4 h-4\"></svg>\n            <span class=\"italic\">{{ noSubItemsMessage() }}</span>\n          </div>\n        </div>\n      }\n\n      <!-- Footer actions -->\n      @if (showAddSubItem() || itemActions().length > 0) {\n        <div class=\"flex items-center gap-1 px-4 py-2 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n          @if (showAddSubItem()) {\n            <button\n              type=\"button\"\n              (click)=\"addSubItem.emit(item)\"\n              class=\"relative group inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium _shk-text-primary hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-lg transition-colors\"\n            >\n              <svg [lucideIcon]=\"getIcon('circle-plus')\" class=\"w-3.5 h-3.5\"></svg>\n              {{ addSubItemLabel() }}\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                {{ addSubItemTooltip() }}\n              </span>\n            </button>\n          }\n          <div class=\"flex-1\"></div>\n          @for (action of itemActions(); track $index) {\n            @if (isItemActionVisible(action, item)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item)\"\n                  [class]=\"'timeline-icon-btn ' + getItemActionClass(action, item)\"\n                  [disabled]=\"isItemActionDisabled(action, item)\"\n                  [attr.aria-label]=\"getItemActionLabel(action, item)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getItemActionIconName(action, item))\" class=\"w-3.5 h-3.5\"></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                  {{ getItemActionLabel(action, item) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultSubItem let-item let-sub=\"subItem\">\n    <div class=\"px-4 py-3 border-t [border-color:var(--shk-surface-100)] dark:[border-color:var(--shk-surface-700)] 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 group\">\n      <div class=\"flex items-start gap-3\">\n        <span\n          [class]=\"sub.iconClass || 'flex items-center justify-center w-9 h-9 rounded-lg shrink-0 mt-0.5'\"\n          [style]=\"sub.iconClass ? undefined : subItemStyle(sub)\"\n        >\n          <svg [lucideIcon]=\"getIcon(subItemIconName(sub))\" class=\"w-4 h-4\"></svg>\n        </span>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex items-center gap-2 flex-wrap\">\n            @if (sub.optional) {\n              <span class=\"text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded _shk-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]\">\n                {{ sub.optionalLabel || optionalLabel() }}\n              </span>\n            }\n            <span class=\"font-medium _shk-text-surface-800 dark:[color:var(--shk-surface-800)] text-sm truncate\">{{ sub.title }}</span>\n            @if (sub.subtitle) {\n              <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] truncate\">\u00B7 {{ sub.subtitle }}</span>\n            }\n          </div>\n\n          @if (showSubItemMeta() && (sub.meta?.length || 0) > 0) {\n            <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n              @for (m of sub.meta!; track $index) {\n                <span class=\"flex items-center gap-1\">\n                  <svg [lucideIcon]=\"getIcon(m.icon)\" class=\"w-3 h-3\"></svg>\n                  @if (m.label) {\n                    <span class=\"font-medium\">{{ m.label }}:</span>\n                  }\n                  {{ m.value }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"flex items-center gap-0.5 shrink-0\">\n          @if (showSubItemPrice() && sub.price !== undefined && sub.price !== null && sub.price !== '') {\n            <span class=\"font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)] text-xs mr-1\">{{ sub.price }}</span>\n          }\n          @for (action of subItemActions(); track $index) {\n            @if (isSubItemActionVisible(action, item, sub)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item, sub)\"\n                  class=\"timeline-icon-btn opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity\"\n                  [disabled]=\"isSubItemActionDisabled(action, item, sub)\"\n                  [attr.aria-label]=\"getSubItemActionLabel(action, item, sub)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getSubItemActionIconName(action, item, sub))\" class=\"w-3.5 h-3.5\"></svg>\n                </button>\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                  {{ getSubItemActionLabel(action, item, sub) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [":host{display:block}.timeline-icon-btn{padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--shk-primary-600);transition:background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}.timeline-icon-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent);color:var(--shk-primary-700)}.timeline-icon-btn:disabled{opacity:.4;cursor:not-allowed}.timeline-icon-btn svg{width:.875rem!important;height:.875rem!important}.shk-timeline-card{animation:shk-timeline-fade-in .3s ease-out}@keyframes shk-timeline-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TimelineComponent, isStandalone: true, selector: "shk-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, markerSize: { classPropertyName: "markerSize", publicName: "markerSize", isSignal: true, isRequired: false, transformFunction: null }, markerGradients: { classPropertyName: "markerGradients", publicName: "markerGradients", isSignal: true, isRequired: false, transformFunction: null }, showOpposite: { classPropertyName: "showOpposite", publicName: "showOpposite", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, showSubItemMeta: { classPropertyName: "showSubItemMeta", publicName: "showSubItemMeta", isSignal: true, isRequired: false, transformFunction: null }, showSubItemPrice: { classPropertyName: "showSubItemPrice", publicName: "showSubItemPrice", isSignal: true, isRequired: false, transformFunction: null }, showSubItemCount: { classPropertyName: "showSubItemCount", publicName: "showSubItemCount", isSignal: true, isRequired: false, transformFunction: null }, subItemCountLabel: { classPropertyName: "subItemCountLabel", publicName: "subItemCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, showAddItem: { classPropertyName: "showAddItem", publicName: "showAddItem", isSignal: true, isRequired: false, transformFunction: null }, addItemLabel: { classPropertyName: "addItemLabel", publicName: "addItemLabel", isSignal: true, isRequired: false, transformFunction: null }, addItemIcon: { classPropertyName: "addItemIcon", publicName: "addItemIcon", isSignal: true, isRequired: false, transformFunction: null }, addItemTooltip: { classPropertyName: "addItemTooltip", publicName: "addItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, showAddSubItem: { classPropertyName: "showAddSubItem", publicName: "showAddSubItem", isSignal: true, isRequired: false, transformFunction: null }, addSubItemLabel: { classPropertyName: "addSubItemLabel", publicName: "addSubItemLabel", isSignal: true, isRequired: false, transformFunction: null }, addSubItemTooltip: { classPropertyName: "addSubItemTooltip", publicName: "addSubItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, subItemActions: { classPropertyName: "subItemActions", publicName: "subItemActions", isSignal: true, isRequired: false, transformFunction: null }, iconMap: { classPropertyName: "iconMap", publicName: "iconMap", isSignal: true, isRequired: false, transformFunction: null }, iconColors: { classPropertyName: "iconColors", publicName: "iconColors", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, showEmptyState: { classPropertyName: "showEmptyState", publicName: "showEmptyState", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, editTooltip: { classPropertyName: "editTooltip", publicName: "editTooltip", isSignal: true, isRequired: false, transformFunction: null }, deleteTooltip: { classPropertyName: "deleteTooltip", publicName: "deleteTooltip", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, noSubItemsMessage: { classPropertyName: "noSubItemsMessage", publicName: "noSubItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addItem: "addItem", addSubItem: "addSubItem", itemClick: "itemClick", subItemClick: "subItemClick" }, ngImport: i0, template: "<div class=\"space-y-4\">\n\n  <!-- ============ Header ============ -->\n  @if (showHeader() && (headerTitle() || showAddItem() || headerActions().length > 0)) {\n    <div class=\"flex flex-wrap items-center justify-between gap-2\">\n      @if (headerTitle()) {\n        <div class=\"text-sm font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n          {{ headerTitle() }}\n        </div>\n      }\n      <div class=\"flex items-center gap-1.5 ml-auto\">\n        @if (showAddItem()) {\n          <button\n            type=\"button\"\n            (click)=\"addItem.emit()\"\n            [attr.aria-label]=\"addItemTooltip()\"\n            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\"\n          >\n            <svg [lucideIcon]=\"getIcon(addItemIcon())\" class=\"w-3.5 h-3.5\"></svg>\n            {{ addItemLabel() }}\n          </button>\n        }\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 [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Timeline ============ -->\n  @if (items().length > 0) {\n    <div class=\"relative\">\n      @if (showLine()) {\n        <div [class]=\"lineClass()\" aria-hidden=\"true\"></div>\n      }\n\n      @for (item of items(); track item.id; let i = $index) {\n        @if (alignment() === 'alternate') {\n          <div class=\"relative flex items-start gap-4 lg:grid lg:grid-cols-2 lg:gap-0\">\n            <!-- Marker (centered on desktop) -->\n            <div [class]=\"alternateMarkerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n\n            <!-- Content card -->\n            <div\n              class=\"flex-1 min-w-0\"\n              [class.lg:order-1]=\"$even\"\n              [class.lg:order-2]=\"!$even\"\n              [class.lg:pr-12]=\"$even\"\n              [class.lg:pl-12]=\"!$even\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n\n            <!-- Opposite info -->\n            @if (showOpposite()) {\n              <div\n                class=\"hidden lg:flex lg:items-center\"\n                [class.lg:order-2]=\"$even\"\n                [class.lg:order-1]=\"!$even\"\n                [class.lg:pl-12]=\"$even\"\n                [class.lg:justify-end]=\"!$even\"\n                [class.lg:pr-12]=\"!$even\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['opposite'] || itemInfo; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Left alignment -->\n          <div class=\"relative flex items-start gap-4\">\n            <div [class]=\"markerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n            <div class=\"flex-1 min-w-0\">\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  } @else if (showEmptyState()) {\n    <!-- ============ Empty state ============ -->\n    <div class=\"text-center py-12\">\n      @if (customTemplates()['empty']) {\n        <ng-container *ngTemplateOutlet=\"customTemplates()['empty']\"></ng-container>\n      } @else {\n        <div class=\"w-16 h-16 mx-auto mb-4 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center\">\n          <svg [lucideIcon]=\"getIcon(emptyIcon())\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n        </div>\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">{{ emptyMessage() }}</p>\n      }\n    </div>\n  }\n\n  <!-- ============ Templates ============ -->\n\n  <ng-template #defaultMarker let-item let-index=\"index\">\n    <span class=\"font-bold\">{{ markerText(item, index) }}</span>\n  </ng-template>\n\n  <ng-template #itemInfo let-item>\n    <div>\n      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n        <div class=\"mb-2\">\n          <span class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            @if (item.badgeIcon) {\n              <svg [lucideIcon]=\"getIcon(item.badgeIcon)\" class=\"w-3 h-3\"></svg>\n            }\n            {{ item.badge }}\n          </span>\n        </div>\n      }\n      @if (item.title) {\n        <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ item.title }}</div>\n      }\n      @let subCount = (item.subItems?.length || 0);\n      @if (item.subtitle || (showSubItemCount() && subCount > 0)) {\n        <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] mt-1\">\n          {{ item.subtitle || (subCount + ' ' + subItemCountLabel()) }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #card let-item>\n    @let subItems = item.subItems || [];\n    <div class=\"shk-timeline-card mb-4 bg-white dark:[background-color:var(--shk-surface-50)] rounded-xl border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm overflow-hidden\">\n      <!-- Header (mobile in alternate, always in left) -->\n      <div class=\"flex items-center gap-2 px-4 pt-4 pb-2\" [class.lg:hidden]=\"alignment() === 'alternate'\">\n        <ng-container *ngTemplateOutlet=\"itemInfo; context: { $implicit: item }\"></ng-container>\n      </div>\n\n      <!-- Description -->\n      @if (showDescription() && item.description) {\n        <div class=\"px-4 pt-3\">\n          @if (customTemplates()['description']) {\n            <ng-container *ngTemplateOutlet=\"customTemplates()['description']; context: { $implicit: item }\"></ng-container>\n          } @else {\n            <p class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)] leading-relaxed\">{{ item.description }}</p>\n          }\n        </div>\n      }\n\n      <!-- Sub items -->\n      @if (subItems.length > 0) {\n        <div class=\"mt-2\">\n          @for (sub of subItems; track sub.id) {\n            <ng-container\n              *ngTemplateOutlet=\"customTemplates()['subItem'] || defaultSubItem; context: { $implicit: item, subItem: sub }\"\n            ></ng-container>\n          }\n        </div>\n      } @else if (noSubItemsMessage()) {\n        <div class=\"px-4 py-6 text-center\">\n          <div class=\"inline-flex items-center gap-2 text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            <svg [lucideIcon]=\"getIcon('info')\" class=\"w-4 h-4\"></svg>\n            <span class=\"italic\">{{ noSubItemsMessage() }}</span>\n          </div>\n        </div>\n      }\n\n      <!-- Footer actions -->\n      @if (showAddSubItem() || itemActions().length > 0) {\n        <div class=\"flex items-center gap-1 px-4 py-2 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n          @if (showAddSubItem()) {\n            <button\n              type=\"button\"\n              (click)=\"addSubItem.emit(item)\"\n              class=\"relative group inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium _shk-text-primary hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-lg transition-colors\"\n            >\n              <svg [lucideIcon]=\"getIcon('circle-plus')\" class=\"w-3.5 h-3.5\"></svg>\n              {{ addSubItemLabel() }}\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                {{ addSubItemTooltip() }}\n              </span>\n            </button>\n          }\n          <div class=\"flex-1\"></div>\n          @for (action of itemActions(); track $index) {\n            @if (isItemActionVisible(action, item)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item)\"\n                  [class]=\"'timeline-icon-btn ' + getItemActionClass(action, item)\"\n                  [disabled]=\"isItemActionDisabled(action, item)\"\n                  [attr.aria-label]=\"getItemActionLabel(action, item)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getItemActionIconName(action, item))\" class=\"w-3.5 h-3.5\"></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                  {{ getItemActionLabel(action, item) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultSubItem let-item let-sub=\"subItem\">\n    <div class=\"px-4 py-3 border-t [border-color:var(--shk-surface-100)] dark:[border-color:var(--shk-surface-700)] 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 group\">\n      <div class=\"flex items-start gap-3\">\n        <span\n          [class]=\"sub.iconClass || 'flex items-center justify-center w-9 h-9 rounded-lg shrink-0 mt-0.5'\"\n          [style]=\"sub.iconClass ? undefined : subItemStyle(sub)\"\n        >\n          <svg [lucideIcon]=\"getIcon(subItemIconName(sub))\" class=\"w-4 h-4\"></svg>\n        </span>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex items-center gap-2 flex-wrap\">\n            @if (sub.optional) {\n              <span class=\"text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded _shk-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]\">\n                {{ sub.optionalLabel || optionalLabel() }}\n              </span>\n            }\n            <span class=\"font-medium _shk-text-surface-800 dark:[color:var(--shk-surface-800)] text-sm truncate\">{{ sub.title }}</span>\n            @if (sub.subtitle) {\n              <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] truncate\">\u00B7 {{ sub.subtitle }}</span>\n            }\n          </div>\n\n          @if (showSubItemMeta() && (sub.meta?.length || 0) > 0) {\n            <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n              @for (m of sub.meta!; track $index) {\n                <span class=\"flex items-center gap-1\">\n                  <svg [lucideIcon]=\"getIcon(m.icon)\" class=\"w-3 h-3\"></svg>\n                  @if (m.label) {\n                    <span class=\"font-medium\">{{ m.label }}:</span>\n                  }\n                  {{ m.value }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"flex items-center gap-0.5 shrink-0\">\n          @if (showSubItemPrice() && sub.price !== undefined && sub.price !== null && sub.price !== '') {\n            <span class=\"font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)] text-xs mr-1\">{{ sub.price }}</span>\n          }\n          @for (action of subItemActions(); track $index) {\n            @if (isSubItemActionVisible(action, item, sub)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item, sub)\"\n                  class=\"timeline-icon-btn opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity\"\n                  [disabled]=\"isSubItemActionDisabled(action, item, sub)\"\n                  [attr.aria-label]=\"getSubItemActionLabel(action, item, sub)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getSubItemActionIconName(action, item, sub))\" class=\"w-3.5 h-3.5\"></svg>\n                </button>\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                  {{ getSubItemActionLabel(action, item, sub) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [":host{display:block}.timeline-icon-btn{padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--shk-primary-600);transition:background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}.timeline-icon-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent);color:var(--shk-primary-700)}.timeline-icon-btn:disabled{opacity:.4;cursor:not-allowed}.timeline-icon-btn svg{width:.875rem!important;height:.875rem!important}.shk-timeline-card{animation:shk-timeline-fade-in .3s ease-out}@keyframes shk-timeline-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'shk-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, LucideDynamicIcon], template: "<div class=\"space-y-4\">\n\n  <!-- ============ Header ============ -->\n  @if (showHeader() && (headerTitle() || showAddItem() || headerActions().length > 0)) {\n    <div class=\"flex flex-wrap items-center justify-between gap-2\">\n      @if (headerTitle()) {\n        <div class=\"text-sm font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n          {{ headerTitle() }}\n        </div>\n      }\n      <div class=\"flex items-center gap-1.5 ml-auto\">\n        @if (showAddItem()) {\n          <button\n            type=\"button\"\n            (click)=\"addItem.emit()\"\n            [attr.aria-label]=\"addItemTooltip()\"\n            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\"\n          >\n            <svg [lucideIcon]=\"getIcon(addItemIcon())\" class=\"w-3.5 h-3.5\"></svg>\n            {{ addItemLabel() }}\n          </button>\n        }\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 [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Timeline ============ -->\n  @if (items().length > 0) {\n    <div class=\"relative\">\n      @if (showLine()) {\n        <div [class]=\"lineClass()\" aria-hidden=\"true\"></div>\n      }\n\n      @for (item of items(); track item.id; let i = $index) {\n        @if (alignment() === 'alternate') {\n          <div class=\"relative flex items-start gap-4 lg:grid lg:grid-cols-2 lg:gap-0\">\n            <!-- Marker (centered on desktop) -->\n            <div [class]=\"alternateMarkerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n\n            <!-- Content card -->\n            <div\n              class=\"flex-1 min-w-0\"\n              [class.lg:order-1]=\"$even\"\n              [class.lg:order-2]=\"!$even\"\n              [class.lg:pr-12]=\"$even\"\n              [class.lg:pl-12]=\"!$even\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n\n            <!-- Opposite info -->\n            @if (showOpposite()) {\n              <div\n                class=\"hidden lg:flex lg:items-center\"\n                [class.lg:order-2]=\"$even\"\n                [class.lg:order-1]=\"!$even\"\n                [class.lg:justify-end]=\"$even\"\n                [class.lg:pl-12]=\"!$even\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['opposite'] || itemInfo; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Left alignment -->\n          <div class=\"relative flex items-start gap-4\">\n            <div [class]=\"markerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n            <div class=\"flex-1 min-w-0\">\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  } @else if (showEmptyState()) {\n    <!-- ============ Empty state ============ -->\n    <div class=\"text-center py-12\">\n      @if (customTemplates()['empty']) {\n        <ng-container *ngTemplateOutlet=\"customTemplates()['empty']\"></ng-container>\n      } @else {\n        <div class=\"w-16 h-16 mx-auto mb-4 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center\">\n          <svg [lucideIcon]=\"getIcon(emptyIcon())\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n        </div>\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">{{ emptyMessage() }}</p>\n      }\n    </div>\n  }\n\n  <!-- ============ Templates ============ -->\n\n  <ng-template #defaultMarker let-item let-index=\"index\">\n    <span class=\"font-bold\">{{ markerText(item, index) }}</span>\n  </ng-template>\n\n  <ng-template #itemInfo let-item>\n    <div>\n      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n        <div class=\"mb-2\">\n          <span class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            @if (item.badgeIcon) {\n              <svg [lucideIcon]=\"getIcon(item.badgeIcon)\" class=\"w-3 h-3\"></svg>\n            }\n            {{ item.badge }}\n          </span>\n        </div>\n      }\n      @if (item.title) {\n        <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ item.title }}</div>\n      }\n      @let subCount = (item.subItems?.length || 0);\n      @if (item.subtitle || (showSubItemCount() && subCount > 0)) {\n        <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] mt-1\">\n          {{ item.subtitle || (subCount + ' ' + subItemCountLabel()) }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #card let-item>\n    @let subItems = item.subItems || [];\n    <div class=\"shk-timeline-card mb-4 bg-white dark:[background-color:var(--shk-surface-50)] rounded-xl border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm overflow-hidden\">\n      <!-- Header (mobile in alternate, always in left) -->\n      <div class=\"flex items-center gap-2 px-4 pt-4 pb-2\" [class.lg:hidden]=\"alignment() === 'alternate'\">\n        <ng-container *ngTemplateOutlet=\"itemInfo; context: { $implicit: item }\"></ng-container>\n      </div>\n\n      <!-- Description -->\n      @if (showDescription() && item.description) {\n        <div class=\"px-4 pt-3\">\n          @if (customTemplates()['description']) {\n            <ng-container *ngTemplateOutlet=\"customTemplates()['description']; context: { $implicit: item }\"></ng-container>\n          } @else {\n            <p class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)] leading-relaxed\">{{ item.description }}</p>\n          }\n        </div>\n      }\n\n      <!-- Sub items -->\n      @if (subItems.length > 0) {\n        <div class=\"mt-2\">\n          @for (sub of subItems; track sub.id) {\n            <ng-container\n              *ngTemplateOutlet=\"customTemplates()['subItem'] || defaultSubItem; context: { $implicit: item, subItem: sub }\"\n            ></ng-container>\n          }\n        </div>\n      } @else if (noSubItemsMessage()) {\n        <div class=\"px-4 py-6 text-center\">\n          <div class=\"inline-flex items-center gap-2 text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            <svg [lucideIcon]=\"getIcon('info')\" class=\"w-4 h-4\"></svg>\n            <span class=\"italic\">{{ noSubItemsMessage() }}</span>\n          </div>\n        </div>\n      }\n\n      <!-- Footer actions -->\n      @if (showAddSubItem() || itemActions().length > 0) {\n        <div class=\"flex items-center gap-1 px-4 py-2 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n          @if (showAddSubItem()) {\n            <button\n              type=\"button\"\n              (click)=\"addSubItem.emit(item)\"\n              class=\"relative group inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium _shk-text-primary hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-lg transition-colors\"\n            >\n              <svg [lucideIcon]=\"getIcon('circle-plus')\" class=\"w-3.5 h-3.5\"></svg>\n              {{ addSubItemLabel() }}\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                {{ addSubItemTooltip() }}\n              </span>\n            </button>\n          }\n          <div class=\"flex-1\"></div>\n          @for (action of itemActions(); track $index) {\n            @if (isItemActionVisible(action, item)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item)\"\n                  [class]=\"'timeline-icon-btn ' + getItemActionClass(action, item)\"\n                  [disabled]=\"isItemActionDisabled(action, item)\"\n                  [attr.aria-label]=\"getItemActionLabel(action, item)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getItemActionIconName(action, item))\" class=\"w-3.5 h-3.5\"></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                  {{ getItemActionLabel(action, item) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultSubItem let-item let-sub=\"subItem\">\n    <div class=\"px-4 py-3 border-t [border-color:var(--shk-surface-100)] dark:[border-color:var(--shk-surface-700)] 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 group\">\n      <div class=\"flex items-start gap-3\">\n        <span\n          [class]=\"sub.iconClass || 'flex items-center justify-center w-9 h-9 rounded-lg shrink-0 mt-0.5'\"\n          [style]=\"sub.iconClass ? undefined : subItemStyle(sub)\"\n        >\n          <svg [lucideIcon]=\"getIcon(subItemIconName(sub))\" class=\"w-4 h-4\"></svg>\n        </span>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex items-center gap-2 flex-wrap\">\n            @if (sub.optional) {\n              <span class=\"text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded _shk-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]\">\n                {{ sub.optionalLabel || optionalLabel() }}\n              </span>\n            }\n            <span class=\"font-medium _shk-text-surface-800 dark:[color:var(--shk-surface-800)] text-sm truncate\">{{ sub.title }}</span>\n            @if (sub.subtitle) {\n              <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] truncate\">\u00B7 {{ sub.subtitle }}</span>\n            }\n          </div>\n\n          @if (showSubItemMeta() && (sub.meta?.length || 0) > 0) {\n            <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n              @for (m of sub.meta!; track $index) {\n                <span class=\"flex items-center gap-1\">\n                  <svg [lucideIcon]=\"getIcon(m.icon)\" class=\"w-3 h-3\"></svg>\n                  @if (m.label) {\n                    <span class=\"font-medium\">{{ m.label }}:</span>\n                  }\n                  {{ m.value }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"flex items-center gap-0.5 shrink-0\">\n          @if (showSubItemPrice() && sub.price !== undefined && sub.price !== null && sub.price !== '') {\n            <span class=\"font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)] text-xs mr-1\">{{ sub.price }}</span>\n          }\n          @for (action of subItemActions(); track $index) {\n            @if (isSubItemActionVisible(action, item, sub)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item, sub)\"\n                  class=\"timeline-icon-btn opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity\"\n                  [disabled]=\"isSubItemActionDisabled(action, item, sub)\"\n                  [attr.aria-label]=\"getSubItemActionLabel(action, item, sub)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getSubItemActionIconName(action, item, sub))\" class=\"w-3.5 h-3.5\"></svg>\n                </button>\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                  {{ getSubItemActionLabel(action, item, sub) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [":host{display:block}.timeline-icon-btn{padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--shk-primary-600);transition:background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}.timeline-icon-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent);color:var(--shk-primary-700)}.timeline-icon-btn:disabled{opacity:.4;cursor:not-allowed}.timeline-icon-btn svg{width:.875rem!important;height:.875rem!important}.shk-timeline-card{animation:shk-timeline-fade-in .3s ease-out}@keyframes shk-timeline-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'shk-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, LucideDynamicIcon], template: "<div class=\"space-y-4\">\n\n  <!-- ============ Header ============ -->\n  @if (showHeader() && (headerTitle() || showAddItem() || headerActions().length > 0)) {\n    <div class=\"flex flex-wrap items-center justify-between gap-2\">\n      @if (headerTitle()) {\n        <div class=\"text-sm font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">\n          {{ headerTitle() }}\n        </div>\n      }\n      <div class=\"flex items-center gap-1.5 ml-auto\">\n        @if (showAddItem()) {\n          <button\n            type=\"button\"\n            (click)=\"addItem.emit()\"\n            [attr.aria-label]=\"addItemTooltip()\"\n            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\"\n          >\n            <svg [lucideIcon]=\"getIcon(addItemIcon())\" class=\"w-3.5 h-3.5\"></svg>\n            {{ addItemLabel() }}\n          </button>\n        }\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 [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Timeline ============ -->\n  @if (items().length > 0) {\n    <div class=\"relative\">\n      @if (showLine()) {\n        <div [class]=\"lineClass()\" aria-hidden=\"true\"></div>\n      }\n\n      @for (item of items(); track item.id; let i = $index) {\n        @if (alignment() === 'alternate') {\n          <div class=\"relative flex items-start gap-4 lg:grid lg:grid-cols-2 lg:gap-0\">\n            <!-- Marker (centered on desktop) -->\n            <div [class]=\"alternateMarkerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n\n            <!-- Content card -->\n            <div\n              class=\"flex-1 min-w-0\"\n              [class.lg:order-1]=\"$even\"\n              [class.lg:order-2]=\"!$even\"\n              [class.lg:pr-12]=\"$even\"\n              [class.lg:pl-12]=\"!$even\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n\n            <!-- Opposite info -->\n            @if (showOpposite()) {\n              <div\n                class=\"hidden lg:flex lg:items-center\"\n                [class.lg:order-2]=\"$even\"\n                [class.lg:order-1]=\"!$even\"\n                [class.lg:pl-12]=\"$even\"\n                [class.lg:justify-end]=\"!$even\"\n                [class.lg:pr-12]=\"!$even\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['opposite'] || itemInfo; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Left alignment -->\n          <div class=\"relative flex items-start gap-4\">\n            <div [class]=\"markerColumnClass()\">\n              <span [class]=\"markerClass(item, i)\">\n                <ng-container\n                  *ngTemplateOutlet=\"customTemplates()['marker'] || defaultMarker; context: { $implicit: item, index: i }\"\n                ></ng-container>\n              </span>\n            </div>\n            <div class=\"flex-1 min-w-0\">\n              <ng-container\n                *ngTemplateOutlet=\"customTemplates()['content'] || card; context: { $implicit: item, index: i }\"\n              ></ng-container>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  } @else if (showEmptyState()) {\n    <!-- ============ Empty state ============ -->\n    <div class=\"text-center py-12\">\n      @if (customTemplates()['empty']) {\n        <ng-container *ngTemplateOutlet=\"customTemplates()['empty']\"></ng-container>\n      } @else {\n        <div class=\"w-16 h-16 mx-auto mb-4 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center\">\n          <svg [lucideIcon]=\"getIcon(emptyIcon())\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n        </div>\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">{{ emptyMessage() }}</p>\n      }\n    </div>\n  }\n\n  <!-- ============ Templates ============ -->\n\n  <ng-template #defaultMarker let-item let-index=\"index\">\n    <span class=\"font-bold\">{{ markerText(item, index) }}</span>\n  </ng-template>\n\n  <ng-template #itemInfo let-item>\n    <div>\n      @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n        <div class=\"mb-2\">\n          <span class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold _shk-bg-surface-100 dark:[background-color:var(--shk-surface-200)] _shk-text-surface-600 dark:[color:var(--shk-surface-600)]\">\n            @if (item.badgeIcon) {\n              <svg [lucideIcon]=\"getIcon(item.badgeIcon)\" class=\"w-3 h-3\"></svg>\n            }\n            {{ item.badge }}\n          </span>\n        </div>\n      }\n      @if (item.title) {\n        <div class=\"text-sm font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ item.title }}</div>\n      }\n      @let subCount = (item.subItems?.length || 0);\n      @if (item.subtitle || (showSubItemCount() && subCount > 0)) {\n        <div class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] mt-1\">\n          {{ item.subtitle || (subCount + ' ' + subItemCountLabel()) }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #card let-item>\n    @let subItems = item.subItems || [];\n    <div class=\"shk-timeline-card mb-4 bg-white dark:[background-color:var(--shk-surface-50)] rounded-xl border _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm overflow-hidden\">\n      <!-- Header (mobile in alternate, always in left) -->\n      <div class=\"flex items-center gap-2 px-4 pt-4 pb-2\" [class.lg:hidden]=\"alignment() === 'alternate'\">\n        <ng-container *ngTemplateOutlet=\"itemInfo; context: { $implicit: item }\"></ng-container>\n      </div>\n\n      <!-- Description -->\n      @if (showDescription() && item.description) {\n        <div class=\"px-4 pt-3\">\n          @if (customTemplates()['description']) {\n            <ng-container *ngTemplateOutlet=\"customTemplates()['description']; context: { $implicit: item }\"></ng-container>\n          } @else {\n            <p class=\"text-sm _shk-text-surface-600 dark:[color:var(--shk-surface-600)] leading-relaxed\">{{ item.description }}</p>\n          }\n        </div>\n      }\n\n      <!-- Sub items -->\n      @if (subItems.length > 0) {\n        <div class=\"mt-2\">\n          @for (sub of subItems; track sub.id) {\n            <ng-container\n              *ngTemplateOutlet=\"customTemplates()['subItem'] || defaultSubItem; context: { $implicit: item, subItem: sub }\"\n            ></ng-container>\n          }\n        </div>\n      } @else if (noSubItemsMessage()) {\n        <div class=\"px-4 py-6 text-center\">\n          <div class=\"inline-flex items-center gap-2 text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\">\n            <svg [lucideIcon]=\"getIcon('info')\" class=\"w-4 h-4\"></svg>\n            <span class=\"italic\">{{ noSubItemsMessage() }}</span>\n          </div>\n        </div>\n      }\n\n      <!-- Footer actions -->\n      @if (showAddSubItem() || itemActions().length > 0) {\n        <div class=\"flex items-center gap-1 px-4 py-2 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n          @if (showAddSubItem()) {\n            <button\n              type=\"button\"\n              (click)=\"addSubItem.emit(item)\"\n              class=\"relative group inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium _shk-text-primary hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-lg transition-colors\"\n            >\n              <svg [lucideIcon]=\"getIcon('circle-plus')\" class=\"w-3.5 h-3.5\"></svg>\n              {{ addSubItemLabel() }}\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                {{ addSubItemTooltip() }}\n              </span>\n            </button>\n          }\n          <div class=\"flex-1\"></div>\n          @for (action of itemActions(); track $index) {\n            @if (isItemActionVisible(action, item)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item)\"\n                  [class]=\"'timeline-icon-btn ' + getItemActionClass(action, item)\"\n                  [disabled]=\"isItemActionDisabled(action, item)\"\n                  [attr.aria-label]=\"getItemActionLabel(action, item)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getItemActionIconName(action, item))\" class=\"w-3.5 h-3.5\"></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                  {{ getItemActionLabel(action, item) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultSubItem let-item let-sub=\"subItem\">\n    <div class=\"px-4 py-3 border-t [border-color:var(--shk-surface-100)] dark:[border-color:var(--shk-surface-700)] 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 group\">\n      <div class=\"flex items-start gap-3\">\n        <span\n          [class]=\"sub.iconClass || 'flex items-center justify-center w-9 h-9 rounded-lg shrink-0 mt-0.5'\"\n          [style]=\"sub.iconClass ? undefined : subItemStyle(sub)\"\n        >\n          <svg [lucideIcon]=\"getIcon(subItemIconName(sub))\" class=\"w-4 h-4\"></svg>\n        </span>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex items-center gap-2 flex-wrap\">\n            @if (sub.optional) {\n              <span class=\"text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded _shk-bg-amber-soft _shk-text-amber-600 dark:[color:var(--shk-amber-400)]\">\n                {{ sub.optionalLabel || optionalLabel() }}\n              </span>\n            }\n            <span class=\"font-medium _shk-text-surface-800 dark:[color:var(--shk-surface-800)] text-sm truncate\">{{ sub.title }}</span>\n            @if (sub.subtitle) {\n              <span class=\"text-xs _shk-text-surface-400 dark:[color:var(--shk-surface-500)] truncate\">\u00B7 {{ sub.subtitle }}</span>\n            }\n          </div>\n\n          @if (showSubItemMeta() && (sub.meta?.length || 0) > 0) {\n            <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)]\">\n              @for (m of sub.meta!; track $index) {\n                <span class=\"flex items-center gap-1\">\n                  <svg [lucideIcon]=\"getIcon(m.icon)\" class=\"w-3 h-3\"></svg>\n                  @if (m.label) {\n                    <span class=\"font-medium\">{{ m.label }}:</span>\n                  }\n                  {{ m.value }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"flex items-center gap-0.5 shrink-0\">\n          @if (showSubItemPrice() && sub.price !== undefined && sub.price !== null && sub.price !== '') {\n            <span class=\"font-semibold _shk-text-surface-700 dark:[color:var(--shk-surface-700)] text-xs mr-1\">{{ sub.price }}</span>\n          }\n          @for (action of subItemActions(); track $index) {\n            @if (isSubItemActionVisible(action, item, sub)) {\n              <div class=\"relative group\">\n                <button\n                  type=\"button\"\n                  (click)=\"action.onClick(item, sub)\"\n                  class=\"timeline-icon-btn opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity\"\n                  [disabled]=\"isSubItemActionDisabled(action, item, sub)\"\n                  [attr.aria-label]=\"getSubItemActionLabel(action, item, sub)\"\n                >\n                  <svg [lucideIcon]=\"getIcon(getSubItemActionIconName(action, item, sub))\" class=\"w-3.5 h-3.5\"></svg>\n                </button>\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                  {{ getSubItemActionLabel(action, item, sub) }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [":host{display:block}.timeline-icon-btn{padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--shk-primary-600);transition:background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}.timeline-icon-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent);color:var(--shk-primary-700)}.timeline-icon-btn:disabled{opacity:.4;cursor:not-allowed}.timeline-icon-btn svg{width:.875rem!important;height:.875rem!important}.shk-timeline-card{animation:shk-timeline-fade-in .3s ease-out}@keyframes shk-timeline-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], showLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLine", required: false }] }], markerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerSize", required: false }] }], markerGradients: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerGradients", required: false }] }], showOpposite: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpposite", required: false }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], showSubItemMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubItemMeta", required: false }] }], showSubItemPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubItemPrice", required: false }] }], showSubItemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubItemCount", required: false }] }], subItemCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemCountLabel", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], showAddItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddItem", required: false }] }], addItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addItemLabel", required: false }] }], addItemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addItemIcon", required: false }] }], addItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "addItemTooltip", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], showAddSubItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddSubItem", required: false }] }], addSubItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addSubItemLabel", required: false }] }], addSubItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "addSubItemTooltip", required: false }] }], itemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemActions", required: false }] }], subItemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemActions", required: false }] }], iconMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMap", required: false }] }], iconColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColors", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }], showEmptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyState", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], editTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTooltip", required: false }] }], deleteTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteTooltip", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], noSubItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSubItemsMessage", required: false }] }], customTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplates", required: false }] }], addItem: [{ type: i0.Output, args: ["addItem"] }], addSubItem: [{ type: i0.Output, args: ["addSubItem"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], subItemClick: [{ type: i0.Output, args: ["subItemClick"] }] } });
 
-const icons$1 = {
-    'chevron-down': LucideChevronDown,
-    'chevron-right': LucideChevronRight,
-    plus: LucidePlus,
-    pencil: LucidePencil,
-    'trash-2': LucideTrash2,
-    info: LucideInfo,
-};
-function getIcon$1(name) {
-    return icons$1[name] ?? LucideChevronRight;
-}
 let fieldsetCounter = 0;
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Collapsible content group with a legend header, optional leading icon,
+ * badge and action buttons on the right side.
+ */
 class FieldsetComponent {
     constructor() {
-        this.getIcon = getIcon$1;
+        this.getIcon = (name) => getIcon(name, LucideChevronRight);
         /** Title shown in the header. */
         this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
         /** Collapsed state (default: collapsed). Two-way bindable with [(collapsed)]. */
@@ -3797,15 +4390,22 @@ class FieldsetComponent {
         this.headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
         /** Custom content templates: key 'legend' (context: $implicit collapsed, expanded). */
         this.customTemplates = input({}, ...(ngDevMode ? [{ debugName: "customTemplates" }] : /* istanbul ignore next */ []));
+        /** CSS classes for the extra shadow styling of the panel. */
         this.hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+        /** Accessible label for the expand action. */
         this.expandLabel = input('Expandir', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
+        /** Accessible label for the collapse action. */
         this.collapseLabel = input('Colapsar', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
         /** Emits the new expanded state when toggled. */
         this.toggle = output();
+        /** Emitted when the fieldset is expanded. */
         this.expand = output();
+        /** Emitted when the fieldset is collapsed. */
         this.collapse = output();
+        /** Stable id linking the header button and the content region. */
         this.contentId = `shk-fieldset-content-${++fieldsetCounter}`;
     }
+    /** Toggles the collapsed state and emits the new state (unless not toggleable). */
     onToggle() {
         if (!this.toggleable())
             return;
@@ -3820,9 +4420,11 @@ class FieldsetComponent {
             this.collapse.emit();
         }
     }
+    /** Whether a header action can be rendered. */
     isHeaderActionVisible(action) {
         return action.isVisible ? action.isVisible() : true;
     }
+    /** Whether a header action should be disabled. */
     isHeaderActionDisabled(action) {
         return action.isDisabled ? action.isDisabled() : false;
     }
@@ -3834,31 +4436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-fieldset', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, LucideDynamicIcon], template: "<div\n  class=\"rounded-xl bg-white dark:[background-color:var(--shk-surface-50)] border _shk-border dark:[border-color:var(--shk-surface-200)] overflow-hidden\"\n  [class.shadow-sm]=\"hasShadow()\"\n>\n  <div\n    class=\"flex items-center gap-2 px-4 py-3\"\n    [class.border-b]=\"!collapsed()\"\n    [class._shk-border]=\"!collapsed()\"\n    [class.dark:[border-color:var(--shk-surface-200)]]=\"!collapsed()\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"onToggle()\"\n      [disabled]=\"!toggleable()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-controls]=\"contentId\"\n      class=\"flex items-center gap-2 flex-1 min-w-0 text-left group disabled:cursor-default\"\n    >\n      @if (customTemplates()['legend']) {\n        <ng-container\n          *ngTemplateOutlet=\"customTemplates()['legend']; context: { $implicit: collapsed(), expanded: !collapsed() }\"\n        ></ng-container>\n      } @else {\n        @if (icon()) {\n          <svg [lucideIcon]=\"getIcon(icon())\" class=\"w-4 h-4 _shk-text-primary shrink-0\"></svg>\n        }\n        <span class=\"font-semibold text-sm _shk-text-surface-800 dark:[color:var(--shk-surface-800)] truncate\">\n          {{ legend() }}\n        </span>\n        @if (badge() !== undefined && badge() !== null && badge() !== '') {\n          <span\n            [class]=\"badgeClass() || 'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold _shk-bg-primary-soft _shk-text-primary-700 dark:[background-color:var(--shk-primary-900)] dark:[color:var(--shk-primary-300)] shrink-0'\"\n          >\n            {{ badge() }}\n          </span>\n        }\n      }\n    </button>\n\n    @if (headerActions().length > 0) {\n      <div class=\"flex items-center gap-0.5 shrink-0\">\n        @for (action of headerActions(); track $index) {\n          @if (isHeaderActionVisible(action)) {\n            <div class=\"relative group\">\n              <button\n                type=\"button\"\n                (click)=\"action.onClick()\"\n                [class]=\"'fieldset-action-btn ' + (action.class || '')\"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></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                {{ action.label }}\n              </span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @if (toggleable() && showToggleIcon()) {\n      <button\n        type=\"button\"\n        (click)=\"onToggle()\"\n        [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n        class=\"shk-fieldset-toggle shrink-0\"\n        [disabled]=\"!toggleable()\"\n      >\n        <svg [lucideIcon]=\"getIcon(collapsed() ? collapsedIcon() : expandedIcon())\" class=\"w-4 h-4 transition-transform\"></svg>\n      </button>\n    }\n  </div>\n\n  @if (!collapsed()) {\n    <div [id]=\"contentId\" class=\"shk-fieldset-content px-4 py-3.5\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.shk-fieldset-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;color:var(--shk-surface-400);transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-fieldset-toggle:hover:not(:disabled){background-color:var(--shk-surface-100);color:var(--shk-surface-700)}.shk-fieldset-toggle:disabled{cursor:default}.shk-fieldset-toggle svg{width:1rem!important;height:1rem!important}.fieldset-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:.375rem;border-radius:.5rem;color:var(--shk-primary-600);transition:background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}.fieldset-action-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent);color:var(--shk-primary-700)}.fieldset-action-btn:disabled{opacity:.4;cursor:not-allowed}.fieldset-action-btn svg{width:.875rem!important;height:.875rem!important}.shk-fieldset-content{animation:shk-fieldset-fade .25s ease-out}@keyframes shk-fieldset-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], showToggleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], customTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplates", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], expand: [{ type: i0.Output, args: ["expand"] }], collapse: [{ type: i0.Output, args: ["collapse"] }] } });
 
-const icons = {
-    check: LucideCheck,
-    'chevron-left': LucideChevronLeft,
-    'chevron-right': LucideChevronRight,
-    'arrow-left': LucideArrowLeft,
-    x: LucideX,
-    'loader-circle': LucideLoaderCircle,
-    'file-contract': LucideScrollText,
-    building: LucideBuilding,
-    'user-round': LucideUserRound,
-    info: LucideInfo,
-    'clipboard-check': LucideClipboardCheck,
-    package: LucidePackage,
-    hotel: LucideHotel,
-    map: LucideMap,
-    tag: LucideTag,
-    utensils: LucideUtensils,
-    coins: LucideCoins,
-    'sticky-note': LucideStickyNote,
-    'circle-exclamation': LucideCircleAlert,
-    'circle-alert': LucideCircleAlert,
-};
-function getIcon(name) {
-    return icons[name] ?? LucideChevronRight;
-}
 /** Declares a step's content template: <ng-template shkWizardStepContent="stepId">…</ng-template>. */
 class ShkWizardStepContent {
     constructor(templateRef) {
@@ -3876,9 +4453,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { stepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shkWizardStepContent", required: true }] }] } });
 let wizardCounter = 0;
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Multi-step wizard with a progress stepper, header, footer actions and
+ * content templates declared with `shkWizardStepContent`.
+ */
 class WizardComponent {
     constructor() {
-        this.getIcon = getIcon;
+        this.getIcon = (name) => getIcon(name, LucideChevronRight);
         /** Steps definition shown in the stepper and used to resolve step content. */
         this.steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         /** Active step id. Two-way bindable with [(currentStep)]. Null resolves to the first step. */
@@ -4004,6 +4590,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'shk-wizard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, LucideDynamicIcon], template: "<div class=\"min-h-full bg-transparent\">\n\n  <!-- ============ Sticky Header + Stepper ============ -->\n  @if (showHeader()) {\n    <div\n      class=\"sticky top-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4\">\n        <div class=\"flex items-center gap-4 mb-4\">\n          @if (showBackButton()) {\n            <button\n              type=\"button\"\n              (click)=\"back.emit()\"\n              [attr.aria-label]=\"backTooltip()\"\n              [attr.title]=\"backTooltip()\"\n              class=\"shk-wizard-icon-btn shrink-0\"\n            >\n              <svg [lucideIcon]=\"getIcon('arrow-left')\" class=\"w-4 h-4\"></svg>\n            </button>\n          }\n          <div class=\"flex-1 min-w-0 flex items-center gap-2.5\">\n            @if (headerIcon()) {\n              <span class=\"w-9 h-9 rounded-lg _shk-bg-primary-soft _shk-text-primary flex items-center justify-center shrink-0\">\n                <svg [lucideIcon]=\"getIcon(headerIcon())\" class=\"w-4 h-4\"></svg>\n              </span>\n            }\n            <div class=\"min-w-0\">\n              <h1 class=\"text-xl font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)] truncate\">\n                {{ headerTitle() }}\n              </h1>\n              @if (headerSubtitle()) {\n                <p class=\"text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mt-0.5 truncate\">\n                  {{ headerSubtitle() }}\n                </p>\n              }\n            </div>\n          </div>\n          <ng-content select=\"[shkWizardHeaderActions]\"></ng-content>\n        </div>\n\n        <!-- Stepper -->\n        @if (showStepper() && steps().length > 1) {\n          <div class=\"flex items-center gap-2 w-full max-w-3xl mx-auto\">\n            @for (step of steps(); track step.id; let i = $index, last = $last) {\n              <div class=\"flex items-center gap-3 shrink-0\">\n                <button\n                  type=\"button\"\n                  (click)=\"goTo(step.id)\"\n                  [disabled]=\"!stepperClickable() || currentIndex() < i\"\n                  [attr.aria-label]=\"step.label\"\n                  class=\"shk-wizard-stepper-dot\"\n                  [class._shk-bg-primary]=\"currentIndex() > i || currentIndex() === i\"\n                  [class.text-white]=\"currentIndex() > i || currentIndex() === i\"\n                  [class._shk-bg-surface-200]=\"currentIndex() < i\"\n                  [class._shk-text-surface-500]=\"currentIndex() < i\"\n                  [class.cursor-pointer]=\"stepperClickable() && currentIndex() >= i\"\n                  [class.cursor-default]=\"!stepperClickable() || currentIndex() < i\"\n                >\n                  @if (currentIndex() > i) {\n                    <svg [lucideIcon]=\"getIcon(step.icon || 'check')\" class=\"w-4 h-4\"></svg>\n                  } @else if (step.icon) {\n                    <svg [lucideIcon]=\"getIcon(step.icon)\" class=\"w-4 h-4\"></svg>\n                  } @else {\n                    {{ i + 1 }}\n                  }\n                </button>\n                <span\n                  class=\"text-sm font-semibold transition-colors whitespace-nowrap hidden sm:inline\"\n                  [class._shk-text-surface-800]=\"currentIndex() === i\"\n                  [class._shk-text-surface-500]=\"currentIndex() !== i\"\n                  [class.dark:[color:var(--shk-surface-800)]]=\"currentIndex() === i\"\n                  [class.dark:[color:var(--shk-surface-500)]]=\"currentIndex() !== i\"\n                >\n                  {{ step.label }}\n                </span>\n              </div>\n\n              @if (!last) {\n                <div class=\"flex-1 h-0.5 _shk-bg-surface-200 dark:[background-color:var(--shk-surface-200)] relative overflow-hidden rounded-full\">\n                  <div\n                    class=\"absolute inset-y-0 left-0 _shk-bg-primary transition-all duration-300\"\n                    [class.w-full]=\"currentIndex() > i\"\n                    [class.w-0]=\"currentIndex() <= i\"\n                  ></div>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Active step content ============ -->\n  <div class=\"w-full px-4 sm:px-6 lg:px-8 py-6 pb-28\">\n    @if (currentIndex() >= 0) {\n      @if (getStepTemplate(steps()[currentIndex()].id); as tpl) {\n        <div class=\"shk-wizard-fade\" [style.view-transition-name]=\"'shk-wizard-step'\">\n          <ng-container\n            *ngTemplateOutlet=\"tpl; context: { step: currentStepObj(), index: currentIndex() }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\">\n          No hay contenido definido para el paso \u00AB{{ steps()[currentIndex()].label }}\u00BB.\n        </p>\n      }\n    }\n  </div>\n\n  <!-- ============ Sticky Footer ============ -->\n  @if (showFooter() && steps().length > 0) {\n    <div\n      class=\"sticky bottom-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-t _shk-border dark:[border-color:var(--shk-surface-200)] shadow-[0_-4px_12px_rgba(0,0,0,0.04)] mt-8\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-end gap-3\">\n        @if (showStepCounter()) {\n          <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mr-auto\">\n            {{ stepCounterPrefix() }} {{ currentIndex() + 1 }} / {{ steps().length }}\n          </span>\n        }\n\n        @if (isFirstStep()) {\n          @if (showCancel()) {\n            <button type=\"button\" (click)=\"cancel.emit()\" class=\"shk-wizard-btn-secondary\">\n              @if (cancelIcon()) {\n                <svg [lucideIcon]=\"getIcon(cancelIcon())\" class=\"w-4 h-4\"></svg>\n              }\n              {{ cancelLabel() }}\n            </button>\n          }\n        } @else {\n          <button type=\"button\" (click)=\"onPrev()\" class=\"shk-wizard-btn-secondary\">\n            <svg [lucideIcon]=\"getIcon(prevIcon())\" class=\"w-4 h-4\"></svg>\n            {{ prevLabel() }}\n          </button>\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"onPrimary()\"\n          [disabled]=\"primaryDisabled() || primaryLoading()\"\n          class=\"shk-wizard-btn-primary\"\n        >\n          @if (primaryLoading()) {\n            <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 shk-wizard-spin\"></svg>\n          } @else {\n            @if (primaryActionIcon()) {\n              <svg [lucideIcon]=\"getIcon(primaryActionIcon())\" class=\"w-4 h-4\"></svg>\n            }\n          }\n          {{ primaryActionLabel() }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.shk-wizard-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:var(--shk-surface-600);transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-icon-btn:hover:not(:disabled){background-color:var(--shk-surface-100);color:var(--shk-surface-800)}.shk-wizard-icon-btn:disabled{cursor:default}.shk-wizard-icon-btn svg{width:1rem!important;height:1rem!important}.shk-wizard-stepper-dot{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:9999px;font-size:.875rem;font-weight:700;flex-shrink:0;transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-stepper-dot svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--shk-surface-700);background-color:transparent;border:1px solid var(--shk-surface-200);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-btn-secondary:hover:not(:disabled){background-color:var(--shk-surface-100);border-color:var(--shk-surface-300);color:var(--shk-surface-900)}.shk-wizard-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.shk-wizard-btn-secondary svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#fff;background-color:var(--shk-primary-600);box-shadow:0 6px 20px -6px color-mix(in srgb,var(--shk-primary-600) 55%,transparent);transition:background-color .15s ease-in-out,opacity .15s ease-in-out}.shk-wizard-btn-primary:hover:not(:disabled){background-color:var(--shk-primary-700)}.shk-wizard-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.shk-wizard-btn-primary svg{width:1rem!important;height:1rem!important}.shk-wizard-spin{animation:shk-wizard-spin .8s linear infinite}@keyframes shk-wizard-spin{to{transform:rotate(360deg)}}.shk-wizard-fade{animation:shk-wizard-fade .25s ease-out}@keyframes shk-wizard-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }, { type: i0.Output, args: ["currentStepChange"] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], backTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "backTooltip", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], showStepper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepper", required: false }] }], stepperClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperClickable", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showStepCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepCounter", required: false }] }], stepCounterPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepCounterPrefix", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], advanceOnNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "advanceOnNext", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], prevIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevIcon", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], finishIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLoading", required: false }] }], primaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryDisabled", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], finish: [{ type: i0.Output, args: ["finish"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], stepContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ShkWizardStepContent), { isSignal: true }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Placeholder block shown while content is loading. */
 class SkeletonComponent {
     constructor() {
@@ -4064,12 +4655,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [":host{display:block}.shk-skeleton{position:relative;overflow:hidden;background-color:var(--shk-skeleton-bg)}.shk-skeleton-circle{border-radius:9999px}.shk-skeleton-animate-wave:after{content:\"\";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent,var(--shk-skeleton-highlight) 50%,transparent);animation:shk-skeleton-wave 1.6s ease-in-out infinite}.shk-skeleton-animate-pulse{animation:shk-skeleton-pulse 2s ease-in-out infinite}@keyframes shk-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes shk-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}\n"] }]
         }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Generic button with icon, severity variants, loading state and sizes. */
 class ButtonComponent {
     constructor() {
         /** Text shown inside the button. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Optional leading lucide icon name. */
+        /** Optional leading lucide icon name or component. */
         this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /** Position of the icon relative to the label. */
         this.iconPos = input('left', ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
@@ -4105,7 +4701,7 @@ class ButtonComponent {
         this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
         /** Emitted on click with the original MouseEvent. */
         this.onClick = output();
-        this.getIcon = getIcon$6;
+        this.getIcon = getIcon;
         this.iconOnly = computed(() => !this.label() && !!this.icon(), ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4196,6 +4792,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [":host{display:inline-block}.shk-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:500;line-height:1.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .15s ease-in-out}.shk-button:focus-visible{outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-button:disabled{opacity:.55;cursor:not-allowed}.shk-button-icon{width:1rem;height:1rem;flex-shrink:0}.shk-button-primary{--shk-btn-bg: var(--shk-primary-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-600)}.shk-button-secondary{--shk-btn-bg: var(--shk-surface-100);--shk-btn-color: var(--shk-surface-700);--shk-btn-border: var(--shk-surface-200)}.shk-button-success{--shk-btn-bg: var(--shk-success-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-success-600)}.shk-button-info{--shk-btn-bg: var(--shk-info-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-info-600)}.shk-button-warning{--shk-btn-bg: var(--shk-warning-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-warning-600)}.shk-button-danger{--shk-btn-bg: var(--shk-error-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-error-600)}.shk-button-help{--shk-btn-bg: var(--shk-primary-500);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-500)}.shk-button-contrast{--shk-btn-bg: var(--shk-surface-900);--shk-btn-color: var(--shk-surface-50);--shk-btn-border: var(--shk-surface-900)}.shk-button{background-color:var(--shk-btn-bg);color:var(--shk-btn-color);border-color:var(--shk-btn-border)}.shk-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-bg) 88%,#000000)}.shk-button-outlined,.shk-button-text{background-color:transparent}.shk-button-outlined{border-color:var(--shk-btn-color)}.shk-button-text{border-color:transparent}.shk-button-text:hover:not(:disabled),.shk-button-outlined:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-color) 12%,transparent)}.shk-button-raised{box-shadow:0 1px 2px #0000000f,0 4px 8px #0000001a}.shk-button-rounded{border-radius:9999px}.shk-button-sm{padding:.375rem .75rem;font-size:.8125rem}.shk-button-sm .shk-button-icon{width:.875rem;height:.875rem}.shk-button-lg{padding:.75rem 1.5rem;font-size:1rem}.shk-button-lg .shk-button-icon{width:1.25rem;height:1.25rem}.shk-button-icon-only{padding:.5rem}.shk-button-sm.shk-button-icon-only{padding:.375rem}.shk-button-lg.shk-button-icon-only{padding:.75rem}.shk-button-icon-right{flex-direction:row-reverse}.shk-button-icon-top{flex-direction:column}.shk-button-icon-bottom{flex-direction:column-reverse}.shk-button-loading .shk-button-spin{animation:shk-button-spin 1s linear infinite}@keyframes shk-button-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** SVG radial knob with drag and keyboard support. Implements ControlValueAccessor. */
 class KnobComponent {
     constructor() {
@@ -4450,6 +5051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     ], styles: [".shk-knob{position:relative;display:inline-block}.shk-knob-svg{display:block;touch-action:none}.shk-knob-svg-focusable{cursor:pointer;outline:none}.shk-knob-svg-focusable:focus-visible{border-radius:9999px;outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-knob-disabled{opacity:.55}.shk-knob-disabled .shk-knob-svg{cursor:not-allowed}.shk-knob-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.125rem;font-weight:600;color:var(--shk-surface-800);pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], rangeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeColor", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], end: [{ type: i0.Output, args: ["end"] }], knobSvg: [{ type: i0.ViewChild, args: ['knobSvg', { isSignal: true }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Circular indeterminate spinner. */
 class LoadingSpinnerComponent {
     constructor() {
@@ -4512,6 +5118,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.shk-loading-spinner{display:inline-block}.shk-loading-spinner-circle{width:100%;height:100%;border-radius:9999px;border-style:solid;border-color:color-mix(in srgb,var(--shk-primary-600) 20%,transparent);border-top-color:var(--shk-primary-600);animation:shk-loading-spin .8s linear infinite}.shk-loading-spinner-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Progress bar with an indeterminate sweep or a determinate percentage. */
 class LoadingBarComponent {
     constructor() {
@@ -4525,6 +5136,7 @@ class LoadingBarComponent {
         this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /** Renders fully rounded ends. */
         this.rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /** Fill width/style for the determinate mode, empty for indeterminate. */
         this.fillStyle = computed(() => {
             if (this.indeterminate())
                 return {};
@@ -4571,6 +5183,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [".shk-loading-bar{width:100%;position:relative;overflow:hidden;background-color:var(--shk-surface-200)}.shk-loading-bar-fill{height:100%;background-color:var(--shk-primary-600);transition:width .3s ease-in-out}.shk-loading-bar-indeterminate .shk-loading-bar-fill{width:40%;animation:shk-loading-bar-sweep 1.2s ease-in-out infinite}@keyframes shk-loading-bar-sweep{0%{transform:translate(-100%)}to{transform:translate(350%)}}\n"] }]
         }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Wraps content and shows a centered spinner over it while `visible` is true. */
 class LoadingOverlayComponent {
     constructor() {
@@ -4619,6 +5236,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [":host{display:block}.shk-loading-overlay{position:relative;min-height:1.5rem}.shk-loading-overlay-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}.shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#ffffffa6}.dark .shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#0000008c}.shk-loading-overlay-dark .shk-loading-overlay-layer{background-color:#0006}\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Bouncing dots loading indicator. */
 class LoadingDotsComponent {
     constructor() {
@@ -4630,6 +5252,7 @@ class LoadingDotsComponent {
         this.count = input(3, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
         /** Optional text shown next to the dots. */
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Array of dot indices to render based on the `count` input. */
         this.dots = computed(() => Array.from({ length: Math.max(1, this.count()) }), ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingDotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4674,11 +5297,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [":host{display:inline-flex;align-items:center;gap:.5rem}.shk-loading-dots{display:inline-flex;align-items:center;gap:.25rem}.shk-loading-dot{border-radius:9999px;background-color:var(--shk-primary-600);animation:shk-loading-dots-bounce 1.4s ease-in-out infinite}.shk-loading-dots-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-dots-bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
-/** Shared state between shk-tabs and its projected tab/tabpanel children. */
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Shared state between shk-abs and its tab/tabpanel children. */
 class TabsService {
     constructor() {
+        /** Currently active tab value. */
         this.active = signal(undefined, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
+    /** Sets the active tab to the given value. */
     select(value) {
         this.active.set(value);
     }
@@ -4689,6 +5319,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Container for tab panels. Renders its projected shk-tablist/shh-tab content. */
 class TabsComponent {
     constructor() {
@@ -4696,10 +5331,13 @@ class TabsComponent {
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Allows the tab header to scroll horizontally when it overflows. */
         this.scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+        /** Shared service used to sync the active tab with the children. */
         this.tabsSvc = inject(TabsService);
+        // Push external value changes into the shared service.
         effect(() => {
             this.tabsSvc.active.set(this.value());
         });
+        // Reflect child-side selections back into the two-way value.
         effect(() => {
             const active = this.tabsSvc.active();
             if (active !== this.value()) {
@@ -4729,6 +5367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Horizontal bar that contains the shk-tab headers. */
 class TablistComponent {
     constructor() {
@@ -4765,6 +5408,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [".shk-tablist{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;border-bottom:1px solid var(--shk-surface-200)}.dark .shk-tablist{border-bottom-color:var(--shk-surface-200)}.shk-tablist-scrollable{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.shk-tablist-scrollable::-webkit-scrollbar{height:6px}.shk-tablist-scrollable::-webkit-scrollbar-thumb{background:var(--shk-surface-300);border-radius:9999px}\n"] }]
         }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** A single tab header. Clicking it activates the matching panel. */
 class TabComponent {
     constructor() {
@@ -4774,9 +5422,12 @@ class TabComponent {
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /** Extra CSS classes. */
         this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        /** Shared service used to read the active tab value. */
         this.tabsSvc = inject(TabsService);
+        /** Whether this tab is the active one. */
         this.active = computed(() => this.tabsSvc.active() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
+    /** Activates this tab through the shared service. */
     select() {
         if (this.disabled())
             return;
@@ -4818,6 +5469,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `, styles: [".shk-tab{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:var(--shk-surface-500);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}.shk-tab:hover:not(:disabled):not(.shk-tab-active){color:var(--shk-surface-800)}.shk-tab-active{color:var(--shk-primary-600);border-bottom-color:var(--shk-primary-600);font-weight:600}.dark .shk-tab-active{color:var(--shk-primary-400);border-bottom-color:var(--shk-primary-400)}.shk-tab:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Container that groups the shk-tabpanel content sections. */
 class TabpanelsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabpanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4841,12 +5497,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
 /** Content section shown only while its value is the active tab. */
 class TabPanelComponent {
     constructor() {
         /** Value that links this panel to its tab. */
         this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Shared service used to read the active tab value. */
         this.tabsSvc = inject(TabsService);
+        /** Whether this panel is the active one. */
         this.active = computed(() => this.tabsSvc.active() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4874,17 +5537,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
+/**
+ * Global breadcrumb state. Components and pages write the current trail via
+ * `set()` and observatories read it through `breadcrumbs$`.
+ */
 class BreadcrumbService {
     constructor() {
+        /** Internal buffer holding the current breadcrumb trail. */
         this.breadcrumbsSubject = new BehaviorSubject([]);
+        /** Observable emitted with the latest breadcrumb trail. */
         this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
     }
+    /** Replaces the whole breadcrumb trail. */
     set(items) {
         this.breadcrumbsSubject.next(items);
     }
+    /** Empties the breadcrumb trail. */
     clear() {
         this.breadcrumbsSubject.next([]);
     }
+    /** Returns the breadcrumb trail currently held (snapshot). */
     getCurrent() {
         return this.breadcrumbsSubject.getValue();
     }
@@ -4898,13 +5570,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Navigation breadcrumb showing the current page hierarchy. Can be fed with
+ * static items or driven by the shared BreadcrumbService.
+ */
 class BreadcrumbComponent {
     constructor() {
         this.breadcrumbService = inject(BreadcrumbService);
+        /** Static list of breadcrumb items. Takes precedence over the service items. */
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Visual separator between items: 'chevron', 'slash' or 'arrow'. */
         this.separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        /** When true, subscribes to the BreadcrumbService to resolve items. */
         this.useService = input(true, ...(ngDevMode ? [{ debugName: "useService" }] : /* istanbul ignore next */ []));
+        /** Items received from the BreadcrumbService. */
         this.serviceItems = signal([], ...(ngDevMode ? [{ debugName: "serviceItems" }] : /* istanbul ignore next */ []));
+        /** Final items: static `items` if provided, otherwise the service items. */
         this.resolvedItems = computed(() => {
             const staticItems = this.items();
             if (staticItems.length > 0)
@@ -4913,11 +5599,13 @@ class BreadcrumbComponent {
                 return this.serviceItems();
             return [];
         }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+        /** Active subscription to the breadcrumb stream. */
         this.serviceSub = null;
         effect(() => {
             this.resolvedItems();
         });
     }
+    /** Subscribes to the BreadcrumbService when `useService` is enabled. */
     ngOnInit() {
         if (this.useService()) {
             this.serviceSub = this.breadcrumbService.breadcrumbs$.subscribe((items) => {
@@ -4925,6 +5613,7 @@ class BreadcrumbComponent {
             });
         }
     }
+    /** Unsubscribes from the breadcrumb stream to avoid leaks. */
     ngOnDestroy() {
         this.serviceSub?.unsubscribe();
     }