valtech-components 2.0.410 → 2.0.413

package/fesm2022/valtech-components.mjs

@@ -7521,32 +7521,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-prompter
  *
  * Displays a prompt/info box with text, actions (buttons/links), and custom styles.
+ * Supports reactive i18n content via contentClass and contentKey props.
  *
- * @example
- * <val-prompter [props]="{ content: 'Message', buttons: [...], hrefs: [...], color: 'primary', size: 'medium' }"></val-prompter>
+ * @example Static content:
+ * <val-prompter [props]="{ content: 'Message', buttons: [...], color: 'primary', size: 'medium' }"></val-prompter>
+ *
+ * @example Reactive i18n content:
+ * <val-prompter [props]="{
+ *   contentClass: 'homePage',
+ *   contentKey: 'cookieMessage',
+ *   content: 'Fallback message',
+ *   buttons: [...],
+ *   color: 'primary',
+ *   size: 'medium'
+ * }"></val-prompter>
  *
  * @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
  * @output onClick - Emits when an action is clicked
  */
 class PrompterComponent {
-    constructor(langService) {
-        this.langService = langService;
+    constructor() {
+        this.langService = inject(LangService);
+        /** Observable for reactive content - follows val-text/val-button pattern */
+        this.displayContent$ = of('');
         this.onClick = new EventEmitter();
     }
     ngOnInit() {
-        // Set up reactive content if i18n keys are provided
+        this.setupContent();
+    }
+    /**
+     * Set up content Observable.
+     * Follows the same pattern as val-text and val-button for consistency.
+     */
+    setupContent() {
         if (this.props.contentClass && this.props.contentKey) {
-            this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content // fallback
-            );
+            // Reactive content - Observable connected to currentLang$
+            this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
         }
         else {
+            // Static content wrapped in Observable
             this.displayContent$ = of(this.props.content);
         }
     }
     clickHandler(token) {
         this.onClick.emit(token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <val-box
       class="teleprompter-container"
@@ -7555,14 +7575,9 @@ class PrompterComponent {
     >
       <div class="container" [class.teleprompter-content]="props.teleprompter" body>
         <div>
-          <val-text
-            [props]="{
-              content: (displayContent$ | async) || props.content,
-              color: '',
-              bold: true,
-              size: props.size,
-            }"
-          ></val-text>
+          <ion-text>
+            <p [class]="props.size" class="bold">{{ displayContent$ | async }}</p>
+          </ion-text>
         </div>
         @if (props.buttons || props.hrefs) {
           <div class="actions-container">
@@ -7581,11 +7596,11 @@ class PrompterComponent {
         }
       </div>
     </val-box>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, BoxComponent, ButtonGroupComponent, TextComponent, HrefComponent], template: `
+            args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, IonText, BoxComponent, ButtonGroupComponent, HrefComponent], template: `
     <val-box
       class="teleprompter-container"
       [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
@@ -7593,14 +7608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     >
       <div class="container" [class.teleprompter-content]="props.teleprompter" body>
         <div>
-          <val-text
-            [props]="{
-              content: (displayContent$ | async) || props.content,
-              color: '',
-              bold: true,
-              size: props.size,
-            }"
-          ></val-text>
+          <ion-text>
+            <p [class]="props.size" class="bold">{{ displayContent$ | async }}</p>
+          </ion-text>
         </div>
         @if (props.buttons || props.hrefs) {
           <div class="actions-container">
@@ -7620,7 +7630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     </val-box>
   `, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: LangService }], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -19465,7 +19475,10 @@ class DataTableComponent {
         this.displayedData = [];
         this.currentSort = null;
         this.selectedRows = new Set();
+        /** Cached visible columns for performance */
+        this._visibleColumns = [];
         this.langService = inject(LangService);
+        this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
         this.initializeState();
@@ -19478,6 +19491,8 @@ class DataTableComponent {
         }
     }
     initializeState() {
+        // Cache visible columns for performance
+        this._visibleColumns = this.props.columns.filter(c => c.visible !== false);
         // Initialize sort
         this.currentSort = this.props.sort || null;
         // Initialize selection
@@ -19498,6 +19513,7 @@ class DataTableComponent {
             data = data.slice(start, end);
         }
         this.displayedData = data;
+        this.cdr.markForCheck();
     }
     sortData(data) {
         if (!this.currentSort)
@@ -19529,7 +19545,7 @@ class DataTableComponent {
         });
     }
     get visibleColumns() {
-        return this.props.columns.filter(c => c.visible !== false);
+        return this._visibleColumns;
     }
     get totalColumns() {
         let count = this.visibleColumns.length;
@@ -20061,11 +20077,11 @@ class DataTableComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.data-table-container{position:relative;background:var(--ion-background-color);border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f;border:1px solid var(--ion-color-light-shade);overflow:hidden}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}.loading-message{font-size:14px;color:var(--ion-color-medium-shade)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.6;pointer-events:none}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 16px;text-align:left;vertical-align:middle}thead{background:var(--ion-color-light)}thead th{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);white-space:nowrap;position:relative;border-bottom:2px solid var(--ion-color-light-shade)}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}thead th.sortable:hover{background:var(--ion-color-light-tint)}thead th.sorted{color:var(--ion-color-primary);background:transparent}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0}.sort-icons ion-icon{font-size:12px;color:var(--ion-color-medium);margin:-2px 0}.sort-icons ion-icon.active{color:var(--ion-color-primary)}tbody tr{border-bottom:1px solid var(--ion-color-light-tint);transition:background .15s ease}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--ion-color-primary-rgb),.08)}tbody td{color:var(--ion-color-dark);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:48px;text-align:center;padding:8px}.selection-cell ion-checkbox{margin:0}.selection-cell input[type=radio]{width:18px;height:18px;cursor:pointer}.row-number-cell{width:60px;text-align:center;color:var(--ion-color-medium);font-size:12px}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1}.sticky-end{position:sticky;right:0;background:inherit;z-index:1}.empty-row td{padding:48px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ion-color-medium)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ion-color-dark)}.empty-description{font-size:14px;margin:0;max-width:300px}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ion-color-light-shade);background:var(--ion-color-light);flex-wrap:wrap;gap:12px}.pagination-info{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ion-color-medium-shade)}.page-size-select{--padding-start: 8px;--padding-end: 8px;font-size:13px;min-width:120px}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-controls ion-button{--padding-start: 8px;--padding-end: 8px}.page-indicator{padding:0 12px;font-size:13px;color:var(--ion-color-dark);font-weight:500}.bordered table,.bordered th,.bordered td{border:1px solid var(--ion-color-medium-tint)}.striped tbody tr:nth-child(2n){background:var(--ion-color-light-shade)}.striped tbody tr:nth-child(2n).selected{background:var(--ion-color-primary-tint)}.hoverable tbody tr:hover:not(.empty-row){background:var(--ion-color-light-tint)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--ion-color-primary-rgb),.12)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5}.size-small th,.size-small td{padding:8px 12px;font-size:12px}.size-small .selection-cell{width:40px;padding:6px}.size-small .row-number-cell{width:48px;font-size:11px}.size-small .pagination-container{padding:8px 12px}.size-small .pagination-info,.size-small .page-indicator{font-size:12px}.size-large th,.size-large td{padding:16px 20px;font-size:15px}.size-large .selection-cell{width:56px;padding:12px}.size-large .row-number-cell{width:72px;font-size:14px}.size-large .pagination-container{padding:16px 20px}.size-large .pagination-info,.size-large .page-indicator{font-size:14px}.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}@media (max-width: 768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-background-color);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:500;white-space:nowrap}.status-badge--success{background:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success-shade)}.status-badge--warning{background:rgba(var(--ion-color-warning-rgb),.15);color:var(--ion-color-warning-shade)}.status-badge--danger{background:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger-shade)}.status-badge--primary{background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade)}.status-badge--secondary{background:rgba(var(--ion-color-secondary-rgb),.15);color:var(--ion-color-secondary-shade)}.status-badge--medium{background:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium-shade)}.status-badge--tertiary{background:rgba(var(--ion-color-tertiary-rgb),.15);color:var(--ion-color-tertiary-shade)}.action-buttons{display:flex;gap:4px;justify-content:center}.action-buttons ion-button{--padding-start: 6px;--padding-end: 6px;margin:0}.action-buttons ion-button ion-icon{font-size:18px}.card-list{display:none;padding:8px;gap:12px}.data-card{background:var(--ion-background-color);border:1px solid var(--ion-color-light-shade);border-radius:12px;padding:16px;margin-bottom:12px}.data-card.selected{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.04)}.data-card.clickable{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.data-card.clickable:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ion-color-light-shade)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:8px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-field__label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);flex-shrink:0}.card-field__value{font-size:14px;color:var(--ion-color-dark);text-align:right;word-break:break-word}.card-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.data-table-container{position:relative;background:var(--ion-background-color);border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f;border:1px solid var(--ion-color-light-shade);overflow:hidden}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}.loading-message{font-size:14px;color:var(--ion-color-medium-shade)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.6;pointer-events:none}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 16px;text-align:left;vertical-align:middle}thead{background:var(--ion-color-light)}thead th{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);white-space:nowrap;position:relative;border-bottom:2px solid var(--ion-color-light-shade)}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}thead th.sortable:hover{background:var(--ion-color-light-tint)}thead th.sorted{color:var(--ion-color-primary);background:transparent}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0}.sort-icons ion-icon{font-size:12px;color:var(--ion-color-medium);margin:-2px 0}.sort-icons ion-icon.active{color:var(--ion-color-primary)}tbody tr{border-bottom:1px solid var(--ion-color-light-tint);transition:background .15s ease}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--ion-color-primary-rgb),.08)}tbody td{color:var(--ion-color-dark);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:48px;text-align:center;padding:8px}.selection-cell ion-checkbox{margin:0}.selection-cell input[type=radio]{width:18px;height:18px;cursor:pointer}.row-number-cell{width:60px;text-align:center;color:var(--ion-color-medium);font-size:12px}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1}.sticky-end{position:sticky;right:0;background:inherit;z-index:1}.empty-row td{padding:48px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ion-color-medium)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ion-color-dark)}.empty-description{font-size:14px;margin:0;max-width:300px}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ion-color-light-shade);background:var(--ion-color-light);flex-wrap:wrap;gap:12px}.pagination-info{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ion-color-medium-shade)}.page-size-select{--padding-start: 8px;--padding-end: 8px;font-size:13px;min-width:120px}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-controls ion-button{--padding-start: 8px;--padding-end: 8px}.page-indicator{padding:0 12px;font-size:13px;color:var(--ion-color-dark);font-weight:500}.bordered table,.bordered th,.bordered td{border:1px solid var(--ion-color-medium-tint)}.striped tbody tr:nth-child(2n){background:var(--ion-color-light-shade)}.striped tbody tr:nth-child(2n).selected{background:var(--ion-color-primary-tint)}.hoverable tbody tr:hover:not(.empty-row){background:var(--ion-color-light-tint)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--ion-color-primary-rgb),.12)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5}.size-small th,.size-small td{padding:8px 12px;font-size:12px}.size-small .selection-cell{width:40px;padding:6px}.size-small .row-number-cell{width:48px;font-size:11px}.size-small .pagination-container{padding:8px 12px}.size-small .pagination-info,.size-small .page-indicator{font-size:12px}.size-large th,.size-large td{padding:16px 20px;font-size:15px}.size-large .selection-cell{width:56px;padding:12px}.size-large .row-number-cell{width:72px;font-size:14px}.size-large .pagination-container{padding:16px 20px}.size-large .pagination-info,.size-large .page-indicator{font-size:14px}.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}@media (max-width: 768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-background-color);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:500;white-space:nowrap}.status-badge--success{background:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success-shade)}.status-badge--warning{background:rgba(var(--ion-color-warning-rgb),.15);color:var(--ion-color-warning-shade)}.status-badge--danger{background:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger-shade)}.status-badge--primary{background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade)}.status-badge--secondary{background:rgba(var(--ion-color-secondary-rgb),.15);color:var(--ion-color-secondary-shade)}.status-badge--medium{background:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium-shade)}.status-badge--tertiary{background:rgba(var(--ion-color-tertiary-rgb),.15);color:var(--ion-color-tertiary-shade)}.action-buttons{display:flex;gap:4px;justify-content:center}.action-buttons ion-button{--padding-start: 6px;--padding-end: 6px;margin:0}.action-buttons ion-button ion-icon{font-size:18px}.card-list{display:none;padding:8px;gap:12px}.data-card{background:var(--ion-background-color);border:1px solid var(--ion-color-light-shade);border-radius:12px;padding:16px;margin-bottom:12px}.data-card.selected{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.04)}.data-card.clickable{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.data-card.clickable:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ion-color-light-shade)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:8px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-field__label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);flex-shrink:0}.card-field__value{font-size:14px;color:var(--ion-color-dark);text-align:right;word-break:break-word}.card-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-data-table', standalone: true, imports: [
+            args: [{ selector: 'val-data-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FormsModule,
                         IonButton,