npm - @seniorsistemas/data-seniorx-core - Versions diffs - 3.4.0-main-e91c7773 → 3.4.0 - Mend

@seniorsistemas/data-seniorx-core 3.4.0-main-e91c7773 → 3.4.0

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

Files changed (15) hide show

package/fesm2022/seniorsistemas-data-seniorx-core.mjs CHANGED Viewed

@@ -18385,20 +18385,6 @@ const TABLE_DEFAULT_ROW_ID_PREVIEW_LENGTH = 20;
 const TABLE_HEX_RADIX = 16;
 const TABLE_RGB_MAX = 255;
 const TABLE_MENU_GAP_PX = 4;
-// Respiro minimo entre o menu de acoes e a borda da tela, usado quando ele nao cabe
-// abaixo do gatilho e precisa ser trazido pra dentro da viewport.
-const TABLE_MENU_VIEWPORT_MARGIN_PX = 8;
-// Altura do estado VAZIO quando a tabela esta empilhada (ver emptyBodyHeightPx).
-//
-// O corpo da tabela reserva "linhas por pagina x altura da linha" pra evitar o salto
-// de layout quando os dados chegam. Empilhado, cada linha e um cartao de 120px: 10
-// linhas viram 1224px de nada. Medido num Galaxy S9+ (658px de altura util), a lista
-// vazia esticava a pagina pra 3,4 telas de rolagem - rolar tudo isso pra chegar ao
-// fim de uma lista que nao tem nada.
-//
-// Reservar espaco so faz sentido pra conteudo que vem. No vazio nao vem, entao vale
-// uma altura fixa, a mesma do piso de carregamento.
-const TABLE_EMPTY_STATE_MOBILE_HEIGHT_PX = TABLE_DEFAULT_MIN_LOADING_HEIGHT_PX;
 const TABLE_TAG_FOREGROUND_DARKEN_AMOUNT = 0.22;
 const TABLE_TAG_BACKGROUND_ALPHA = 0.14;
 const TABLE_ICON_RENDER_SIZE_PX = 16;
@@ -23507,7 +23493,7 @@ const HANDLE_WIDTH = 6;
 const TASK_LABEL_HORIZONTAL_PADDING = 6;
 const DRAG_MIN_HANDLE_FACTOR = 2;
 const POPUP_AUTO_REMOVE_DELAY_MS = 3000;
-const MONTHS_IN_YEAR$1 = 12;
+const MONTHS_IN_YEAR = 12;
 const BAR_SELECTOR = '.sdc-gantt-bar';
 var DragMode;
 (function (DragMode) {
@@ -24097,7 +24083,7 @@ class GanttEngine {
             case 'week':
                 return (diffDays(rangeStart, taskStart) / DAYS_IN_WEEK$1) * colW;
             case 'month': {
-                const monthDiff = (taskStart.getFullYear() - rangeStart.getFullYear()) * MONTHS_IN_YEAR$1 +
+                const monthDiff = (taskStart.getFullYear() - rangeStart.getFullYear()) * MONTHS_IN_YEAR +
                     (taskStart.getMonth() - rangeStart.getMonth());
                 const dayFraction = (taskStart.getDate() - 1) / new Date(taskStart.getFullYear(), taskStart.getMonth() + 1, 0).getDate();
                 return (monthDiff + dayFraction) * colW;
@@ -26647,11 +26633,11 @@ class PanelComponent {
         return 'platform.datacore.accessibility_panel_collapse';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelComponent, isStandalone: true, selector: "sdc-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed", severity: "severity", borderButtonOptions: "borderButtonOptions", panelClass: ["class", "panelClass"], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { collapsedChange: "collapsedChange" }, ngImport: i0, template: "<section\n  [class]=\"panelClasses\"\n  [class.sdc-panel--collapsed]=\"collapsed\"\n  [class.sdc-panel--toggleable]=\"toggleable\"\n  [class.sdc-panel--with-border-button]=\"showBorderButton\"\n  [ngClass]=\"severityClass\"\n  [attr.aria-label]=\"(ariaLabel || header) | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-expanded]=\"toggleable ? !collapsed : null\"\n>\n  @if (showBorderButton) {\n    <button\n      type=\"button\"\n      class=\"sdc-panel__border-button\"\n      [disabled]=\"borderButtonDisabled\"\n      [attr.aria-label]=\"borderButtonLabel | translate\"\n      [attr.title]=\"borderButtonTooltip ? (borderButtonTooltip | translate) : null\"\n      (click)=\"onBorderButtonClick($event)\"\n    >\n      @if (borderButtonIcon) {\n        <i [class]=\"borderButtonIcon\" aria-hidden=\"true\"></i>\n        <span class=\"sdc-panel__sr-only\">{{ borderButtonLabel | translate }}</span>\n      } @else {\n        <span>{{ borderButtonLabel | translate }}</span>\n      }\n    </button>\n  }\n\n  @if (header || toggleable) {\n    <div class=\"sdc-panel__header\">\n      <div class=\"sdc-panel__header-content\">\n        @if (header) {\n          <span class=\"sdc-panel__title\">{{ header | translate }}</span>\n        }\n\n        <ng-content select=\"[sdcPanelHeaderContent]\"></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__header-actions\">\n        <ng-content select=\"[sdcPanelActions]\"></ng-content>\n\n        @if (toggleable) {\n          <button\n            type=\"button\"\n            class=\"sdc-panel__toggle fas\"\n            [ngClass]=\"collapsed ? 'fa-plus' : 'fa-minus'\"\n            [attr.aria-controls]=\"contentId\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [attr.aria-label]=\"getToggleAriaLabel() | translate\"\n            (click)=\"toggleCollapsed()\"\n          >\n            <span class=\"sdc-panel__sr-only\">{{ getToggleAriaLabel() | translate }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (!toggleable || !collapsed) {\n    <div\n      [id]=\"contentId\"\n      class=\"sdc-panel__content\"\n      [attr.aria-label]=\"'platform.datacore.accessibility_panel_content' | translate\"\n    >\n      <div class=\"sdc-panel__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__footer\">\n        <ng-content select=\"[sdcFooter]\"></ng-content>\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host{display:block}.sdc-panel{position:relative;display:block;overflow:hidden;background-color:var(--sdc-panel-bg, var(--sdc-surface-bg, #ffffff));border:var(--sdc-panel-border, var(--sdc-surface-border, 1px solid #dedce5));border-radius:var(--sdc-panel-radius, var(--sdc-surface-radius, 4px));box-shadow:var(--sdc-panel-shadow, var(--sdc-surface-shadow, none));padding:var(--sdc-panel-padding, var(--sdc-surface-padding, 22px 22px 20px));transition:var(--sdc-panel-transition, var(--sdc-surface-transition, border-color .25s ease))}.sdc-panel.sdc-panel--success{border-left:4px solid var(--sdc-panel-success, #1f9d55)}.sdc-panel.sdc-panel--info{border-left:4px solid var(--sdc-panel-info, #2563eb)}.sdc-panel.sdc-panel--warn{border-left:4px solid var(--sdc-panel-warn, #d97706)}.sdc-panel.sdc-panel--error{border-left:4px solid var(--sdc-panel-error, #dc2626)}.sdc-panel__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap-reverse;min-height:var(--sdc-panel-header-min-height, var(--sdc-surface-header-min-height, 34px));padding-bottom:var(--sdc-panel-header-padding-bottom, var(--sdc-surface-header-padding-bottom, 20px));border-bottom:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5));color:var(--sdc-panel-title-color, var(--sdc-surface-title-color, #212533))}.sdc-panel--collapsed .sdc-panel__header{padding-bottom:0;border-bottom:none}.sdc-panel__header-content{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap-lg, .75rem));min-width:0;flex-wrap:wrap}.sdc-panel__header-actions{margin-left:auto;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap, .5rem));flex:0 0 auto;max-width:100%}.sdc-panel__title{color:inherit;font-size:var(--sdc-panel-title-font-size, var(--sdc-surface-title-font-size, 14px));font-weight:var(--sdc-panel-title-font-weight, var(--sdc-surface-title-font-weight, 400));line-height:var(--sdc-panel-title-line-height, var(--sdc-surface-title-line-height, 20px))}.sdc-panel__toggle,.sdc-panel__border-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sdc-panel-action-size, 24px);min-height:var(--sdc-panel-action-size, 24px);border:none;background:transparent;color:inherit;cursor:pointer}.sdc-panel__toggle{flex:0 0 auto;border-radius:999px}.sdc-panel__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button{position:absolute;inset-block-start:1rem;inset-inline-start:0;z-index:1;padding:.5rem;border-radius:999px;background:var(--sdc-panel-border-button-bg, #ffffff);box-shadow:0 10px 20px #0f172a1f;transform:translate(-40%)}.sdc-panel__border-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button:disabled{cursor:not-allowed;opacity:.56}.sdc-panel__content{padding-top:var(--sdc-panel-content-padding-top, 15px)}.sdc-panel__body{padding:var(--sdc-panel-content-padding, var(--sdc-surface-content-padding, 0))}.sdc-panel__footer{margin-top:var(--sdc-panel-footer-margin-top, var(--sdc-surface-footer-margin-top, 15px));padding-top:var(--sdc-panel-footer-padding-top, var(--sdc-surface-footer-padding-top, 15px));border-top:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5))}.sdc-panel__footer:empty{display:none}.sdc-panel__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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelComponent, isStandalone: true, selector: "sdc-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed", severity: "severity", borderButtonOptions: "borderButtonOptions", panelClass: ["class", "panelClass"], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { collapsedChange: "collapsedChange" }, ngImport: i0, template: "<section\n  [class]=\"panelClasses\"\n  [class.sdc-panel--collapsed]=\"collapsed\"\n  [class.sdc-panel--toggleable]=\"toggleable\"\n  [class.sdc-panel--with-border-button]=\"showBorderButton\"\n  [ngClass]=\"severityClass\"\n  [attr.aria-label]=\"(ariaLabel || header) | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-expanded]=\"toggleable ? !collapsed : null\"\n>\n  @if (showBorderButton) {\n    <button\n      type=\"button\"\n      class=\"sdc-panel__border-button\"\n      [disabled]=\"borderButtonDisabled\"\n      [attr.aria-label]=\"borderButtonLabel | translate\"\n      [attr.title]=\"borderButtonTooltip ? (borderButtonTooltip | translate) : null\"\n      (click)=\"onBorderButtonClick($event)\"\n    >\n      @if (borderButtonIcon) {\n        <i [class]=\"borderButtonIcon\" aria-hidden=\"true\"></i>\n        <span class=\"sdc-panel__sr-only\">{{ borderButtonLabel | translate }}</span>\n      } @else {\n        <span>{{ borderButtonLabel | translate }}</span>\n      }\n    </button>\n  }\n\n  @if (header || toggleable) {\n    <div class=\"sdc-panel__header\">\n      <div class=\"sdc-panel__header-content\">\n        @if (header) {\n          <span class=\"sdc-panel__title\">{{ header | translate }}</span>\n        }\n\n        <ng-content select=\"[sdcPanelHeaderContent]\"></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__header-actions\">\n        <ng-content select=\"[sdcPanelActions]\"></ng-content>\n\n        @if (toggleable) {\n          <button\n            type=\"button\"\n            class=\"sdc-panel__toggle fas\"\n            [ngClass]=\"collapsed ? 'fa-plus' : 'fa-minus'\"\n            [attr.aria-controls]=\"contentId\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [attr.aria-label]=\"getToggleAriaLabel() | translate\"\n            (click)=\"toggleCollapsed()\"\n          >\n            <span class=\"sdc-panel__sr-only\">{{ getToggleAriaLabel() | translate }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (!toggleable || !collapsed) {\n    <div\n      [id]=\"contentId\"\n      class=\"sdc-panel__content\"\n      [attr.aria-label]=\"'platform.datacore.accessibility_panel_content' | translate\"\n    >\n      <div class=\"sdc-panel__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__footer\">\n        <ng-content select=\"[sdcFooter]\"></ng-content>\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host{display:block}.sdc-panel{position:relative;display:block;overflow:hidden;background-color:var(--sdc-panel-bg, var(--sdc-surface-bg, #ffffff));border:var(--sdc-panel-border, var(--sdc-surface-border, 1px solid #dedce5));border-radius:var(--sdc-panel-radius, var(--sdc-surface-radius, 4px));box-shadow:var(--sdc-panel-shadow, var(--sdc-surface-shadow, none));padding:var(--sdc-panel-padding, var(--sdc-surface-padding, 22px 22px 20px));transition:var(--sdc-panel-transition, var(--sdc-surface-transition, border-color .25s ease))}.sdc-panel.sdc-panel--success{border-left:4px solid var(--sdc-panel-success, #1f9d55)}.sdc-panel.sdc-panel--info{border-left:4px solid var(--sdc-panel-info, #2563eb)}.sdc-panel.sdc-panel--warn{border-left:4px solid var(--sdc-panel-warn, #d97706)}.sdc-panel.sdc-panel--error{border-left:4px solid var(--sdc-panel-error, #dc2626)}.sdc-panel__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--sdc-panel-header-min-height, var(--sdc-surface-header-min-height, 34px));padding-bottom:var(--sdc-panel-header-padding-bottom, var(--sdc-surface-header-padding-bottom, 20px));border-bottom:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5));color:var(--sdc-panel-title-color, var(--sdc-surface-title-color, #212533))}.sdc-panel--collapsed .sdc-panel__header{padding-bottom:0;border-bottom:none}.sdc-panel__header-content{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap-lg, .75rem));min-width:0;flex-wrap:wrap}.sdc-panel__header-actions{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap, .5rem));flex:0 0 auto}.sdc-panel__title{color:inherit;font-size:var(--sdc-panel-title-font-size, var(--sdc-surface-title-font-size, 14px));font-weight:var(--sdc-panel-title-font-weight, var(--sdc-surface-title-font-weight, 400));line-height:var(--sdc-panel-title-line-height, var(--sdc-surface-title-line-height, 20px))}.sdc-panel__toggle,.sdc-panel__border-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sdc-panel-action-size, 24px);min-height:var(--sdc-panel-action-size, 24px);border:none;background:transparent;color:inherit;cursor:pointer}.sdc-panel__toggle{flex:0 0 auto;border-radius:999px}.sdc-panel__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button{position:absolute;inset-block-start:1rem;inset-inline-start:0;z-index:1;padding:.5rem;border-radius:999px;background:var(--sdc-panel-border-button-bg, #ffffff);box-shadow:0 10px 20px #0f172a1f;transform:translate(-40%)}.sdc-panel__border-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button:disabled{cursor:not-allowed;opacity:.56}.sdc-panel__content{padding-top:var(--sdc-panel-content-padding-top, 15px)}.sdc-panel__body{padding:var(--sdc-panel-content-padding, var(--sdc-surface-content-padding, 0))}.sdc-panel__footer{margin-top:var(--sdc-panel-footer-margin-top, var(--sdc-surface-footer-margin-top, 15px));padding-top:var(--sdc-panel-footer-padding-top, var(--sdc-surface-footer-padding-top, 15px));border-top:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5))}.sdc-panel__footer:empty{display:none}.sdc-panel__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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, TranslateModule], standalone: true, selector: 'sdc-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<section\n  [class]=\"panelClasses\"\n  [class.sdc-panel--collapsed]=\"collapsed\"\n  [class.sdc-panel--toggleable]=\"toggleable\"\n  [class.sdc-panel--with-border-button]=\"showBorderButton\"\n  [ngClass]=\"severityClass\"\n  [attr.aria-label]=\"(ariaLabel || header) | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-expanded]=\"toggleable ? !collapsed : null\"\n>\n  @if (showBorderButton) {\n    <button\n      type=\"button\"\n      class=\"sdc-panel__border-button\"\n      [disabled]=\"borderButtonDisabled\"\n      [attr.aria-label]=\"borderButtonLabel | translate\"\n      [attr.title]=\"borderButtonTooltip ? (borderButtonTooltip | translate) : null\"\n      (click)=\"onBorderButtonClick($event)\"\n    >\n      @if (borderButtonIcon) {\n        <i [class]=\"borderButtonIcon\" aria-hidden=\"true\"></i>\n        <span class=\"sdc-panel__sr-only\">{{ borderButtonLabel | translate }}</span>\n      } @else {\n        <span>{{ borderButtonLabel | translate }}</span>\n      }\n    </button>\n  }\n\n  @if (header || toggleable) {\n    <div class=\"sdc-panel__header\">\n      <div class=\"sdc-panel__header-content\">\n        @if (header) {\n          <span class=\"sdc-panel__title\">{{ header | translate }}</span>\n        }\n\n        <ng-content select=\"[sdcPanelHeaderContent]\"></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__header-actions\">\n        <ng-content select=\"[sdcPanelActions]\"></ng-content>\n\n        @if (toggleable) {\n          <button\n            type=\"button\"\n            class=\"sdc-panel__toggle fas\"\n            [ngClass]=\"collapsed ? 'fa-plus' : 'fa-minus'\"\n            [attr.aria-controls]=\"contentId\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [attr.aria-label]=\"getToggleAriaLabel() | translate\"\n            (click)=\"toggleCollapsed()\"\n          >\n            <span class=\"sdc-panel__sr-only\">{{ getToggleAriaLabel() | translate }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (!toggleable || !collapsed) {\n    <div\n      [id]=\"contentId\"\n      class=\"sdc-panel__content\"\n      [attr.aria-label]=\"'platform.datacore.accessibility_panel_content' | translate\"\n    >\n      <div class=\"sdc-panel__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__footer\">\n        <ng-content select=\"[sdcFooter]\"></ng-content>\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host{display:block}.sdc-panel{position:relative;display:block;overflow:hidden;background-color:var(--sdc-panel-bg, var(--sdc-surface-bg, #ffffff));border:var(--sdc-panel-border, var(--sdc-surface-border, 1px solid #dedce5));border-radius:var(--sdc-panel-radius, var(--sdc-surface-radius, 4px));box-shadow:var(--sdc-panel-shadow, var(--sdc-surface-shadow, none));padding:var(--sdc-panel-padding, var(--sdc-surface-padding, 22px 22px 20px));transition:var(--sdc-panel-transition, var(--sdc-surface-transition, border-color .25s ease))}.sdc-panel.sdc-panel--success{border-left:4px solid var(--sdc-panel-success, #1f9d55)}.sdc-panel.sdc-panel--info{border-left:4px solid var(--sdc-panel-info, #2563eb)}.sdc-panel.sdc-panel--warn{border-left:4px solid var(--sdc-panel-warn, #d97706)}.sdc-panel.sdc-panel--error{border-left:4px solid var(--sdc-panel-error, #dc2626)}.sdc-panel__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap-reverse;min-height:var(--sdc-panel-header-min-height, var(--sdc-surface-header-min-height, 34px));padding-bottom:var(--sdc-panel-header-padding-bottom, var(--sdc-surface-header-padding-bottom, 20px));border-bottom:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5));color:var(--sdc-panel-title-color, var(--sdc-surface-title-color, #212533))}.sdc-panel--collapsed .sdc-panel__header{padding-bottom:0;border-bottom:none}.sdc-panel__header-content{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap-lg, .75rem));min-width:0;flex-wrap:wrap}.sdc-panel__header-actions{margin-left:auto;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap, .5rem));flex:0 0 auto;max-width:100%}.sdc-panel__title{color:inherit;font-size:var(--sdc-panel-title-font-size, var(--sdc-surface-title-font-size, 14px));font-weight:var(--sdc-panel-title-font-weight, var(--sdc-surface-title-font-weight, 400));line-height:var(--sdc-panel-title-line-height, var(--sdc-surface-title-line-height, 20px))}.sdc-panel__toggle,.sdc-panel__border-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sdc-panel-action-size, 24px);min-height:var(--sdc-panel-action-size, 24px);border:none;background:transparent;color:inherit;cursor:pointer}.sdc-panel__toggle{flex:0 0 auto;border-radius:999px}.sdc-panel__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button{position:absolute;inset-block-start:1rem;inset-inline-start:0;z-index:1;padding:.5rem;border-radius:999px;background:var(--sdc-panel-border-button-bg, #ffffff);box-shadow:0 10px 20px #0f172a1f;transform:translate(-40%)}.sdc-panel__border-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button:disabled{cursor:not-allowed;opacity:.56}.sdc-panel__content{padding-top:var(--sdc-panel-content-padding-top, 15px)}.sdc-panel__body{padding:var(--sdc-panel-content-padding, var(--sdc-surface-content-padding, 0))}.sdc-panel__footer{margin-top:var(--sdc-panel-footer-margin-top, var(--sdc-surface-footer-margin-top, 15px));padding-top:var(--sdc-panel-footer-padding-top, var(--sdc-surface-footer-padding-top, 15px));border-top:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5))}.sdc-panel__footer:empty{display:none}.sdc-panel__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"] }]
+            args: [{ imports: [CommonModule, TranslateModule], standalone: true, selector: 'sdc-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<section\n  [class]=\"panelClasses\"\n  [class.sdc-panel--collapsed]=\"collapsed\"\n  [class.sdc-panel--toggleable]=\"toggleable\"\n  [class.sdc-panel--with-border-button]=\"showBorderButton\"\n  [ngClass]=\"severityClass\"\n  [attr.aria-label]=\"(ariaLabel || header) | translate\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-expanded]=\"toggleable ? !collapsed : null\"\n>\n  @if (showBorderButton) {\n    <button\n      type=\"button\"\n      class=\"sdc-panel__border-button\"\n      [disabled]=\"borderButtonDisabled\"\n      [attr.aria-label]=\"borderButtonLabel | translate\"\n      [attr.title]=\"borderButtonTooltip ? (borderButtonTooltip | translate) : null\"\n      (click)=\"onBorderButtonClick($event)\"\n    >\n      @if (borderButtonIcon) {\n        <i [class]=\"borderButtonIcon\" aria-hidden=\"true\"></i>\n        <span class=\"sdc-panel__sr-only\">{{ borderButtonLabel | translate }}</span>\n      } @else {\n        <span>{{ borderButtonLabel | translate }}</span>\n      }\n    </button>\n  }\n\n  @if (header || toggleable) {\n    <div class=\"sdc-panel__header\">\n      <div class=\"sdc-panel__header-content\">\n        @if (header) {\n          <span class=\"sdc-panel__title\">{{ header | translate }}</span>\n        }\n\n        <ng-content select=\"[sdcPanelHeaderContent]\"></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__header-actions\">\n        <ng-content select=\"[sdcPanelActions]\"></ng-content>\n\n        @if (toggleable) {\n          <button\n            type=\"button\"\n            class=\"sdc-panel__toggle fas\"\n            [ngClass]=\"collapsed ? 'fa-plus' : 'fa-minus'\"\n            [attr.aria-controls]=\"contentId\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [attr.aria-label]=\"getToggleAriaLabel() | translate\"\n            (click)=\"toggleCollapsed()\"\n          >\n            <span class=\"sdc-panel__sr-only\">{{ getToggleAriaLabel() | translate }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (!toggleable || !collapsed) {\n    <div\n      [id]=\"contentId\"\n      class=\"sdc-panel__content\"\n      [attr.aria-label]=\"'platform.datacore.accessibility_panel_content' | translate\"\n    >\n      <div class=\"sdc-panel__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"sdc-panel__footer\">\n        <ng-content select=\"[sdcFooter]\"></ng-content>\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host{display:block}.sdc-panel{position:relative;display:block;overflow:hidden;background-color:var(--sdc-panel-bg, var(--sdc-surface-bg, #ffffff));border:var(--sdc-panel-border, var(--sdc-surface-border, 1px solid #dedce5));border-radius:var(--sdc-panel-radius, var(--sdc-surface-radius, 4px));box-shadow:var(--sdc-panel-shadow, var(--sdc-surface-shadow, none));padding:var(--sdc-panel-padding, var(--sdc-surface-padding, 22px 22px 20px));transition:var(--sdc-panel-transition, var(--sdc-surface-transition, border-color .25s ease))}.sdc-panel.sdc-panel--success{border-left:4px solid var(--sdc-panel-success, #1f9d55)}.sdc-panel.sdc-panel--info{border-left:4px solid var(--sdc-panel-info, #2563eb)}.sdc-panel.sdc-panel--warn{border-left:4px solid var(--sdc-panel-warn, #d97706)}.sdc-panel.sdc-panel--error{border-left:4px solid var(--sdc-panel-error, #dc2626)}.sdc-panel__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--sdc-panel-header-min-height, var(--sdc-surface-header-min-height, 34px));padding-bottom:var(--sdc-panel-header-padding-bottom, var(--sdc-surface-header-padding-bottom, 20px));border-bottom:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5));color:var(--sdc-panel-title-color, var(--sdc-surface-title-color, #212533))}.sdc-panel--collapsed .sdc-panel__header{padding-bottom:0;border-bottom:none}.sdc-panel__header-content{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap-lg, .75rem));min-width:0;flex-wrap:wrap}.sdc-panel__header-actions{display:flex;align-items:center;gap:var(--sdc-panel-header-gap, var(--sdc-control-gap, .5rem));flex:0 0 auto}.sdc-panel__title{color:inherit;font-size:var(--sdc-panel-title-font-size, var(--sdc-surface-title-font-size, 14px));font-weight:var(--sdc-panel-title-font-weight, var(--sdc-surface-title-font-weight, 400));line-height:var(--sdc-panel-title-line-height, var(--sdc-surface-title-line-height, 20px))}.sdc-panel__toggle,.sdc-panel__border-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sdc-panel-action-size, 24px);min-height:var(--sdc-panel-action-size, 24px);border:none;background:transparent;color:inherit;cursor:pointer}.sdc-panel__toggle{flex:0 0 auto;border-radius:999px}.sdc-panel__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button{position:absolute;inset-block-start:1rem;inset-inline-start:0;z-index:1;padding:.5rem;border-radius:999px;background:var(--sdc-panel-border-button-bg, #ffffff);box-shadow:0 10px 20px #0f172a1f;transform:translate(-40%)}.sdc-panel__border-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sdc-panel__border-button:disabled{cursor:not-allowed;opacity:.56}.sdc-panel__content{padding-top:var(--sdc-panel-content-padding-top, 15px)}.sdc-panel__body{padding:var(--sdc-panel-content-padding, var(--sdc-surface-content-padding, 0))}.sdc-panel__footer{margin-top:var(--sdc-panel-footer-margin-top, var(--sdc-surface-footer-margin-top, 15px));padding-top:var(--sdc-panel-footer-padding-top, var(--sdc-surface-footer-padding-top, 15px));border-top:var(--sdc-panel-divider-border, var(--sdc-surface-divider-border, 1px solid #dedce5))}.sdc-panel__footer:empty{display:none}.sdc-panel__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"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], toggleable: [{
@@ -30389,9 +30375,7 @@ var TableMenuFocusTarget;
 })(TableMenuFocusTarget || (TableMenuFocusTarget = {}));
 class TableActionsMenuComponent {
-    cdr;
     menuItems;
-    painel;
     ariaLabel = 'platform.datacore.accessibility_actions_menu';
     items = [];
     left = 0;
@@ -30401,41 +30385,8 @@ class TableActionsMenuComponent {
     close = new EventEmitter();
     select = new EventEmitter();
     activeIndex = -1;
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
     ngAfterViewInit() {
-        queueMicrotask(() => {
-            this.manterDentroDaViewport();
-            this.focusFirstEnabledItem();
-        });
-    }
-    /**
-     * O chamador posiciona o menu logo abaixo do gatilho (table.component.ts:
-     * `top: rect.bottom + gap`) sem saber a altura dele, que so existe depois de
-     * renderizar. Numa linha perto do rodape o menu nascia fora da tela - medido num
-     * iPad Mini (viewport de 1024px): abria em top 1028, bottom 1094, com o item
-     * "Visualizar" em 1038. Como e `position: fixed`, rolar a pagina NAO traz ele de
-     * volta - ficava impossivel de alcancar.
-     *
-     * Aqui, ja com a medida real, o menu encosta na borda em vez de passar dela. A
-     * horizontal segue a mesma ideia.
-     */
-    manterDentroDaViewport() {
-        const el = this.painel?.nativeElement;
-        if (!el) {
-            return;
-        }
-        const { width, height } = el.getBoundingClientRect();
-        const margem = TABLE_MENU_VIEWPORT_MARGIN_PX;
-        const top = Math.max(margem, Math.min(this.top, window.innerHeight - height - margem));
-        const left = Math.max(margem, Math.min(this.left, window.innerWidth - width - margem));
-        if (top === this.top && left === this.left) {
-            return;
-        }
-        this.top = top;
-        this.left = left;
-        this.cdr.markForCheck();
+        queueMicrotask(() => this.focusFirstEnabledItem());
     }
     onItemFocus(index) {
         if (this.items[index]?.disabled) {
@@ -30552,10 +30503,9 @@ class TableActionsMenuComponent {
         event.preventDefault();
         this.focusIndex(enabledIndexes[currentEnabledPosition + 1]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableActionsMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableActionsMenuComponent, isStandalone: true, selector: "sdc-table-actions-menu", inputs: { ariaLabel: "ariaLabel", items: "items", left: "left", menuId: "menuId", top: "top", width: "width" }, outputs: { close: "close", select: "select" }, viewQueries: [{ propertyName: "painel", first: true, predicate: ["painel"], descendants: true }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableActionsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableActionsMenuComponent, isStandalone: true, selector: "sdc-table-actions-menu", inputs: { ariaLabel: "ariaLabel", items: "items", left: "left", menuId: "menuId", top: "top", width: "width" }, outputs: { close: "close", select: "select" }, viewQueries: [{ propertyName: "menuItems", predicate: ["menuItem"], descendants: true }], ngImport: i0, template: `
     <div
-      #painel
       class="sdc-actions-menu sdc-actions-menu--portal"
       [id]="menuId || null"
       [style.top.px]="top"
@@ -30595,7 +30545,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'sdc-table-actions-menu', standalone: true, imports: [CommonModule, TranslateModule, IconRendererComponent], template: `
     <div
-      #painel
       class="sdc-actions-menu sdc-actions-menu--portal"
       [id]="menuId || null"
       [style.top.px]="top"
@@ -30630,12 +30579,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sdc-actions-menu{background:#fff;border:1px solid #d1d5db;border-radius:0;box-shadow:0 1px 2px #0f172a14;padding:0}.sdc-actions-menu--portal{position:fixed;z-index:2147483647}.sdc-actions-item{width:100%;display:flex;align-items:stretch;justify-content:flex-start;border:0;border-bottom:1px solid #e5e7eb;background:#fff;padding:0;text-align:left;cursor:pointer;font:inherit;color:#374151;min-height:2.25rem;transition:background-color .15s ease,color .15s ease}.sdc-actions-item:last-child{border-bottom:0}.sdc-actions-item__content{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem .875rem;width:100%;font-size:.8125rem;line-height:1.2}.sdc-actions-item:hover:not(:disabled),.sdc-actions-item:focus-visible:not(:disabled){background:#f9fafb;outline:none}.sdc-actions-item:disabled,.sdc-actions-item.sdc-actions-item--disabled,.sdc-actions-item[data-disabled=true]{color:#9ca3af;cursor:not-allowed;background:#fff;pointer-events:none}.sdc-actions-item:disabled .sdc-actions-item__content,.sdc-actions-item.sdc-actions-item--disabled .sdc-actions-item__content,.sdc-actions-item[data-disabled=true] .sdc-actions-item__content{opacity:.55}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { menuItems: [{
+        }], propDecorators: { menuItems: [{
                 type: ViewChildren,
                 args: ['menuItem']
-            }], painel: [{
-                type: ViewChild,
-                args: ['painel']
             }], ariaLabel: [{
                 type: Input
             }], items: [{
@@ -31231,7 +31177,7 @@ class TableCellContentComponent {
         this.toggleActionsMenu.emit({ event, trigger });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableCellContentComponent, isStandalone: true, selector: "sdc-table-cell-content", inputs: { cellConfigs: "cellConfigs", col: "col", resolveValue: "resolveValue", row: "row", actionsMenuOpen: "actionsMenuOpen", actionsMenuId: "actionsMenuId", defaultTextOverflow: "defaultTextOverflow", rowCheckboxId: "rowCheckboxId", rowLabel: "rowLabel", rowSelectionDisabled: "rowSelectionDisabled", forceLeftAlign: "forceLeftAlign", rowSelected: "rowSelected" }, outputs: { toggleActionsMenu: "toggleActionsMenu", toggleRow: "toggleRow", triggerButtonAction: "triggerButtonAction" }, host: { properties: { "class.sdc-table-cell-content--align-left": "resolvedAlignment === 'left'", "class.sdc-table-cell-content--align-center": "resolvedAlignment === 'center'", "class.sdc-table-cell-content--align-right": "resolvedAlignment === 'right'", "class.sdc-table-cell-content--nowrap": "col?.textOverflow === 'none'" } }, ngImport: i0, template: "<div class=\"sdc-table-content\">\n  @if (col.content?.length) {\n    <div class=\"sdc-table-multi-content\">\n      @for (item of col.content!; track $index) {\n        @switch (item.type ?? 'text') {\n          @case ('strong') {\n            <strong\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field) | translate)\"\n            >{{ displayText(item.field) | translate }}</strong>\n          }\n          @case ('code') {\n            <code\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field))\"\n            >{{ displayText(item.field) }}</code>\n          }\n          @default {\n            <span\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field) | translate)\"\n            >{{ displayText(item.field) | translate }}</span>\n          }\n        }\n      }\n    </div>\n  } @else {\n    @switch (col.type ?? 'text') {\n    @case ('checkbox-selection') {\n      <div class=\"sdc-table-checkbox\">\n        <input\n          type=\"checkbox\"\n          [id]=\"rowCheckboxId\"\n          [disabled]=\"rowSelectionDisabled\"\n          [checked]=\"rowSelected\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow.emit(getCheckedValue($event))\"\n          [attr.aria-label]=\"\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          \"\n          [attr.aria-checked]=\"rowSelected\"\n        />\n        <label [attr.for]=\"rowCheckboxId\" class=\"sr-only\">\n          {{\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          }}\n        </label>\n      </div>\n    }\n\n    @case ('date') {\n      <span class=\"sdc-table-text\" [attr.title]=\"ellipsisTitleText(formatDate())\">{{ formatDate() }}</span>\n    }\n\n    @case ('strong') {\n      <span class=\"sdc-table-strong-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n\n    @case ('code') {\n      <code class=\"sdc-table-code-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue())\">{{ displayText() }}</code>\n    }\n\n    @case ('link') {\n      <a class=\"sdc-table-link\"\n        [href]=\"cellTextValue()\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        (click)=\"$event.stopPropagation()\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </a>\n    }\n\n    @case ('currency') {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(formatCurrency())\">{{ formatCurrency() }}</span>\n    }\n\n    @case ('tag') {\n      <div class=\"sdc-table-tags\">\n        @for (tagItem of tagItems(); track tagItem.label + '-' + $index) {\n          <span\n            class=\"sdc-table-tag\"\n            [class.sdc-table-tag--enabled]=\"tagItem.tone === 'enabled'\"\n            [class.sdc-table-tag--disabled]=\"tagItem.tone === 'disabled'\"\n            [ngStyle]=\"tagItem.styles\"\n            [attr.title]=\"tagItem.tooltip ? (tagItem.tooltip | translate) : (tagItem.label | translate)\"\n          >\n            @if (tagItem.icon) {\n              <sdc-icon-renderer\n                class=\"sdc-table-tag__icon\"\n                [icon]=\"tagItem.icon\"\n                [iconType]=\"tagItem.iconType\"\n                [size]=\"tagIconSize\"\n              ></sdc-icon-renderer>\n            }\n            {{ tagItem.label | translate }}\n          </span>\n        }\n\n        @if (tagOverflow(); as overflow) {\n          @if (overflow.hiddenCount > 0) {\n            <span\n              class=\"sdc-table-tag sdc-table-tag--more\"\n              [attr.title]=\"\n                'platform.datacore.accessibility_table_tag_more_items'\n                  | translate: { items: tagOverflowTitle(overflow) }\n              \"\n            >\u2026</span>\n          }\n        }\n      </div>\n    }\n\n    @case ('button') {\n      <div class=\"sdc-table-button\">\n        <sdc-button\n          class=\"sdc-table-action-button\"\n          [size]=\"cellConfigs.button.size ?? 'default'\"\n          [priority]=\"cellConfigs.button.priority || 'primary'\"\n          [icon]=\"cellConfigs.button.icon\"\n          [label]=\"cellConfigs.button.label ?? ''\"\n          [disabled]=\"cellConfigs.button.disabled ?? false\"\n          [title]=\"cellConfigs.button.tooltip\"\n          [attr.size]=\"cellConfigs.button.size\"\n          [attr.priority]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.severity]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.icon]=\"cellConfigs.button.icon\"\n          [attr.label]=\"cellConfigs.button.label\"\n          [attr.disabled]=\"cellConfigs.button.disabled ? '' : null\"\n          [attr.title]=\"cellConfigs.button.tooltip || null\"\n          [attr.aria-label]=\"\n            (buttonAriaLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.data-key]=\"buttonKey()\"\n          (click)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.enter)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.space)=\"$event.preventDefault(); cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n        ></sdc-button>\n      </div>\n    }\n\n    @case ('actions') {\n      <div\n        class=\"sdc-table-actions\"\n        [class.sdc-table-actions--open]=\"actionsMenuOpen\"\n      >\n        <button\n          #actionsTrigger\n          type=\"button\"\n          class=\"sdc-table-actions-trigger\"\n          [class.sdc-table-actions-trigger--open]=\"actionsMenuOpen\"\n          [attr.aria-label]=\"\n            (actionsButtonLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-controls]=\"actionsMenuOpen ? actionsMenuId : null\"\n          [attr.aria-expanded]=\"actionsMenuOpen\"\n          (click)=\"onActionsClick($event, actionsTrigger)\"\n        >\n          <span class=\"sdc-table-actions-trigger__label\">\n            {{ actionsButtonLabel() | translate }}\n          </span>\n          <i class=\"fas fa-chevron-down sdc-table-actions-trigger__icon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    @case ('icon') {\n      @if (iconPresentation(); as iconItem) {\n        <span\n          class=\"sdc-table-icon\"\n          [ngStyle]=\"iconItem.colorStyle\"\n          [attr.title]=\"iconItem.tooltip ? (iconItem.tooltip | translate) : null\"\n          [attr.aria-label]=\"\n            (iconItem.label || iconItem.tooltip)\n              ? ((iconItem.label || iconItem.tooltip)! | translate)\n              : null\n          \"\n        >\n          @if (iconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"iconItem.icon\"\n              [iconType]=\"iconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (iconItem.label) {\n            <span class=\"sdc-table-icon__label\">{{ iconItem.label | translate }}</span>\n          }\n        </span>\n      }\n    }\n\n    @case ('icon-title') {\n      @if (titleIconPresentation(); as titleIconItem) {\n        <span\n          class=\"sdc-table-icon-title\"\n          [ngStyle]=\"titleIconItem.colorStyle\"\n          [attr.title]=\"titleIconItem.tooltip ? (titleIconItem.tooltip | translate) : null\"\n        >\n          @if (titleIconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"titleIconItem.icon\"\n              [iconType]=\"titleIconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (titleIconItem.label) {\n            <span [attr.title]=\"ellipsisTitleText(titleIconItem.label | translate)\">\n              {{ titleIconItem.label | translate | sdcTruncate:col:defaultTextOverflow }}\n            </span>\n          }\n        </span>\n      }\n    }\n\n    @default {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table-content{display:flex;align-items:center;width:100%;min-width:0}:host(.sdc-table-cell-content--align-left) .sdc-table-content{justify-content:flex-start;text-align:left}:host(.sdc-table-cell-content--align-center) .sdc-table-content{justify-content:center;text-align:center}:host(.sdc-table-cell-content--align-right) .sdc-table-content{justify-content:flex-end;text-align:right}.sdc-table-multi-content{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span,.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-strong-label{font-weight:500}.sdc-table-code-label{color:var(--sdc-tab-primary)}.sdc-table-link{display:inline-block;color:var(--sdc-tab-primary);text-decoration:underline}.sdc-table-link:hover,.sdc-table-link:focus-visible{text-decoration:none}.sdc-table-tags{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;max-width:100%;overflow:hidden}.sdc-table-tag{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:fit-content;min-width:fit-content;max-width:100%;border-radius:9999px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid currentColor;box-sizing:border-box;font-size:.875rem;padding:.35rem .875rem}.sdc-table-tag__icon{flex:0 0 auto}.sdc-table-tag--enabled{background:#dcfce7;color:#16a34a;border-color:#16a34a}.sdc-table-tag--disabled{background:#fee2e2;color:#ef4444;border-color:#ef4444}.sdc-table-tag--more{background:#f3f4f6;color:#374151;border-color:#374151;cursor:default;font-weight:700}.sdc-table-button{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;min-width:0}.sdc-table-button ::ng-deep sdc-button,.sdc-table-button ::ng-deep button{min-height:unset;min-width:unset;max-width:100%}.sdc-table-action-button{width:100%;max-width:100%;min-width:0}.sdc-table-icon,.sdc-table-icon-title{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%}.sdc-table-icon__label,.sdc-table-icon-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sdc-table-checkbox{display:flex;align-items:center;justify-content:center}.sdc-table-checkbox input[type=checkbox]{cursor:pointer}.sdc-table-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}.sdc-table-actions{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0}.sdc-table-actions-trigger{appearance:none;border:1px solid #c9ced6;background:#fff;border-radius:999px;min-width:4.875rem;height:2rem;padding:0 .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font:inherit;font-size:.8125rem;color:#374151;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.sdc-table-actions-trigger:hover{background:#f9fafb}.sdc-table-actions-trigger:focus-visible,.sdc-table-actions-trigger--open{outline:none;border-color:#9ca3af;box-shadow:0 0 0 2px #1118270a}.sdc-table-actions-trigger__label{line-height:1;white-space:nowrap}.sdc-table-actions-trigger__icon{font-size:.625rem;line-height:1;color:#6b7280}@media (max-width: 768px){.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}.sdc-table-tag{font-size:.8125rem;padding:.35rem .75rem}.sdc-table-actions-trigger{min-width:4.375rem;height:1.75rem;padding:0 .625rem;font-size:.75rem}.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link,.sdc-table-icon__label,.sdc-table-icon-title span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}:host-context(.sdc-table-expandable-summary-value) .sdc-table-text,:host-context(.sdc-table-expandable-summary-value) .sdc-table-multi-content>*{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "sdc-button", inputs: ["id", "label", "ariaLabel", "disabled", "loading", "width", "priority", "size", "type", "icon", "rightIcon", "auxiliary", "rounded", "caret", "tooltip", "animation", "slide", "styleClass", "badge", "menuOptions", "menuContext", "model"], outputs: ["clicked"] }, { kind: "component", type: IconRendererComponent, selector: "sdc-icon-renderer", inputs: ["icon", "iconType", "size"] }, { kind: "pipe", type: SdcTruncatePipe, name: "sdcTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableCellContentComponent, isStandalone: true, selector: "sdc-table-cell-content", inputs: { cellConfigs: "cellConfigs", col: "col", resolveValue: "resolveValue", row: "row", actionsMenuOpen: "actionsMenuOpen", actionsMenuId: "actionsMenuId", defaultTextOverflow: "defaultTextOverflow", rowCheckboxId: "rowCheckboxId", rowLabel: "rowLabel", rowSelectionDisabled: "rowSelectionDisabled", forceLeftAlign: "forceLeftAlign", rowSelected: "rowSelected" }, outputs: { toggleActionsMenu: "toggleActionsMenu", toggleRow: "toggleRow", triggerButtonAction: "triggerButtonAction" }, host: { properties: { "class.sdc-table-cell-content--align-left": "resolvedAlignment === 'left'", "class.sdc-table-cell-content--align-center": "resolvedAlignment === 'center'", "class.sdc-table-cell-content--align-right": "resolvedAlignment === 'right'", "class.sdc-table-cell-content--nowrap": "col?.textOverflow === 'none'" } }, ngImport: i0, template: "<div class=\"sdc-table-content\">\n  @if (col.content?.length) {\n    <div class=\"sdc-table-multi-content\">\n      @for (item of col.content!; track $index) {\n        @switch (item.type ?? 'text') {\n          @case ('strong') {\n            <strong\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n            >{{ cellTextValue(item.field) | translate }}</strong>\n          }\n          @case ('code') {\n            <code [ngStyle]=\"item.style\" [class]=\"item.class ?? ''\">{{ cellTextValue(item.field) }}</code>\n          }\n          @default {\n            <span [ngStyle]=\"item.style\" [class]=\"item.class ?? ''\">{{ cellTextValue(item.field) | translate }}</span>\n          }\n        }\n      }\n    </div>\n  } @else {\n    @switch (col.type ?? 'text') {\n    @case ('checkbox-selection') {\n      <div class=\"sdc-table-checkbox\">\n        <input\n          type=\"checkbox\"\n          [id]=\"rowCheckboxId\"\n          [disabled]=\"rowSelectionDisabled\"\n          [checked]=\"rowSelected\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow.emit(getCheckedValue($event))\"\n          [attr.aria-label]=\"\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          \"\n          [attr.aria-checked]=\"rowSelected\"\n        />\n        <label [attr.for]=\"rowCheckboxId\" class=\"sr-only\">\n          {{\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          }}\n        </label>\n      </div>\n    }\n\n    @case ('date') {\n      <span class=\"sdc-table-text\" [attr.title]=\"ellipsisTitleText(formatDate())\">{{ formatDate() }}</span>\n    }\n\n    @case ('strong') {\n      <span class=\"sdc-table-strong-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n\n    @case ('code') {\n      <code class=\"sdc-table-code-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue())\">{{ displayText() }}</code>\n    }\n\n    @case ('link') {\n      <a class=\"sdc-table-link\"\n        [href]=\"cellTextValue()\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        (click)=\"$event.stopPropagation()\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </a>\n    }\n\n    @case ('currency') {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(formatCurrency())\">{{ formatCurrency() }}</span>\n    }\n\n    @case ('tag') {\n      <div class=\"sdc-table-tags\">\n        @for (tagItem of tagItems(); track tagItem.label + '-' + $index) {\n          <span\n            class=\"sdc-table-tag\"\n            [class.sdc-table-tag--enabled]=\"tagItem.tone === 'enabled'\"\n            [class.sdc-table-tag--disabled]=\"tagItem.tone === 'disabled'\"\n            [ngStyle]=\"tagItem.styles\"\n            [attr.title]=\"tagItem.tooltip ? (tagItem.tooltip | translate) : (tagItem.label | translate)\"\n          >\n            @if (tagItem.icon) {\n              <sdc-icon-renderer\n                class=\"sdc-table-tag__icon\"\n                [icon]=\"tagItem.icon\"\n                [iconType]=\"tagItem.iconType\"\n                [size]=\"tagIconSize\"\n              ></sdc-icon-renderer>\n            }\n            {{ tagItem.label | translate }}\n          </span>\n        }\n\n        @if (tagOverflow(); as overflow) {\n          @if (overflow.hiddenCount > 0) {\n            <span\n              class=\"sdc-table-tag sdc-table-tag--more\"\n              [attr.title]=\"\n                'platform.datacore.accessibility_table_tag_more_items'\n                  | translate: { items: tagOverflowTitle(overflow) }\n              \"\n            >\u2026</span>\n          }\n        }\n      </div>\n    }\n\n    @case ('button') {\n      <div class=\"sdc-table-button\">\n        <sdc-button\n          class=\"sdc-table-action-button\"\n          [size]=\"cellConfigs.button.size ?? 'default'\"\n          [priority]=\"cellConfigs.button.priority || 'primary'\"\n          [icon]=\"cellConfigs.button.icon\"\n          [label]=\"cellConfigs.button.label ?? ''\"\n          [disabled]=\"cellConfigs.button.disabled ?? false\"\n          [title]=\"cellConfigs.button.tooltip\"\n          [attr.size]=\"cellConfigs.button.size\"\n          [attr.priority]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.severity]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.icon]=\"cellConfigs.button.icon\"\n          [attr.label]=\"cellConfigs.button.label\"\n          [attr.disabled]=\"cellConfigs.button.disabled ? '' : null\"\n          [attr.title]=\"cellConfigs.button.tooltip || null\"\n          [attr.aria-label]=\"\n            (buttonAriaLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.data-key]=\"buttonKey()\"\n          (click)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.enter)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.space)=\"$event.preventDefault(); cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n        ></sdc-button>\n      </div>\n    }\n\n    @case ('actions') {\n      <div\n        class=\"sdc-table-actions\"\n        [class.sdc-table-actions--open]=\"actionsMenuOpen\"\n      >\n        <button\n          #actionsTrigger\n          type=\"button\"\n          class=\"sdc-table-actions-trigger\"\n          [class.sdc-table-actions-trigger--open]=\"actionsMenuOpen\"\n          [attr.aria-label]=\"\n            (actionsButtonLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-controls]=\"actionsMenuOpen ? actionsMenuId : null\"\n          [attr.aria-expanded]=\"actionsMenuOpen\"\n          (click)=\"onActionsClick($event, actionsTrigger)\"\n        >\n          <span class=\"sdc-table-actions-trigger__label\">\n            {{ actionsButtonLabel() | translate }}\n          </span>\n          <i class=\"fas fa-chevron-down sdc-table-actions-trigger__icon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    @case ('icon') {\n      @if (iconPresentation(); as iconItem) {\n        <span\n          class=\"sdc-table-icon\"\n          [ngStyle]=\"iconItem.colorStyle\"\n          [attr.title]=\"iconItem.tooltip ? (iconItem.tooltip | translate) : null\"\n          [attr.aria-label]=\"\n            (iconItem.label || iconItem.tooltip)\n              ? ((iconItem.label || iconItem.tooltip)! | translate)\n              : null\n          \"\n        >\n          @if (iconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"iconItem.icon\"\n              [iconType]=\"iconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (iconItem.label) {\n            <span class=\"sdc-table-icon__label\">{{ iconItem.label | translate }}</span>\n          }\n        </span>\n      }\n    }\n\n    @case ('icon-title') {\n      @if (titleIconPresentation(); as titleIconItem) {\n        <span\n          class=\"sdc-table-icon-title\"\n          [ngStyle]=\"titleIconItem.colorStyle\"\n          [attr.title]=\"titleIconItem.tooltip ? (titleIconItem.tooltip | translate) : null\"\n        >\n          @if (titleIconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"titleIconItem.icon\"\n              [iconType]=\"titleIconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (titleIconItem.label) {\n            <span [attr.title]=\"ellipsisTitleText(titleIconItem.label | translate)\">\n              {{ titleIconItem.label | translate | sdcTruncate:col:defaultTextOverflow }}\n            </span>\n          }\n        </span>\n      }\n    }\n\n    @default {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table-content{display:flex;align-items:center;width:100%;min-width:0}:host(.sdc-table-cell-content--align-left) .sdc-table-content{justify-content:flex-start;text-align:left}:host(.sdc-table-cell-content--align-center) .sdc-table-content{justify-content:center;text-align:center}:host(.sdc-table-cell-content--align-right) .sdc-table-content{justify-content:flex-end;text-align:right}.sdc-table-multi-content{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span,.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-strong-label{font-weight:500}.sdc-table-code-label{color:var(--sdc-tab-primary)}.sdc-table-link{display:inline-block;color:var(--sdc-tab-primary);text-decoration:underline}.sdc-table-link:hover,.sdc-table-link:focus-visible{text-decoration:none}.sdc-table-tags{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;max-width:100%;overflow:hidden}.sdc-table-tag{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:fit-content;min-width:fit-content;max-width:100%;border-radius:9999px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid currentColor;box-sizing:border-box;font-size:.875rem;padding:.35rem .875rem}.sdc-table-tag__icon{flex:0 0 auto}.sdc-table-tag--enabled{background:#dcfce7;color:#16a34a;border-color:#16a34a}.sdc-table-tag--disabled{background:#fee2e2;color:#ef4444;border-color:#ef4444}.sdc-table-tag--more{background:#f3f4f6;color:#374151;border-color:#374151;cursor:default;font-weight:700}.sdc-table-button{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;min-width:0}.sdc-table-button ::ng-deep sdc-button,.sdc-table-button ::ng-deep button{min-height:unset;min-width:unset;max-width:100%}.sdc-table-action-button{width:100%;max-width:100%;min-width:0}.sdc-table-icon,.sdc-table-icon-title{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%}.sdc-table-icon__label,.sdc-table-icon-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sdc-table-checkbox{display:flex;align-items:center;justify-content:center}.sdc-table-checkbox input[type=checkbox]{cursor:pointer}.sdc-table-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}.sdc-table-actions{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0}.sdc-table-actions-trigger{appearance:none;border:1px solid #c9ced6;background:#fff;border-radius:999px;min-width:4.875rem;height:2rem;padding:0 .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font:inherit;font-size:.8125rem;color:#374151;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.sdc-table-actions-trigger:hover{background:#f9fafb}.sdc-table-actions-trigger:focus-visible,.sdc-table-actions-trigger--open{outline:none;border-color:#9ca3af;box-shadow:0 0 0 2px #1118270a}.sdc-table-actions-trigger__label{line-height:1;white-space:nowrap}.sdc-table-actions-trigger__icon{font-size:.625rem;line-height:1;color:#6b7280}@media (max-width: 768px){.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}.sdc-table-tag{font-size:.8125rem;padding:.35rem .75rem}.sdc-table-actions-trigger{min-width:4.375rem;height:1.75rem;padding:0 .625rem;font-size:.75rem}.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link,.sdc-table-icon__label,.sdc-table-icon-title span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "sdc-button", inputs: ["id", "label", "ariaLabel", "disabled", "loading", "width", "priority", "size", "type", "icon", "rightIcon", "auxiliary", "rounded", "caret", "tooltip", "animation", "slide", "styleClass", "badge", "menuOptions", "menuContext", "model"], outputs: ["clicked"] }, { kind: "component", type: IconRendererComponent, selector: "sdc-icon-renderer", inputs: ["icon", "iconType", "size"] }, { kind: "pipe", type: SdcTruncatePipe, name: "sdcTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCellContentComponent, decorators: [{
             type: Component,
@@ -31240,7 +31186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[class.sdc-table-cell-content--align-center]': "resolvedAlignment === 'center'",
                         '[class.sdc-table-cell-content--align-right]': "resolvedAlignment === 'right'",
                         '[class.sdc-table-cell-content--nowrap]': "col?.textOverflow === 'none'"
-                    }, template: "<div class=\"sdc-table-content\">\n  @if (col.content?.length) {\n    <div class=\"sdc-table-multi-content\">\n      @for (item of col.content!; track $index) {\n        @switch (item.type ?? 'text') {\n          @case ('strong') {\n            <strong\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field) | translate)\"\n            >{{ displayText(item.field) | translate }}</strong>\n          }\n          @case ('code') {\n            <code\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field))\"\n            >{{ displayText(item.field) }}</code>\n          }\n          @default {\n            <span\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n              [attr.title]=\"ellipsisTitleText(cellTextValue(item.field) | translate)\"\n            >{{ displayText(item.field) | translate }}</span>\n          }\n        }\n      }\n    </div>\n  } @else {\n    @switch (col.type ?? 'text') {\n    @case ('checkbox-selection') {\n      <div class=\"sdc-table-checkbox\">\n        <input\n          type=\"checkbox\"\n          [id]=\"rowCheckboxId\"\n          [disabled]=\"rowSelectionDisabled\"\n          [checked]=\"rowSelected\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow.emit(getCheckedValue($event))\"\n          [attr.aria-label]=\"\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          \"\n          [attr.aria-checked]=\"rowSelected\"\n        />\n        <label [attr.for]=\"rowCheckboxId\" class=\"sr-only\">\n          {{\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          }}\n        </label>\n      </div>\n    }\n\n    @case ('date') {\n      <span class=\"sdc-table-text\" [attr.title]=\"ellipsisTitleText(formatDate())\">{{ formatDate() }}</span>\n    }\n\n    @case ('strong') {\n      <span class=\"sdc-table-strong-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n\n    @case ('code') {\n      <code class=\"sdc-table-code-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue())\">{{ displayText() }}</code>\n    }\n\n    @case ('link') {\n      <a class=\"sdc-table-link\"\n        [href]=\"cellTextValue()\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        (click)=\"$event.stopPropagation()\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </a>\n    }\n\n    @case ('currency') {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(formatCurrency())\">{{ formatCurrency() }}</span>\n    }\n\n    @case ('tag') {\n      <div class=\"sdc-table-tags\">\n        @for (tagItem of tagItems(); track tagItem.label + '-' + $index) {\n          <span\n            class=\"sdc-table-tag\"\n            [class.sdc-table-tag--enabled]=\"tagItem.tone === 'enabled'\"\n            [class.sdc-table-tag--disabled]=\"tagItem.tone === 'disabled'\"\n            [ngStyle]=\"tagItem.styles\"\n            [attr.title]=\"tagItem.tooltip ? (tagItem.tooltip | translate) : (tagItem.label | translate)\"\n          >\n            @if (tagItem.icon) {\n              <sdc-icon-renderer\n                class=\"sdc-table-tag__icon\"\n                [icon]=\"tagItem.icon\"\n                [iconType]=\"tagItem.iconType\"\n                [size]=\"tagIconSize\"\n              ></sdc-icon-renderer>\n            }\n            {{ tagItem.label | translate }}\n          </span>\n        }\n\n        @if (tagOverflow(); as overflow) {\n          @if (overflow.hiddenCount > 0) {\n            <span\n              class=\"sdc-table-tag sdc-table-tag--more\"\n              [attr.title]=\"\n                'platform.datacore.accessibility_table_tag_more_items'\n                  | translate: { items: tagOverflowTitle(overflow) }\n              \"\n            >\u2026</span>\n          }\n        }\n      </div>\n    }\n\n    @case ('button') {\n      <div class=\"sdc-table-button\">\n        <sdc-button\n          class=\"sdc-table-action-button\"\n          [size]=\"cellConfigs.button.size ?? 'default'\"\n          [priority]=\"cellConfigs.button.priority || 'primary'\"\n          [icon]=\"cellConfigs.button.icon\"\n          [label]=\"cellConfigs.button.label ?? ''\"\n          [disabled]=\"cellConfigs.button.disabled ?? false\"\n          [title]=\"cellConfigs.button.tooltip\"\n          [attr.size]=\"cellConfigs.button.size\"\n          [attr.priority]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.severity]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.icon]=\"cellConfigs.button.icon\"\n          [attr.label]=\"cellConfigs.button.label\"\n          [attr.disabled]=\"cellConfigs.button.disabled ? '' : null\"\n          [attr.title]=\"cellConfigs.button.tooltip || null\"\n          [attr.aria-label]=\"\n            (buttonAriaLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.data-key]=\"buttonKey()\"\n          (click)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.enter)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.space)=\"$event.preventDefault(); cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n        ></sdc-button>\n      </div>\n    }\n\n    @case ('actions') {\n      <div\n        class=\"sdc-table-actions\"\n        [class.sdc-table-actions--open]=\"actionsMenuOpen\"\n      >\n        <button\n          #actionsTrigger\n          type=\"button\"\n          class=\"sdc-table-actions-trigger\"\n          [class.sdc-table-actions-trigger--open]=\"actionsMenuOpen\"\n          [attr.aria-label]=\"\n            (actionsButtonLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-controls]=\"actionsMenuOpen ? actionsMenuId : null\"\n          [attr.aria-expanded]=\"actionsMenuOpen\"\n          (click)=\"onActionsClick($event, actionsTrigger)\"\n        >\n          <span class=\"sdc-table-actions-trigger__label\">\n            {{ actionsButtonLabel() | translate }}\n          </span>\n          <i class=\"fas fa-chevron-down sdc-table-actions-trigger__icon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    @case ('icon') {\n      @if (iconPresentation(); as iconItem) {\n        <span\n          class=\"sdc-table-icon\"\n          [ngStyle]=\"iconItem.colorStyle\"\n          [attr.title]=\"iconItem.tooltip ? (iconItem.tooltip | translate) : null\"\n          [attr.aria-label]=\"\n            (iconItem.label || iconItem.tooltip)\n              ? ((iconItem.label || iconItem.tooltip)! | translate)\n              : null\n          \"\n        >\n          @if (iconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"iconItem.icon\"\n              [iconType]=\"iconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (iconItem.label) {\n            <span class=\"sdc-table-icon__label\">{{ iconItem.label | translate }}</span>\n          }\n        </span>\n      }\n    }\n\n    @case ('icon-title') {\n      @if (titleIconPresentation(); as titleIconItem) {\n        <span\n          class=\"sdc-table-icon-title\"\n          [ngStyle]=\"titleIconItem.colorStyle\"\n          [attr.title]=\"titleIconItem.tooltip ? (titleIconItem.tooltip | translate) : null\"\n        >\n          @if (titleIconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"titleIconItem.icon\"\n              [iconType]=\"titleIconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (titleIconItem.label) {\n            <span [attr.title]=\"ellipsisTitleText(titleIconItem.label | translate)\">\n              {{ titleIconItem.label | translate | sdcTruncate:col:defaultTextOverflow }}\n            </span>\n          }\n        </span>\n      }\n    }\n\n    @default {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table-content{display:flex;align-items:center;width:100%;min-width:0}:host(.sdc-table-cell-content--align-left) .sdc-table-content{justify-content:flex-start;text-align:left}:host(.sdc-table-cell-content--align-center) .sdc-table-content{justify-content:center;text-align:center}:host(.sdc-table-cell-content--align-right) .sdc-table-content{justify-content:flex-end;text-align:right}.sdc-table-multi-content{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span,.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-strong-label{font-weight:500}.sdc-table-code-label{color:var(--sdc-tab-primary)}.sdc-table-link{display:inline-block;color:var(--sdc-tab-primary);text-decoration:underline}.sdc-table-link:hover,.sdc-table-link:focus-visible{text-decoration:none}.sdc-table-tags{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;max-width:100%;overflow:hidden}.sdc-table-tag{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:fit-content;min-width:fit-content;max-width:100%;border-radius:9999px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid currentColor;box-sizing:border-box;font-size:.875rem;padding:.35rem .875rem}.sdc-table-tag__icon{flex:0 0 auto}.sdc-table-tag--enabled{background:#dcfce7;color:#16a34a;border-color:#16a34a}.sdc-table-tag--disabled{background:#fee2e2;color:#ef4444;border-color:#ef4444}.sdc-table-tag--more{background:#f3f4f6;color:#374151;border-color:#374151;cursor:default;font-weight:700}.sdc-table-button{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;min-width:0}.sdc-table-button ::ng-deep sdc-button,.sdc-table-button ::ng-deep button{min-height:unset;min-width:unset;max-width:100%}.sdc-table-action-button{width:100%;max-width:100%;min-width:0}.sdc-table-icon,.sdc-table-icon-title{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%}.sdc-table-icon__label,.sdc-table-icon-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sdc-table-checkbox{display:flex;align-items:center;justify-content:center}.sdc-table-checkbox input[type=checkbox]{cursor:pointer}.sdc-table-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}.sdc-table-actions{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0}.sdc-table-actions-trigger{appearance:none;border:1px solid #c9ced6;background:#fff;border-radius:999px;min-width:4.875rem;height:2rem;padding:0 .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font:inherit;font-size:.8125rem;color:#374151;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.sdc-table-actions-trigger:hover{background:#f9fafb}.sdc-table-actions-trigger:focus-visible,.sdc-table-actions-trigger--open{outline:none;border-color:#9ca3af;box-shadow:0 0 0 2px #1118270a}.sdc-table-actions-trigger__label{line-height:1;white-space:nowrap}.sdc-table-actions-trigger__icon{font-size:.625rem;line-height:1;color:#6b7280}@media (max-width: 768px){.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}.sdc-table-tag{font-size:.8125rem;padding:.35rem .75rem}.sdc-table-actions-trigger{min-width:4.375rem;height:1.75rem;padding:0 .625rem;font-size:.75rem}.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link,.sdc-table-icon__label,.sdc-table-icon-title span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}:host-context(.sdc-table-expandable-summary-value) .sdc-table-text,:host-context(.sdc-table-expandable-summary-value) .sdc-table-multi-content>*{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}}\n"] }]
+                    }, template: "<div class=\"sdc-table-content\">\n  @if (col.content?.length) {\n    <div class=\"sdc-table-multi-content\">\n      @for (item of col.content!; track $index) {\n        @switch (item.type ?? 'text') {\n          @case ('strong') {\n            <strong\n              [ngStyle]=\"item.style\"\n              [class]=\"item.class ?? ''\"\n            >{{ cellTextValue(item.field) | translate }}</strong>\n          }\n          @case ('code') {\n            <code [ngStyle]=\"item.style\" [class]=\"item.class ?? ''\">{{ cellTextValue(item.field) }}</code>\n          }\n          @default {\n            <span [ngStyle]=\"item.style\" [class]=\"item.class ?? ''\">{{ cellTextValue(item.field) | translate }}</span>\n          }\n        }\n      }\n    </div>\n  } @else {\n    @switch (col.type ?? 'text') {\n    @case ('checkbox-selection') {\n      <div class=\"sdc-table-checkbox\">\n        <input\n          type=\"checkbox\"\n          [id]=\"rowCheckboxId\"\n          [disabled]=\"rowSelectionDisabled\"\n          [checked]=\"rowSelected\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow.emit(getCheckedValue($event))\"\n          [attr.aria-label]=\"\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          \"\n          [attr.aria-checked]=\"rowSelected\"\n        />\n        <label [attr.for]=\"rowCheckboxId\" class=\"sr-only\">\n          {{\n            'platform.datacore.accessibility_select_row'\n              | translate: { name: (rowLabel | translate) }\n          }}\n        </label>\n      </div>\n    }\n\n    @case ('date') {\n      <span class=\"sdc-table-text\" [attr.title]=\"ellipsisTitleText(formatDate())\">{{ formatDate() }}</span>\n    }\n\n    @case ('strong') {\n      <span class=\"sdc-table-strong-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n\n    @case ('code') {\n      <code class=\"sdc-table-code-label\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue())\">{{ displayText() }}</code>\n    }\n\n    @case ('link') {\n      <a class=\"sdc-table-link\"\n        [href]=\"cellTextValue()\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        (click)=\"$event.stopPropagation()\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </a>\n    }\n\n    @case ('currency') {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(formatCurrency())\">{{ formatCurrency() }}</span>\n    }\n\n    @case ('tag') {\n      <div class=\"sdc-table-tags\">\n        @for (tagItem of tagItems(); track tagItem.label + '-' + $index) {\n          <span\n            class=\"sdc-table-tag\"\n            [class.sdc-table-tag--enabled]=\"tagItem.tone === 'enabled'\"\n            [class.sdc-table-tag--disabled]=\"tagItem.tone === 'disabled'\"\n            [ngStyle]=\"tagItem.styles\"\n            [attr.title]=\"tagItem.tooltip ? (tagItem.tooltip | translate) : (tagItem.label | translate)\"\n          >\n            @if (tagItem.icon) {\n              <sdc-icon-renderer\n                class=\"sdc-table-tag__icon\"\n                [icon]=\"tagItem.icon\"\n                [iconType]=\"tagItem.iconType\"\n                [size]=\"tagIconSize\"\n              ></sdc-icon-renderer>\n            }\n            {{ tagItem.label | translate }}\n          </span>\n        }\n\n        @if (tagOverflow(); as overflow) {\n          @if (overflow.hiddenCount > 0) {\n            <span\n              class=\"sdc-table-tag sdc-table-tag--more\"\n              [attr.title]=\"\n                'platform.datacore.accessibility_table_tag_more_items'\n                  | translate: { items: tagOverflowTitle(overflow) }\n              \"\n            >\u2026</span>\n          }\n        }\n      </div>\n    }\n\n    @case ('button') {\n      <div class=\"sdc-table-button\">\n        <sdc-button\n          class=\"sdc-table-action-button\"\n          [size]=\"cellConfigs.button.size ?? 'default'\"\n          [priority]=\"cellConfigs.button.priority || 'primary'\"\n          [icon]=\"cellConfigs.button.icon\"\n          [label]=\"cellConfigs.button.label ?? ''\"\n          [disabled]=\"cellConfigs.button.disabled ?? false\"\n          [title]=\"cellConfigs.button.tooltip\"\n          [attr.size]=\"cellConfigs.button.size\"\n          [attr.priority]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.severity]=\"cellConfigs.button.priority || 'primary'\"\n          [attr.icon]=\"cellConfigs.button.icon\"\n          [attr.label]=\"cellConfigs.button.label\"\n          [attr.disabled]=\"cellConfigs.button.disabled ? '' : null\"\n          [attr.title]=\"cellConfigs.button.tooltip || null\"\n          [attr.aria-label]=\"\n            (buttonAriaLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.data-key]=\"buttonKey()\"\n          (click)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.enter)=\"cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n          (keydown.space)=\"$event.preventDefault(); cellConfigs.button.disabled ? null : triggerButtonAction.emit()\"\n        ></sdc-button>\n      </div>\n    }\n\n    @case ('actions') {\n      <div\n        class=\"sdc-table-actions\"\n        [class.sdc-table-actions--open]=\"actionsMenuOpen\"\n      >\n        <button\n          #actionsTrigger\n          type=\"button\"\n          class=\"sdc-table-actions-trigger\"\n          [class.sdc-table-actions-trigger--open]=\"actionsMenuOpen\"\n          [attr.aria-label]=\"\n            (actionsButtonLabel() | translate)\n              + ' - '\n              + (rowLabel | translate)\n          \"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-controls]=\"actionsMenuOpen ? actionsMenuId : null\"\n          [attr.aria-expanded]=\"actionsMenuOpen\"\n          (click)=\"onActionsClick($event, actionsTrigger)\"\n        >\n          <span class=\"sdc-table-actions-trigger__label\">\n            {{ actionsButtonLabel() | translate }}\n          </span>\n          <i class=\"fas fa-chevron-down sdc-table-actions-trigger__icon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    @case ('icon') {\n      @if (iconPresentation(); as iconItem) {\n        <span\n          class=\"sdc-table-icon\"\n          [ngStyle]=\"iconItem.colorStyle\"\n          [attr.title]=\"iconItem.tooltip ? (iconItem.tooltip | translate) : null\"\n          [attr.aria-label]=\"\n            (iconItem.label || iconItem.tooltip)\n              ? ((iconItem.label || iconItem.tooltip)! | translate)\n              : null\n          \"\n        >\n          @if (iconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"iconItem.icon\"\n              [iconType]=\"iconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (iconItem.label) {\n            <span class=\"sdc-table-icon__label\">{{ iconItem.label | translate }}</span>\n          }\n        </span>\n      }\n    }\n\n    @case ('icon-title') {\n      @if (titleIconPresentation(); as titleIconItem) {\n        <span\n          class=\"sdc-table-icon-title\"\n          [ngStyle]=\"titleIconItem.colorStyle\"\n          [attr.title]=\"titleIconItem.tooltip ? (titleIconItem.tooltip | translate) : null\"\n        >\n          @if (titleIconItem.icon) {\n            <sdc-icon-renderer\n              [icon]=\"titleIconItem.icon\"\n              [iconType]=\"titleIconItem.iconType\"\n              [size]=\"iconSize\"\n            ></sdc-icon-renderer>\n          }\n          @if (titleIconItem.label) {\n            <span [attr.title]=\"ellipsisTitleText(titleIconItem.label | translate)\">\n              {{ titleIconItem.label | translate | sdcTruncate:col:defaultTextOverflow }}\n            </span>\n          }\n        </span>\n      }\n    }\n\n    @default {\n      <span class=\"sdc-table-text\"\n        [attr.title]=\"ellipsisTitleText(cellTextValue() | translate)\">\n        {{ cellTextValue() | translate | sdcTruncate:col:defaultTextOverflow }}\n      </span>\n    }\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table-content{display:flex;align-items:center;width:100%;min-width:0}:host(.sdc-table-cell-content--align-left) .sdc-table-content{justify-content:flex-start;text-align:left}:host(.sdc-table-cell-content--align-center) .sdc-table-content{justify-content:center;text-align:center}:host(.sdc-table-cell-content--align-right) .sdc-table-content{justify-content:flex-end;text-align:right}.sdc-table-multi-content{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span,.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-strong-label{font-weight:500}.sdc-table-code-label{color:var(--sdc-tab-primary)}.sdc-table-link{display:inline-block;color:var(--sdc-tab-primary);text-decoration:underline}.sdc-table-link:hover,.sdc-table-link:focus-visible{text-decoration:none}.sdc-table-tags{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;max-width:100%;overflow:hidden}.sdc-table-tag{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:fit-content;min-width:fit-content;max-width:100%;border-radius:9999px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid currentColor;box-sizing:border-box;font-size:.875rem;padding:.35rem .875rem}.sdc-table-tag__icon{flex:0 0 auto}.sdc-table-tag--enabled{background:#dcfce7;color:#16a34a;border-color:#16a34a}.sdc-table-tag--disabled{background:#fee2e2;color:#ef4444;border-color:#ef4444}.sdc-table-tag--more{background:#f3f4f6;color:#374151;border-color:#374151;cursor:default;font-weight:700}.sdc-table-button{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;min-width:0}.sdc-table-button ::ng-deep sdc-button,.sdc-table-button ::ng-deep button{min-height:unset;min-width:unset;max-width:100%}.sdc-table-action-button{width:100%;max-width:100%;min-width:0}.sdc-table-icon,.sdc-table-icon-title{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%}.sdc-table-icon__label,.sdc-table-icon-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sdc-table-checkbox{display:flex;align-items:center;justify-content:center}.sdc-table-checkbox input[type=checkbox]{cursor:pointer}.sdc-table-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}.sdc-table-actions{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0}.sdc-table-actions-trigger{appearance:none;border:1px solid #c9ced6;background:#fff;border-radius:999px;min-width:4.875rem;height:2rem;padding:0 .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font:inherit;font-size:.8125rem;color:#374151;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.sdc-table-actions-trigger:hover{background:#f9fafb}.sdc-table-actions-trigger:focus-visible,.sdc-table-actions-trigger--open{outline:none;border-color:#9ca3af;box-shadow:0 0 0 2px #1118270a}.sdc-table-actions-trigger__label{line-height:1;white-space:nowrap}.sdc-table-actions-trigger__icon{font-size:.625rem;line-height:1;color:#6b7280}@media (max-width: 768px){.sdc-table-multi-content strong,.sdc-table-multi-content code,.sdc-table-multi-content span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}.sdc-table-tag{font-size:.8125rem;padding:.35rem .75rem}.sdc-table-actions-trigger{min-width:4.375rem;height:1.75rem;padding:0 .625rem;font-size:.75rem}.sdc-table-text,.sdc-table-strong-label,.sdc-table-code-label,.sdc-table-link,.sdc-table-icon__label,.sdc-table-icon-title span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}}\n"] }]
         }], propDecorators: { cellConfigs: [{
                 type: Input,
                 args: [{ required: true }]
@@ -31548,14 +31494,7 @@ class TableComponent {
         const estimatedHeight = safeRows * rowHeight + TABLE_DEFAULT_LOADING_VERTICAL_PADDING_PX;
         return Math.max(TABLE_DEFAULT_MIN_LOADING_HEIGHT_PX, estimatedHeight);
     });
-    // O corpo reserva "linhas por pagina x altura da linha" pra nao dar salto de layout
-    // quando os dados chegam. No estado VAZIO nao chega nada, e empilhado a conta
-    // explode: cada linha e um cartao de 120px, entao 10 linhas pedem 1224px de nada -
-    // medido num Galaxy S9+, a lista vazia virava 3,4 telas de rolagem.
-    //
-    // So no empilhado: em tela larga a reserva da uns 460px e segura o rodape no lugar,
-    // que e o comportamento que ja existia.
-    emptyBodyHeightPx = computed(() => this.isMobile() ? TABLE_EMPTY_STATE_MOBILE_HEIGHT_PX : this.bodyViewportHeightPx());
+    emptyBodyHeightPx = computed(() => this.bodyViewportHeightPx());
     tableMinWidthPx = computed(() => getTableMinWidthPx(this.colsSignal()));
     resolveValue = (obj, path) => getNestedValue(obj, path, this.pathPartsCache);
     onDocumentClick() {
@@ -31977,7 +31916,7 @@ class TableComponent {
         nextElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableComponent, isStandalone: true, selector: "sdc-table", inputs: { cols: "cols", data: "data", selection: "selection", loading: "loading", loadingIndicator: "loadingIndicator", config: "config", ariaLabel: "ariaLabel" }, outputs: { action: "action", rowClick: "rowClick", lazyLoad: "lazyLoad", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscapeKey()", "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<section\n  class=\"sdc-table\"\n  [class.sdc-table-stack]=\"isMobile()\"\n  [class.sdc-table-filtered]=\"!!globalFilter().trim()\"\n  [class.sdc-table--loading]=\"isLoading\"\n  [class.sdc-table--initial-loading]=\"showInitialLoading()\"\n>\n  <sdc-loading-state\n    class=\"sdc-table-loading-wrap\"\n    [loading]=\"isLoading\"\n    [blockWindow]=\"false\"\n    [blockDelayMs]=\"0\"\n    [indicator]=\"loadingIndicator\"\n  >\n    <div class=\"sdc-table-shell\" [style.--sdc-table-body-height.px]=\"bodyViewportHeightPx()\">\n      @if (showSearch()) {\n        <div class=\"sdc-table-caption\">\n          <div class=\"sdc-table-caption__search\" [class.sdc-table-caption__search--full-width]=\"searchFullWidth()\">\n            <sdc-searchbox\n              [disabled]=\"isLoading\"\n              [placeholder]=\"searchPlaceholder()\"\n              [triggerMode]=\"triggerMode()\"\n              (onSearch)=\"onSearchTerm($event)\"\n              (onClear)=\"onClearSearch()\"\n              [attr.aria-label]=\"'platform.datacore.accessibility_search_field' | translate\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (!isMobile()) {\n        <div\n          class=\"sdc-table-scroll\"\n          [style.--sdc-table-min-width]=\"isFitLayout() ? '100%' : tableMinWidthPx() + 'px'\"\n        >\n          <table\n            class=\"sdc-table-grid\"\n            [class.sdc-table-grid--fit]=\"isFitLayout()\"\n            role=\"table\"\n            [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n            [attr.aria-rowcount]=\"totalRecords()\"\n            [attr.aria-busy]=\"isLoading\"\n          >\n            <colgroup>\n              @for (col of cols; track $index) {\n                <col [style.width]=\"colWidthStyle(col)\" />\n              }\n            </colgroup>\n\n            <thead>\n              <tr role=\"row\">\n                @for (col of cols; track $index) {\n                  <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    [class.sdc-table-th-checkbox]=\"col.type === 'checkbox-selection'\"\n                    [class.sdc-table-th-currency]=\"col.type === 'currency'\"\n                    [class.sdc-table-th-button]=\"col.type === 'button'\"\n                    [class.sdc-table-th-actions]=\"col.type === 'actions'\"\n                    [class.sdc-table-sortable]=\"canSortColumn(col)\"\n                    [class.sdc-table-sortable-disabled]=\"isSortableColumn(col) && !canSortColumn(col)\"\n                    [class.sdc-table-header-disabled]=\"!hasDataRows()\"\n                    [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                    [ngClass]=\"columnAlignClass(col, 'header')\"\n                    [attr.aria-sort]=\"getSortAriaAttribute(col)\"\n                    [attr.tabindex]=\"hasDataRows() && canSortColumn(col) ? 0 : null\"\n                    [attr.aria-disabled]=\"!hasDataRows() || (isSortableColumn(col) && !canSortColumn(col)) ? 'true' : null\"\n                    [attr.aria-label]=\"\n                      isSortableColumn(col)\n                        ? (\n                            (col.header | translate)\n                            + ' - '\n                            + ('platform.datacore.accessibility_sortable_column' | translate)\n                          )\n                        : (col.header | translate)\n                    \"\n                    (click)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.enter)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.space)=\"$event.preventDefault();\n                      hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                  >\n                    @if (col.type === 'checkbox-selection' && (cellsCfg().checkbox.selectAll ?? true)) {\n                      <div class=\"sdc-table-th-inner sdc-table-th-inner--checkbox\">\n                        <span class=\"sdc-table-th-label sr-only\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n                        <span class=\"sdc-table-th-center\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"getSelectAllCheckboxId($index)\"\n                            [checked]=\"isPageFullySelected()\"\n                            [indeterminate]=\"isPagePartiallySelected()\"\n                            [disabled]=\"!hasSelectablePageRows()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleSelectPage(getCheckedValue($event))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSelectPage(!isPageFullySelected())\"\n                            [attr.aria-label]=\"'platform.datacore.accessibility_select_all_rows' | translate\"\n                            [attr.aria-checked]=\"getPageSelectionAriaChecked()\"\n                          />\n                          <label [for]=\"getSelectAllCheckboxId($index)\" class=\"sr-only\">\n                            {{ 'platform.datacore.accessibility_select_all_rows' | translate }}\n                          </label>\n                        </span>\n                      </div>\n                    } @else {\n                      <div class=\"sdc-table-th-inner\" [class.sdc-table-th-inner--sortable]=\"isSortableColumn(col)\">\n                        <span class=\"sdc-table-th-label\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n\n                        @if (col.headerTooltip) {\n                          <sdc-tooltip\n                            class=\"sdc-table-th-tooltip\"\n                            [pTooltip]=\"col.headerTooltip\"\n                            [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                            [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"$event.stopPropagation()\"\n                          >\n                            <i class=\"fas fa-circle-info sdc-table-th-tooltip__icon\" aria-hidden=\"true\"></i>\n                          </sdc-tooltip>\n                        }\n\n                        <span class=\"sdc-table-sort-overlay\" aria-hidden=\"true\">\n                          <sdc-table-sort-indicator\n                            [columnField]=\"col.field || null\"\n                            [columnType]=\"col.type\"\n                            [sortable]=\"isSortableColumn(col)\"\n                            [sortField]=\"sortField()\"\n                            [sortOrder]=\"sortOrder()\"\n                          ></sdc-table-sort-indicator>\n                        </span>\n                      </div>\n                    }\n                  </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n              @if (showInitialLoading()) {\n                @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n                  <tr class=\"sdc-table-initial-loading-row\" role=\"row\" [attr.aria-rowindex]=\"r + 1\" aria-hidden=\"true\">\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc sdc-table-td--initial-loading\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        role=\"cell\"\n                      >\n                        <div class=\"sdc-table-td-val sdc-table-td-val--initial-loading\"></div>\n                      </td>\n                    }\n                  </tr>\n                }\n              } @else {\n                @for (row of pageData(); track $index; let r = $index) {\n                  <tr\n                    role=\"row\"\n                    [attr.aria-rowindex]=\"r + 1\"\n                    (click)=\"onRowClicked(row)\"\n                    (keydown.enter)=\"onRowClicked(row)\"\n                  >\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        [attr.id]=\"col.colId || null\"\n                        role=\"cell\"\n                      >\n                        @if (col.cellTag === 'span') {\n                          <span class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </span>\n                        } @else if (col.cellTag === 'i') {\n                          <i class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </i>\n                        } @else if (col.cellTag === 'p') {\n                          <p class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </p>\n                        } @else {\n                          <div class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n\n          @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n            <sdc-empty-state\n              id=\"my-empty-state\"\n              iconClass=\"fa fa-inbox\"\n              [title]=\"emptyTitle()\"\n              [description]=\"emptyText()\"\n              class=\"sdc-table-empty-state\"\n              [style.min-height.px]=\"emptyBodyHeightPx()\"\n            ></sdc-empty-state>\n          }\n        </div>\n      } @else if (mobileMode() === 'stacked') {\n        <div\n          class=\"sdc-table-mobile-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n              <div class=\"sdc-table-mobile-card sdc-table-mobile-card--loading\" aria-hidden=\"true\">\n                @for (col of cols; track $index) {\n                  <div class=\"sdc-table-mobile-field sdc-table-mobile-field--loading\">\n                    <div class=\"sdc-table-mobile-label sdc-table-mobile-label--loading\"></div>\n                    <div class=\"sdc-table-mobile-skeleton\"></div>\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <div class=\"sdc-table-mobile-card\">\n                @for (col of cols; track $index) {\n                  <div\n                    class=\"sdc-table-mobile-field\"\n                    [class.sdc-table-mobile-field--full-width]=\"\n                      col.type === 'button' || col.type === 'actions' || col.type === 'checkbox-selection'\n                    \"\n                    [class.sdc-table-mobile-field--selected]=\"sortField() === col.field\"\n                    [class.sdc-table-mobile-field--sortable]=\"col.field && isSortableColumn(col)\"\n                    (click)=\"col.field && toggleSort(col.field, isSortableColumn(col))\"\n                  >\n                    @if (mobileFieldLabel(col)) {\n                      <div class=\"sdc-table-mobile-label-wrap\">\n                        @if (col.field && isSortableColumn(col)) {\n                          <button\n                            type=\"button\"\n                            class=\"sdc-table-mobile-label sdc-table-mobile-label--sortable\"\n                            [attr.aria-label]=\"\n                              (mobileFieldLabel(col) | translate)\n                                + ' - '\n                                + ('platform.datacore.accessibility_sortable_column' | translate)\n                            \"\n                            (click)=\"$event.stopPropagation(); toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.enter)=\"toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSort(col.field, isSortableColumn(col))\"\n                          >\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                            <sdc-table-sort-indicator\n                              [columnField]=\"col.field || null\"\n                              [columnType]=\"col.type\"\n                              [sortable]=\"isSortableColumn(col)\"\n                              [sortField]=\"sortField()\"\n                              [sortOrder]=\"sortOrder()\"\n                            ></sdc-table-sort-indicator>\n                          </button>\n                        } @else {\n                          <div class=\"sdc-table-mobile-label\">\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <div class=\"sdc-table-mobile-value\" [attr.id]=\"resolveCellId(col, row)\">\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"col\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                        [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, col)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      } @else {\n        <ul\n          class=\"sdc-table-expandable-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex) {\n              <li class=\"sdc-table-expandable-item sdc-table-expandable-item--loading\" aria-hidden=\"true\">\n                <div class=\"sdc-table-expandable-summary sdc-table-expandable-summary--loading\">\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-primary\"></div>\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-secondary\"></div>\n                  </div>\n                  <span class=\"sdc-table-expandable-chevron\" aria-hidden=\"true\">\n                    <i class=\"fas fa-chevron-down\"></i>\n                  </span>\n                </div>\n              </li>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <li\n                class=\"sdc-table-expandable-item\"\n                [class.sdc-table-expandable-item--expanded]=\"isRowExpanded(r)\"\n              >\n                <div\n                  class=\"sdc-table-expandable-summary\"\n                  (click)=\"toggleExpandRow(r)\"\n                  (keydown.enter)=\"toggleExpandRow(r)\"\n                  (keydown.space)=\"$event.preventDefault(); toggleExpandRow(r)\"\n                >\n                  @if (checkboxCol(); as cbCol) {\n                    <div\n                      class=\"sdc-table-expandable-checkbox\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    >\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"cbCol\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"false\"\n                        [actionsMenuId]=\"null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, cbCol)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, cbCol, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  }\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    @for (col of summaryCols(); track $index) {\n                      <div class=\"sdc-table-expandable-summary-field\">\n                        <span class=\"sdc-table-expandable-summary-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                        <div class=\"sdc-table-expandable-summary-value\">\n                          <sdc-table-cell-content\n                            [forceLeftAlign]=\"true\"\n                            [row]=\"row\"\n                            [col]=\"col\"\n                            [cellConfigs]=\"cellsCfg()\"\n                            [resolveValue]=\"resolveValue\"\n                            [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                            [rowLabel]=\"getRowCheckboxLabel(row)\"\n                            [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                            [rowSelected]=\"isRowSelected(row)\"\n                            [actionsMenuOpen]=\"false\"\n                            [actionsMenuId]=\"null\"\n                            (toggleRow)=\"onToggleRow(row, $event)\"\n                            (triggerButtonAction)=\"onButtonClick(row, col)\"\n                            [defaultTextOverflow]=\"defaultTextOverflow()\"\n                            (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                          ></sdc-table-cell-content>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"sdc-table-expandable-toggle\"\n                    [attr.aria-expanded]=\"isRowExpanded(r)\"\n                    [attr.aria-label]=\"\n                      isRowExpanded(r)\n                        ? ('platform.datacore.accessibility_collapse_row' | translate)\n                        : ('platform.datacore.accessibility_expand_row' | translate)\n                    \"\n                    (click)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.enter)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.space)=\"$event.preventDefault(); $event.stopPropagation(); toggleExpandRow(r)\"\n                  >\n                    <span\n                      class=\"sdc-table-expandable-chevron\"\n                      [class.sdc-table-expandable-chevron--open]=\"isRowExpanded(r)\"\n                      aria-hidden=\"true\"\n                    ><i class=\"fas fa-chevron-down\"></i></span>\n                  </button>\n                </div>\n                @if (isRowExpanded(r)) {\n                  <div class=\"sdc-table-expandable-details\">\n                    @for (col of cols; track $index) {\n                      @if (col.type !== 'checkbox-selection') {\n                        <div\n                          class=\"sdc-table-expandable-field\"\n                          [class.sdc-table-expandable-field--full-width]=\"\n                            col.type === 'button' || col.type === 'actions'\n                          \"\n                        >\n                          @if (col.type !== 'button' && col.type !== 'actions') {\n                            <div class=\"sdc-table-expandable-label-wrap\">\n                              <span class=\"sdc-table-expandable-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                            </div>\n                          }\n                          <div class=\"sdc-table-expandable-value\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [forceLeftAlign]=\"true\"\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </li>\n            }\n          }\n        </ul>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      }\n\n      @if (showPaginator()) {\n        <div class=\"sdc-table-paginator\">\n          <sdc-paginator\n            [first]=\"first()\"\n            [rows]=\"rows()\"\n            [totalRecords]=\"totalRecords()\"\n            [rowsPerPageOptions]=\"isMobile() ? [] : rowsPerPageOptions()\"\n            [showRowsPerPageSelector]=\"showRowsPerPageSelector()\"\n            [isMobile]=\"isMobile()\"\n            [totalRecordsLabel]=\"totalRecordsLabel()\"\n            (pageChange)=\"onPageChange($event)\"\n          ></sdc-paginator>\n        </div>\n      }\n    </div>\n  </sdc-loading-state>\n</section>\n\n@if (openMenuState(); as menu) {\n  <sdc-table-actions-menu\n    [items]=\"menu.items\"\n    [menuId]=\"menu.menuId\"\n    [top]=\"menu.top\"\n    [left]=\"menu.left\"\n    [width]=\"menu.width\"\n    (close)=\"onMenuClose($event)\"\n    (select)=\"onPortalActionClick($event)\"\n  ></sdc-table-actions-menu>\n}\n", styles: [":host{display:block;width:100%;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table{width:100%;box-sizing:border-box;overflow:visible;background:var(--sdc-table-bg-card)}.sdc-table-shell{display:block;--sdc-table-body-height: 220px;overflow:visible}.sdc-table-loading-wrap{display:block;width:100%;overflow:visible}.sdc-table-caption{width:100%;justify-content:flex-end;display:flex;padding:.75rem 0}.sdc-table-caption__search{width:min(100%,22rem)}.sdc-table-caption__search--full-width{width:100%}.sdc-table-scroll{width:100%;overflow-x:auto;overflow-y:visible}.sdc-table-grid{min-width:var(--sdc-table-min-width, 100%);width:100%;border-collapse:collapse;table-layout:auto}.sdc-table-grid--fit{table-layout:fixed}thead th{padding:var(--sdc-table-padding-cell);background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);-webkit-user-select:none;user-select:none;transition:background var(--sdc-table-transition-fast),border var(--sdc-table-transition-fast);min-height:44px;position:relative;overflow:hidden;text-align:left}thead th.sdc-table-sortable{cursor:pointer}thead th.sdc-table-sortable:hover{background:var(--sdc-table-th-hover-bg)}thead th.sdc-table-sortable-disabled,thead th.sdc-table-header-disabled{cursor:default}thead th.sdc-table-sortable-disabled:focus,thead th.sdc-table-sortable-disabled:focus-visible{outline:none;box-shadow:none}thead th.sdc-table-sortable:focus,thead th.sdc-table-sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #007bff);outline-offset:-2px;box-shadow:inset 0 0 0 3px #007bff33;position:relative;z-index:1}thead th.sdc-table-is-selected{background:var(--sdc-table-th-selected-bg)!important}thead th.sdc-table-is-selected .sdc-table-sort-overlay{right:.5rem}.sdc-table-th-inner{display:flex;align-items:center;gap:var(--sdc-table-gap-th-inner);width:100%;min-width:0;overflow:hidden;text-align:inherit}.sdc-table-sort-overlay{position:absolute;right:0;top:50%;transform:translateY(-50%)}tbody td{padding:.5rem var(--sdc-table-padding-cell);border-bottom:1px solid var(--sdc-table-border-gray);vertical-align:middle;overflow:visible}.sdc-table-td-val{display:flex;align-items:center;width:100%;min-width:0;overflow:hidden}.sdc-table-td-val--initial-loading{min-height:1.5rem}.sdc-table-initial-loading-row{background:var(--sdc-table-bg-card)}.sdc-table-td--initial-loading{height:3.625rem}.sdc-table-th-label{color:#333!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block;flex:1 1 auto;width:100%;text-align:inherit}.sdc-table-th-inner--sortable{padding-right:1.5rem}.sdc-table-th-tooltip{flex-shrink:0;display:inline-flex;align-items:center}.sdc-table-th-tooltip__icon{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-table-empty-state{display:flex;align-items:center;justify-content:center;min-height:var(--sdc-table-body-height);padding:0}.sdc-table--loading .sdc-table-shell{pointer-events:none;-webkit-user-select:none;user-select:none}.sdc-table--initial-loading .sdc-table-scroll{overflow-x:hidden}thead th.sdc-table-th-checkbox .sdc-table-th-inner--checkbox{justify-content:center}thead th.sdc-table-th-checkbox .sdc-table-th-center{display:flex;align-items:center;justify-content:center;width:100%}thead th.sdc-table-th-checkbox .sdc-table-th-center input{cursor:pointer;margin:0}thead th.sdc-table-th-checkbox .sdc-table-th-center input:disabled{cursor:not-allowed}.sdc-table-paginator{padding:.5rem 0;position:sticky;bottom:0;z-index:1;background:var(--sdc-table-bg-card)}.sdc-table-td-align-left{text-align:left}.sdc-table-td-align-center{text-align:center}.sdc-table-td-align-right{text-align:right}.sdc-table-th-align-left{text-align:left}.sdc-table-th-align-center{text-align:center}.sdc-table-th-align-right{text-align:right}.sdc-table-cell-content--nowrap .sdc-table-text,.sdc-table-cell-content--nowrap .sdc-table-strong-label,.sdc-table-cell-content--nowrap .sdc-table-code-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@keyframes sdc-mobile-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sdc-table-mobile-list{display:flex;flex-direction:column;width:100%;border:1px solid var(--sdc-table-border-gray);border-radius:.5rem;overflow:hidden}.sdc-table-mobile-card{display:flex;flex-direction:column;background:var(--sdc-table-bg-card);border-top:2px solid var(--sdc-table-border-gray)}.sdc-table-mobile-card:first-child{border-top:0}.sdc-table-mobile-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.5rem 1rem;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field:first-child{border-top:0;padding-top:.75rem}.sdc-table-mobile-field:last-child{padding-bottom:.75rem}.sdc-table-mobile-field--selected{background:#11182706}.sdc-table-mobile-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-mobile-label-wrap,.sdc-table-mobile-value{min-width:0}.sdc-table-mobile-field--full-width>.sdc-table-mobile-label-wrap{display:none}.sdc-table-mobile-label,.sdc-table-mobile-label--sortable{display:flex;align-items:center;justify-content:flex-start;gap:.25rem;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--sdc-text-muted, #6b7280);font:inherit;font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;text-align:left}.sdc-table-mobile-label--sortable{cursor:pointer}.sdc-table-mobile-label--sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:3px;border-radius:.375rem}.sdc-table-mobile-label--loading{width:5.5rem;height:.625rem;border-radius:999px;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b824,#94a3b842,#94a3b824);background-size:200% 100%}.sdc-table-mobile-skeleton{min-height:1.25rem;border-radius:.25rem;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b81a,#94a3b82e,#94a3b81a);background-size:200% 100%}.sdc-table-mobile-value{display:flex;align-items:flex-start;width:100%}@media (max-width: 768px){.sdc-table-caption__search{width:100%}.sdc-table-paginator{justify-content:center!important;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-mobile-field--sortable:hover{background:#11182705}}@media (max-width: 540px){.sdc-table-mobile-list{border-radius:.375rem}.sdc-table-mobile-field{grid-template-columns:1fr;gap:.125rem;padding:.4375rem .875rem}.sdc-table-mobile-field:first-child{padding-top:.625rem}.sdc-table-mobile-field:last-child{padding-bottom:.625rem}}.sdc-table-expandable-list{display:flex;flex-direction:column;width:100%;list-style:none;margin:0;padding:0;border:1px solid var(--sdc-table-border-gray);border-radius:.5rem;overflow:hidden}.sdc-table-expandable-item{display:flex;flex-direction:column;background:var(--sdc-table-bg-card);border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-expandable-item:first-child{border-top:0}.sdc-table-expandable-summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-expandable-summary--loading{pointer-events:none}.sdc-table-expandable-summary:hover{background:#11182705}.sdc-table-expandable-checkbox{flex:0 0 auto}.sdc-table-expandable-summary-fields{display:flex;flex:1 1 0;flex-wrap:wrap;gap:.125rem 1.5rem;min-width:0}.sdc-table-expandable-summary-field{display:flex;flex-direction:column;min-width:0}.sdc-table-expandable-summary-label{color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-expandable-summary-value{display:flex;align-items:center;min-width:0}.sdc-table-expandable-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sdc-text-muted, #6b7280);cursor:pointer;transition:color var(--sdc-table-transition-fast, .15s ease),background var(--sdc-table-transition-fast, .15s ease)}.sdc-table-expandable-toggle:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:2px}.sdc-table-expandable-toggle:hover{color:var(--sdc-text-default, #111827);background:#1118270f}.sdc-table-expandable-chevron{display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .2s ease}.sdc-table-expandable-label-wrap,.sdc-table-expandable-value{min-width:0}.sdc-table-expandable-details{padding:.375rem 0;border-top:1px solid var(--sdc-table-border-gray);background:#11182704}.sdc-table-expandable-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.375rem 1rem;border-top:1px solid rgba(0,0,0,.04)}.sdc-table-expandable-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-expandable-field:first-child{border-top:0}.sdc-table-expandable-field--full-width>.sdc-table-expandable-label-wrap{display:none}.sdc-table-expandable-label{display:flex;align-items:center;color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em}.sdc-table-expandable-value{display:flex;align-items:flex-start;width:100%}.sdc-table-expandable-skeleton-primary{width:55%;max-width:10rem}.sdc-table-expandable-skeleton-secondary{width:35%;max-width:7rem}.sdc-table-expandable-chevron--open{transform:rotate(180deg)}.sdc-table-expandable-item--expanded .sdc-table-expandable-summary{background:#11182706}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SearchboxComponent, selector: "sdc-searchbox", inputs: ["triggerMode", "debounceTimeMs", "ariaLabel", "inputRole", "inputAriaControls", "inputAriaDescribedBy", "inputAriaActiveDescendant", "inputAriaHaspopup", "inputAriaExpanded", "inputAutocomplete", "submitOnEnter", "clearOnEscape"], outputs: ["debouncedValueChange", "onSearch", "onClear"] }, { kind: "component", type: PaginatorComponent, selector: "sdc-paginator", inputs: ["first", "rows", "totalRecords", "rowsPerPageOptions", "showRowsPerPageSelector", "isMobile", "totalRecordsLabel"], outputs: ["pageChange"] }, { kind: "component", type: LoadingStateComponent, selector: "sdc-loading-state", inputs: ["indicator", "id", "blockWindow", "blockDelayMs", "unblockDelayMs", "loading"] }, { kind: "component", type: EmptyStateComponent, selector: "sdc-empty-state", inputs: ["id", "title", "variant", "titleParams", "iconClass", "description", "descriptionParams", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "primaryActionLabelParams", "secondaryActionLabel", "secondaryActionLabelParams", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: TableSortIndicatorComponent, selector: "sdc-table-sort-indicator", inputs: ["columnField", "columnType", "sortField", "sortOrder", "sortable"] }, { kind: "component", type: TableCellContentComponent, selector: "sdc-table-cell-content", inputs: ["cellConfigs", "col", "resolveValue", "row", "actionsMenuOpen", "actionsMenuId", "defaultTextOverflow", "rowCheckboxId", "rowLabel", "rowSelectionDisabled", "forceLeftAlign", "rowSelected"], outputs: ["toggleActionsMenu", "toggleRow", "triggerButtonAction"] }, { kind: "component", type: TableActionsMenuComponent, selector: "sdc-table-actions-menu", inputs: ["ariaLabel", "items", "left", "menuId", "top", "width"], outputs: ["close", "select"] }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled", "allowHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableComponent, isStandalone: true, selector: "sdc-table", inputs: { cols: "cols", data: "data", selection: "selection", loading: "loading", loadingIndicator: "loadingIndicator", config: "config", ariaLabel: "ariaLabel" }, outputs: { action: "action", rowClick: "rowClick", lazyLoad: "lazyLoad", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscapeKey()", "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<section\n  class=\"sdc-table\"\n  [class.sdc-table-stack]=\"isMobile()\"\n  [class.sdc-table-filtered]=\"!!globalFilter().trim()\"\n  [class.sdc-table--loading]=\"isLoading\"\n  [class.sdc-table--initial-loading]=\"showInitialLoading()\"\n>\n  <sdc-loading-state\n    class=\"sdc-table-loading-wrap\"\n    [loading]=\"isLoading\"\n    [blockWindow]=\"false\"\n    [blockDelayMs]=\"0\"\n    [indicator]=\"loadingIndicator\"\n  >\n    <div class=\"sdc-table-shell\" [style.--sdc-table-body-height.px]=\"bodyViewportHeightPx()\">\n      @if (showSearch()) {\n        <div class=\"sdc-table-caption\">\n          <div class=\"sdc-table-caption__search\" [class.sdc-table-caption__search--full-width]=\"searchFullWidth()\">\n            <sdc-searchbox\n              [disabled]=\"isLoading\"\n              [placeholder]=\"searchPlaceholder()\"\n              [triggerMode]=\"triggerMode()\"\n              (onSearch)=\"onSearchTerm($event)\"\n              (onClear)=\"onClearSearch()\"\n              [attr.aria-label]=\"'platform.datacore.accessibility_search_field' | translate\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (!isMobile()) {\n        <div\n          class=\"sdc-table-scroll\"\n          [style.--sdc-table-min-width]=\"isFitLayout() ? '100%' : tableMinWidthPx() + 'px'\"\n        >\n          <table\n            class=\"sdc-table-grid\"\n            [class.sdc-table-grid--fit]=\"isFitLayout()\"\n            role=\"table\"\n            [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n            [attr.aria-rowcount]=\"totalRecords()\"\n            [attr.aria-busy]=\"isLoading\"\n          >\n            <colgroup>\n              @for (col of cols; track $index) {\n                <col [style.width]=\"colWidthStyle(col)\" />\n              }\n            </colgroup>\n\n            <thead>\n              <tr role=\"row\">\n                @for (col of cols; track $index) {\n                  <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    [class.sdc-table-th-checkbox]=\"col.type === 'checkbox-selection'\"\n                    [class.sdc-table-th-currency]=\"col.type === 'currency'\"\n                    [class.sdc-table-th-button]=\"col.type === 'button'\"\n                    [class.sdc-table-th-actions]=\"col.type === 'actions'\"\n                    [class.sdc-table-sortable]=\"canSortColumn(col)\"\n                    [class.sdc-table-sortable-disabled]=\"isSortableColumn(col) && !canSortColumn(col)\"\n                    [class.sdc-table-header-disabled]=\"!hasDataRows()\"\n                    [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                    [ngClass]=\"columnAlignClass(col, 'header')\"\n                    [attr.aria-sort]=\"getSortAriaAttribute(col)\"\n                    [attr.tabindex]=\"hasDataRows() && canSortColumn(col) ? 0 : null\"\n                    [attr.aria-disabled]=\"!hasDataRows() || (isSortableColumn(col) && !canSortColumn(col)) ? 'true' : null\"\n                    [attr.aria-label]=\"\n                      isSortableColumn(col)\n                        ? (\n                            (col.header | translate)\n                            + ' - '\n                            + ('platform.datacore.accessibility_sortable_column' | translate)\n                          )\n                        : (col.header | translate)\n                    \"\n                    (click)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.enter)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.space)=\"$event.preventDefault();\n                      hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                  >\n                    @if (col.type === 'checkbox-selection' && (cellsCfg().checkbox.selectAll ?? true)) {\n                      <div class=\"sdc-table-th-inner sdc-table-th-inner--checkbox\">\n                        <span class=\"sdc-table-th-label sr-only\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n                        <span class=\"sdc-table-th-center\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"getSelectAllCheckboxId($index)\"\n                            [checked]=\"isPageFullySelected()\"\n                            [indeterminate]=\"isPagePartiallySelected()\"\n                            [disabled]=\"!hasSelectablePageRows()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleSelectPage(getCheckedValue($event))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSelectPage(!isPageFullySelected())\"\n                            [attr.aria-label]=\"'platform.datacore.accessibility_select_all_rows' | translate\"\n                            [attr.aria-checked]=\"getPageSelectionAriaChecked()\"\n                          />\n                          <label [for]=\"getSelectAllCheckboxId($index)\" class=\"sr-only\">\n                            {{ 'platform.datacore.accessibility_select_all_rows' | translate }}\n                          </label>\n                        </span>\n                      </div>\n                    } @else {\n                      <div class=\"sdc-table-th-inner\" [class.sdc-table-th-inner--sortable]=\"isSortableColumn(col)\">\n                        <span class=\"sdc-table-th-label\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n\n                        @if (col.headerTooltip) {\n                          <sdc-tooltip\n                            class=\"sdc-table-th-tooltip\"\n                            [pTooltip]=\"col.headerTooltip\"\n                            [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                            [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"$event.stopPropagation()\"\n                          >\n                            <i class=\"fas fa-circle-info sdc-table-th-tooltip__icon\" aria-hidden=\"true\"></i>\n                          </sdc-tooltip>\n                        }\n\n                        <span class=\"sdc-table-sort-overlay\" aria-hidden=\"true\">\n                          <sdc-table-sort-indicator\n                            [columnField]=\"col.field || null\"\n                            [columnType]=\"col.type\"\n                            [sortable]=\"isSortableColumn(col)\"\n                            [sortField]=\"sortField()\"\n                            [sortOrder]=\"sortOrder()\"\n                          ></sdc-table-sort-indicator>\n                        </span>\n                      </div>\n                    }\n                  </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n              @if (showInitialLoading()) {\n                @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n                  <tr class=\"sdc-table-initial-loading-row\" role=\"row\" [attr.aria-rowindex]=\"r + 1\" aria-hidden=\"true\">\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc sdc-table-td--initial-loading\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        role=\"cell\"\n                      >\n                        <div class=\"sdc-table-td-val sdc-table-td-val--initial-loading\"></div>\n                      </td>\n                    }\n                  </tr>\n                }\n              } @else {\n                @for (row of pageData(); track $index; let r = $index) {\n                  <tr\n                    role=\"row\"\n                    [attr.aria-rowindex]=\"r + 1\"\n                    (click)=\"onRowClicked(row)\"\n                    (keydown.enter)=\"onRowClicked(row)\"\n                  >\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        [attr.id]=\"col.colId || null\"\n                        role=\"cell\"\n                      >\n                        @if (col.cellTag === 'span') {\n                          <span class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </span>\n                        } @else if (col.cellTag === 'i') {\n                          <i class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </i>\n                        } @else if (col.cellTag === 'p') {\n                          <p class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </p>\n                        } @else {\n                          <div class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n\n          @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n            <sdc-empty-state\n              id=\"my-empty-state\"\n              iconClass=\"fa fa-inbox\"\n              [title]=\"emptyTitle()\"\n              [description]=\"emptyText()\"\n              class=\"sdc-table-empty-state\"\n              [style.min-height.px]=\"emptyBodyHeightPx()\"\n            ></sdc-empty-state>\n          }\n        </div>\n      } @else if (mobileMode() === 'stacked') {\n        <div\n          class=\"sdc-table-mobile-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n              <div class=\"sdc-table-mobile-card sdc-table-mobile-card--loading\" aria-hidden=\"true\">\n                @for (col of cols; track $index) {\n                  <div class=\"sdc-table-mobile-field sdc-table-mobile-field--loading\">\n                    <div class=\"sdc-table-mobile-label sdc-table-mobile-label--loading\"></div>\n                    <div class=\"sdc-table-mobile-skeleton\"></div>\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <div class=\"sdc-table-mobile-card\">\n                @for (col of cols; track $index) {\n                  <div\n                    class=\"sdc-table-mobile-field\"\n                    [class.sdc-table-mobile-field--full-width]=\"\n                      col.type === 'button' || col.type === 'actions' || col.type === 'checkbox-selection'\n                    \"\n                    [class.sdc-table-mobile-field--selected]=\"sortField() === col.field\"\n                    [class.sdc-table-mobile-field--sortable]=\"col.field && isSortableColumn(col)\"\n                    (click)=\"col.field && toggleSort(col.field, isSortableColumn(col))\"\n                  >\n                    @if (mobileFieldLabel(col)) {\n                      <div class=\"sdc-table-mobile-label-wrap\">\n                        @if (col.field && isSortableColumn(col)) {\n                          <button\n                            type=\"button\"\n                            class=\"sdc-table-mobile-label sdc-table-mobile-label--sortable\"\n                            [attr.aria-label]=\"\n                              (mobileFieldLabel(col) | translate)\n                                + ' - '\n                                + ('platform.datacore.accessibility_sortable_column' | translate)\n                            \"\n                            (click)=\"$event.stopPropagation(); toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.enter)=\"toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSort(col.field, isSortableColumn(col))\"\n                          >\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                            <sdc-table-sort-indicator\n                              [columnField]=\"col.field || null\"\n                              [columnType]=\"col.type\"\n                              [sortable]=\"isSortableColumn(col)\"\n                              [sortField]=\"sortField()\"\n                              [sortOrder]=\"sortOrder()\"\n                            ></sdc-table-sort-indicator>\n                          </button>\n                        } @else {\n                          <div class=\"sdc-table-mobile-label\">\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <div class=\"sdc-table-mobile-value\" [attr.id]=\"resolveCellId(col, row)\">\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"col\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                        [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, col)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      } @else {\n        <ul\n          class=\"sdc-table-expandable-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex) {\n              <li class=\"sdc-table-expandable-item sdc-table-expandable-item--loading\" aria-hidden=\"true\">\n                <div class=\"sdc-table-expandable-summary sdc-table-expandable-summary--loading\">\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-primary\"></div>\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-secondary\"></div>\n                  </div>\n                  <span class=\"sdc-table-expandable-chevron\" aria-hidden=\"true\">\n                    <i class=\"fas fa-chevron-down\"></i>\n                  </span>\n                </div>\n              </li>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <li\n                class=\"sdc-table-expandable-item\"\n                [class.sdc-table-expandable-item--expanded]=\"isRowExpanded(r)\"\n              >\n                <div\n                  class=\"sdc-table-expandable-summary\"\n                  (click)=\"toggleExpandRow(r)\"\n                  (keydown.enter)=\"toggleExpandRow(r)\"\n                  (keydown.space)=\"$event.preventDefault(); toggleExpandRow(r)\"\n                >\n                  @if (checkboxCol(); as cbCol) {\n                    <div\n                      class=\"sdc-table-expandable-checkbox\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    >\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"cbCol\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"false\"\n                        [actionsMenuId]=\"null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, cbCol)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, cbCol, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  }\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    @for (col of summaryCols(); track $index) {\n                      <div class=\"sdc-table-expandable-summary-field\">\n                        <span class=\"sdc-table-expandable-summary-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                        <div class=\"sdc-table-expandable-summary-value\">\n                          <sdc-table-cell-content\n                            [forceLeftAlign]=\"true\"\n                            [row]=\"row\"\n                            [col]=\"col\"\n                            [cellConfigs]=\"cellsCfg()\"\n                            [resolveValue]=\"resolveValue\"\n                            [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                            [rowLabel]=\"getRowCheckboxLabel(row)\"\n                            [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                            [rowSelected]=\"isRowSelected(row)\"\n                            [actionsMenuOpen]=\"false\"\n                            [actionsMenuId]=\"null\"\n                            (toggleRow)=\"onToggleRow(row, $event)\"\n                            (triggerButtonAction)=\"onButtonClick(row, col)\"\n                            [defaultTextOverflow]=\"defaultTextOverflow()\"\n                            (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                          ></sdc-table-cell-content>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"sdc-table-expandable-toggle\"\n                    [attr.aria-expanded]=\"isRowExpanded(r)\"\n                    [attr.aria-label]=\"\n                      isRowExpanded(r)\n                        ? ('platform.datacore.accessibility_collapse_row' | translate)\n                        : ('platform.datacore.accessibility_expand_row' | translate)\n                    \"\n                    (click)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.enter)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.space)=\"$event.preventDefault(); $event.stopPropagation(); toggleExpandRow(r)\"\n                  >\n                    <span\n                      class=\"sdc-table-expandable-chevron\"\n                      [class.sdc-table-expandable-chevron--open]=\"isRowExpanded(r)\"\n                      aria-hidden=\"true\"\n                    ><i class=\"fas fa-chevron-down\"></i></span>\n                  </button>\n                </div>\n                @if (isRowExpanded(r)) {\n                  <div class=\"sdc-table-expandable-details\">\n                    @for (col of cols; track $index) {\n                      @if (col.type !== 'checkbox-selection') {\n                        <div\n                          class=\"sdc-table-expandable-field\"\n                          [class.sdc-table-expandable-field--full-width]=\"\n                            col.type === 'button' || col.type === 'actions'\n                          \"\n                        >\n                          @if (col.type !== 'button' && col.type !== 'actions') {\n                            <div class=\"sdc-table-expandable-label-wrap\">\n                              <span class=\"sdc-table-expandable-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                            </div>\n                          }\n                          <div class=\"sdc-table-expandable-value\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [forceLeftAlign]=\"true\"\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </li>\n            }\n          }\n        </ul>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      }\n\n      @if (showPaginator()) {\n        <div class=\"sdc-table-paginator\">\n          <sdc-paginator\n            [first]=\"first()\"\n            [rows]=\"rows()\"\n            [totalRecords]=\"totalRecords()\"\n            [rowsPerPageOptions]=\"isMobile() ? [] : rowsPerPageOptions()\"\n            [showRowsPerPageSelector]=\"showRowsPerPageSelector()\"\n            [isMobile]=\"isMobile()\"\n            [totalRecordsLabel]=\"totalRecordsLabel()\"\n            (pageChange)=\"onPageChange($event)\"\n          ></sdc-paginator>\n        </div>\n      }\n    </div>\n  </sdc-loading-state>\n</section>\n\n@if (openMenuState(); as menu) {\n  <sdc-table-actions-menu\n    [items]=\"menu.items\"\n    [menuId]=\"menu.menuId\"\n    [top]=\"menu.top\"\n    [left]=\"menu.left\"\n    [width]=\"menu.width\"\n    (close)=\"onMenuClose($event)\"\n    (select)=\"onPortalActionClick($event)\"\n  ></sdc-table-actions-menu>\n}\n", styles: [":host{display:block;width:100%;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table{width:100%;box-sizing:border-box;overflow:visible;background:var(--sdc-table-bg-card)}.sdc-table-shell{display:block;--sdc-table-body-height: 220px;overflow:visible}.sdc-table-loading-wrap{display:block;width:100%;overflow:visible}.sdc-table-caption{width:100%;justify-content:flex-end;display:flex;padding:.75rem 0}.sdc-table-caption__search{width:min(100%,22rem)}.sdc-table-caption__search--full-width{width:100%}.sdc-table-scroll{width:100%;overflow-x:auto;overflow-y:visible}.sdc-table-grid{min-width:var(--sdc-table-min-width, 100%);width:100%;border-collapse:collapse;table-layout:auto}.sdc-table-grid--fit{table-layout:fixed}thead th{padding:var(--sdc-table-padding-cell);background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);-webkit-user-select:none;user-select:none;transition:background var(--sdc-table-transition-fast),border var(--sdc-table-transition-fast);min-height:44px;position:relative;overflow:hidden;text-align:left}thead th.sdc-table-sortable{cursor:pointer}thead th.sdc-table-sortable:hover{background:var(--sdc-table-th-hover-bg)}thead th.sdc-table-sortable-disabled,thead th.sdc-table-header-disabled{cursor:default}thead th.sdc-table-sortable-disabled:focus,thead th.sdc-table-sortable-disabled:focus-visible{outline:none;box-shadow:none}thead th.sdc-table-sortable:focus,thead th.sdc-table-sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #007bff);outline-offset:-2px;box-shadow:inset 0 0 0 3px #007bff33;position:relative;z-index:1}thead th.sdc-table-is-selected{background:var(--sdc-table-th-selected-bg)!important}thead th.sdc-table-is-selected .sdc-table-sort-overlay{right:.5rem}.sdc-table-th-inner{display:flex;align-items:center;gap:var(--sdc-table-gap-th-inner);width:100%;min-width:0;overflow:hidden;text-align:inherit}.sdc-table-sort-overlay{position:absolute;right:0;top:50%;transform:translateY(-50%)}tbody td{padding:.5rem var(--sdc-table-padding-cell);border-bottom:1px solid var(--sdc-table-border-gray);vertical-align:middle;overflow:visible}.sdc-table-td-val{display:flex;align-items:center;width:100%;min-width:0;overflow:hidden}.sdc-table-td-val--initial-loading{min-height:1.5rem}.sdc-table-initial-loading-row{background:var(--sdc-table-bg-card)}.sdc-table-td--initial-loading{height:3.625rem}.sdc-table-th-label{color:#333!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block;flex:1 1 auto;width:100%;text-align:inherit}.sdc-table-th-inner--sortable{padding-right:1.5rem}.sdc-table-th-tooltip{flex-shrink:0;display:inline-flex;align-items:center}.sdc-table-th-tooltip__icon{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-table-empty-state{display:flex;align-items:center;justify-content:center;min-height:var(--sdc-table-body-height);padding:0}.sdc-table--loading .sdc-table-shell{pointer-events:none;-webkit-user-select:none;user-select:none}.sdc-table--initial-loading .sdc-table-scroll{overflow-x:hidden}thead th.sdc-table-th-checkbox .sdc-table-th-inner--checkbox{justify-content:center}thead th.sdc-table-th-checkbox .sdc-table-th-center{display:flex;align-items:center;justify-content:center;width:100%}thead th.sdc-table-th-checkbox .sdc-table-th-center input{cursor:pointer;margin:0}thead th.sdc-table-th-checkbox .sdc-table-th-center input:disabled{cursor:not-allowed}.sdc-table-paginator{padding:.5rem 0;position:sticky;bottom:0;z-index:1;background:var(--sdc-table-bg-card)}.sdc-table-td-align-left{text-align:left}.sdc-table-td-align-center{text-align:center}.sdc-table-td-align-right{text-align:right}.sdc-table-th-align-left{text-align:left}.sdc-table-th-align-center{text-align:center}.sdc-table-th-align-right{text-align:right}.sdc-table-cell-content--nowrap .sdc-table-text,.sdc-table-cell-content--nowrap .sdc-table-strong-label,.sdc-table-cell-content--nowrap .sdc-table-code-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@keyframes sdc-mobile-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sdc-table-mobile-list{display:flex;flex-direction:column;width:100%;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:.5rem;overflow:hidden}.sdc-table-mobile-card{display:flex;flex-direction:column;background:var(--sdc-formfield-default-bg, #ffffff);border-top:2px solid var(--sdc-border-strong, #d1d5db)}.sdc-table-mobile-card:first-child{border-top:0}.sdc-table-mobile-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.5rem 1rem;border-top:1px solid rgba(0,0,0,.05)}.sdc-table-mobile-field:first-child{border-top:0;padding-top:.75rem}.sdc-table-mobile-field:last-child{padding-bottom:.75rem}.sdc-table-mobile-field--selected{background:#11182706}.sdc-table-mobile-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-mobile-label-wrap,.sdc-table-mobile-value{min-width:0}.sdc-table-mobile-field--full-width>.sdc-table-mobile-label-wrap{display:none}.sdc-table-mobile-label,.sdc-table-mobile-label--sortable{display:flex;align-items:center;justify-content:flex-start;gap:.25rem;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--sdc-text-muted, #6b7280);font:inherit;font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;text-align:left}.sdc-table-mobile-label--sortable{cursor:pointer}.sdc-table-mobile-label--sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:3px;border-radius:.375rem}.sdc-table-mobile-label--loading{width:5.5rem;height:.625rem;border-radius:999px;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b824,#94a3b842,#94a3b824);background-size:200% 100%}.sdc-table-mobile-skeleton{min-height:1.25rem;border-radius:.25rem;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b81a,#94a3b82e,#94a3b81a);background-size:200% 100%}.sdc-table-mobile-value{display:flex;align-items:flex-start;width:100%}@media (max-width: 768px){.sdc-table-caption__search{width:100%}.sdc-table-paginator{justify-content:center!important;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-mobile-field--sortable:hover{background:#11182705}}@media (max-width: 540px){.sdc-table-mobile-list{border-radius:.375rem}.sdc-table-mobile-field{grid-template-columns:1fr;gap:.125rem;padding:.4375rem .875rem}.sdc-table-mobile-field:first-child{padding-top:.625rem}.sdc-table-mobile-field:last-child{padding-bottom:.625rem}}.sdc-table-expandable-list{display:flex;flex-direction:column;width:100%;list-style:none;margin:0;padding:0;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:.5rem;overflow:hidden}.sdc-table-expandable-item{display:flex;flex-direction:column;background:var(--sdc-formfield-default-bg, #ffffff);border-top:1px solid var(--sdc-border-strong, #d1d5db)}.sdc-table-expandable-item:first-child{border-top:0}.sdc-table-expandable-summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-expandable-summary--loading{pointer-events:none}.sdc-table-expandable-summary:hover{background:#11182705}.sdc-table-expandable-checkbox{flex:0 0 auto}.sdc-table-expandable-summary-fields{display:flex;flex:1 1 0;flex-wrap:wrap;gap:.125rem 1.5rem;min-width:0}.sdc-table-expandable-summary-field{display:flex;flex-direction:column;min-width:0}.sdc-table-expandable-summary-label{color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-expandable-summary-value{display:flex;align-items:center;min-width:0}.sdc-table-expandable-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sdc-text-muted, #6b7280);cursor:pointer;transition:color var(--sdc-table-transition-fast, .15s ease),background var(--sdc-table-transition-fast, .15s ease)}.sdc-table-expandable-toggle:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:2px}.sdc-table-expandable-toggle:hover{color:var(--sdc-text-default, #111827);background:#1118270f}.sdc-table-expandable-chevron{display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .2s ease}.sdc-table-expandable-label-wrap,.sdc-table-expandable-value{min-width:0}.sdc-table-expandable-details{padding:.375rem 0;border-top:1px solid rgba(0,0,0,.06);background:#11182704}.sdc-table-expandable-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.375rem 1rem;border-top:1px solid rgba(0,0,0,.04)}.sdc-table-expandable-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-expandable-field:first-child{border-top:0}.sdc-table-expandable-field--full-width>.sdc-table-expandable-label-wrap{display:none}.sdc-table-expandable-label{display:flex;align-items:center;color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em}.sdc-table-expandable-value{display:flex;align-items:flex-start;width:100%}.sdc-table-expandable-skeleton-primary{width:55%;max-width:10rem}.sdc-table-expandable-skeleton-secondary{width:35%;max-width:7rem}.sdc-table-expandable-chevron--open{transform:rotate(180deg)}.sdc-table-expandable-item--expanded .sdc-table-expandable-summary{background:#11182706}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SearchboxComponent, selector: "sdc-searchbox", inputs: ["triggerMode", "debounceTimeMs", "ariaLabel", "inputRole", "inputAriaControls", "inputAriaDescribedBy", "inputAriaActiveDescendant", "inputAriaHaspopup", "inputAriaExpanded", "inputAutocomplete", "submitOnEnter", "clearOnEscape"], outputs: ["debouncedValueChange", "onSearch", "onClear"] }, { kind: "component", type: PaginatorComponent, selector: "sdc-paginator", inputs: ["first", "rows", "totalRecords", "rowsPerPageOptions", "showRowsPerPageSelector", "isMobile", "totalRecordsLabel"], outputs: ["pageChange"] }, { kind: "component", type: LoadingStateComponent, selector: "sdc-loading-state", inputs: ["indicator", "id", "blockWindow", "blockDelayMs", "unblockDelayMs", "loading"] }, { kind: "component", type: EmptyStateComponent, selector: "sdc-empty-state", inputs: ["id", "title", "variant", "titleParams", "iconClass", "description", "descriptionParams", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "primaryActionLabelParams", "secondaryActionLabel", "secondaryActionLabelParams", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: TableSortIndicatorComponent, selector: "sdc-table-sort-indicator", inputs: ["columnField", "columnType", "sortField", "sortOrder", "sortable"] }, { kind: "component", type: TableCellContentComponent, selector: "sdc-table-cell-content", inputs: ["cellConfigs", "col", "resolveValue", "row", "actionsMenuOpen", "actionsMenuId", "defaultTextOverflow", "rowCheckboxId", "rowLabel", "rowSelectionDisabled", "forceLeftAlign", "rowSelected"], outputs: ["toggleActionsMenu", "toggleRow", "triggerButtonAction"] }, { kind: "component", type: TableActionsMenuComponent, selector: "sdc-table-actions-menu", inputs: ["ariaLabel", "items", "left", "menuId", "top", "width"], outputs: ["close", "select"] }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled", "allowHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -31993,7 +31932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TableCellContentComponent,
                         TableActionsMenuComponent,
                         TooltipComponent
-                    ], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  class=\"sdc-table\"\n  [class.sdc-table-stack]=\"isMobile()\"\n  [class.sdc-table-filtered]=\"!!globalFilter().trim()\"\n  [class.sdc-table--loading]=\"isLoading\"\n  [class.sdc-table--initial-loading]=\"showInitialLoading()\"\n>\n  <sdc-loading-state\n    class=\"sdc-table-loading-wrap\"\n    [loading]=\"isLoading\"\n    [blockWindow]=\"false\"\n    [blockDelayMs]=\"0\"\n    [indicator]=\"loadingIndicator\"\n  >\n    <div class=\"sdc-table-shell\" [style.--sdc-table-body-height.px]=\"bodyViewportHeightPx()\">\n      @if (showSearch()) {\n        <div class=\"sdc-table-caption\">\n          <div class=\"sdc-table-caption__search\" [class.sdc-table-caption__search--full-width]=\"searchFullWidth()\">\n            <sdc-searchbox\n              [disabled]=\"isLoading\"\n              [placeholder]=\"searchPlaceholder()\"\n              [triggerMode]=\"triggerMode()\"\n              (onSearch)=\"onSearchTerm($event)\"\n              (onClear)=\"onClearSearch()\"\n              [attr.aria-label]=\"'platform.datacore.accessibility_search_field' | translate\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (!isMobile()) {\n        <div\n          class=\"sdc-table-scroll\"\n          [style.--sdc-table-min-width]=\"isFitLayout() ? '100%' : tableMinWidthPx() + 'px'\"\n        >\n          <table\n            class=\"sdc-table-grid\"\n            [class.sdc-table-grid--fit]=\"isFitLayout()\"\n            role=\"table\"\n            [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n            [attr.aria-rowcount]=\"totalRecords()\"\n            [attr.aria-busy]=\"isLoading\"\n          >\n            <colgroup>\n              @for (col of cols; track $index) {\n                <col [style.width]=\"colWidthStyle(col)\" />\n              }\n            </colgroup>\n\n            <thead>\n              <tr role=\"row\">\n                @for (col of cols; track $index) {\n                  <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    [class.sdc-table-th-checkbox]=\"col.type === 'checkbox-selection'\"\n                    [class.sdc-table-th-currency]=\"col.type === 'currency'\"\n                    [class.sdc-table-th-button]=\"col.type === 'button'\"\n                    [class.sdc-table-th-actions]=\"col.type === 'actions'\"\n                    [class.sdc-table-sortable]=\"canSortColumn(col)\"\n                    [class.sdc-table-sortable-disabled]=\"isSortableColumn(col) && !canSortColumn(col)\"\n                    [class.sdc-table-header-disabled]=\"!hasDataRows()\"\n                    [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                    [ngClass]=\"columnAlignClass(col, 'header')\"\n                    [attr.aria-sort]=\"getSortAriaAttribute(col)\"\n                    [attr.tabindex]=\"hasDataRows() && canSortColumn(col) ? 0 : null\"\n                    [attr.aria-disabled]=\"!hasDataRows() || (isSortableColumn(col) && !canSortColumn(col)) ? 'true' : null\"\n                    [attr.aria-label]=\"\n                      isSortableColumn(col)\n                        ? (\n                            (col.header | translate)\n                            + ' - '\n                            + ('platform.datacore.accessibility_sortable_column' | translate)\n                          )\n                        : (col.header | translate)\n                    \"\n                    (click)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.enter)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.space)=\"$event.preventDefault();\n                      hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                  >\n                    @if (col.type === 'checkbox-selection' && (cellsCfg().checkbox.selectAll ?? true)) {\n                      <div class=\"sdc-table-th-inner sdc-table-th-inner--checkbox\">\n                        <span class=\"sdc-table-th-label sr-only\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n                        <span class=\"sdc-table-th-center\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"getSelectAllCheckboxId($index)\"\n                            [checked]=\"isPageFullySelected()\"\n                            [indeterminate]=\"isPagePartiallySelected()\"\n                            [disabled]=\"!hasSelectablePageRows()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleSelectPage(getCheckedValue($event))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSelectPage(!isPageFullySelected())\"\n                            [attr.aria-label]=\"'platform.datacore.accessibility_select_all_rows' | translate\"\n                            [attr.aria-checked]=\"getPageSelectionAriaChecked()\"\n                          />\n                          <label [for]=\"getSelectAllCheckboxId($index)\" class=\"sr-only\">\n                            {{ 'platform.datacore.accessibility_select_all_rows' | translate }}\n                          </label>\n                        </span>\n                      </div>\n                    } @else {\n                      <div class=\"sdc-table-th-inner\" [class.sdc-table-th-inner--sortable]=\"isSortableColumn(col)\">\n                        <span class=\"sdc-table-th-label\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n\n                        @if (col.headerTooltip) {\n                          <sdc-tooltip\n                            class=\"sdc-table-th-tooltip\"\n                            [pTooltip]=\"col.headerTooltip\"\n                            [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                            [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"$event.stopPropagation()\"\n                          >\n                            <i class=\"fas fa-circle-info sdc-table-th-tooltip__icon\" aria-hidden=\"true\"></i>\n                          </sdc-tooltip>\n                        }\n\n                        <span class=\"sdc-table-sort-overlay\" aria-hidden=\"true\">\n                          <sdc-table-sort-indicator\n                            [columnField]=\"col.field || null\"\n                            [columnType]=\"col.type\"\n                            [sortable]=\"isSortableColumn(col)\"\n                            [sortField]=\"sortField()\"\n                            [sortOrder]=\"sortOrder()\"\n                          ></sdc-table-sort-indicator>\n                        </span>\n                      </div>\n                    }\n                  </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n              @if (showInitialLoading()) {\n                @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n                  <tr class=\"sdc-table-initial-loading-row\" role=\"row\" [attr.aria-rowindex]=\"r + 1\" aria-hidden=\"true\">\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc sdc-table-td--initial-loading\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        role=\"cell\"\n                      >\n                        <div class=\"sdc-table-td-val sdc-table-td-val--initial-loading\"></div>\n                      </td>\n                    }\n                  </tr>\n                }\n              } @else {\n                @for (row of pageData(); track $index; let r = $index) {\n                  <tr\n                    role=\"row\"\n                    [attr.aria-rowindex]=\"r + 1\"\n                    (click)=\"onRowClicked(row)\"\n                    (keydown.enter)=\"onRowClicked(row)\"\n                  >\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        [attr.id]=\"col.colId || null\"\n                        role=\"cell\"\n                      >\n                        @if (col.cellTag === 'span') {\n                          <span class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </span>\n                        } @else if (col.cellTag === 'i') {\n                          <i class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </i>\n                        } @else if (col.cellTag === 'p') {\n                          <p class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </p>\n                        } @else {\n                          <div class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n\n          @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n            <sdc-empty-state\n              id=\"my-empty-state\"\n              iconClass=\"fa fa-inbox\"\n              [title]=\"emptyTitle()\"\n              [description]=\"emptyText()\"\n              class=\"sdc-table-empty-state\"\n              [style.min-height.px]=\"emptyBodyHeightPx()\"\n            ></sdc-empty-state>\n          }\n        </div>\n      } @else if (mobileMode() === 'stacked') {\n        <div\n          class=\"sdc-table-mobile-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n              <div class=\"sdc-table-mobile-card sdc-table-mobile-card--loading\" aria-hidden=\"true\">\n                @for (col of cols; track $index) {\n                  <div class=\"sdc-table-mobile-field sdc-table-mobile-field--loading\">\n                    <div class=\"sdc-table-mobile-label sdc-table-mobile-label--loading\"></div>\n                    <div class=\"sdc-table-mobile-skeleton\"></div>\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <div class=\"sdc-table-mobile-card\">\n                @for (col of cols; track $index) {\n                  <div\n                    class=\"sdc-table-mobile-field\"\n                    [class.sdc-table-mobile-field--full-width]=\"\n                      col.type === 'button' || col.type === 'actions' || col.type === 'checkbox-selection'\n                    \"\n                    [class.sdc-table-mobile-field--selected]=\"sortField() === col.field\"\n                    [class.sdc-table-mobile-field--sortable]=\"col.field && isSortableColumn(col)\"\n                    (click)=\"col.field && toggleSort(col.field, isSortableColumn(col))\"\n                  >\n                    @if (mobileFieldLabel(col)) {\n                      <div class=\"sdc-table-mobile-label-wrap\">\n                        @if (col.field && isSortableColumn(col)) {\n                          <button\n                            type=\"button\"\n                            class=\"sdc-table-mobile-label sdc-table-mobile-label--sortable\"\n                            [attr.aria-label]=\"\n                              (mobileFieldLabel(col) | translate)\n                                + ' - '\n                                + ('platform.datacore.accessibility_sortable_column' | translate)\n                            \"\n                            (click)=\"$event.stopPropagation(); toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.enter)=\"toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSort(col.field, isSortableColumn(col))\"\n                          >\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                            <sdc-table-sort-indicator\n                              [columnField]=\"col.field || null\"\n                              [columnType]=\"col.type\"\n                              [sortable]=\"isSortableColumn(col)\"\n                              [sortField]=\"sortField()\"\n                              [sortOrder]=\"sortOrder()\"\n                            ></sdc-table-sort-indicator>\n                          </button>\n                        } @else {\n                          <div class=\"sdc-table-mobile-label\">\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <div class=\"sdc-table-mobile-value\" [attr.id]=\"resolveCellId(col, row)\">\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"col\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                        [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, col)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      } @else {\n        <ul\n          class=\"sdc-table-expandable-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex) {\n              <li class=\"sdc-table-expandable-item sdc-table-expandable-item--loading\" aria-hidden=\"true\">\n                <div class=\"sdc-table-expandable-summary sdc-table-expandable-summary--loading\">\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-primary\"></div>\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-secondary\"></div>\n                  </div>\n                  <span class=\"sdc-table-expandable-chevron\" aria-hidden=\"true\">\n                    <i class=\"fas fa-chevron-down\"></i>\n                  </span>\n                </div>\n              </li>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <li\n                class=\"sdc-table-expandable-item\"\n                [class.sdc-table-expandable-item--expanded]=\"isRowExpanded(r)\"\n              >\n                <div\n                  class=\"sdc-table-expandable-summary\"\n                  (click)=\"toggleExpandRow(r)\"\n                  (keydown.enter)=\"toggleExpandRow(r)\"\n                  (keydown.space)=\"$event.preventDefault(); toggleExpandRow(r)\"\n                >\n                  @if (checkboxCol(); as cbCol) {\n                    <div\n                      class=\"sdc-table-expandable-checkbox\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    >\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"cbCol\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"false\"\n                        [actionsMenuId]=\"null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, cbCol)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, cbCol, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  }\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    @for (col of summaryCols(); track $index) {\n                      <div class=\"sdc-table-expandable-summary-field\">\n                        <span class=\"sdc-table-expandable-summary-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                        <div class=\"sdc-table-expandable-summary-value\">\n                          <sdc-table-cell-content\n                            [forceLeftAlign]=\"true\"\n                            [row]=\"row\"\n                            [col]=\"col\"\n                            [cellConfigs]=\"cellsCfg()\"\n                            [resolveValue]=\"resolveValue\"\n                            [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                            [rowLabel]=\"getRowCheckboxLabel(row)\"\n                            [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                            [rowSelected]=\"isRowSelected(row)\"\n                            [actionsMenuOpen]=\"false\"\n                            [actionsMenuId]=\"null\"\n                            (toggleRow)=\"onToggleRow(row, $event)\"\n                            (triggerButtonAction)=\"onButtonClick(row, col)\"\n                            [defaultTextOverflow]=\"defaultTextOverflow()\"\n                            (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                          ></sdc-table-cell-content>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"sdc-table-expandable-toggle\"\n                    [attr.aria-expanded]=\"isRowExpanded(r)\"\n                    [attr.aria-label]=\"\n                      isRowExpanded(r)\n                        ? ('platform.datacore.accessibility_collapse_row' | translate)\n                        : ('platform.datacore.accessibility_expand_row' | translate)\n                    \"\n                    (click)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.enter)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.space)=\"$event.preventDefault(); $event.stopPropagation(); toggleExpandRow(r)\"\n                  >\n                    <span\n                      class=\"sdc-table-expandable-chevron\"\n                      [class.sdc-table-expandable-chevron--open]=\"isRowExpanded(r)\"\n                      aria-hidden=\"true\"\n                    ><i class=\"fas fa-chevron-down\"></i></span>\n                  </button>\n                </div>\n                @if (isRowExpanded(r)) {\n                  <div class=\"sdc-table-expandable-details\">\n                    @for (col of cols; track $index) {\n                      @if (col.type !== 'checkbox-selection') {\n                        <div\n                          class=\"sdc-table-expandable-field\"\n                          [class.sdc-table-expandable-field--full-width]=\"\n                            col.type === 'button' || col.type === 'actions'\n                          \"\n                        >\n                          @if (col.type !== 'button' && col.type !== 'actions') {\n                            <div class=\"sdc-table-expandable-label-wrap\">\n                              <span class=\"sdc-table-expandable-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                            </div>\n                          }\n                          <div class=\"sdc-table-expandable-value\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [forceLeftAlign]=\"true\"\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </li>\n            }\n          }\n        </ul>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      }\n\n      @if (showPaginator()) {\n        <div class=\"sdc-table-paginator\">\n          <sdc-paginator\n            [first]=\"first()\"\n            [rows]=\"rows()\"\n            [totalRecords]=\"totalRecords()\"\n            [rowsPerPageOptions]=\"isMobile() ? [] : rowsPerPageOptions()\"\n            [showRowsPerPageSelector]=\"showRowsPerPageSelector()\"\n            [isMobile]=\"isMobile()\"\n            [totalRecordsLabel]=\"totalRecordsLabel()\"\n            (pageChange)=\"onPageChange($event)\"\n          ></sdc-paginator>\n        </div>\n      }\n    </div>\n  </sdc-loading-state>\n</section>\n\n@if (openMenuState(); as menu) {\n  <sdc-table-actions-menu\n    [items]=\"menu.items\"\n    [menuId]=\"menu.menuId\"\n    [top]=\"menu.top\"\n    [left]=\"menu.left\"\n    [width]=\"menu.width\"\n    (close)=\"onMenuClose($event)\"\n    (select)=\"onPortalActionClick($event)\"\n  ></sdc-table-actions-menu>\n}\n", styles: [":host{display:block;width:100%;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table{width:100%;box-sizing:border-box;overflow:visible;background:var(--sdc-table-bg-card)}.sdc-table-shell{display:block;--sdc-table-body-height: 220px;overflow:visible}.sdc-table-loading-wrap{display:block;width:100%;overflow:visible}.sdc-table-caption{width:100%;justify-content:flex-end;display:flex;padding:.75rem 0}.sdc-table-caption__search{width:min(100%,22rem)}.sdc-table-caption__search--full-width{width:100%}.sdc-table-scroll{width:100%;overflow-x:auto;overflow-y:visible}.sdc-table-grid{min-width:var(--sdc-table-min-width, 100%);width:100%;border-collapse:collapse;table-layout:auto}.sdc-table-grid--fit{table-layout:fixed}thead th{padding:var(--sdc-table-padding-cell);background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);-webkit-user-select:none;user-select:none;transition:background var(--sdc-table-transition-fast),border var(--sdc-table-transition-fast);min-height:44px;position:relative;overflow:hidden;text-align:left}thead th.sdc-table-sortable{cursor:pointer}thead th.sdc-table-sortable:hover{background:var(--sdc-table-th-hover-bg)}thead th.sdc-table-sortable-disabled,thead th.sdc-table-header-disabled{cursor:default}thead th.sdc-table-sortable-disabled:focus,thead th.sdc-table-sortable-disabled:focus-visible{outline:none;box-shadow:none}thead th.sdc-table-sortable:focus,thead th.sdc-table-sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #007bff);outline-offset:-2px;box-shadow:inset 0 0 0 3px #007bff33;position:relative;z-index:1}thead th.sdc-table-is-selected{background:var(--sdc-table-th-selected-bg)!important}thead th.sdc-table-is-selected .sdc-table-sort-overlay{right:.5rem}.sdc-table-th-inner{display:flex;align-items:center;gap:var(--sdc-table-gap-th-inner);width:100%;min-width:0;overflow:hidden;text-align:inherit}.sdc-table-sort-overlay{position:absolute;right:0;top:50%;transform:translateY(-50%)}tbody td{padding:.5rem var(--sdc-table-padding-cell);border-bottom:1px solid var(--sdc-table-border-gray);vertical-align:middle;overflow:visible}.sdc-table-td-val{display:flex;align-items:center;width:100%;min-width:0;overflow:hidden}.sdc-table-td-val--initial-loading{min-height:1.5rem}.sdc-table-initial-loading-row{background:var(--sdc-table-bg-card)}.sdc-table-td--initial-loading{height:3.625rem}.sdc-table-th-label{color:#333!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block;flex:1 1 auto;width:100%;text-align:inherit}.sdc-table-th-inner--sortable{padding-right:1.5rem}.sdc-table-th-tooltip{flex-shrink:0;display:inline-flex;align-items:center}.sdc-table-th-tooltip__icon{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-table-empty-state{display:flex;align-items:center;justify-content:center;min-height:var(--sdc-table-body-height);padding:0}.sdc-table--loading .sdc-table-shell{pointer-events:none;-webkit-user-select:none;user-select:none}.sdc-table--initial-loading .sdc-table-scroll{overflow-x:hidden}thead th.sdc-table-th-checkbox .sdc-table-th-inner--checkbox{justify-content:center}thead th.sdc-table-th-checkbox .sdc-table-th-center{display:flex;align-items:center;justify-content:center;width:100%}thead th.sdc-table-th-checkbox .sdc-table-th-center input{cursor:pointer;margin:0}thead th.sdc-table-th-checkbox .sdc-table-th-center input:disabled{cursor:not-allowed}.sdc-table-paginator{padding:.5rem 0;position:sticky;bottom:0;z-index:1;background:var(--sdc-table-bg-card)}.sdc-table-td-align-left{text-align:left}.sdc-table-td-align-center{text-align:center}.sdc-table-td-align-right{text-align:right}.sdc-table-th-align-left{text-align:left}.sdc-table-th-align-center{text-align:center}.sdc-table-th-align-right{text-align:right}.sdc-table-cell-content--nowrap .sdc-table-text,.sdc-table-cell-content--nowrap .sdc-table-strong-label,.sdc-table-cell-content--nowrap .sdc-table-code-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@keyframes sdc-mobile-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sdc-table-mobile-list{display:flex;flex-direction:column;width:100%;border:1px solid var(--sdc-table-border-gray);border-radius:.5rem;overflow:hidden}.sdc-table-mobile-card{display:flex;flex-direction:column;background:var(--sdc-table-bg-card);border-top:2px solid var(--sdc-table-border-gray)}.sdc-table-mobile-card:first-child{border-top:0}.sdc-table-mobile-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.5rem 1rem;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field:first-child{border-top:0;padding-top:.75rem}.sdc-table-mobile-field:last-child{padding-bottom:.75rem}.sdc-table-mobile-field--selected{background:#11182706}.sdc-table-mobile-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-mobile-label-wrap,.sdc-table-mobile-value{min-width:0}.sdc-table-mobile-field--full-width>.sdc-table-mobile-label-wrap{display:none}.sdc-table-mobile-label,.sdc-table-mobile-label--sortable{display:flex;align-items:center;justify-content:flex-start;gap:.25rem;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--sdc-text-muted, #6b7280);font:inherit;font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;text-align:left}.sdc-table-mobile-label--sortable{cursor:pointer}.sdc-table-mobile-label--sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:3px;border-radius:.375rem}.sdc-table-mobile-label--loading{width:5.5rem;height:.625rem;border-radius:999px;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b824,#94a3b842,#94a3b824);background-size:200% 100%}.sdc-table-mobile-skeleton{min-height:1.25rem;border-radius:.25rem;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b81a,#94a3b82e,#94a3b81a);background-size:200% 100%}.sdc-table-mobile-value{display:flex;align-items:flex-start;width:100%}@media (max-width: 768px){.sdc-table-caption__search{width:100%}.sdc-table-paginator{justify-content:center!important;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-mobile-field--sortable:hover{background:#11182705}}@media (max-width: 540px){.sdc-table-mobile-list{border-radius:.375rem}.sdc-table-mobile-field{grid-template-columns:1fr;gap:.125rem;padding:.4375rem .875rem}.sdc-table-mobile-field:first-child{padding-top:.625rem}.sdc-table-mobile-field:last-child{padding-bottom:.625rem}}.sdc-table-expandable-list{display:flex;flex-direction:column;width:100%;list-style:none;margin:0;padding:0;border:1px solid var(--sdc-table-border-gray);border-radius:.5rem;overflow:hidden}.sdc-table-expandable-item{display:flex;flex-direction:column;background:var(--sdc-table-bg-card);border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-expandable-item:first-child{border-top:0}.sdc-table-expandable-summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-expandable-summary--loading{pointer-events:none}.sdc-table-expandable-summary:hover{background:#11182705}.sdc-table-expandable-checkbox{flex:0 0 auto}.sdc-table-expandable-summary-fields{display:flex;flex:1 1 0;flex-wrap:wrap;gap:.125rem 1.5rem;min-width:0}.sdc-table-expandable-summary-field{display:flex;flex-direction:column;min-width:0}.sdc-table-expandable-summary-label{color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-expandable-summary-value{display:flex;align-items:center;min-width:0}.sdc-table-expandable-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sdc-text-muted, #6b7280);cursor:pointer;transition:color var(--sdc-table-transition-fast, .15s ease),background var(--sdc-table-transition-fast, .15s ease)}.sdc-table-expandable-toggle:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:2px}.sdc-table-expandable-toggle:hover{color:var(--sdc-text-default, #111827);background:#1118270f}.sdc-table-expandable-chevron{display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .2s ease}.sdc-table-expandable-label-wrap,.sdc-table-expandable-value{min-width:0}.sdc-table-expandable-details{padding:.375rem 0;border-top:1px solid var(--sdc-table-border-gray);background:#11182704}.sdc-table-expandable-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.375rem 1rem;border-top:1px solid rgba(0,0,0,.04)}.sdc-table-expandable-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-expandable-field:first-child{border-top:0}.sdc-table-expandable-field--full-width>.sdc-table-expandable-label-wrap{display:none}.sdc-table-expandable-label{display:flex;align-items:center;color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em}.sdc-table-expandable-value{display:flex;align-items:flex-start;width:100%}.sdc-table-expandable-skeleton-primary{width:55%;max-width:10rem}.sdc-table-expandable-skeleton-secondary{width:35%;max-width:7rem}.sdc-table-expandable-chevron--open{transform:rotate(180deg)}.sdc-table-expandable-item--expanded .sdc-table-expandable-summary{background:#11182706}\n"] }]
+                    ], encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  class=\"sdc-table\"\n  [class.sdc-table-stack]=\"isMobile()\"\n  [class.sdc-table-filtered]=\"!!globalFilter().trim()\"\n  [class.sdc-table--loading]=\"isLoading\"\n  [class.sdc-table--initial-loading]=\"showInitialLoading()\"\n>\n  <sdc-loading-state\n    class=\"sdc-table-loading-wrap\"\n    [loading]=\"isLoading\"\n    [blockWindow]=\"false\"\n    [blockDelayMs]=\"0\"\n    [indicator]=\"loadingIndicator\"\n  >\n    <div class=\"sdc-table-shell\" [style.--sdc-table-body-height.px]=\"bodyViewportHeightPx()\">\n      @if (showSearch()) {\n        <div class=\"sdc-table-caption\">\n          <div class=\"sdc-table-caption__search\" [class.sdc-table-caption__search--full-width]=\"searchFullWidth()\">\n            <sdc-searchbox\n              [disabled]=\"isLoading\"\n              [placeholder]=\"searchPlaceholder()\"\n              [triggerMode]=\"triggerMode()\"\n              (onSearch)=\"onSearchTerm($event)\"\n              (onClear)=\"onClearSearch()\"\n              [attr.aria-label]=\"'platform.datacore.accessibility_search_field' | translate\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (!isMobile()) {\n        <div\n          class=\"sdc-table-scroll\"\n          [style.--sdc-table-min-width]=\"isFitLayout() ? '100%' : tableMinWidthPx() + 'px'\"\n        >\n          <table\n            class=\"sdc-table-grid\"\n            [class.sdc-table-grid--fit]=\"isFitLayout()\"\n            role=\"table\"\n            [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n            [attr.aria-rowcount]=\"totalRecords()\"\n            [attr.aria-busy]=\"isLoading\"\n          >\n            <colgroup>\n              @for (col of cols; track $index) {\n                <col [style.width]=\"colWidthStyle(col)\" />\n              }\n            </colgroup>\n\n            <thead>\n              <tr role=\"row\">\n                @for (col of cols; track $index) {\n                  <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    [class.sdc-table-th-checkbox]=\"col.type === 'checkbox-selection'\"\n                    [class.sdc-table-th-currency]=\"col.type === 'currency'\"\n                    [class.sdc-table-th-button]=\"col.type === 'button'\"\n                    [class.sdc-table-th-actions]=\"col.type === 'actions'\"\n                    [class.sdc-table-sortable]=\"canSortColumn(col)\"\n                    [class.sdc-table-sortable-disabled]=\"isSortableColumn(col) && !canSortColumn(col)\"\n                    [class.sdc-table-header-disabled]=\"!hasDataRows()\"\n                    [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                    [ngClass]=\"columnAlignClass(col, 'header')\"\n                    [attr.aria-sort]=\"getSortAriaAttribute(col)\"\n                    [attr.tabindex]=\"hasDataRows() && canSortColumn(col) ? 0 : null\"\n                    [attr.aria-disabled]=\"!hasDataRows() || (isSortableColumn(col) && !canSortColumn(col)) ? 'true' : null\"\n                    [attr.aria-label]=\"\n                      isSortableColumn(col)\n                        ? (\n                            (col.header | translate)\n                            + ' - '\n                            + ('platform.datacore.accessibility_sortable_column' | translate)\n                          )\n                        : (col.header | translate)\n                    \"\n                    (click)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.enter)=\"hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                    (keydown.space)=\"$event.preventDefault();\n                      hasDataRows() && col.field ? toggleSort(col.field, canSortColumn(col)) : null\"\n                  >\n                    @if (col.type === 'checkbox-selection' && (cellsCfg().checkbox.selectAll ?? true)) {\n                      <div class=\"sdc-table-th-inner sdc-table-th-inner--checkbox\">\n                        <span class=\"sdc-table-th-label sr-only\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n                        <span class=\"sdc-table-th-center\">\n                          <input\n                            type=\"checkbox\"\n                            [id]=\"getSelectAllCheckboxId($index)\"\n                            [checked]=\"isPageFullySelected()\"\n                            [indeterminate]=\"isPagePartiallySelected()\"\n                            [disabled]=\"!hasSelectablePageRows()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleSelectPage(getCheckedValue($event))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSelectPage(!isPageFullySelected())\"\n                            [attr.aria-label]=\"'platform.datacore.accessibility_select_all_rows' | translate\"\n                            [attr.aria-checked]=\"getPageSelectionAriaChecked()\"\n                          />\n                          <label [for]=\"getSelectAllCheckboxId($index)\" class=\"sr-only\">\n                            {{ 'platform.datacore.accessibility_select_all_rows' | translate }}\n                          </label>\n                        </span>\n                      </div>\n                    } @else {\n                      <div class=\"sdc-table-th-inner\" [class.sdc-table-th-inner--sortable]=\"isSortableColumn(col)\">\n                        <span class=\"sdc-table-th-label\" aria-hidden=\"true\">{{ col.header | translate }}</span>\n\n                        @if (col.headerTooltip) {\n                          <sdc-tooltip\n                            class=\"sdc-table-th-tooltip\"\n                            [pTooltip]=\"col.headerTooltip\"\n                            [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                            [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"$event.stopPropagation()\"\n                          >\n                            <i class=\"fas fa-circle-info sdc-table-th-tooltip__icon\" aria-hidden=\"true\"></i>\n                          </sdc-tooltip>\n                        }\n\n                        <span class=\"sdc-table-sort-overlay\" aria-hidden=\"true\">\n                          <sdc-table-sort-indicator\n                            [columnField]=\"col.field || null\"\n                            [columnType]=\"col.type\"\n                            [sortable]=\"isSortableColumn(col)\"\n                            [sortField]=\"sortField()\"\n                            [sortOrder]=\"sortOrder()\"\n                          ></sdc-table-sort-indicator>\n                        </span>\n                      </div>\n                    }\n                  </th>\n                }\n              </tr>\n            </thead>\n\n            <tbody>\n              @if (showInitialLoading()) {\n                @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n                  <tr class=\"sdc-table-initial-loading-row\" role=\"row\" [attr.aria-rowindex]=\"r + 1\" aria-hidden=\"true\">\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc sdc-table-td--initial-loading\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        role=\"cell\"\n                      >\n                        <div class=\"sdc-table-td-val sdc-table-td-val--initial-loading\"></div>\n                      </td>\n                    }\n                  </tr>\n                }\n              } @else {\n                @for (row of pageData(); track $index; let r = $index) {\n                  <tr\n                    role=\"row\"\n                    [attr.aria-rowindex]=\"r + 1\"\n                    (click)=\"onRowClicked(row)\"\n                    (keydown.enter)=\"onRowClicked(row)\"\n                  >\n                    @for (col of cols; track $index) {\n                      <td\n                        class=\"sdc-table-td sdc-table-tdc\"\n                        [class.sdc-table-td-checkbox]=\"col.type === 'checkbox-selection'\"\n                        [class.sdc-table-td-currency]=\"col.type === 'currency'\"\n                        [class.sdc-table-td-button]=\"col.type === 'button'\"\n                        [class.sdc-table-td-actions]=\"col.type === 'actions'\"\n                        [class.sdc-table-is-selected]=\"sortField() === col.field\"\n                        [ngClass]=\"columnAlignClass(col)\"\n                        [attr.data-title]=\"col.header | translate\"\n                        [attr.id]=\"col.colId || null\"\n                        role=\"cell\"\n                      >\n                        @if (col.cellTag === 'span') {\n                          <span class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </span>\n                        } @else if (col.cellTag === 'i') {\n                          <i class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </i>\n                        } @else if (col.cellTag === 'p') {\n                          <p class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </p>\n                        } @else {\n                          <div class=\"sdc-table-td-val\" [ngStyle]=\"col.cellStyle\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n\n          @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n            <sdc-empty-state\n              id=\"my-empty-state\"\n              iconClass=\"fa fa-inbox\"\n              [title]=\"emptyTitle()\"\n              [description]=\"emptyText()\"\n              class=\"sdc-table-empty-state\"\n              [style.min-height.px]=\"emptyBodyHeightPx()\"\n            ></sdc-empty-state>\n          }\n        </div>\n      } @else if (mobileMode() === 'stacked') {\n        <div\n          class=\"sdc-table-mobile-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex; let r = $index) {\n              <div class=\"sdc-table-mobile-card sdc-table-mobile-card--loading\" aria-hidden=\"true\">\n                @for (col of cols; track $index) {\n                  <div class=\"sdc-table-mobile-field sdc-table-mobile-field--loading\">\n                    <div class=\"sdc-table-mobile-label sdc-table-mobile-label--loading\"></div>\n                    <div class=\"sdc-table-mobile-skeleton\"></div>\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <div class=\"sdc-table-mobile-card\">\n                @for (col of cols; track $index) {\n                  <div\n                    class=\"sdc-table-mobile-field\"\n                    [class.sdc-table-mobile-field--full-width]=\"\n                      col.type === 'button' || col.type === 'actions' || col.type === 'checkbox-selection'\n                    \"\n                    [class.sdc-table-mobile-field--selected]=\"sortField() === col.field\"\n                    [class.sdc-table-mobile-field--sortable]=\"col.field && isSortableColumn(col)\"\n                    (click)=\"col.field && toggleSort(col.field, isSortableColumn(col))\"\n                  >\n                    @if (mobileFieldLabel(col)) {\n                      <div class=\"sdc-table-mobile-label-wrap\">\n                        @if (col.field && isSortableColumn(col)) {\n                          <button\n                            type=\"button\"\n                            class=\"sdc-table-mobile-label sdc-table-mobile-label--sortable\"\n                            [attr.aria-label]=\"\n                              (mobileFieldLabel(col) | translate)\n                                + ' - '\n                                + ('platform.datacore.accessibility_sortable_column' | translate)\n                            \"\n                            (click)=\"$event.stopPropagation(); toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.enter)=\"toggleSort(col.field, isSortableColumn(col))\"\n                            (keydown.space)=\"$event.preventDefault(); toggleSort(col.field, isSortableColumn(col))\"\n                          >\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                            <sdc-table-sort-indicator\n                              [columnField]=\"col.field || null\"\n                              [columnType]=\"col.type\"\n                              [sortable]=\"isSortableColumn(col)\"\n                              [sortField]=\"sortField()\"\n                              [sortOrder]=\"sortOrder()\"\n                            ></sdc-table-sort-indicator>\n                          </button>\n                        } @else {\n                          <div class=\"sdc-table-mobile-label\">\n                            <span>{{ mobileFieldLabel(col) | translate }}</span>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <div class=\"sdc-table-mobile-value\" [attr.id]=\"resolveCellId(col, row)\">\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"col\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                        [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, col)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      } @else {\n        <ul\n          class=\"sdc-table-expandable-list\"\n          [attr.aria-label]=\"tableAriaLabelKey() | translate\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (showInitialLoading()) {\n            @for (rowIndex of initialLoadingRows(); track rowIndex) {\n              <li class=\"sdc-table-expandable-item sdc-table-expandable-item--loading\" aria-hidden=\"true\">\n                <div class=\"sdc-table-expandable-summary sdc-table-expandable-summary--loading\">\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-primary\"></div>\n                    <div class=\"sdc-table-mobile-skeleton sdc-table-expandable-skeleton-secondary\"></div>\n                  </div>\n                  <span class=\"sdc-table-expandable-chevron\" aria-hidden=\"true\">\n                    <i class=\"fas fa-chevron-down\"></i>\n                  </span>\n                </div>\n              </li>\n            }\n          } @else {\n            @for (row of pageData(); track $index; let r = $index) {\n              <li\n                class=\"sdc-table-expandable-item\"\n                [class.sdc-table-expandable-item--expanded]=\"isRowExpanded(r)\"\n              >\n                <div\n                  class=\"sdc-table-expandable-summary\"\n                  (click)=\"toggleExpandRow(r)\"\n                  (keydown.enter)=\"toggleExpandRow(r)\"\n                  (keydown.space)=\"$event.preventDefault(); toggleExpandRow(r)\"\n                >\n                  @if (checkboxCol(); as cbCol) {\n                    <div\n                      class=\"sdc-table-expandable-checkbox\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    >\n                      <sdc-table-cell-content\n                        [forceLeftAlign]=\"true\"\n                        [row]=\"row\"\n                        [col]=\"cbCol\"\n                        [cellConfigs]=\"cellsCfg()\"\n                        [resolveValue]=\"resolveValue\"\n                        [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                        [rowLabel]=\"getRowCheckboxLabel(row)\"\n                        [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                        [rowSelected]=\"isRowSelected(row)\"\n                        [actionsMenuOpen]=\"false\"\n                        [actionsMenuId]=\"null\"\n                        (toggleRow)=\"onToggleRow(row, $event)\"\n                        (triggerButtonAction)=\"onButtonClick(row, cbCol)\"\n                        [defaultTextOverflow]=\"defaultTextOverflow()\"\n                        (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, cbCol, $event.trigger)\"\n                      ></sdc-table-cell-content>\n                    </div>\n                  }\n                  <div class=\"sdc-table-expandable-summary-fields\">\n                    @for (col of summaryCols(); track $index) {\n                      <div class=\"sdc-table-expandable-summary-field\">\n                        <span class=\"sdc-table-expandable-summary-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                        <div class=\"sdc-table-expandable-summary-value\">\n                          <sdc-table-cell-content\n                            [forceLeftAlign]=\"true\"\n                            [row]=\"row\"\n                            [col]=\"col\"\n                            [cellConfigs]=\"cellsCfg()\"\n                            [resolveValue]=\"resolveValue\"\n                            [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                            [rowLabel]=\"getRowCheckboxLabel(row)\"\n                            [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                            [rowSelected]=\"isRowSelected(row)\"\n                            [actionsMenuOpen]=\"false\"\n                            [actionsMenuId]=\"null\"\n                            (toggleRow)=\"onToggleRow(row, $event)\"\n                            (triggerButtonAction)=\"onButtonClick(row, col)\"\n                            [defaultTextOverflow]=\"defaultTextOverflow()\"\n                            (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                          ></sdc-table-cell-content>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"sdc-table-expandable-toggle\"\n                    [attr.aria-expanded]=\"isRowExpanded(r)\"\n                    [attr.aria-label]=\"\n                      isRowExpanded(r)\n                        ? ('platform.datacore.accessibility_collapse_row' | translate)\n                        : ('platform.datacore.accessibility_expand_row' | translate)\n                    \"\n                    (click)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.enter)=\"$event.stopPropagation(); toggleExpandRow(r)\"\n                    (keydown.space)=\"$event.preventDefault(); $event.stopPropagation(); toggleExpandRow(r)\"\n                  >\n                    <span\n                      class=\"sdc-table-expandable-chevron\"\n                      [class.sdc-table-expandable-chevron--open]=\"isRowExpanded(r)\"\n                      aria-hidden=\"true\"\n                    ><i class=\"fas fa-chevron-down\"></i></span>\n                  </button>\n                </div>\n                @if (isRowExpanded(r)) {\n                  <div class=\"sdc-table-expandable-details\">\n                    @for (col of cols; track $index) {\n                      @if (col.type !== 'checkbox-selection') {\n                        <div\n                          class=\"sdc-table-expandable-field\"\n                          [class.sdc-table-expandable-field--full-width]=\"\n                            col.type === 'button' || col.type === 'actions'\n                          \"\n                        >\n                          @if (col.type !== 'button' && col.type !== 'actions') {\n                            <div class=\"sdc-table-expandable-label-wrap\">\n                              <span class=\"sdc-table-expandable-label\">{{ mobileFieldLabel(col) | translate }}</span>\n                            </div>\n                          }\n                          <div class=\"sdc-table-expandable-value\" [attr.id]=\"resolveCellId(col, row)\">\n                            <sdc-table-cell-content\n                              [forceLeftAlign]=\"true\"\n                              [row]=\"row\"\n                              [col]=\"col\"\n                              [cellConfigs]=\"cellsCfg()\"\n                              [resolveValue]=\"resolveValue\"\n                              [rowCheckboxId]=\"getRowCheckboxId(row)\"\n                              [rowLabel]=\"getRowCheckboxLabel(row)\"\n                              [rowSelectionDisabled]=\"isRowSelectionDisabled(row)\"\n                              [rowSelected]=\"isRowSelected(row)\"\n                              [actionsMenuOpen]=\"isActionsMenuOpen(row, col)\"\n                              [actionsMenuId]=\"isActionsMenuOpen(row, col) ? openMenuState()?.menuId ?? null : null\"\n                              (toggleRow)=\"onToggleRow(row, $event)\"\n                              (triggerButtonAction)=\"onButtonClick(row, col)\"\n                              [defaultTextOverflow]=\"defaultTextOverflow()\"\n                              (toggleActionsMenu)=\"toggleActionsMenu($event.event, row, col, $event.trigger)\"\n                            ></sdc-table-cell-content>\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </li>\n            }\n          }\n        </ul>\n\n        @if (!isLoading && options().empty?.show !== false && totalRecords() === 0) {\n          <sdc-empty-state\n            id=\"my-empty-state\"\n            iconClass=\"fa fa-inbox\"\n            [title]=\"emptyTitle()\"\n            [description]=\"emptyText()\"\n            class=\"sdc-table-empty-state\"\n            [style.min-height.px]=\"emptyBodyHeightPx()\"\n          ></sdc-empty-state>\n        }\n      }\n\n      @if (showPaginator()) {\n        <div class=\"sdc-table-paginator\">\n          <sdc-paginator\n            [first]=\"first()\"\n            [rows]=\"rows()\"\n            [totalRecords]=\"totalRecords()\"\n            [rowsPerPageOptions]=\"isMobile() ? [] : rowsPerPageOptions()\"\n            [showRowsPerPageSelector]=\"showRowsPerPageSelector()\"\n            [isMobile]=\"isMobile()\"\n            [totalRecordsLabel]=\"totalRecordsLabel()\"\n            (pageChange)=\"onPageChange($event)\"\n          ></sdc-paginator>\n        </div>\n      }\n    </div>\n  </sdc-loading-state>\n</section>\n\n@if (openMenuState(); as menu) {\n  <sdc-table-actions-menu\n    [items]=\"menu.items\"\n    [menuId]=\"menu.menuId\"\n    [top]=\"menu.top\"\n    [left]=\"menu.left\"\n    [width]=\"menu.width\"\n    (close)=\"onMenuClose($event)\"\n    (select)=\"onPortalActionClick($event)\"\n  ></sdc-table-actions-menu>\n}\n", styles: [":host{display:block;width:100%;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sdc-table{width:100%;box-sizing:border-box;overflow:visible;background:var(--sdc-table-bg-card)}.sdc-table-shell{display:block;--sdc-table-body-height: 220px;overflow:visible}.sdc-table-loading-wrap{display:block;width:100%;overflow:visible}.sdc-table-caption{width:100%;justify-content:flex-end;display:flex;padding:.75rem 0}.sdc-table-caption__search{width:min(100%,22rem)}.sdc-table-caption__search--full-width{width:100%}.sdc-table-scroll{width:100%;overflow-x:auto;overflow-y:visible}.sdc-table-grid{min-width:var(--sdc-table-min-width, 100%);width:100%;border-collapse:collapse;table-layout:auto}.sdc-table-grid--fit{table-layout:fixed}thead th{padding:var(--sdc-table-padding-cell);background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);-webkit-user-select:none;user-select:none;transition:background var(--sdc-table-transition-fast),border var(--sdc-table-transition-fast);min-height:44px;position:relative;overflow:hidden;text-align:left}thead th.sdc-table-sortable{cursor:pointer}thead th.sdc-table-sortable:hover{background:var(--sdc-table-th-hover-bg)}thead th.sdc-table-sortable-disabled,thead th.sdc-table-header-disabled{cursor:default}thead th.sdc-table-sortable-disabled:focus,thead th.sdc-table-sortable-disabled:focus-visible{outline:none;box-shadow:none}thead th.sdc-table-sortable:focus,thead th.sdc-table-sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #007bff);outline-offset:-2px;box-shadow:inset 0 0 0 3px #007bff33;position:relative;z-index:1}thead th.sdc-table-is-selected{background:var(--sdc-table-th-selected-bg)!important}thead th.sdc-table-is-selected .sdc-table-sort-overlay{right:.5rem}.sdc-table-th-inner{display:flex;align-items:center;gap:var(--sdc-table-gap-th-inner);width:100%;min-width:0;overflow:hidden;text-align:inherit}.sdc-table-sort-overlay{position:absolute;right:0;top:50%;transform:translateY(-50%)}tbody td{padding:.5rem var(--sdc-table-padding-cell);border-bottom:1px solid var(--sdc-table-border-gray);vertical-align:middle;overflow:visible}.sdc-table-td-val{display:flex;align-items:center;width:100%;min-width:0;overflow:hidden}.sdc-table-td-val--initial-loading{min-height:1.5rem}.sdc-table-initial-loading-row{background:var(--sdc-table-bg-card)}.sdc-table-td--initial-loading{height:3.625rem}.sdc-table-th-label{color:#333!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block;flex:1 1 auto;width:100%;text-align:inherit}.sdc-table-th-inner--sortable{padding-right:1.5rem}.sdc-table-th-tooltip{flex-shrink:0;display:inline-flex;align-items:center}.sdc-table-th-tooltip__icon{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-table-empty-state{display:flex;align-items:center;justify-content:center;min-height:var(--sdc-table-body-height);padding:0}.sdc-table--loading .sdc-table-shell{pointer-events:none;-webkit-user-select:none;user-select:none}.sdc-table--initial-loading .sdc-table-scroll{overflow-x:hidden}thead th.sdc-table-th-checkbox .sdc-table-th-inner--checkbox{justify-content:center}thead th.sdc-table-th-checkbox .sdc-table-th-center{display:flex;align-items:center;justify-content:center;width:100%}thead th.sdc-table-th-checkbox .sdc-table-th-center input{cursor:pointer;margin:0}thead th.sdc-table-th-checkbox .sdc-table-th-center input:disabled{cursor:not-allowed}.sdc-table-paginator{padding:.5rem 0;position:sticky;bottom:0;z-index:1;background:var(--sdc-table-bg-card)}.sdc-table-td-align-left{text-align:left}.sdc-table-td-align-center{text-align:center}.sdc-table-td-align-right{text-align:right}.sdc-table-th-align-left{text-align:left}.sdc-table-th-align-center{text-align:center}.sdc-table-th-align-right{text-align:right}.sdc-table-cell-content--nowrap .sdc-table-text,.sdc-table-cell-content--nowrap .sdc-table-strong-label,.sdc-table-cell-content--nowrap .sdc-table-code-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@keyframes sdc-mobile-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sdc-table-mobile-list{display:flex;flex-direction:column;width:100%;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:.5rem;overflow:hidden}.sdc-table-mobile-card{display:flex;flex-direction:column;background:var(--sdc-formfield-default-bg, #ffffff);border-top:2px solid var(--sdc-border-strong, #d1d5db)}.sdc-table-mobile-card:first-child{border-top:0}.sdc-table-mobile-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.5rem 1rem;border-top:1px solid rgba(0,0,0,.05)}.sdc-table-mobile-field:first-child{border-top:0;padding-top:.75rem}.sdc-table-mobile-field:last-child{padding-bottom:.75rem}.sdc-table-mobile-field--selected{background:#11182706}.sdc-table-mobile-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-mobile-label-wrap,.sdc-table-mobile-value{min-width:0}.sdc-table-mobile-field--full-width>.sdc-table-mobile-label-wrap{display:none}.sdc-table-mobile-label,.sdc-table-mobile-label--sortable{display:flex;align-items:center;justify-content:flex-start;gap:.25rem;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--sdc-text-muted, #6b7280);font:inherit;font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;text-align:left}.sdc-table-mobile-label--sortable{cursor:pointer}.sdc-table-mobile-label--sortable:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:3px;border-radius:.375rem}.sdc-table-mobile-label--loading{width:5.5rem;height:.625rem;border-radius:999px;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b824,#94a3b842,#94a3b824);background-size:200% 100%}.sdc-table-mobile-skeleton{min-height:1.25rem;border-radius:.25rem;animation:sdc-mobile-shimmer 1.8s ease infinite;background:linear-gradient(90deg,#94a3b81a,#94a3b82e,#94a3b81a);background-size:200% 100%}.sdc-table-mobile-value{display:flex;align-items:flex-start;width:100%}@media (max-width: 768px){.sdc-table-caption__search{width:100%}.sdc-table-paginator{justify-content:center!important;border-top:1px solid var(--sdc-table-border-gray)}.sdc-table-mobile-field--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-mobile-field--sortable:hover{background:#11182705}}@media (max-width: 540px){.sdc-table-mobile-list{border-radius:.375rem}.sdc-table-mobile-field{grid-template-columns:1fr;gap:.125rem;padding:.4375rem .875rem}.sdc-table-mobile-field:first-child{padding-top:.625rem}.sdc-table-mobile-field:last-child{padding-bottom:.625rem}}.sdc-table-expandable-list{display:flex;flex-direction:column;width:100%;list-style:none;margin:0;padding:0;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:.5rem;overflow:hidden}.sdc-table-expandable-item{display:flex;flex-direction:column;background:var(--sdc-formfield-default-bg, #ffffff);border-top:1px solid var(--sdc-border-strong, #d1d5db)}.sdc-table-expandable-item:first-child{border-top:0}.sdc-table-expandable-summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.sdc-table-expandable-summary--loading{pointer-events:none}.sdc-table-expandable-summary:hover{background:#11182705}.sdc-table-expandable-checkbox{flex:0 0 auto}.sdc-table-expandable-summary-fields{display:flex;flex:1 1 0;flex-wrap:wrap;gap:.125rem 1.5rem;min-width:0}.sdc-table-expandable-summary-field{display:flex;flex-direction:column;min-width:0}.sdc-table-expandable-summary-label{color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdc-table-expandable-summary-value{display:flex;align-items:center;min-width:0}.sdc-table-expandable-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sdc-text-muted, #6b7280);cursor:pointer;transition:color var(--sdc-table-transition-fast, .15s ease),background var(--sdc-table-transition-fast, .15s ease)}.sdc-table-expandable-toggle:focus-visible{outline:2px solid var(--sdc-tab-primary, #428bca);outline-offset:2px}.sdc-table-expandable-toggle:hover{color:var(--sdc-text-default, #111827);background:#1118270f}.sdc-table-expandable-chevron{display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform .2s ease}.sdc-table-expandable-label-wrap,.sdc-table-expandable-value{min-width:0}.sdc-table-expandable-details{padding:.375rem 0;border-top:1px solid rgba(0,0,0,.06);background:#11182704}.sdc-table-expandable-field{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.25rem .75rem;align-items:start;padding:.375rem 1rem;border-top:1px solid rgba(0,0,0,.04)}.sdc-table-expandable-field--full-width{grid-template-columns:1fr;gap:.25rem}.sdc-table-expandable-field:first-child{border-top:0}.sdc-table-expandable-field--full-width>.sdc-table-expandable-label-wrap{display:none}.sdc-table-expandable-label{display:flex;align-items:center;color:var(--sdc-text-muted, #6b7280);font-size:.6875rem;font-weight:500;line-height:1.6;letter-spacing:.015em}.sdc-table-expandable-value{display:flex;align-items:flex-start;width:100%}.sdc-table-expandable-skeleton-primary{width:55%;max-width:10rem}.sdc-table-expandable-skeleton-secondary{width:35%;max-width:7rem}.sdc-table-expandable-chevron--open{transform:rotate(180deg)}.sdc-table-expandable-item--expanded .sdc-table-expandable-summary{background:#11182706}\n"] }]
         }], propDecorators: { cols: [{
                 type: Input,
                 args: [{ required: true }]
@@ -32126,11 +32065,11 @@ class NestedTableComponent {
         return [action, verb].filter(Boolean).join(' - ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NestedTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NestedTableComponent, isStandalone: true, selector: "sdc-nested-table", inputs: { groups: "groups", groupCols: "groupCols", itemCols: "itemCols", config: "config", loading: "loading", ariaLabel: "ariaLabel" }, outputs: { groupExpanded: "groupExpanded", groupCollapsed: "groupCollapsed", itemAction: "itemAction" }, ngImport: i0, template: "<div class=\"sdc-nested-table\" [attr.aria-label]=\"ariaLabel || null\">\n  @if (summaryLabel() || headerHint()) {\n    <div class=\"sdc-nested-table__meta\">\n      @if (headerHint()) {\n        <sdc-tooltip [pTooltip]=\"headerHint() | translate\" [tooltipPosition]=\"'right'\" [tooltipEvent]=\"'both'\">\n          <button type=\"button\" class=\"sdc-nested-table__hint\" [attr.aria-label]=\"hintAriaLabel | translate\">\n            <i class=\"fas fa-info-circle sdc-nested-table__hint-icon\" aria-hidden=\"true\"></i>\n          </button>\n        </sdc-tooltip>\n      }\n\n      @if (summaryLabel()) {\n        <span class=\"sdc-nested-table__summary\">{{ summaryLabel() }}</span>\n      }\n    </div>\n  }\n\n  <table class=\"sdc-nested-table__groups\">\n    <thead>\n      <tr>\n        <th class=\"sdc-nested-table__toggle-col\" scope=\"col\">\n          <span class=\"sr-only\">{{ groupToggleAriaLabel | translate }}</span>\n        </th>\n\n        @for (col of groupCols; track $index) {\n          <th\n            class=\"sdc-nested-table__th\"\n            [class.sdc-nested-table__th--sortable]=\"isSortableColumn(col)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"\n              isSortableColumn(col)\n                ? isActiveSort(col)\n                  ? (groupSortOrder() === 1 ? 'ascending' : 'descending')\n                  : 'none'\n                : null\n            \"\n            [attr.tabindex]=\"isSortableColumn(col) ? 0 : null\"\n            [attr.aria-describedby]=\"isSortableColumn(col) ? sortHintId(col) : null\"\n            (click)=\"toggleGroupSort(col)\"\n            (keydown.enter)=\"toggleGroupSort(col)\"\n            (keydown.space)=\"$event.preventDefault(); toggleGroupSort(col)\"\n          >\n            <span class=\"sdc-nested-table__th-label\">{{ col.header | translate }}</span>\n\n            @if (isSortableColumn(col)) {\n              <span class=\"sr-only\" [id]=\"sortHintId(col)\">{{\n                'platform.datacore.accessibility_sortable_column' | translate\n              }}</span>\n            }\n\n            @if (col.headerTooltip) {\n              <sdc-tooltip\n                class=\"sdc-nested-table__th-tooltip\"\n                [pTooltip]=\"col.headerTooltip | translate\"\n                [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"$event.stopPropagation()\"\n              >\n                <i class=\"fas fa-info-circle\" aria-hidden=\"true\"></i>\n              </sdc-tooltip>\n            }\n\n            <sdc-table-sort-indicator\n              [columnField]=\"col.field ?? null\"\n              [columnType]=\"col.type\"\n              [sortField]=\"groupSortField()\"\n              [sortOrder]=\"groupSortOrder()\"\n              [sortable]=\"isSortableColumn(col)\"\n            ></sdc-table-sort-indicator>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (entry of sortedGroups(); track groupKey(entry)) {\n        <tr class=\"sdc-nested-table__group-row\">\n          <td class=\"sdc-nested-table__toggle-col\">\n            <button\n              type=\"button\"\n              class=\"sdc-nested-table__toggle\"\n              [attr.aria-expanded]=\"isOpen(entry)\"\n              [attr.aria-controls]=\"groupContentId(entry)\"\n              [attr.aria-label]=\"resolveGroupToggleAriaLabel(entry)\"\n              (click)=\"toggleGroup(entry)\"\n            >\n              <i class=\"fas\" [class.fa-plus]=\"!isOpen(entry)\" [class.fa-minus]=\"isOpen(entry)\" aria-hidden=\"true\"></i>\n            </button>\n          </td>\n\n          @for (col of groupCols; track $index) {\n            <td class=\"sdc-nested-table__td\">\n              <sdc-table-cell-content\n                [cellConfigs]=\"groupCellConfigs()\"\n                [col]=\"col\"\n                [resolveValue]=\"resolveGroupValue\"\n                [row]=\"entry.group\"\n                [rowLabel]=\"rowLabel\"\n              ></sdc-table-cell-content>\n            </td>\n          }\n        </tr>\n\n        @if (isOpen(entry)) {\n          <tr class=\"sdc-nested-table__item-row\">\n            <!-- Celula vazia cobrindo a coluna do botao de abrir. E ela que alinha o\n                 bloco expandido: ele comeca exatamente onde comeca a primeira coluna de\n                 dados, porque quem decide esse x e o proprio layout da tabela. Uma\n                 margem fixa nao serviria - a largura declarada da coluna (2.5rem) e so\n                 um pedido, e o navegador entrega outra medida conforme o conteudo. -->\n            <td class=\"sdc-nested-table__item-spacer\"></td>\n            <td class=\"sdc-nested-table__item-cell\" [attr.colspan]=\"groupCols.length\" [id]=\"groupContentId(entry)\">\n              <!-- O fundo do bloco expandido fica NESTE painel, nao na celula: assim ele\n                   nasce colado na coluna de dados e termina na borda da tabela. Com o\n                   fundo na celula ele ia de borda a borda e o bloco parecia uma tabela\n                   irma, nao uma tabela dentro da outra. -->\n              <div class=\"sdc-nested-table__item-panel\">\n                <sdc-table\n                  [cols]=\"itemCols\"\n                  [data]=\"entry.items\"\n                  [config]=\"itemTableConfig() ?? {}\"\n                  [loading]=\"loading\"\n                  (action)=\"itemAction.emit($event)\"\n                ></sdc-table>\n              </div>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block;width:100%;--sdc-nested-table-toggle-col-width: 2.5rem}.sr-only{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}table{width:100%;border-collapse:collapse}.sdc-nested-table__meta{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.sdc-nested-table__hint{align-items:center;background:transparent;border:0;display:inline-flex;padding:0}.sdc-nested-table__hint:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__hint-icon{font-size:.875rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__summary{background:var(--sdc-nested-table-summary-bg, #eef1f4);border-radius:9999px;color:var(--sdc-text-muted, #4b5563);font-size:.75rem;font-weight:600;padding:.2rem .65rem}.sdc-nested-table__toggle-col{width:var(--sdc-nested-table-toggle-col-width)}.sdc-nested-table__th{background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);min-height:44px;padding:var(--sdc-table-padding-cell, .75rem);position:relative;text-align:left;white-space:nowrap}.sdc-nested-table__th--sortable{cursor:pointer;padding-right:1.75rem}.sdc-nested-table__th-label{margin-right:.35rem}.sdc-nested-table__th-tooltip{display:inline-flex;align-items:center;margin-right:.35rem}.sdc-nested-table__th-tooltip i{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__group-row td{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);padding:.5rem var(--sdc-table-padding-cell, .75rem);vertical-align:middle}.sdc-nested-table__toggle{align-items:center;background:transparent;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:4px;color:var(--sdc-text-default, #111827);cursor:pointer;display:inline-flex;font-size:.75rem;height:1.5rem;justify-content:center;width:1.5rem}.sdc-nested-table__toggle:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__item-row td{background:transparent;padding:0}.sdc-nested-table__item-panel{background:var(--sdc-nested-table-item-bg, #eaf2fb);border-radius:var(--sdc-nested-table-item-radius, 4px);margin:0 0 var(--sdc-nested-table-item-inset, 1rem);padding:.75rem}.sdc-nested-table__item-cell ::ng-deep .sdc-table-shell{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: TableComponent, selector: "sdc-table", inputs: ["cols", "data", "selection", "loading", "loadingIndicator", "config", "ariaLabel"], outputs: ["action", "rowClick", "lazyLoad", "selectionChange"] }, { kind: "component", type: TableCellContentComponent, selector: "sdc-table-cell-content", inputs: ["cellConfigs", "col", "resolveValue", "row", "actionsMenuOpen", "actionsMenuId", "defaultTextOverflow", "rowCheckboxId", "rowLabel", "rowSelectionDisabled", "forceLeftAlign", "rowSelected"], outputs: ["toggleActionsMenu", "toggleRow", "triggerButtonAction"] }, { kind: "component", type: TableSortIndicatorComponent, selector: "sdc-table-sort-indicator", inputs: ["columnField", "columnType", "sortField", "sortOrder", "sortable"] }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled", "allowHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NestedTableComponent, isStandalone: true, selector: "sdc-nested-table", inputs: { groups: "groups", groupCols: "groupCols", itemCols: "itemCols", config: "config", loading: "loading", ariaLabel: "ariaLabel" }, outputs: { groupExpanded: "groupExpanded", groupCollapsed: "groupCollapsed", itemAction: "itemAction" }, ngImport: i0, template: "<div class=\"sdc-nested-table\" [attr.aria-label]=\"ariaLabel || null\">\n  @if (summaryLabel() || headerHint()) {\n    <div class=\"sdc-nested-table__meta\">\n      @if (headerHint()) {\n        <sdc-tooltip [pTooltip]=\"headerHint() | translate\" [tooltipPosition]=\"'right'\" [tooltipEvent]=\"'both'\">\n          <button type=\"button\" class=\"sdc-nested-table__hint\" [attr.aria-label]=\"hintAriaLabel | translate\">\n            <i class=\"fas fa-info-circle sdc-nested-table__hint-icon\" aria-hidden=\"true\"></i>\n          </button>\n        </sdc-tooltip>\n      }\n\n      @if (summaryLabel()) {\n        <span class=\"sdc-nested-table__summary\">{{ summaryLabel() }}</span>\n      }\n    </div>\n  }\n\n  <table class=\"sdc-nested-table__groups\">\n    <thead>\n      <tr>\n        <th class=\"sdc-nested-table__toggle-col\" scope=\"col\">\n          <span class=\"sr-only\">{{ groupToggleAriaLabel | translate }}</span>\n        </th>\n\n        @for (col of groupCols; track $index) {\n          <th\n            class=\"sdc-nested-table__th\"\n            [class.sdc-nested-table__th--sortable]=\"isSortableColumn(col)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"\n              isSortableColumn(col)\n                ? isActiveSort(col)\n                  ? (groupSortOrder() === 1 ? 'ascending' : 'descending')\n                  : 'none'\n                : null\n            \"\n            [attr.tabindex]=\"isSortableColumn(col) ? 0 : null\"\n            [attr.aria-describedby]=\"isSortableColumn(col) ? sortHintId(col) : null\"\n            (click)=\"toggleGroupSort(col)\"\n            (keydown.enter)=\"toggleGroupSort(col)\"\n            (keydown.space)=\"$event.preventDefault(); toggleGroupSort(col)\"\n          >\n            <span class=\"sdc-nested-table__th-label\">{{ col.header | translate }}</span>\n\n            @if (isSortableColumn(col)) {\n              <span class=\"sr-only\" [id]=\"sortHintId(col)\">{{\n                'platform.datacore.accessibility_sortable_column' | translate\n              }}</span>\n            }\n\n            @if (col.headerTooltip) {\n              <sdc-tooltip\n                class=\"sdc-nested-table__th-tooltip\"\n                [pTooltip]=\"col.headerTooltip | translate\"\n                [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"$event.stopPropagation()\"\n              >\n                <i class=\"fas fa-info-circle\" aria-hidden=\"true\"></i>\n              </sdc-tooltip>\n            }\n\n            <sdc-table-sort-indicator\n              [columnField]=\"col.field ?? null\"\n              [columnType]=\"col.type\"\n              [sortField]=\"groupSortField()\"\n              [sortOrder]=\"groupSortOrder()\"\n              [sortable]=\"isSortableColumn(col)\"\n            ></sdc-table-sort-indicator>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (entry of sortedGroups(); track groupKey(entry)) {\n        <tr class=\"sdc-nested-table__group-row\">\n          <td class=\"sdc-nested-table__toggle-col\">\n            <button\n              type=\"button\"\n              class=\"sdc-nested-table__toggle\"\n              [attr.aria-expanded]=\"isOpen(entry)\"\n              [attr.aria-controls]=\"groupContentId(entry)\"\n              [attr.aria-label]=\"resolveGroupToggleAriaLabel(entry)\"\n              (click)=\"toggleGroup(entry)\"\n            >\n              <i class=\"fas\" [class.fa-plus]=\"!isOpen(entry)\" [class.fa-minus]=\"isOpen(entry)\" aria-hidden=\"true\"></i>\n            </button>\n          </td>\n\n          @for (col of groupCols; track $index) {\n            <td class=\"sdc-nested-table__td\">\n              <sdc-table-cell-content\n                [cellConfigs]=\"groupCellConfigs()\"\n                [col]=\"col\"\n                [resolveValue]=\"resolveGroupValue\"\n                [row]=\"entry.group\"\n                [rowLabel]=\"rowLabel\"\n              ></sdc-table-cell-content>\n            </td>\n          }\n        </tr>\n\n        @if (isOpen(entry)) {\n          <tr class=\"sdc-nested-table__item-row\">\n            <td class=\"sdc-nested-table__item-cell\" [attr.colspan]=\"groupCols.length + 1\" [id]=\"groupContentId(entry)\">\n              <sdc-table\n                [cols]=\"itemCols\"\n                [data]=\"entry.items\"\n                [config]=\"itemTableConfig() ?? {}\"\n                [loading]=\"loading\"\n                (action)=\"itemAction.emit($event)\"\n              ></sdc-table>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block;width:100%}.sr-only{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}table{width:100%;border-collapse:collapse}.sdc-nested-table__meta{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.sdc-nested-table__hint{align-items:center;background:transparent;border:0;display:inline-flex;padding:0}.sdc-nested-table__hint:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__hint-icon{font-size:.875rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__summary{background:var(--sdc-nested-table-summary-bg, #eef1f4);border-radius:9999px;color:var(--sdc-text-muted, #4b5563);font-size:.75rem;font-weight:600;padding:.2rem .65rem}.sdc-nested-table__toggle-col{width:2.5rem}.sdc-nested-table__th{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);color:#333;font-size:.8125rem;font-weight:700;padding:.5rem var(--sdc-table-padding-cell, .75rem);position:relative;text-align:left;text-transform:uppercase;white-space:nowrap}.sdc-nested-table__th--sortable{cursor:pointer;padding-right:1.75rem}.sdc-nested-table__th-label{margin-right:.35rem}.sdc-nested-table__th-tooltip{display:inline-flex;align-items:center;margin-right:.35rem}.sdc-nested-table__th-tooltip i{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__group-row td{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);padding:.5rem var(--sdc-table-padding-cell, .75rem);vertical-align:middle}.sdc-nested-table__toggle{align-items:center;background:transparent;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:4px;color:var(--sdc-text-default, #111827);cursor:pointer;display:inline-flex;font-size:.75rem;height:1.5rem;justify-content:center;width:1.5rem}.sdc-nested-table__toggle:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__item-row td{background:var(--sdc-nested-table-item-bg, #eaf2fb);padding:.75rem var(--sdc-table-padding-cell, .75rem)}.sdc-nested-table__item-cell ::ng-deep .sdc-table-shell{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: TableComponent, selector: "sdc-table", inputs: ["cols", "data", "selection", "loading", "loadingIndicator", "config", "ariaLabel"], outputs: ["action", "rowClick", "lazyLoad", "selectionChange"] }, { kind: "component", type: TableCellContentComponent, selector: "sdc-table-cell-content", inputs: ["cellConfigs", "col", "resolveValue", "row", "actionsMenuOpen", "actionsMenuId", "defaultTextOverflow", "rowCheckboxId", "rowLabel", "rowSelectionDisabled", "forceLeftAlign", "rowSelected"], outputs: ["toggleActionsMenu", "toggleRow", "triggerButtonAction"] }, { kind: "component", type: TableSortIndicatorComponent, selector: "sdc-table-sort-indicator", inputs: ["columnField", "columnType", "sortField", "sortOrder", "sortable"] }, { kind: "component", type: TooltipComponent, selector: "sdc-tooltip", inputs: ["pTooltip", "tooltipPosition", "tooltipEvent", "fitContent", "tooltipDisabled", "allowHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NestedTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sdc-nested-table', standalone: true, imports: [TranslateModule, TableComponent, TableCellContentComponent, TableSortIndicatorComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"sdc-nested-table\" [attr.aria-label]=\"ariaLabel || null\">\n  @if (summaryLabel() || headerHint()) {\n    <div class=\"sdc-nested-table__meta\">\n      @if (headerHint()) {\n        <sdc-tooltip [pTooltip]=\"headerHint() | translate\" [tooltipPosition]=\"'right'\" [tooltipEvent]=\"'both'\">\n          <button type=\"button\" class=\"sdc-nested-table__hint\" [attr.aria-label]=\"hintAriaLabel | translate\">\n            <i class=\"fas fa-info-circle sdc-nested-table__hint-icon\" aria-hidden=\"true\"></i>\n          </button>\n        </sdc-tooltip>\n      }\n\n      @if (summaryLabel()) {\n        <span class=\"sdc-nested-table__summary\">{{ summaryLabel() }}</span>\n      }\n    </div>\n  }\n\n  <table class=\"sdc-nested-table__groups\">\n    <thead>\n      <tr>\n        <th class=\"sdc-nested-table__toggle-col\" scope=\"col\">\n          <span class=\"sr-only\">{{ groupToggleAriaLabel | translate }}</span>\n        </th>\n\n        @for (col of groupCols; track $index) {\n          <th\n            class=\"sdc-nested-table__th\"\n            [class.sdc-nested-table__th--sortable]=\"isSortableColumn(col)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"\n              isSortableColumn(col)\n                ? isActiveSort(col)\n                  ? (groupSortOrder() === 1 ? 'ascending' : 'descending')\n                  : 'none'\n                : null\n            \"\n            [attr.tabindex]=\"isSortableColumn(col) ? 0 : null\"\n            [attr.aria-describedby]=\"isSortableColumn(col) ? sortHintId(col) : null\"\n            (click)=\"toggleGroupSort(col)\"\n            (keydown.enter)=\"toggleGroupSort(col)\"\n            (keydown.space)=\"$event.preventDefault(); toggleGroupSort(col)\"\n          >\n            <span class=\"sdc-nested-table__th-label\">{{ col.header | translate }}</span>\n\n            @if (isSortableColumn(col)) {\n              <span class=\"sr-only\" [id]=\"sortHintId(col)\">{{\n                'platform.datacore.accessibility_sortable_column' | translate\n              }}</span>\n            }\n\n            @if (col.headerTooltip) {\n              <sdc-tooltip\n                class=\"sdc-nested-table__th-tooltip\"\n                [pTooltip]=\"col.headerTooltip | translate\"\n                [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"$event.stopPropagation()\"\n              >\n                <i class=\"fas fa-info-circle\" aria-hidden=\"true\"></i>\n              </sdc-tooltip>\n            }\n\n            <sdc-table-sort-indicator\n              [columnField]=\"col.field ?? null\"\n              [columnType]=\"col.type\"\n              [sortField]=\"groupSortField()\"\n              [sortOrder]=\"groupSortOrder()\"\n              [sortable]=\"isSortableColumn(col)\"\n            ></sdc-table-sort-indicator>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (entry of sortedGroups(); track groupKey(entry)) {\n        <tr class=\"sdc-nested-table__group-row\">\n          <td class=\"sdc-nested-table__toggle-col\">\n            <button\n              type=\"button\"\n              class=\"sdc-nested-table__toggle\"\n              [attr.aria-expanded]=\"isOpen(entry)\"\n              [attr.aria-controls]=\"groupContentId(entry)\"\n              [attr.aria-label]=\"resolveGroupToggleAriaLabel(entry)\"\n              (click)=\"toggleGroup(entry)\"\n            >\n              <i class=\"fas\" [class.fa-plus]=\"!isOpen(entry)\" [class.fa-minus]=\"isOpen(entry)\" aria-hidden=\"true\"></i>\n            </button>\n          </td>\n\n          @for (col of groupCols; track $index) {\n            <td class=\"sdc-nested-table__td\">\n              <sdc-table-cell-content\n                [cellConfigs]=\"groupCellConfigs()\"\n                [col]=\"col\"\n                [resolveValue]=\"resolveGroupValue\"\n                [row]=\"entry.group\"\n                [rowLabel]=\"rowLabel\"\n              ></sdc-table-cell-content>\n            </td>\n          }\n        </tr>\n\n        @if (isOpen(entry)) {\n          <tr class=\"sdc-nested-table__item-row\">\n            <!-- Celula vazia cobrindo a coluna do botao de abrir. E ela que alinha o\n                 bloco expandido: ele comeca exatamente onde comeca a primeira coluna de\n                 dados, porque quem decide esse x e o proprio layout da tabela. Uma\n                 margem fixa nao serviria - a largura declarada da coluna (2.5rem) e so\n                 um pedido, e o navegador entrega outra medida conforme o conteudo. -->\n            <td class=\"sdc-nested-table__item-spacer\"></td>\n            <td class=\"sdc-nested-table__item-cell\" [attr.colspan]=\"groupCols.length\" [id]=\"groupContentId(entry)\">\n              <!-- O fundo do bloco expandido fica NESTE painel, nao na celula: assim ele\n                   nasce colado na coluna de dados e termina na borda da tabela. Com o\n                   fundo na celula ele ia de borda a borda e o bloco parecia uma tabela\n                   irma, nao uma tabela dentro da outra. -->\n              <div class=\"sdc-nested-table__item-panel\">\n                <sdc-table\n                  [cols]=\"itemCols\"\n                  [data]=\"entry.items\"\n                  [config]=\"itemTableConfig() ?? {}\"\n                  [loading]=\"loading\"\n                  (action)=\"itemAction.emit($event)\"\n                ></sdc-table>\n              </div>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block;width:100%;--sdc-nested-table-toggle-col-width: 2.5rem}.sr-only{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}table{width:100%;border-collapse:collapse}.sdc-nested-table__meta{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.sdc-nested-table__hint{align-items:center;background:transparent;border:0;display:inline-flex;padding:0}.sdc-nested-table__hint:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__hint-icon{font-size:.875rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__summary{background:var(--sdc-nested-table-summary-bg, #eef1f4);border-radius:9999px;color:var(--sdc-text-muted, #4b5563);font-size:.75rem;font-weight:600;padding:.2rem .65rem}.sdc-nested-table__toggle-col{width:var(--sdc-nested-table-toggle-col-width)}.sdc-nested-table__th{background:var(--sdc-table-bg-card);border-bottom:1px solid var(--sdc-formfield-default-border);min-height:44px;padding:var(--sdc-table-padding-cell, .75rem);position:relative;text-align:left;white-space:nowrap}.sdc-nested-table__th--sortable{cursor:pointer;padding-right:1.75rem}.sdc-nested-table__th-label{margin-right:.35rem}.sdc-nested-table__th-tooltip{display:inline-flex;align-items:center;margin-right:.35rem}.sdc-nested-table__th-tooltip i{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__group-row td{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);padding:.5rem var(--sdc-table-padding-cell, .75rem);vertical-align:middle}.sdc-nested-table__toggle{align-items:center;background:transparent;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:4px;color:var(--sdc-text-default, #111827);cursor:pointer;display:inline-flex;font-size:.75rem;height:1.5rem;justify-content:center;width:1.5rem}.sdc-nested-table__toggle:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__item-row td{background:transparent;padding:0}.sdc-nested-table__item-panel{background:var(--sdc-nested-table-item-bg, #eaf2fb);border-radius:var(--sdc-nested-table-item-radius, 4px);margin:0 0 var(--sdc-nested-table-item-inset, 1rem);padding:.75rem}.sdc-nested-table__item-cell ::ng-deep .sdc-table-shell{background:transparent}\n"] }]
+            args: [{ selector: 'sdc-nested-table', standalone: true, imports: [TranslateModule, TableComponent, TableCellContentComponent, TableSortIndicatorComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"sdc-nested-table\" [attr.aria-label]=\"ariaLabel || null\">\n  @if (summaryLabel() || headerHint()) {\n    <div class=\"sdc-nested-table__meta\">\n      @if (headerHint()) {\n        <sdc-tooltip [pTooltip]=\"headerHint() | translate\" [tooltipPosition]=\"'right'\" [tooltipEvent]=\"'both'\">\n          <button type=\"button\" class=\"sdc-nested-table__hint\" [attr.aria-label]=\"hintAriaLabel | translate\">\n            <i class=\"fas fa-info-circle sdc-nested-table__hint-icon\" aria-hidden=\"true\"></i>\n          </button>\n        </sdc-tooltip>\n      }\n\n      @if (summaryLabel()) {\n        <span class=\"sdc-nested-table__summary\">{{ summaryLabel() }}</span>\n      }\n    </div>\n  }\n\n  <table class=\"sdc-nested-table__groups\">\n    <thead>\n      <tr>\n        <th class=\"sdc-nested-table__toggle-col\" scope=\"col\">\n          <span class=\"sr-only\">{{ groupToggleAriaLabel | translate }}</span>\n        </th>\n\n        @for (col of groupCols; track $index) {\n          <th\n            class=\"sdc-nested-table__th\"\n            [class.sdc-nested-table__th--sortable]=\"isSortableColumn(col)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"\n              isSortableColumn(col)\n                ? isActiveSort(col)\n                  ? (groupSortOrder() === 1 ? 'ascending' : 'descending')\n                  : 'none'\n                : null\n            \"\n            [attr.tabindex]=\"isSortableColumn(col) ? 0 : null\"\n            [attr.aria-describedby]=\"isSortableColumn(col) ? sortHintId(col) : null\"\n            (click)=\"toggleGroupSort(col)\"\n            (keydown.enter)=\"toggleGroupSort(col)\"\n            (keydown.space)=\"$event.preventDefault(); toggleGroupSort(col)\"\n          >\n            <span class=\"sdc-nested-table__th-label\">{{ col.header | translate }}</span>\n\n            @if (isSortableColumn(col)) {\n              <span class=\"sr-only\" [id]=\"sortHintId(col)\">{{\n                'platform.datacore.accessibility_sortable_column' | translate\n              }}</span>\n            }\n\n            @if (col.headerTooltip) {\n              <sdc-tooltip\n                class=\"sdc-nested-table__th-tooltip\"\n                [pTooltip]=\"col.headerTooltip | translate\"\n                [tooltipPosition]=\"col.headerTooltipPosition ?? 'top'\"\n                [tooltipEvent]=\"col.headerTooltipEvent ?? 'hover'\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"$event.stopPropagation()\"\n              >\n                <i class=\"fas fa-info-circle\" aria-hidden=\"true\"></i>\n              </sdc-tooltip>\n            }\n\n            <sdc-table-sort-indicator\n              [columnField]=\"col.field ?? null\"\n              [columnType]=\"col.type\"\n              [sortField]=\"groupSortField()\"\n              [sortOrder]=\"groupSortOrder()\"\n              [sortable]=\"isSortableColumn(col)\"\n            ></sdc-table-sort-indicator>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (entry of sortedGroups(); track groupKey(entry)) {\n        <tr class=\"sdc-nested-table__group-row\">\n          <td class=\"sdc-nested-table__toggle-col\">\n            <button\n              type=\"button\"\n              class=\"sdc-nested-table__toggle\"\n              [attr.aria-expanded]=\"isOpen(entry)\"\n              [attr.aria-controls]=\"groupContentId(entry)\"\n              [attr.aria-label]=\"resolveGroupToggleAriaLabel(entry)\"\n              (click)=\"toggleGroup(entry)\"\n            >\n              <i class=\"fas\" [class.fa-plus]=\"!isOpen(entry)\" [class.fa-minus]=\"isOpen(entry)\" aria-hidden=\"true\"></i>\n            </button>\n          </td>\n\n          @for (col of groupCols; track $index) {\n            <td class=\"sdc-nested-table__td\">\n              <sdc-table-cell-content\n                [cellConfigs]=\"groupCellConfigs()\"\n                [col]=\"col\"\n                [resolveValue]=\"resolveGroupValue\"\n                [row]=\"entry.group\"\n                [rowLabel]=\"rowLabel\"\n              ></sdc-table-cell-content>\n            </td>\n          }\n        </tr>\n\n        @if (isOpen(entry)) {\n          <tr class=\"sdc-nested-table__item-row\">\n            <td class=\"sdc-nested-table__item-cell\" [attr.colspan]=\"groupCols.length + 1\" [id]=\"groupContentId(entry)\">\n              <sdc-table\n                [cols]=\"itemCols\"\n                [data]=\"entry.items\"\n                [config]=\"itemTableConfig() ?? {}\"\n                [loading]=\"loading\"\n                (action)=\"itemAction.emit($event)\"\n              ></sdc-table>\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block;width:100%}.sr-only{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}table{width:100%;border-collapse:collapse}.sdc-nested-table__meta{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.sdc-nested-table__hint{align-items:center;background:transparent;border:0;display:inline-flex;padding:0}.sdc-nested-table__hint:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__hint-icon{font-size:.875rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__summary{background:var(--sdc-nested-table-summary-bg, #eef1f4);border-radius:9999px;color:var(--sdc-text-muted, #4b5563);font-size:.75rem;font-weight:600;padding:.2rem .65rem}.sdc-nested-table__toggle-col{width:2.5rem}.sdc-nested-table__th{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);color:#333;font-size:.8125rem;font-weight:700;padding:.5rem var(--sdc-table-padding-cell, .75rem);position:relative;text-align:left;text-transform:uppercase;white-space:nowrap}.sdc-nested-table__th--sortable{cursor:pointer;padding-right:1.75rem}.sdc-nested-table__th-label{margin-right:.35rem}.sdc-nested-table__th-tooltip{display:inline-flex;align-items:center;margin-right:.35rem}.sdc-nested-table__th-tooltip i{font-size:.75rem;color:var(--sdc-table-th-tooltip-icon, #767676);cursor:help}.sdc-nested-table__group-row td{border-bottom:1px solid var(--sdc-table-border-gray, #e5e7eb);padding:.5rem var(--sdc-table-padding-cell, .75rem);vertical-align:middle}.sdc-nested-table__toggle{align-items:center;background:transparent;border:1px solid var(--sdc-border-strong, #d1d5db);border-radius:4px;color:var(--sdc-text-default, #111827);cursor:pointer;display:inline-flex;font-size:.75rem;height:1.5rem;justify-content:center;width:1.5rem}.sdc-nested-table__toggle:focus-visible{outline:var(--sdc-focus-outline, 2px solid #428bca);outline-offset:2px}.sdc-nested-table__item-row td{background:var(--sdc-nested-table-item-bg, #eaf2fb);padding:.75rem var(--sdc-table-padding-cell, .75rem)}.sdc-nested-table__item-cell ::ng-deep .sdc-table-shell{background:transparent}\n"] }]
         }], propDecorators: { groups: [{
                 type: Input,
                 args: [{ required: true }]
@@ -41348,7 +41287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 const DAYS_IN_WEEK = 7;
-const MONTHS_IN_YEAR = 12;
 const YEARS_PER_PAGE = 12;
 const HOUR_FORMAT_12_MAX = 12;
 const HOUR_FORMAT_24_MAX = 23;
@@ -41367,12 +41305,6 @@ class DatepickerComponent extends InputsComponent {
     max = null;
     defaultDate = null;
     dateFormat = 'dd/MM/yyyy';
-    // Digitacao no campo, desligada por padrao. Ate aqui o <input> so refletia o que
-    // foi clicado no calendario: nao havia handler de (input), entao o que o usuario
-    // digitava nunca chegava ao componente. Ligar por padrao mudaria o
-    // comportamento de telas que ja contam com o campo ser efetivamente so-leitura,
-    // por isso e opt-in.
-    allowTyping = false;
     hourFormat = '24';
     minuteStep = 5;
     showSeconds = false;
@@ -41405,25 +41337,13 @@ class DatepickerComponent extends InputsComponent {
     hours = signal(0);
     minutes = signal(0);
     seconds = signal(0);
-    // O idioma precisa ser um Signal: os nomes de mes e de dia sao `computed()`, e
-    // computed so recalcula quando um Signal que ele LE muda. Ler translate.currentLang
-    // direto deixaria os nomes congelados no idioma do primeiro render - o
-    // markForCheck do onLangChange (ver ngOnInit) redesenha, mas com o valor velho.
-    // Sem getDefaultLang() aqui: nem toda montagem do TranslateService expoe esse
-    // metodo (o mock do proprio spec deste componente nao expoe), e o fallback de
-    // idioma ja esta nos helpers de Intl mais abaixo.
-    currentLang = signal(this.translate.currentLang ?? '');
-    // Texto enquanto o usuario digita. Nao-nulo apenas durante a digitacao: enquanto
-    // existe, tem precedencia sobre displayValue() no campo, senao a formatacao
-    // reescreveria o texto no meio da digitacao a cada ciclo de deteccao.
-    typedText = signal(null);
     // Range selection state
     rangeStart = signal(null);
     rangeEnd = signal(null);
     rangeSelecting = signal(false);
     // --- Computed ---
     weekDayNames = computed(() => {
-        const days = this.localizedWeekDayNames(this.currentLang());
+        const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
         const shifted = [];
         for (let i = 0; i < DAYS_IN_WEEK; i++) {
             shifted.push(days[(i + this.firstDayOfWeek) % DAYS_IN_WEEK]);
@@ -41480,7 +41400,7 @@ class DatepickerComponent extends InputsComponent {
     // NOTE: plain method for the same reason as `calendarDays` above (depends on `this.value`,
     // a non-Signal @Input).
     calendarMonths() {
-        const monthNames = this.localizedMonthNames(this.currentLang(), 'short');
+        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         const viewD = this.viewDate();
         return monthNames.map((name, index) => ({
             month: index,
@@ -41519,12 +41439,9 @@ class DatepickerComponent extends InputsComponent {
         }
         return '';
     }
-    // O que o campo mostra: o texto em digitacao, quando ha, senao o valor formatado.
-    inputValue() {
-        return this.typedText() ?? this.displayValue();
-    }
     viewMonthYearLabel = computed(() => {
-        const monthNames = this.localizedMonthNames(this.currentLang(), 'long');
+        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'];
         const viewD = this.viewDate();
         if (this.currentView() === 'years') {
             const years = this.yearRange();
@@ -41538,8 +41455,7 @@ class DatepickerComponent extends InputsComponent {
     // --- Lifecycle ---
     ngOnInit() {
         this.initializeViewDate();
-        this.subscriptions.add(this.translate.onLangChange.subscribe((evento) => {
-            this.currentLang.set(evento.lang);
+        this.subscriptions.add(this.translate.onLangChange.subscribe(() => {
             this.cdr.markForCheck();
         }));
     }
@@ -41610,17 +41526,6 @@ class DatepickerComponent extends InputsComponent {
         }
     }
     onInputClick() {
-        // Com digitacao ligada, clicar no campo quer dizer "vou escrever", nao "abra o
-        // calendario" - e o painel ainda cobriria o campo enquanto a pessoa digita. Aqui
-        // o calendario passa a ser so do botao ao lado.
-        //
-        // Preso ao allowTyping de proposito, e nao valendo pra todo mundo: abrir ao
-        // clicar e o comportamento que as telas que ja usam o componente esperam
-        // (showOnFocus e true por padrao), e mudar isso sem o opt-in seria quebrar quem
-        // nunca pediu digitacao.
-        if (this.allowTyping) {
-            return;
-        }
         if (this.showOnFocus && !this.disabled) {
             this.openPanel();
         }
@@ -42061,140 +41966,6 @@ class DatepickerComponent extends InputsComponent {
         const firstCurrentMonthDay = days.find(d => d.currentMonth) ?? days[0];
         return firstCurrentMonthDay ? this.isSameDay(day.date, firstCurrentMonthDay.date) : false;
     }
-    onInputTyping(event) {
-        if (!this.allowTyping) {
-            return;
-        }
-        const input = event.target;
-        const text = this.applyDateMask(input, input.value);
-        this.typedText.set(text);
-        const parsed = this.parseTypedDate(text);
-        // So comita data completa e valida. Com o texto pela metade ("18/0") nao ha o
-        // que commitar, e tambem nao se apaga o que ja existia - limpar a cada tecla
-        // faria o calendario piscar durante a digitacao.
-        if (parsed) {
-            this.viewDate.set(new Date(parsed.getFullYear(), parsed.getMonth(), 1));
-            this.commitDateValue(parsed);
-        }
-    }
-    // Insere os separadores enquanto o usuario digita: 01102006 vira 01/10/2006, e
-    // yyyy-MM-dd produz 2006-10-01 a partir dos mesmos digitos. Quem dita a forma e o
-    // proprio dateFormat - nada de "/" escrito a mao aqui.
-    //
-    // Escreve direto no input, e nao so no signal: o texto que o usuario digitou ja
-    // esta no DOM, e sem reescrever o campo ficaria com os digitos crus ate o proximo
-    // ciclo de deteccao. Mexer no DOM tambem obriga a recolocar o cursor, senao ele
-    // pula pro fim a cada tecla - ver o calculo abaixo.
-    applyDateMask(input, raw) {
-        // So no modo 'date': datetime/time/range/month tem outras partes no formato, e
-        // mascarar por este caminho cortaria a hora.
-        if (this.mode !== 'date' || !this.dateFormatOrder()) {
-            return raw;
-        }
-        const caret = input.selectionStart ?? raw.length;
-        const digitsBeforeCaret = raw.slice(0, caret).replace(/\D/g, '').length;
-        const masked = this.maskByDateFormat(raw);
-        if (masked === raw) {
-            return raw;
-        }
-        input.value = masked;
-        // Recoloca o cursor DEPOIS do mesmo digito em que ele estava, contando digitos e
-        // nao posicoes - os separadores entram e saem conforme o texto cresce, entao a
-        // posicao crua nao se mantem entre um estado e outro.
-        let position = 0;
-        let seen = 0;
-        while (position < masked.length && seen < digitsBeforeCaret) {
-            if (/\d/.test(masked[position])) {
-                seen++;
-            }
-            position++;
-        }
-        input.setSelectionRange(position, position);
-        return masked;
-    }
-    // Percorre o dateFormat colocando um digito onde ha d/M/y e o literal onde ha
-    // separador. Para quando os digitos acabam, entao o separador so aparece junto do
-    // digito seguinte - digitar "01" mostra "01", e o "/" chega com o terceiro numero.
-    maskByDateFormat(raw) {
-        const format = this.dateFormat;
-        const maxDigits = (format.match(/[dMy]/g) ?? []).length;
-        const digits = raw.replace(/\D/g, '').slice(0, maxDigits);
-        let masked = '';
-        let index = 0;
-        for (const char of format) {
-            if (index >= digits.length) {
-                break;
-            }
-            masked += /[dMy]/.test(char) ? digits[index++] : char;
-        }
-        return masked;
-    }
-    // Ao sair do campo o texto em digitacao da lugar ao valor formatado. Texto invalido
-    // ou incompleto some: o campo volta ao ultimo valor valido, em vez de deixar na
-    // tela algo que o componente nao reconhece como data.
-    onInputBlur() {
-        this.typedText.set(null);
-        this.cdr.markForCheck();
-    }
-    // Le a data conforme o dateFormat configurado e valida o DOMINIO, nao so o formato:
-    // 32/13/2026 casa com "dd/MM/yyyy" e nao existe. O Date do JS aceita overflow em
-    // silencio (new Date(2026, 12, 32) vira 01/02/2027), entao a verificacao e de ida e
-    // volta: se o dia, o mes ou o ano mudaram, a entrada era invalida.
-    parseTypedDate(text) {
-        const order = this.dateFormatOrder();
-        const numbers = text.match(/\d+/g);
-        if (!order || !numbers || numbers.length < 3) {
-            return null;
-        }
-        // Ano de 2 digitos nao e aceito: "18/06/26" tanto pode ser 1926 quanto 2026, e
-        // adivinhar produz data errada sem o usuario perceber.
-        if (numbers[order.year].length !== 4) {
-            return null;
-        }
-        const day = Number(numbers[order.day]);
-        const month = Number(numbers[order.month]);
-        const year = Number(numbers[order.year]);
-        const parsed = new Date(year, month - 1, day);
-        const roundTripsBack = parsed.getDate() === day && parsed.getMonth() === month - 1 && parsed.getFullYear() === year;
-        return roundTripsBack ? parsed : null;
-    }
-    // Em que posicao dia, mes e ano aparecem no dateFormat configurado - o campo pode
-    // estar como dd/MM/yyyy, MM/dd/yyyy ou yyyy-MM-dd conforme o locale.
-    dateFormatOrder() {
-        const parts = [
-            { key: 'day', position: this.dateFormat.indexOf('dd') },
-            { key: 'month', position: this.dateFormat.indexOf('MM') },
-            { key: 'year', position: this.dateFormat.indexOf('yyyy') }
-        ];
-        if (parts.some((part) => part.position < 0)) {
-            return null;
-        }
-        const sorted = [...parts].sort((a, b) => a.position - b.position);
-        return {
-            day: sorted.findIndex((part) => part.key === 'day'),
-            month: sorted.findIndex((part) => part.key === 'month'),
-            year: sorted.findIndex((part) => part.key === 'year')
-        };
-    }
-    // Os nomes vinham fixos em ingles no codigo. Intl resolve pelo idioma ativo sem
-    // precisar de chave de traducao pra cada mes e cada dia - e e o mesmo caminho que
-    // o chat.component.ts ja usa na lib.
-    //
-    // O ano de referencia e arbitrario: so precisa de um domingo conhecido (2023-01-01)
-    // e de um dia 1 de cada mes.
-    localizedWeekDayNames(lang) {
-        const formatador = new Intl.DateTimeFormat(lang || 'pt', { weekday: 'short' });
-        return Array.from({ length: DAYS_IN_WEEK }, (_, day) => this.semPontoFinal(formatador.format(new Date(2023, 0, 1 + day))));
-    }
-    localizedMonthNames(lang, estilo) {
-        const formatador = new Intl.DateTimeFormat(lang || 'pt', { month: estilo });
-        return Array.from({ length: MONTHS_IN_YEAR }, (_, month) => this.semPontoFinal(formatador.format(new Date(2023, month, 1))));
-    }
-    // pt abrevia com ponto ("jan.", "dom."); no cabecalho do calendario o ponto so
-    // ocupa espaco numa coluna que ja e estreita.
-    semPontoFinal(text) {
-        return text.endsWith('.') ? text.slice(0, -1) : text;
-    }
     formatDate(date) {
         const d = date.getDate().toString().padStart(2, '0');
         const m = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -42225,7 +41996,7 @@ class DatepickerComponent extends InputsComponent {
         return n.toString().padStart(2, '0');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DatepickerComponent, isStandalone: true, selector: "sdc-datepicker", inputs: { mode: "mode", selectionMode: "selectionMode", showIcon: "showIcon", icon: "icon", min: "min", max: "max", defaultDate: "defaultDate", dateFormat: "dateFormat", allowTyping: "allowTyping", hourFormat: "hourFormat", minuteStep: "minuteStep", showSeconds: "showSeconds", rangeSeparator: "rangeSeparator", showOnFocus: "showOnFocus", readonlyInput: "readonlyInput", firstDayOfWeek: "firstDayOfWeek", showButtonBar: "showButtonBar", showClear: "showClear", disabledDates: "disabledDates", disabledDays: "disabledDays" }, outputs: { selected: "selected", closed: "closed", monthChange: "monthChange", yearChange: "yearChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DatepickerComponent, isStandalone: true, selector: "sdc-datepicker", inputs: { mode: "mode", selectionMode: "selectionMode", showIcon: "showIcon", icon: "icon", min: "min", max: "max", defaultDate: "defaultDate", dateFormat: "dateFormat", hourFormat: "hourFormat", minuteStep: "minuteStep", showSeconds: "showSeconds", rangeSeparator: "rangeSeparator", showOnFocus: "showOnFocus", readonlyInput: "readonlyInput", firstDayOfWeek: "firstDayOfWeek", showButtonBar: "showButtonBar", showClear: "showClear", disabledDates: "disabledDates", disabledDays: "disabledDays" }, outputs: { selected: "selected", closed: "closed", monthChange: "monthChange", yearChange: "yearChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatepickerComponent),
@@ -42236,7 +42007,7 @@ class DatepickerComponent extends InputsComponent {
                 useExisting: forwardRef(() => DatepickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "panelContentRef", first: true, predicate: ["panelContentRef"], descendants: true }, { propertyName: "dayButtonRefs", predicate: ["dayBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sdc-datepicker\">\n  @if (labelKey()) {\n    <div class=\"sdc-datepicker__label-row\">\n      <label class=\"sdc-datepicker__label\" [attr.for]=\"inputId\">\n        <span class=\"sdc-datepicker__label-text\">\n          {{ labelKey() | translate }}\n          @if (required) {\n            <span class=\"required-field\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      </label>\n    </div>\n  }\n\n  <sdc-popover\n    [open]=\"panelOpen\"\n    [toggleOnTriggerClick]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [closeOnEscape]=\"true\"\n    [matchTriggerWidth]=\"false\"\n    [restoreFocusOnClose]=\"false\"\n    [trapFocus]=\"true\"\n    [ariaLabel]=\"'datepicker.calendar'\"\n    panelClass=\"sdc-datepicker-popover-panel\"\n    (openChange)=\"onPopoverOpenChange($event)\"\n  >\n    <div sdc-popover-trigger>\n      <div\n        class=\"sdc-datepicker__control\"\n        #triggerRef\n        [class.sdc-datepicker__control--invalid]=\"invalid\"\n        [class.sdc-datepicker__control--disabled]=\"disabled\"\n        [ngStyle]=\"getInputStyle()\"\n      >\n        <div class=\"sdc-datepicker__value\">\n          <input\n            #inputRef\n            [id]=\"inputId\"\n            class=\"sdc-datepicker__input\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonlyInput && !allowTyping\"\n            [placeholder]=\"placeholder || dateFormat\"\n            [value]=\"inputValue()\"\n            [attr.aria-label]=\"labelKey() ? (labelKey() | translate) : placeholder\"\n            [attr.aria-expanded]=\"panelOpen\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            aria-autocomplete=\"none\"\n            autocomplete=\"off\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus()\"\n            (input)=\"onInputTyping($event)\"\n            (blur)=\"onInputBlur()\"\n            (keydown)=\"onKeydown($event)\"\n          />\n        </div>\n\n        <div class=\"sdc-datepicker__actions\">\n          @if (showClear && value) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--clear\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.clear' | translate\"\n              (click)=\"clearValue(); $event.stopPropagation()\"\n            >\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (showIcon) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--toggle\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.calendar' | translate\"\n              [attr.aria-expanded]=\"panelOpen\"\n              (click)=\"togglePanel(); $event.stopPropagation()\"\n            >\n              <i [class]=\"icon\" class=\"sdc-datepicker__icon\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div sdc-popover-content>\n      <div\n      #panelContentRef\n      class=\"sdc-datepicker__panel\"\n      (keydown)=\"onOverlayKeydown($event)\"\n      [attr.aria-label]=\"'datepicker.calendar' | translate\"\n    >\n      <!-- Navigation Header -->\n      @if (mode !== 'time') {\n        <div class=\"sdc-datepicker__header\">\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.prev' | translate\"\n            (click)=\"currentView() === 'days' ? prevMonth() : currentView() === 'months' ? prevYear() : prevYearRange()\"\n          >\n            <i class=\"fas fa-chevron-left\" aria-hidden=\"true\"></i>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__title-btn\"\n            (click)=\"\n              currentView() === 'days'\n                ? switchToMonthView()\n                : currentView() === 'months' ? switchToYearView() : null\n            \"\n          >\n            {{ viewMonthYearLabel() }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.next' | translate\"\n            (click)=\"currentView() === 'days' ? nextMonth() : currentView() === 'months' ? nextYear() : nextYearRange()\"\n          >\n            <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Days View -->\n      @if (currentView() === 'days' && mode !== 'time') {\n        <table class=\"sdc-datepicker__calendar\">\n          <thead>\n            <tr class=\"sdc-datepicker__weekdays\">\n              @for (dayName of weekDayNames(); track dayName) {\n                <th class=\"sdc-datepicker__weekday\" scope=\"col\">\n                  {{ dayName }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody class=\"sdc-datepicker__days\" (keydown)=\"onDaysGridKeydown($event)\">\n            @for (week of calendarWeeks(); track $index) {\n              <tr>\n                @for (day of week; track day.date.getTime()) {\n                  <td>\n                    <button\n                      #dayBtn\n                      type=\"button\"\n                      class=\"sdc-datepicker__day\"\n                      [class.sdc-datepicker__day--other-month]=\"!day.currentMonth\"\n                      [class.sdc-datepicker__day--today]=\"day.today\"\n                      [class.sdc-datepicker__day--selected]=\"day.selected\"\n                      [class.sdc-datepicker__day--disabled]=\"day.disabled\"\n                      [class.sdc-datepicker__day--in-range]=\"day.inRange\"\n                      [class.sdc-datepicker__day--range-start]=\"day.rangeStart\"\n                      [class.sdc-datepicker__day--range-end]=\"day.rangeEnd\"\n                      [disabled]=\"day.disabled\"\n                      [attr.aria-label]=\"day.date.toLocaleDateString()\"\n                      [attr.aria-selected]=\"day.selected\"\n                      [attr.aria-disabled]=\"day.disabled\"\n                      [attr.tabindex]=\"isDayTabStop(day) ? 0 : -1\"\n                      (click)=\"selectDay(day)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      }\n\n      <!-- Months View -->\n      @if (currentView() === 'months') {\n        <div class=\"sdc-datepicker__months-grid\">\n          @for (m of calendarMonths(); track m.month) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__month-cell\"\n              [class.sdc-datepicker__month-cell--selected]=\"m.selected\"\n              (click)=\"selectMonth(m.month)\"\n            >\n              {{ m.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Years View -->\n      @if (currentView() === 'years') {\n        <div class=\"sdc-datepicker__years-grid\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__year-cell\"\n              [class.sdc-datepicker__year-cell--selected]=\"year === viewDate().getFullYear()\"\n              (click)=\"selectYear(year)\"\n            >\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Time Picker -->\n      @if (showTimePicker()) {\n        <div class=\"sdc-datepicker__time\">\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementHours()\"\n              [attr.aria-label]=\"'datepicker.incrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(hours()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementHours()\"\n              [attr.aria-label]=\"'datepicker.decrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          <span class=\"sdc-datepicker__time-separator\">:</span>\n\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.incrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(minutes()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.decrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @if (showSeconds) {\n            <span class=\"sdc-datepicker__time-separator\">:</span>\n            <div class=\"sdc-datepicker__time-group\">\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"incrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.incrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n              </button>\n              <span class=\"sdc-datepicker__time-value\">{{ padTime(seconds()) }}</span>\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"decrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.decrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n      }\n\n      <!-- Footer: Today on the left, Clear + Confirm together on the right -->\n      @if (showButtonBar || mode === 'datetime' || mode === 'time') {\n        <div class=\"sdc-datepicker__button-bar\">\n          <div>\n            @if (showButtonBar && mode !== 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"selectToday()\"\n              >\n                {{ 'datepicker.today' | translate }}\n              </button>\n            }\n          </div>\n\n          <div class=\"sdc-datepicker__button-bar-end\">\n            @if (showButtonBar) {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"clearValue()\"\n              >\n                {{ 'datepicker.clear' | translate }}\n              </button>\n            }\n            @if (mode === 'datetime' || mode === 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__confirm-btn\"\n                (click)=\"confirmDateTime()\"\n              >\n                {{ 'datepicker.confirm' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    </div>\n  </sdc-popover>\n\n  @if (messageKey()) {\n    <small\n      [ngClass]=\"getInvalidMessageClass()\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      {{ messageKey() | translate }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}.sdc-datepicker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-datepicker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));padding-bottom:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));min-width:0}.sdc-datepicker__label-text{display:inline-flex;align-items:center}.required-field{margin-left:var(--sdc-datepicker-required-ml, var(--sdc-form-required-ml, .25rem));color:var(--sdc-datepicker-required-color, var(--sdc-error-color, #dc3545));font-weight:400}.sdc-datepicker__control{display:flex;align-items:stretch;min-height:var(--sdc-datepicker-control-height, var(--sdc-formfield-default-height, 38px));border:1px solid var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));border-radius:var(--sdc-datepicker-border-radius, var(--sdc-formfield-border-radius, 4px));background:var(--sdc-datepicker-bg, var(--sdc-formfield-default-bg, #fff));box-sizing:border-box;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.sdc-datepicker__control:hover{border-color:var(--sdc-datepicker-hover-border, var(--sdc-formfield-focus-color, #007bff))}.sdc-datepicker__control:focus-within{border-color:var(--sdc-datepicker-focus-border, var(--sdc-formfield-focus-color, #007bff));box-shadow:var(--sdc-datepicker-focus-shadow, var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14)))}.sdc-datepicker__control--invalid,.sdc-datepicker__control--invalid:hover,.sdc-datepicker__control--invalid:focus-within{border-color:var(--sdc-datepicker-invalid-border, var(--sdc-formfield-invalid-border, #d98888));box-shadow:var(--sdc-datepicker-invalid-shadow, var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16)))}.sdc-datepicker__control--disabled,.sdc-datepicker__control--disabled:hover{background-color:var(--sdc-datepicker-disabled-bg, var(--sdc-formfield-disabled-bg, #e9ecef));border-color:var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));box-shadow:none;cursor:not-allowed}.sdc-datepicker__value{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 .75rem}.sdc-datepicker__input{width:100%;min-width:0;border:0;background:transparent;box-shadow:none;outline:0;font:inherit;color:inherit;line-height:var(--sdc-datepicker-input-line-height, var(--sdc-formfield-default-line-height, 1.5));padding:0;cursor:pointer}.sdc-datepicker__input::placeholder{color:var(--sdc-datepicker-placeholder-color, var(--sdc-form-placeholder-color, #9ca3af))}.sdc-datepicker__input:disabled{cursor:not-allowed}.sdc-datepicker__actions{display:flex;align-items:stretch;flex:0 0 auto}.sdc-datepicker__icon{font-size:.875rem}.sdc-datepicker__icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;background:transparent;color:var(--sdc-button-icon-default, #333333);cursor:pointer}.sdc-datepicker__icon-button:hover:not(:disabled){background:transparent}.sdc-datepicker__icon-button--clear{min-width:2rem;padding:0 .5rem}.sdc-datepicker__icon-button--toggle{min-width:2.5rem;padding:0 .75rem;border-left:1px solid var(--sdc-formfield-default-border, #ced4da)}.sdc-datepicker__panel{background:var(--sdc-datepicker-panel-bg, #fff);border:1px solid var(--sdc-datepicker-panel-border, #e5e7eb);border-radius:var(--sdc-datepicker-panel-radius, 6px);box-shadow:var(--sdc-datepicker-panel-shadow, 0 4px 12px rgba(0, 0, 0, .1));padding:0;width:var(--sdc-datepicker-panel-width, 280px);outline:none;box-sizing:border-box}.sdc-datepicker__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;border-radius:var(--sdc-datepicker-nav-btn-radius, 50%);color:var(--sdc-datepicker-nav-btn-color, #374151);cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__nav-btn:hover{background-color:var(--sdc-datepicker-nav-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__title-btn{border:0;background:transparent;font-weight:600;font-size:var(--sdc-datepicker-title-font-size, .875rem);color:var(--sdc-datepicker-title-color, #111827);cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background-color .15s ease}.sdc-datepicker__title-btn:hover{background-color:var(--sdc-datepicker-title-hover-bg, rgba(0, 0, 0, .04))}.sdc-datepicker__calendar{-webkit-user-select:none;user-select:none;padding:0 .5rem .5rem;border-collapse:collapse;border-spacing:0;width:100%}.sdc-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding-top:.5rem}.sdc-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sdc-datepicker-weekday-font-size, .75rem);font-weight:600;color:var(--sdc-datepicker-weekday-color, #6b7280);text-transform:uppercase}.sdc-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sdc-datepicker-day-gap, 2px)}.sdc-datepicker__days>tr{display:contents}.sdc-datepicker__days td{padding:0}.sdc-datepicker__day{display:flex;align-items:center;justify-content:center;width:var(--sdc-datepicker-day-size, 32px);height:var(--sdc-datepicker-day-size, 32px);margin:0 auto;border:0;border-radius:var(--sdc-datepicker-day-radius, 50%);background:transparent;font-size:var(--sdc-datepicker-day-font-size, .75rem);color:var(--sdc-datepicker-day-color, #111827);cursor:pointer;transition:background-color .12s ease,color .12s ease;position:relative;padding:0}.sdc-datepicker__day:hover:not(:disabled):not(.sdc-datepicker__day--selected){background-color:var(--sdc-datepicker-day-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__day--other-month{color:var(--sdc-datepicker-day-other-month-color, #d1d5db)}.sdc-datepicker__day--today{border:2px solid var(--sdc-datepicker-today-border-color, var(--sdc-tab-primary, #007bff))}.sdc-datepicker__day--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__day--selected:hover{background-color:var(--sdc-datepicker-selected-hover-bg, #0056b3)}.sdc-datepicker__day--disabled{opacity:var(--sdc-datepicker-disabled-opacity, .35);cursor:not-allowed}.sdc-datepicker__day--in-range{background-color:var(--sdc-datepicker-range-bg, rgba(0, 123, 255, .1));border-radius:0}.sdc-datepicker__day--range-start{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:var(--sdc-datepicker-day-radius, 50%) 0 0 var(--sdc-datepicker-day-radius, 50%)}.sdc-datepicker__day--range-end{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:0 var(--sdc-datepicker-day-radius, 50%) var(--sdc-datepicker-day-radius, 50%) 0}.sdc-datepicker__months-grid,.sdc-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.sdc-datepicker__month-cell,.sdc-datepicker__year-cell{display:flex;align-items:center;justify-content:center;padding:.625rem .5rem;border:0;border-radius:var(--sdc-datepicker-cell-radius, 6px);background:transparent;font-size:.8125rem;color:var(--sdc-datepicker-cell-color, #374151);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__month-cell:hover,.sdc-datepicker__year-cell:hover{background-color:var(--sdc-datepicker-cell-hover-bg, rgba(0, 0, 0, .05))}.sdc-datepicker__month-cell--selected,.sdc-datepicker__year-cell--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__time{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__time-group{display:flex;flex-direction:column;align-items:center;gap:.125rem}.sdc-datepicker__time-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border:0;background:transparent;border-radius:4px;color:var(--sdc-datepicker-time-btn-color, #6b7280);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__time-btn:hover{background-color:var(--sdc-datepicker-time-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__time-value{font-size:var(--sdc-datepicker-time-font-size, 1.125rem);font-weight:600;color:var(--sdc-datepicker-time-value-color, #111827);min-width:2ch;text-align:center}.sdc-datepicker__time-separator{font-size:1.125rem;font-weight:600;color:var(--sdc-datepicker-time-separator-color, #6b7280);padding:0 .125rem;align-self:center}.sdc-datepicker__confirm-btn{padding:.25rem .875rem;border:0;border-radius:var(--sdc-datepicker-confirm-btn-radius, 4px);background-color:var(--sdc-datepicker-confirm-btn-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-confirm-btn-color, #fff);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__confirm-btn:hover{background-color:var(--sdc-datepicker-confirm-btn-hover-bg, #0056b3)}.sdc-datepicker__button-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__button-bar-end{display:flex;align-items:center;gap:.5rem}.sdc-datepicker__bar-btn{padding:.25rem .75rem;border:0;border-radius:4px;background:transparent;font-size:.8125rem;font-weight:500;color:var(--sdc-datepicker-bar-btn-color, var(--sdc-tab-primary, #007bff));cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__bar-btn:hover{background-color:var(--sdc-datepicker-bar-btn-hover-bg, rgba(0, 123, 255, .08))}.sdc-datepicker__backdrop{background:transparent}.message{display:block;margin-top:.25rem;font-size:var(--sdc-datepicker-message-font-size, .75rem);color:var(--sdc-datepicker-message-color, #6b7280)}.message.invalid{color:var(--sdc-datepicker-message-invalid-color, var(--sdc-error-color, #dc3545))}::ng-deep .sdc-datepicker-popover-panel{overflow:visible!important;max-width:none!important;max-height:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: PopoverComponent, selector: "sdc-popover", inputs: ["open", "disabled", "toggleOnTriggerClick", "closeOnOutsideClick", "closeOnScroll", "closeOnEscape", "trapFocus", "focusOnOpen", "restoreFocusOnClose", "ariaLabel", "appendTo", "zIndex", "offset", "placement", "role", "matchTriggerWidth", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "panelContentRef", first: true, predicate: ["panelContentRef"], descendants: true }, { propertyName: "dayButtonRefs", predicate: ["dayBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sdc-datepicker\">\n  @if (labelKey()) {\n    <div class=\"sdc-datepicker__label-row\">\n      <label class=\"sdc-datepicker__label\" [attr.for]=\"inputId\">\n        <span class=\"sdc-datepicker__label-text\">\n          {{ labelKey() | translate }}\n          @if (required) {\n            <span class=\"required-field\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      </label>\n    </div>\n  }\n\n  <sdc-popover\n    [open]=\"panelOpen\"\n    [toggleOnTriggerClick]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [closeOnEscape]=\"true\"\n    [matchTriggerWidth]=\"false\"\n    [restoreFocusOnClose]=\"false\"\n    [trapFocus]=\"true\"\n    [ariaLabel]=\"'datepicker.calendar'\"\n    panelClass=\"sdc-datepicker-popover-panel\"\n    (openChange)=\"onPopoverOpenChange($event)\"\n  >\n    <div sdc-popover-trigger>\n      <div\n        class=\"sdc-datepicker__control\"\n        #triggerRef\n        [class.sdc-datepicker__control--invalid]=\"invalid\"\n        [class.sdc-datepicker__control--disabled]=\"disabled\"\n        [ngStyle]=\"getInputStyle()\"\n      >\n        <div class=\"sdc-datepicker__value\">\n          <input\n            #inputRef\n            [id]=\"inputId\"\n            class=\"sdc-datepicker__input\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonlyInput\"\n            [placeholder]=\"placeholder || dateFormat\"\n            [value]=\"displayValue()\"\n            [attr.aria-label]=\"labelKey() ? (labelKey() | translate) : placeholder\"\n            [attr.aria-expanded]=\"panelOpen\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            aria-autocomplete=\"none\"\n            autocomplete=\"off\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus()\"\n            (keydown)=\"onKeydown($event)\"\n          />\n        </div>\n\n        <div class=\"sdc-datepicker__actions\">\n          @if (showClear && value) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--clear\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.clear' | translate\"\n              (click)=\"clearValue(); $event.stopPropagation()\"\n            >\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (showIcon) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--toggle\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.calendar' | translate\"\n              [attr.aria-expanded]=\"panelOpen\"\n              (click)=\"togglePanel(); $event.stopPropagation()\"\n            >\n              <i [class]=\"icon\" class=\"sdc-datepicker__icon\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div sdc-popover-content>\n      <div\n      #panelContentRef\n      class=\"sdc-datepicker__panel\"\n      (keydown)=\"onOverlayKeydown($event)\"\n      [attr.aria-label]=\"'datepicker.calendar' | translate\"\n    >\n      <!-- Navigation Header -->\n      @if (mode !== 'time') {\n        <div class=\"sdc-datepicker__header\">\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.prev' | translate\"\n            (click)=\"currentView() === 'days' ? prevMonth() : currentView() === 'months' ? prevYear() : prevYearRange()\"\n          >\n            <i class=\"fas fa-chevron-left\" aria-hidden=\"true\"></i>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__title-btn\"\n            (click)=\"\n              currentView() === 'days'\n                ? switchToMonthView()\n                : currentView() === 'months' ? switchToYearView() : null\n            \"\n          >\n            {{ viewMonthYearLabel() }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.next' | translate\"\n            (click)=\"currentView() === 'days' ? nextMonth() : currentView() === 'months' ? nextYear() : nextYearRange()\"\n          >\n            <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Days View -->\n      @if (currentView() === 'days' && mode !== 'time') {\n        <table class=\"sdc-datepicker__calendar\">\n          <thead>\n            <tr class=\"sdc-datepicker__weekdays\">\n              @for (dayName of weekDayNames(); track dayName) {\n                <th class=\"sdc-datepicker__weekday\" scope=\"col\">\n                  {{ dayName }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody class=\"sdc-datepicker__days\" (keydown)=\"onDaysGridKeydown($event)\">\n            @for (week of calendarWeeks(); track $index) {\n              <tr>\n                @for (day of week; track day.date.getTime()) {\n                  <td>\n                    <button\n                      #dayBtn\n                      type=\"button\"\n                      class=\"sdc-datepicker__day\"\n                      [class.sdc-datepicker__day--other-month]=\"!day.currentMonth\"\n                      [class.sdc-datepicker__day--today]=\"day.today\"\n                      [class.sdc-datepicker__day--selected]=\"day.selected\"\n                      [class.sdc-datepicker__day--disabled]=\"day.disabled\"\n                      [class.sdc-datepicker__day--in-range]=\"day.inRange\"\n                      [class.sdc-datepicker__day--range-start]=\"day.rangeStart\"\n                      [class.sdc-datepicker__day--range-end]=\"day.rangeEnd\"\n                      [disabled]=\"day.disabled\"\n                      [attr.aria-label]=\"day.date.toLocaleDateString()\"\n                      [attr.aria-selected]=\"day.selected\"\n                      [attr.aria-disabled]=\"day.disabled\"\n                      [attr.tabindex]=\"isDayTabStop(day) ? 0 : -1\"\n                      (click)=\"selectDay(day)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      }\n\n      <!-- Months View -->\n      @if (currentView() === 'months') {\n        <div class=\"sdc-datepicker__months-grid\">\n          @for (m of calendarMonths(); track m.month) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__month-cell\"\n              [class.sdc-datepicker__month-cell--selected]=\"m.selected\"\n              (click)=\"selectMonth(m.month)\"\n            >\n              {{ m.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Years View -->\n      @if (currentView() === 'years') {\n        <div class=\"sdc-datepicker__years-grid\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__year-cell\"\n              [class.sdc-datepicker__year-cell--selected]=\"year === viewDate().getFullYear()\"\n              (click)=\"selectYear(year)\"\n            >\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Time Picker -->\n      @if (showTimePicker()) {\n        <div class=\"sdc-datepicker__time\">\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementHours()\"\n              [attr.aria-label]=\"'datepicker.incrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(hours()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementHours()\"\n              [attr.aria-label]=\"'datepicker.decrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          <span class=\"sdc-datepicker__time-separator\">:</span>\n\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.incrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(minutes()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.decrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @if (showSeconds) {\n            <span class=\"sdc-datepicker__time-separator\">:</span>\n            <div class=\"sdc-datepicker__time-group\">\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"incrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.incrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n              </button>\n              <span class=\"sdc-datepicker__time-value\">{{ padTime(seconds()) }}</span>\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"decrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.decrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n      }\n\n      <!-- Footer: Today on the left, Clear + Confirm together on the right -->\n      @if (showButtonBar || mode === 'datetime' || mode === 'time') {\n        <div class=\"sdc-datepicker__button-bar\">\n          <div>\n            @if (showButtonBar && mode !== 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"selectToday()\"\n              >\n                {{ 'datepicker.today' | translate }}\n              </button>\n            }\n          </div>\n\n          <div class=\"sdc-datepicker__button-bar-end\">\n            @if (showButtonBar) {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"clearValue()\"\n              >\n                {{ 'datepicker.clear' | translate }}\n              </button>\n            }\n            @if (mode === 'datetime' || mode === 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__confirm-btn\"\n                (click)=\"confirmDateTime()\"\n              >\n                {{ 'datepicker.confirm' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    </div>\n  </sdc-popover>\n\n  @if (messageKey()) {\n    <small\n      [ngClass]=\"getInvalidMessageClass()\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      {{ messageKey() | translate }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}.sdc-datepicker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-datepicker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));padding-bottom:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));min-width:0}.sdc-datepicker__label-text{display:inline-flex;align-items:center}.required-field{margin-left:var(--sdc-datepicker-required-ml, var(--sdc-form-required-ml, .25rem));color:var(--sdc-datepicker-required-color, var(--sdc-error-color, #dc3545));font-weight:400}.sdc-datepicker__control{display:flex;align-items:stretch;min-height:var(--sdc-datepicker-control-height, var(--sdc-formfield-default-height, 38px));border:1px solid var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));border-radius:var(--sdc-datepicker-border-radius, var(--sdc-formfield-border-radius, 4px));background:var(--sdc-datepicker-bg, var(--sdc-formfield-default-bg, #fff));box-sizing:border-box;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.sdc-datepicker__control:hover{border-color:var(--sdc-datepicker-hover-border, var(--sdc-formfield-focus-color, #007bff))}.sdc-datepicker__control:focus-within{border-color:var(--sdc-datepicker-focus-border, var(--sdc-formfield-focus-color, #007bff));box-shadow:var(--sdc-datepicker-focus-shadow, var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14)))}.sdc-datepicker__control--invalid,.sdc-datepicker__control--invalid:hover,.sdc-datepicker__control--invalid:focus-within{border-color:var(--sdc-datepicker-invalid-border, var(--sdc-formfield-invalid-border, #d98888));box-shadow:var(--sdc-datepicker-invalid-shadow, var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16)))}.sdc-datepicker__control--disabled,.sdc-datepicker__control--disabled:hover{background-color:var(--sdc-datepicker-disabled-bg, var(--sdc-formfield-disabled-bg, #e9ecef));border-color:var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));box-shadow:none;cursor:not-allowed}.sdc-datepicker__value{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 .75rem}.sdc-datepicker__input{width:100%;min-width:0;border:0;background:transparent;box-shadow:none;outline:0;font:inherit;color:inherit;line-height:var(--sdc-datepicker-input-line-height, var(--sdc-formfield-default-line-height, 1.5));padding:0;cursor:pointer}.sdc-datepicker__input::placeholder{color:var(--sdc-datepicker-placeholder-color, var(--sdc-form-placeholder-color, #9ca3af))}.sdc-datepicker__input:disabled{cursor:not-allowed}.sdc-datepicker__actions{display:flex;align-items:stretch;flex:0 0 auto}.sdc-datepicker__icon{font-size:.875rem}.sdc-datepicker__icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;background:transparent;color:var(--sdc-button-icon-default, #333333);cursor:pointer}.sdc-datepicker__icon-button:hover:not(:disabled){background:transparent}.sdc-datepicker__icon-button--clear{min-width:2rem;padding:0 .5rem}.sdc-datepicker__icon-button--toggle{min-width:2.5rem;padding:0 .75rem;border-left:1px solid var(--sdc-formfield-default-border, #ced4da)}.sdc-datepicker__panel{background:var(--sdc-datepicker-panel-bg, #fff);border:1px solid var(--sdc-datepicker-panel-border, #e5e7eb);border-radius:var(--sdc-datepicker-panel-radius, 6px);box-shadow:var(--sdc-datepicker-panel-shadow, 0 4px 12px rgba(0, 0, 0, .1));padding:0;width:var(--sdc-datepicker-panel-width, 280px);outline:none;box-sizing:border-box}.sdc-datepicker__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;border-radius:var(--sdc-datepicker-nav-btn-radius, 50%);color:var(--sdc-datepicker-nav-btn-color, #374151);cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__nav-btn:hover{background-color:var(--sdc-datepicker-nav-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__title-btn{border:0;background:transparent;font-weight:600;font-size:var(--sdc-datepicker-title-font-size, .875rem);color:var(--sdc-datepicker-title-color, #111827);cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background-color .15s ease}.sdc-datepicker__title-btn:hover{background-color:var(--sdc-datepicker-title-hover-bg, rgba(0, 0, 0, .04))}.sdc-datepicker__calendar{-webkit-user-select:none;user-select:none;padding:0 .5rem .5rem;border-collapse:collapse;border-spacing:0;width:100%}.sdc-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding-top:.5rem}.sdc-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sdc-datepicker-weekday-font-size, .75rem);font-weight:600;color:var(--sdc-datepicker-weekday-color, #6b7280);text-transform:uppercase}.sdc-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sdc-datepicker-day-gap, 2px)}.sdc-datepicker__days>tr{display:contents}.sdc-datepicker__days td{padding:0}.sdc-datepicker__day{display:flex;align-items:center;justify-content:center;width:var(--sdc-datepicker-day-size, 32px);height:var(--sdc-datepicker-day-size, 32px);margin:0 auto;border:0;border-radius:var(--sdc-datepicker-day-radius, 50%);background:transparent;font-size:var(--sdc-datepicker-day-font-size, .75rem);color:var(--sdc-datepicker-day-color, #111827);cursor:pointer;transition:background-color .12s ease,color .12s ease;position:relative;padding:0}.sdc-datepicker__day:hover:not(:disabled):not(.sdc-datepicker__day--selected){background-color:var(--sdc-datepicker-day-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__day--other-month{color:var(--sdc-datepicker-day-other-month-color, #d1d5db)}.sdc-datepicker__day--today{border:2px solid var(--sdc-datepicker-today-border-color, var(--sdc-tab-primary, #007bff))}.sdc-datepicker__day--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__day--selected:hover{background-color:var(--sdc-datepicker-selected-hover-bg, #0056b3)}.sdc-datepicker__day--disabled{opacity:var(--sdc-datepicker-disabled-opacity, .35);cursor:not-allowed}.sdc-datepicker__day--in-range{background-color:var(--sdc-datepicker-range-bg, rgba(0, 123, 255, .1));border-radius:0}.sdc-datepicker__day--range-start{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:var(--sdc-datepicker-day-radius, 50%) 0 0 var(--sdc-datepicker-day-radius, 50%)}.sdc-datepicker__day--range-end{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:0 var(--sdc-datepicker-day-radius, 50%) var(--sdc-datepicker-day-radius, 50%) 0}.sdc-datepicker__months-grid,.sdc-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.sdc-datepicker__month-cell,.sdc-datepicker__year-cell{display:flex;align-items:center;justify-content:center;padding:.625rem .5rem;border:0;border-radius:var(--sdc-datepicker-cell-radius, 6px);background:transparent;font-size:.8125rem;color:var(--sdc-datepicker-cell-color, #374151);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__month-cell:hover,.sdc-datepicker__year-cell:hover{background-color:var(--sdc-datepicker-cell-hover-bg, rgba(0, 0, 0, .05))}.sdc-datepicker__month-cell--selected,.sdc-datepicker__year-cell--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__time{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__time-group{display:flex;flex-direction:column;align-items:center;gap:.125rem}.sdc-datepicker__time-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border:0;background:transparent;border-radius:4px;color:var(--sdc-datepicker-time-btn-color, #6b7280);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__time-btn:hover{background-color:var(--sdc-datepicker-time-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__time-value{font-size:var(--sdc-datepicker-time-font-size, 1.125rem);font-weight:600;color:var(--sdc-datepicker-time-value-color, #111827);min-width:2ch;text-align:center}.sdc-datepicker__time-separator{font-size:1.125rem;font-weight:600;color:var(--sdc-datepicker-time-separator-color, #6b7280);padding:0 .125rem;align-self:center}.sdc-datepicker__confirm-btn{padding:.25rem .875rem;border:0;border-radius:var(--sdc-datepicker-confirm-btn-radius, 4px);background-color:var(--sdc-datepicker-confirm-btn-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-confirm-btn-color, #fff);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__confirm-btn:hover{background-color:var(--sdc-datepicker-confirm-btn-hover-bg, #0056b3)}.sdc-datepicker__button-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__button-bar-end{display:flex;align-items:center;gap:.5rem}.sdc-datepicker__bar-btn{padding:.25rem .75rem;border:0;border-radius:4px;background:transparent;font-size:.8125rem;font-weight:500;color:var(--sdc-datepicker-bar-btn-color, var(--sdc-tab-primary, #007bff));cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__bar-btn:hover{background-color:var(--sdc-datepicker-bar-btn-hover-bg, rgba(0, 123, 255, .08))}.sdc-datepicker__backdrop{background:transparent}.message{display:block;margin-top:.25rem;font-size:var(--sdc-datepicker-message-font-size, .75rem);color:var(--sdc-datepicker-message-color, #6b7280)}.message.invalid{color:var(--sdc-datepicker-message-invalid-color, var(--sdc-error-color, #dc3545))}::ng-deep .sdc-datepicker-popover-panel{overflow:visible!important;max-width:none!important;max-height:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: PopoverComponent, selector: "sdc-popover", inputs: ["open", "disabled", "toggleOnTriggerClick", "closeOnOutsideClick", "closeOnScroll", "closeOnEscape", "trapFocus", "focusOnOpen", "restoreFocusOnClose", "ariaLabel", "appendTo", "zIndex", "offset", "placement", "role", "matchTriggerWidth", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
@@ -42256,7 +42027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => DatepickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"sdc-datepicker\">\n  @if (labelKey()) {\n    <div class=\"sdc-datepicker__label-row\">\n      <label class=\"sdc-datepicker__label\" [attr.for]=\"inputId\">\n        <span class=\"sdc-datepicker__label-text\">\n          {{ labelKey() | translate }}\n          @if (required) {\n            <span class=\"required-field\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      </label>\n    </div>\n  }\n\n  <sdc-popover\n    [open]=\"panelOpen\"\n    [toggleOnTriggerClick]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [closeOnEscape]=\"true\"\n    [matchTriggerWidth]=\"false\"\n    [restoreFocusOnClose]=\"false\"\n    [trapFocus]=\"true\"\n    [ariaLabel]=\"'datepicker.calendar'\"\n    panelClass=\"sdc-datepicker-popover-panel\"\n    (openChange)=\"onPopoverOpenChange($event)\"\n  >\n    <div sdc-popover-trigger>\n      <div\n        class=\"sdc-datepicker__control\"\n        #triggerRef\n        [class.sdc-datepicker__control--invalid]=\"invalid\"\n        [class.sdc-datepicker__control--disabled]=\"disabled\"\n        [ngStyle]=\"getInputStyle()\"\n      >\n        <div class=\"sdc-datepicker__value\">\n          <input\n            #inputRef\n            [id]=\"inputId\"\n            class=\"sdc-datepicker__input\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonlyInput && !allowTyping\"\n            [placeholder]=\"placeholder || dateFormat\"\n            [value]=\"inputValue()\"\n            [attr.aria-label]=\"labelKey() ? (labelKey() | translate) : placeholder\"\n            [attr.aria-expanded]=\"panelOpen\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            aria-autocomplete=\"none\"\n            autocomplete=\"off\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus()\"\n            (input)=\"onInputTyping($event)\"\n            (blur)=\"onInputBlur()\"\n            (keydown)=\"onKeydown($event)\"\n          />\n        </div>\n\n        <div class=\"sdc-datepicker__actions\">\n          @if (showClear && value) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--clear\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.clear' | translate\"\n              (click)=\"clearValue(); $event.stopPropagation()\"\n            >\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (showIcon) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--toggle\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.calendar' | translate\"\n              [attr.aria-expanded]=\"panelOpen\"\n              (click)=\"togglePanel(); $event.stopPropagation()\"\n            >\n              <i [class]=\"icon\" class=\"sdc-datepicker__icon\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div sdc-popover-content>\n      <div\n      #panelContentRef\n      class=\"sdc-datepicker__panel\"\n      (keydown)=\"onOverlayKeydown($event)\"\n      [attr.aria-label]=\"'datepicker.calendar' | translate\"\n    >\n      <!-- Navigation Header -->\n      @if (mode !== 'time') {\n        <div class=\"sdc-datepicker__header\">\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.prev' | translate\"\n            (click)=\"currentView() === 'days' ? prevMonth() : currentView() === 'months' ? prevYear() : prevYearRange()\"\n          >\n            <i class=\"fas fa-chevron-left\" aria-hidden=\"true\"></i>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__title-btn\"\n            (click)=\"\n              currentView() === 'days'\n                ? switchToMonthView()\n                : currentView() === 'months' ? switchToYearView() : null\n            \"\n          >\n            {{ viewMonthYearLabel() }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.next' | translate\"\n            (click)=\"currentView() === 'days' ? nextMonth() : currentView() === 'months' ? nextYear() : nextYearRange()\"\n          >\n            <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Days View -->\n      @if (currentView() === 'days' && mode !== 'time') {\n        <table class=\"sdc-datepicker__calendar\">\n          <thead>\n            <tr class=\"sdc-datepicker__weekdays\">\n              @for (dayName of weekDayNames(); track dayName) {\n                <th class=\"sdc-datepicker__weekday\" scope=\"col\">\n                  {{ dayName }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody class=\"sdc-datepicker__days\" (keydown)=\"onDaysGridKeydown($event)\">\n            @for (week of calendarWeeks(); track $index) {\n              <tr>\n                @for (day of week; track day.date.getTime()) {\n                  <td>\n                    <button\n                      #dayBtn\n                      type=\"button\"\n                      class=\"sdc-datepicker__day\"\n                      [class.sdc-datepicker__day--other-month]=\"!day.currentMonth\"\n                      [class.sdc-datepicker__day--today]=\"day.today\"\n                      [class.sdc-datepicker__day--selected]=\"day.selected\"\n                      [class.sdc-datepicker__day--disabled]=\"day.disabled\"\n                      [class.sdc-datepicker__day--in-range]=\"day.inRange\"\n                      [class.sdc-datepicker__day--range-start]=\"day.rangeStart\"\n                      [class.sdc-datepicker__day--range-end]=\"day.rangeEnd\"\n                      [disabled]=\"day.disabled\"\n                      [attr.aria-label]=\"day.date.toLocaleDateString()\"\n                      [attr.aria-selected]=\"day.selected\"\n                      [attr.aria-disabled]=\"day.disabled\"\n                      [attr.tabindex]=\"isDayTabStop(day) ? 0 : -1\"\n                      (click)=\"selectDay(day)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      }\n\n      <!-- Months View -->\n      @if (currentView() === 'months') {\n        <div class=\"sdc-datepicker__months-grid\">\n          @for (m of calendarMonths(); track m.month) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__month-cell\"\n              [class.sdc-datepicker__month-cell--selected]=\"m.selected\"\n              (click)=\"selectMonth(m.month)\"\n            >\n              {{ m.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Years View -->\n      @if (currentView() === 'years') {\n        <div class=\"sdc-datepicker__years-grid\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__year-cell\"\n              [class.sdc-datepicker__year-cell--selected]=\"year === viewDate().getFullYear()\"\n              (click)=\"selectYear(year)\"\n            >\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Time Picker -->\n      @if (showTimePicker()) {\n        <div class=\"sdc-datepicker__time\">\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementHours()\"\n              [attr.aria-label]=\"'datepicker.incrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(hours()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementHours()\"\n              [attr.aria-label]=\"'datepicker.decrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          <span class=\"sdc-datepicker__time-separator\">:</span>\n\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.incrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(minutes()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.decrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @if (showSeconds) {\n            <span class=\"sdc-datepicker__time-separator\">:</span>\n            <div class=\"sdc-datepicker__time-group\">\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"incrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.incrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n              </button>\n              <span class=\"sdc-datepicker__time-value\">{{ padTime(seconds()) }}</span>\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"decrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.decrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n      }\n\n      <!-- Footer: Today on the left, Clear + Confirm together on the right -->\n      @if (showButtonBar || mode === 'datetime' || mode === 'time') {\n        <div class=\"sdc-datepicker__button-bar\">\n          <div>\n            @if (showButtonBar && mode !== 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"selectToday()\"\n              >\n                {{ 'datepicker.today' | translate }}\n              </button>\n            }\n          </div>\n\n          <div class=\"sdc-datepicker__button-bar-end\">\n            @if (showButtonBar) {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"clearValue()\"\n              >\n                {{ 'datepicker.clear' | translate }}\n              </button>\n            }\n            @if (mode === 'datetime' || mode === 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__confirm-btn\"\n                (click)=\"confirmDateTime()\"\n              >\n                {{ 'datepicker.confirm' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    </div>\n  </sdc-popover>\n\n  @if (messageKey()) {\n    <small\n      [ngClass]=\"getInvalidMessageClass()\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      {{ messageKey() | translate }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}.sdc-datepicker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-datepicker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));padding-bottom:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));min-width:0}.sdc-datepicker__label-text{display:inline-flex;align-items:center}.required-field{margin-left:var(--sdc-datepicker-required-ml, var(--sdc-form-required-ml, .25rem));color:var(--sdc-datepicker-required-color, var(--sdc-error-color, #dc3545));font-weight:400}.sdc-datepicker__control{display:flex;align-items:stretch;min-height:var(--sdc-datepicker-control-height, var(--sdc-formfield-default-height, 38px));border:1px solid var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));border-radius:var(--sdc-datepicker-border-radius, var(--sdc-formfield-border-radius, 4px));background:var(--sdc-datepicker-bg, var(--sdc-formfield-default-bg, #fff));box-sizing:border-box;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.sdc-datepicker__control:hover{border-color:var(--sdc-datepicker-hover-border, var(--sdc-formfield-focus-color, #007bff))}.sdc-datepicker__control:focus-within{border-color:var(--sdc-datepicker-focus-border, var(--sdc-formfield-focus-color, #007bff));box-shadow:var(--sdc-datepicker-focus-shadow, var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14)))}.sdc-datepicker__control--invalid,.sdc-datepicker__control--invalid:hover,.sdc-datepicker__control--invalid:focus-within{border-color:var(--sdc-datepicker-invalid-border, var(--sdc-formfield-invalid-border, #d98888));box-shadow:var(--sdc-datepicker-invalid-shadow, var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16)))}.sdc-datepicker__control--disabled,.sdc-datepicker__control--disabled:hover{background-color:var(--sdc-datepicker-disabled-bg, var(--sdc-formfield-disabled-bg, #e9ecef));border-color:var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));box-shadow:none;cursor:not-allowed}.sdc-datepicker__value{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 .75rem}.sdc-datepicker__input{width:100%;min-width:0;border:0;background:transparent;box-shadow:none;outline:0;font:inherit;color:inherit;line-height:var(--sdc-datepicker-input-line-height, var(--sdc-formfield-default-line-height, 1.5));padding:0;cursor:pointer}.sdc-datepicker__input::placeholder{color:var(--sdc-datepicker-placeholder-color, var(--sdc-form-placeholder-color, #9ca3af))}.sdc-datepicker__input:disabled{cursor:not-allowed}.sdc-datepicker__actions{display:flex;align-items:stretch;flex:0 0 auto}.sdc-datepicker__icon{font-size:.875rem}.sdc-datepicker__icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;background:transparent;color:var(--sdc-button-icon-default, #333333);cursor:pointer}.sdc-datepicker__icon-button:hover:not(:disabled){background:transparent}.sdc-datepicker__icon-button--clear{min-width:2rem;padding:0 .5rem}.sdc-datepicker__icon-button--toggle{min-width:2.5rem;padding:0 .75rem;border-left:1px solid var(--sdc-formfield-default-border, #ced4da)}.sdc-datepicker__panel{background:var(--sdc-datepicker-panel-bg, #fff);border:1px solid var(--sdc-datepicker-panel-border, #e5e7eb);border-radius:var(--sdc-datepicker-panel-radius, 6px);box-shadow:var(--sdc-datepicker-panel-shadow, 0 4px 12px rgba(0, 0, 0, .1));padding:0;width:var(--sdc-datepicker-panel-width, 280px);outline:none;box-sizing:border-box}.sdc-datepicker__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;border-radius:var(--sdc-datepicker-nav-btn-radius, 50%);color:var(--sdc-datepicker-nav-btn-color, #374151);cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__nav-btn:hover{background-color:var(--sdc-datepicker-nav-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__title-btn{border:0;background:transparent;font-weight:600;font-size:var(--sdc-datepicker-title-font-size, .875rem);color:var(--sdc-datepicker-title-color, #111827);cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background-color .15s ease}.sdc-datepicker__title-btn:hover{background-color:var(--sdc-datepicker-title-hover-bg, rgba(0, 0, 0, .04))}.sdc-datepicker__calendar{-webkit-user-select:none;user-select:none;padding:0 .5rem .5rem;border-collapse:collapse;border-spacing:0;width:100%}.sdc-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding-top:.5rem}.sdc-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sdc-datepicker-weekday-font-size, .75rem);font-weight:600;color:var(--sdc-datepicker-weekday-color, #6b7280);text-transform:uppercase}.sdc-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sdc-datepicker-day-gap, 2px)}.sdc-datepicker__days>tr{display:contents}.sdc-datepicker__days td{padding:0}.sdc-datepicker__day{display:flex;align-items:center;justify-content:center;width:var(--sdc-datepicker-day-size, 32px);height:var(--sdc-datepicker-day-size, 32px);margin:0 auto;border:0;border-radius:var(--sdc-datepicker-day-radius, 50%);background:transparent;font-size:var(--sdc-datepicker-day-font-size, .75rem);color:var(--sdc-datepicker-day-color, #111827);cursor:pointer;transition:background-color .12s ease,color .12s ease;position:relative;padding:0}.sdc-datepicker__day:hover:not(:disabled):not(.sdc-datepicker__day--selected){background-color:var(--sdc-datepicker-day-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__day--other-month{color:var(--sdc-datepicker-day-other-month-color, #d1d5db)}.sdc-datepicker__day--today{border:2px solid var(--sdc-datepicker-today-border-color, var(--sdc-tab-primary, #007bff))}.sdc-datepicker__day--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__day--selected:hover{background-color:var(--sdc-datepicker-selected-hover-bg, #0056b3)}.sdc-datepicker__day--disabled{opacity:var(--sdc-datepicker-disabled-opacity, .35);cursor:not-allowed}.sdc-datepicker__day--in-range{background-color:var(--sdc-datepicker-range-bg, rgba(0, 123, 255, .1));border-radius:0}.sdc-datepicker__day--range-start{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:var(--sdc-datepicker-day-radius, 50%) 0 0 var(--sdc-datepicker-day-radius, 50%)}.sdc-datepicker__day--range-end{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:0 var(--sdc-datepicker-day-radius, 50%) var(--sdc-datepicker-day-radius, 50%) 0}.sdc-datepicker__months-grid,.sdc-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.sdc-datepicker__month-cell,.sdc-datepicker__year-cell{display:flex;align-items:center;justify-content:center;padding:.625rem .5rem;border:0;border-radius:var(--sdc-datepicker-cell-radius, 6px);background:transparent;font-size:.8125rem;color:var(--sdc-datepicker-cell-color, #374151);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__month-cell:hover,.sdc-datepicker__year-cell:hover{background-color:var(--sdc-datepicker-cell-hover-bg, rgba(0, 0, 0, .05))}.sdc-datepicker__month-cell--selected,.sdc-datepicker__year-cell--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__time{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__time-group{display:flex;flex-direction:column;align-items:center;gap:.125rem}.sdc-datepicker__time-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border:0;background:transparent;border-radius:4px;color:var(--sdc-datepicker-time-btn-color, #6b7280);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__time-btn:hover{background-color:var(--sdc-datepicker-time-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__time-value{font-size:var(--sdc-datepicker-time-font-size, 1.125rem);font-weight:600;color:var(--sdc-datepicker-time-value-color, #111827);min-width:2ch;text-align:center}.sdc-datepicker__time-separator{font-size:1.125rem;font-weight:600;color:var(--sdc-datepicker-time-separator-color, #6b7280);padding:0 .125rem;align-self:center}.sdc-datepicker__confirm-btn{padding:.25rem .875rem;border:0;border-radius:var(--sdc-datepicker-confirm-btn-radius, 4px);background-color:var(--sdc-datepicker-confirm-btn-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-confirm-btn-color, #fff);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__confirm-btn:hover{background-color:var(--sdc-datepicker-confirm-btn-hover-bg, #0056b3)}.sdc-datepicker__button-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__button-bar-end{display:flex;align-items:center;gap:.5rem}.sdc-datepicker__bar-btn{padding:.25rem .75rem;border:0;border-radius:4px;background:transparent;font-size:.8125rem;font-weight:500;color:var(--sdc-datepicker-bar-btn-color, var(--sdc-tab-primary, #007bff));cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__bar-btn:hover{background-color:var(--sdc-datepicker-bar-btn-hover-bg, rgba(0, 123, 255, .08))}.sdc-datepicker__backdrop{background:transparent}.message{display:block;margin-top:.25rem;font-size:var(--sdc-datepicker-message-font-size, .75rem);color:var(--sdc-datepicker-message-color, #6b7280)}.message.invalid{color:var(--sdc-datepicker-message-invalid-color, var(--sdc-error-color, #dc3545))}::ng-deep .sdc-datepicker-popover-panel{overflow:visible!important;max-width:none!important;max-height:none!important}\n"] }]
+                    ], template: "<div class=\"sdc-datepicker\">\n  @if (labelKey()) {\n    <div class=\"sdc-datepicker__label-row\">\n      <label class=\"sdc-datepicker__label\" [attr.for]=\"inputId\">\n        <span class=\"sdc-datepicker__label-text\">\n          {{ labelKey() | translate }}\n          @if (required) {\n            <span class=\"required-field\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      </label>\n    </div>\n  }\n\n  <sdc-popover\n    [open]=\"panelOpen\"\n    [toggleOnTriggerClick]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [closeOnEscape]=\"true\"\n    [matchTriggerWidth]=\"false\"\n    [restoreFocusOnClose]=\"false\"\n    [trapFocus]=\"true\"\n    [ariaLabel]=\"'datepicker.calendar'\"\n    panelClass=\"sdc-datepicker-popover-panel\"\n    (openChange)=\"onPopoverOpenChange($event)\"\n  >\n    <div sdc-popover-trigger>\n      <div\n        class=\"sdc-datepicker__control\"\n        #triggerRef\n        [class.sdc-datepicker__control--invalid]=\"invalid\"\n        [class.sdc-datepicker__control--disabled]=\"disabled\"\n        [ngStyle]=\"getInputStyle()\"\n      >\n        <div class=\"sdc-datepicker__value\">\n          <input\n            #inputRef\n            [id]=\"inputId\"\n            class=\"sdc-datepicker__input\"\n            type=\"text\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonlyInput\"\n            [placeholder]=\"placeholder || dateFormat\"\n            [value]=\"displayValue()\"\n            [attr.aria-label]=\"labelKey() ? (labelKey() | translate) : placeholder\"\n            [attr.aria-expanded]=\"panelOpen\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            aria-autocomplete=\"none\"\n            autocomplete=\"off\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus()\"\n            (keydown)=\"onKeydown($event)\"\n          />\n        </div>\n\n        <div class=\"sdc-datepicker__actions\">\n          @if (showClear && value) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--clear\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.clear' | translate\"\n              (click)=\"clearValue(); $event.stopPropagation()\"\n            >\n              <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (showIcon) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__icon-button sdc-datepicker__icon-button--toggle\"\n              [disabled]=\"disabled\"\n              [attr.aria-label]=\"'datepicker.calendar' | translate\"\n              [attr.aria-expanded]=\"panelOpen\"\n              (click)=\"togglePanel(); $event.stopPropagation()\"\n            >\n              <i [class]=\"icon\" class=\"sdc-datepicker__icon\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div sdc-popover-content>\n      <div\n      #panelContentRef\n      class=\"sdc-datepicker__panel\"\n      (keydown)=\"onOverlayKeydown($event)\"\n      [attr.aria-label]=\"'datepicker.calendar' | translate\"\n    >\n      <!-- Navigation Header -->\n      @if (mode !== 'time') {\n        <div class=\"sdc-datepicker__header\">\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.prev' | translate\"\n            (click)=\"currentView() === 'days' ? prevMonth() : currentView() === 'months' ? prevYear() : prevYearRange()\"\n          >\n            <i class=\"fas fa-chevron-left\" aria-hidden=\"true\"></i>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__title-btn\"\n            (click)=\"\n              currentView() === 'days'\n                ? switchToMonthView()\n                : currentView() === 'months' ? switchToYearView() : null\n            \"\n          >\n            {{ viewMonthYearLabel() }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sdc-datepicker__nav-btn\"\n            [attr.aria-label]=\"'datepicker.next' | translate\"\n            (click)=\"currentView() === 'days' ? nextMonth() : currentView() === 'months' ? nextYear() : nextYearRange()\"\n          >\n            <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Days View -->\n      @if (currentView() === 'days' && mode !== 'time') {\n        <table class=\"sdc-datepicker__calendar\">\n          <thead>\n            <tr class=\"sdc-datepicker__weekdays\">\n              @for (dayName of weekDayNames(); track dayName) {\n                <th class=\"sdc-datepicker__weekday\" scope=\"col\">\n                  {{ dayName }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody class=\"sdc-datepicker__days\" (keydown)=\"onDaysGridKeydown($event)\">\n            @for (week of calendarWeeks(); track $index) {\n              <tr>\n                @for (day of week; track day.date.getTime()) {\n                  <td>\n                    <button\n                      #dayBtn\n                      type=\"button\"\n                      class=\"sdc-datepicker__day\"\n                      [class.sdc-datepicker__day--other-month]=\"!day.currentMonth\"\n                      [class.sdc-datepicker__day--today]=\"day.today\"\n                      [class.sdc-datepicker__day--selected]=\"day.selected\"\n                      [class.sdc-datepicker__day--disabled]=\"day.disabled\"\n                      [class.sdc-datepicker__day--in-range]=\"day.inRange\"\n                      [class.sdc-datepicker__day--range-start]=\"day.rangeStart\"\n                      [class.sdc-datepicker__day--range-end]=\"day.rangeEnd\"\n                      [disabled]=\"day.disabled\"\n                      [attr.aria-label]=\"day.date.toLocaleDateString()\"\n                      [attr.aria-selected]=\"day.selected\"\n                      [attr.aria-disabled]=\"day.disabled\"\n                      [attr.tabindex]=\"isDayTabStop(day) ? 0 : -1\"\n                      (click)=\"selectDay(day)\"\n                    >\n                      {{ day.day }}\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      }\n\n      <!-- Months View -->\n      @if (currentView() === 'months') {\n        <div class=\"sdc-datepicker__months-grid\">\n          @for (m of calendarMonths(); track m.month) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__month-cell\"\n              [class.sdc-datepicker__month-cell--selected]=\"m.selected\"\n              (click)=\"selectMonth(m.month)\"\n            >\n              {{ m.name }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Years View -->\n      @if (currentView() === 'years') {\n        <div class=\"sdc-datepicker__years-grid\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__year-cell\"\n              [class.sdc-datepicker__year-cell--selected]=\"year === viewDate().getFullYear()\"\n              (click)=\"selectYear(year)\"\n            >\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Time Picker -->\n      @if (showTimePicker()) {\n        <div class=\"sdc-datepicker__time\">\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementHours()\"\n              [attr.aria-label]=\"'datepicker.incrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(hours()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementHours()\"\n              [attr.aria-label]=\"'datepicker.decrementHour' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          <span class=\"sdc-datepicker__time-separator\">:</span>\n\n          <div class=\"sdc-datepicker__time-group\">\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"incrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.incrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n            </button>\n            <span class=\"sdc-datepicker__time-value\">{{ padTime(minutes()) }}</span>\n            <button\n              type=\"button\"\n              class=\"sdc-datepicker__time-btn\"\n              (click)=\"decrementMinutes()\"\n              [attr.aria-label]=\"'datepicker.decrementMinute' | translate\"\n            >\n              <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @if (showSeconds) {\n            <span class=\"sdc-datepicker__time-separator\">:</span>\n            <div class=\"sdc-datepicker__time-group\">\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"incrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.incrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-up\" aria-hidden=\"true\"></i>\n              </button>\n              <span class=\"sdc-datepicker__time-value\">{{ padTime(seconds()) }}</span>\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__time-btn\"\n                (click)=\"decrementSeconds()\"\n                [attr.aria-label]=\"'datepicker.decrementSecond' | translate\"\n              >\n                <i class=\"fas fa-chevron-down\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n      }\n\n      <!-- Footer: Today on the left, Clear + Confirm together on the right -->\n      @if (showButtonBar || mode === 'datetime' || mode === 'time') {\n        <div class=\"sdc-datepicker__button-bar\">\n          <div>\n            @if (showButtonBar && mode !== 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"selectToday()\"\n              >\n                {{ 'datepicker.today' | translate }}\n              </button>\n            }\n          </div>\n\n          <div class=\"sdc-datepicker__button-bar-end\">\n            @if (showButtonBar) {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__bar-btn\"\n                (click)=\"clearValue()\"\n              >\n                {{ 'datepicker.clear' | translate }}\n              </button>\n            }\n            @if (mode === 'datetime' || mode === 'time') {\n              <button\n                type=\"button\"\n                class=\"sdc-datepicker__confirm-btn\"\n                (click)=\"confirmDateTime()\"\n              >\n                {{ 'datepicker.confirm' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    </div>\n  </sdc-popover>\n\n  @if (messageKey()) {\n    <small\n      [ngClass]=\"getInvalidMessageClass()\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      {{ messageKey() | translate }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}.sdc-datepicker__label-row{display:flex;align-items:center;gap:var(--sdc-form-label-row-gap);margin-bottom:var(--sdc-form-label-row-mb)}.sdc-datepicker__label{display:inline-flex;align-items:center;margin-bottom:0;line-height:1;padding-top:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));padding-bottom:var(--sdc-datepicker-label-py, var(--sdc-form-label-py, 0));min-width:0}.sdc-datepicker__label-text{display:inline-flex;align-items:center}.required-field{margin-left:var(--sdc-datepicker-required-ml, var(--sdc-form-required-ml, .25rem));color:var(--sdc-datepicker-required-color, var(--sdc-error-color, #dc3545));font-weight:400}.sdc-datepicker__control{display:flex;align-items:stretch;min-height:var(--sdc-datepicker-control-height, var(--sdc-formfield-default-height, 38px));border:1px solid var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));border-radius:var(--sdc-datepicker-border-radius, var(--sdc-formfield-border-radius, 4px));background:var(--sdc-datepicker-bg, var(--sdc-formfield-default-bg, #fff));box-sizing:border-box;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.sdc-datepicker__control:hover{border-color:var(--sdc-datepicker-hover-border, var(--sdc-formfield-focus-color, #007bff))}.sdc-datepicker__control:focus-within{border-color:var(--sdc-datepicker-focus-border, var(--sdc-formfield-focus-color, #007bff));box-shadow:var(--sdc-datepicker-focus-shadow, var(--sdc-formfield-focus-shadow, 0 0 0 2px rgba(0, 123, 255, .14)))}.sdc-datepicker__control--invalid,.sdc-datepicker__control--invalid:hover,.sdc-datepicker__control--invalid:focus-within{border-color:var(--sdc-datepicker-invalid-border, var(--sdc-formfield-invalid-border, #d98888));box-shadow:var(--sdc-datepicker-invalid-shadow, var(--sdc-formfield-invalid-focus-shadow, 0 0 0 2px rgba(217, 136, 136, .16)))}.sdc-datepicker__control--disabled,.sdc-datepicker__control--disabled:hover{background-color:var(--sdc-datepicker-disabled-bg, var(--sdc-formfield-disabled-bg, #e9ecef));border-color:var(--sdc-datepicker-border-color, var(--sdc-formfield-default-border, #ced4da));box-shadow:none;cursor:not-allowed}.sdc-datepicker__value{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 .75rem}.sdc-datepicker__input{width:100%;min-width:0;border:0;background:transparent;box-shadow:none;outline:0;font:inherit;color:inherit;line-height:var(--sdc-datepicker-input-line-height, var(--sdc-formfield-default-line-height, 1.5));padding:0;cursor:pointer}.sdc-datepicker__input::placeholder{color:var(--sdc-datepicker-placeholder-color, var(--sdc-form-placeholder-color, #9ca3af))}.sdc-datepicker__input:disabled{cursor:not-allowed}.sdc-datepicker__actions{display:flex;align-items:stretch;flex:0 0 auto}.sdc-datepicker__icon{font-size:.875rem}.sdc-datepicker__icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;background:transparent;color:var(--sdc-button-icon-default, #333333);cursor:pointer}.sdc-datepicker__icon-button:hover:not(:disabled){background:transparent}.sdc-datepicker__icon-button--clear{min-width:2rem;padding:0 .5rem}.sdc-datepicker__icon-button--toggle{min-width:2.5rem;padding:0 .75rem;border-left:1px solid var(--sdc-formfield-default-border, #ced4da)}.sdc-datepicker__panel{background:var(--sdc-datepicker-panel-bg, #fff);border:1px solid var(--sdc-datepicker-panel-border, #e5e7eb);border-radius:var(--sdc-datepicker-panel-radius, 6px);box-shadow:var(--sdc-datepicker-panel-shadow, 0 4px 12px rgba(0, 0, 0, .1));padding:0;width:var(--sdc-datepicker-panel-width, 280px);outline:none;box-sizing:border-box}.sdc-datepicker__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;border-radius:var(--sdc-datepicker-nav-btn-radius, 50%);color:var(--sdc-datepicker-nav-btn-color, #374151);cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__nav-btn:hover{background-color:var(--sdc-datepicker-nav-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__title-btn{border:0;background:transparent;font-weight:600;font-size:var(--sdc-datepicker-title-font-size, .875rem);color:var(--sdc-datepicker-title-color, #111827);cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background-color .15s ease}.sdc-datepicker__title-btn:hover{background-color:var(--sdc-datepicker-title-hover-bg, rgba(0, 0, 0, .04))}.sdc-datepicker__calendar{-webkit-user-select:none;user-select:none;padding:0 .5rem .5rem;border-collapse:collapse;border-spacing:0;width:100%}.sdc-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding-top:.5rem}.sdc-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sdc-datepicker-weekday-font-size, .75rem);font-weight:600;color:var(--sdc-datepicker-weekday-color, #6b7280);text-transform:uppercase}.sdc-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sdc-datepicker-day-gap, 2px)}.sdc-datepicker__days>tr{display:contents}.sdc-datepicker__days td{padding:0}.sdc-datepicker__day{display:flex;align-items:center;justify-content:center;width:var(--sdc-datepicker-day-size, 32px);height:var(--sdc-datepicker-day-size, 32px);margin:0 auto;border:0;border-radius:var(--sdc-datepicker-day-radius, 50%);background:transparent;font-size:var(--sdc-datepicker-day-font-size, .75rem);color:var(--sdc-datepicker-day-color, #111827);cursor:pointer;transition:background-color .12s ease,color .12s ease;position:relative;padding:0}.sdc-datepicker__day:hover:not(:disabled):not(.sdc-datepicker__day--selected){background-color:var(--sdc-datepicker-day-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__day--other-month{color:var(--sdc-datepicker-day-other-month-color, #d1d5db)}.sdc-datepicker__day--today{border:2px solid var(--sdc-datepicker-today-border-color, var(--sdc-tab-primary, #007bff))}.sdc-datepicker__day--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__day--selected:hover{background-color:var(--sdc-datepicker-selected-hover-bg, #0056b3)}.sdc-datepicker__day--disabled{opacity:var(--sdc-datepicker-disabled-opacity, .35);cursor:not-allowed}.sdc-datepicker__day--in-range{background-color:var(--sdc-datepicker-range-bg, rgba(0, 123, 255, .1));border-radius:0}.sdc-datepicker__day--range-start{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:var(--sdc-datepicker-day-radius, 50%) 0 0 var(--sdc-datepicker-day-radius, 50%)}.sdc-datepicker__day--range-end{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);border-radius:0 var(--sdc-datepicker-day-radius, 50%) var(--sdc-datepicker-day-radius, 50%) 0}.sdc-datepicker__months-grid,.sdc-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.sdc-datepicker__month-cell,.sdc-datepicker__year-cell{display:flex;align-items:center;justify-content:center;padding:.625rem .5rem;border:0;border-radius:var(--sdc-datepicker-cell-radius, 6px);background:transparent;font-size:.8125rem;color:var(--sdc-datepicker-cell-color, #374151);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__month-cell:hover,.sdc-datepicker__year-cell:hover{background-color:var(--sdc-datepicker-cell-hover-bg, rgba(0, 0, 0, .05))}.sdc-datepicker__month-cell--selected,.sdc-datepicker__year-cell--selected{background-color:var(--sdc-datepicker-selected-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-selected-color, #fff);font-weight:600}.sdc-datepicker__time{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__time-group{display:flex;flex-direction:column;align-items:center;gap:.125rem}.sdc-datepicker__time-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border:0;background:transparent;border-radius:4px;color:var(--sdc-datepicker-time-btn-color, #6b7280);cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__time-btn:hover{background-color:var(--sdc-datepicker-time-btn-hover-bg, rgba(0, 0, 0, .06))}.sdc-datepicker__time-value{font-size:var(--sdc-datepicker-time-font-size, 1.125rem);font-weight:600;color:var(--sdc-datepicker-time-value-color, #111827);min-width:2ch;text-align:center}.sdc-datepicker__time-separator{font-size:1.125rem;font-weight:600;color:var(--sdc-datepicker-time-separator-color, #6b7280);padding:0 .125rem;align-self:center}.sdc-datepicker__confirm-btn{padding:.25rem .875rem;border:0;border-radius:var(--sdc-datepicker-confirm-btn-radius, 4px);background-color:var(--sdc-datepicker-confirm-btn-bg, var(--sdc-tab-primary, #007bff));color:var(--sdc-datepicker-confirm-btn-color, #fff);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color .15s ease}.sdc-datepicker__confirm-btn:hover{background-color:var(--sdc-datepicker-confirm-btn-hover-bg, #0056b3)}.sdc-datepicker__button-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--sdc-datepicker-separator-color, #e5e7eb)}.sdc-datepicker__button-bar-end{display:flex;align-items:center;gap:.5rem}.sdc-datepicker__bar-btn{padding:.25rem .75rem;border:0;border-radius:4px;background:transparent;font-size:.8125rem;font-weight:500;color:var(--sdc-datepicker-bar-btn-color, var(--sdc-tab-primary, #007bff));cursor:pointer;transition:background-color .12s ease}.sdc-datepicker__bar-btn:hover{background-color:var(--sdc-datepicker-bar-btn-hover-bg, rgba(0, 123, 255, .08))}.sdc-datepicker__backdrop{background:transparent}.message{display:block;margin-top:.25rem;font-size:var(--sdc-datepicker-message-font-size, .75rem);color:var(--sdc-datepicker-message-color, #6b7280)}.message.invalid{color:var(--sdc-datepicker-message-invalid-color, var(--sdc-error-color, #dc3545))}::ng-deep .sdc-datepicker-popover-panel{overflow:visible!important;max-width:none!important;max-height:none!important}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], selectionMode: [{
@@ -42273,8 +42044,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], dateFormat: [{
                 type: Input
-            }], allowTyping: [{
-                type: Input
             }], hourFormat: [{
                 type: Input
             }], minuteStep: [{