@aquera/ngx-smart-table 0.0.41 → 0.0.42
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.
|
@@ -12037,7 +12037,7 @@ class StTableComponent {
|
|
|
12037
12037
|
this.internalData$.complete();
|
|
12038
12038
|
}
|
|
12039
12039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StTableComponent, isStandalone: true, selector: "st-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, enableFiltering: { classPropertyName: "enableFiltering", publicName: "enableFiltering", isSignal: true, isRequired: false, transformFunction: null }, validateConfig: { classPropertyName: "validateConfig", publicName: "validateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", addColumnClicked: "addColumnClicked", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange", requestAddRow: "requestAddRow", requestFocusTabs: "requestFocusTabs" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"top\">\n </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <div class=\"st-table\"\n role=\"region\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [ngClass]=\"{\n 'virtual-scroll-enabled': isVirtualScrollEnabled(),\n 'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n }\"\n [ngStyle]=\"tableWrapperStyle()\"\n stKeyboardNavigation\n [tableState]=\"getActiveTableState()\"\n [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n (focus)=\"onTableContainerFocus($event)\">\n <!-- Unified Table Actions Menu -->\n\n <!-- Virtual scroll viewport wrapper -->\n @if (isVirtualScrollEnabled()) {\n <div class=\"st-scroll-viewport\" #scrollViewport\n [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n <!-- Spacer to create scrollable area -->\n <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n </div>\n\n <!-- Table positioner with transform (instead of tbody) -->\n <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n <!-- Table with only visible rows -->\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'virtual',\n theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n }\"></ng-container>\n </div>\n </div>\n }\n \n <!-- Standard table (when virtual scroll disabled) -->\n @if (!isVirtualScrollEnabled()) {\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'standard',\n theadStyle: null\n }\"></ng-container>\n }\n\n <!-- Shared Column Menu Dropdown -->\n <st-column-menu-dropdown\n [isOpen]=\"columnMenuState().isOpen\"\n [position]=\"columnMenuState().position\"\n [context]=\"columnMenuState().context\"\n (actionClicked)=\"onColumnActionClicked($event)\"\n (closed)=\"closeColumnMenu()\">\n </st-column-menu-dropdown>\n\n <!-- Screen reader live region for dynamic announcements (sort, filter, pagination) -->\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" aria-relevant=\"text\"></div>\n <!-- Table Actions Menu (outside virtual scroll transform context) -->\n @if (tableActionsMenuIsOpen()) {\n <div class=\"table-actions-menu-container\">\n <div class=\"table-actions-menu-backdrop\" (click)=\"closeTableActionsMenu()\"></div>\n\n @if (tableActionsMenuView() === 'main') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n @if (mergedConfig()?.features?.columnManagement?.allowAdd) {\n <nile-menu-item (click)=\"onTableActionsAddColumn()\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n <nile-menu-item (click)=\"openTableActionsColumnsView()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n Show/Hide Columns\n </nile-menu-item>\n </nile-menu>\n </div>\n }\n\n @if (tableActionsMenuView() === 'columns') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n <nile-menu-item (click)=\"backToTableActionsMain()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n <nile-divider></nile-divider>\n @for (column of getTableActionsColumnsVisibility(); track column.key) {\n <nile-menu-item\n [class.disabled]=\"!column.hideable\"\n (click)=\"onTableActionsToggleColumn(column.key, $event)\">\n <nile-checkbox\n [checked]=\"column.visible\"\n [disabled]=\"!column.hideable\"\n [label]=\"column.header || column.key\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\"\n (closed)=\"closeRowActionsDropdown()\" (tabbed)=\"onDropdownTabbed($event)\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n <table class=\"st-table-element\"\n role=\"grid\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [attr.aria-rowcount]=\"visibleCellGrid().length\"\n [attr.aria-colcount]=\"visibleColumns().length\">\n <!-- TABLE HEADER -->\n <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n <tr role=\"row\">\n <!-- Row Number Header -->\n @if (mergedConfig()?.showRowNumber) {\n <th class=\"row-number-header header-cell sticky-left\"\n [class.row-number-header--with-icon]=\"hasRowNumberIcon\"\n scope=\"col\"\n aria-label=\"Row number\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'background-color': rowNumberStickyBackground()\n }\">\n <span class=\"row-number-cell__index\">#</span>\n </th>\n }\n <!-- Column Headers -->\n @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n <th\n scope=\"col\"\n [attr.aria-sort]=\"getColumnAriaSort(column)\"\n [ngClass]=\"{\n 'header-cell': mode === 'standard',\n 'sticky-left': column.sticky === 'left',\n 'sticky-right': column.sticky === 'right',\n 'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n 'resizable': column.resizable !== false\n }\"\n [ngStyle]=\"{\n position: column.sticky ? 'sticky' : null,\n 'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n 'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n 'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n 'width.px': column.width,\n 'min-width.px': column.minWidth ?? 100,\n 'background-color': stickyColumnBackground(column)\n }\">\n\n <st-header\n [column]=\"column\"\n [columnIndex]=\"colIndex\"\n [isFirstColumn]=\"isFirst\"\n [isLastColumn]=\"isLast\"\n [tableState]=\"getActiveTableState()\"\n [keyboardNavigationEnabled]=\"isKeyboardNavigationEnabled()\"\n [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n (columnMoved)=\"onColumnMoved($event)\"\n (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\"\n (menuKeyboard)=\"openColumnMenuFromKeyboard(colIndex, isFirst, isLast)\"\n (tabOut)=\"onHeaderTabOut()\"\n (headerNavigate)=\"onHeaderNavigate($event, colIndex)\">\n </st-header>\n\n @if (column.resizable !== false) {\n <div\n class=\"resize-handle\"\n aria-hidden=\"true\"\n stColumnResize\n [column]=\"column\"\n (columnResizing)=\"onColumnResizing($event)\"\n (columnResized)=\"onColumnResized($event)\">\n </div>\n }\n </th>\n }\n\n <!-- Settings Column Header -->\n <th\n scope=\"col\"\n aria-label=\"Actions\"\n class=\"settings-column sticky-right\"\n [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n [ngStyle]=\"{\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'background-color': rowNumberStickyBackground()\n }\">\n <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n <st-table-actions\n [isMenuOpen]=\"tableActionsMenuIsOpen()\"\n (menuButtonClicked)=\"onTableActionsButtonClick($event)\">\n </st-table-actions>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- TABLE BODY -->\n <tbody>\n <!-- Virtual Scroll Rows -->\n @if (mode === 'virtual') {\n @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\"\n [attr.aria-rowindex]=\"getAbsoluteRowIndex(relativeIndex) + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (getAbsoluteRowIndex(relativeIndex) + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{getAbsoluteRowIndex(relativeIndex) + 1}}</span>\n @if (resolveRowNumberIcon(getAbsoluteRowIndex(relativeIndex)); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: getAbsoluteRowIndex(relativeIndex),\n mode: 'virtual',\n relativeIndex: relativeIndex\n }\"></ng-container>\n </tr>\n }\n }\n\n <!-- Standard Rows -->\n @if (mode === 'standard') {\n @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"rowIndex\"\n [attr.aria-rowindex]=\"rowIndex + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (rowIndex + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(rowIndex)\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{rowIndex + 1}}</span>\n @if (resolveRowNumberIcon(rowIndex); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: rowIndex,\n mode: 'standard'\n }\"></ng-container>\n </tr>\n }\n }\n </tbody>\n </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n <!-- Data Cells -->\n @for (cell of row; track $index; let colIndex = $index) {\n <td\n role=\"gridcell\"\n [attr.aria-colindex]=\"colIndex + 1\"\n [ngClass]=\"{\n 'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n 'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n 'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n 'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n 'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n 'cell-focused': cell.isFocused()\n }\"\n [ngStyle]=\"{\n position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n 'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n 'width.px': visibleColumns()[colIndex]?.width,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\n }\"\n (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n \n <!-- Virtual Scroll Cell -->\n @if (mode === 'virtual') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n [editMode]=\"getEditModeForCells()\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellEdit)=\"onCellEdit($event)\" \n (cellSave)=\"onCellSave($event)\"\n (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n (cellCancel)=\"onCellCancel($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n\n <!-- Standard Cell -->\n @if (mode === 'standard') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellSave)=\"onCellSave($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n </td>\n }\n \n <!-- Row Actions Cell -->\n <td class=\"settings-column\"\n role=\"gridcell\"\n [attr.aria-colindex]=\"visibleColumns().length + 1\"\n [ngClass]=\"{\n 'has-actions': hasRowActions()\n }\"\n [ngStyle]=\"{\n position: hasRowActions() ? 'sticky' : null,\n 'right.px': hasRowActions() ? 0 : null,\n 'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null,\n 'background-color': settingsColumnBodyBackground(rowIndex)\n }\">\n @if (hasRowActions()) {\n <button\n class=\"settings-trigger\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? -1 : null\"\n (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n (keydown)=\"onSettingsTriggerKeydown($event, getRowData(rowIndex), rowIndex)\"\n type=\"button\"\n aria-label=\"Row actions\">\n <span aria-hidden=\"true\">\u22EF</span>\n </button>\n }\n </td>\n</ng-template>\n\n@if (showColumnModal()) {\n <st-column-editor-modal\n (columnCreated)=\"onColumnCreated($event)\"\n (cancelled)=\"onModalCancelled()\">\n </st-column-editor-modal>\n}\n\n<ng-template #skeletonLoader>\n @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <div class=\"list-row\">\n @for (i of skeletonColumns; track $index) {\n <div class=\"list-content\">\n @for (j of skeletonRows; track $index) {\n <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".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}:host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.table-actions-menu-container{position:fixed;inset:0;z-index:9996;pointer-events:none}.table-actions-menu-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto}.table-actions-menu-panel{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}.table-actions-menu-panel nile-menu{max-height:30rem;overflow-y:auto}.table-actions-menu-panel nile-menu::part(base){width:fit-content;min-height:auto}.table-actions-menu-panel nile-menu nile-menu-item::part(base){min-height:2.5rem}.table-actions-menu-panel nile-menu nile-menu-item::part(label){font-size:12px}.table-actions-menu-panel nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering", "keyboardNavigationEnabled"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick", "tabOut", "headerNavigate", "menuKeyboard"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["isMenuOpen"], outputs: ["menuButtonClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed", "tabbed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "component", type: StColumnEditorModalComponent, selector: "st-column-editor-modal", outputs: ["columnCreated", "cancelled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
12040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StTableComponent, isStandalone: true, selector: "st-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, enableFiltering: { classPropertyName: "enableFiltering", publicName: "enableFiltering", isSignal: true, isRequired: false, transformFunction: null }, validateConfig: { classPropertyName: "validateConfig", publicName: "validateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", addColumnClicked: "addColumnClicked", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange", requestAddRow: "requestAddRow", requestFocusTabs: "requestFocusTabs" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"top\">\n </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <div class=\"st-table\"\n role=\"region\"\n [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [ngClass]=\"{\n 'virtual-scroll-enabled': isVirtualScrollEnabled(),\n 'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n }\"\n [ngStyle]=\"tableWrapperStyle()\"\n stKeyboardNavigation\n [tableState]=\"getActiveTableState()\"\n [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n (focus)=\"onTableContainerFocus($event)\">\n <!-- Unified Table Actions Menu -->\n\n <!-- Virtual scroll viewport wrapper -->\n @if (isVirtualScrollEnabled()) {\n <div class=\"st-scroll-viewport\" #scrollViewport\n [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n <!-- Spacer to create scrollable area -->\n <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n </div>\n\n <!-- Table positioner with transform (instead of tbody) -->\n <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n <!-- Table with only visible rows -->\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'virtual',\n theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n }\"></ng-container>\n </div>\n </div>\n }\n \n <!-- Standard table (when virtual scroll disabled) -->\n @if (!isVirtualScrollEnabled()) {\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'standard',\n theadStyle: null\n }\"></ng-container>\n }\n\n <!-- Shared Column Menu Dropdown -->\n <st-column-menu-dropdown\n [isOpen]=\"columnMenuState().isOpen\"\n [position]=\"columnMenuState().position\"\n [context]=\"columnMenuState().context\"\n (actionClicked)=\"onColumnActionClicked($event)\"\n (closed)=\"closeColumnMenu()\">\n </st-column-menu-dropdown>\n\n <!-- Screen reader live region for dynamic announcements (sort, filter, pagination) -->\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" aria-relevant=\"text\"></div>\n <!-- Table Actions Menu (outside virtual scroll transform context) -->\n @if (tableActionsMenuIsOpen()) {\n <div class=\"table-actions-menu-container\">\n <div class=\"table-actions-menu-backdrop\" (click)=\"closeTableActionsMenu()\"></div>\n\n @if (tableActionsMenuView() === 'main') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n @if (mergedConfig()?.features?.columnManagement?.allowAdd) {\n <nile-menu-item (click)=\"onTableActionsAddColumn()\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n <nile-menu-item (click)=\"openTableActionsColumnsView()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n Show/Hide Columns\n </nile-menu-item>\n </nile-menu>\n </div>\n }\n\n @if (tableActionsMenuView() === 'columns') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n <nile-menu-item (click)=\"backToTableActionsMain()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n <nile-divider></nile-divider>\n @for (column of getTableActionsColumnsVisibility(); track column.key) {\n <nile-menu-item\n [class.disabled]=\"!column.hideable\"\n (click)=\"onTableActionsToggleColumn(column.key, $event)\">\n <nile-checkbox\n [checked]=\"column.visible\"\n [disabled]=\"!column.hideable\"\n [label]=\"column.header || column.key\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\"\n (closed)=\"closeRowActionsDropdown()\" (tabbed)=\"onDropdownTabbed($event)\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n <table class=\"st-table-element\"\n role=\"grid\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [attr.aria-rowcount]=\"visibleCellGrid().length\"\n [attr.aria-colcount]=\"visibleColumns().length\">\n <!-- TABLE HEADER -->\n <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n <tr role=\"row\">\n <!-- Row Number Header -->\n @if (mergedConfig()?.showRowNumber) {\n <th class=\"row-number-header header-cell sticky-left\"\n [class.row-number-header--with-icon]=\"hasRowNumberIcon\"\n scope=\"col\"\n aria-label=\"Row number\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'background-color': rowNumberStickyBackground()\n }\">\n <span class=\"row-number-cell__index\">#</span>\n </th>\n }\n <!-- Column Headers -->\n @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n <th\n scope=\"col\"\n [attr.aria-sort]=\"getColumnAriaSort(column)\"\n [ngClass]=\"{\n 'header-cell': mode === 'standard',\n 'sticky-left': column.sticky === 'left',\n 'sticky-right': column.sticky === 'right',\n 'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n 'resizable': column.resizable !== false\n }\"\n [ngStyle]=\"{\n position: column.sticky ? 'sticky' : null,\n 'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n 'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n 'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n 'width.px': column.width,\n 'min-width.px': column.minWidth ?? 100,\n 'background-color': stickyColumnBackground(column)\n }\">\n\n <st-header\n [column]=\"column\"\n [columnIndex]=\"colIndex\"\n [isFirstColumn]=\"isFirst\"\n [isLastColumn]=\"isLast\"\n [tableState]=\"getActiveTableState()\"\n [keyboardNavigationEnabled]=\"isKeyboardNavigationEnabled()\"\n [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n (columnMoved)=\"onColumnMoved($event)\"\n (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\"\n (menuKeyboard)=\"openColumnMenuFromKeyboard(colIndex, isFirst, isLast)\"\n (tabOut)=\"onHeaderTabOut()\"\n (headerNavigate)=\"onHeaderNavigate($event, colIndex)\">\n </st-header>\n\n @if (column.resizable !== false) {\n <div\n class=\"resize-handle\"\n aria-hidden=\"true\"\n stColumnResize\n [column]=\"column\"\n (columnResizing)=\"onColumnResizing($event)\"\n (columnResized)=\"onColumnResized($event)\">\n </div>\n }\n </th>\n }\n\n <!-- Settings Column Header -->\n <th\n scope=\"col\"\n aria-label=\"Actions\"\n class=\"settings-column sticky-right\"\n [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n [ngStyle]=\"{\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'background-color': rowNumberStickyBackground()\n }\">\n <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n <st-table-actions\n [isMenuOpen]=\"tableActionsMenuIsOpen()\"\n (menuButtonClicked)=\"onTableActionsButtonClick($event)\">\n </st-table-actions>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- TABLE BODY -->\n <tbody>\n <!-- Virtual Scroll Rows -->\n @if (mode === 'virtual') {\n @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\"\n [attr.aria-rowindex]=\"getAbsoluteRowIndex(relativeIndex) + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (getAbsoluteRowIndex(relativeIndex) + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{getAbsoluteRowIndex(relativeIndex) + 1}}</span>\n @if (resolveRowNumberIcon(getAbsoluteRowIndex(relativeIndex)); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: getAbsoluteRowIndex(relativeIndex),\n mode: 'virtual',\n relativeIndex: relativeIndex\n }\"></ng-container>\n </tr>\n }\n }\n\n <!-- Standard Rows -->\n @if (mode === 'standard') {\n @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"rowIndex\"\n [attr.aria-rowindex]=\"rowIndex + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (rowIndex + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(rowIndex)\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{rowIndex + 1}}</span>\n @if (resolveRowNumberIcon(rowIndex); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: rowIndex,\n mode: 'standard'\n }\"></ng-container>\n </tr>\n }\n }\n </tbody>\n </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n <!-- Data Cells -->\n @for (cell of row; track $index; let colIndex = $index) {\n <td\n role=\"gridcell\"\n [attr.aria-colindex]=\"colIndex + 1\"\n [ngClass]=\"{\n 'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n 'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n 'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n 'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n 'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n 'cell-focused': cell.isFocused()\n }\"\n [ngStyle]=\"{\n position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n 'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n 'width.px': visibleColumns()[colIndex]?.width,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\n }\"\n (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n \n <!-- Virtual Scroll Cell -->\n @if (mode === 'virtual') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n [editMode]=\"getEditModeForCells()\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellEdit)=\"onCellEdit($event)\" \n (cellSave)=\"onCellSave($event)\"\n (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n (cellCancel)=\"onCellCancel($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n\n <!-- Standard Cell -->\n @if (mode === 'standard') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellSave)=\"onCellSave($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n </td>\n }\n \n <!-- Row Actions Cell -->\n <td class=\"settings-column\"\n role=\"gridcell\"\n [attr.aria-colindex]=\"visibleColumns().length + 1\"\n [ngClass]=\"{\n 'has-actions': hasRowActions()\n }\"\n [ngStyle]=\"{\n position: hasRowActions() ? 'sticky' : null,\n 'right.px': hasRowActions() ? 0 : null,\n 'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null,\n 'background-color': settingsColumnBodyBackground(rowIndex)\n }\">\n @if (hasRowActions()) {\n <button\n class=\"settings-trigger\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? -1 : null\"\n (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n (keydown)=\"onSettingsTriggerKeydown($event, getRowData(rowIndex), rowIndex)\"\n type=\"button\"\n aria-label=\"Row actions\">\n <span aria-hidden=\"true\">\u22EF</span>\n </button>\n }\n </td>\n</ng-template>\n\n@if (showColumnModal()) {\n <st-column-editor-modal\n (columnCreated)=\"onColumnCreated($event)\"\n (cancelled)=\"onModalCancelled()\">\n </st-column-editor-modal>\n}\n\n<ng-template #skeletonLoader>\n @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <div class=\"list-row\">\n @for (i of skeletonColumns; track $index) {\n <div class=\"list-content\">\n @for (j of skeletonRows; track $index) {\n <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".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}:host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.table-actions-menu-container{position:fixed;inset:0;z-index:9996;pointer-events:none}.table-actions-menu-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto}.table-actions-menu-panel{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}.table-actions-menu-panel nile-menu{max-height:30rem;overflow-y:auto}.table-actions-menu-panel nile-menu::part(base){width:fit-content;min-height:auto}.table-actions-menu-panel nile-menu nile-menu-item::part(base){min-height:2.5rem}.table-actions-menu-panel nile-menu nile-menu-item::part(label){font-size:12px}.table-actions-menu-panel nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { kind: "component", type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering", "keyboardNavigationEnabled"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick", "tabOut", "headerNavigate", "menuKeyboard"] }, { kind: "component", type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }, { kind: "component", type: StTableActionsComponent, selector: "st-table-actions", inputs: ["isMenuOpen"], outputs: ["menuButtonClicked"] }, { kind: "component", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { kind: "component", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed", "tabbed"] }, { kind: "directive", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { kind: "directive", type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized", "columnResizing"] }, { kind: "component", type: StColumnEditorModalComponent, selector: "st-column-editor-modal", outputs: ["columnCreated", "cancelled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
12041
12041
|
}
|
|
12042
12042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableComponent, decorators: [{
|
|
12043
12043
|
type: Component,
|
|
@@ -12052,7 +12052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12052
12052
|
StKeyboardNavigationDirective,
|
|
12053
12053
|
StColumnResizeDirective,
|
|
12054
12054
|
StColumnEditorModalComponent
|
|
12055
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"top\">\n </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <div class=\"st-table\"\n role=\"region\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [ngClass]=\"{\n 'virtual-scroll-enabled': isVirtualScrollEnabled(),\n 'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n }\"\n [ngStyle]=\"tableWrapperStyle()\"\n stKeyboardNavigation\n [tableState]=\"getActiveTableState()\"\n [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n (focus)=\"onTableContainerFocus($event)\">\n <!-- Unified Table Actions Menu -->\n\n <!-- Virtual scroll viewport wrapper -->\n @if (isVirtualScrollEnabled()) {\n <div class=\"st-scroll-viewport\" #scrollViewport\n [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n <!-- Spacer to create scrollable area -->\n <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n </div>\n\n <!-- Table positioner with transform (instead of tbody) -->\n <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n <!-- Table with only visible rows -->\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'virtual',\n theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n }\"></ng-container>\n </div>\n </div>\n }\n \n <!-- Standard table (when virtual scroll disabled) -->\n @if (!isVirtualScrollEnabled()) {\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'standard',\n theadStyle: null\n }\"></ng-container>\n }\n\n <!-- Shared Column Menu Dropdown -->\n <st-column-menu-dropdown\n [isOpen]=\"columnMenuState().isOpen\"\n [position]=\"columnMenuState().position\"\n [context]=\"columnMenuState().context\"\n (actionClicked)=\"onColumnActionClicked($event)\"\n (closed)=\"closeColumnMenu()\">\n </st-column-menu-dropdown>\n\n <!-- Screen reader live region for dynamic announcements (sort, filter, pagination) -->\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" aria-relevant=\"text\"></div>\n <!-- Table Actions Menu (outside virtual scroll transform context) -->\n @if (tableActionsMenuIsOpen()) {\n <div class=\"table-actions-menu-container\">\n <div class=\"table-actions-menu-backdrop\" (click)=\"closeTableActionsMenu()\"></div>\n\n @if (tableActionsMenuView() === 'main') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n @if (mergedConfig()?.features?.columnManagement?.allowAdd) {\n <nile-menu-item (click)=\"onTableActionsAddColumn()\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n <nile-menu-item (click)=\"openTableActionsColumnsView()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n Show/Hide Columns\n </nile-menu-item>\n </nile-menu>\n </div>\n }\n\n @if (tableActionsMenuView() === 'columns') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n <nile-menu-item (click)=\"backToTableActionsMain()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n <nile-divider></nile-divider>\n @for (column of getTableActionsColumnsVisibility(); track column.key) {\n <nile-menu-item\n [class.disabled]=\"!column.hideable\"\n (click)=\"onTableActionsToggleColumn(column.key, $event)\">\n <nile-checkbox\n [checked]=\"column.visible\"\n [disabled]=\"!column.hideable\"\n [label]=\"column.header || column.key\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\"\n (closed)=\"closeRowActionsDropdown()\" (tabbed)=\"onDropdownTabbed($event)\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n <table class=\"st-table-element\"\n role=\"grid\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [attr.aria-rowcount]=\"visibleCellGrid().length\"\n [attr.aria-colcount]=\"visibleColumns().length\">\n <!-- TABLE HEADER -->\n <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n <tr role=\"row\">\n <!-- Row Number Header -->\n @if (mergedConfig()?.showRowNumber) {\n <th class=\"row-number-header header-cell sticky-left\"\n [class.row-number-header--with-icon]=\"hasRowNumberIcon\"\n scope=\"col\"\n aria-label=\"Row number\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'background-color': rowNumberStickyBackground()\n }\">\n <span class=\"row-number-cell__index\">#</span>\n </th>\n }\n <!-- Column Headers -->\n @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n <th\n scope=\"col\"\n [attr.aria-sort]=\"getColumnAriaSort(column)\"\n [ngClass]=\"{\n 'header-cell': mode === 'standard',\n 'sticky-left': column.sticky === 'left',\n 'sticky-right': column.sticky === 'right',\n 'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n 'resizable': column.resizable !== false\n }\"\n [ngStyle]=\"{\n position: column.sticky ? 'sticky' : null,\n 'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n 'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n 'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n 'width.px': column.width,\n 'min-width.px': column.minWidth ?? 100,\n 'background-color': stickyColumnBackground(column)\n }\">\n\n <st-header\n [column]=\"column\"\n [columnIndex]=\"colIndex\"\n [isFirstColumn]=\"isFirst\"\n [isLastColumn]=\"isLast\"\n [tableState]=\"getActiveTableState()\"\n [keyboardNavigationEnabled]=\"isKeyboardNavigationEnabled()\"\n [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n (columnMoved)=\"onColumnMoved($event)\"\n (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\"\n (menuKeyboard)=\"openColumnMenuFromKeyboard(colIndex, isFirst, isLast)\"\n (tabOut)=\"onHeaderTabOut()\"\n (headerNavigate)=\"onHeaderNavigate($event, colIndex)\">\n </st-header>\n\n @if (column.resizable !== false) {\n <div\n class=\"resize-handle\"\n aria-hidden=\"true\"\n stColumnResize\n [column]=\"column\"\n (columnResizing)=\"onColumnResizing($event)\"\n (columnResized)=\"onColumnResized($event)\">\n </div>\n }\n </th>\n }\n\n <!-- Settings Column Header -->\n <th\n scope=\"col\"\n aria-label=\"Actions\"\n class=\"settings-column sticky-right\"\n [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n [ngStyle]=\"{\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'background-color': rowNumberStickyBackground()\n }\">\n <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n <st-table-actions\n [isMenuOpen]=\"tableActionsMenuIsOpen()\"\n (menuButtonClicked)=\"onTableActionsButtonClick($event)\">\n </st-table-actions>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- TABLE BODY -->\n <tbody>\n <!-- Virtual Scroll Rows -->\n @if (mode === 'virtual') {\n @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\"\n [attr.aria-rowindex]=\"getAbsoluteRowIndex(relativeIndex) + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (getAbsoluteRowIndex(relativeIndex) + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{getAbsoluteRowIndex(relativeIndex) + 1}}</span>\n @if (resolveRowNumberIcon(getAbsoluteRowIndex(relativeIndex)); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: getAbsoluteRowIndex(relativeIndex),\n mode: 'virtual',\n relativeIndex: relativeIndex\n }\"></ng-container>\n </tr>\n }\n }\n\n <!-- Standard Rows -->\n @if (mode === 'standard') {\n @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"rowIndex\"\n [attr.aria-rowindex]=\"rowIndex + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (rowIndex + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(rowIndex)\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{rowIndex + 1}}</span>\n @if (resolveRowNumberIcon(rowIndex); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: rowIndex,\n mode: 'standard'\n }\"></ng-container>\n </tr>\n }\n }\n </tbody>\n </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n <!-- Data Cells -->\n @for (cell of row; track $index; let colIndex = $index) {\n <td\n role=\"gridcell\"\n [attr.aria-colindex]=\"colIndex + 1\"\n [ngClass]=\"{\n 'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n 'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n 'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n 'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n 'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n 'cell-focused': cell.isFocused()\n }\"\n [ngStyle]=\"{\n position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n 'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n 'width.px': visibleColumns()[colIndex]?.width,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\n }\"\n (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n \n <!-- Virtual Scroll Cell -->\n @if (mode === 'virtual') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n [editMode]=\"getEditModeForCells()\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellEdit)=\"onCellEdit($event)\" \n (cellSave)=\"onCellSave($event)\"\n (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n (cellCancel)=\"onCellCancel($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n\n <!-- Standard Cell -->\n @if (mode === 'standard') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellSave)=\"onCellSave($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n </td>\n }\n \n <!-- Row Actions Cell -->\n <td class=\"settings-column\"\n role=\"gridcell\"\n [attr.aria-colindex]=\"visibleColumns().length + 1\"\n [ngClass]=\"{\n 'has-actions': hasRowActions()\n }\"\n [ngStyle]=\"{\n position: hasRowActions() ? 'sticky' : null,\n 'right.px': hasRowActions() ? 0 : null,\n 'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null,\n 'background-color': settingsColumnBodyBackground(rowIndex)\n }\">\n @if (hasRowActions()) {\n <button\n class=\"settings-trigger\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? -1 : null\"\n (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n (keydown)=\"onSettingsTriggerKeydown($event, getRowData(rowIndex), rowIndex)\"\n type=\"button\"\n aria-label=\"Row actions\">\n <span aria-hidden=\"true\">\u22EF</span>\n </button>\n }\n </td>\n</ng-template>\n\n@if (showColumnModal()) {\n <st-column-editor-modal\n (columnCreated)=\"onColumnCreated($event)\"\n (cancelled)=\"onModalCancelled()\">\n </st-column-editor-modal>\n}\n\n<ng-template #skeletonLoader>\n @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <div class=\"list-row\">\n @for (i of skeletonColumns; track $index) {\n <div class=\"list-content\">\n @for (j of skeletonRows; track $index) {\n <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".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}:host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.table-actions-menu-container{position:fixed;inset:0;z-index:9996;pointer-events:none}.table-actions-menu-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto}.table-actions-menu-panel{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}.table-actions-menu-panel nile-menu{max-height:30rem;overflow-y:auto}.table-actions-menu-panel nile-menu::part(base){width:fit-content;min-height:auto}.table-actions-menu-panel nile-menu nile-menu-item::part(base){min-height:2.5rem}.table-actions-menu-panel nile-menu nile-menu-item::part(label){font-size:12px}.table-actions-menu-panel nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"] }]
|
|
12055
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Top pagination controls -->\n@if (showTopPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"top\">\n </st-pagination>\n}\n\n@if (!(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <div class=\"st-table\"\n role=\"region\"\n [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [ngClass]=\"{\n 'virtual-scroll-enabled': isVirtualScrollEnabled(),\n 'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n }\"\n [ngStyle]=\"tableWrapperStyle()\"\n stKeyboardNavigation\n [tableState]=\"getActiveTableState()\"\n [addRowOnNavigatePastEnd]=\"mergedConfig()?.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n (focus)=\"onTableContainerFocus($event)\">\n <!-- Unified Table Actions Menu -->\n\n <!-- Virtual scroll viewport wrapper -->\n @if (isVirtualScrollEnabled()) {\n <div class=\"st-scroll-viewport\" #scrollViewport\n [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n <!-- Spacer to create scrollable area -->\n <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight() }\">\n </div>\n\n <!-- Table positioner with transform (instead of tbody) -->\n <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + virtualScrollOffsetY() + 'px)' }\">\n <!-- Table with only visible rows -->\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'virtual',\n theadStyle: { top: virtualScrollOffsetYNeg() + 'px' }\n }\"></ng-container>\n </div>\n </div>\n }\n \n <!-- Standard table (when virtual scroll disabled) -->\n @if (!isVirtualScrollEnabled()) {\n <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n mode: 'standard',\n theadStyle: null\n }\"></ng-container>\n }\n\n <!-- Shared Column Menu Dropdown -->\n <st-column-menu-dropdown\n [isOpen]=\"columnMenuState().isOpen\"\n [position]=\"columnMenuState().position\"\n [context]=\"columnMenuState().context\"\n (actionClicked)=\"onColumnActionClicked($event)\"\n (closed)=\"closeColumnMenu()\">\n </st-column-menu-dropdown>\n\n <!-- Screen reader live region for dynamic announcements (sort, filter, pagination) -->\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\" aria-relevant=\"text\"></div>\n <!-- Table Actions Menu (outside virtual scroll transform context) -->\n @if (tableActionsMenuIsOpen()) {\n <div class=\"table-actions-menu-container\">\n <div class=\"table-actions-menu-backdrop\" (click)=\"closeTableActionsMenu()\"></div>\n\n @if (tableActionsMenuView() === 'main') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n @if (mergedConfig()?.features?.columnManagement?.allowAdd) {\n <nile-menu-item (click)=\"onTableActionsAddColumn()\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n <nile-menu-item (click)=\"openTableActionsColumnsView()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"eye\"></nile-icon>\n Show/Hide Columns\n </nile-menu-item>\n </nile-menu>\n </div>\n }\n\n @if (tableActionsMenuView() === 'columns') {\n <div class=\"table-actions-menu-panel\" [ngStyle]=\"tableActionsDropdownStyle()\">\n <nile-menu>\n <nile-menu-item (click)=\"backToTableActionsMain()\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n <nile-divider></nile-divider>\n @for (column of getTableActionsColumnsVisibility(); track column.key) {\n <nile-menu-item\n [class.disabled]=\"!column.hideable\"\n (click)=\"onTableActionsToggleColumn(column.key, $event)\">\n <nile-checkbox\n [checked]=\"column.visible\"\n [disabled]=\"!column.hideable\"\n [label]=\"column.header || column.key\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n }\n </div>\n}\n\n@if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n}\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState().isOpen\" [position]=\"dropdownState().position\"\n [context]=\"dropdownState().context\" (actionClicked)=\"onRowActionClicked($event)\"\n (closed)=\"closeRowActionsDropdown()\" (tabbed)=\"onDropdownTabbed($event)\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n@if (showBottomPagination() && !(mergedConfig()?.tableSkeleton?.enabled | async)) {\n <st-pagination \n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n position=\"bottom\">\n</st-pagination>\n}\n\n\n<!-- ========================================== -->\n<!-- REUSABLE TABLE TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n <table class=\"st-table-element\"\n role=\"grid\"\n [attr.aria-label]=\"mergedConfig()?.display?.ariaLabel || 'Data table'\"\n [attr.aria-rowcount]=\"visibleCellGrid().length\"\n [attr.aria-colcount]=\"visibleColumns().length\">\n <!-- TABLE HEADER -->\n <thead [ngClass]=\"{ 'sticky': mergedConfig()?.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n <tr role=\"row\">\n <!-- Row Number Header -->\n @if (mergedConfig()?.showRowNumber) {\n <th class=\"row-number-header header-cell sticky-left\"\n [class.row-number-header--with-icon]=\"hasRowNumberIcon\"\n scope=\"col\"\n aria-label=\"Row number\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'background-color': rowNumberStickyBackground()\n }\">\n <span class=\"row-number-cell__index\">#</span>\n </th>\n }\n <!-- Column Headers -->\n @for (column of visibleColumns(); track column.key; let colIndex = $index, isFirst = $first, isLast = $last) {\n <th\n scope=\"col\"\n [attr.aria-sort]=\"getColumnAriaSort(column)\"\n [ngClass]=\"{\n 'header-cell': mode === 'standard',\n 'sticky-left': column.sticky === 'left',\n 'sticky-right': column.sticky === 'right',\n 'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n 'resizable': column.resizable !== false\n }\"\n [ngStyle]=\"{\n position: column.sticky ? 'sticky' : null,\n 'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n 'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n 'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n 'width.px': column.width,\n 'min-width.px': column.minWidth ?? 100,\n 'background-color': stickyColumnBackground(column)\n }\">\n\n <st-header\n [column]=\"column\"\n [columnIndex]=\"colIndex\"\n [isFirstColumn]=\"isFirst\"\n [isLastColumn]=\"isLast\"\n [tableState]=\"getActiveTableState()\"\n [keyboardNavigationEnabled]=\"isKeyboardNavigationEnabled()\"\n [enableSorting]=\"mergedConfig()?.sorting?.enabled ?? enableSorting()\"\n [enableFiltering]=\"mergedConfig()?.filtering?.enabled ?? enableFiltering()\"\n (columnMoved)=\"onColumnMoved($event)\"\n (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\"\n (menuKeyboard)=\"openColumnMenuFromKeyboard(colIndex, isFirst, isLast)\"\n (tabOut)=\"onHeaderTabOut()\"\n (headerNavigate)=\"onHeaderNavigate($event, colIndex)\">\n </st-header>\n\n @if (column.resizable !== false) {\n <div\n class=\"resize-handle\"\n aria-hidden=\"true\"\n stColumnResize\n [column]=\"column\"\n (columnResizing)=\"onColumnResizing($event)\"\n (columnResized)=\"onColumnResized($event)\">\n </div>\n }\n </th>\n }\n\n <!-- Settings Column Header -->\n <th\n scope=\"col\"\n aria-label=\"Actions\"\n class=\"settings-column sticky-right\"\n [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n [ngStyle]=\"{\n 'z-index': ZIndex.STICKY_HEADER_CELL,\n 'background-color': rowNumberStickyBackground()\n }\">\n <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n <st-table-actions\n [isMenuOpen]=\"tableActionsMenuIsOpen()\"\n (menuButtonClicked)=\"onTableActionsButtonClick($event)\">\n </st-table-actions>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- TABLE BODY -->\n <tbody>\n <!-- Virtual Scroll Rows -->\n @if (mode === 'virtual') {\n @for (row of visibleRows(); track trackByRowIndex($index, row); let relativeIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\"\n [attr.aria-rowindex]=\"getAbsoluteRowIndex(relativeIndex) + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (getAbsoluteRowIndex(relativeIndex) + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(getAbsoluteRowIndex(relativeIndex))\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{getAbsoluteRowIndex(relativeIndex) + 1}}</span>\n @if (resolveRowNumberIcon(getAbsoluteRowIndex(relativeIndex)); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: getAbsoluteRowIndex(relativeIndex),\n mode: 'virtual',\n relativeIndex: relativeIndex\n }\"></ng-container>\n </tr>\n }\n }\n\n <!-- Standard Rows -->\n @if (mode === 'standard') {\n @for (row of visibleCellGrid(); track $index; let rowIndex = $index) {\n <tr role=\"row\"\n [attr.data-row-index]=\"rowIndex\"\n [attr.aria-rowindex]=\"rowIndex + 1\">\n <!-- Row Number Cell -->\n @if (mergedConfig()?.showRowNumber) {\n <td class=\"row-number-cell\"\n role=\"rowheader\"\n [class.row-number-cell--with-icon]=\"hasRowNumberIcon\"\n [attr.aria-label]=\"'Row ' + (rowIndex + 1)\"\n [ngClass]=\"{ 'sticky-left': 'left' }\"\n [ngStyle]=\"{\n position: 'sticky',\n 'left.px': 0,\n 'z-index': ZIndex.STICKY_BODY_CELL,\n 'width.px': rowNumberColumnWidth,\n 'min-width.px': rowNumberColumnWidth,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': rowNumberCellBackground(rowIndex)\n }\">\n <span class=\"row-number-cell__inner\">\n <span class=\"row-number-cell__index\">{{rowIndex + 1}}</span>\n @if (resolveRowNumberIcon(rowIndex); as icon) {\n @if (icon.tooltip) {\n <nile-tooltip class=\"row-number-cell__icon-wrap\" [content]=\"icon.tooltip\" placement=\"top\" [hoist]=\"true\">\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" [attr.aria-label]=\"icon.tooltip\"></nile-icon>\n </nile-tooltip>\n } @else {\n <nile-icon [name]=\"icon.name\" size=\"14\" class=\"row-number-cell__icon\" aria-hidden=\"true\"></nile-icon>\n }\n }\n </span>\n </td>\n }\n <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n row: row,\n rowIndex: rowIndex,\n mode: 'standard'\n }\"></ng-container>\n </tr>\n }\n }\n </tbody>\n </table>\n</ng-template>\n\n<!-- ========================================== -->\n<!-- REUSABLE BODY CELL TEMPLATE -->\n<!-- ========================================== -->\n<ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n <!-- Data Cells -->\n @for (cell of row; track $index; let colIndex = $index) {\n <td\n role=\"gridcell\"\n [attr.aria-colindex]=\"colIndex + 1\"\n [ngClass]=\"{\n 'sticky-left': visibleColumns()[colIndex]?.sticky === 'left',\n 'sticky-right': visibleColumns()[colIndex]?.sticky === 'right',\n 'sticky-right-first': visibleColumns()[colIndex]?.sticky === 'right' && visibleColumns()[colIndex]?.key && isFirstStickyRight(visibleColumns()[colIndex].key),\n 'align-center': visibleColumns()[colIndex]?.alignment === 'center',\n 'align-right': visibleColumns()[colIndex]?.alignment === 'right',\n 'cell-focused': cell.isFocused()\n }\"\n [ngStyle]=\"{\n position: visibleColumns()[colIndex]?.sticky ? 'sticky' : null,\n 'left.px': visibleColumns()[colIndex]?.sticky === 'left' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'right.px': visibleColumns()[colIndex]?.sticky === 'right' ? (visibleColumns()[colIndex]?.stickyOffset || 0) : null,\n 'z-index': visibleColumns()[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n 'width.px': visibleColumns()[colIndex]?.width,\n 'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null,\n 'background-color': bodyCellBackground(visibleColumns()[colIndex], rowIndex)\n }\"\n (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n \n <!-- Virtual Scroll Cell -->\n @if (mode === 'virtual') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n [editMode]=\"getEditModeForCells()\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellEdit)=\"onCellEdit($event)\" \n (cellSave)=\"onCellSave($event)\"\n (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n (cellCancel)=\"onCellCancel($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n\n <!-- Standard Cell -->\n @if (mode === 'standard') {\n <st-cell \n [cell]=\"cell\" \n [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n [tableState]=\"getActiveTableState()\"\n [tableConfig]=\"mergedConfig()!\"\n [columnIndex]=\"colIndex\"\n (cellSave)=\"onCellSave($event)\"\n (cellChange)=\"cellChange.emit($event)\">\n </st-cell>\n }\n </td>\n }\n \n <!-- Row Actions Cell -->\n <td class=\"settings-column\"\n role=\"gridcell\"\n [attr.aria-colindex]=\"visibleColumns().length + 1\"\n [ngClass]=\"{\n 'has-actions': hasRowActions()\n }\"\n [ngStyle]=\"{\n position: hasRowActions() ? 'sticky' : null,\n 'right.px': hasRowActions() ? 0 : null,\n 'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null,\n 'background-color': settingsColumnBodyBackground(rowIndex)\n }\">\n @if (hasRowActions()) {\n <button\n class=\"settings-trigger\"\n [attr.tabindex]=\"isKeyboardNavigationEnabled() ? -1 : null\"\n (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n (keydown)=\"onSettingsTriggerKeydown($event, getRowData(rowIndex), rowIndex)\"\n type=\"button\"\n aria-label=\"Row actions\">\n <span aria-hidden=\"true\">\u22EF</span>\n </button>\n }\n </td>\n</ng-template>\n\n@if (showColumnModal()) {\n <st-column-editor-modal\n (columnCreated)=\"onColumnCreated($event)\"\n (cancelled)=\"onModalCancelled()\">\n </st-column-editor-modal>\n}\n\n<ng-template #skeletonLoader>\n @if (mergedConfig()?.tableSkeleton?.enabled | async) {\n <div class=\"list-row\">\n @for (i of skeletonColumns; track $index) {\n <div class=\"list-content\">\n @for (j of skeletonRows; track $index) {\n <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\"></nile-skeleton-loader>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: [".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}:host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host>st-pagination{flex-shrink:0}.st-table{width:100%;overflow:auto;position:relative;flex:1 1 auto;min-height:0;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;position:relative;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:-1px;box-shadow:var(--st-focused-cell-box-shadow, 0 0 0 3px rgba(49, 130, 206, .1))}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:var(--st-focused-cell-editing-box-shadow, 0 0 0 4px rgba(37, 99, 235, .15))}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:var(--st-focused-cell-outline-width, 2px) solid var(--st-focused-cell-outline-color, #4299e1);outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,#00000014,#0000)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,#0000,#00000014)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:var(--ng-font-weight-bold);font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{font-weight:300;font-size:12px;background-color:#f8f8f8;text-align:center;padding:0 6px}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header.row-number-header--with-icon>*{display:inline-block;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:has(.st-cell.editing){position:relative;z-index:20}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td:has(.st-cell.editing){overflow:visible}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{font-weight:300;font-size:12px;background-color:#f8f8f8;min-width:30px;padding:0 6px;white-space:nowrap;text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__inner{display:inline-flex;align-items:center;justify-content:center;gap:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__index{display:inline-block;font-variant-numeric:tabular-nums}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon-wrap{display:inline-flex;align-items:center;flex:0 0 auto}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell .row-number-cell__icon{display:inline-flex;color:var(--st-row-number-icon-color, var(--nile-colors-dark-500, #636363));line-height:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon{text-align:left}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__inner{justify-content:flex-start;width:100%}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell.row-number-cell--with-icon .row-number-cell__index{text-align:right;min-width:22px}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.table-actions-menu-container{position:fixed;inset:0;z-index:9996;pointer-events:none}.table-actions-menu-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto}.table-actions-menu-panel{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}.table-actions-menu-panel nile-menu{max-height:30rem;overflow-y:auto}.table-actions-menu-panel nile-menu::part(base){width:fit-content;min-height:auto}.table-actions-menu-panel nile-menu nile-menu-item::part(base){min-height:2.5rem}.table-actions-menu-panel nile-menu nile-menu-item::part(label){font-size:12px}.table-actions-menu-panel nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}.table-actions-menu-panel nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}.flex-center{display:flex;align-items:center;justify-content:center}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}.list-row{padding:1rem}\n"] }]
|
|
12056
12056
|
}], ctorParameters: () => [], propDecorators: { tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], data$: [{ type: i0.Input, args: [{ isSignal: true, alias: "data$", required: false }] }], tableState: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableState", required: false }] }], enableSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSorting", required: false }] }], enableFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFiltering", required: false }] }], validateConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateConfig", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], columnResized: [{ type: i0.Output, args: ["columnResized"] }], columnMoved: [{ type: i0.Output, args: ["columnMoved"] }], configValidationErrors: [{ type: i0.Output, args: ["configValidationErrors"] }], addColumnClicked: [{ type: i0.Output, args: ["addColumnClicked"] }], columnAdded: [{ type: i0.Output, args: ["columnAdded"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], validationStateChange: [{ type: i0.Output, args: ["validationStateChange"] }], requestAddRow: [{ type: i0.Output, args: ["requestAddRow"] }], requestFocusTabs: [{ type: i0.Output, args: ["requestFocusTabs"] }], scrollViewport: [{
|
|
12057
12057
|
type: ViewChild,
|
|
12058
12058
|
args: ['scrollViewport', { read: ElementRef }]
|
|
@@ -12145,11 +12145,11 @@ class StColumnVisibilityComponent {
|
|
|
12145
12145
|
return column ? (column.visible !== false) : true;
|
|
12146
12146
|
}
|
|
12147
12147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n <button class=\"visibility-trigger\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n aria-label=\"Show/Hide Columns\"\n [attr.aria-expanded]=\"isOpen\"\n [class.active]=\"isOpen\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n \n @if (isOpen) {\n <div class=\"visibility-dropdown\">\n <div class=\"dropdown-header\">Show/Hide Columns</div>\n <div class=\"dropdown-content\">\n @for (column of getColumnsVisibility(); track column.key) {\n <label class=\"column-item\"\n [class.checked]=\"column.visible\"\n [class.disabled]=\"column.hideable === false\">\n <input type=\"checkbox\" \n [checked]=\"column.visible\"\n [disabled]=\"column.hideable === false\"\n [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n (change)=\"onToggleColumn(column.key, $event)\">\n <span class=\"column-label\">{{ column.header }}</span>\n </label>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:var(--ng-font-weight-bold);font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
12148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StColumnVisibilityComponent, isStandalone: true, selector: "st-column-visibility", inputs: { tableState: "tableState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n <button class=\"visibility-trigger\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Show/Hide Columns\"\n aria-label=\"Show/Hide Columns\"\n [attr.aria-expanded]=\"isOpen\"\n [class.active]=\"isOpen\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n \n @if (isOpen) {\n <div class=\"visibility-dropdown\">\n <div class=\"dropdown-header\">Show/Hide Columns</div>\n <div class=\"dropdown-content\">\n @for (column of getColumnsVisibility(); track column.key) {\n <label class=\"column-item\"\n [class.checked]=\"column.visible\"\n [class.disabled]=\"column.hideable === false\">\n <input type=\"checkbox\" \n [checked]=\"column.visible\"\n [disabled]=\"column.hideable === false\"\n [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n (change)=\"onToggleColumn(column.key, $event)\">\n <span class=\"column-label\">{{ column.header }}</span>\n </label>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:var(--ng-font-weight-bold);font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
12149
12149
|
}
|
|
12150
12150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
|
|
12151
12151
|
type: Component,
|
|
12152
|
-
args: [{ selector: 'st-column-visibility', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n <button class=\"visibility-trigger\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n aria-label=\"Show/Hide Columns\"\n [attr.aria-expanded]=\"isOpen\"\n [class.active]=\"isOpen\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n \n @if (isOpen) {\n <div class=\"visibility-dropdown\">\n <div class=\"dropdown-header\">Show/Hide Columns</div>\n <div class=\"dropdown-content\">\n @for (column of getColumnsVisibility(); track column.key) {\n <label class=\"column-item\"\n [class.checked]=\"column.visible\"\n [class.disabled]=\"column.hideable === false\">\n <input type=\"checkbox\" \n [checked]=\"column.visible\"\n [disabled]=\"column.hideable === false\"\n [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n (change)=\"onToggleColumn(column.key, $event)\">\n <span class=\"column-label\">{{ column.header }}</span>\n </label>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:var(--ng-font-weight-bold);font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
12152
|
+
args: [{ selector: 'st-column-visibility', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-column-visibility\" (clickOutside)=\"closeMenu()\">\n <button class=\"visibility-trigger\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Show/Hide Columns\"\n aria-label=\"Show/Hide Columns\"\n [attr.aria-expanded]=\"isOpen\"\n [class.active]=\"isOpen\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\">\n <path d=\"M2 2H14V14H2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 2V14M8 2V14M11 2V14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n \n @if (isOpen) {\n <div class=\"visibility-dropdown\">\n <div class=\"dropdown-header\">Show/Hide Columns</div>\n <div class=\"dropdown-content\">\n @for (column of getColumnsVisibility(); track column.key) {\n <label class=\"column-item\"\n [class.checked]=\"column.visible\"\n [class.disabled]=\"column.hideable === false\">\n <input type=\"checkbox\" \n [checked]=\"column.visible\"\n [disabled]=\"column.hideable === false\"\n [title]=\"column.hideable === false ? 'This column cannot be hidden' : ''\"\n (change)=\"onToggleColumn(column.key, $event)\">\n <span class=\"column-label\">{{ column.header }}</span>\n </label>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".st-column-visibility{position:absolute;top:8px;right:8px;z-index:1000;display:inline-block}.st-column-visibility .visibility-trigger{background:#fff;border:1px solid #e2e8f0;border-radius:4px;cursor:pointer;padding:6px 8px;color:#718096;line-height:1;transition:all .2s;box-shadow:0 1px 2px #0000000d}.st-column-visibility .visibility-trigger:hover{background-color:#f7fafc;border-color:#cbd5e0;color:#2d3748}.st-column-visibility .visibility-trigger.active{background-color:#ebf8ff;border-color:#2b6cb0;color:#2b6cb0}.st-column-visibility .visibility-trigger svg{display:block;width:16px;height:16px}.st-column-visibility .visibility-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;z-index:1001;min-width:200px;margin-top:4px;overflow:hidden}.st-column-visibility .visibility-dropdown .dropdown-header{padding:10px 14px;font-weight:var(--ng-font-weight-bold);font-size:13px;color:#2d3748;border-bottom:1px solid #e2e8f0;background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content{max-height:10rem;overflow-y:auto;overflow-x:hidden}.st-column-visibility .visibility-dropdown .dropdown-content .column-item{display:flex;align-items:center;padding:10px 14px;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none}.st-column-visibility .visibility-dropdown .dropdown-content .column-item:hover{background-color:#f7fafc}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.checked{background-color:#ebf8ff}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled{opacity:.6;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item.disabled:hover{background-color:transparent;cursor:not-allowed}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]{margin-right:10px;cursor:pointer;width:16px;height:16px;flex-shrink:0}.st-column-visibility .visibility-dropdown .dropdown-content .column-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.st-column-visibility .visibility-dropdown .dropdown-content .column-item .column-label{font-size:14px;color:#2d3748;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
12153
12153
|
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
12154
12154
|
type: Input
|
|
12155
12155
|
}] } });
|
|
@@ -13051,11 +13051,11 @@ class StConditionRuleComponent {
|
|
|
13051
13051
|
this.ruleChange.emit(next);
|
|
13052
13052
|
}
|
|
13053
13053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionRuleComponent, isStandalone: true, selector: "st-condition-rule", inputs: { rule: "rule", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled", canInsertGroup: "canInsertGroup", inGroup: "inGroup" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, host: { properties: { "class.in-group": "this.inGroup" } }, ngImport: i0, template: "<div class=\"st-condition-rule\"\n role=\"group\"\n aria-label=\"Condition row\"\n [class.is-first]=\"isFirst\">\n\n <div class=\"st-condition-rule__main\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Logical connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n } @else if (inGroup) {\n <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n column width with a spacer so the field / operator / value columns stay\n aligned with the connector-preceded sub-conditions below it. Top-level\n first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n }\n\n <st-condition-field-picker\n [value]=\"rule.attribute\"\n [fields]=\"config.fields\"\n [categories]=\"config.categories ?? []\"\n [disabled]=\"disabled\"\n placeholder=\"Select criteria\"\n (valueChange)=\"onAttributeChange($event)\">\n </st-condition-field-picker>\n\n <nile-select\n class=\"st-cb-chip st-cb-chip--operator\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.operator\"\n [attr.disabled]=\"disabled ? '' : null\"\n placeholder=\"Equals to\"\n aria-label=\"Operator\"\n (nile-change)=\"onOperatorChange($event)\">\n @for (op of availableOperators; track op.key) {\n <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n }\n </nile-select>\n\n <st-condition-value-editor\n class=\"st-condition-rule__value\"\n [field]=\"field\"\n [operator]=\"operator\"\n [value]=\"rule.value\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\">\n </st-condition-value-editor>\n\n </div>\n\n <div class=\"st-condition-rule__hover-actions\">\n @if (canInsertGroup) {\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">
|
|
13054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionRuleComponent, isStandalone: true, selector: "st-condition-rule", inputs: { rule: "rule", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled", canInsertGroup: "canInsertGroup", inGroup: "inGroup" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, host: { properties: { "class.in-group": "this.inGroup" } }, ngImport: i0, template: "<div class=\"st-condition-rule\"\n role=\"group\"\n aria-label=\"Condition row\"\n [class.is-first]=\"isFirst\">\n\n <div class=\"st-condition-rule__main\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Logical connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n } @else if (inGroup) {\n <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n column width with a spacer so the field / operator / value columns stay\n aligned with the connector-preceded sub-conditions below it. Top-level\n first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n }\n\n <st-condition-field-picker\n [value]=\"rule.attribute\"\n [fields]=\"config.fields\"\n [categories]=\"config.categories ?? []\"\n [disabled]=\"disabled\"\n placeholder=\"Select criteria\"\n (valueChange)=\"onAttributeChange($event)\">\n </st-condition-field-picker>\n\n <nile-select\n class=\"st-cb-chip st-cb-chip--operator\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.operator\"\n [attr.disabled]=\"disabled ? '' : null\"\n placeholder=\"Equals to\"\n aria-label=\"Operator\"\n (nile-change)=\"onOperatorChange($event)\">\n @for (op of availableOperators; track op.key) {\n <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n }\n </nile-select>\n\n <st-condition-value-editor\n class=\"st-condition-rule__value\"\n [field]=\"field\"\n [operator]=\"operator\"\n [value]=\"rule.value\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\">\n </st-condition-value-editor>\n\n </div>\n\n <div class=\"st-condition-rule__hover-actions\">\n @if (canInsertGroup) {\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">Condition group</nile-menu-item>\n </nile-menu>\n </nile-dropdown>\n } @else {\n <button type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition below\"\n (click)=\"onInsertBelowClick($event)\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n @if (canRemove) {\n <button type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Remove condition\"\n (click)=\"onRemoveClick()\">\n <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n\n</div>\n", styles: [":host{display:block}:host(.in-group){--st-cb-connector-width: 60px}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule .st-cb-connector-spacer{flex:0 0 auto;width:var(--st-cb-connector-width, 64px)}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule__hover-actions:has(:focus-visible){opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-rule__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-rule__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:auto;min-width:0;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-chip::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}:host(.in-group) ::ng-deep .st-cb-chip--connector{width:var(--st-cb-connector-width)!important;max-width:var(--st-cb-connector-width)}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(combobox){width:100%;gap:2px}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(display-input){width:30px}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionValueEditorComponent, selector: "st-condition-value-editor", inputs: ["field", "operator", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: StConditionFieldPickerComponent, selector: "st-condition-field-picker", inputs: ["value", "fields", "categories", "disabled", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13055
13055
|
}
|
|
13056
13056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, decorators: [{
|
|
13057
13057
|
type: Component,
|
|
13058
|
-
args: [{ selector: 'st-condition-rule', standalone: true, imports: [CommonModule, StConditionValueEditorComponent, StConditionFieldPickerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-rule\"\n role=\"group\"\n aria-label=\"Condition row\"\n [class.is-first]=\"isFirst\">\n\n <div class=\"st-condition-rule__main\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Logical connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n } @else if (inGroup) {\n <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n column width with a spacer so the field / operator / value columns stay\n aligned with the connector-preceded sub-conditions below it. Top-level\n first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n }\n\n <st-condition-field-picker\n [value]=\"rule.attribute\"\n [fields]=\"config.fields\"\n [categories]=\"config.categories ?? []\"\n [disabled]=\"disabled\"\n placeholder=\"Select criteria\"\n (valueChange)=\"onAttributeChange($event)\">\n </st-condition-field-picker>\n\n <nile-select\n class=\"st-cb-chip st-cb-chip--operator\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.operator\"\n [attr.disabled]=\"disabled ? '' : null\"\n placeholder=\"Equals to\"\n aria-label=\"Operator\"\n (nile-change)=\"onOperatorChange($event)\">\n @for (op of availableOperators; track op.key) {\n <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n }\n </nile-select>\n\n <st-condition-value-editor\n class=\"st-condition-rule__value\"\n [field]=\"field\"\n [operator]=\"operator\"\n [value]=\"rule.value\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\">\n </st-condition-value-editor>\n\n </div>\n\n <div class=\"st-condition-rule__hover-actions\">\n @if (canInsertGroup) {\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">
|
|
13058
|
+
args: [{ selector: 'st-condition-rule', standalone: true, imports: [CommonModule, StConditionValueEditorComponent, StConditionFieldPickerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-rule\"\n role=\"group\"\n aria-label=\"Condition row\"\n [class.is-first]=\"isFirst\">\n\n <div class=\"st-condition-rule__main\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Logical connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n } @else if (inGroup) {\n <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n column width with a spacer so the field / operator / value columns stay\n aligned with the connector-preceded sub-conditions below it. Top-level\n first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n }\n\n <st-condition-field-picker\n [value]=\"rule.attribute\"\n [fields]=\"config.fields\"\n [categories]=\"config.categories ?? []\"\n [disabled]=\"disabled\"\n placeholder=\"Select criteria\"\n (valueChange)=\"onAttributeChange($event)\">\n </st-condition-field-picker>\n\n <nile-select\n class=\"st-cb-chip st-cb-chip--operator\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"rule.operator\"\n [attr.disabled]=\"disabled ? '' : null\"\n placeholder=\"Equals to\"\n aria-label=\"Operator\"\n (nile-change)=\"onOperatorChange($event)\">\n @for (op of availableOperators; track op.key) {\n <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n }\n </nile-select>\n\n <st-condition-value-editor\n class=\"st-condition-rule__value\"\n [field]=\"field\"\n [operator]=\"operator\"\n [value]=\"rule.value\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\">\n </st-condition-value-editor>\n\n </div>\n\n <div class=\"st-condition-rule__hover-actions\">\n @if (canInsertGroup) {\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">Condition group</nile-menu-item>\n </nile-menu>\n </nile-dropdown>\n } @else {\n <button type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition below\"\n (click)=\"onInsertBelowClick($event)\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n @if (canRemove) {\n <button type=\"button\"\n class=\"st-condition-rule__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Remove condition\"\n (click)=\"onRemoveClick()\">\n <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n\n</div>\n", styles: [":host{display:block}:host(.in-group){--st-cb-connector-width: 60px}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule .st-cb-connector-spacer{flex:0 0 auto;width:var(--st-cb-connector-width, 64px)}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule__hover-actions:has(:focus-visible){opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-rule__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-rule__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:auto;min-width:0;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-chip::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}:host(.in-group) ::ng-deep .st-cb-chip--connector{width:var(--st-cb-connector-width)!important;max-width:var(--st-cb-connector-width)}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(combobox){width:100%;gap:2px}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(display-input){width:30px}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
|
|
13059
13059
|
}], propDecorators: { rule: [{
|
|
13060
13060
|
type: Input,
|
|
13061
13061
|
args: [{ required: true }]
|
|
@@ -13190,11 +13190,11 @@ class StConditionGroupComponent {
|
|
|
13190
13190
|
this.groupChange.emit(next);
|
|
13191
13191
|
}
|
|
13192
13192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionGroupComponent, isStandalone: true, selector: "st-condition-group", inputs: { group: "group", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled" }, outputs: { groupChange: "groupChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, ngImport: i0, template: "<div class=\"st-condition-group-row\"\n role=\"group\"\n aria-label=\"Condition group\"\n [class.is-first]=\"isFirst\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"group.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Group connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n }\n\n <div class=\"st-condition-group\"\n role=\"list\"\n aria-label=\"Group conditions\">\n @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n <st-condition-rule\n [rule]=\"sub\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [inGroup]=\"true\"\n [canRemove]=\"group.subConditions.length > 1\"\n [canInsertGroup]=\"false\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSubConditionChange(i, $event)\"\n (remove)=\"onSubConditionRemove(i)\"\n (insertBelow)=\"onSubConditionInsertBelow(i)\">\n </st-condition-rule>\n }\n </div>\n\n <div class=\"st-condition-group-row__hover-actions\">\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">
|
|
13193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionGroupComponent, isStandalone: true, selector: "st-condition-group", inputs: { group: "group", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled" }, outputs: { groupChange: "groupChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, ngImport: i0, template: "<div class=\"st-condition-group-row\"\n role=\"group\"\n aria-label=\"Condition group\"\n [class.is-first]=\"isFirst\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"group.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Group connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n }\n\n <div class=\"st-condition-group\"\n role=\"list\"\n aria-label=\"Group conditions\">\n @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n <st-condition-rule\n [rule]=\"sub\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [inGroup]=\"true\"\n [canRemove]=\"group.subConditions.length > 1\"\n [canInsertGroup]=\"false\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSubConditionChange(i, $event)\"\n (remove)=\"onSubConditionRemove(i)\"\n (insertBelow)=\"onSubConditionInsertBelow(i)\">\n </st-condition-rule>\n }\n </div>\n\n <div class=\"st-condition-group-row__hover-actions\">\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">Condition group</nile-menu-item>\n </nile-menu>\n </nile-dropdown>\n @if (canRemove) {\n <button type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Remove group\"\n (click)=\"onRemoveGroup()\">\n <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;align-self:flex-end;margin-bottom:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row__hover-actions:has(:focus-visible){opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group-row__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-group-row__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:auto;min-width:0;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-chip::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup", "inGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13194
13194
|
}
|
|
13195
13195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, decorators: [{
|
|
13196
13196
|
type: Component,
|
|
13197
|
-
args: [{ selector: 'st-condition-group', standalone: true, imports: [CommonModule, StConditionRuleComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-group-row\"\n role=\"group\"\n aria-label=\"Condition group\"\n [class.is-first]=\"isFirst\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"group.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Group connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n }\n\n <div class=\"st-condition-group\"\n role=\"list\"\n aria-label=\"Group conditions\">\n @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n <st-condition-rule\n [rule]=\"sub\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [inGroup]=\"true\"\n [canRemove]=\"group.subConditions.length > 1\"\n [canInsertGroup]=\"false\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSubConditionChange(i, $event)\"\n (remove)=\"onSubConditionRemove(i)\"\n (insertBelow)=\"onSubConditionInsertBelow(i)\">\n </st-condition-rule>\n }\n </div>\n\n <div class=\"st-condition-group-row__hover-actions\">\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">
|
|
13197
|
+
args: [{ selector: 'st-condition-group', standalone: true, imports: [CommonModule, StConditionRuleComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-group-row\"\n role=\"group\"\n aria-label=\"Condition group\"\n [class.is-first]=\"isFirst\">\n\n @if (!isFirst) {\n <nile-select\n class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"group.connector\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Group connector\"\n (nile-change)=\"onConnectorChange($event)\">\n @for (c of connectorOptions; track c) {\n <nile-option [value]=\"c\">{{ c }}</nile-option>\n }\n </nile-select>\n }\n\n <div class=\"st-condition-group\"\n role=\"list\"\n aria-label=\"Group conditions\">\n @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n <st-condition-rule\n [rule]=\"sub\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [inGroup]=\"true\"\n [canRemove]=\"group.subConditions.length > 1\"\n [canInsertGroup]=\"false\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSubConditionChange(i, $event)\"\n (remove)=\"onSubConditionRemove(i)\"\n (insertBelow)=\"onSubConditionInsertBelow(i)\">\n </st-condition-rule>\n }\n </div>\n\n <div class=\"st-condition-group-row__hover-actions\">\n <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Insert condition or group below\"\n aria-haspopup=\"menu\">\n <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n <nile-menu-item value=\"group\">Condition group</nile-menu-item>\n </nile-menu>\n </nile-dropdown>\n @if (canRemove) {\n <button type=\"button\"\n class=\"st-condition-group-row__icon-button\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-label=\"Remove group\"\n (click)=\"onRemoveGroup()\">\n <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;align-self:flex-end;margin-bottom:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row__hover-actions:has(:focus-visible){opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group-row__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-group-row__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:auto;min-width:0;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-chip::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}\n"] }]
|
|
13198
13198
|
}], propDecorators: { group: [{
|
|
13199
13199
|
type: Input,
|
|
13200
13200
|
args: [{ required: true }]
|
|
@@ -14674,11 +14674,11 @@ class StWorkbookComponent {
|
|
|
14674
14674
|
}
|
|
14675
14675
|
}
|
|
14676
14676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StWorkbookComponent, isStandalone: true, selector: "st-workbook", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sheetsData: { classPropertyName: "sheetsData", publicName: "sheetsData", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle", requestAddRow: "requestAddRow", conditionBuilderValueChange: "conditionBuilderValueChange", conditionBuilderValidityChange: "conditionBuilderValidityChange" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }, { propertyName: "workbookTabGroup", first: true, predicate: ["workbookTabGroup"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n <nile-tab-group #workbookTabGroup [activeIndex]=\"activeSheetIndex()\">\n \n <!-- Sheet Tabs (one per sheet) -->\n @for (sheet of sheets(); track sheet.id; let i = $index) {\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-sheet-tab\"\n [class.active]=\"i === activeSheetIndex()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === activeSheetIndex()\"\n [attr.aria-label]=\"sheet.name\"\n [attr.tabindex]=\"i === activeSheetIndex() ? 0 : -1\"\n (click)=\"onTabChange(i)\"\n (keydown)=\"onSheetTabKeydown($event, i)\">\n <div class=\"sheet-tab-content\">\n <span class=\"sheet-name\">{{ sheet.name }}</span>\n\n <!-- Tab actions affordance. Rendered as a non-interactive, aria-hidden\n <span> (not a <button>) so it is NOT a nested interactive control\n inside the role=\"tab\" element \u2014 that nesting fails WCAG 4.1.2 /\n axe \"nested-interactive\" and confuses screen readers & keyboard\n focus order. Mouse users still click it; keyboard users open the\n same menu via Space on the focused tab (see onSheetTabKeydown),\n which is why the Tab handler already skips this element. -->\n @if (hasTabActions(sheet)) {\n <span class=\"tab-actions-button\"\n aria-hidden=\"true\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </span>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar \"Tab\" (for workbook controls). This is NOT a real tab \u2014 it's a\n disabled layout slot that hosts the workbook toolbar. NOTE: nile-tab force-sets\n role=\"tab\" on itself (setAttribute in its update cycle), so a role override here\n does NOT stick \u2014 the inner interactive buttons remain nested inside role=\"tab\"\n (axe \"nested-interactive\"). Fixing that requires a nile-elements (nile-tab)\n change or not using nile-tab for the toolbar. Tracked separately. -->\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-toolbar-tab\"\n [disabled]=\"true\">\n <div class=\"workbook-toolbar-content\" role=\"toolbar\" aria-label=\"Workbook toolbar\"\n (keydown)=\"onToolbarKeydown($event)\">\n\n <!-- Autosave Indicator \u2014 hidden unless `autosave.showIndicator: true` -->\n @if (autosaveIndicatorVisible()) {\n <div class=\"autosave-indicator\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (!isSaving() && lastSaveTime()) {\n <nile-icon\n name=\"save\"\n size=\"14\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saved at {{ lastSaveTime() | date:'HH:mm:ss' }}</span>\n }\n @if (isSaving()) {\n <nile-icon\n name=\"loader\"\n size=\"14\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saving\u2026</span>\n }\n </div>\n }\n\n <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n @for (action of toolbarWorkbookActions(); track action.id) {\n <button class=\"toolbar-action-button\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"action.label\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n @if (!action.icon) {\n <span>{{ action.label }}</span>\n }\n </button>\n }\n\n <!-- Workbook Actions Dropdown -->\n @if (visibleWorkbookActions().length > 0) {\n <button class=\"workbook-actions-button\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Workbook actions\"\n [attr.aria-expanded]=\"workbookActionsOpen()\"\n aria-haspopup=\"true\"\n (click)=\"toggleWorkbookActions($event)\">\n <nile-icon name=\"settings\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Add Sheet Button -->\n @if (canAddSheet) {\n <button class=\"add-sheet-button\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Add sheet\"\n (click)=\"onAddSheet()\">\n <nile-icon name=\"plus\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Fullscreen Button -->\n @if (config().display?.allowFullscreen !== false) {\n <button class=\"fullscreen-button\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"isFullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'\"\n [attr.aria-pressed]=\"isFullscreen()\"\n (click)=\"toggleFullscreen()\">\n <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n \n <!-- Single Shared Tab Panel -->\n <nile-tab-panel name=\"shared-panel\">\n <!-- Lazy loading strategy: content is destroyed and recreated with new config/state when sheet changes -->\n <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n @for (key of [tableComponentKey()]; track key) {\n @switch (activeSheetContentType) {\n @case ('condition-builder') {\n @if (activeSheet()?.conditionBuilder) {\n <st-condition-builder\n [attr.data-sheet-key]=\"key\"\n [config]=\"activeSheet()!.conditionBuilder!.config\"\n [value]=\"activeSheet()!.conditionBuilder!.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (currentTableConfig() && currentTableState()) {\n <st-table\n [attr.data-sheet-key]=\"key\"\n [tableConfig]=\"currentTableConfig()!\"\n [data$]=\"currentTableData$\"\n [tableState]=\"currentTableState()!\"\n (cellChange)=\"onCellChange($event)\"\n (cellSave)=\"onCellSave($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (requestAddRow)=\"onRequestAddRow($event)\"\n (requestFocusTabs)=\"onRequestFocusTabs()\">\n </st-table>\n }\n }\n }\n }\n </nile-tab-panel>\n \n </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\" (keydown)=\"onTabActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeTabActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" [attr.aria-label]=\"(selectedSheet()?.name || 'Sheet') + ' actions'\">\n <nile-menu>\n @for (action of selectedSheet()?.tabActions; track action.id) {\n <nile-menu-item tabindex=\"-1\" (click)=\"onTabActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\" (keydown)=\"onWorkbookActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeWorkbookActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Workbook actions\">\n <nile-menu>\n @for (action of visibleWorkbookActions(); track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n </div>\n}\n", styles: [".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}:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:var(--ng-font-weight-medium);font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:var(--ng-font-weight-bold)}nile-tab-group nile-tab-panel::part(base){padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "addColumnClicked", "columnAdded", "rowAction", "validationStateChange", "requestAddRow", "requestFocusTabs"] }, { kind: "component", type: StConditionBuilderComponent, selector: "st-condition-builder", inputs: ["config", "value", "disabled"], outputs: ["valueChange", "validityChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
14677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StWorkbookComponent, isStandalone: true, selector: "st-workbook", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sheetsData: { classPropertyName: "sheetsData", publicName: "sheetsData", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle", requestAddRow: "requestAddRow", conditionBuilderValueChange: "conditionBuilderValueChange", conditionBuilderValidityChange: "conditionBuilderValidityChange" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }, { propertyName: "workbookTabGroup", first: true, predicate: ["workbookTabGroup"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n <nile-tab-group #workbookTabGroup [activeIndex]=\"activeSheetIndex()\">\n \n <!-- Sheet Tabs (one per sheet) -->\n @for (sheet of sheets(); track sheet.id; let i = $index) {\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-sheet-tab\"\n [class.active]=\"i === activeSheetIndex()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === activeSheetIndex()\"\n [attr.aria-label]=\"sheet.name\"\n [attr.tabindex]=\"i === activeSheetIndex() ? 0 : -1\"\n (click)=\"onTabChange(i)\"\n (keydown)=\"onSheetTabKeydown($event, i)\">\n <div class=\"sheet-tab-content\">\n <span class=\"sheet-name\">{{ sheet.name }}</span>\n\n <!-- Tab actions affordance. Rendered as a non-interactive, aria-hidden\n <span> (not a <button>) so it is NOT a nested interactive control\n inside the role=\"tab\" element \u2014 that nesting fails WCAG 4.1.2 /\n axe \"nested-interactive\" and confuses screen readers & keyboard\n focus order. Mouse users still click it; keyboard users open the\n same menu via Space on the focused tab (see onSheetTabKeydown),\n which is why the Tab handler already skips this element. -->\n @if (hasTabActions(sheet)) {\n <span class=\"tab-actions-button\"\n aria-hidden=\"true\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </span>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar \"Tab\" (for workbook controls). This is NOT a real tab \u2014 it's a\n disabled layout slot that hosts the workbook toolbar. NOTE: nile-tab force-sets\n role=\"tab\" on itself (setAttribute in its update cycle), so a role override here\n does NOT stick \u2014 the inner interactive buttons remain nested inside role=\"tab\"\n (axe \"nested-interactive\"). Fixing that requires a nile-elements (nile-tab)\n change or not using nile-tab for the toolbar. Tracked separately. -->\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-toolbar-tab\"\n [disabled]=\"true\">\n <div class=\"workbook-toolbar-content\" role=\"toolbar\" aria-label=\"Workbook toolbar\"\n (keydown)=\"onToolbarKeydown($event)\">\n\n <!-- Autosave Indicator \u2014 hidden unless `autosave.showIndicator: true` -->\n @if (autosaveIndicatorVisible()) {\n <div class=\"autosave-indicator\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (!isSaving() && lastSaveTime()) {\n <nile-icon\n name=\"save\"\n size=\"14\"\n [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saved at {{ lastSaveTime() | date:'HH:mm:ss' }}</span>\n }\n @if (isSaving()) {\n <nile-icon\n name=\"loader\"\n size=\"14\"\n title=\"Saving...\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saving\u2026</span>\n }\n </div>\n }\n\n <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n @for (action of toolbarWorkbookActions(); track action.id) {\n <button class=\"toolbar-action-button\"\n type=\"button\"\n tabindex=\"-1\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n @if (!action.icon) {\n <span>{{ action.label }}</span>\n }\n </button>\n }\n\n <!-- Workbook Actions Dropdown -->\n @if (visibleWorkbookActions().length > 0) {\n <button class=\"workbook-actions-button\"\n type=\"button\"\n tabindex=\"-1\"\n title=\"Workbook Actions\"\n aria-label=\"Workbook actions\"\n [attr.aria-expanded]=\"workbookActionsOpen()\"\n aria-haspopup=\"true\"\n (click)=\"toggleWorkbookActions($event)\">\n <nile-icon name=\"settings\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Add Sheet Button -->\n @if (canAddSheet) {\n <button class=\"add-sheet-button\"\n type=\"button\"\n tabindex=\"-1\"\n title=\"Add Sheet\"\n aria-label=\"Add sheet\"\n (click)=\"onAddSheet()\">\n <nile-icon name=\"plus\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Fullscreen Button -->\n @if (config().display?.allowFullscreen !== false) {\n <button class=\"fullscreen-button\"\n type=\"button\"\n tabindex=\"-1\"\n [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\"\n [attr.aria-label]=\"isFullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'\"\n [attr.aria-pressed]=\"isFullscreen()\"\n (click)=\"toggleFullscreen()\">\n <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n \n <!-- Single Shared Tab Panel -->\n <nile-tab-panel name=\"shared-panel\">\n <!-- Lazy loading strategy: content is destroyed and recreated with new config/state when sheet changes -->\n <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n @for (key of [tableComponentKey()]; track key) {\n @switch (activeSheetContentType) {\n @case ('condition-builder') {\n @if (activeSheet()?.conditionBuilder) {\n <st-condition-builder\n [attr.data-sheet-key]=\"key\"\n [config]=\"activeSheet()!.conditionBuilder!.config\"\n [value]=\"activeSheet()!.conditionBuilder!.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (currentTableConfig() && currentTableState()) {\n <st-table\n [attr.data-sheet-key]=\"key\"\n [tableConfig]=\"currentTableConfig()!\"\n [data$]=\"currentTableData$\"\n [tableState]=\"currentTableState()!\"\n (cellChange)=\"onCellChange($event)\"\n (cellSave)=\"onCellSave($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (requestAddRow)=\"onRequestAddRow($event)\"\n (requestFocusTabs)=\"onRequestFocusTabs()\">\n </st-table>\n }\n }\n }\n }\n </nile-tab-panel>\n \n </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\" (keydown)=\"onTabActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeTabActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" [attr.aria-label]=\"(selectedSheet()?.name || 'Sheet') + ' actions'\">\n <nile-menu>\n @for (action of selectedSheet()?.tabActions; track action.id) {\n <nile-menu-item tabindex=\"-1\" (click)=\"onTabActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\" (keydown)=\"onWorkbookActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeWorkbookActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Workbook actions\">\n <nile-menu>\n @for (action of visibleWorkbookActions(); track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n </div>\n}\n", styles: [".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}:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:var(--ng-font-weight-medium);font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:var(--ng-font-weight-bold)}nile-tab-group nile-tab-panel::part(base){padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "addColumnClicked", "columnAdded", "rowAction", "validationStateChange", "requestAddRow", "requestFocusTabs"] }, { kind: "component", type: StConditionBuilderComponent, selector: "st-condition-builder", inputs: ["config", "value", "disabled"], outputs: ["valueChange", "validityChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
14678
14678
|
}
|
|
14679
14679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StWorkbookComponent, decorators: [{
|
|
14680
14680
|
type: Component,
|
|
14681
|
-
args: [{ selector: 'st-workbook', standalone: true, imports: [CommonModule, StTableComponent, StConditionBuilderComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n <nile-tab-group #workbookTabGroup [activeIndex]=\"activeSheetIndex()\">\n \n <!-- Sheet Tabs (one per sheet) -->\n @for (sheet of sheets(); track sheet.id; let i = $index) {\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-sheet-tab\"\n [class.active]=\"i === activeSheetIndex()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === activeSheetIndex()\"\n [attr.aria-label]=\"sheet.name\"\n [attr.tabindex]=\"i === activeSheetIndex() ? 0 : -1\"\n (click)=\"onTabChange(i)\"\n (keydown)=\"onSheetTabKeydown($event, i)\">\n <div class=\"sheet-tab-content\">\n <span class=\"sheet-name\">{{ sheet.name }}</span>\n\n <!-- Tab actions affordance. Rendered as a non-interactive, aria-hidden\n <span> (not a <button>) so it is NOT a nested interactive control\n inside the role=\"tab\" element \u2014 that nesting fails WCAG 4.1.2 /\n axe \"nested-interactive\" and confuses screen readers & keyboard\n focus order. Mouse users still click it; keyboard users open the\n same menu via Space on the focused tab (see onSheetTabKeydown),\n which is why the Tab handler already skips this element. -->\n @if (hasTabActions(sheet)) {\n <span class=\"tab-actions-button\"\n aria-hidden=\"true\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </span>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar \"Tab\" (for workbook controls). This is NOT a real tab \u2014 it's a\n disabled layout slot that hosts the workbook toolbar. NOTE: nile-tab force-sets\n role=\"tab\" on itself (setAttribute in its update cycle), so a role override here\n does NOT stick \u2014 the inner interactive buttons remain nested inside role=\"tab\"\n (axe \"nested-interactive\"). Fixing that requires a nile-elements (nile-tab)\n change or not using nile-tab for the toolbar. Tracked separately. -->\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-toolbar-tab\"\n [disabled]=\"true\">\n <div class=\"workbook-toolbar-content\" role=\"toolbar\" aria-label=\"Workbook toolbar\"\n (keydown)=\"onToolbarKeydown($event)\">\n\n <!-- Autosave Indicator \u2014 hidden unless `autosave.showIndicator: true` -->\n @if (autosaveIndicatorVisible()) {\n <div class=\"autosave-indicator\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (!isSaving() && lastSaveTime()) {\n <nile-icon\n name=\"save\"\n size=\"14\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saved at {{ lastSaveTime() | date:'HH:mm:ss' }}</span>\n }\n @if (isSaving()) {\n <nile-icon\n name=\"loader\"\n size=\"14\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saving\u2026</span>\n }\n </div>\n }\n\n <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n @for (action of toolbarWorkbookActions(); track action.id) {\n <button class=\"toolbar-action-button\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"action.label\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n @if (!action.icon) {\n <span>{{ action.label }}</span>\n }\n </button>\n }\n\n <!-- Workbook Actions Dropdown -->\n @if (visibleWorkbookActions().length > 0) {\n <button class=\"workbook-actions-button\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Workbook actions\"\n [attr.aria-expanded]=\"workbookActionsOpen()\"\n aria-haspopup=\"true\"\n (click)=\"toggleWorkbookActions($event)\">\n <nile-icon name=\"settings\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Add Sheet Button -->\n @if (canAddSheet) {\n <button class=\"add-sheet-button\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Add sheet\"\n (click)=\"onAddSheet()\">\n <nile-icon name=\"plus\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Fullscreen Button -->\n @if (config().display?.allowFullscreen !== false) {\n <button class=\"fullscreen-button\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"isFullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'\"\n [attr.aria-pressed]=\"isFullscreen()\"\n (click)=\"toggleFullscreen()\">\n <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n \n <!-- Single Shared Tab Panel -->\n <nile-tab-panel name=\"shared-panel\">\n <!-- Lazy loading strategy: content is destroyed and recreated with new config/state when sheet changes -->\n <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n @for (key of [tableComponentKey()]; track key) {\n @switch (activeSheetContentType) {\n @case ('condition-builder') {\n @if (activeSheet()?.conditionBuilder) {\n <st-condition-builder\n [attr.data-sheet-key]=\"key\"\n [config]=\"activeSheet()!.conditionBuilder!.config\"\n [value]=\"activeSheet()!.conditionBuilder!.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (currentTableConfig() && currentTableState()) {\n <st-table\n [attr.data-sheet-key]=\"key\"\n [tableConfig]=\"currentTableConfig()!\"\n [data$]=\"currentTableData$\"\n [tableState]=\"currentTableState()!\"\n (cellChange)=\"onCellChange($event)\"\n (cellSave)=\"onCellSave($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (requestAddRow)=\"onRequestAddRow($event)\"\n (requestFocusTabs)=\"onRequestFocusTabs()\">\n </st-table>\n }\n }\n }\n }\n </nile-tab-panel>\n \n </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\" (keydown)=\"onTabActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeTabActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" [attr.aria-label]=\"(selectedSheet()?.name || 'Sheet') + ' actions'\">\n <nile-menu>\n @for (action of selectedSheet()?.tabActions; track action.id) {\n <nile-menu-item tabindex=\"-1\" (click)=\"onTabActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\" (keydown)=\"onWorkbookActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeWorkbookActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Workbook actions\">\n <nile-menu>\n @for (action of visibleWorkbookActions(); track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n </div>\n}\n", styles: [".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}:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:var(--ng-font-weight-medium);font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:var(--ng-font-weight-bold)}nile-tab-group nile-tab-panel::part(base){padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"] }]
|
|
14681
|
+
args: [{ selector: 'st-workbook', standalone: true, imports: [CommonModule, StTableComponent, StConditionBuilderComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen()\">\n <nile-tab-group #workbookTabGroup [activeIndex]=\"activeSheetIndex()\">\n \n <!-- Sheet Tabs (one per sheet) -->\n @for (sheet of sheets(); track sheet.id; let i = $index) {\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-sheet-tab\"\n [class.active]=\"i === activeSheetIndex()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === activeSheetIndex()\"\n [attr.aria-label]=\"sheet.name\"\n [attr.tabindex]=\"i === activeSheetIndex() ? 0 : -1\"\n (click)=\"onTabChange(i)\"\n (keydown)=\"onSheetTabKeydown($event, i)\">\n <div class=\"sheet-tab-content\">\n <span class=\"sheet-name\">{{ sheet.name }}</span>\n\n <!-- Tab actions affordance. Rendered as a non-interactive, aria-hidden\n <span> (not a <button>) so it is NOT a nested interactive control\n inside the role=\"tab\" element \u2014 that nesting fails WCAG 4.1.2 /\n axe \"nested-interactive\" and confuses screen readers & keyboard\n focus order. Mouse users still click it; keyboard users open the\n same menu via Space on the focused tab (see onSheetTabKeydown),\n which is why the Tab handler already skips this element. -->\n @if (hasTabActions(sheet)) {\n <span class=\"tab-actions-button\"\n aria-hidden=\"true\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </span>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar \"Tab\" (for workbook controls). This is NOT a real tab \u2014 it's a\n disabled layout slot that hosts the workbook toolbar. NOTE: nile-tab force-sets\n role=\"tab\" on itself (setAttribute in its update cycle), so a role override here\n does NOT stick \u2014 the inner interactive buttons remain nested inside role=\"tab\"\n (axe \"nested-interactive\"). Fixing that requires a nile-elements (nile-tab)\n change or not using nile-tab for the toolbar. Tracked separately. -->\n <nile-tab slot=\"nav\"\n panel=\"shared-panel\"\n class=\"workbook-toolbar-tab\"\n [disabled]=\"true\">\n <div class=\"workbook-toolbar-content\" role=\"toolbar\" aria-label=\"Workbook toolbar\"\n (keydown)=\"onToolbarKeydown($event)\">\n\n <!-- Autosave Indicator \u2014 hidden unless `autosave.showIndicator: true` -->\n @if (autosaveIndicatorVisible()) {\n <div class=\"autosave-indicator\" aria-live=\"polite\" aria-atomic=\"true\">\n @if (!isSaving() && lastSaveTime()) {\n <nile-icon\n name=\"save\"\n size=\"14\"\n [title]=\"'Saved at ' + (lastSaveTime() | date:'HH:mm:ss')\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saved at {{ lastSaveTime() | date:'HH:mm:ss' }}</span>\n }\n @if (isSaving()) {\n <nile-icon\n name=\"loader\"\n size=\"14\"\n title=\"Saving...\"\n aria-hidden=\"true\">\n </nile-icon>\n <span class=\"sr-only\">Saving\u2026</span>\n }\n </div>\n }\n\n <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n @for (action of toolbarWorkbookActions(); track action.id) {\n <button class=\"toolbar-action-button\"\n type=\"button\"\n tabindex=\"-1\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n @if (!action.icon) {\n <span>{{ action.label }}</span>\n }\n </button>\n }\n\n <!-- Workbook Actions Dropdown -->\n @if (visibleWorkbookActions().length > 0) {\n <button class=\"workbook-actions-button\"\n type=\"button\"\n tabindex=\"-1\"\n title=\"Workbook Actions\"\n aria-label=\"Workbook actions\"\n [attr.aria-expanded]=\"workbookActionsOpen()\"\n aria-haspopup=\"true\"\n (click)=\"toggleWorkbookActions($event)\">\n <nile-icon name=\"settings\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Add Sheet Button -->\n @if (canAddSheet) {\n <button class=\"add-sheet-button\"\n type=\"button\"\n tabindex=\"-1\"\n title=\"Add Sheet\"\n aria-label=\"Add sheet\"\n (click)=\"onAddSheet()\">\n <nile-icon name=\"plus\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n\n <!-- Fullscreen Button -->\n @if (config().display?.allowFullscreen !== false) {\n <button class=\"fullscreen-button\"\n type=\"button\"\n tabindex=\"-1\"\n [title]=\"isFullscreen() ? 'Exit Fullscreen' : 'Fullscreen'\"\n [attr.aria-label]=\"isFullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'\"\n [attr.aria-pressed]=\"isFullscreen()\"\n (click)=\"toggleFullscreen()\">\n <nile-icon [name]=\"isFullscreen() ? 'collapse' : 'expand-06'\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n \n <!-- Single Shared Tab Panel -->\n <nile-tab-panel name=\"shared-panel\">\n <!-- Lazy loading strategy: content is destroyed and recreated with new config/state when sheet changes -->\n <!-- Using @for with track to force complete reinitialization when tableComponentKey changes -->\n @for (key of [tableComponentKey()]; track key) {\n @switch (activeSheetContentType) {\n @case ('condition-builder') {\n @if (activeSheet()?.conditionBuilder) {\n <st-condition-builder\n [attr.data-sheet-key]=\"key\"\n [config]=\"activeSheet()!.conditionBuilder!.config\"\n [value]=\"activeSheet()!.conditionBuilder!.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (currentTableConfig() && currentTableState()) {\n <st-table\n [attr.data-sheet-key]=\"key\"\n [tableConfig]=\"currentTableConfig()!\"\n [data$]=\"currentTableData$\"\n [tableState]=\"currentTableState()!\"\n (cellChange)=\"onCellChange($event)\"\n (cellSave)=\"onCellSave($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (requestAddRow)=\"onRequestAddRow($event)\"\n (requestFocusTabs)=\"onRequestFocusTabs()\">\n </st-table>\n }\n }\n }\n }\n </nile-tab-panel>\n \n </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n@if (tabActionsOpen()) {\n <div class=\"tab-actions-dropdown\" [ngStyle]=\"tabActionsPosition()\" (keydown)=\"onTabActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeTabActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" [attr.aria-label]=\"(selectedSheet()?.name || 'Sheet') + ' actions'\">\n <nile-menu>\n @for (action of selectedSheet()?.tabActions; track action.id) {\n <nile-menu-item tabindex=\"-1\" (click)=\"onTabActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Workbook Actions Dropdown -->\n@if (workbookActionsOpen()) {\n <div class=\"workbook-actions-dropdown\" [ngStyle]=\"workbookActionsPosition()\" (keydown)=\"onWorkbookActionsKeydown($event)\">\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closeWorkbookActions()\"></div>\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Workbook actions\">\n <nile-menu>\n @for (action of visibleWorkbookActions(); track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\"\n [attr.aria-disabled]=\"isActionDisabled(action)\"\n (click)=\"onWorkbookActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon slot=\"prefix\" size=\"14\" [name]=\"action.icon\" aria-hidden=\"true\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n\n<!-- Fullscreen Backdrop -->\n@if (isFullscreen()) {\n <div class=\"fullscreen-backdrop\" (click)=\"toggleFullscreen()\">\n </div>\n}\n", styles: [".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}:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:var(--ng-font-weight-medium);font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200);flex-shrink:0;position:sticky;right:0;z-index:3;align-self:stretch;background-color:#fafafa;box-shadow:-8px 0 12px -8px #0000001f}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:#00000080;z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0;flex-wrap:nowrap;width:max-content;min-width:100%;box-sizing:border-box}nile-tab-group nile-tab.workbook-sheet-tab{flex-shrink:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab.active .sheet-name{font-weight:var(--ng-font-weight-bold)}nile-tab-group nile-tab-panel::part(base){padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n"] }]
|
|
14682
14682
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sheetsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetsData", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], sheetChanged: [{ type: i0.Output, args: ["sheetChanged"] }], addSheet: [{ type: i0.Output, args: ["addSheet"] }], sheetTabAction: [{ type: i0.Output, args: ["sheetTabAction"] }], workbookAction: [{ type: i0.Output, args: ["workbookAction"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], tableStateChange: [{ type: i0.Output, args: ["tableStateChange"] }], fullscreenToggle: [{ type: i0.Output, args: ["fullscreenToggle"] }], requestAddRow: [{ type: i0.Output, args: ["requestAddRow"] }], conditionBuilderValueChange: [{ type: i0.Output, args: ["conditionBuilderValueChange"] }], conditionBuilderValidityChange: [{ type: i0.Output, args: ["conditionBuilderValidityChange"] }], tableComponent: [{
|
|
14683
14683
|
type: ViewChild,
|
|
14684
14684
|
args: [StTableComponent]
|