@aquera/ngx-smart-table 0.0.34 → 0.0.37
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.
|
@@ -3886,15 +3886,21 @@ function injectDropdownStyles() {
|
|
|
3886
3886
|
nile-select.st-cell-editor::part(combobox) {
|
|
3887
3887
|
background-color: transparent !important;
|
|
3888
3888
|
border: solid 1px transparent !important;
|
|
3889
|
+
/* Suppress nile-select's open-state blue inset ring (box-shadow: 0 0 0 1px
|
|
3890
|
+
border-brand inset) so it does not show a second border inside the table
|
|
3891
|
+
cell's own focus outline. */
|
|
3892
|
+
box-shadow: none !important;
|
|
3889
3893
|
margin: 0px !important;
|
|
3890
3894
|
max-height: 28px;
|
|
3891
3895
|
}
|
|
3892
3896
|
nile-select.st-cell-editor::part(combobox):hover {
|
|
3893
3897
|
border: solid 1px transparent !important;
|
|
3898
|
+
box-shadow: none !important;
|
|
3894
3899
|
}
|
|
3895
3900
|
.st-cell-editor::part(combobox) {
|
|
3896
3901
|
background-color: transparent !important;
|
|
3897
3902
|
border: solid 1px transparent !important;
|
|
3903
|
+
box-shadow: none !important;
|
|
3898
3904
|
margin: 0px !important;
|
|
3899
3905
|
max-height: 28px;
|
|
3900
3906
|
}
|
|
@@ -4473,6 +4479,29 @@ class NileSelectEditor {
|
|
|
4473
4479
|
};
|
|
4474
4480
|
this.select.addEventListener('keydown', keydownHandler);
|
|
4475
4481
|
this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
|
|
4482
|
+
// In multi-select mode the selected options render as removable chips inside the
|
|
4483
|
+
// combobox. Clicking a chip's cross button (a focusable nile-icon-button) steals focus
|
|
4484
|
+
// from whatever is currently focused (e.g. the dropdown search input). That blur flips
|
|
4485
|
+
// nile-select's reactive `searchFocused` state, which re-renders the combobox and
|
|
4486
|
+
// re-creates every nile-tag. The original cross button that received the `mousedown`
|
|
4487
|
+
// is detached before `mouseup`/`click`, so the click never fires on it and the chip is
|
|
4488
|
+
// not removed — requiring a second click. Preventing the mousedown default stops the
|
|
4489
|
+
// focus shift (and the blur/re-render), keeping the DOM stable so a single click works.
|
|
4490
|
+
if (this.options.multiple) {
|
|
4491
|
+
const tagRemoveMousedownHandler = (e) => {
|
|
4492
|
+
const mouseEvent = e;
|
|
4493
|
+
const isRemoveButton = mouseEvent.composedPath().some(el => el instanceof HTMLElement &&
|
|
4494
|
+
(el.classList?.contains('tag__remove') ||
|
|
4495
|
+
el.classList?.contains('cross_icon') ||
|
|
4496
|
+
el.getAttribute?.('part') === 'remove-button'));
|
|
4497
|
+
if (isRemoveButton) {
|
|
4498
|
+
// Keep current focus so nile-select does not re-render the tags mid-click.
|
|
4499
|
+
mouseEvent.preventDefault();
|
|
4500
|
+
}
|
|
4501
|
+
};
|
|
4502
|
+
this.select.addEventListener('mousedown', tagRemoveMousedownHandler, true);
|
|
4503
|
+
this.eventListeners.push({ event: 'mousedown', handler: tagRemoveMousedownHandler });
|
|
4504
|
+
}
|
|
4476
4505
|
const showHandler = () => {
|
|
4477
4506
|
this.dropdownOpen = true;
|
|
4478
4507
|
this.highlightedOptionIndex = -1;
|
|
@@ -5862,7 +5891,7 @@ function injectCodeEditorStyles() {
|
|
|
5862
5891
|
display: block;
|
|
5863
5892
|
padding: 6px 12px 4px;
|
|
5864
5893
|
font-size: 11px;
|
|
5865
|
-
font-weight:
|
|
5894
|
+
font-weight: var(--ng-font-weight-bold);
|
|
5866
5895
|
letter-spacing: 0.02em;
|
|
5867
5896
|
color: var(--nile-color-neutral-500);
|
|
5868
5897
|
text-transform: uppercase;
|
|
@@ -5901,11 +5930,11 @@ function injectCodeEditorStyles() {
|
|
|
5901
5930
|
.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel,
|
|
5902
5931
|
.cm-tooltip-autocomplete .cm-completionLabel {
|
|
5903
5932
|
flex: 0 1 auto;
|
|
5904
|
-
font-weight:
|
|
5933
|
+
font-weight: var(--ng-font-weight-medium);
|
|
5905
5934
|
}
|
|
5906
5935
|
.cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText,
|
|
5907
5936
|
.cm-tooltip-autocomplete .cm-completionMatchedText {
|
|
5908
|
-
font-weight:
|
|
5937
|
+
font-weight: var(--ng-font-weight-bold);
|
|
5909
5938
|
color: var(--nile-color-primary-600);
|
|
5910
5939
|
}
|
|
5911
5940
|
.cm-tooltip.cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionMatchedText,
|
|
@@ -8850,11 +8879,11 @@ class StHeaderComponent {
|
|
|
8850
8879
|
this.columnMoved.emit(moveEvent);
|
|
8851
8880
|
}
|
|
8852
8881
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick", tabOut: "tabOut", headerNavigate: "headerNavigate", menuKeyboard: "menuKeyboard" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\"\n tabindex=\"-1\"\n (keydown)=\"onHeaderKeyDown($event)\">\n <div class=\"header-content\">\n <span class=\"header-text\">{{ column.header || column.key }}</span>\n @if (isMenuEnabled()) {\n <button class=\"column-menu-trigger\"\n (click)=\"onMenuClick($event)\"\n (keydown)=\"onMenuTriggerKeyDown($event)\"\n type=\"button\"\n aria-label=\"Column actions\">\n <nile-icon name=\"options\"></nile-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:
|
|
8882
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StHeaderComponent, isStandalone: true, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick", tabOut: "tabOut", headerNavigate: "headerNavigate", menuKeyboard: "menuKeyboard" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\"\n tabindex=\"-1\"\n (keydown)=\"onHeaderKeyDown($event)\">\n <div class=\"header-content\">\n <span class=\"header-text\">{{ column.header || column.key }}</span>\n @if (isMenuEnabled()) {\n <button class=\"column-menu-trigger\"\n (click)=\"onMenuClick($event)\"\n (keydown)=\"onMenuTriggerKeyDown($event)\"\n type=\"button\"\n aria-label=\"Column actions\">\n <nile-icon name=\"options\"></nile-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:var(--ng-font-weight-medium);letter-spacing:.2px;line-height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .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-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
8854
8883
|
}
|
|
8855
8884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StHeaderComponent, decorators: [{
|
|
8856
8885
|
type: Component,
|
|
8857
|
-
args: [{ selector: 'st-header', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\"\n tabindex=\"-1\"\n (keydown)=\"onHeaderKeyDown($event)\">\n <div class=\"header-content\">\n <span class=\"header-text\">{{ column.header || column.key }}</span>\n @if (isMenuEnabled()) {\n <button class=\"column-menu-trigger\"\n (click)=\"onMenuClick($event)\"\n (keydown)=\"onMenuTriggerKeyDown($event)\"\n type=\"button\"\n aria-label=\"Column actions\">\n <nile-icon name=\"options\"></nile-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:
|
|
8886
|
+
args: [{ selector: 'st-header', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\"\n tabindex=\"-1\"\n (keydown)=\"onHeaderKeyDown($event)\">\n <div class=\"header-content\">\n <span class=\"header-text\">{{ column.header || column.key }}</span>\n @if (isMenuEnabled()) {\n <button class=\"column-menu-trigger\"\n (click)=\"onMenuClick($event)\"\n (keydown)=\"onMenuTriggerKeyDown($event)\"\n type=\"button\"\n aria-label=\"Column actions\">\n <nile-icon name=\"options\"></nile-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:var(--ng-font-weight-medium);letter-spacing:.2px;line-height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .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-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"] }]
|
|
8858
8887
|
}], propDecorators: { column: [{
|
|
8859
8888
|
type: Input
|
|
8860
8889
|
}], columnIndex: [{
|
|
@@ -9256,11 +9285,11 @@ class StColumnFilterComponent {
|
|
|
9256
9285
|
return this.columnIndex <= 1;
|
|
9257
9286
|
}
|
|
9258
9287
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n <!-- Operator Select -->\n @if (availableOperators.length > 1) {\n <nile-select \n label=\"Operator\"\n [value]=\"selectedOperator\"\n (nile-change)=\"onOperatorChange($event)\"\n class=\"filter-operator\">\n @for (op of availableOperators; track op.value) {\n <nile-option [value]=\"op.value\">\n {{ op.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Input Field based on type -->\n <div class=\"filter-value-section\">\n \n <!-- Text Input -->\n @if (inputType === 'text') {\n <nile-input \n type=\"text\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter value...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Number Input -->\n @if (inputType === 'number') {\n <nile-input \n type=\"number\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter number...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Date Input -->\n @if (inputType === 'date') {\n <nile-input \n type=\"date\"\n label=\"Value\"\n [value]=\"filterValue\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Checkbox Input -->\n @if (inputType === 'checkbox') {\n <nile-checkbox\n [checked]=\"filterValue\"\n (nile-change)=\"onCheckboxChange($event)\"\n class=\"filter-checkbox\">\n {{ filterValue ? 'True' : 'False' }}\n </nile-checkbox>\n }\n \n <!-- Single Select Dropdown -->\n @if (inputType === 'select') {\n <nile-select \n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"-- Select --\"\n (nile-change)=\"onSelectChange($event)\"\n class=\"filter-value-select\">\n @for (option of dropdownOptions; track option.value) {\n <nile-option [value]=\"option.value\">\n {{ option.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n @if (inputType === 'multiselect') {\n <div class=\"filter-multiselect\">\n <label class=\"multiselect-title\">Select Values</label>\n <div class=\"multiselect-options\">\n @for (option of dropdownOptions; track option.value) {\n <nile-checkbox\n [checked]=\"isValueSelected(option.value)\"\n [value]=\"option.value\"\n (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n class=\"multiselect-checkbox\">\n {{ option.label }}\n </nile-checkbox>\n }\n </div>\n @if (dropdownOptions.length === 0) {\n <div class=\"empty-state\">\n No options available\n </div>\n }\n </div>\n }\n </div>\n \n <!-- Action Buttons -->\n <div class=\"filter-actions\">\n <nile-button \n variant=\"primary\"\n size=\"small\"\n (click)=\"onApply()\">\n Apply\n </nile-button>\n <nile-button \n variant=\"default\"\n size=\"small\"\n (click)=\"onClear()\">\n Clear\n </nile-button>\n </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:
|
|
9288
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StColumnFilterComponent, isStandalone: true, selector: "st-column-filter", inputs: { column: "column", tableState: "tableState", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", isOpen: "isOpen", filterContext: "filterContext" }, outputs: { closed: "closed", filterApplied: "filterApplied", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "filterAnchor", first: true, predicate: ["filterAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Popover content -->\n<div class=\"filter-content\">\n <!-- Operator Select -->\n @if (availableOperators.length > 1) {\n <nile-select \n label=\"Operator\"\n [value]=\"selectedOperator\"\n (nile-change)=\"onOperatorChange($event)\"\n class=\"filter-operator\">\n @for (op of availableOperators; track op.value) {\n <nile-option [value]=\"op.value\">\n {{ op.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Input Field based on type -->\n <div class=\"filter-value-section\">\n \n <!-- Text Input -->\n @if (inputType === 'text') {\n <nile-input \n type=\"text\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter value...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Number Input -->\n @if (inputType === 'number') {\n <nile-input \n type=\"number\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter number...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Date Input -->\n @if (inputType === 'date') {\n <nile-input \n type=\"date\"\n label=\"Value\"\n [value]=\"filterValue\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Checkbox Input -->\n @if (inputType === 'checkbox') {\n <nile-checkbox\n [checked]=\"filterValue\"\n (nile-change)=\"onCheckboxChange($event)\"\n class=\"filter-checkbox\">\n {{ filterValue ? 'True' : 'False' }}\n </nile-checkbox>\n }\n \n <!-- Single Select Dropdown -->\n @if (inputType === 'select') {\n <nile-select \n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"-- Select --\"\n (nile-change)=\"onSelectChange($event)\"\n class=\"filter-value-select\">\n @for (option of dropdownOptions; track option.value) {\n <nile-option [value]=\"option.value\">\n {{ option.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n @if (inputType === 'multiselect') {\n <div class=\"filter-multiselect\">\n <label class=\"multiselect-title\">Select Values</label>\n <div class=\"multiselect-options\">\n @for (option of dropdownOptions; track option.value) {\n <nile-checkbox\n [checked]=\"isValueSelected(option.value)\"\n [value]=\"option.value\"\n (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n class=\"multiselect-checkbox\">\n {{ option.label }}\n </nile-checkbox>\n }\n </div>\n @if (dropdownOptions.length === 0) {\n <div class=\"empty-state\">\n No options available\n </div>\n }\n </div>\n }\n </div>\n \n <!-- Action Buttons -->\n <div class=\"filter-actions\">\n <nile-button \n variant=\"primary\"\n size=\"small\"\n (click)=\"onApply()\">\n Apply\n </nile-button>\n <nile-button \n variant=\"default\"\n size=\"small\"\n (click)=\"onClear()\">\n Clear\n </nile-button>\n </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:var(--ng-font-weight-bold);color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
9260
9289
|
}
|
|
9261
9290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnFilterComponent, decorators: [{
|
|
9262
9291
|
type: Component,
|
|
9263
|
-
args: [{ selector: 'st-column-filter', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Popover content -->\n<div class=\"filter-content\">\n <!-- Operator Select -->\n @if (availableOperators.length > 1) {\n <nile-select \n label=\"Operator\"\n [value]=\"selectedOperator\"\n (nile-change)=\"onOperatorChange($event)\"\n class=\"filter-operator\">\n @for (op of availableOperators; track op.value) {\n <nile-option [value]=\"op.value\">\n {{ op.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Input Field based on type -->\n <div class=\"filter-value-section\">\n \n <!-- Text Input -->\n @if (inputType === 'text') {\n <nile-input \n type=\"text\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter value...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Number Input -->\n @if (inputType === 'number') {\n <nile-input \n type=\"number\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter number...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Date Input -->\n @if (inputType === 'date') {\n <nile-input \n type=\"date\"\n label=\"Value\"\n [value]=\"filterValue\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Checkbox Input -->\n @if (inputType === 'checkbox') {\n <nile-checkbox\n [checked]=\"filterValue\"\n (nile-change)=\"onCheckboxChange($event)\"\n class=\"filter-checkbox\">\n {{ filterValue ? 'True' : 'False' }}\n </nile-checkbox>\n }\n \n <!-- Single Select Dropdown -->\n @if (inputType === 'select') {\n <nile-select \n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"-- Select --\"\n (nile-change)=\"onSelectChange($event)\"\n class=\"filter-value-select\">\n @for (option of dropdownOptions; track option.value) {\n <nile-option [value]=\"option.value\">\n {{ option.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n @if (inputType === 'multiselect') {\n <div class=\"filter-multiselect\">\n <label class=\"multiselect-title\">Select Values</label>\n <div class=\"multiselect-options\">\n @for (option of dropdownOptions; track option.value) {\n <nile-checkbox\n [checked]=\"isValueSelected(option.value)\"\n [value]=\"option.value\"\n (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n class=\"multiselect-checkbox\">\n {{ option.label }}\n </nile-checkbox>\n }\n </div>\n @if (dropdownOptions.length === 0) {\n <div class=\"empty-state\">\n No options available\n </div>\n }\n </div>\n }\n </div>\n \n <!-- Action Buttons -->\n <div class=\"filter-actions\">\n <nile-button \n variant=\"primary\"\n size=\"small\"\n (click)=\"onApply()\">\n Apply\n </nile-button>\n <nile-button \n variant=\"default\"\n size=\"small\"\n (click)=\"onClear()\">\n Clear\n </nile-button>\n </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:
|
|
9292
|
+
args: [{ selector: 'st-column-filter', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Popover content -->\n<div class=\"filter-content\">\n <!-- Operator Select -->\n @if (availableOperators.length > 1) {\n <nile-select \n label=\"Operator\"\n [value]=\"selectedOperator\"\n (nile-change)=\"onOperatorChange($event)\"\n class=\"filter-operator\">\n @for (op of availableOperators; track op.value) {\n <nile-option [value]=\"op.value\">\n {{ op.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Input Field based on type -->\n <div class=\"filter-value-section\">\n \n <!-- Text Input -->\n @if (inputType === 'text') {\n <nile-input \n type=\"text\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter value...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Number Input -->\n @if (inputType === 'number') {\n <nile-input \n type=\"number\"\n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"Enter number...\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Date Input -->\n @if (inputType === 'date') {\n <nile-input \n type=\"date\"\n label=\"Value\"\n [value]=\"filterValue\"\n (nile-input)=\"onValueInput($event)\"\n class=\"filter-value-input\">\n </nile-input>\n }\n \n <!-- Checkbox Input -->\n @if (inputType === 'checkbox') {\n <nile-checkbox\n [checked]=\"filterValue\"\n (nile-change)=\"onCheckboxChange($event)\"\n class=\"filter-checkbox\">\n {{ filterValue ? 'True' : 'False' }}\n </nile-checkbox>\n }\n \n <!-- Single Select Dropdown -->\n @if (inputType === 'select') {\n <nile-select \n label=\"Value\"\n [value]=\"filterValue\"\n placeholder=\"-- Select --\"\n (nile-change)=\"onSelectChange($event)\"\n class=\"filter-value-select\">\n @for (option of dropdownOptions; track option.value) {\n <nile-option [value]=\"option.value\">\n {{ option.label }}\n </nile-option>\n }\n </nile-select>\n }\n \n <!-- Multi-Select with Radio Group as example (or keep checkboxes) -->\n @if (inputType === 'multiselect') {\n <div class=\"filter-multiselect\">\n <label class=\"multiselect-title\">Select Values</label>\n <div class=\"multiselect-options\">\n @for (option of dropdownOptions; track option.value) {\n <nile-checkbox\n [checked]=\"isValueSelected(option.value)\"\n [value]=\"option.value\"\n (nile-change)=\"onMultiselectCheckboxChange($event, option.value)\"\n class=\"multiselect-checkbox\">\n {{ option.label }}\n </nile-checkbox>\n }\n </div>\n @if (dropdownOptions.length === 0) {\n <div class=\"empty-state\">\n No options available\n </div>\n }\n </div>\n }\n </div>\n \n <!-- Action Buttons -->\n <div class=\"filter-actions\">\n <nile-button \n variant=\"primary\"\n size=\"small\"\n (click)=\"onApply()\">\n Apply\n </nile-button>\n <nile-button \n variant=\"default\"\n size=\"small\"\n (click)=\"onClear()\">\n Clear\n </nile-button>\n </div>\n</div>\n", styles: [".filter-content{padding:16px;display:flex;flex-direction:column;gap:16px}.filter-content nile-select,.filter-content nile-input,.filter-content nile-checkbox{width:100%}.filter-content .filter-operator,.filter-content .filter-value-input,.filter-content .filter-value-select{margin-bottom:0}.filter-value-section{display:flex;flex-direction:column;gap:12px}.filter-value-section nile-checkbox{margin-top:8px}.filter-multiselect{display:flex;flex-direction:column;gap:8px}.filter-multiselect .multiselect-title{display:block;font-size:13px;font-weight:var(--ng-font-weight-bold);color:#2d3748;margin-bottom:8px}.filter-multiselect .multiselect-options{max-height:200px;overflow-y:auto;border:1px solid #cbd5e0;border-radius:4px;padding:8px;background-color:#f7fafc;display:flex;flex-direction:column;gap:6px}.filter-multiselect .multiselect-options nile-checkbox{width:100%}.filter-multiselect .multiselect-options nile-checkbox::part(base){padding:4px 8px;border-radius:4px;transition:background-color .15s}.filter-multiselect .multiselect-options nile-checkbox:hover::part(base){background-color:#edf2f7}.filter-multiselect .empty-state{padding:12px;text-align:center;color:#718096;font-size:13px}.filter-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #e2e8f0;margin-top:4px}.filter-actions nile-button{flex:0 0 auto}.multiselect-options::-webkit-scrollbar{width:6px}.multiselect-options::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.multiselect-options::-webkit-scrollbar-thumb:hover{background:#a0aec0}nile-input::part(base){width:100%}nile-select::part(base){width:100%}nile-button::part(base){min-width:80px}\n"] }]
|
|
9264
9293
|
}], propDecorators: { filterAnchor: [{
|
|
9265
9294
|
type: ViewChild,
|
|
9266
9295
|
args: ['filterAnchor', { static: false }]
|
|
@@ -10199,11 +10228,11 @@ class ColumnEditorComponent {
|
|
|
10199
10228
|
return !!(control && control.invalid && (control.dirty || control.touched));
|
|
10200
10229
|
}
|
|
10201
10230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n <div class=\"editor-header\">\n <h3>Column Editor</h3>\n <div class=\"editor-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n </div>\n </div>\n\n <form [formGroup]=\"form\" class=\"editor-form\">\n <!-- Basic Properties -->\n <div class=\"form-section\">\n <h4>Basic Properties</h4>\n <div class=\"form-group\">\n <label for=\"key\">Key *</label>\n <input\n id=\"key\"\n type=\"text\"\n formControlName=\"key\"\n class=\"form-control\"\n [class.error]=\"hasError('key')\"\n placeholder=\"columnKey\">\n @if (hasError('key')) {\n <span class=\"error-message\">\n {{ getErrorMessage('key') }}\n </span>\n }\n </div>\n\n <div class=\"form-group\">\n <label for=\"header\">Header</label>\n <input\n id=\"header\"\n type=\"text\"\n formControlName=\"header\"\n class=\"form-control\"\n placeholder=\"Column Header\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"dataType\">Data Type</label>\n <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n @for (type of dataTypes; track type.value) {\n <option [value]=\"type.value\">\n {{ type.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Features -->\n <div class=\"form-section\">\n <h4>Features</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"editable\">\n <span>Editable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"sortable\">\n <span>Sortable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"filterable\">\n <span>Filterable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"resizable\">\n <span>Resizable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"hideable\">\n <span>Hideable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"movable\">\n <span>Movable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"pinnable\">\n <span>Pinnable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enableMenu\">\n <span>Enable Menu</span>\n </label>\n </div>\n </div>\n\n <!-- Layout -->\n <div class=\"form-section\">\n <h4>Layout</h4>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"width\">Width</label>\n <input\n id=\"width\"\n type=\"text\"\n formControlName=\"width\"\n class=\"form-control\"\n placeholder=\"150 or 'auto'\">\n </div>\n <div class=\"form-group\">\n <label for=\"minWidth\">Min Width</label>\n <input\n id=\"minWidth\"\n type=\"number\"\n formControlName=\"minWidth\"\n class=\"form-control\"\n placeholder=\"50\">\n </div>\n <div class=\"form-group\">\n <label for=\"maxWidth\">Max Width</label>\n <input\n id=\"maxWidth\"\n type=\"number\"\n formControlName=\"maxWidth\"\n class=\"form-control\"\n placeholder=\"500\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"sticky\">Sticky</label>\n <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n @for (option of stickyOptions; track option.value) {\n <option [value]=\"option.value\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"alignment\">Alignment</label>\n <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n @for (align of alignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"verticalAlignment\">Vertical Alignment</label>\n <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n @for (align of verticalAlignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n </div>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"form-section\">\n <h4>Edit Mode</h4>\n <div class=\"form-group\">\n <label for=\"editMode\">Edit Trigger</label>\n <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n @for (mode of editModes; track mode.value) {\n <option [value]=\"mode.value\">\n {{ mode.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"form-section\">\n <h4>Display</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n <input type=\"checkbox\" \n formControlName=\"visible\"\n [disabled]=\"!form.get('hideable')?.value\"\n [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n <span>Visible</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"truncate\">\n <span>Truncate Text</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
10231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColumnEditorComponent, isStandalone: true, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n <div class=\"editor-header\">\n <h3>Column Editor</h3>\n <div class=\"editor-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n </div>\n </div>\n\n <form [formGroup]=\"form\" class=\"editor-form\">\n <!-- Basic Properties -->\n <div class=\"form-section\">\n <h4>Basic Properties</h4>\n <div class=\"form-group\">\n <label for=\"key\">Key *</label>\n <input\n id=\"key\"\n type=\"text\"\n formControlName=\"key\"\n class=\"form-control\"\n [class.error]=\"hasError('key')\"\n placeholder=\"columnKey\">\n @if (hasError('key')) {\n <span class=\"error-message\">\n {{ getErrorMessage('key') }}\n </span>\n }\n </div>\n\n <div class=\"form-group\">\n <label for=\"header\">Header</label>\n <input\n id=\"header\"\n type=\"text\"\n formControlName=\"header\"\n class=\"form-control\"\n placeholder=\"Column Header\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"dataType\">Data Type</label>\n <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n @for (type of dataTypes; track type.value) {\n <option [value]=\"type.value\">\n {{ type.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Features -->\n <div class=\"form-section\">\n <h4>Features</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"editable\">\n <span>Editable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"sortable\">\n <span>Sortable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"filterable\">\n <span>Filterable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"resizable\">\n <span>Resizable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"hideable\">\n <span>Hideable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"movable\">\n <span>Movable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"pinnable\">\n <span>Pinnable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enableMenu\">\n <span>Enable Menu</span>\n </label>\n </div>\n </div>\n\n <!-- Layout -->\n <div class=\"form-section\">\n <h4>Layout</h4>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"width\">Width</label>\n <input\n id=\"width\"\n type=\"text\"\n formControlName=\"width\"\n class=\"form-control\"\n placeholder=\"150 or 'auto'\">\n </div>\n <div class=\"form-group\">\n <label for=\"minWidth\">Min Width</label>\n <input\n id=\"minWidth\"\n type=\"number\"\n formControlName=\"minWidth\"\n class=\"form-control\"\n placeholder=\"50\">\n </div>\n <div class=\"form-group\">\n <label for=\"maxWidth\">Max Width</label>\n <input\n id=\"maxWidth\"\n type=\"number\"\n formControlName=\"maxWidth\"\n class=\"form-control\"\n placeholder=\"500\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"sticky\">Sticky</label>\n <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n @for (option of stickyOptions; track option.value) {\n <option [value]=\"option.value\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"alignment\">Alignment</label>\n <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n @for (align of alignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"verticalAlignment\">Vertical Alignment</label>\n <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n @for (align of verticalAlignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n </div>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"form-section\">\n <h4>Edit Mode</h4>\n <div class=\"form-group\">\n <label for=\"editMode\">Edit Trigger</label>\n <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n @for (mode of editModes; track mode.value) {\n <option [value]=\"mode.value\">\n {{ mode.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"form-section\">\n <h4>Display</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n <input type=\"checkbox\" \n formControlName=\"visible\"\n [disabled]=\"!form.get('hideable')?.value\"\n [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n <span>Visible</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"truncate\">\n <span>Truncate Text</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:var(--ng-font-weight-bold);color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:var(--ng-font-weight-bold);color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:var(--ng-font-weight-medium);color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
10203
10232
|
}
|
|
10204
10233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnEditorComponent, decorators: [{
|
|
10205
10234
|
type: Component,
|
|
10206
|
-
args: [{ selector: 'st-column-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-editor\">\n <div class=\"editor-header\">\n <h3>Column Editor</h3>\n <div class=\"editor-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n </div>\n </div>\n\n <form [formGroup]=\"form\" class=\"editor-form\">\n <!-- Basic Properties -->\n <div class=\"form-section\">\n <h4>Basic Properties</h4>\n <div class=\"form-group\">\n <label for=\"key\">Key *</label>\n <input\n id=\"key\"\n type=\"text\"\n formControlName=\"key\"\n class=\"form-control\"\n [class.error]=\"hasError('key')\"\n placeholder=\"columnKey\">\n @if (hasError('key')) {\n <span class=\"error-message\">\n {{ getErrorMessage('key') }}\n </span>\n }\n </div>\n\n <div class=\"form-group\">\n <label for=\"header\">Header</label>\n <input\n id=\"header\"\n type=\"text\"\n formControlName=\"header\"\n class=\"form-control\"\n placeholder=\"Column Header\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"dataType\">Data Type</label>\n <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n @for (type of dataTypes; track type.value) {\n <option [value]=\"type.value\">\n {{ type.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Features -->\n <div class=\"form-section\">\n <h4>Features</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"editable\">\n <span>Editable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"sortable\">\n <span>Sortable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"filterable\">\n <span>Filterable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"resizable\">\n <span>Resizable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"hideable\">\n <span>Hideable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"movable\">\n <span>Movable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"pinnable\">\n <span>Pinnable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enableMenu\">\n <span>Enable Menu</span>\n </label>\n </div>\n </div>\n\n <!-- Layout -->\n <div class=\"form-section\">\n <h4>Layout</h4>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"width\">Width</label>\n <input\n id=\"width\"\n type=\"text\"\n formControlName=\"width\"\n class=\"form-control\"\n placeholder=\"150 or 'auto'\">\n </div>\n <div class=\"form-group\">\n <label for=\"minWidth\">Min Width</label>\n <input\n id=\"minWidth\"\n type=\"number\"\n formControlName=\"minWidth\"\n class=\"form-control\"\n placeholder=\"50\">\n </div>\n <div class=\"form-group\">\n <label for=\"maxWidth\">Max Width</label>\n <input\n id=\"maxWidth\"\n type=\"number\"\n formControlName=\"maxWidth\"\n class=\"form-control\"\n placeholder=\"500\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"sticky\">Sticky</label>\n <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n @for (option of stickyOptions; track option.value) {\n <option [value]=\"option.value\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"alignment\">Alignment</label>\n <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n @for (align of alignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"verticalAlignment\">Vertical Alignment</label>\n <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n @for (align of verticalAlignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n </div>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"form-section\">\n <h4>Edit Mode</h4>\n <div class=\"form-group\">\n <label for=\"editMode\">Edit Trigger</label>\n <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n @for (mode of editModes; track mode.value) {\n <option [value]=\"mode.value\">\n {{ mode.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"form-section\">\n <h4>Display</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n <input type=\"checkbox\" \n formControlName=\"visible\"\n [disabled]=\"!form.get('hideable')?.value\"\n [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n <span>Visible</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"truncate\">\n <span>Truncate Text</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:
|
|
10235
|
+
args: [{ selector: 'st-column-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-editor\">\n <div class=\"editor-header\">\n <h3>Column Editor</h3>\n <div class=\"editor-actions\">\n <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n </div>\n </div>\n\n <form [formGroup]=\"form\" class=\"editor-form\">\n <!-- Basic Properties -->\n <div class=\"form-section\">\n <h4>Basic Properties</h4>\n <div class=\"form-group\">\n <label for=\"key\">Key *</label>\n <input\n id=\"key\"\n type=\"text\"\n formControlName=\"key\"\n class=\"form-control\"\n [class.error]=\"hasError('key')\"\n placeholder=\"columnKey\">\n @if (hasError('key')) {\n <span class=\"error-message\">\n {{ getErrorMessage('key') }}\n </span>\n }\n </div>\n\n <div class=\"form-group\">\n <label for=\"header\">Header</label>\n <input\n id=\"header\"\n type=\"text\"\n formControlName=\"header\"\n class=\"form-control\"\n placeholder=\"Column Header\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"dataType\">Data Type</label>\n <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n @for (type of dataTypes; track type.value) {\n <option [value]=\"type.value\">\n {{ type.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Features -->\n <div class=\"form-section\">\n <h4>Features</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"editable\">\n <span>Editable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"sortable\">\n <span>Sortable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"filterable\">\n <span>Filterable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"resizable\">\n <span>Resizable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"hideable\">\n <span>Hideable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"movable\">\n <span>Movable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"pinnable\">\n <span>Pinnable</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enableMenu\">\n <span>Enable Menu</span>\n </label>\n </div>\n </div>\n\n <!-- Layout -->\n <div class=\"form-section\">\n <h4>Layout</h4>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"width\">Width</label>\n <input\n id=\"width\"\n type=\"text\"\n formControlName=\"width\"\n class=\"form-control\"\n placeholder=\"150 or 'auto'\">\n </div>\n <div class=\"form-group\">\n <label for=\"minWidth\">Min Width</label>\n <input\n id=\"minWidth\"\n type=\"number\"\n formControlName=\"minWidth\"\n class=\"form-control\"\n placeholder=\"50\">\n </div>\n <div class=\"form-group\">\n <label for=\"maxWidth\">Max Width</label>\n <input\n id=\"maxWidth\"\n type=\"number\"\n formControlName=\"maxWidth\"\n class=\"form-control\"\n placeholder=\"500\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"sticky\">Sticky</label>\n <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n @for (option of stickyOptions; track option.value) {\n <option [value]=\"option.value\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"alignment\">Alignment</label>\n <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n @for (align of alignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"verticalAlignment\">Vertical Alignment</label>\n <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n @for (align of verticalAlignments; track align.value) {\n <option [value]=\"align.value\">\n {{ align.label }}\n </option>\n }\n </select>\n </div>\n </div>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"form-section\">\n <h4>Edit Mode</h4>\n <div class=\"form-group\">\n <label for=\"editMode\">Edit Trigger</label>\n <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n @for (mode of editModes; track mode.value) {\n <option [value]=\"mode.value\">\n {{ mode.label }}\n </option>\n }\n </select>\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"form-section\">\n <h4>Display</h4>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n <input type=\"checkbox\" \n formControlName=\"visible\"\n [disabled]=\"!form.get('hideable')?.value\"\n [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n <span>Visible</span>\n </label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"truncate\">\n <span>Truncate Text</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:var(--ng-font-weight-bold);color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:var(--ng-font-weight-bold);color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:var(--ng-font-weight-medium);color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"] }]
|
|
10207
10236
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { column: [{
|
|
10208
10237
|
type: Input
|
|
10209
10238
|
}], columnIndex: [{
|
|
@@ -10297,11 +10326,11 @@ class StColumnEditorModalComponent {
|
|
|
10297
10326
|
event.stopPropagation();
|
|
10298
10327
|
}
|
|
10299
10328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n <div class=\"modal-header\">\n <h2>Add New Column</h2>\n <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n <st-column-editor\n [column]=\"newColumn\"\n [columnIndex]=\"columnIndex\"\n (columnUpdated)=\"onColumnUpdated($event)\"\n (cancel)=\"onCancel()\">\n </st-column-editor>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n </div>\n </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:
|
|
10329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: StColumnEditorModalComponent, isStandalone: true, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n <div class=\"modal-header\">\n <h2>Add New Column</h2>\n <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n <st-column-editor\n [column]=\"newColumn\"\n [columnIndex]=\"columnIndex\"\n (columnUpdated)=\"onColumnUpdated($event)\"\n (cancel)=\"onCancel()\">\n </st-column-editor>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n </div>\n </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:var(--ng-font-weight-medium);color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:var(--ng-font-weight-medium);cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] }); }
|
|
10301
10330
|
}
|
|
10302
10331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
|
|
10303
10332
|
type: Component,
|
|
10304
|
-
args: [{ selector: 'st-column-editor-modal', standalone: true, imports: [CommonModule, ColumnEditorComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n <div class=\"modal-header\">\n <h2>Add New Column</h2>\n <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n <st-column-editor\n [column]=\"newColumn\"\n [columnIndex]=\"columnIndex\"\n (columnUpdated)=\"onColumnUpdated($event)\"\n (cancel)=\"onCancel()\">\n </st-column-editor>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n </div>\n </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:
|
|
10333
|
+
args: [{ selector: 'st-column-editor-modal', standalone: true, imports: [CommonModule, ColumnEditorComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n <div class=\"modal-header\">\n <h2>Add New Column</h2>\n <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n <st-column-editor\n [column]=\"newColumn\"\n [columnIndex]=\"columnIndex\"\n (columnUpdated)=\"onColumnUpdated($event)\"\n (cancel)=\"onCancel()\">\n </st-column-editor>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n </div>\n </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:#fff;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:var(--ng-font-weight-medium);color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:var(--ng-font-weight-medium);cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
10305
10334
|
}], propDecorators: { columnCreated: [{
|
|
10306
10335
|
type: Output
|
|
10307
10336
|
}], cancelled: [{
|
|
@@ -10339,6 +10368,7 @@ class StTableComponent {
|
|
|
10339
10368
|
this.columnResized = output();
|
|
10340
10369
|
this.columnMoved = output();
|
|
10341
10370
|
this.configValidationErrors = output();
|
|
10371
|
+
this.addColumnClicked = output();
|
|
10342
10372
|
this.columnAdded = output();
|
|
10343
10373
|
this.rowAction = output();
|
|
10344
10374
|
this.validationStateChange = output();
|
|
@@ -10875,6 +10905,7 @@ class StTableComponent {
|
|
|
10875
10905
|
}
|
|
10876
10906
|
}
|
|
10877
10907
|
onAddColumnClick() {
|
|
10908
|
+
this.addColumnClicked.emit();
|
|
10878
10909
|
this.showColumnModal.set(true);
|
|
10879
10910
|
}
|
|
10880
10911
|
onTableActionsButtonClick(position) {
|
|
@@ -11951,7 +11982,7 @@ class StTableComponent {
|
|
|
11951
11982
|
this.internalData$.complete();
|
|
11952
11983
|
}
|
|
11953
11984
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11954
|
-
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", 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 [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 (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:600;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:600;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"], 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" }] }); }
|
|
11985
|
+
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 [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 (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"], 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" }] }); }
|
|
11955
11986
|
}
|
|
11956
11987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableComponent, decorators: [{
|
|
11957
11988
|
type: Component,
|
|
@@ -11966,8 +11997,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11966
11997
|
StKeyboardNavigationDirective,
|
|
11967
11998
|
StColumnResizeDirective,
|
|
11968
11999
|
StColumnEditorModalComponent
|
|
11969
|
-
], 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 [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 (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:600;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:600;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"] }]
|
|
11970
|
-
}], 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"] }], 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: [{
|
|
12000
|
+
], 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 [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 (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"] }]
|
|
12001
|
+
}], 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: [{
|
|
11971
12002
|
type: ViewChild,
|
|
11972
12003
|
args: ['scrollViewport', { read: ElementRef }]
|
|
11973
12004
|
}], onDocumentClick: [{
|
|
@@ -12059,11 +12090,11 @@ class StColumnVisibilityComponent {
|
|
|
12059
12090
|
return column ? (column.visible !== false) : true;
|
|
12060
12091
|
}
|
|
12061
12092
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12062
|
-
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:
|
|
12093
|
+
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 }] }); }
|
|
12063
12094
|
}
|
|
12064
12095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
|
|
12065
12096
|
type: Component,
|
|
12066
|
-
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:
|
|
12097
|
+
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"] }]
|
|
12067
12098
|
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
12068
12099
|
type: Input
|
|
12069
12100
|
}] } });
|
|
@@ -12217,7 +12248,7 @@ function injectPortalKbHighlightStyles() {
|
|
|
12217
12248
|
style.textContent = `
|
|
12218
12249
|
.nile-select-portal-append nile-option[data-kb-active],
|
|
12219
12250
|
.nile-virtual-select-portal-append nile-option[data-kb-active] {
|
|
12220
|
-
outline: 2px solid var(--
|
|
12251
|
+
outline: 2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);
|
|
12221
12252
|
outline-offset: -2px;
|
|
12222
12253
|
background-color: var(--nile-colors-primary-50, #e6f1f8) !important;
|
|
12223
12254
|
}
|
|
@@ -12589,11 +12620,11 @@ class StConditionValueEditorComponent {
|
|
|
12589
12620
|
this.dropdownOpen = false;
|
|
12590
12621
|
}
|
|
12591
12622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionValueEditorComponent, isStandalone: true, selector: "st-condition-value-editor", inputs: { field: "field", operator: "operator", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.is-chip-mode": "this.isChipMode" } }, ngImport: i0, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--nile-colors-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--nile-colors-primary-600, #005ea6);font-weight:500}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;overflow:hidden;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-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::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-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionValueEditorComponent, isStandalone: true, selector: "st-condition-value-editor", inputs: { field: "field", operator: "operator", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.is-chip-mode": "this.isChipMode" } }, ngImport: i0, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;overflow:hidden;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-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::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-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12593
12624
|
}
|
|
12594
12625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, decorators: [{
|
|
12595
12626
|
type: Component,
|
|
12596
|
-
args: [{ selector: 'st-condition-value-editor', standalone: true, imports: [CommonModule, FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--nile-colors-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--nile-colors-primary-600, #005ea6);font-weight:500}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;overflow:hidden;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-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::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-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::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}\n"] }]
|
|
12627
|
+
args: [{ selector: 'st-condition-value-editor', standalone: true, imports: [CommonModule, FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of field.options; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);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:100%;overflow:hidden;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-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::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-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::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}\n"] }]
|
|
12597
12628
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
12598
12629
|
type: Input
|
|
12599
12630
|
}], operator: [{
|
|
@@ -12679,11 +12710,11 @@ class StConditionFieldPickerComponent {
|
|
|
12679
12710
|
el?.hide?.();
|
|
12680
12711
|
}
|
|
12681
12712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionFieldPickerComponent, isStandalone: true, selector: "st-condition-field-picker", inputs: { value: "value", fields: "fields", categories: "categories", disabled: "disabled", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }], ngImport: i0, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-field-picker__trigger\"\n [class.is-placeholder]=\"!value\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-haspopup=\"menu\">\n <nile-tooltip\n class=\"st-condition-field-picker__tooltip\"\n [content]=\"displayLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n </nile-tooltip>\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n </button>\n\n <nile-menu>\n\n @for (f of fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n\n @for (cat of categories; track trackByCategoryId($index, cat)) {\n <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n aria-haspopup=\"menu\"\n [attr.aria-label]=\"cat.label + ', opens submenu'\">\n <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n {{ cat.label }}\n <nile-icon name=\"arrowright\"\n size=\"14\"\n class=\"st-condition-field-picker__category-chevron\"\n aria-hidden=\"true\">\n </nile-icon>\n </span>\n <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n @for (f of cat.fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n </nile-menu>\n </nile-dropdown>\n </nile-menu-item>\n }\n\n </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--
|
|
12713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionFieldPickerComponent, isStandalone: true, selector: "st-condition-field-picker", inputs: { value: "value", fields: "fields", categories: "categories", disabled: "disabled", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }], ngImport: i0, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-field-picker__trigger\"\n [class.is-placeholder]=\"!value\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-haspopup=\"menu\">\n <nile-tooltip\n class=\"st-condition-field-picker__tooltip\"\n [content]=\"displayLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n </nile-tooltip>\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n </button>\n\n <nile-menu>\n\n @for (f of fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n\n @for (cat of categories; track trackByCategoryId($index, cat)) {\n <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n aria-haspopup=\"menu\"\n [attr.aria-label]=\"cat.label + ', opens submenu'\">\n <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n {{ cat.label }}\n <nile-icon name=\"arrowright\"\n size=\"14\"\n class=\"st-condition-field-picker__category-chevron\"\n aria-hidden=\"true\">\n </nile-icon>\n </span>\n <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n @for (f of cat.fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n </nile-menu>\n </nile-dropdown>\n </nile-menu-item>\n }\n\n </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12683
12714
|
}
|
|
12684
12715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, decorators: [{
|
|
12685
12716
|
type: Component,
|
|
12686
|
-
args: [{ selector: 'st-condition-field-picker', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-field-picker__trigger\"\n [class.is-placeholder]=\"!value\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-haspopup=\"menu\">\n <nile-tooltip\n class=\"st-condition-field-picker__tooltip\"\n [content]=\"displayLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n </nile-tooltip>\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n </button>\n\n <nile-menu>\n\n @for (f of fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n\n @for (cat of categories; track trackByCategoryId($index, cat)) {\n <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n aria-haspopup=\"menu\"\n [attr.aria-label]=\"cat.label + ', opens submenu'\">\n <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n {{ cat.label }}\n <nile-icon name=\"arrowright\"\n size=\"14\"\n class=\"st-condition-field-picker__category-chevron\"\n aria-hidden=\"true\">\n </nile-icon>\n </span>\n <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n @for (f of cat.fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n </nile-menu>\n </nile-dropdown>\n </nile-menu-item>\n }\n\n </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--
|
|
12717
|
+
args: [{ selector: 'st-condition-field-picker', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n <button slot=\"trigger\"\n type=\"button\"\n class=\"st-condition-field-picker__trigger\"\n [class.is-placeholder]=\"!value\"\n [attr.disabled]=\"disabled ? '' : null\"\n aria-haspopup=\"menu\">\n <nile-tooltip\n class=\"st-condition-field-picker__tooltip\"\n [content]=\"displayLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n </nile-tooltip>\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n </button>\n\n <nile-menu>\n\n @for (f of fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n\n @for (cat of categories; track trackByCategoryId($index, cat)) {\n <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n aria-haspopup=\"menu\"\n [attr.aria-label]=\"cat.label + ', opens submenu'\">\n <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n {{ cat.label }}\n <nile-icon name=\"arrowright\"\n size=\"14\"\n class=\"st-condition-field-picker__category-chevron\"\n aria-hidden=\"true\">\n </nile-icon>\n </span>\n <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n @for (f of cat.fields; track trackByAttribute($index, f)) {\n <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n {{ f.screenName }}\n </nile-menu-item>\n }\n </nile-menu>\n </nile-dropdown>\n </nile-menu-item>\n }\n\n </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"] }]
|
|
12687
12718
|
}], propDecorators: { value: [{
|
|
12688
12719
|
type: Input
|
|
12689
12720
|
}], fields: [{
|
|
@@ -12831,11 +12862,11 @@ class StConditionRuleComponent {
|
|
|
12831
12862
|
this.ruleChange.emit(next);
|
|
12832
12863
|
}
|
|
12833
12864
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12834
|
-
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" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, 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 }\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\" 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\">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()\">\n <nile-icon name=\"plus\" 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}.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__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:focus-within .st-condition-rule__hover-actions{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(--
|
|
12865
|
+
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" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, 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 }\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\" 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\">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()\">\n <nile-icon name=\"plus\" 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}.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__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:focus-within .st-condition-rule__hover-actions{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}: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:var(--nile-colors-neutral-400, #e6e9eb);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;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}: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;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 }); }
|
|
12835
12866
|
}
|
|
12836
12867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, decorators: [{
|
|
12837
12868
|
type: Component,
|
|
12838
|
-
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 }\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\" 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\">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()\">\n <nile-icon name=\"plus\" 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}.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__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:focus-within .st-condition-rule__hover-actions{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(--
|
|
12869
|
+
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 }\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\" 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\">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()\">\n <nile-icon name=\"plus\" 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}.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__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:focus-within .st-condition-rule__hover-actions{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}: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:var(--nile-colors-neutral-400, #e6e9eb);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;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}: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;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"] }]
|
|
12839
12870
|
}], propDecorators: { rule: [{
|
|
12840
12871
|
type: Input,
|
|
12841
12872
|
args: [{ required: true }]
|
|
@@ -12965,11 +12996,11 @@ class StConditionGroupComponent {
|
|
|
12965
12996
|
this.groupChange.emit(next);
|
|
12966
12997
|
}
|
|
12967
12998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12968
|
-
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 [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\" 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\">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;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{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(--
|
|
12999
|
+
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 [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\" 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\">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;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{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{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border:1px solid var(--nile-colors-dark-100, #e6e6e6);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:var(--nile-colors-neutral-400, #e6e9eb);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;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;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"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12969
13000
|
}
|
|
12970
13001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, decorators: [{
|
|
12971
13002
|
type: Component,
|
|
12972
|
-
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 [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\" 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\">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;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{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(--
|
|
13003
|
+
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 [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\" 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\">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;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{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{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border:1px solid var(--nile-colors-dark-100, #e6e6e6);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:var(--nile-colors-neutral-400, #e6e9eb);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;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}\n"] }]
|
|
12973
13004
|
}], propDecorators: { group: [{
|
|
12974
13005
|
type: Input,
|
|
12975
13006
|
args: [{ required: true }]
|
|
@@ -13349,11 +13380,11 @@ class StConditionBuilderComponent {
|
|
|
13349
13380
|
};
|
|
13350
13381
|
}
|
|
13351
13382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13352
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionBuilderComponent, isStandalone: true, selector: "st-condition-builder", inputs: { config: "config", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", validityChange: "validityChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n @if (internalValue.mode === 'builder') {\n\n <div class=\"st-condition-builder__list\"\n role=\"list\"\n aria-label=\"Conditions\">\n @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"st-condition-builder__row\"\n role=\"listitem\"\n [class.is-last]=\"last\"\n [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n @if (isSingle(node)) {\n <st-condition-rule\n [rule]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"internalValue.conditions.length > 1\"\n [canInsertGroup]=\"allowGroups\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSingleChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-rule>\n } @else if (isGroup(node)) {\n <st-condition-group\n [group]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"true\"\n [disabled]=\"disabled\"\n (groupChange)=\"onGroupChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-group>\n }\n </div>\n }\n </div>\n\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\">\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddCondition()\">\n Add condition\n </button>\n @if (allowGroups) {\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddGroup()\">\n Add condition group\n </button>\n }\n </div>\n @if (allowExpressionMode) {\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"false\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n }\n </div>\n\n } @else {\n\n <div class=\"st-condition-builder__expression\">\n <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n Expression\n </label>\n <nile-code-editor\n id=\"st-condition-builder-expression-input\"\n class=\"st-condition-builder__expression-input\"\n aria-label=\"Rule expression\"\n placeholder=\"Enter expression\"\n [language]=\"expressionLanguage\"\n [multiline]=\"true\"\n [lineNumbers]=\"true\"\n [lineNumbersMultiline]=\"true\"\n [expandable]=\"false\"\n [disabled]=\"disabled\"\n [value]=\"internalValue.expression\"\n [customAutoCompletions]=\"expressionAutoCompletions\"\n [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n (nile-change)=\"onExpressionInput($event)\">\n </nile-code-editor>\n @if (allowExpressionMode) {\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\"></div>\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"true\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n </div>\n }\n </div>\n\n }\n\n <!-- Screen-reader announcements for validation state. Visually hidden;\n aria-live=\"polite\" so it doesn't interrupt other speech. -->\n <div class=\"sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ validityAnnouncement }}\n </div>\n\n</div>\n", styles: [":host{display:block}.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}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--
|
|
13383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionBuilderComponent, isStandalone: true, selector: "st-condition-builder", inputs: { config: "config", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", validityChange: "validityChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n @if (internalValue.mode === 'builder') {\n\n <div class=\"st-condition-builder__list\"\n role=\"list\"\n aria-label=\"Conditions\">\n @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"st-condition-builder__row\"\n role=\"listitem\"\n [class.is-last]=\"last\"\n [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n @if (isSingle(node)) {\n <st-condition-rule\n [rule]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"internalValue.conditions.length > 1\"\n [canInsertGroup]=\"allowGroups\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSingleChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-rule>\n } @else if (isGroup(node)) {\n <st-condition-group\n [group]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"true\"\n [disabled]=\"disabled\"\n (groupChange)=\"onGroupChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-group>\n }\n </div>\n }\n </div>\n\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\">\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddCondition()\">\n Add condition\n </button>\n @if (allowGroups) {\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddGroup()\">\n Add condition group\n </button>\n }\n </div>\n @if (allowExpressionMode) {\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"false\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n }\n </div>\n\n } @else {\n\n <div class=\"st-condition-builder__expression\">\n <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n Expression\n </label>\n <nile-code-editor\n id=\"st-condition-builder-expression-input\"\n class=\"st-condition-builder__expression-input\"\n aria-label=\"Rule expression\"\n placeholder=\"Enter expression\"\n [language]=\"expressionLanguage\"\n [multiline]=\"true\"\n [lineNumbers]=\"true\"\n [lineNumbersMultiline]=\"true\"\n [expandable]=\"false\"\n [disabled]=\"disabled\"\n [value]=\"internalValue.expression\"\n [customAutoCompletions]=\"expressionAutoCompletions\"\n [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n (nile-change)=\"onExpressionInput($event)\">\n </nile-code-editor>\n @if (allowExpressionMode) {\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\"></div>\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"true\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n </div>\n }\n </div>\n\n }\n\n <!-- Screen-reader announcements for validation state. Visually hidden;\n aria-live=\"polite\" so it doesn't interrupt other speech. -->\n <div class=\"sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ validityAnnouncement }}\n </div>\n\n</div>\n", styles: [":host{display:block}.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}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:block;width:100%;min-height:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }, { kind: "component", type: StConditionGroupComponent, selector: "st-condition-group", inputs: ["group", "config", "isFirst", "canRemove", "disabled"], outputs: ["groupChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13353
13384
|
}
|
|
13354
13385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, decorators: [{
|
|
13355
13386
|
type: Component,
|
|
13356
|
-
args: [{ selector: 'st-condition-builder', standalone: true, imports: [CommonModule, FormsModule, StConditionRuleComponent, StConditionGroupComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n @if (internalValue.mode === 'builder') {\n\n <div class=\"st-condition-builder__list\"\n role=\"list\"\n aria-label=\"Conditions\">\n @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"st-condition-builder__row\"\n role=\"listitem\"\n [class.is-last]=\"last\"\n [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n @if (isSingle(node)) {\n <st-condition-rule\n [rule]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"internalValue.conditions.length > 1\"\n [canInsertGroup]=\"allowGroups\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSingleChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-rule>\n } @else if (isGroup(node)) {\n <st-condition-group\n [group]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"true\"\n [disabled]=\"disabled\"\n (groupChange)=\"onGroupChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-group>\n }\n </div>\n }\n </div>\n\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\">\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddCondition()\">\n Add condition\n </button>\n @if (allowGroups) {\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddGroup()\">\n Add condition group\n </button>\n }\n </div>\n @if (allowExpressionMode) {\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"false\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n }\n </div>\n\n } @else {\n\n <div class=\"st-condition-builder__expression\">\n <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n Expression\n </label>\n <nile-code-editor\n id=\"st-condition-builder-expression-input\"\n class=\"st-condition-builder__expression-input\"\n aria-label=\"Rule expression\"\n placeholder=\"Enter expression\"\n [language]=\"expressionLanguage\"\n [multiline]=\"true\"\n [lineNumbers]=\"true\"\n [lineNumbersMultiline]=\"true\"\n [expandable]=\"false\"\n [disabled]=\"disabled\"\n [value]=\"internalValue.expression\"\n [customAutoCompletions]=\"expressionAutoCompletions\"\n [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n (nile-change)=\"onExpressionInput($event)\">\n </nile-code-editor>\n @if (allowExpressionMode) {\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\"></div>\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"true\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n </div>\n }\n </div>\n\n }\n\n <!-- Screen-reader announcements for validation state. Visually hidden;\n aria-live=\"polite\" so it doesn't interrupt other speech. -->\n <div class=\"sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ validityAnnouncement }}\n </div>\n\n</div>\n", styles: [":host{display:block}.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}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--
|
|
13387
|
+
args: [{ selector: 'st-condition-builder', standalone: true, imports: [CommonModule, FormsModule, StConditionRuleComponent, StConditionGroupComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n @if (internalValue.mode === 'builder') {\n\n <div class=\"st-condition-builder__list\"\n role=\"list\"\n aria-label=\"Conditions\">\n @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"st-condition-builder__row\"\n role=\"listitem\"\n [class.is-last]=\"last\"\n [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n @if (isSingle(node)) {\n <st-condition-rule\n [rule]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"internalValue.conditions.length > 1\"\n [canInsertGroup]=\"allowGroups\"\n [disabled]=\"disabled\"\n (ruleChange)=\"onSingleChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-rule>\n } @else if (isGroup(node)) {\n <st-condition-group\n [group]=\"node\"\n [config]=\"config\"\n [isFirst]=\"i === 0\"\n [canRemove]=\"true\"\n [disabled]=\"disabled\"\n (groupChange)=\"onGroupChange(i, $event)\"\n (remove)=\"onRemoveCondition(i)\"\n (insertBelow)=\"onInsertBelow(i)\"\n (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n </st-condition-group>\n }\n </div>\n }\n </div>\n\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\">\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddCondition()\">\n Add condition\n </button>\n @if (allowGroups) {\n <button type=\"button\"\n class=\"st-condition-builder__link\"\n [attr.disabled]=\"canAddCondition ? null : ''\"\n [attr.aria-disabled]=\"!canAddCondition\"\n (click)=\"onAddGroup()\">\n Add condition group\n </button>\n }\n </div>\n @if (allowExpressionMode) {\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"false\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n }\n </div>\n\n } @else {\n\n <div class=\"st-condition-builder__expression\">\n <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n Expression\n </label>\n <nile-code-editor\n id=\"st-condition-builder-expression-input\"\n class=\"st-condition-builder__expression-input\"\n aria-label=\"Rule expression\"\n placeholder=\"Enter expression\"\n [language]=\"expressionLanguage\"\n [multiline]=\"true\"\n [lineNumbers]=\"true\"\n [lineNumbersMultiline]=\"true\"\n [expandable]=\"false\"\n [disabled]=\"disabled\"\n [value]=\"internalValue.expression\"\n [customAutoCompletions]=\"expressionAutoCompletions\"\n [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n (nile-change)=\"onExpressionInput($event)\">\n </nile-code-editor>\n @if (allowExpressionMode) {\n <div class=\"st-condition-builder__footer\">\n <div class=\"st-condition-builder__footer-left\"></div>\n <button type=\"button\"\n class=\"st-condition-builder__link st-condition-builder__link--right\"\n [attr.disabled]=\"disabled ? '' : null\"\n [attr.aria-pressed]=\"true\"\n (click)=\"onToggleMode()\">\n {{ expressionToggleLabel }}\n </button>\n </div>\n }\n </div>\n\n }\n\n <!-- Screen-reader announcements for validation state. Visually hidden;\n aria-live=\"polite\" so it doesn't interrupt other speech. -->\n <div class=\"sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ validityAnnouncement }}\n </div>\n\n</div>\n", styles: [":host{display:block}.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}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:block;width:100%;min-height:160px}\n"] }]
|
|
13357
13388
|
}], propDecorators: { config: [{
|
|
13358
13389
|
type: Input,
|
|
13359
13390
|
args: [{ required: true }]
|
|
@@ -13524,7 +13555,7 @@ class StSheetComponent {
|
|
|
13524
13555
|
return this.config?.display?.headerVariant || 'default';
|
|
13525
13556
|
}
|
|
13526
13557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13527
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StSheetComponent, isStandalone: true, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange", conditionBuilderValueChange: "conditionBuilderValueChange", conditionBuilderValidityChange: "conditionBuilderValidityChange" }, usesOnChanges: true, ngImport: i0, template: "<nile-tab-group>\n <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n <div class=\"sheet-header\">\n {{activeState?.name$ | async | titlecase}}\n @if (visibleActions.length > 0) {\n <st-sheet-actions\n [actions]=\"visibleActions\"\n [sheetId]=\"config.id\"\n (actionClicked)=\"onActionClick($event)\">\n </st-sheet-actions>\n }\n </div>\n </nile-tab>\n <nile-tab-panel name=\"general\">\n @switch (contentType) {\n @case ('condition-builder') {\n @if (config.conditionBuilder) {\n <st-condition-builder\n [config]=\"config.conditionBuilder.config\"\n [value]=\"config.conditionBuilder.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (config && activeState && config.tableConfig) {\n <st-table\n [tableConfig]=\"config.tableConfig\"\n [data]=\"data\"\n [data$]=\"data$\"\n [tableState]=\"activeState.tableState\"\n (cellChange)=\"onCellChange($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (dataChange)=\"onDataChange($event)\">\n </st-table>\n }\n }\n }\n </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}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}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}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: "component", type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange", "requestAddRow", "requestFocusTabs"] }, { kind: "component", type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "component", type: StConditionBuilderComponent, selector: "st-condition-builder", inputs: ["config", "value", "disabled"], outputs: ["valueChange", "validityChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
|
|
13558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StSheetComponent, isStandalone: true, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange", conditionBuilderValueChange: "conditionBuilderValueChange", conditionBuilderValidityChange: "conditionBuilderValidityChange" }, usesOnChanges: true, ngImport: i0, template: "<nile-tab-group>\n <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n <div class=\"sheet-header\">\n {{activeState?.name$ | async | titlecase}}\n @if (visibleActions.length > 0) {\n <st-sheet-actions\n [actions]=\"visibleActions\"\n [sheetId]=\"config.id\"\n (actionClicked)=\"onActionClick($event)\">\n </st-sheet-actions>\n }\n </div>\n </nile-tab>\n <nile-tab-panel name=\"general\">\n @switch (contentType) {\n @case ('condition-builder') {\n @if (config.conditionBuilder) {\n <st-condition-builder\n [config]=\"config.conditionBuilder.config\"\n [value]=\"config.conditionBuilder.value\"\n (valueChange)=\"onConditionBuilderValueChange($event)\"\n (validityChange)=\"onConditionBuilderValidityChange($event)\">\n </st-condition-builder>\n }\n }\n @default {\n @if (config && activeState && config.tableConfig) {\n <st-table\n [tableConfig]=\"config.tableConfig\"\n [data]=\"data\"\n [data$]=\"data$\"\n [tableState]=\"activeState.tableState\"\n (cellChange)=\"onCellChange($event)\"\n (stateChange)=\"onTableStateChange($event)\"\n (dataChange)=\"onDataChange($event)\">\n </st-table>\n }\n }\n }\n </nile-tab-panel>\n</nile-tab-group>\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}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}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}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: "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: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { kind: "component", type: StConditionBuilderComponent, selector: "st-condition-builder", inputs: ["config", "value", "disabled"], outputs: ["valueChange", "validityChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
|
|
13528
13559
|
}
|
|
13529
13560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StSheetComponent, decorators: [{
|
|
13530
13561
|
type: Component,
|
|
@@ -14442,11 +14473,11 @@ class StWorkbookComponent {
|
|
|
14442
14473
|
}
|
|
14443
14474
|
}
|
|
14444
14475
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14445
|
-
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 dropdown button -->\n @if (hasTabActions(sheet)) {\n <button class=\"tab-actions-button\"\n type=\"button\"\n [attr.aria-label]=\"'Actions for ' + sheet.name\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar Tab (for workbook controls) -->\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:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{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:600}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", "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" }] }); }
|
|
14476
|
+
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 dropdown button -->\n @if (hasTabActions(sheet)) {\n <button class=\"tab-actions-button\"\n type=\"button\"\n [attr.aria-label]=\"'Actions for ' + sheet.name\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar Tab (for workbook controls) -->\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{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" }] }); }
|
|
14446
14477
|
}
|
|
14447
14478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StWorkbookComponent, decorators: [{
|
|
14448
14479
|
type: Component,
|
|
14449
|
-
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 dropdown button -->\n @if (hasTabActions(sheet)) {\n <button class=\"tab-actions-button\"\n type=\"button\"\n [attr.aria-label]=\"'Actions for ' + sheet.name\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar Tab (for workbook controls) -->\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:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{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:600}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"] }]
|
|
14480
|
+
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 dropdown button -->\n @if (hasTabActions(sheet)) {\n <button class=\"tab-actions-button\"\n type=\"button\"\n [attr.aria-label]=\"'Actions for ' + sheet.name\"\n (click)=\"openTabActions($event, sheet, i)\">\n <nile-icon name=\"arrowdown\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n </button>\n }\n </div>\n </nile-tab>\n }\n \n <!-- Toolbar Tab (for workbook controls) -->\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{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"] }]
|
|
14450
14481
|
}], 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: [{
|
|
14451
14482
|
type: ViewChild,
|
|
14452
14483
|
args: [StTableComponent]
|
|
@@ -15810,11 +15841,11 @@ class ColumnListComponent {
|
|
|
15810
15841
|
return type?.label || 'Text';
|
|
15811
15842
|
}
|
|
15812
15843
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n <div class=\"column-list-header\">\n <h3>Columns</h3>\n <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n <span>+ Add Column</span>\n </button>\n @if (showAddMenu) {\n <div class=\"add-menu\">\n @for (type of dataTypes; track type.value) {\n <button\n class=\"menu-item\"\n (click)=\"onAddColumn(type.value)\">\n {{ type.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"column-items\">\n @for (column of columns; track column.key; let i = $index) {\n <div\n class=\"column-item\"\n [class.selected]=\"selectedIndex === i\"\n [class.dragging]=\"draggedIndex === i\"\n [class.drag-over]=\"dragOverIndex === i\"\n (click)=\"onColumnClick(i)\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n (dragleave)=\"dragOverIndex = null\">\n <div class=\"drag-handle\">\n <span>\u2630</span>\n </div>\n <div class=\"column-info\">\n <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n <div class=\"column-meta\">\n <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n <span class=\"column-key\">{{ column.key }}</span>\n </div>\n </div>\n <button\n class=\"delete-btn\"\n (click)=\"onDelete(i, $event)\"\n title=\"Delete Column\">\n \u00D7\n </button>\n </div>\n }\n\n @if (columns.length === 0) {\n <div class=\"empty-state\">\n <p>No columns yet. Click \"Add Column\" to get started.</p>\n </div>\n }\n </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:
|
|
15844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColumnListComponent, isStandalone: true, selector: "st-column-list", inputs: { columns: "columns", selectedIndex: "selectedIndex" }, outputs: { columnSelected: "columnSelected", columnAdded: "columnAdded", columnDeleted: "columnDeleted", columnReordered: "columnReordered" }, ngImport: i0, template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n <div class=\"column-list-header\">\n <h3>Columns</h3>\n <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n <span>+ Add Column</span>\n </button>\n @if (showAddMenu) {\n <div class=\"add-menu\">\n @for (type of dataTypes; track type.value) {\n <button\n class=\"menu-item\"\n (click)=\"onAddColumn(type.value)\">\n {{ type.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"column-items\">\n @for (column of columns; track column.key; let i = $index) {\n <div\n class=\"column-item\"\n [class.selected]=\"selectedIndex === i\"\n [class.dragging]=\"draggedIndex === i\"\n [class.drag-over]=\"dragOverIndex === i\"\n (click)=\"onColumnClick(i)\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n (dragleave)=\"dragOverIndex = null\">\n <div class=\"drag-handle\">\n <span>\u2630</span>\n </div>\n <div class=\"column-info\">\n <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n <div class=\"column-meta\">\n <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n <span class=\"column-key\">{{ column.key }}</span>\n </div>\n </div>\n <button\n class=\"delete-btn\"\n (click)=\"onDelete(i, $event)\"\n title=\"Delete Column\">\n \u00D7\n </button>\n </div>\n }\n\n @if (columns.length === 0) {\n <div class=\"empty-state\">\n <p>No columns yet. Click \"Add Column\" to get started.</p>\n </div>\n }\n </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:var(--ng-font-weight-medium);color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
15814
15845
|
}
|
|
15815
15846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnListComponent, decorators: [{
|
|
15816
15847
|
type: Component,
|
|
15817
|
-
args: [{ selector: 'st-column-list', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n <div class=\"column-list-header\">\n <h3>Columns</h3>\n <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n <span>+ Add Column</span>\n </button>\n @if (showAddMenu) {\n <div class=\"add-menu\">\n @for (type of dataTypes; track type.value) {\n <button\n class=\"menu-item\"\n (click)=\"onAddColumn(type.value)\">\n {{ type.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"column-items\">\n @for (column of columns; track column.key; let i = $index) {\n <div\n class=\"column-item\"\n [class.selected]=\"selectedIndex === i\"\n [class.dragging]=\"draggedIndex === i\"\n [class.drag-over]=\"dragOverIndex === i\"\n (click)=\"onColumnClick(i)\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n (dragleave)=\"dragOverIndex = null\">\n <div class=\"drag-handle\">\n <span>\u2630</span>\n </div>\n <div class=\"column-info\">\n <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n <div class=\"column-meta\">\n <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n <span class=\"column-key\">{{ column.key }}</span>\n </div>\n </div>\n <button\n class=\"delete-btn\"\n (click)=\"onDelete(i, $event)\"\n title=\"Delete Column\">\n \u00D7\n </button>\n </div>\n }\n\n @if (columns.length === 0) {\n <div class=\"empty-state\">\n <p>No columns yet. Click \"Add Column\" to get started.</p>\n </div>\n }\n </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:
|
|
15848
|
+
args: [{ selector: 'st-column-list', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"column-list\" (clickOutside)=\"closeMenu()\">\n <div class=\"column-list-header\">\n <h3>Columns</h3>\n <div class=\"add-column-menu\" [class.open]=\"showAddMenu\">\n <button class=\"add-btn\" (click)=\"showAddMenu = !showAddMenu\" title=\"Add Column\">\n <span>+ Add Column</span>\n </button>\n @if (showAddMenu) {\n <div class=\"add-menu\">\n @for (type of dataTypes; track type.value) {\n <button\n class=\"menu-item\"\n (click)=\"onAddColumn(type.value)\">\n {{ type.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"column-items\">\n @for (column of columns; track column.key; let i = $index) {\n <div\n class=\"column-item\"\n [class.selected]=\"selectedIndex === i\"\n [class.dragging]=\"draggedIndex === i\"\n [class.drag-over]=\"dragOverIndex === i\"\n (click)=\"onColumnClick(i)\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event, i)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n (dragleave)=\"dragOverIndex = null\">\n <div class=\"drag-handle\">\n <span>\u2630</span>\n </div>\n <div class=\"column-info\">\n <div class=\"column-name\">{{ getColumnDisplayName(column) }}</div>\n <div class=\"column-meta\">\n <span class=\"column-type\">{{ getDataTypeLabel(column) }}</span>\n <span class=\"column-key\">{{ column.key }}</span>\n </div>\n </div>\n <button\n class=\"delete-btn\"\n (click)=\"onDelete(i, $event)\"\n title=\"Delete Column\">\n \u00D7\n </button>\n </div>\n }\n\n @if (columns.length === 0) {\n <div class=\"empty-state\">\n <p>No columns yet. Click \"Add Column\" to get started.</p>\n </div>\n }\n </div>\n</div>\n", styles: [".column-list{display:flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.column-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.column-list-header h3{margin:0;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.add-column-menu{position:relative}.add-column-menu.open .add-btn{background-color:#e3f2fd;border-color:#2196f3}.add-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.add-btn:hover{background-color:#f5f5f5}.add-menu{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#fff;border:1px solid #d0d0d0;border-radius:4px;box-shadow:0 4px 8px #0000001a;z-index:100;min-width:150px}.menu-item{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background-color:#f5f5f5}.menu-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.menu-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.column-items{max-height:400px;overflow-y:auto;padding:.5rem}.column-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;margin-bottom:.5rem;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s}.column-item:hover{border-color:#b0b0b0;background-color:#f8f8f8}.column-item.selected{border-color:#2196f3;background-color:#e3f2fd}.column-item.cdk-drag-preview{box-shadow:0 8px 16px #0003;opacity:.9}.column-item.cdk-drag-placeholder{opacity:.3}.drag-handle{cursor:move;color:#999;font-size:1.25rem;padding:.25rem;display:flex;align-items:center}.drag-handle:hover{color:#666}.column-info{flex:1;min-width:0}.column-name{font-weight:var(--ng-font-weight-medium);color:#333;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-meta{display:flex;gap:.5rem;font-size:.75rem;color:#666}.column-type{padding:.125rem .5rem;background-color:#e8e8e8;border-radius:3px}.column-key{font-family:monospace;color:#999}.delete-btn{padding:.25rem .5rem;border:none;background:none;color:#999;cursor:pointer;font-size:1.5rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#f44336}.empty-state{padding:2rem;text-align:center;color:#999;font-size:.875rem}.column-item.dragging{opacity:.5}.column-item.drag-over{border-color:#2196f3}\n"] }]
|
|
15818
15849
|
}], propDecorators: { columns: [{
|
|
15819
15850
|
type: Input
|
|
15820
15851
|
}], selectedIndex: [{
|
|
@@ -15946,11 +15977,11 @@ class TableConfigEditorComponent {
|
|
|
15946
15977
|
}
|
|
15947
15978
|
}
|
|
15948
15979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableConfigEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n <h3>Table Configuration</h3>\n\n <form [formGroup]=\"form\" class=\"config-form\">\n <!-- Pagination -->\n <div class=\"config-section\">\n <h4>Pagination</h4>\n <div formGroupName=\"pagination\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Page Size</label>\n <select formControlName=\"pageSize\" class=\"form-control\">\n @for (size of pageSizeOptions; track size) {\n <option [value]=\"size\">\n {{ size }}\n </option>\n }\n </select>\n </div>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showTopControls\">\n <span>Show Top Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showBottomControls\">\n <span>Show Bottom Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Variant</label>\n <select formControlName=\"variant\" class=\"form-control\">\n <option value=\"fluid\">Fluid</option>\n <option value=\"compact\">Compact</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Sorting -->\n <div class=\"config-section\">\n <h4>Sorting</h4>\n <div formGroupName=\"sorting\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('sorting.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"multiColumn\">\n <span>Multi-column</span>\n </label>\n }\n @if (form.get('sorting.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Filtering -->\n <div class=\"config-section\">\n <h4>Filtering</h4>\n <div formGroupName=\"filtering\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('filtering.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"config-section\">\n <h4>Display</h4>\n <div formGroupName=\"display\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"stickyHeader\">\n <span>Sticky Header</span>\n </label>\n \n <!-- Virtual Scroll Configuration -->\n <div class=\"subsection\" formGroupName=\"virtualScroll\">\n <h5>Virtual Scroll</h5>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Virtual Scrolling (for large datasets)</span>\n </label>\n \n @if (form.get('display.virtualScroll.enabled')?.value) {\n <div class=\"virtual-scroll-options\">\n <div class=\"form-group\">\n <label>Row Height (px)</label>\n <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n <small class=\"help-text\">Must be consistent for all rows</small>\n </div>\n \n <div class=\"form-group\">\n <label>Buffer Size (rows)</label>\n <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n <small class=\"help-text\">Rows rendered above/below viewport</small>\n </div>\n \n <div class=\"form-group\">\n <label>Viewport Height (px)</label>\n <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n <small class=\"help-text\">Height of scrollable container</small>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Keyboard Navigation -->\n <div class=\"config-section\">\n <h4>Keyboard Navigation</h4>\n <div formGroupName=\"keyboardNavigation\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Excel-like Navigation</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:
|
|
15980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableConfigEditorComponent, isStandalone: true, selector: "st-table-config-editor", inputs: { config: "config" }, outputs: { configUpdated: "configUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-config-editor\">\n <h3>Table Configuration</h3>\n\n <form [formGroup]=\"form\" class=\"config-form\">\n <!-- Pagination -->\n <div class=\"config-section\">\n <h4>Pagination</h4>\n <div formGroupName=\"pagination\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Page Size</label>\n <select formControlName=\"pageSize\" class=\"form-control\">\n @for (size of pageSizeOptions; track size) {\n <option [value]=\"size\">\n {{ size }}\n </option>\n }\n </select>\n </div>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showTopControls\">\n <span>Show Top Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showBottomControls\">\n <span>Show Bottom Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Variant</label>\n <select formControlName=\"variant\" class=\"form-control\">\n <option value=\"fluid\">Fluid</option>\n <option value=\"compact\">Compact</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Sorting -->\n <div class=\"config-section\">\n <h4>Sorting</h4>\n <div formGroupName=\"sorting\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('sorting.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"multiColumn\">\n <span>Multi-column</span>\n </label>\n }\n @if (form.get('sorting.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Filtering -->\n <div class=\"config-section\">\n <h4>Filtering</h4>\n <div formGroupName=\"filtering\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('filtering.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"config-section\">\n <h4>Display</h4>\n <div formGroupName=\"display\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"stickyHeader\">\n <span>Sticky Header</span>\n </label>\n \n <!-- Virtual Scroll Configuration -->\n <div class=\"subsection\" formGroupName=\"virtualScroll\">\n <h5>Virtual Scroll</h5>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Virtual Scrolling (for large datasets)</span>\n </label>\n \n @if (form.get('display.virtualScroll.enabled')?.value) {\n <div class=\"virtual-scroll-options\">\n <div class=\"form-group\">\n <label>Row Height (px)</label>\n <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n <small class=\"help-text\">Must be consistent for all rows</small>\n </div>\n \n <div class=\"form-group\">\n <label>Buffer Size (rows)</label>\n <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n <small class=\"help-text\">Rows rendered above/below viewport</small>\n </div>\n \n <div class=\"form-group\">\n <label>Viewport Height (px)</label>\n <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n <small class=\"help-text\">Height of scrollable container</small>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Keyboard Navigation -->\n <div class=\"config-section\">\n <h4>Keyboard Navigation</h4>\n <div formGroupName=\"keyboardNavigation\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Excel-like Navigation</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:var(--ng-font-weight-bold);color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:var(--ng-font-weight-medium);color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:var(--ng-font-weight-bold);color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
|
|
15950
15981
|
}
|
|
15951
15982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
|
|
15952
15983
|
type: Component,
|
|
15953
|
-
args: [{ selector: 'st-table-config-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"table-config-editor\">\n <h3>Table Configuration</h3>\n\n <form [formGroup]=\"form\" class=\"config-form\">\n <!-- Pagination -->\n <div class=\"config-section\">\n <h4>Pagination</h4>\n <div formGroupName=\"pagination\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Page Size</label>\n <select formControlName=\"pageSize\" class=\"form-control\">\n @for (size of pageSizeOptions; track size) {\n <option [value]=\"size\">\n {{ size }}\n </option>\n }\n </select>\n </div>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showTopControls\">\n <span>Show Top Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showBottomControls\">\n <span>Show Bottom Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Variant</label>\n <select formControlName=\"variant\" class=\"form-control\">\n <option value=\"fluid\">Fluid</option>\n <option value=\"compact\">Compact</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Sorting -->\n <div class=\"config-section\">\n <h4>Sorting</h4>\n <div formGroupName=\"sorting\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('sorting.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"multiColumn\">\n <span>Multi-column</span>\n </label>\n }\n @if (form.get('sorting.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Filtering -->\n <div class=\"config-section\">\n <h4>Filtering</h4>\n <div formGroupName=\"filtering\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('filtering.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"config-section\">\n <h4>Display</h4>\n <div formGroupName=\"display\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"stickyHeader\">\n <span>Sticky Header</span>\n </label>\n \n <!-- Virtual Scroll Configuration -->\n <div class=\"subsection\" formGroupName=\"virtualScroll\">\n <h5>Virtual Scroll</h5>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Virtual Scrolling (for large datasets)</span>\n </label>\n \n @if (form.get('display.virtualScroll.enabled')?.value) {\n <div class=\"virtual-scroll-options\">\n <div class=\"form-group\">\n <label>Row Height (px)</label>\n <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n <small class=\"help-text\">Must be consistent for all rows</small>\n </div>\n \n <div class=\"form-group\">\n <label>Buffer Size (rows)</label>\n <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n <small class=\"help-text\">Rows rendered above/below viewport</small>\n </div>\n \n <div class=\"form-group\">\n <label>Viewport Height (px)</label>\n <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n <small class=\"help-text\">Height of scrollable container</small>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Keyboard Navigation -->\n <div class=\"config-section\">\n <h4>Keyboard Navigation</h4>\n <div formGroupName=\"keyboardNavigation\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Excel-like Navigation</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:
|
|
15984
|
+
args: [{ selector: 'st-table-config-editor', standalone: true, imports: [CommonModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"table-config-editor\">\n <h3>Table Configuration</h3>\n\n <form [formGroup]=\"form\" class=\"config-form\">\n <!-- Pagination -->\n <div class=\"config-section\">\n <h4>Pagination</h4>\n <div formGroupName=\"pagination\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Page Size</label>\n <select formControlName=\"pageSize\" class=\"form-control\">\n @for (size of pageSizeOptions; track size) {\n <option [value]=\"size\">\n {{ size }}\n </option>\n }\n </select>\n </div>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showTopControls\">\n <span>Show Top Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"showBottomControls\">\n <span>Show Bottom Controls</span>\n </label>\n }\n @if (form.get('pagination.enabled')?.value) {\n <div class=\"form-group\">\n <label>Variant</label>\n <select formControlName=\"variant\" class=\"form-control\">\n <option value=\"fluid\">Fluid</option>\n <option value=\"compact\">Compact</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Sorting -->\n <div class=\"config-section\">\n <h4>Sorting</h4>\n <div formGroupName=\"sorting\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('sorting.enabled')?.value) {\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"multiColumn\">\n <span>Multi-column</span>\n </label>\n }\n @if (form.get('sorting.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Filtering -->\n <div class=\"config-section\">\n <h4>Filtering</h4>\n <div formGroupName=\"filtering\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enabled</span>\n </label>\n @if (form.get('filtering.enabled')?.value) {\n <div class=\"form-group\">\n <label>Mode</label>\n <select formControlName=\"mode\" class=\"form-control\">\n <option value=\"local\">Local</option>\n <option value=\"server\">Server</option>\n </select>\n </div>\n }\n </div>\n </div>\n\n <!-- Display -->\n <div class=\"config-section\">\n <h4>Display</h4>\n <div formGroupName=\"display\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"stickyHeader\">\n <span>Sticky Header</span>\n </label>\n \n <!-- Virtual Scroll Configuration -->\n <div class=\"subsection\" formGroupName=\"virtualScroll\">\n <h5>Virtual Scroll</h5>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Virtual Scrolling (for large datasets)</span>\n </label>\n \n @if (form.get('display.virtualScroll.enabled')?.value) {\n <div class=\"virtual-scroll-options\">\n <div class=\"form-group\">\n <label>Row Height (px)</label>\n <input type=\"number\" formControlName=\"itemSize\" class=\"form-control\" min=\"20\" max=\"200\">\n <small class=\"help-text\">Must be consistent for all rows</small>\n </div>\n \n <div class=\"form-group\">\n <label>Buffer Size (rows)</label>\n <input type=\"number\" formControlName=\"bufferSize\" class=\"form-control\" min=\"0\" max=\"20\">\n <small class=\"help-text\">Rows rendered above/below viewport</small>\n </div>\n \n <div class=\"form-group\">\n <label>Viewport Height (px)</label>\n <input type=\"number\" formControlName=\"viewportHeight\" class=\"form-control\" min=\"200\" max=\"2000\">\n <small class=\"help-text\">Height of scrollable container</small>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Keyboard Navigation -->\n <div class=\"config-section\">\n <h4>Keyboard Navigation</h4>\n <div formGroupName=\"keyboardNavigation\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" formControlName=\"enabled\">\n <span>Enable Excel-like Navigation</span>\n </label>\n </div>\n </div>\n </form>\n</div>\n", styles: [".table-config-editor{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:1rem;overflow-y:auto;max-height:500px}.table-config-editor h3{margin:0 0 1rem;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:var(--ng-font-weight-bold);color:#666;text-transform:uppercase;letter-spacing:.5px}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group{margin-top:.75rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:var(--ng-font-weight-medium);color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.form-control:focus{outline:none;border-color:#2196f3}.subsection{margin-top:1rem;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border-left:3px solid #2196f3}.subsection h5{margin:0 0 .75rem;font-size:.8rem;font-weight:var(--ng-font-weight-bold);color:#555;text-transform:uppercase;letter-spacing:.5px}.virtual-scroll-options{margin-top:.75rem;padding-left:.5rem}.help-text{display:block;margin-top:.25rem;font-size:.75rem;color:#666;font-style:italic}\n"] }]
|
|
15954
15985
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { config: [{
|
|
15955
15986
|
type: Input
|
|
15956
15987
|
}], configUpdated: [{
|
|
@@ -16129,11 +16160,11 @@ class BuilderPreviewComponent {
|
|
|
16129
16160
|
console.log('Preview state change:', event);
|
|
16130
16161
|
}
|
|
16131
16162
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n <div class=\"preview-header\">\n <h3>Live Preview</h3>\n <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n \u21BB Refresh\n </button>\n </div>\n\n <div class=\"preview-content\">\n @if (isLoading) {\n <div class=\"loading\">\n <p>Generating preview...</p>\n </div>\n }\n\n @if (!isLoading && tableConfig.columns?.length === 0) {\n <div class=\"empty-state\">\n <p>Add columns to see preview</p>\n </div>\n }\n @if (tableConfig) {\n @if (!isLoading && tableConfig!.columns!.length > 0) {\n <st-table\n [tableConfig]=\"tableConfig\"\n [data]=\"sampleData\"\n (stateChange)=\"onStateChange($event)\">\n </st-table>\n }\n }\n\n </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:
|
|
16163
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BuilderPreviewComponent, isStandalone: true, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n <div class=\"preview-header\">\n <h3>Live Preview</h3>\n <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n \u21BB Refresh\n </button>\n </div>\n\n <div class=\"preview-content\">\n @if (isLoading) {\n <div class=\"loading\">\n <p>Generating preview...</p>\n </div>\n }\n\n @if (!isLoading && tableConfig.columns?.length === 0) {\n <div class=\"empty-state\">\n <p>Add columns to see preview</p>\n </div>\n }\n @if (tableConfig) {\n @if (!isLoading && tableConfig!.columns!.length > 0) {\n <st-table\n [tableConfig]=\"tableConfig\"\n [data]=\"sampleData\"\n (stateChange)=\"onStateChange($event)\">\n </st-table>\n }\n }\n\n </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
16133
16164
|
}
|
|
16134
16165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
|
|
16135
16166
|
type: Component,
|
|
16136
|
-
args: [{ selector: 'st-builder-preview', standalone: true, imports: [CommonModule, StTableComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"builder-preview\">\n <div class=\"preview-header\">\n <h3>Live Preview</h3>\n <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n \u21BB Refresh\n </button>\n </div>\n\n <div class=\"preview-content\">\n @if (isLoading) {\n <div class=\"loading\">\n <p>Generating preview...</p>\n </div>\n }\n\n @if (!isLoading && tableConfig.columns?.length === 0) {\n <div class=\"empty-state\">\n <p>Add columns to see preview</p>\n </div>\n }\n @if (tableConfig) {\n @if (!isLoading && tableConfig!.columns!.length > 0) {\n <st-table\n [tableConfig]=\"tableConfig\"\n [data]=\"sampleData\"\n (stateChange)=\"onStateChange($event)\">\n </st-table>\n }\n }\n\n </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:
|
|
16167
|
+
args: [{ selector: 'st-builder-preview', standalone: true, imports: [CommonModule, StTableComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"builder-preview\">\n <div class=\"preview-header\">\n <h3>Live Preview</h3>\n <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n \u21BB Refresh\n </button>\n </div>\n\n <div class=\"preview-content\">\n @if (isLoading) {\n <div class=\"loading\">\n <p>Generating preview...</p>\n </div>\n }\n\n @if (!isLoading && tableConfig.columns?.length === 0) {\n <div class=\"empty-state\">\n <p>Add columns to see preview</p>\n </div>\n }\n @if (tableConfig) {\n @if (!isLoading && tableConfig!.columns!.length > 0) {\n <st-table\n [tableConfig]=\"tableConfig\"\n [data]=\"sampleData\"\n (stateChange)=\"onStateChange($event)\">\n </st-table>\n }\n }\n\n </div>\n</div>\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:var(--ng-font-weight-bold);color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"] }]
|
|
16137
16168
|
}], ctorParameters: () => [{ type: SampleDataGeneratorService }], propDecorators: { tableConfig: [{
|
|
16138
16169
|
type: Input
|
|
16139
16170
|
}] } });
|