shirkasoft-ui-components 1.1.1 → 1.1.3

package/fesm2022/shirkasoft-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common';
-import { CommonModule, isPlatformBrowser } 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 * as i2 from '@angular/forms';
@@ -7,9 +7,9 @@ import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormControl, FormG
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@jsverse/transloco';
 import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
-import { LucideEyeOff, LucideEye, LucideSearch, LucideDynamicIcon, LucideX, LucideTriangleAlert, LucideInfo, LucideCircleX, LucideCheck, LucideLoader, LucideTrash2, LucideLoaderCircle, LucideMinimize2, LucideMaximize2, LucideChevronRight, LucideChevronLeft, LucideChevronDown, LucideFile, LucideUpload, LucideList, LucideWarehouse, LucideUserCog, LucideShieldCheck, LucideCalculator, LucidePercent, LucideDollarSign, LucideLineChart, LucideBot, LucideReceipt, LucideUsers, LucideTruck, LucideTag, LucideTags, LucideBox, LucidePackage, LucideLandmark, LucideBuilding, LucideUserPlus, LucideUserRoundX, LucideUserCheck, LucideUser, LucideLogOut, LucideSettings, LucideClock, LucideStar, LucideVideo, LucidePlay, LucideShare2, LucideCopy, LucideCircleCheck, LucideArchive, LucideFileText, LucidePresentation, LucideFileSpreadsheet, LucideRefreshCw, LucideCirclePlus, LucidePlus, LucideDownload, LucideToggleLeft, LucideToggleRight, LucideUserPen, LucideKey, LucidePencil, LucideFunnel, LucideInbox, LucideArrowUpDown, LucideArrowDown, LucideArrowUp, LucideChevronsRight, LucideChevronsLeft, LucideBarChart3, LucideMenu, LucideBuilding2, LucideLayoutDashboard, LucideHome, LucideHouse, LucideBanknote, LucidePanelRight, LucideGlobe, LucideCalendarCheck, LucideCalendar, LucideSliders, LucideWallet, LucideBriefcase, LucideIdCard, LucideCreditCard, LucideChartLine, LucideChartPie, LucidePuzzle, LucideLayers, LucideShield, LucideUserRound, LucideMapPin, LucideUtensils, LucideShip, LucideBus, LucideMountain, LucideCar, LucideTicket, LucideHotel, LucideCalendarDays, LucideCircleHelp, LucideCircleAlert, LucideStickyNote, LucideCoins, LucideMap, LucideClipboardCheck, LucideScrollText, LucideArrowLeft } from '@lucide/angular';
-import { Router } from '@angular/router';
-import { Subject, debounceTime } from 'rxjs';
+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 { Router, RouterLink } from '@angular/router';
+import { Subject, debounceTime, BehaviorSubject } from 'rxjs';
 import { Chart, registerables } from 'chart.js';
 
 const icons$9 = {
@@ -38,7 +38,7 @@ class TextFieldComponent {
         this.textAreaHeight = input('h-28', ...(ngDevMode ? [{ debugName: "textAreaHeight" }] : /* istanbul ignore next */ []));
         this.searchMode = input(false, ...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
         this.displayValue = input('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-        this.autocomplete = input('new-password', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
         this.searchButtonClick = output();
         this.getIcon = (name) => icons$9[name] ?? LucideEye;
         this.inputElement = viewChild('input', ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
@@ -2149,6 +2149,276 @@ 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',
+    info: '_shk-tag-info',
+    warning: '_shk-tag-warn',
+    danger: '_shk-tag-danger',
+    contrast: '_shk-tag-contrast',
+};
+/** Small label used to highlight a value, status or category. */
+class TagComponent {
+    constructor() {
+        /** Text shown inside the tag. */
+        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Color variant. Defaults to 'secondary'. */
+        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. */
+        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.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;
+            const radius = this.rounded() ? 'rounded-full' : 'rounded-md';
+            return `${base} ${radius} ${severity} ${this.styleClass()}`.trim();
+        }, ...(ngDevMode ? [{ debugName: "tagClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TagComponent, isStandalone: true, selector: "shk-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="tagClass()" [style]="style()">
+      @if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-tag-icon"></svg>
+      }
+      @if (value() !== undefined && value() !== null) {
+        <span>{{ value() }}</span>
+      }
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, styles: [".shk-tag-icon{width:.875rem;height:.875rem;flex-shrink:0}\n"], dependencies: [{ 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: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideDynamicIcon], template: `
+    <span [class]="tagClass()" [style]="style()">
+      @if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-tag-icon"></svg>
+      }
+      @if (value() !== undefined && value() !== null) {
+        <span>{{ value() }}</span>
+      }
+      <ng-content></ng-content>
+    </span>
+  `, styles: [".shk-tag-icon{width:.875rem;height:.875rem;flex-shrink:0}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
+
+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.
+ */
+class TooltipComponent {
+    constructor() {
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.mode = input('hover', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.host = inject((ElementRef));
+        this.document = inject(DOCUMENT);
+        this.tooltipEl = null;
+        this.cleanup = null;
+    }
+    onMouseEnter() {
+        if (!this.text())
+            return;
+        const trigger = this.host.nativeElement.querySelector('.shk-tooltip-trigger');
+        if (!trigger)
+            return;
+        this.show(trigger);
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    show(trigger) {
+        this.removeTooltip();
+        const el = this.document.createElement('span');
+        el.className = 'shk-tooltip-dynamic';
+        el.textContent = this.text();
+        Object.assign(el.style, {
+            position: 'fixed',
+            zIndex: TOOLTIP_Z_INDEX,
+            backgroundColor: 'var(--shk-tooltip-bg, #27272a)',
+            color: 'var(--shk-tooltip-text, #fff)',
+            padding: '4px 8px',
+            borderRadius: '6px',
+            fontSize: '12px',
+            lineHeight: '1.4',
+            whiteSpace: 'normal',
+            maxWidth: 'min(80vw, 22rem)',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            pointerEvents: 'none',
+            opacity: '0',
+            transition: 'opacity 0.15s ease',
+        });
+        this.document.body.appendChild(el);
+        this.tooltipEl = el;
+        const place = () => {
+            const rect = trigger.getBoundingClientRect();
+            const w = el.offsetWidth;
+            const h = el.offsetHeight;
+            const { left, top } = this.computePosition(rect, w, h);
+            el.style.left = `${left}px`;
+            el.style.top = `${top}px`;
+        };
+        place();
+        requestAnimationFrame(() => {
+            if (this.tooltipEl === el) {
+                el.style.opacity = '1';
+            }
+        });
+        const onScrollOrResize = () => place();
+        window.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        this.cleanup = () => {
+            window.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+        };
+    }
+    computePosition(rect, width, height) {
+        const off = this.offset();
+        const viewportW = this.document.defaultView?.innerWidth ?? 0;
+        const viewportH = this.document.defaultView?.innerHeight ?? 0;
+        let x;
+        let y;
+        if (this.position() === 'right') {
+            x = rect.right + off;
+            y = rect.top + rect.height / 2 - height / 2;
+        }
+        else if (this.position() === 'bottom') {
+            x = rect.left + rect.width / 2 - width / 2;
+            y = rect.bottom + off;
+        }
+        else {
+            x = rect.left + rect.width / 2 - width / 2;
+            y = rect.top - off - height;
+        }
+        const margin = 4;
+        const left = Math.max(margin, Math.min(x, Math.max(margin, viewportW - width - margin)));
+        const top = Math.max(margin, Math.min(y, Math.max(margin, viewportH - height - margin)));
+        return { left, top };
+    }
+    hide() {
+        if (!this.tooltipEl)
+            return;
+        const el = this.tooltipEl;
+        el.style.opacity = '0';
+        this.tooltipEl = null;
+        setTimeout(() => {
+            el.remove();
+        }, 150);
+    }
+    removeTooltip() {
+        this.cleanup?.();
+        this.cleanup = null;
+        this.tooltipEl?.remove();
+        this.tooltipEl = null;
+    }
+    ngOnDestroy() {
+        this.removeTooltip();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: `
+    <div class="shk-tooltip-trigger inline-flex">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tooltip',
+                    standalone: true,
+                    template: `
+    <div class="shk-tooltip-trigger inline-flex">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 const icons$3 = {
     'chevrons-left': LucideChevronsLeft,
     'chevrons-right': LucideChevronsRight,
@@ -2230,12 +2500,32 @@ function getIcon$5(name) {
     return icons$3[name] ?? LucidePlus;
 }
 class TableComponent {
+    getColumnWidth(col) {
+        return col.width || this.DEFAULT_COLUMN_WIDTH;
+    }
     constructor() {
         this.fb = inject(FormBuilder);
         this.cdr = inject(ChangeDetectorRef);
         this.transloco = inject(TranslocoService);
+        this.destroyRef = inject(DestroyRef);
         this.getIcon = getIcon$5;
-        this.actionsHeaderLabel = toSignal(this.transloco.selectTranslate('common.actions'), { initialValue: 'Acciones' });
+        /**
+         * 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.
+         */
+        this.DEFAULT_COLUMN_WIDTH = '140px';
+        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.
+        this.currentLang = toSignal(this.transloco.langChanges$, {
+            initialValue: this.transloco.getActiveLang(),
+        });
         this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.rowsPerPage = input(10, ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
@@ -2273,18 +2563,21 @@ class TableComponent {
         this.rowsPerPageLocal = signal(10, ...(ngDevMode ? [{ debugName: "rowsPerPageLocal" }] : /* istanbul ignore next */ []));
         this.totalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalRecords() / this.rowsPerPageLocal())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
         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.
         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.
+        this.lastFilterFieldsSignature = '';
+        this.columnFilterSubscriptions = [];
         this.columnsWithActions = computed(() => {
             const columnsArray = this.columns();
             const showAction = this.showActionRow();
             const rowActionsArray = this.rowActions();
             const translatedHeader = this.actionsHeaderLabel();
             if (showAction && rowActionsArray.length > 0) {
-                const actionsWidth = rowActionsArray.length <= 2
-                    ? '110px'
-                    : rowActionsArray.length <= 3
-                        ? '130px'
-                        : '170px';
+                const actionsWidth = rowActionsArray.length <= 2 ? '110px' : rowActionsArray.length <= 3 ? '130px' : '170px';
                 return [
                     {
                         field: 'actions',
@@ -2303,25 +2596,35 @@ class TableComponent {
         this.effectiveDisplayedData = computed(() => {
             return this.serverSide() ? this.data() : this.displayedData();
         }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedData" }] : /* istanbul ignore next */ []));
-        this.activeFilters = computed(() => {
-            const form = this.columnFiltersForm;
-            if (!form)
-                return {};
-            const active = {};
-            Object.keys(form.controls).forEach((field) => {
-                const value = form.get(field)?.value;
-                if (value !== null && value !== undefined && value !== '') {
-                    active[field] = value;
-                }
-            });
-            return active;
-        }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+        // FIX #14: pageReport ahora es un computed reactivo (incluye idioma como
+        // dependencia) en vez de un método imperativo llamado desde el template.
+        this.pageReport = computed(() => {
+            this.currentLang(); // fuerza recálculo al cambiar de idioma
+            const total = this.effectiveTotalRecords();
+            if (total === 0) {
+                return this.transloco.translate('table.pageReport', {
+                    from: 0,
+                    to: 0,
+                    total: 0,
+                });
+            }
+            const from = this.first() + 1;
+            const to = Math.min(this.first() + this.rowsPerPageLocal(), total);
+            return this.transloco.translate('table.pageReport', { from, to, total });
+        }, ...(ngDevMode ? [{ debugName: "pageReport" }] : /* istanbul ignore next */ []));
         this.columnFiltersForm = this.fb.group({});
-        this.filterSubject.pipe(debounceTime(300)).subscribe(() => {
+        this.filterSubject
+            .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             if (this.serverSide()) {
                 this.emitFilterChange();
             }
         });
+        this.searchSubject
+            .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.searchChange.emit(value);
+        });
         effect(() => {
             const newData = this.data();
             untracked(() => {
@@ -2351,14 +2654,6 @@ class TableComponent {
                 });
             }
         });
-        effect(() => {
-            const activeFilters = this.activeFilters();
-            untracked(() => {
-                if (!this.serverSide()) {
-                    this.applyFilters();
-                }
-            });
-        });
         effect(() => {
             const query = this.searchQuery();
             untracked(() => {
@@ -2371,19 +2666,50 @@ class TableComponent {
             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.
+     */
     setupColumnFilters(cols) {
+        const filterableCols = cols.filter((c) => c.filter);
+        const signature = filterableCols.map((c) => `${c.field}:${c.filterType ?? 'text'}`).join('|');
+        if (signature === this.lastFilterFieldsSignature && this.columnFiltersForm) {
+            return;
+        }
+        this.lastFilterFieldsSignature = signature;
+        // Limpiar suscripciones anteriores antes de reconstruir.
+        this.columnFilterSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.columnFilterSubscriptions = [];
+        const previousValues = {};
+        if (this.columnFiltersForm) {
+            Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+                previousValues[field] = this.columnFiltersForm.get(field)?.value;
+            });
+        }
         const filterControls = {};
-        const filterVisibility = {};
-        cols.forEach((col) => {
-            if (col.filter) {
-                filterControls[col.field] = [col.filterType === 'select' ? null : ''];
+        const filterVisibility = { ...this.showFilterInput() };
+        filterableCols.forEach((col) => {
+            const defaultValue = col.filterType === 'select' ? null : '';
+            const preserved = previousValues.hasOwnProperty(col.field)
+                ? previousValues[col.field]
+                : defaultValue;
+            filterControls[col.field] = [preserved];
+            if (!(col.field in filterVisibility)) {
                 filterVisibility[col.field] = false;
             }
         });
         this.columnFiltersForm = this.fb.group(filterControls);
         this.showFilterInput.set(filterVisibility);
         Object.keys(this.columnFiltersForm.controls).forEach((field) => {
-            this.columnFiltersForm.get(field)?.valueChanges.subscribe(() => {
+            const sub = this.columnFiltersForm
+                .get(field)
+                ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
                 this.first.set(0);
                 if (this.serverSide()) {
                     this.filterSubject.next();
@@ -2393,6 +2719,9 @@ class TableComponent {
                 }
                 this.cdr.markForCheck();
             });
+            if (sub) {
+                this.columnFilterSubscriptions.push(sub);
+            }
         });
     }
     emitFilterChange() {
@@ -2476,6 +2805,13 @@ class TableComponent {
             this.updateDisplayedData();
         }
     }
+    /**
+     * 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`.
+     */
     applySort() {
         const field = this.sortField();
         const order = this.sortOrder();
@@ -2485,8 +2821,10 @@ class TableComponent {
         data.sort((a, b) => {
             const va = a[field];
             const vb = b[field];
+            if (va == null && vb == null)
+                return 0;
             if (va == null)
-                return 1;
+                return 1; // nulls siempre al final
             if (vb == null)
                 return -1;
             if (va < vb)
@@ -2501,7 +2839,7 @@ class TableComponent {
         this.searchQuery.set(value);
         this.first.set(0);
         if (this.serverSide()) {
-            this.searchChange.emit(value);
+            this.searchSubject.next(value);
         }
     }
     clearFilter(field) {
@@ -2517,17 +2855,18 @@ class TableComponent {
         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/''.
+     */
+    hasFilterValue(field) {
+        const value = this.columnFiltersForm.get(field)?.value;
+        return value !== null && value !== undefined && value !== '';
+    }
     getPageReport() {
-        const total = this.effectiveTotalRecords();
-        if (total === 0)
-            return this.transloco.translate('table.pageReport', {
-                from: 0,
-                to: 0,
-                total: 0,
-            });
-        const from = this.first() + 1;
-        const to = Math.min(this.first() + this.rowsPerPageLocal(), total);
-        return this.transloco.translate('table.pageReport', { from, to, total });
+        return this.pageReport();
     }
     goToFirst() {
         const rows = this.rowsPerPageLocal();
@@ -2545,9 +2884,7 @@ class TableComponent {
         }
     }
     goToLast() {
-        const total = this.serverSide()
-            ? this.totalRecords()
-            : this.filteredData().length;
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
         const rows = this.rowsPerPageLocal();
         const lastFirst = Math.max(0, Math.ceil(total / rows) * rows - rows);
         this.first.set(lastFirst);
@@ -2591,9 +2928,7 @@ class TableComponent {
         return this.first() + this.rowsPerPageLocal() >= total;
     }
     next() {
-        const total = this.serverSide()
-            ? this.totalRecords()
-            : this.filteredData().length;
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
         const rows = this.rowsPerPageLocal();
         let first = this.first() + rows;
         if (first >= total) {
@@ -2616,9 +2951,7 @@ class TableComponent {
     prev() {
         const rows = this.rowsPerPageLocal();
         let first = this.first() - rows;
-        const total = this.serverSide()
-            ? this.totalRecords()
-            : this.filteredData().length;
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
         if (first < 0) {
             first = 0;
         }
@@ -2640,21 +2973,15 @@ class TableComponent {
         this.goToFirst();
     }
     getRowActionLabel(action, rowData) {
-        return typeof action.label === 'function'
-            ? action.label(rowData)
-            : action.label;
+        return typeof action.label === 'function' ? action.label(rowData) : action.label;
     }
     getRowActionIconName(action, rowData) {
-        return typeof action.icon === 'function'
-            ? action.icon(rowData)
-            : action.icon;
+        return typeof action.icon === 'function' ? action.icon(rowData) : action.icon;
     }
     getRowActionClass(action, rowData) {
         if (!action.class)
             return '';
-        return typeof action.class === 'function'
-            ? action.class(rowData)
-            : action.class;
+        return typeof action.class === 'function' ? action.class(rowData) : action.class;
     }
     isHeaderActionDisabled(action) {
         return action.isDisabled ? action.isDisabled() : false;
@@ -2674,22 +3001,54 @@ class TableComponent {
         const str = String(value);
         return str.length > limit ? str.slice(0, limit) + '\u2026' : str;
     }
-    getTagClass(severity) {
-        switch (severity) {
-            case 'success':
-                return '_shk-bg-green-soft _shk-text-green-600';
-            case 'danger':
-                return '_shk-bg-red-soft _shk-text-red-600';
-            case 'warn':
-                return '_shk-bg-yellow-soft _shk-text-yellow-600';
-            case 'info':
-                return '_shk-bg-blue-soft _shk-text-blue-600';
-            default:
-                return '_shk-bg-surface-100 _shk-text-surface-700 dark:[background-color:var(--shk-surface-700)] dark:[color:var(--shk-surface-300)]';
+    getTagValue(col, rowData) {
+        return col.tagValue ? col.tagValue(rowData) : String(rowData[col.field] ?? '');
+    }
+    getTagSeverity(col, rowData) {
+        const raw = col.tagSeverity ? col.tagSeverity(rowData) : 'secondary';
+        const allowed = ['secondary', 'success', 'info', 'warning', 'danger', 'contrast'];
+        return allowed.includes(raw) ? raw : 'secondary';
+    }
+    getTagRounded(col, rowData) {
+        if (typeof col.tagRounded === 'function')
+            return col.tagRounded(rowData);
+        return col.tagRounded ?? false;
+    }
+    getTagIcon(col, rowData) {
+        if (typeof col.tagIcon === 'function')
+            return col.tagIcon(rowData);
+        return col.tagIcon ?? '';
+    }
+    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.
+     */
+    trackByRow(row, index) {
+        return row?.id ?? row?._id ?? index;
+    }
+    /** FIX accesibilidad: soporte de teclado (Enter/Espacio) para ordenar columnas. */
+    onHeaderKeydown(event, col) {
+        if (col.field === 'actions' || !col.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleSort(col.field);
         }
     }
+    /** FIX accesibilidad: valor aria-sort para el <th> correspondiente. */
+    getAriaSort(col) {
+        if (col.field === 'actions' || !col.sortable)
+            return 'none';
+        if (this.sortField() !== col.field)
+            return 'none';
+        return this.sortOrder() === 1 ? 'ascending' : 'descending';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableComponent, isStandalone: true, selector: "shk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showActionRow: { classPropertyName: "showActionRow", publicName: "showActionRow", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, defaultSortField: { classPropertyName: "defaultSortField", publicName: "defaultSortField", isSignal: true, isRequired: false, transformFunction: null }, defaultSortOrder: { classPropertyName: "defaultSortOrder", publicName: "defaultSortOrder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", pageChange: "pageChange", filterChange: "filterChange", searchChange: "searchChange", filterClick: "filterClick" }, ngImport: i0, template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n              <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n                <svg [lucideIcon]=\"getIcon('search')\" class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"searchQuery()\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n                [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n                class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\n                       focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1\n                       focus:[--tw-ring-color:var(--shk-primary-500)]\"\n              />\n          </div>\n        }\n\n        @if (filters().length > 0) {\n          <div class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\">\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"f.value === activeFilter() ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]' : ''\"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"action.class || 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                (click)=\"action.onClick()\"\n              >\n              @if (action.icon) {\n                <svg\n                  [lucideIcon]=\"getIcon(action.icon)\"\n                  class=\"w-3.5 h-3.5\"\n                ></svg>\n              }\n              {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n\n    </div>\n  }\n\n  <div\n    class=\"card p-0 overflow-hidden\"\n    [class.shadow-lg]=\"hasShadow()\"\n  >\n\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table class=\"w-full\">\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.width || 'auto'\"\n                [style.min-width]=\"col.field === 'actions' ? '130px' : 'auto'\"\n                class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <div class=\"relative group\">\n                          @if (sortField() === col.field) {\n                            <svg [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-primary\"></svg>\n                          } @else {\n                            <svg [lucideIcon]=\"getIcon('arrow-up-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                          }\n                            <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ 'table.tooltips.sort' | transloco }}\n                            </span>\n                        </div>\n                      }\n                      @if (col.filter) {\n                        <div class=\"relative group\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                          <svg\n                            [lucideIcon]=\"getIcon('filter')\"\n                            class=\"w-3.5 h-3.5\"\n                            [class._shk-text-primary]=\"columnFiltersForm.get(col.field)?.value\"\n                          ></svg>\n                          <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                            {{ 'table.tooltips.filter' | transloco }}\n                          </span>\n                        </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"mt-2\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <input\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\n                                   focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\n                                   placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"col.filterPlaceholder || ('common.search_placeholder' | transloco)\"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <select\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">A/D</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (columnFiltersForm.get(col.field)?.value && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex items-center justify-center\">\n                  <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-6 h-6 animate-spin _shk-text-primary\"></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\">\n                    <svg [lucideIcon]=\"getIcon('inbox')\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                  </div>\n                  <p class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track $index) {\n              <tr class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] whitespace-nowrap\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <span\n                          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                          [class]=\"getTagClass(col.tagSeverity ? col.tagSeverity(rowData) : undefined)\"\n                          [style]=\"col.tagStyle ? col.tagStyle(rowData) : undefined\"\n                        >\n                          {{ col.tagValue ? col.tagValue(rowData) : rowData[col.field] }}\n                        </span>\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of rowActions(); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <button\n                                type=\"button\"\n                                (click)=\"action.onClick(rowData)\"\n                                [class]=\"'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' + getRowActionClass(action, rowData)\"\n                                [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                              <span class=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ getRowActionLabel(action, rowData) }}\n                              </span>\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n\n    <div class=\"flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">{{ getPageReport() }}</div>\n      <div class=\"flex items-center gap-0.5\">\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ currentPage() }} / {{ totalPages() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        <span>{{ 'table.rows' | transloco }}</span>\n        <select\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:nowrap;text-overflow:ellipsis}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll-wrapper table{table-layout:fixed;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableComponent, isStandalone: true, selector: "shk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showActionRow: { classPropertyName: "showActionRow", publicName: "showActionRow", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, defaultSortField: { classPropertyName: "defaultSortField", publicName: "defaultSortField", isSignal: true, isRequired: false, transformFunction: null }, defaultSortOrder: { classPropertyName: "defaultSortOrder", publicName: "defaultSortOrder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", pageChange: "pageChange", filterChange: "filterChange", searchChange: "searchChange", filterClick: "filterClick" }, ngImport: i0, template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n  @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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: TagComponent, selector: "shk-tag", inputs: ["value", "severity", "rounded", "icon", "style", "styleClass"] }, { kind: "component", type: TooltipComponent, selector: "shk-tooltip", inputs: ["text", "position", "mode", "offset"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2698,118 +3057,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         ReactiveFormsModule,
                         TranslocoModule,
                         LucideDynamicIcon,
-                    ], template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n              <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n                <svg [lucideIcon]=\"getIcon('search')\" class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"searchQuery()\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n                [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n                class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\n                       _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\n                       focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1\n                       focus:[--tw-ring-color:var(--shk-primary-500)]\"\n              />\n          </div>\n        }\n\n        @if (filters().length > 0) {\n          <div class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\">\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"f.value === activeFilter() ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]' : ''\"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"action.class || 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed'\"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                (click)=\"action.onClick()\"\n              >\n              @if (action.icon) {\n                <svg\n                  [lucideIcon]=\"getIcon(action.icon)\"\n                  class=\"w-3.5 h-3.5\"\n                ></svg>\n              }\n              {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n\n    </div>\n  }\n\n  <div\n    class=\"card p-0 overflow-hidden\"\n    [class.shadow-lg]=\"hasShadow()\"\n  >\n\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table class=\"w-full\">\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.width || 'auto'\"\n                [style.min-width]=\"col.field === 'actions' ? '130px' : 'auto'\"\n                class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider\n                       _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <div class=\"relative group\">\n                          @if (sortField() === col.field) {\n                            <svg [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-primary\"></svg>\n                          } @else {\n                            <svg [lucideIcon]=\"getIcon('arrow-up-down')\"\n                                 class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                          }\n                            <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ 'table.tooltips.sort' | transloco }}\n                            </span>\n                        </div>\n                      }\n                      @if (col.filter) {\n                        <div class=\"relative group\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                          <svg\n                            [lucideIcon]=\"getIcon('filter')\"\n                            class=\"w-3.5 h-3.5\"\n                            [class._shk-text-primary]=\"columnFiltersForm.get(col.field)?.value\"\n                          ></svg>\n                          <span class=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                            {{ 'table.tooltips.filter' | transloco }}\n                          </span>\n                        </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"mt-2\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <input\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\n                                   focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\n                                   placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"col.filterPlaceholder || ('common.search_placeholder' | transloco)\"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <select\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">A/D</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (columnFiltersForm.get(col.field)?.value && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex items-center justify-center\">\n                  <svg [lucideIcon]=\"getIcon('loader')\" class=\"w-6 h-6 animate-spin _shk-text-primary\"></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\">\n                    <svg [lucideIcon]=\"getIcon('inbox')\" class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"></svg>\n                  </div>\n                  <p class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\">\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track $index) {\n              <tr class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    class=\"px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] whitespace-nowrap\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <span\n                          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                          [class]=\"getTagClass(col.tagSeverity ? col.tagSeverity(rowData) : undefined)\"\n                          [style]=\"col.tagStyle ? col.tagStyle(rowData) : undefined\"\n                        >\n                          {{ col.tagValue ? col.tagValue(rowData) : rowData[col.field] }}\n                        </span>\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of rowActions(); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <button\n                                type=\"button\"\n                                (click)=\"action.onClick(rowData)\"\n                                [class]=\"'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' + getRowActionClass(action, rowData)\"\n                                [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                              <span class=\"absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg\">\n                                {{ getRowActionLabel(action, rowData) }}\n                              </span>\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n\n    <div class=\"flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\">\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">{{ getPageReport() }}</div>\n      <div class=\"flex items-center gap-0.5\">\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\">{{ currentPage() }} / {{ totalPages() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        <span>{{ 'table.rows' | transloco }}</span>\n        <select\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:nowrap;text-overflow:ellipsis}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll-wrapper table{table-layout:fixed;width:100%}\n"] }]
+                        TagComponent,
+                        TooltipComponent,
+                    ], 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"] }] } });
 
-class TooltipComponent {
-    constructor() {
-        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.mode = input('hover', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
-        this.elementRef = inject(ElementRef);
-        this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : /* istanbul ignore next */ []));
-        this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : /* istanbul ignore next */ []));
-    }
-    onMouseEnter() {
-        if (this.mode() !== 'fixed')
-            return;
-        const host = this.elementRef.nativeElement;
-        const container = host.querySelector('.group');
-        if (!container)
-            return;
-        const rect = container.getBoundingClientRect();
-        const off = this.offset();
-        if (this.position() === 'right') {
-            this.tooltipX.set(rect.right + off);
-            this.tooltipY.set(rect.top + rect.height / 2);
-        }
-        else if (this.position() === 'bottom') {
-            this.tooltipX.set(rect.left + rect.width / 2);
-            this.tooltipY.set(rect.bottom + off);
-        }
-        else {
-            this.tooltipX.set(rect.left + rect.width / 2);
-            this.tooltipY.set(rect.top - off);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0, template: `
-    <div class="relative group inline-flex">
-      <ng-content></ng-content>
-      @if (text() && mode() === 'hover') {
-        <span
-          class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
-          [class.top-full]="position() === 'bottom'"
-          [class.bottom-full]="position() === 'top'"
-          [class.left-full]="position() === 'right'"
-          [class.mt-1]="position() === 'bottom'"
-          [class.mb-1]="position() === 'top'"
-          [class.ml-1]="position() === 'right'"
-          [class.left-1/2]="position() !== 'right'"
-          [class.-translate-x-1/2]="position() !== 'right'"
-          [class.top-1/2]="position() === 'right'"
-          [class.-translate-y-1/2]="position() === 'right'"
-        >
-          {{ text() }}
-        </span>
-      }
-      @if (text() && mode() === 'fixed') {
-        <span
-          class="fixed 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"
-          [style.top.px]="tooltipY()"
-          [style.left.px]="tooltipX()"
-          [style.transform]="position() === 'right' ? 'translateY(-50%)' : ''"
-        >
-          {{ text() }}
-        </span>
-      }
-    </div>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'shk-tooltip',
-                    standalone: true,
-                    template: `
-    <div class="relative group inline-flex">
-      <ng-content></ng-content>
-      @if (text() && mode() === 'hover') {
-        <span
-          class="absolute px-2 py-1 text-xs _shk-bg-tooltip _shk-text-tooltip rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition pointer-events-none z-[9999] shadow-lg"
-          [class.top-full]="position() === 'bottom'"
-          [class.bottom-full]="position() === 'top'"
-          [class.left-full]="position() === 'right'"
-          [class.mt-1]="position() === 'bottom'"
-          [class.mb-1]="position() === 'top'"
-          [class.ml-1]="position() === 'right'"
-          [class.left-1/2]="position() !== 'right'"
-          [class.-translate-x-1/2]="position() !== 'right'"
-          [class.top-1/2]="position() === 'right'"
-          [class.-translate-y-1/2]="position() === 'right'"
-        >
-          {{ text() }}
-        </span>
-      }
-      @if (text() && mode() === 'fixed') {
-        <span
-          class="fixed 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"
-          [style.top.px]="tooltipY()"
-          [style.left.px]="tooltipX()"
-          [style.transform]="position() === 'right' ? 'translateY(-50%)' : ''"
-        >
-          {{ text() }}
-        </span>
-      }
-    </div>
-  `,
-                }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }] } });
-
 const ICONS$1 = {
     house: LucideHouse,
     home: LucideHome,
@@ -3752,6 +4004,1038 @@ 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 }] }] } });
 
+/** Placeholder block shown while content is loading. */
+class SkeletonComponent {
+    constructor() {
+        /** Shape of the skeleton: rectangle (default) or circle. */
+        this.shape = input('rectangle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        /** When shape is circle, sets both width and height. */
+        this.size = input('', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Width of the rectangle skeleton. */
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /** Height of the rectangle skeleton. */
+        this.height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Custom border radius (rectangle only). */
+        this.borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+        /** Animation effect: 'wave' (default), 'pulse' or 'none'. */
+        this.animation = input('wave', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+        /** Inline styles applied to the skeleton block. */
+        this.style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        /** Extra CSS classes. */
+        this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        this.rootStyle = computed(() => {
+            const s = {};
+            if (this.shape() === 'circle') {
+                s['width'] = this.size() || this.width();
+                s['height'] = this.size() || this.height();
+                s['borderRadius'] = '9999px';
+            }
+            else {
+                s['width'] = this.width();
+                s['height'] = this.height();
+                s['borderRadius'] = this.borderRadius() || '0.25rem';
+            }
+            return { ...s, ...this.style() };
+        }, ...(ngDevMode ? [{ debugName: "rootStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: SkeletonComponent, isStandalone: true, selector: "shk-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      [class]="'shk-skeleton ' + styleClass()"
+      [class.shk-skeleton-circle]="shape() === 'circle'"
+      [class.shk-skeleton-animate-wave]="animation() === 'wave'"
+      [class.shk-skeleton-animate-pulse]="animation() === 'pulse'"
+      [style]="rootStyle()"
+      aria-hidden="true"
+    ></div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      [class]="'shk-skeleton ' + styleClass()"
+      [class.shk-skeleton-circle]="shape() === 'circle'"
+      [class.shk-skeleton-animate-wave]="animation() === 'wave'"
+      [class.shk-skeleton-animate-pulse]="animation() === 'pulse'"
+      [style]="rootStyle()"
+      aria-hidden="true"
+    ></div>
+  `, 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 }] }] } });
+
+/** 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. */
+        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 */ []));
+        /** Color variant. Defaults to 'primary'. */
+        this.severity = input('primary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /** Transparent background with a colored border. */
+        this.outlined = input(false, ...(ngDevMode ? [{ debugName: "outlined" }] : /* istanbul ignore next */ []));
+        /** Borderless button with a colored label. */
+        this.text = input(false, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Adds a soft shadow. */
+        this.raised = input(false, ...(ngDevMode ? [{ debugName: "raised" }] : /* istanbul ignore next */ []));
+        /** Fully rounded corners (pill). */
+        this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /** Size variant. */
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Disables the button. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Shows a spinner and disables the button. */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Icon shown while loading. Defaults to 'refresh'. */
+        this.loadingIcon = input('refresh', ...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
+        /** Optional text shown instead of the label while loading. */
+        this.loadingText = input('', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+        /** Native button type. */
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Accessible label when the button is icon-only. */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Native title tooltip. */
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Inline styles applied to the button. */
+        this.style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        /** Extra CSS classes. */
+        this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        /** Emitted on click with the original MouseEvent. */
+        this.onClick = output();
+        this.getIcon = getIcon$6;
+        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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ButtonComponent, isStandalone: true, selector: "shk-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      [attr.type]="type()"
+      class="shk-button"
+      [class.shk-button-primary]="severity() === 'primary' || !severity()"
+      [class.shk-button-secondary]="severity() === 'secondary'"
+      [class.shk-button-success]="severity() === 'success'"
+      [class.shk-button-info]="severity() === 'info'"
+      [class.shk-button-warning]="severity() === 'warning'"
+      [class.shk-button-danger]="severity() === 'danger'"
+      [class.shk-button-help]="severity() === 'help'"
+      [class.shk-button-contrast]="severity() === 'contrast'"
+      [class.shk-button-outlined]="outlined()"
+      [class.shk-button-text]="text()"
+      [class.shk-button-raised]="raised()"
+      [class.shk-button-rounded]="rounded()"
+      [class.shk-button-sm]="size() === 'small'"
+      [class.shk-button-lg]="size() === 'large'"
+      [class.shk-button-icon-right]="iconPos() === 'right'"
+      [class.shk-button-icon-top]="iconPos() === 'top'"
+      [class.shk-button-icon-bottom]="iconPos() === 'bottom'"
+      [class.shk-button-icon-only]="iconOnly()"
+      [class.shk-button-loading]="loading()"
+      [class]="styleClass()"
+      [style]="style()"
+      [disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() || undefined"
+      [attr.title]="title() || undefined"
+      (click)="onClick.emit($event)"
+    >
+      @if (loading()) {
+        <svg [lucideIcon]="getIcon(loadingIcon())" class="shk-button-icon shk-button-spin"></svg>
+      } @else if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-button-icon"></svg>
+      }
+      @if (label()) {
+        <span>{{ loading() && loadingText() ? loadingText() : label() }}</span>
+      }
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, 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"], dependencies: [{ 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: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideDynamicIcon], template: `
+    <button
+      [attr.type]="type()"
+      class="shk-button"
+      [class.shk-button-primary]="severity() === 'primary' || !severity()"
+      [class.shk-button-secondary]="severity() === 'secondary'"
+      [class.shk-button-success]="severity() === 'success'"
+      [class.shk-button-info]="severity() === 'info'"
+      [class.shk-button-warning]="severity() === 'warning'"
+      [class.shk-button-danger]="severity() === 'danger'"
+      [class.shk-button-help]="severity() === 'help'"
+      [class.shk-button-contrast]="severity() === 'contrast'"
+      [class.shk-button-outlined]="outlined()"
+      [class.shk-button-text]="text()"
+      [class.shk-button-raised]="raised()"
+      [class.shk-button-rounded]="rounded()"
+      [class.shk-button-sm]="size() === 'small'"
+      [class.shk-button-lg]="size() === 'large'"
+      [class.shk-button-icon-right]="iconPos() === 'right'"
+      [class.shk-button-icon-top]="iconPos() === 'top'"
+      [class.shk-button-icon-bottom]="iconPos() === 'bottom'"
+      [class.shk-button-icon-only]="iconOnly()"
+      [class.shk-button-loading]="loading()"
+      [class]="styleClass()"
+      [style]="style()"
+      [disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() || undefined"
+      [attr.title]="title() || undefined"
+      (click)="onClick.emit($event)"
+    >
+      @if (loading()) {
+        <svg [lucideIcon]="getIcon(loadingIcon())" class="shk-button-icon shk-button-spin"></svg>
+      } @else if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-button-icon"></svg>
+      }
+      @if (label()) {
+        <span>{{ loading() && loadingText() ? loadingText() : label() }}</span>
+      }
+      <ng-content></ng-content>
+    </button>
+  `, 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"] }] } });
+
+/** SVG radial knob with drag and keyboard support. Implements ControlValueAccessor. */
+class KnobComponent {
+    constructor() {
+        /** Current value. Two-way bindable with [(value)]. */
+        this.value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Minimum value. */
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Maximum value. */
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Increment used by arrows and pointer drag rounding. */
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        /** Diameter of the knob in px. */
+        this.size = input(100, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Thickness of the arc stroke. */
+        this.strokeWidth = input(14, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+        /** Color of the filled arc. */
+        this.valueColor = input('var(--shk-primary-600)', ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
+        /** Color of the track arc. */
+        this.rangeColor = input('var(--shk-surface-200)', ...(ngDevMode ? [{ debugName: "rangeColor" }] : /* istanbul ignore next */ []));
+        /** Whether the current value is shown in the center. */
+        this.showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+        /** Disables user interaction. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Blocks editing but keeps the control styled as enabled. */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /** Accessible label. */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted when the knob value changes. */
+        this.change = output();
+        /** Emitted when the user releases the pointer. */
+        this.end = output();
+        this.knobSvg = viewChild('knobSvg', ...(ngDevMode ? [{ debugName: "knobSvg" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.dragging = false;
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        /** Effective disabled state combining the `disabled` input and the form binding. */
+        this.effectiveDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.r = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "r" }] : /* istanbul ignore next */ []));
+        this.center = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+        this.fraction = computed(() => {
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return 0;
+            return Math.max(0, Math.min(1, (this.value() - this.min()) / range));
+        }, ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+        this.rangeArc = computed(() => this.getArcPath(135, 405), ...(ngDevMode ? [{ debugName: "rangeArc" }] : /* istanbul ignore next */ []));
+        this.valueArc = computed(() => this.getArcPath(135, 135 + 270 * this.fraction()), ...(ngDevMode ? [{ debugName: "valueArc" }] : /* istanbul ignore next */ []));
+    }
+    writeValue(value) {
+        this.value.set(this.clamp(Number(value) || this.min()));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onPointerDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.dragging = true;
+        this.knobSvg()?.nativeElement.setPointerCapture(event.pointerId);
+        this.applyEvent(event);
+    }
+    onPointerMove(event) {
+        if (!this.dragging)
+            return;
+        this.applyEvent(event);
+    }
+    onPointerUp(event) {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        try {
+            this.knobSvg()?.nativeElement.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            /* noop */
+        }
+        this.change.emit(this.value());
+        this.end.emit(this.value());
+    }
+    updateByKey(step) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.setValue(this.value() + step);
+        this.onTouched();
+    }
+    applyEvent(event) {
+        const svg = this.knobSvg()?.nativeElement;
+        if (!svg)
+            return;
+        const rect = svg.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const angle = Math.atan2(event.clientY - cy, event.clientX - cx);
+        const deg = ((angle * 180) / Math.PI + 360) % 360;
+        let t = deg - 135;
+        if (t < 0)
+            t += 360;
+        let fraction;
+        if (t > 270) {
+            fraction = 360 - t < t - 270 ? 0 : 1;
+        }
+        else {
+            fraction = t / 270;
+        }
+        const raw = this.min() + fraction * (this.max() - this.min());
+        this.setValue(raw);
+        this.onTouched();
+    }
+    setValue(raw) {
+        const rounded = Math.round(raw / this.step()) * this.step();
+        const clamped = this.clamp(rounded);
+        this.value.set(clamped);
+        this.onChange(clamped);
+    }
+    clamp(value) {
+        return Math.max(this.min(), Math.min(this.max(), value));
+    }
+    getArcPath(startDeg, endDeg) {
+        const cx = this.center();
+        const cy = this.center();
+        const r = this.r();
+        const start = this.anglePoint(cx, cy, r, startDeg);
+        const end = this.anglePoint(cx, cy, r, endDeg);
+        const largeArc = endDeg - startDeg > 180 ? '1' : '0';
+        return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 ${largeArc} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
+    }
+    anglePoint(cx, cy, r, angleDeg) {
+        const rad = (Math.PI * angleDeg) / 180;
+        return {
+            x: cx + r * Math.cos(rad),
+            y: cy + r * Math.sin(rad),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KnobComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: KnobComponent, isStandalone: true, selector: "shk-knob", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change", end: "end" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => KnobComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "knobSvg", first: true, predicate: ["knobSvg"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="shk-knob"
+      [class.shk-knob-disabled]="effectiveDisabled()"
+      [style]="{ width: size() + 'px', height: size() + 'px' }"
+    >
+      <svg
+        #knobSvg
+        class="shk-knob-svg"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-label]="ariaLabel() || 'Valor'"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [class.shk-knob-svg-focusable]="!effectiveDisabled()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (keydown.arrowup)="updateByKey(step())"
+        (keydown.arrowright)="updateByKey(step())"
+        (keydown.arrowdown)="updateByKey(-step())"
+        (keydown.arrowleft)="updateByKey(-step())"
+      >
+        <path
+          [attr.d]="rangeArc()"
+          fill="none"
+          [style.stroke]="rangeColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+        <path
+          [attr.d]="valueArc()"
+          fill="none"
+          [style.stroke]="valueColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+      </svg>
+      @if (showValue()) {
+        <div class="shk-knob-label">{{ value() }}</div>
+      }
+    </div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KnobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-knob', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-knob"
+      [class.shk-knob-disabled]="effectiveDisabled()"
+      [style]="{ width: size() + 'px', height: size() + 'px' }"
+    >
+      <svg
+        #knobSvg
+        class="shk-knob-svg"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-label]="ariaLabel() || 'Valor'"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [class.shk-knob-svg-focusable]="!effectiveDisabled()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (keydown.arrowup)="updateByKey(step())"
+        (keydown.arrowright)="updateByKey(step())"
+        (keydown.arrowdown)="updateByKey(-step())"
+        (keydown.arrowleft)="updateByKey(-step())"
+      >
+        <path
+          [attr.d]="rangeArc()"
+          fill="none"
+          [style.stroke]="rangeColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+        <path
+          [attr.d]="valueArc()"
+          fill="none"
+          [style.stroke]="valueColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+      </svg>
+      @if (showValue()) {
+        <div class="shk-knob-label">{{ value() }}</div>
+      }
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KnobComponent),
+                            multi: true,
+                        },
+                    ], 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 }] }] } });
+
+/** Circular indeterminate spinner. */
+class LoadingSpinnerComponent {
+    constructor() {
+        /** Diameter of the spinner. */
+        this.size = input('2rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Border thickness in px. */
+        this.thickness = input(3, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+        /** Color of the moving arc. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Optional text shown under the spinner. */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingSpinnerComponent, isStandalone: true, selector: "shk-loading-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-spinner"
+      [style]="{
+        width: size(),
+        height: size(),
+      }"
+      role="status"
+      aria-label="Cargando"
+    >
+      <div
+        class="shk-loading-spinner-circle"
+        [style]="{
+          borderWidth: thickness(),
+          borderTopColor: color() || undefined,
+        }"
+      ></div>
+    </div>
+    @if (label()) {
+      <span class="shk-loading-spinner-label">{{ label() }}</span>
+    }
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-loading-spinner"
+      [style]="{
+        width: size(),
+        height: size(),
+      }"
+      role="status"
+      aria-label="Cargando"
+    >
+      <div
+        class="shk-loading-spinner-circle"
+        [style]="{
+          borderWidth: thickness(),
+          borderTopColor: color() || undefined,
+        }"
+      ></div>
+    </div>
+    @if (label()) {
+      <span class="shk-loading-spinner-label">{{ label() }}</span>
+    }
+  `, 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 }] }] } });
+
+/** Progress bar with an indeterminate sweep or a determinate percentage. */
+class LoadingBarComponent {
+    constructor() {
+        /** Height of the bar. */
+        this.height = input('0.25rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** When true the bar animates without a known percentage. */
+        this.indeterminate = input(true, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /** Current progress 0-100 when `indeterminate` is false. */
+        this.progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        /** Fill color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Renders fully rounded ends. */
+        this.rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.fillStyle = computed(() => {
+            if (this.indeterminate())
+                return {};
+            return { width: `${Math.max(0, Math.min(100, this.progress()))}%` };
+        }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: LoadingBarComponent, isStandalone: true, selector: "shk-loading-bar", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-bar"
+      [class.shk-loading-bar-indeterminate]="indeterminate()"
+      [style]="{ height: height(), borderRadius: rounded() ? '9999px' : undefined }"
+      role="progressbar"
+      [attr.aria-valuenow]="indeterminate() ? undefined : progress()"
+      aria-label="Progreso"
+    >
+      <div
+        class="shk-loading-bar-fill"
+        [style]="fillStyle()"
+        [style.background-color]="color() || undefined"
+        [style.border-radius]="rounded() ? '9999px' : undefined"
+      ></div>
+    </div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-loading-bar"
+      [class.shk-loading-bar-indeterminate]="indeterminate()"
+      [style]="{ height: height(), borderRadius: rounded() ? '9999px' : undefined }"
+      role="progressbar"
+      [attr.aria-valuenow]="indeterminate() ? undefined : progress()"
+      aria-label="Progreso"
+    >
+      <div
+        class="shk-loading-bar-fill"
+        [style]="fillStyle()"
+        [style.background-color]="color() || undefined"
+        [style.border-radius]="rounded() ? '9999px' : undefined"
+      ></div>
+    </div>
+  `, 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 }] }] } });
+
+/** Wraps content and shows a centered spinner over it while `visible` is true. */
+class LoadingOverlayComponent {
+    constructor() {
+        /** Controls whether the spinner layer is shown. */
+        this.visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Optional text under the spinner. */
+        this.message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Diameter of the spinner. */
+        this.spinnerSize = input('2.5rem', ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+        /** Spinner color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Backdrop behind the spinner. */
+        this.backdrop = input('transparent', ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingOverlayComponent, isStandalone: true, selector: "shk-loading-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-overlay"
+      [class.shk-loading-overlay-light]="backdrop() === 'light'"
+      [class.shk-loading-overlay-dark]="backdrop() === 'dark'"
+    >
+      <ng-content></ng-content>
+      @if (visible()) {
+        <div class="shk-loading-overlay-layer">
+          <shk-loading-spinner [size]="spinnerSize()" [color]="color()" [label]="message()" />
+        </div>
+      }
+    </div>
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "shk-loading-spinner", inputs: ["size", "thickness", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LoadingSpinnerComponent], template: `
+    <div
+      class="shk-loading-overlay"
+      [class.shk-loading-overlay-light]="backdrop() === 'light'"
+      [class.shk-loading-overlay-dark]="backdrop() === 'dark'"
+    >
+      <ng-content></ng-content>
+      @if (visible()) {
+        <div class="shk-loading-overlay-layer">
+          <shk-loading-spinner [size]="spinnerSize()" [color]="color()" [label]="message()" />
+        </div>
+      }
+    </div>
+  `, 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 }] }] } });
+
+/** Bouncing dots loading indicator. */
+class LoadingDotsComponent {
+    constructor() {
+        /** Diameter of each dot. */
+        this.size = input('0.5rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Dot color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Number of dots. */
+        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 */ []));
+        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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingDotsComponent, isStandalone: true, selector: "shk-loading-dots", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="shk-loading-dots" role="status" aria-label="Cargando">
+      @for (dot of dots(); track $index) {
+        <span
+          class="shk-loading-dot"
+          [style]="{
+            width: size(),
+            height: size(),
+            backgroundColor: color() || undefined,
+            animationDelay: $index * 0.12 + 's',
+          }"
+        ></span>
+      }
+    </span>
+    @if (label()) {
+      <span class="shk-loading-dots-label">{{ label() }}</span>
+    }
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingDotsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-dots', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="shk-loading-dots" role="status" aria-label="Cargando">
+      @for (dot of dots(); track $index) {
+        <span
+          class="shk-loading-dot"
+          [style]="{
+            width: size(),
+            height: size(),
+            backgroundColor: color() || undefined,
+            animationDelay: $index * 0.12 + 's',
+          }"
+        ></span>
+      }
+    </span>
+    @if (label()) {
+      <span class="shk-loading-dots-label">{{ label() }}</span>
+    }
+  `, 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. */
+class TabsService {
+    constructor() {
+        this.active = signal(undefined, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    }
+    select(value) {
+        this.active.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabsService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Container for tab panels. Renders its projected shk-tablist/shh-tab content. */
+class TabsComponent {
+    constructor() {
+        /** Currently active tab value. Two-way bindable with [(value)]. */
+        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 */ []));
+        this.tabsSvc = inject(TabsService);
+        effect(() => {
+            this.tabsSvc.active.set(this.value());
+        });
+        effect(() => {
+            const active = this.tabsSvc.active();
+            if (active !== this.value()) {
+                this.value.set(active);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: TabsComponent, isStandalone: true, selector: "shk-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [TabsService], ngImport: i0, template: `
+    <div class="shk-tabs">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tabs',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TabsService],
+                    template: `
+    <div class="shk-tabs">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], 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 }] }] } });
+
+/** Horizontal bar that contains the shk-tab headers. */
+class TablistComponent {
+    constructor() {
+        /** Allows the header to scroll horizontally when it overflows. */
+        this.scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+        /** Extra CSS classes. */
+        this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TablistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: TablistComponent, isStandalone: true, selector: "shk-tablist", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-tablist"
+      [class.shk-tablist-scrollable]="scrollable()"
+      [class]="styleClass()"
+      role="tablist"
+      aria-orientation="horizontal"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TablistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-tablist', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-tablist"
+      [class.shk-tablist-scrollable]="scrollable()"
+      [class]="styleClass()"
+      role="tablist"
+      aria-orientation="horizontal"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, 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 }] }] } });
+
+/** A single tab header. Clicking it activates the matching panel. */
+class TabComponent {
+    constructor() {
+        /** Value that links this tab to its panel. */
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Disables the tab. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Extra CSS classes. */
+        this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        this.tabsSvc = inject(TabsService);
+        this.active = computed(() => this.tabsSvc.active() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    }
+    select() {
+        if (this.disabled())
+            return;
+        this.tabsSvc.select(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: TabComponent, isStandalone: true, selector: "shk-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="shk-tab"
+      [class]="styleClass()"
+      [class.shk-tab-active]="active()"
+      [class.shk-tab-disabled]="disabled()"
+      role="tab"
+      [attr.aria-selected]="active()"
+      [disabled]="disabled()"
+      (click)="select()"
+    >
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-tab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="shk-tab"
+      [class]="styleClass()"
+      [class.shk-tab-active]="active()"
+      [class.shk-tab-disabled]="disabled()"
+      role="tab"
+      [attr.aria-selected]="active()"
+      [disabled]="disabled()"
+      (click)="select()"
+    >
+      <ng-content></ng-content>
+    </button>
+  `, 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 }] }] } });
+
+/** 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TabpanelsComponent, isStandalone: true, selector: "shk-tabpanels", ngImport: i0, template: `
+    <div class="shk-tabpanels">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabpanelsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tabpanels',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="shk-tabpanels">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }] });
+
+/** 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 */ []));
+        this.tabsSvc = inject(TabsService);
+        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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TabPanelComponent, isStandalone: true, selector: "shk-tabpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (active()) {
+      <div class="shk-tabpanel" role="tabpanel">
+        <ng-content></ng-content>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tabpanel',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (active()) {
+      <div class="shk-tabpanel" role="tabpanel">
+        <ng-content></ng-content>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+class BreadcrumbService {
+    constructor() {
+        this.breadcrumbsSubject = new BehaviorSubject([]);
+        this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
+    }
+    set(items) {
+        this.breadcrumbsSubject.next(items);
+    }
+    clear() {
+        this.breadcrumbsSubject.next([]);
+    }
+    getCurrent() {
+        return this.breadcrumbsSubject.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.breadcrumbService = inject(BreadcrumbService);
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        this.useService = input(true, ...(ngDevMode ? [{ debugName: "useService" }] : /* istanbul ignore next */ []));
+        this.serviceItems = signal([], ...(ngDevMode ? [{ debugName: "serviceItems" }] : /* istanbul ignore next */ []));
+        this.resolvedItems = computed(() => {
+            const staticItems = this.items();
+            if (staticItems.length > 0)
+                return staticItems;
+            if (this.useService())
+                return this.serviceItems();
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+        this.serviceSub = null;
+        effect(() => {
+            this.resolvedItems();
+        });
+    }
+    ngOnInit() {
+        if (this.useService()) {
+            this.serviceSub = this.breadcrumbService.breadcrumbs$.subscribe((items) => {
+                this.serviceItems.set(items);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.serviceSub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "shk-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, useService: { classPropertyName: "useService", publicName: "useService", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav class="shk-breadcrumb" aria-label="Breadcrumb">
+      <ol class="shk-breadcrumb-list">
+        @for (item of resolvedItems(); track $index; let last = $last) {
+          <li class="shk-breadcrumb-item">
+            @if (!last && item.route) {
+              <a
+                [routerLink]="item.route"
+                class="shk-breadcrumb-link"
+                [attr.aria-current]="null"
+              >
+                {{ item.label }}
+              </a>
+            } @else {
+              <span
+                class="shk-breadcrumb-current"
+                [attr.aria-current]="last ? 'page' : null"
+              >
+                {{ item.label }}
+              </span>
+            }
+            @if (!last) {
+              <span class="shk-breadcrumb-separator" aria-hidden="true">
+                @switch (separator()) {
+                  @case ('slash') {
+                    <span class="shk-breadcrumb-separator-text">/</span>
+                  }
+                  @case ('arrow') {
+                    <span class="shk-breadcrumb-separator-text">&gt;</span>
+                  }
+                  @default {
+                    <svg
+                      class="shk-breadcrumb-separator-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  }
+                }
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [":host{display:block}.shk-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.25rem}.shk-breadcrumb-item{display:inline-flex;align-items:center;gap:.375rem;min-width:0}.shk-breadcrumb-link{color:var(--shk-surface-500);text-decoration:none;transition:color .15s ease;cursor:pointer}.shk-breadcrumb-link:hover{color:var(--shk-primary-600)}.shk-breadcrumb-current{color:var(--shk-primary-700);font-weight:600}.shk-breadcrumb-separator{display:inline-flex;align-items:center;justify-content:center;color:var(--shk-surface-300);-webkit-user-select:none;user-select:none;margin:0 .25rem}.shk-breadcrumb-separator-text{font-size:.875rem}.shk-breadcrumb-separator-icon{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-breadcrumb', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <nav class="shk-breadcrumb" aria-label="Breadcrumb">
+      <ol class="shk-breadcrumb-list">
+        @for (item of resolvedItems(); track $index; let last = $last) {
+          <li class="shk-breadcrumb-item">
+            @if (!last && item.route) {
+              <a
+                [routerLink]="item.route"
+                class="shk-breadcrumb-link"
+                [attr.aria-current]="null"
+              >
+                {{ item.label }}
+              </a>
+            } @else {
+              <span
+                class="shk-breadcrumb-current"
+                [attr.aria-current]="last ? 'page' : null"
+              >
+                {{ item.label }}
+              </span>
+            }
+            @if (!last) {
+              <span class="shk-breadcrumb-separator" aria-hidden="true">
+                @switch (separator()) {
+                  @case ('slash') {
+                    <span class="shk-breadcrumb-separator-text">/</span>
+                  }
+                  @case ('arrow') {
+                    <span class="shk-breadcrumb-separator-text">&gt;</span>
+                  }
+                  @default {
+                    <svg
+                      class="shk-breadcrumb-separator-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  }
+                }
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, styles: [":host{display:block}.shk-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.25rem}.shk-breadcrumb-item{display:inline-flex;align-items:center;gap:.375rem;min-width:0}.shk-breadcrumb-link{color:var(--shk-surface-500);text-decoration:none;transition:color .15s ease;cursor:pointer}.shk-breadcrumb-link:hover{color:var(--shk-primary-600)}.shk-breadcrumb-current{color:var(--shk-primary-700);font-weight:600}.shk-breadcrumb-separator{display:inline-flex;align-items:center;justify-content:center;color:var(--shk-surface-300);-webkit-user-select:none;user-select:none;margin:0 .25rem}.shk-breadcrumb-separator-text{font-size:.875rem}.shk-breadcrumb-separator-icon{width:.875rem;height:.875rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], useService: [{ type: i0.Input, args: [{ isSignal: true, alias: "useService", required: false }] }] } });
+
 /* Theme — import theme.css in your global styles.css:
    @import '@shirkasoft/ui-components/theme.css';
    Override --shk-* CSS variables at :root or .dark to theme.
@@ -3761,5 +5045,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_MARKER_GRADIENTS, DEFAULT_SUPPLIER_ICON_COLORS, DEFAULT_SUPPLIER_TYPE_ICONS, DatePickerComponent, FieldsetComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, ShkWizardStepContent, SidebarComponent, TableComponent, TextFieldComponent, TimelineComponent, ToggleComponent, TooltipComponent, WizardComponent, readThemeColors };
+export { BreadcrumbComponent, BreadcrumbService, ButtonComponent, COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_MARKER_GRADIENTS, DEFAULT_SUPPLIER_ICON_COLORS, DEFAULT_SUPPLIER_TYPE_ICONS, DatePickerComponent, FieldsetComponent, FileUploadComponent, KnobComponent, LoadingBarComponent, LoadingDotsComponent, LoadingOverlayComponent, LoadingSpinnerComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, ShkWizardStepContent, SidebarComponent, SkeletonComponent, TabComponent, TabPanelComponent, TableComponent, TablistComponent, TabpanelsComponent, TabsComponent, TagComponent, TextFieldComponent, TimelineComponent, ToggleComponent, TooltipComponent, WizardComponent, readThemeColors };
 //# sourceMappingURL=shirkasoft-ui-components.mjs.map