@aquera/ngx-smart-table 0.0.32 → 0.0.34
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.
|
@@ -6206,6 +6206,12 @@ class NileCodeEditor {
|
|
|
6206
6206
|
if (this.options?.customThemeCSS) {
|
|
6207
6207
|
this.dialogEditor.customThemeCSS = this.options.customThemeCSS;
|
|
6208
6208
|
}
|
|
6209
|
+
if (this.options?.readonly !== undefined) {
|
|
6210
|
+
this.dialogEditor.readonly = this.options.readonly;
|
|
6211
|
+
}
|
|
6212
|
+
if (this.options?.disabled !== undefined) {
|
|
6213
|
+
this.dialogEditor.disabled = this.options.disabled;
|
|
6214
|
+
}
|
|
6209
6215
|
this.dialogEditor.expandable = false;
|
|
6210
6216
|
this.dialogEditor.addEventListener('nile-after-update', this.onNileCodeMirrorAfterUpdate);
|
|
6211
6217
|
// Initialize dialog current value
|
|
@@ -6225,13 +6231,24 @@ class NileCodeEditor {
|
|
|
6225
6231
|
footer.style.gap = '8px';
|
|
6226
6232
|
footer.style.flexShrink = '0'; // Prevent footer from shrinking
|
|
6227
6233
|
footer.style.backgroundColor = 'var(--nile-color-neutral-0)';
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
|
|
6234
|
+
if (this.options?.readonly || this.options?.disabled) {
|
|
6235
|
+
const closeButton = document.createElement('nile-button');
|
|
6236
|
+
closeButton.setAttribute('variant', 'default');
|
|
6237
|
+
closeButton.textContent = 'Close';
|
|
6238
|
+
closeButton.addEventListener('click', () => {
|
|
6239
|
+
this.cancelDialogChanges();
|
|
6240
|
+
});
|
|
6241
|
+
footer.appendChild(closeButton);
|
|
6242
|
+
}
|
|
6243
|
+
else {
|
|
6244
|
+
const okButton = document.createElement('nile-button');
|
|
6245
|
+
okButton.setAttribute('variant', 'primary');
|
|
6246
|
+
okButton.textContent = 'Ok';
|
|
6247
|
+
okButton.addEventListener('click', () => {
|
|
6248
|
+
this.applyDialogChanges();
|
|
6249
|
+
});
|
|
6250
|
+
footer.appendChild(okButton);
|
|
6251
|
+
}
|
|
6235
6252
|
contentWrapper.appendChild(footer);
|
|
6236
6253
|
this.dialog.appendChild(contentWrapper);
|
|
6237
6254
|
// Handle dialog close events (clicking X button - cancel changes)
|
|
@@ -7470,10 +7487,10 @@ class StCellComponent {
|
|
|
7470
7487
|
this.editorCleanup = undefined;
|
|
7471
7488
|
}
|
|
7472
7489
|
}
|
|
7473
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7474
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7490
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StCellComponent, isStandalone: true, selector: "st-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: false, transformFunction: null }, tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: false, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n [ngClass]=\"{\n 'editing': cell().isEditing(),\n 'dirty': cell().isDirty(),\n 'invalid': !cell().isValid(),\n 'readonly': !isEditable(),\n 'loading': cellLoading\n }\"\n (click)=\"onCellClick()\" \n (dblclick)=\"onCellDoubleClick()\">\n\n <!-- Loading Indicator -->\n <div *ngIf=\"cellLoading\" class=\"cell-loading\" role=\"status\">\n <div class=\"cell-spinner\" aria-hidden=\"true\"></div>\n <span class=\"sr-only\">Loading</span>\n </div>\n\n <!-- Display Mode with Template Support -->\n @if (!cell().isEditing() && !cellLoading) {\n @if (hasCellTemplate()) {\n <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n } @else if (showBooleanCheckboxDisplay()) {\n <div class=\"cell-display cell-display--boolean-checkbox\" (click)=\"$event.stopPropagation()\">\n <nile-checkbox\n size=\"small\"\n [checked]=\"booleanCheckboxChecked()\"\n [disabled]=\"!isEditable()\"\n (nile-change)=\"onBooleanCheckboxDisplayChange($event)\">\n </nile-checkbox>\n </div>\n } @else {\n <span class=\"cell-display\">\n {{ cell().render() }}\n </span>\n }\n }\n\n <!-- Edit Mode -->\n @if (cell().isEditing()) {\n <div class=\"cell-editor\" #editorContainer>\n </div>\n }\n</div>\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}.st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.editing{max-height:none;overflow:visible;z-index:1}.st-cell.editing .cell-editor{overflow:visible;position:relative;z-index:2}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-display--boolean-checkbox{display:flex;align-items:center;justify-content:center;white-space:normal;padding-left:4px;padding-right:4px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.cell-editor nile-checkbox.st-nile-checkbox-editor{max-width:100%;overflow:hidden}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
7475
7492
|
}
|
|
7476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StCellComponent, decorators: [{
|
|
7477
7494
|
type: Component,
|
|
7478
7495
|
args: [{ selector: 'st-cell', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"st-cell\" \n [ngClass]=\"{\n 'editing': cell().isEditing(),\n 'dirty': cell().isDirty(),\n 'invalid': !cell().isValid(),\n 'readonly': !isEditable(),\n 'loading': cellLoading\n }\"\n (click)=\"onCellClick()\" \n (dblclick)=\"onCellDoubleClick()\">\n\n <!-- Loading Indicator -->\n <div *ngIf=\"cellLoading\" class=\"cell-loading\" role=\"status\">\n <div class=\"cell-spinner\" aria-hidden=\"true\"></div>\n <span class=\"sr-only\">Loading</span>\n </div>\n\n <!-- Display Mode with Template Support -->\n @if (!cell().isEditing() && !cellLoading) {\n @if (hasCellTemplate()) {\n <ng-container *ngTemplateOutlet=\"cellTemplate(); context: templateContext()\"></ng-container>\n } @else if (showBooleanCheckboxDisplay()) {\n <div class=\"cell-display cell-display--boolean-checkbox\" (click)=\"$event.stopPropagation()\">\n <nile-checkbox\n size=\"small\"\n [checked]=\"booleanCheckboxChecked()\"\n [disabled]=\"!isEditable()\"\n (nile-change)=\"onBooleanCheckboxDisplayChange($event)\">\n </nile-checkbox>\n </div>\n } @else {\n <span class=\"cell-display\">\n {{ cell().render() }}\n </span>\n }\n }\n\n <!-- Edit Mode -->\n @if (cell().isEditing()) {\n <div class=\"cell-editor\" #editorContainer>\n </div>\n }\n</div>\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}.st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;max-height:28px}.st-cell.editing{max-height:none;overflow:visible;z-index:1}.st-cell.editing .cell-editor{overflow:visible;position:relative;z-index:2}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-display--boolean-checkbox{display:flex;align-items:center;justify-content:center;white-space:normal;padding-left:4px;padding-right:4px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important;max-height:28px;overflow:hidden;flex-wrap:nowrap}.cell-editor nile-select::part(tag){border:none!important;outline:none!important;margin-right:2px;padding:1px 2px;flex-shrink:0}.cell-editor nile-select::part(listbox){border:none!important}.cell-editor nile-checkbox.st-nile-checkbox-editor{max-width:100%;overflow:hidden}.st-cell.loading{pointer-events:none;opacity:.6}.cell-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:#4a90d9;border-radius:50%;animation:cell-spin .6s linear infinite}@keyframes cell-spin{to{transform:rotate(360deg)}}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"] }]
|
|
7479
7496
|
}], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], tableState: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableState", required: false }] }], tableConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfig", required: false }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellSave: [{ type: i0.Output, args: ["cellSave"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], cellSaveAndNavigate: [{ type: i0.Output, args: ["cellSaveAndNavigate"] }], editorContainer: [{
|
|
@@ -8292,10 +8309,10 @@ class ValidationLoggerService {
|
|
|
8292
8309
|
getLogSize() {
|
|
8293
8310
|
return this.logEntries.length;
|
|
8294
8311
|
}
|
|
8295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8296
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
8312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8313
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
|
|
8297
8314
|
}
|
|
8298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ValidationLoggerService, decorators: [{
|
|
8299
8316
|
type: Injectable,
|
|
8300
8317
|
args: [{
|
|
8301
8318
|
providedIn: 'root'
|
|
@@ -8502,10 +8519,10 @@ class JsonSchemaValidatorService {
|
|
|
8502
8519
|
return error.message || `Field '${field}' is invalid`;
|
|
8503
8520
|
}
|
|
8504
8521
|
}
|
|
8505
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8506
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
8522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8523
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
|
|
8507
8524
|
}
|
|
8508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
|
|
8509
8526
|
type: Injectable,
|
|
8510
8527
|
args: [{
|
|
8511
8528
|
providedIn: 'root'
|
|
@@ -8553,10 +8570,10 @@ class VirtualScrollService {
|
|
|
8553
8570
|
return fromEvent(element, 'scroll').pipe(map((event) => event.target.scrollTop), throttleTime(16, undefined, { leading: true, trailing: true }) // 60fps
|
|
8554
8571
|
);
|
|
8555
8572
|
}
|
|
8556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8557
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
8573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8574
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VirtualScrollService }); }
|
|
8558
8575
|
}
|
|
8559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VirtualScrollService, decorators: [{
|
|
8560
8577
|
type: Injectable
|
|
8561
8578
|
}] });
|
|
8562
8579
|
|
|
@@ -8631,10 +8648,10 @@ class StPaginationComponent {
|
|
|
8631
8648
|
this.tableState.setPageSize(newPageSize);
|
|
8632
8649
|
}
|
|
8633
8650
|
}
|
|
8634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
8651
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8652
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: StPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { tableState: "tableState", tableConfig: "tableConfig", position: "position" }, ngImport: i0, template: "<nile-pagination\n [totalItems]=\"paginationState.totalItems\"\n [currentPage]=\"getCurrentPageDisplay()\"\n [pageSize]=\"paginationState.pageSize\"\n [variant]=\"getVariant()\"\n [pageSizeOptions]=\"getPageSizeOptions()\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
8636
8653
|
}
|
|
8637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StPaginationComponent, decorators: [{
|
|
8638
8655
|
type: Component,
|
|
8639
8656
|
args: [{ selector: 'st-pagination', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nile-pagination\n [totalItems]=\"paginationState.totalItems\"\n [currentPage]=\"getCurrentPageDisplay()\"\n [pageSize]=\"paginationState.pageSize\"\n [variant]=\"getVariant()\"\n [pageSizeOptions]=\"getPageSizeOptions()\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n</nile-pagination>\n", styles: [":host{display:block;width:100%}nile-pagination{display:block;width:100%}\n"] }]
|
|
8640
8657
|
}], propDecorators: { tableState: [{
|
|
@@ -8832,12 +8849,12 @@ class StHeaderComponent {
|
|
|
8832
8849
|
};
|
|
8833
8850
|
this.columnMoved.emit(moveEvent);
|
|
8834
8851
|
}
|
|
8835
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8836
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
8852
|
+
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:500;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 }] }); }
|
|
8837
8854
|
}
|
|
8838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StHeaderComponent, decorators: [{
|
|
8839
8856
|
type: Component,
|
|
8840
|
-
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:500;letter-spacing:.2px;line-height:14px}.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"] }]
|
|
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:500;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"] }]
|
|
8841
8858
|
}], propDecorators: { column: [{
|
|
8842
8859
|
type: Input
|
|
8843
8860
|
}], columnIndex: [{
|
|
@@ -8870,166 +8887,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
8870
8887
|
|
|
8871
8888
|
class StTableActionsComponent {
|
|
8872
8889
|
constructor() {
|
|
8873
|
-
this.
|
|
8874
|
-
this.
|
|
8875
|
-
this.isOpen = false;
|
|
8876
|
-
this.currentView = 'main';
|
|
8877
|
-
this.columnsVisibility = [];
|
|
8878
|
-
/**
|
|
8879
|
-
* Dropdown positioning style
|
|
8880
|
-
*/
|
|
8881
|
-
this.dropdownStyle = {};
|
|
8882
|
-
}
|
|
8883
|
-
ngOnInit() {
|
|
8884
|
-
if (!this.tableState) {
|
|
8885
|
-
console.warn('tableState is required for st-table-actions component');
|
|
8886
|
-
return;
|
|
8887
|
-
}
|
|
8888
|
-
// Initialize with current state
|
|
8889
|
-
this.updateColumnsVisibility();
|
|
8890
|
-
// Subscribe to state changes to update visibility list
|
|
8891
|
-
this.subscribeToStateChanges();
|
|
8892
|
-
}
|
|
8893
|
-
ngOnDestroy() {
|
|
8894
|
-
this.stateSubscription?.unsubscribe();
|
|
8895
|
-
// Re-enable body scroll if component is destroyed while menu is open
|
|
8896
|
-
if (this.isOpen) {
|
|
8897
|
-
document.body.style.overflow = '';
|
|
8898
|
-
}
|
|
8890
|
+
this.isMenuOpen = false;
|
|
8891
|
+
this.menuButtonClicked = new EventEmitter();
|
|
8899
8892
|
}
|
|
8900
|
-
|
|
8901
|
-
* Update columns visibility list from current table state
|
|
8902
|
-
*/
|
|
8903
|
-
updateColumnsVisibility() {
|
|
8904
|
-
if (this.tableState) {
|
|
8905
|
-
this.columnsVisibility = this.tableState.getAllColumnsVisibility();
|
|
8906
|
-
}
|
|
8907
|
-
}
|
|
8908
|
-
/**
|
|
8909
|
-
* Subscribe to table state changes
|
|
8910
|
-
*/
|
|
8911
|
-
subscribeToStateChanges() {
|
|
8912
|
-
if (!this.tableState)
|
|
8913
|
-
return;
|
|
8914
|
-
this.stateSubscription = this.tableState.stateChange$
|
|
8915
|
-
.subscribe(event => {
|
|
8916
|
-
if (event.type === 'column-visibility' || event.type === 'column-config') {
|
|
8917
|
-
this.updateColumnsVisibility();
|
|
8918
|
-
}
|
|
8919
|
-
});
|
|
8920
|
-
}
|
|
8921
|
-
/**
|
|
8922
|
-
* Toggle menu open/close
|
|
8923
|
-
*/
|
|
8924
|
-
toggleMenu(event) {
|
|
8893
|
+
onButtonClick(event) {
|
|
8925
8894
|
event.stopPropagation();
|
|
8926
|
-
this.isOpen = !this.isOpen;
|
|
8927
|
-
if (this.isOpen) {
|
|
8928
|
-
this.currentView = 'main';
|
|
8929
|
-
this.updateDropdownPosition(event);
|
|
8930
|
-
// Disable body scroll when menu opens
|
|
8931
|
-
document.body.style.overflow = 'hidden';
|
|
8932
|
-
}
|
|
8933
|
-
else {
|
|
8934
|
-
// Re-enable body scroll when menu closes
|
|
8935
|
-
document.body.style.overflow = '';
|
|
8936
|
-
}
|
|
8937
|
-
}
|
|
8938
|
-
/**
|
|
8939
|
-
* Update dropdown position based on trigger button
|
|
8940
|
-
*/
|
|
8941
|
-
updateDropdownPosition(event) {
|
|
8942
8895
|
const button = event.currentTarget;
|
|
8943
8896
|
const rect = button.getBoundingClientRect();
|
|
8944
|
-
|
|
8945
|
-
let x = rect.right;
|
|
8946
|
-
let y = rect.bottom + 5;
|
|
8947
|
-
// // Adjust horizontal position if dropdown would overflow
|
|
8948
|
-
// if (x + dropdownWidth > viewportWidth) {
|
|
8949
|
-
// x = Math.max(10, viewportWidth - dropdownWidth - 10);
|
|
8950
|
-
// }
|
|
8951
|
-
// // Adjust vertical position if dropdown would overflow
|
|
8952
|
-
// if (y + dropdownHeight > viewportHeight) {
|
|
8953
|
-
// y = rect.top - dropdownHeight - 5;
|
|
8954
|
-
// }
|
|
8955
|
-
this.dropdownStyle = {
|
|
8956
|
-
position: 'absolute',
|
|
8957
|
-
left: `${x - dropdownWidth}px`,
|
|
8958
|
-
top: `${y}px`,
|
|
8959
|
-
'z-index': TableZIndex.TABLE_ACTIONS_DROPDOWN
|
|
8960
|
-
};
|
|
8961
|
-
}
|
|
8962
|
-
/**
|
|
8963
|
-
* Close menu
|
|
8964
|
-
*/
|
|
8965
|
-
closeMenu() {
|
|
8966
|
-
this.isOpen = false;
|
|
8967
|
-
this.currentView = 'main';
|
|
8968
|
-
// Re-enable body scroll when menu closes
|
|
8969
|
-
document.body.style.overflow = '';
|
|
8970
|
-
}
|
|
8971
|
-
/**
|
|
8972
|
-
* Handle add column action
|
|
8973
|
-
*/
|
|
8974
|
-
onAddColumn(event) {
|
|
8975
|
-
event.stopPropagation();
|
|
8976
|
-
this.addColumnClicked.emit();
|
|
8977
|
-
this.closeMenu();
|
|
8978
|
-
}
|
|
8979
|
-
/**
|
|
8980
|
-
* Open column visibility submenu
|
|
8981
|
-
*/
|
|
8982
|
-
openColumnsSubmenu(event) {
|
|
8983
|
-
event.stopPropagation();
|
|
8984
|
-
this.currentView = 'columns';
|
|
8985
|
-
}
|
|
8986
|
-
/**
|
|
8987
|
-
* Go back to main menu
|
|
8988
|
-
*/
|
|
8989
|
-
backToMain(event) {
|
|
8990
|
-
event.stopPropagation();
|
|
8991
|
-
this.currentView = 'main';
|
|
8992
|
-
}
|
|
8993
|
-
/**
|
|
8994
|
-
* Toggle column visibility
|
|
8995
|
-
*/
|
|
8996
|
-
onToggleColumn(columnKey, event) {
|
|
8997
|
-
event.stopPropagation();
|
|
8998
|
-
// Check if column is hideable before toggling
|
|
8999
|
-
const column = this.columnsVisibility.find(col => col.key === columnKey);
|
|
9000
|
-
if (column && column.hideable !== false) {
|
|
9001
|
-
if (this.tableState) {
|
|
9002
|
-
this.tableState.toggleColumnVisibility(columnKey);
|
|
9003
|
-
}
|
|
9004
|
-
}
|
|
9005
|
-
}
|
|
9006
|
-
/**
|
|
9007
|
-
* Check if column is visible
|
|
9008
|
-
*/
|
|
9009
|
-
isColumnVisible(columnKey) {
|
|
9010
|
-
if (!this.tableState) {
|
|
9011
|
-
return true;
|
|
9012
|
-
}
|
|
9013
|
-
const column = this.tableState.getColumns().find(col => col.key === columnKey);
|
|
9014
|
-
return column ? (column.visible !== false) : true;
|
|
9015
|
-
}
|
|
9016
|
-
/**
|
|
9017
|
-
* Check if column is hideable
|
|
9018
|
-
*/
|
|
9019
|
-
isColumnHideable(column) {
|
|
9020
|
-
return column.hideable !== false; // Default to true if not set
|
|
8897
|
+
this.menuButtonClicked.emit({ x: rect.right, y: rect.bottom + 5 });
|
|
9021
8898
|
}
|
|
9022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { isMenuOpen: "isMenuOpen" }, outputs: { menuButtonClicked: "menuButtonClicked" }, ngImport: i0, template: "<button\n class=\"table-actions-button\"\n (click)=\"onButtonClick($event)\"\n type=\"button\"\n title=\"Table Actions\"\n aria-label=\"Table actions menu\"\n [class.active]=\"isMenuOpen\">\n <nile-icon name=\"settings\"></nile-icon>\n</button>\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
9024
8901
|
}
|
|
9025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableActionsComponent, decorators: [{
|
|
9026
8903
|
type: Component,
|
|
9027
|
-
args: [{ selector: 'st-table-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<button
|
|
9028
|
-
}],
|
|
9029
|
-
type: Input
|
|
9030
|
-
}], allowAddColumn: [{
|
|
8904
|
+
args: [{ selector: 'st-table-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<button\n class=\"table-actions-button\"\n (click)=\"onButtonClick($event)\"\n type=\"button\"\n title=\"Table Actions\"\n aria-label=\"Table actions menu\"\n [class.active]=\"isMenuOpen\">\n <nile-icon name=\"settings\"></nile-icon>\n</button>\n", styles: [".table-actions-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;transition:background-color .15s}.table-actions-button:hover{background-color:#0000000d}.table-actions-button.active{background-color:#0000001a}.table-actions-button:focus{outline:none}\n"] }]
|
|
8905
|
+
}], propDecorators: { isMenuOpen: [{
|
|
9031
8906
|
type: Input
|
|
9032
|
-
}],
|
|
8907
|
+
}], menuButtonClicked: [{
|
|
9033
8908
|
type: Output
|
|
9034
8909
|
}] } });
|
|
9035
8910
|
|
|
@@ -9380,10 +9255,10 @@ class StColumnFilterComponent {
|
|
|
9380
9255
|
// Align left for first 2 columns to prevent clipping
|
|
9381
9256
|
return this.columnIndex <= 1;
|
|
9382
9257
|
}
|
|
9383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9384
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9258
|
+
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:600;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 }] }); }
|
|
9385
9260
|
}
|
|
9386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnFilterComponent, decorators: [{
|
|
9387
9262
|
type: Component,
|
|
9388
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:600;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"] }]
|
|
9389
9264
|
}], propDecorators: { filterAnchor: [{
|
|
@@ -9672,10 +9547,10 @@ class StColumnMenuDropdownComponent {
|
|
|
9672
9547
|
// Align left for first 2 columns to prevent clipping
|
|
9673
9548
|
return (this.context?.columnIndex || 0) <= 1;
|
|
9674
9549
|
}
|
|
9675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9550
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9551
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StColumnMenuDropdownComponent, isStandalone: true, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closed.emit()\"></div>\n\n <!-- Dropdown menu -->\n <div class=\"column-menu-dropdown\" role=\"dialog\" [attr.aria-label]=\"context.column?.header || 'Column actions'\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n <!-- Main menu with actions -->\n @if (!isFilterOpen) {\n <nile-menu>\n <!-- Dynamically render all visible actions -->\n @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n <nile-menu-item \n (click)=\"onActionClick(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n [class.active]=\"isActionActive(action)\">\n @if (isActionActive(action)) {\n <span class=\"checkmark\" aria-hidden=\"true\">\u2713</span>\n }\n @if (action.icon && !isActionActive(action)) {\n <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n <span class=\"action-label\">{{ action.label }}</span>\n </nile-menu-item>\n \n <!-- Add divider after action groups -->\n @if (shouldShowDividerAfter(action, i, last)) {\n <nile-divider></nile-divider>\n }\n }\n \n <!-- Fallback if no actions -->\n @if (visibleActions.length === 0) {\n <nile-menu-item>\n No actions available\n </nile-menu-item>\n }\n </nile-menu>\n }\n \n <!-- Filter popup (conditionally rendered) -->\n @if (isFilterOpen && context) {\n <st-column-filter\n #filterPopup\n [column]=\"context.column\"\n [tableState]=\"context.tableState\"\n [columnIndex]=\"context.columnIndex\"\n [isFirstColumn]=\"context.isFirstColumn\"\n [isLastColumn]=\"context.isLastColumn\"\n [isOpen]=\"isFilterOpen\"\n (filterApplied)=\"onFilterApplied($event)\"\n (filterCleared)=\"onFilterCleared()\"\n (closed)=\"onFilterClosed()\">\n </st-column-filter>\n }\n </div>\n </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
|
|
9677
9552
|
}
|
|
9678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
|
|
9679
9554
|
type: Component,
|
|
9680
9555
|
args: [{ selector: 'st-column-menu-dropdown', standalone: true, imports: [CommonModule, StColumnFilterComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" role=\"presentation\" (click)=\"closed.emit()\"></div>\n\n <!-- Dropdown menu -->\n <div class=\"column-menu-dropdown\" role=\"dialog\" [attr.aria-label]=\"context.column?.header || 'Column actions'\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n <!-- Main menu with actions -->\n @if (!isFilterOpen) {\n <nile-menu>\n <!-- Dynamically render all visible actions -->\n @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n <nile-menu-item \n (click)=\"onActionClick(action)\"\n [class.disabled]=\"isActionDisabled(action)\"\n [class.active]=\"isActionActive(action)\">\n @if (isActionActive(action)) {\n <span class=\"checkmark\" aria-hidden=\"true\">\u2713</span>\n }\n @if (action.icon && !isActionActive(action)) {\n <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n <span class=\"action-label\">{{ action.label }}</span>\n </nile-menu-item>\n \n <!-- Add divider after action groups -->\n @if (shouldShowDividerAfter(action, i, last)) {\n <nile-divider></nile-divider>\n }\n }\n \n <!-- Fallback if no actions -->\n @if (visibleActions.length === 0) {\n <nile-menu-item>\n No actions available\n </nile-menu-item>\n }\n </nile-menu>\n }\n \n <!-- Filter popup (conditionally rendered) -->\n @if (isFilterOpen && context) {\n <st-column-filter\n #filterPopup\n [column]=\"context.column\"\n [tableState]=\"context.tableState\"\n [columnIndex]=\"context.columnIndex\"\n [isFirstColumn]=\"context.isFirstColumn\"\n [isLastColumn]=\"context.isLastColumn\"\n [isOpen]=\"isFilterOpen\"\n (filterApplied)=\"onFilterApplied($event)\"\n (filterCleared)=\"onFilterCleared()\"\n (closed)=\"onFilterClosed()\">\n </st-column-filter>\n }\n </div>\n </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
|
|
9681
9556
|
}], propDecorators: { isOpen: [{
|
|
@@ -9879,10 +9754,10 @@ class StRowActionsDropdownComponent {
|
|
|
9879
9754
|
onDropdownClick(event) {
|
|
9880
9755
|
event.stopPropagation();
|
|
9881
9756
|
}
|
|
9882
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9883
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StRowActionsDropdownComponent, isStandalone: true, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed", tabbed: "tabbed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)", "document:keydown.space": "onSpaceKey($event)", "document:keydown.tab": "onTabKey($event)", "document:keydown.shift.tab": "onTabKey($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isOpen && context) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-overlay\" role=\"presentation\" (click)=\"closed.emit()\"></div>\n\n <!-- Dropdown menu -->\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Row actions\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n @if (isOpen) {\n <nile-menu>\n @for (action of visibleActions; track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n @if (action.icon) {\n <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n \n @if (visibleActions.length === 0) {\n <nile-menu-item>No actions available</nile-menu-item>\n }\n </nile-menu>\n }\n </div>\n </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9884
9759
|
}
|
|
9885
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
|
|
9886
9761
|
type: Component,
|
|
9887
9762
|
args: [{ selector: 'st-row-actions-dropdown', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen && context) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-overlay\" role=\"presentation\" (click)=\"closed.emit()\"></div>\n\n <!-- Dropdown menu -->\n <div class=\"dropdown-menu\" role=\"dialog\" aria-label=\"Row actions\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n @if (isOpen) {\n <nile-menu>\n @for (action of visibleActions; track action.id) {\n <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n @if (action.icon) {\n <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n \n @if (visibleActions.length === 0) {\n <nile-menu-item>No actions available</nile-menu-item>\n }\n </nile-menu>\n }\n </div>\n </div>\n}\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
|
|
9888
9763
|
}], propDecorators: { isOpen: [{
|
|
@@ -10004,10 +9879,10 @@ class StKeyboardNavigationDirective {
|
|
|
10004
9879
|
};
|
|
10005
9880
|
return map[key];
|
|
10006
9881
|
}
|
|
10007
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10008
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
9882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9883
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
|
|
10009
9884
|
}
|
|
10010
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
|
|
10011
9886
|
type: Directive,
|
|
10012
9887
|
args: [{
|
|
10013
9888
|
selector: '[stKeyboardNavigation]',
|
|
@@ -10119,10 +9994,10 @@ class StColumnResizeDirective {
|
|
|
10119
9994
|
document.removeEventListener('mousemove', this.onResizeMove);
|
|
10120
9995
|
document.removeEventListener('mouseup', this.onResizeEnd);
|
|
10121
9996
|
}
|
|
10122
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10123
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
9997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9998
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
|
|
10124
9999
|
}
|
|
10125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnResizeDirective, decorators: [{
|
|
10126
10001
|
type: Directive,
|
|
10127
10002
|
args: [{
|
|
10128
10003
|
selector: '[stColumnResize]',
|
|
@@ -10139,143 +10014,444 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
10139
10014
|
args: ['mousedown', ['$event']]
|
|
10140
10015
|
}] } });
|
|
10141
10016
|
|
|
10142
|
-
|
|
10143
|
-
|
|
10144
|
-
|
|
10145
|
-
|
|
10146
|
-
|
|
10147
|
-
|
|
10148
|
-
this.
|
|
10149
|
-
this.
|
|
10150
|
-
|
|
10151
|
-
this.
|
|
10152
|
-
|
|
10153
|
-
|
|
10154
|
-
|
|
10155
|
-
|
|
10156
|
-
|
|
10157
|
-
|
|
10158
|
-
this.
|
|
10159
|
-
|
|
10160
|
-
|
|
10161
|
-
|
|
10162
|
-
|
|
10163
|
-
this.
|
|
10164
|
-
|
|
10165
|
-
|
|
10166
|
-
|
|
10167
|
-
|
|
10168
|
-
this.
|
|
10169
|
-
|
|
10170
|
-
|
|
10171
|
-
|
|
10172
|
-
|
|
10173
|
-
this.
|
|
10174
|
-
|
|
10175
|
-
|
|
10176
|
-
|
|
10177
|
-
|
|
10178
|
-
|
|
10179
|
-
|
|
10180
|
-
|
|
10181
|
-
|
|
10182
|
-
|
|
10183
|
-
|
|
10184
|
-
|
|
10185
|
-
|
|
10186
|
-
|
|
10187
|
-
|
|
10188
|
-
|
|
10189
|
-
|
|
10190
|
-
|
|
10191
|
-
|
|
10192
|
-
|
|
10193
|
-
|
|
10194
|
-
|
|
10195
|
-
|
|
10196
|
-
|
|
10197
|
-
|
|
10198
|
-
|
|
10199
|
-
|
|
10200
|
-
|
|
10201
|
-
|
|
10202
|
-
|
|
10203
|
-
|
|
10204
|
-
|
|
10205
|
-
|
|
10206
|
-
|
|
10207
|
-
|
|
10208
|
-
|
|
10209
|
-
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10215
|
-
|
|
10216
|
-
|
|
10217
|
-
|
|
10218
|
-
|
|
10219
|
-
this.
|
|
10220
|
-
|
|
10221
|
-
|
|
10222
|
-
|
|
10223
|
-
|
|
10224
|
-
|
|
10225
|
-
this.
|
|
10226
|
-
|
|
10227
|
-
|
|
10228
|
-
|
|
10229
|
-
|
|
10230
|
-
|
|
10231
|
-
|
|
10232
|
-
|
|
10233
|
-
|
|
10234
|
-
|
|
10235
|
-
this.
|
|
10236
|
-
this.
|
|
10237
|
-
this.
|
|
10238
|
-
this.
|
|
10239
|
-
|
|
10240
|
-
|
|
10241
|
-
|
|
10242
|
-
this.
|
|
10243
|
-
this.
|
|
10244
|
-
|
|
10245
|
-
|
|
10246
|
-
|
|
10247
|
-
|
|
10248
|
-
|
|
10249
|
-
|
|
10250
|
-
|
|
10251
|
-
|
|
10252
|
-
|
|
10253
|
-
|
|
10254
|
-
|
|
10255
|
-
|
|
10256
|
-
|
|
10257
|
-
|
|
10258
|
-
|
|
10259
|
-
|
|
10260
|
-
|
|
10261
|
-
|
|
10262
|
-
|
|
10263
|
-
|
|
10264
|
-
|
|
10265
|
-
|
|
10266
|
-
|
|
10267
|
-
|
|
10268
|
-
|
|
10269
|
-
|
|
10270
|
-
|
|
10271
|
-
|
|
10272
|
-
|
|
10273
|
-
|
|
10274
|
-
|
|
10275
|
-
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10017
|
+
/**
|
|
10018
|
+
* Column Editor Component
|
|
10019
|
+
* Form-based column configuration
|
|
10020
|
+
*/
|
|
10021
|
+
class ColumnEditorComponent {
|
|
10022
|
+
constructor(fb) {
|
|
10023
|
+
this.fb = fb;
|
|
10024
|
+
this.columnUpdated = new EventEmitter();
|
|
10025
|
+
this.cancel = new EventEmitter();
|
|
10026
|
+
this.dataTypes = [
|
|
10027
|
+
{ value: CellDataType.STRING, label: 'Text' },
|
|
10028
|
+
{ value: CellDataType.NUMBER, label: 'Number' },
|
|
10029
|
+
{ value: CellDataType.DATE, label: 'Date' },
|
|
10030
|
+
{ value: CellDataType.BOOLEAN, label: 'Boolean' },
|
|
10031
|
+
{ value: CellDataType.CUSTOM, label: 'Custom' }
|
|
10032
|
+
];
|
|
10033
|
+
this.alignments = [
|
|
10034
|
+
{ value: CellAlignment.LEFT, label: 'Left' },
|
|
10035
|
+
{ value: CellAlignment.CENTER, label: 'Center' },
|
|
10036
|
+
{ value: CellAlignment.RIGHT, label: 'Right' }
|
|
10037
|
+
];
|
|
10038
|
+
this.verticalAlignments = [
|
|
10039
|
+
{ value: CellVerticalAlignment.TOP, label: 'Top' },
|
|
10040
|
+
{ value: CellVerticalAlignment.MIDDLE, label: 'Middle' },
|
|
10041
|
+
{ value: CellVerticalAlignment.BOTTOM, label: 'Bottom' }
|
|
10042
|
+
];
|
|
10043
|
+
this.editModes = [
|
|
10044
|
+
{ value: EditMode.CLICK, label: 'Click' },
|
|
10045
|
+
{ value: EditMode.MANUAL, label: 'Manual' },
|
|
10046
|
+
{ value: EditMode.NONE, label: 'None' }
|
|
10047
|
+
];
|
|
10048
|
+
this.stickyOptions = [
|
|
10049
|
+
{ value: false, label: 'None' },
|
|
10050
|
+
{ value: 'left', label: 'Left' },
|
|
10051
|
+
{ value: 'right', label: 'Right' }
|
|
10052
|
+
];
|
|
10053
|
+
}
|
|
10054
|
+
ngOnInit() {
|
|
10055
|
+
this.buildForm();
|
|
10056
|
+
}
|
|
10057
|
+
ngOnChanges(changes) {
|
|
10058
|
+
if (changes['column'] && !changes['column'].firstChange && this.form) {
|
|
10059
|
+
this.updateForm();
|
|
10060
|
+
}
|
|
10061
|
+
}
|
|
10062
|
+
/**
|
|
10063
|
+
* Build the reactive form
|
|
10064
|
+
*/
|
|
10065
|
+
buildForm() {
|
|
10066
|
+
this.form = this.fb.group({
|
|
10067
|
+
// Basic properties
|
|
10068
|
+
key: [this.column.key, [Validators.required, Validators.pattern(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/)]],
|
|
10069
|
+
header: [this.column.header || ''],
|
|
10070
|
+
dataType: [this.column.dataType || CellDataType.STRING],
|
|
10071
|
+
// Feature flags
|
|
10072
|
+
editable: [this.column.editable !== false],
|
|
10073
|
+
sortable: [this.column.sortable !== false],
|
|
10074
|
+
filterable: [this.column.filterable !== false],
|
|
10075
|
+
resizable: [this.column.resizable !== false],
|
|
10076
|
+
hideable: [this.column.hideable !== false],
|
|
10077
|
+
movable: [this.column.movable !== false],
|
|
10078
|
+
pinnable: [this.column.pinnable !== false],
|
|
10079
|
+
enableMenu: [this.column.enableMenu !== false],
|
|
10080
|
+
// Layout
|
|
10081
|
+
width: [this.column.width || ''],
|
|
10082
|
+
minWidth: [this.column.minWidth || ''],
|
|
10083
|
+
maxWidth: [this.column.maxWidth || ''],
|
|
10084
|
+
sticky: [this.column.sticky || false],
|
|
10085
|
+
alignment: [this.column.alignment || CellAlignment.LEFT],
|
|
10086
|
+
verticalAlignment: [this.column.verticalAlignment || CellVerticalAlignment.MIDDLE],
|
|
10087
|
+
// Edit mode
|
|
10088
|
+
editMode: [this.column.editMode || EditMode.CLICK],
|
|
10089
|
+
// Display
|
|
10090
|
+
visible: [this.column.visible !== false],
|
|
10091
|
+
truncate: [this.column.truncate || false]
|
|
10092
|
+
});
|
|
10093
|
+
// Subscribe to hideable changes to enforce visible=true when hideable=false
|
|
10094
|
+
this.form.get('hideable')?.valueChanges.subscribe(hideable => {
|
|
10095
|
+
if (!hideable) {
|
|
10096
|
+
this.form.get('visible')?.setValue(true, { emitEvent: false });
|
|
10097
|
+
}
|
|
10098
|
+
});
|
|
10099
|
+
// Update form when column changes
|
|
10100
|
+
this.updateForm();
|
|
10101
|
+
}
|
|
10102
|
+
/**
|
|
10103
|
+
* Update form values from column
|
|
10104
|
+
*/
|
|
10105
|
+
updateForm() {
|
|
10106
|
+
if (!this.form || !this.column)
|
|
10107
|
+
return;
|
|
10108
|
+
this.form.patchValue({
|
|
10109
|
+
key: this.column.key,
|
|
10110
|
+
header: this.column.header || '',
|
|
10111
|
+
dataType: this.column.dataType || CellDataType.STRING,
|
|
10112
|
+
editable: this.column.editable !== false,
|
|
10113
|
+
sortable: this.column.sortable !== false,
|
|
10114
|
+
filterable: this.column.filterable !== false,
|
|
10115
|
+
resizable: this.column.resizable !== false,
|
|
10116
|
+
hideable: this.column.hideable !== false,
|
|
10117
|
+
movable: this.column.movable !== false,
|
|
10118
|
+
pinnable: this.column.pinnable !== false,
|
|
10119
|
+
enableMenu: this.column.enableMenu !== false,
|
|
10120
|
+
width: this.column.width || '',
|
|
10121
|
+
minWidth: this.column.minWidth || '',
|
|
10122
|
+
maxWidth: this.column.maxWidth || '',
|
|
10123
|
+
sticky: this.column.sticky || false,
|
|
10124
|
+
alignment: this.column.alignment || CellAlignment.LEFT,
|
|
10125
|
+
verticalAlignment: this.column.verticalAlignment || CellVerticalAlignment.MIDDLE,
|
|
10126
|
+
editMode: this.column.editMode || EditMode.CLICK,
|
|
10127
|
+
visible: this.column.visible !== false,
|
|
10128
|
+
truncate: this.column.truncate || false
|
|
10129
|
+
}, { emitEvent: false });
|
|
10130
|
+
}
|
|
10131
|
+
/**
|
|
10132
|
+
* Handle form submission
|
|
10133
|
+
*/
|
|
10134
|
+
onSave() {
|
|
10135
|
+
if (this.form.valid) {
|
|
10136
|
+
const formValue = this.form.value;
|
|
10137
|
+
const updates = {
|
|
10138
|
+
key: formValue.key,
|
|
10139
|
+
header: formValue.header || undefined,
|
|
10140
|
+
dataType: formValue.dataType,
|
|
10141
|
+
editable: formValue.editable,
|
|
10142
|
+
sortable: formValue.sortable,
|
|
10143
|
+
filterable: formValue.filterable,
|
|
10144
|
+
resizable: formValue.resizable,
|
|
10145
|
+
hideable: formValue.hideable,
|
|
10146
|
+
movable: formValue.movable,
|
|
10147
|
+
pinnable: formValue.pinnable,
|
|
10148
|
+
enableMenu: formValue.enableMenu,
|
|
10149
|
+
width: formValue.width || undefined,
|
|
10150
|
+
minWidth: formValue.minWidth || undefined,
|
|
10151
|
+
maxWidth: formValue.maxWidth || undefined,
|
|
10152
|
+
sticky: formValue.sticky || undefined,
|
|
10153
|
+
alignment: formValue.alignment,
|
|
10154
|
+
verticalAlignment: formValue.verticalAlignment,
|
|
10155
|
+
editMode: formValue.editMode,
|
|
10156
|
+
visible: formValue.visible,
|
|
10157
|
+
truncate: formValue.truncate
|
|
10158
|
+
};
|
|
10159
|
+
// Convert empty strings to undefined
|
|
10160
|
+
Object.keys(updates).forEach(key => {
|
|
10161
|
+
const value = updates[key];
|
|
10162
|
+
if (value === '' || value === null) {
|
|
10163
|
+
updates[key] = undefined;
|
|
10164
|
+
}
|
|
10165
|
+
});
|
|
10166
|
+
this.columnUpdated.emit(updates);
|
|
10167
|
+
}
|
|
10168
|
+
else {
|
|
10169
|
+
// Mark all fields as touched to show validation errors
|
|
10170
|
+
Object.keys(this.form.controls).forEach(key => {
|
|
10171
|
+
this.form.get(key)?.markAsTouched();
|
|
10172
|
+
});
|
|
10173
|
+
}
|
|
10174
|
+
}
|
|
10175
|
+
/**
|
|
10176
|
+
* Handle cancel
|
|
10177
|
+
*/
|
|
10178
|
+
onCancel() {
|
|
10179
|
+
this.cancel.emit();
|
|
10180
|
+
}
|
|
10181
|
+
/**
|
|
10182
|
+
* Get form control error message
|
|
10183
|
+
*/
|
|
10184
|
+
getErrorMessage(controlName) {
|
|
10185
|
+
const control = this.form.get(controlName);
|
|
10186
|
+
if (control?.hasError('required')) {
|
|
10187
|
+
return 'This field is required';
|
|
10188
|
+
}
|
|
10189
|
+
if (control?.hasError('pattern')) {
|
|
10190
|
+
return 'Invalid format';
|
|
10191
|
+
}
|
|
10192
|
+
return '';
|
|
10193
|
+
}
|
|
10194
|
+
/**
|
|
10195
|
+
* Check if form control has error
|
|
10196
|
+
*/
|
|
10197
|
+
hasError(controlName) {
|
|
10198
|
+
const control = this.form.get(controlName);
|
|
10199
|
+
return !!(control && control.invalid && (control.dirty || control.touched));
|
|
10200
|
+
}
|
|
10201
|
+
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"] }] }); }
|
|
10203
|
+
}
|
|
10204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnEditorComponent, decorators: [{
|
|
10205
|
+
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: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"] }]
|
|
10207
|
+
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { column: [{
|
|
10208
|
+
type: Input
|
|
10209
|
+
}], columnIndex: [{
|
|
10210
|
+
type: Input
|
|
10211
|
+
}], columnUpdated: [{
|
|
10212
|
+
type: Output
|
|
10213
|
+
}], cancel: [{
|
|
10214
|
+
type: Output
|
|
10215
|
+
}] } });
|
|
10216
|
+
|
|
10217
|
+
class StColumnEditorModalComponent {
|
|
10218
|
+
constructor() {
|
|
10219
|
+
this.columnCreated = new EventEmitter();
|
|
10220
|
+
this.cancelled = new EventEmitter();
|
|
10221
|
+
this.columnIndex = -1;
|
|
10222
|
+
}
|
|
10223
|
+
ngOnInit() {
|
|
10224
|
+
// Create a default column that will be edited
|
|
10225
|
+
this.newColumn = this.createDefaultColumn();
|
|
10226
|
+
}
|
|
10227
|
+
ngOnDestroy() {
|
|
10228
|
+
// Cleanup if needed
|
|
10229
|
+
}
|
|
10230
|
+
/**
|
|
10231
|
+
* Create a default column configuration
|
|
10232
|
+
*/
|
|
10233
|
+
createDefaultColumn() {
|
|
10234
|
+
return ColumnConfigFactory.text('newColumn', {
|
|
10235
|
+
header: 'New Column',
|
|
10236
|
+
editable: true,
|
|
10237
|
+
sortable: true,
|
|
10238
|
+
filterable: true,
|
|
10239
|
+
resizable: true,
|
|
10240
|
+
hideable: true,
|
|
10241
|
+
visible: true
|
|
10242
|
+
});
|
|
10243
|
+
}
|
|
10244
|
+
/**
|
|
10245
|
+
* Trigger save from external button
|
|
10246
|
+
*/
|
|
10247
|
+
onSave() {
|
|
10248
|
+
// Call the column editor's save method
|
|
10249
|
+
if (this.columnEditor) {
|
|
10250
|
+
this.columnEditor.onSave();
|
|
10251
|
+
}
|
|
10252
|
+
}
|
|
10253
|
+
/**
|
|
10254
|
+
* Handle column updates from the editor
|
|
10255
|
+
*/
|
|
10256
|
+
onColumnUpdated(updates) {
|
|
10257
|
+
// Merge updates into the new column
|
|
10258
|
+
this.newColumn = { ...this.newColumn, ...updates };
|
|
10259
|
+
// Use ColumnConfigFactory to create proper column based on data type
|
|
10260
|
+
let finalColumn;
|
|
10261
|
+
const key = updates.key || this.newColumn.key;
|
|
10262
|
+
const dataType = updates.dataType || this.newColumn.dataType;
|
|
10263
|
+
switch (dataType) {
|
|
10264
|
+
case CellDataType.NUMBER:
|
|
10265
|
+
finalColumn = ColumnConfigFactory.number(key, this.newColumn);
|
|
10266
|
+
break;
|
|
10267
|
+
case CellDataType.DATE:
|
|
10268
|
+
finalColumn = ColumnConfigFactory.date(key, this.newColumn);
|
|
10269
|
+
break;
|
|
10270
|
+
case CellDataType.BOOLEAN:
|
|
10271
|
+
finalColumn = ColumnConfigFactory.boolean(key, this.newColumn);
|
|
10272
|
+
break;
|
|
10273
|
+
default:
|
|
10274
|
+
finalColumn = ColumnConfigFactory.text(key, this.newColumn);
|
|
10275
|
+
}
|
|
10276
|
+
// Emit the created column
|
|
10277
|
+
this.columnCreated.emit(finalColumn);
|
|
10278
|
+
}
|
|
10279
|
+
/**
|
|
10280
|
+
* Handle cancel from the editor
|
|
10281
|
+
*/
|
|
10282
|
+
onCancel() {
|
|
10283
|
+
this.cancelled.emit();
|
|
10284
|
+
}
|
|
10285
|
+
/**
|
|
10286
|
+
* Handle backdrop click to close modal
|
|
10287
|
+
*/
|
|
10288
|
+
onBackdropClick(event) {
|
|
10289
|
+
if (event.target === event.currentTarget) {
|
|
10290
|
+
this.cancelled.emit();
|
|
10291
|
+
}
|
|
10292
|
+
}
|
|
10293
|
+
/**
|
|
10294
|
+
* Prevent event propagation from modal content
|
|
10295
|
+
*/
|
|
10296
|
+
onModalContentClick(event) {
|
|
10297
|
+
event.stopPropagation();
|
|
10298
|
+
}
|
|
10299
|
+
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:500;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:500;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
|
+
}
|
|
10302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
|
|
10303
|
+
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:500;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:500;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
|
+
}], propDecorators: { columnCreated: [{
|
|
10306
|
+
type: Output
|
|
10307
|
+
}], cancelled: [{
|
|
10308
|
+
type: Output
|
|
10309
|
+
}], columnEditor: [{
|
|
10310
|
+
type: ViewChild,
|
|
10311
|
+
args: [ColumnEditorComponent]
|
|
10312
|
+
}] } });
|
|
10313
|
+
|
|
10314
|
+
class StTableComponent {
|
|
10315
|
+
constructor() {
|
|
10316
|
+
this.destroyRef = inject(DestroyRef);
|
|
10317
|
+
this.injector = inject(Injector);
|
|
10318
|
+
this.schemaValidator = inject(JsonSchemaValidatorService);
|
|
10319
|
+
this.logger = inject(ValidationLoggerService);
|
|
10320
|
+
this.virtualScrollService = inject(VirtualScrollService);
|
|
10321
|
+
this.elementRef = inject((ElementRef));
|
|
10322
|
+
// Z-Index constants for template use
|
|
10323
|
+
this.ZIndex = TableZIndex;
|
|
10324
|
+
// Signal-based inputs
|
|
10325
|
+
this.tableConfig = input.required(...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
|
|
10326
|
+
this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
10327
|
+
this.data$ = input(undefined, ...(ngDevMode ? [{ debugName: "data$" }] : /* istanbul ignore next */ []));
|
|
10328
|
+
this.tableState = input(undefined, ...(ngDevMode ? [{ debugName: "tableState" }] : /* istanbul ignore next */ []));
|
|
10329
|
+
this.enableSorting = input(true, ...(ngDevMode ? [{ debugName: "enableSorting" }] : /* istanbul ignore next */ []));
|
|
10330
|
+
this.enableFiltering = input(true, ...(ngDevMode ? [{ debugName: "enableFiltering" }] : /* istanbul ignore next */ []));
|
|
10331
|
+
this.validateConfig = input(false, ...(ngDevMode ? [{ debugName: "validateConfig" }] : /* istanbul ignore next */ []));
|
|
10332
|
+
// Signal-based outputs
|
|
10333
|
+
this.stateChange = output();
|
|
10334
|
+
this.dataChange = output();
|
|
10335
|
+
this.cellEdit = output();
|
|
10336
|
+
this.cellSave = output();
|
|
10337
|
+
this.cellCancel = output();
|
|
10338
|
+
this.cellChange = output();
|
|
10339
|
+
this.columnResized = output();
|
|
10340
|
+
this.columnMoved = output();
|
|
10341
|
+
this.configValidationErrors = output();
|
|
10342
|
+
this.columnAdded = output();
|
|
10343
|
+
this.rowAction = output();
|
|
10344
|
+
this.validationStateChange = output();
|
|
10345
|
+
this.requestAddRow = output();
|
|
10346
|
+
this.requestFocusTabs = output();
|
|
10347
|
+
// Internal state signals
|
|
10348
|
+
this.mergedConfig = signal(null, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : /* istanbul ignore next */ []));
|
|
10349
|
+
this.visibleColumns = signal([], ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
|
|
10350
|
+
this.visibleCellGrid = signal([], ...(ngDevMode ? [{ debugName: "visibleCellGrid" }] : /* istanbul ignore next */ []));
|
|
10351
|
+
this.showColumnModal = signal(false, ...(ngDevMode ? [{ debugName: "showColumnModal" }] : /* istanbul ignore next */ []));
|
|
10352
|
+
// Internal data signal (stores current effective data from either data input or data$ observable)
|
|
10353
|
+
this.currentData = signal([], ...(ngDevMode ? [{ debugName: "currentData" }] : /* istanbul ignore next */ []));
|
|
10354
|
+
// Row actions dropdown state as signals
|
|
10355
|
+
this.dropdownIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownIsOpen" }] : /* istanbul ignore next */ []));
|
|
10356
|
+
this.dropdownPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : /* istanbul ignore next */ []));
|
|
10357
|
+
this.dropdownContext = signal(null, ...(ngDevMode ? [{ debugName: "dropdownContext" }] : /* istanbul ignore next */ []));
|
|
10358
|
+
this.dropdownTriggerEl = null;
|
|
10359
|
+
// Column menu dropdown state as signals
|
|
10360
|
+
this.columnMenuIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "columnMenuIsOpen" }] : /* istanbul ignore next */ []));
|
|
10361
|
+
this.columnMenuPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "columnMenuPosition" }] : /* istanbul ignore next */ []));
|
|
10362
|
+
this.columnMenuContext = signal(null, ...(ngDevMode ? [{ debugName: "columnMenuContext" }] : /* istanbul ignore next */ []));
|
|
10363
|
+
// Table actions menu state as signals
|
|
10364
|
+
this.tableActionsMenuIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "tableActionsMenuIsOpen" }] : /* istanbul ignore next */ []));
|
|
10365
|
+
this.tableActionsMenuPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "tableActionsMenuPosition" }] : /* istanbul ignore next */ []));
|
|
10366
|
+
this.tableActionsMenuView = signal('main', ...(ngDevMode ? [{ debugName: "tableActionsMenuView" }] : /* istanbul ignore next */ []));
|
|
10367
|
+
// Virtual scroll state as signal
|
|
10368
|
+
this.virtualScrollState = signal(null, ...(ngDevMode ? [{ debugName: "virtualScrollState" }] : /* istanbul ignore next */ []));
|
|
10369
|
+
// Computed signals for virtual scroll
|
|
10370
|
+
this.virtualScrollTotalHeight = computed(() => this.virtualScrollState()?.totalHeight ?? 0, ...(ngDevMode ? [{ debugName: "virtualScrollTotalHeight" }] : /* istanbul ignore next */ []));
|
|
10371
|
+
this.virtualScrollOffsetY = computed(() => this.virtualScrollState()?.offsetY ?? 0, ...(ngDevMode ? [{ debugName: "virtualScrollOffsetY" }] : /* istanbul ignore next */ []));
|
|
10372
|
+
this.virtualScrollOffsetYNeg = computed(() => (this.virtualScrollState()?.offsetY ?? 0) * -1, ...(ngDevMode ? [{ debugName: "virtualScrollOffsetYNeg" }] : /* istanbul ignore next */ []));
|
|
10373
|
+
this.visibleRows = computed(() => {
|
|
10374
|
+
const state = this.virtualScrollState();
|
|
10375
|
+
const grid = this.visibleCellGrid();
|
|
10376
|
+
if (!state)
|
|
10377
|
+
return grid;
|
|
10378
|
+
const { startIndex, endIndex } = state;
|
|
10379
|
+
return grid.slice(startIndex, endIndex);
|
|
10380
|
+
}, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
|
|
10381
|
+
// Computed for dropdown state (for template compatibility)
|
|
10382
|
+
this.dropdownState = computed(() => ({
|
|
10383
|
+
isOpen: this.dropdownIsOpen(),
|
|
10384
|
+
position: this.dropdownPosition(),
|
|
10385
|
+
context: this.dropdownContext()
|
|
10386
|
+
}), ...(ngDevMode ? [{ debugName: "dropdownState" }] : /* istanbul ignore next */ []));
|
|
10387
|
+
this.columnMenuState = computed(() => ({
|
|
10388
|
+
isOpen: this.columnMenuIsOpen(),
|
|
10389
|
+
position: this.columnMenuPosition(),
|
|
10390
|
+
context: this.columnMenuContext()
|
|
10391
|
+
}), ...(ngDevMode ? [{ debugName: "columnMenuState" }] : /* istanbul ignore next */ []));
|
|
10392
|
+
// Legacy observable wrappers for backward compatibility
|
|
10393
|
+
this.virtualScrollTotalHeight$ = new BehaviorSubject(0);
|
|
10394
|
+
this.virtualScrollOffsetY$ = new BehaviorSubject(0);
|
|
10395
|
+
this.virtualScrollOffsetYNeg$ = new BehaviorSubject(0);
|
|
10396
|
+
this.visibleRows$ = new BehaviorSubject([]);
|
|
10397
|
+
this.internalData$ = new BehaviorSubject([]);
|
|
10398
|
+
this.previousData = [];
|
|
10399
|
+
/** Pixel height for `.st-table` when `display.visibleBodyRows` is set (measured from DOM). */
|
|
10400
|
+
this.scrollViewportHeightPx = signal(null, ...(ngDevMode ? [{ debugName: "scrollViewportHeightPx" }] : /* istanbul ignore next */ []));
|
|
10401
|
+
this.viewportMeasureRaf = 0;
|
|
10402
|
+
this.tableResizeObserver = null;
|
|
10403
|
+
this.observedTableElement = null;
|
|
10404
|
+
this.fallbackBodyRowPx = 32;
|
|
10405
|
+
this.trackByRowIndex = (index, row) => {
|
|
10406
|
+
return this.getAbsoluteRowIndex(index);
|
|
10407
|
+
};
|
|
10408
|
+
// Effect to sync virtual scroll signal to observables (for template compatibility)
|
|
10409
|
+
effect(() => {
|
|
10410
|
+
const state = this.virtualScrollState();
|
|
10411
|
+
this.virtualScrollTotalHeight$.next(state?.totalHeight ?? 0);
|
|
10412
|
+
this.virtualScrollOffsetY$.next(state?.offsetY ?? 0);
|
|
10413
|
+
this.virtualScrollOffsetYNeg$.next((state?.offsetY ?? 0) * -1);
|
|
10414
|
+
this.visibleRows$.next(this.visibleRows());
|
|
10415
|
+
});
|
|
10416
|
+
// Recompute scroll viewport when config/data grid changes (standard mode + visibleBodyRows)
|
|
10417
|
+
effect(() => {
|
|
10418
|
+
this.mergedConfig();
|
|
10419
|
+
this.visibleCellGrid();
|
|
10420
|
+
const merged = this.mergedConfig();
|
|
10421
|
+
const vrb = merged?.display?.visibleBodyRows;
|
|
10422
|
+
const vsOn = merged?.display?.virtualScroll?.enabled === true;
|
|
10423
|
+
if (vsOn || vrb == null || Number(vrb) <= 0) {
|
|
10424
|
+
this.scrollViewportHeightPx.set(null);
|
|
10425
|
+
this.detachTableResizeObserver();
|
|
10426
|
+
return;
|
|
10427
|
+
}
|
|
10428
|
+
afterNextRender(() => this.scheduleScrollViewportMeasure(), { injector: this.injector });
|
|
10429
|
+
});
|
|
10430
|
+
}
|
|
10431
|
+
ngOnInit() {
|
|
10432
|
+
const config = this.tableConfig();
|
|
10433
|
+
if (!config) {
|
|
10434
|
+
throw new Error('tableConfig must be provided');
|
|
10435
|
+
}
|
|
10436
|
+
// Merge config with defaults
|
|
10437
|
+
const merged = mergeTableConfig(config);
|
|
10438
|
+
this.mergedConfig.set(merged);
|
|
10439
|
+
// Validate configuration if enabled
|
|
10440
|
+
if (this.validateConfig()) {
|
|
10441
|
+
this.validateConfiguration(merged);
|
|
10442
|
+
}
|
|
10443
|
+
// Create or use TableState
|
|
10444
|
+
const externalState = this.tableState();
|
|
10445
|
+
if (!externalState) {
|
|
10446
|
+
this.createInternalTableState();
|
|
10447
|
+
}
|
|
10448
|
+
else {
|
|
10449
|
+
this.subscribeToExternalTableState();
|
|
10450
|
+
}
|
|
10451
|
+
// Setup data source (sync or async)
|
|
10452
|
+
this.setupDataSource();
|
|
10453
|
+
// Calculate sticky offsets
|
|
10454
|
+
const rowNumberWidth = merged.showRowNumber ? 30 : 0;
|
|
10279
10455
|
const settingsColumnWidth = this.hasRowActions() ? 28 : 0;
|
|
10280
10456
|
this.getActiveTableState().calculateStickyOffsets(rowNumberWidth, settingsColumnWidth);
|
|
10281
10457
|
// Initialize visible columns and cell grid
|
|
@@ -10701,6 +10877,54 @@ class StTableComponent {
|
|
|
10701
10877
|
onAddColumnClick() {
|
|
10702
10878
|
this.showColumnModal.set(true);
|
|
10703
10879
|
}
|
|
10880
|
+
onTableActionsButtonClick(position) {
|
|
10881
|
+
if (this.tableActionsMenuIsOpen()) {
|
|
10882
|
+
this.closeTableActionsMenu();
|
|
10883
|
+
}
|
|
10884
|
+
else {
|
|
10885
|
+
this.tableActionsMenuIsOpen.set(true);
|
|
10886
|
+
this.tableActionsMenuPosition.set(position);
|
|
10887
|
+
this.tableActionsMenuView.set('main');
|
|
10888
|
+
document.body.style.overflow = 'hidden';
|
|
10889
|
+
}
|
|
10890
|
+
}
|
|
10891
|
+
closeTableActionsMenu() {
|
|
10892
|
+
this.tableActionsMenuIsOpen.set(false);
|
|
10893
|
+
this.tableActionsMenuPosition.set({ x: 0, y: 0 });
|
|
10894
|
+
this.tableActionsMenuView.set('main');
|
|
10895
|
+
document.body.style.overflow = '';
|
|
10896
|
+
}
|
|
10897
|
+
onTableActionsAddColumn() {
|
|
10898
|
+
this.closeTableActionsMenu();
|
|
10899
|
+
this.onAddColumnClick();
|
|
10900
|
+
}
|
|
10901
|
+
openTableActionsColumnsView() {
|
|
10902
|
+
this.tableActionsMenuView.set('columns');
|
|
10903
|
+
}
|
|
10904
|
+
backToTableActionsMain() {
|
|
10905
|
+
this.tableActionsMenuView.set('main');
|
|
10906
|
+
}
|
|
10907
|
+
onTableActionsToggleColumn(columnKey, event) {
|
|
10908
|
+
event.stopPropagation();
|
|
10909
|
+
const cols = this.getActiveTableState()?.getAllColumnsVisibility() || [];
|
|
10910
|
+
const column = cols.find(col => col.key === columnKey);
|
|
10911
|
+
if (column?.hideable !== false) {
|
|
10912
|
+
this.getActiveTableState().toggleColumnVisibility(columnKey);
|
|
10913
|
+
}
|
|
10914
|
+
}
|
|
10915
|
+
getTableActionsColumnsVisibility() {
|
|
10916
|
+
return this.getActiveTableState()?.getAllColumnsVisibility() || [];
|
|
10917
|
+
}
|
|
10918
|
+
tableActionsDropdownStyle() {
|
|
10919
|
+
const pos = this.tableActionsMenuPosition();
|
|
10920
|
+
const dropdownWidth = 220;
|
|
10921
|
+
return {
|
|
10922
|
+
'position': 'fixed',
|
|
10923
|
+
'left': `${pos.x - dropdownWidth}px`,
|
|
10924
|
+
'top': `${pos.y}px`,
|
|
10925
|
+
'z-index': TableZIndex.TABLE_ACTIONS_DROPDOWN
|
|
10926
|
+
};
|
|
10927
|
+
}
|
|
10704
10928
|
onColumnCreated(column) {
|
|
10705
10929
|
const columns = this.getActiveColumns();
|
|
10706
10930
|
const addEvent = {
|
|
@@ -10881,34 +11105,41 @@ class StTableComponent {
|
|
|
10881
11105
|
// rather than landing on the next row's settings-trigger.
|
|
10882
11106
|
event.preventDefault();
|
|
10883
11107
|
event.stopPropagation();
|
|
10884
|
-
this.focusNextOutsideTable();
|
|
10885
|
-
}
|
|
10886
|
-
break;
|
|
10887
|
-
}
|
|
10888
|
-
}
|
|
10889
|
-
/** Move focus to the first focusable element after the table host. */
|
|
10890
|
-
focusNextOutsideTable() {
|
|
10891
|
-
|
|
10892
|
-
const all = Array.from(document.querySelectorAll(focusableSelector));
|
|
10893
|
-
const host = this.elementRef.nativeElement;
|
|
10894
|
-
const next = all.find(el => {
|
|
10895
|
-
if (host.contains(el))
|
|
10896
|
-
return false;
|
|
10897
|
-
return !!(host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
|
|
10898
|
-
});
|
|
10899
|
-
next?.focus();
|
|
11108
|
+
this.focusNextOutsideTable();
|
|
11109
|
+
}
|
|
11110
|
+
break;
|
|
11111
|
+
}
|
|
11112
|
+
}
|
|
11113
|
+
/** Move focus to the first focusable element after the table host. */
|
|
11114
|
+
focusNextOutsideTable() {
|
|
11115
|
+
this.focusFirstThatTakesFocus(this.getFocusableOutsideTable(Node.DOCUMENT_POSITION_FOLLOWING));
|
|
10900
11116
|
}
|
|
10901
11117
|
/** Move focus to the last focusable element before the table host. */
|
|
10902
11118
|
focusPrevOutsideTable() {
|
|
11119
|
+
this.focusFirstThatTakesFocus(this.getFocusableOutsideTable(Node.DOCUMENT_POSITION_PRECEDING).reverse());
|
|
11120
|
+
}
|
|
11121
|
+
getFocusableOutsideTable(position) {
|
|
10903
11122
|
const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
10904
|
-
const all = Array.from(document.querySelectorAll(focusableSelector));
|
|
10905
11123
|
const host = this.elementRef.nativeElement;
|
|
10906
|
-
|
|
11124
|
+
return Array.from(document.querySelectorAll(focusableSelector)).filter(el => {
|
|
10907
11125
|
if (host.contains(el))
|
|
10908
11126
|
return false;
|
|
10909
|
-
|
|
11127
|
+
if (!(host.compareDocumentPosition(el) & position))
|
|
11128
|
+
return false;
|
|
11129
|
+
// Hidden elements (items of closed dropdowns, inactive tab panels, …) match the
|
|
11130
|
+
// selector but silently swallow focus(), trapping keyboard users on the trigger.
|
|
11131
|
+
return el.getClientRects().length > 0 && getComputedStyle(el).visibility !== 'hidden';
|
|
10910
11132
|
});
|
|
10911
|
-
|
|
11133
|
+
}
|
|
11134
|
+
/** focus() can still no-op (inert ancestors, shadow hosts) — walk candidates until one takes focus. */
|
|
11135
|
+
focusFirstThatTakesFocus(candidates) {
|
|
11136
|
+
for (const el of candidates) {
|
|
11137
|
+
el.focus();
|
|
11138
|
+
const active = document.activeElement;
|
|
11139
|
+
if (active === el || el.contains(active)) {
|
|
11140
|
+
return;
|
|
11141
|
+
}
|
|
11142
|
+
}
|
|
10912
11143
|
}
|
|
10913
11144
|
openColumnMenuFromKeyboard(columnIndex, isFirst, isLast) {
|
|
10914
11145
|
const headers = this.elementRef.nativeElement.querySelectorAll('thead .st-header');
|
|
@@ -11570,588 +11801,292 @@ class StTableComponent {
|
|
|
11570
11801
|
const columnIndex = cols.findIndex(col => col.key === columnKey);
|
|
11571
11802
|
if (rowIndex !== undefined && columnIndex >= 0) {
|
|
11572
11803
|
this.getActiveTableState().setEditingCell(rowIndex, columnIndex);
|
|
11573
|
-
}
|
|
11574
|
-
}
|
|
11575
|
-
}
|
|
11576
|
-
onCellSave(event) {
|
|
11577
|
-
this.cellSave.emit(event);
|
|
11578
|
-
if (this.isKeyboardNavigationEnabled()) {
|
|
11579
|
-
this.getActiveTableState().clearEditingCell();
|
|
11580
|
-
}
|
|
11581
|
-
}
|
|
11582
|
-
onCellCancel(event) {
|
|
11583
|
-
this.cellCancel.emit(event);
|
|
11584
|
-
if (this.isKeyboardNavigationEnabled()) {
|
|
11585
|
-
this.getActiveTableState().clearEditingCell();
|
|
11586
|
-
}
|
|
11587
|
-
}
|
|
11588
|
-
onCellSaveAndNavigate(event) {
|
|
11589
|
-
if (this.isKeyboardNavigationEnabled()) {
|
|
11590
|
-
this.getActiveTableState().clearEditingCell();
|
|
11591
|
-
setTimeout(() => {
|
|
11592
|
-
this.getActiveTableState().moveFocus(event.direction);
|
|
11593
|
-
}, 0);
|
|
11594
|
-
}
|
|
11595
|
-
}
|
|
11596
|
-
onHeaderTabOut() {
|
|
11597
|
-
const tableEl = this.elementRef.nativeElement.querySelector('.st-table');
|
|
11598
|
-
tableEl?.focus();
|
|
11599
|
-
}
|
|
11600
|
-
/** Get the column-action button at a given column index, if it exists. */
|
|
11601
|
-
getHeaderMenuButton(colIndex) {
|
|
11602
|
-
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11603
|
-
return headers[colIndex]?.querySelector('.column-menu-trigger') ?? null;
|
|
11604
|
-
}
|
|
11605
|
-
/**
|
|
11606
|
-
* Focus the column-action button at colIndex, or — if that column has no
|
|
11607
|
-
* action button — the nearest column to its right (then left) that does.
|
|
11608
|
-
*/
|
|
11609
|
-
focusHeader(colIndex) {
|
|
11610
|
-
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11611
|
-
let btn = this.getHeaderMenuButton(colIndex);
|
|
11612
|
-
if (btn) {
|
|
11613
|
-
btn.focus();
|
|
11614
|
-
return;
|
|
11615
|
-
}
|
|
11616
|
-
for (let i = colIndex + 1; i < headers.length; i++) {
|
|
11617
|
-
btn = this.getHeaderMenuButton(i);
|
|
11618
|
-
if (btn) {
|
|
11619
|
-
btn.focus();
|
|
11620
|
-
return;
|
|
11621
|
-
}
|
|
11622
|
-
}
|
|
11623
|
-
for (let i = colIndex - 1; i >= 0; i--) {
|
|
11624
|
-
btn = this.getHeaderMenuButton(i);
|
|
11625
|
-
if (btn) {
|
|
11626
|
-
btn.focus();
|
|
11627
|
-
return;
|
|
11628
|
-
}
|
|
11629
|
-
}
|
|
11630
|
-
}
|
|
11631
|
-
/** Focus the next/previous column-action button after colIndex, skipping columns without actions. */
|
|
11632
|
-
focusAdjacentHeader(colIndex, direction) {
|
|
11633
|
-
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11634
|
-
const step = direction === 'right' ? 1 : -1;
|
|
11635
|
-
for (let i = colIndex + step; i >= 0 && i < headers.length; i += step) {
|
|
11636
|
-
const btn = this.getHeaderMenuButton(i);
|
|
11637
|
-
if (btn) {
|
|
11638
|
-
btn.focus();
|
|
11639
|
-
return;
|
|
11640
|
-
}
|
|
11641
|
-
}
|
|
11642
|
-
}
|
|
11643
|
-
onHeaderNavigate(direction, colIndex) {
|
|
11644
|
-
switch (direction) {
|
|
11645
|
-
case 'left':
|
|
11646
|
-
this.focusAdjacentHeader(colIndex, 'left');
|
|
11647
|
-
break;
|
|
11648
|
-
case 'right':
|
|
11649
|
-
this.focusAdjacentHeader(colIndex, 'right');
|
|
11650
|
-
break;
|
|
11651
|
-
case 'up':
|
|
11652
|
-
// ArrowUp from header → back to sheet tabs
|
|
11653
|
-
this.requestFocusTabs.emit();
|
|
11654
|
-
break;
|
|
11655
|
-
case 'down':
|
|
11656
|
-
// ArrowDown from header → enter the table at the same column
|
|
11657
|
-
this.getActiveTableState().focusCell(0, colIndex);
|
|
11658
|
-
break;
|
|
11659
|
-
}
|
|
11660
|
-
}
|
|
11661
|
-
onTableContainerFocus(event) {
|
|
11662
|
-
if (!this.isKeyboardNavigationEnabled())
|
|
11663
|
-
return;
|
|
11664
|
-
const tableState = this.getActiveTableState();
|
|
11665
|
-
const currentFocus = tableState.getFocusedPosition();
|
|
11666
|
-
const grid = this.visibleCellGrid();
|
|
11667
|
-
const cols = this.visibleColumns();
|
|
11668
|
-
if (!currentFocus && grid.length > 0 && cols.length > 0) {
|
|
11669
|
-
tableState.focusCell(0, 0);
|
|
11670
|
-
}
|
|
11671
|
-
}
|
|
11672
|
-
isKeyboardNavigationEnabled() {
|
|
11673
|
-
const merged = this.mergedConfig();
|
|
11674
|
-
return merged?.features?.keyboardNavigation?.enabled ?? false;
|
|
11675
|
-
}
|
|
11676
|
-
getEditModeForCells() {
|
|
11677
|
-
if (this.isKeyboardNavigationEnabled()) {
|
|
11678
|
-
return EditMode.ENTER;
|
|
11679
|
-
}
|
|
11680
|
-
return EditMode.CLICK;
|
|
11681
|
-
}
|
|
11682
|
-
onDocumentClick(event) {
|
|
11683
|
-
if (!this.isKeyboardNavigationEnabled())
|
|
11684
|
-
return;
|
|
11685
|
-
const target = event.target;
|
|
11686
|
-
const tableElement = target.closest('.st-table');
|
|
11687
|
-
const portalElement = target.closest('.nile-select-portal-append');
|
|
11688
|
-
const composedPath = event.composedPath?.() || [];
|
|
11689
|
-
const isInsideNileElement = composedPath.some((el) => {
|
|
11690
|
-
if (el instanceof HTMLElement) {
|
|
11691
|
-
const tagName = el.tagName?.toLowerCase();
|
|
11692
|
-
return tagName?.startsWith('nile-') ||
|
|
11693
|
-
el.classList?.contains('nile-select-portal-append');
|
|
11694
|
-
}
|
|
11695
|
-
return false;
|
|
11696
|
-
});
|
|
11697
|
-
// CodeMirror completion/hover layers are often on document.body (not under .st-table)
|
|
11698
|
-
const isInsideCodeMirrorTooltip = composedPath.some((el) => el instanceof Element && !!el.closest?.('.cm-tooltip'));
|
|
11699
|
-
if (!tableElement && !portalElement && !isInsideNileElement && !isInsideCodeMirrorTooltip) {
|
|
11700
|
-
this.getActiveTableState().clearFocus();
|
|
11701
|
-
this.getActiveTableState().clearEditingCell();
|
|
11702
|
-
}
|
|
11703
|
-
}
|
|
11704
|
-
ngOnDestroy() {
|
|
11705
|
-
if (this.viewportMeasureRaf !== 0) {
|
|
11706
|
-
cancelAnimationFrame(this.viewportMeasureRaf);
|
|
11707
|
-
this.viewportMeasureRaf = 0;
|
|
11708
|
-
}
|
|
11709
|
-
this.detachTableResizeObserver();
|
|
11710
|
-
this.stateSubscription?.unsubscribe();
|
|
11711
|
-
this.scrollSubscription?.unsubscribe();
|
|
11712
|
-
this.focusSubscription?.unsubscribe();
|
|
11713
|
-
this.validationSubscription?.unsubscribe();
|
|
11714
|
-
this.dataSubscription?.unsubscribe();
|
|
11715
|
-
this.requestAddRowSubscription?.unsubscribe();
|
|
11716
|
-
this.virtualScrollTotalHeight$.complete();
|
|
11717
|
-
this.virtualScrollOffsetY$.complete();
|
|
11718
|
-
this.virtualScrollOffsetYNeg$.complete();
|
|
11719
|
-
this.visibleRows$.complete();
|
|
11720
|
-
this.internalData$.complete();
|
|
11721
|
-
}
|
|
11722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 </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 '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 [tableState]=\"getActiveTableState()\"\n [allowAddColumn]=\"mergedConfig()?.features?.columnManagement?.allowAdd || false\"\n (addColumnClicked)=\"onAddColumnClick()\">\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<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}.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: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
11724
|
-
}
|
|
11725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StTableComponent, decorators: [{
|
|
11726
|
-
type: Component,
|
|
11727
|
-
args: [{ selector: 'st-table', standalone: true, imports: [
|
|
11728
|
-
CommonModule,
|
|
11729
|
-
StPaginationComponent,
|
|
11730
|
-
StHeaderComponent,
|
|
11731
|
-
StCellComponent,
|
|
11732
|
-
StTableActionsComponent,
|
|
11733
|
-
StColumnMenuDropdownComponent,
|
|
11734
|
-
StRowActionsDropdownComponent,
|
|
11735
|
-
StKeyboardNavigationDirective,
|
|
11736
|
-
StColumnResizeDirective
|
|
11737
|
-
], 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 </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 '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 [tableState]=\"getActiveTableState()\"\n [allowAddColumn]=\"mergedConfig()?.features?.columnManagement?.allowAdd || false\"\n (addColumnClicked)=\"onAddColumnClick()\">\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<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}.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"] }]
|
|
11738
|
-
}], 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: [{
|
|
11739
|
-
type: ViewChild,
|
|
11740
|
-
args: ['scrollViewport', { read: ElementRef }]
|
|
11741
|
-
}], onDocumentClick: [{
|
|
11742
|
-
type: HostListener,
|
|
11743
|
-
args: ['document:click', ['$event']]
|
|
11744
|
-
}] } });
|
|
11745
|
-
|
|
11746
|
-
class StColumnVisibilityComponent {
|
|
11747
|
-
constructor() {
|
|
11748
|
-
this.isOpen = false;
|
|
11749
|
-
this.columnsVisibility = [];
|
|
11750
|
-
}
|
|
11751
|
-
ngOnInit() {
|
|
11752
|
-
if (!this.tableState) {
|
|
11753
|
-
console.warn('tableState is required for st-column-visibility component');
|
|
11754
|
-
return;
|
|
11755
|
-
}
|
|
11756
|
-
// Initialize with current state
|
|
11757
|
-
this.updateColumnsVisibility();
|
|
11758
|
-
// Subscribe to state changes to update visibility list
|
|
11759
|
-
this.subscribeToStateChanges();
|
|
11760
|
-
}
|
|
11761
|
-
ngOnChanges(changes) {
|
|
11762
|
-
// Handle tableState changes (when columns are added/removed)
|
|
11763
|
-
if (changes['tableState'] && !changes['tableState'].firstChange) {
|
|
11764
|
-
// Unsubscribe from old state
|
|
11765
|
-
this.stateSubscription?.unsubscribe();
|
|
11766
|
-
// Update columns visibility with new state
|
|
11767
|
-
if (this.tableState) {
|
|
11768
|
-
this.updateColumnsVisibility();
|
|
11769
|
-
// Re-subscribe to new state changes
|
|
11770
|
-
this.subscribeToStateChanges();
|
|
11771
|
-
}
|
|
11772
|
-
}
|
|
11773
|
-
}
|
|
11774
|
-
/**
|
|
11775
|
-
* Update columns visibility list from current table state
|
|
11776
|
-
*/
|
|
11777
|
-
updateColumnsVisibility() {
|
|
11778
|
-
if (this.tableState) {
|
|
11779
|
-
this.columnsVisibility = this.tableState.getAllColumnsVisibility();
|
|
11780
|
-
}
|
|
11781
|
-
}
|
|
11782
|
-
/**
|
|
11783
|
-
* Subscribe to table state changes
|
|
11784
|
-
*/
|
|
11785
|
-
subscribeToStateChanges() {
|
|
11786
|
-
if (!this.tableState)
|
|
11787
|
-
return;
|
|
11788
|
-
this.stateSubscription = this.tableState.stateChange$
|
|
11789
|
-
.subscribe(event => {
|
|
11790
|
-
if (event.type === 'column-visibility' || event.type === 'column-config') {
|
|
11791
|
-
this.updateColumnsVisibility();
|
|
11792
|
-
}
|
|
11793
|
-
});
|
|
11794
|
-
}
|
|
11795
|
-
ngOnDestroy() {
|
|
11796
|
-
this.stateSubscription?.unsubscribe();
|
|
11797
|
-
}
|
|
11798
|
-
toggleMenu(event) {
|
|
11799
|
-
event.stopPropagation();
|
|
11800
|
-
this.isOpen = !this.isOpen;
|
|
11801
|
-
}
|
|
11802
|
-
closeMenu() {
|
|
11803
|
-
this.isOpen = false;
|
|
11804
|
-
}
|
|
11805
|
-
getColumnsVisibility() {
|
|
11806
|
-
return this.columnsVisibility;
|
|
11807
|
-
}
|
|
11808
|
-
isColumnHideable(column) {
|
|
11809
|
-
return column.hideable !== false; // Default to true if not set
|
|
11810
|
-
}
|
|
11811
|
-
onToggleColumn(columnKey, event) {
|
|
11812
|
-
event.stopPropagation();
|
|
11813
|
-
// Check if column is hideable before toggling (defensive check)
|
|
11814
|
-
const column = this.columnsVisibility.find(col => col.key === columnKey);
|
|
11815
|
-
if (column && !this.isColumnHideable(column)) {
|
|
11816
|
-
return;
|
|
11817
|
-
}
|
|
11818
|
-
if (this.tableState) {
|
|
11819
|
-
this.tableState.toggleColumnVisibility(columnKey);
|
|
11804
|
+
}
|
|
11820
11805
|
}
|
|
11821
11806
|
}
|
|
11822
|
-
|
|
11823
|
-
|
|
11824
|
-
|
|
11807
|
+
onCellSave(event) {
|
|
11808
|
+
this.cellSave.emit(event);
|
|
11809
|
+
if (this.isKeyboardNavigationEnabled()) {
|
|
11810
|
+
this.getActiveTableState().clearEditingCell();
|
|
11825
11811
|
}
|
|
11826
|
-
const column = this.tableState.getColumns().find(col => col.key === columnKey);
|
|
11827
|
-
return column ? (column.visible !== false) : true;
|
|
11828
|
-
}
|
|
11829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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:600;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 }] }); }
|
|
11831
|
-
}
|
|
11832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
|
|
11833
|
-
type: Component,
|
|
11834
|
-
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:600;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"] }]
|
|
11835
|
-
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
11836
|
-
type: Input
|
|
11837
|
-
}] } });
|
|
11838
|
-
|
|
11839
|
-
class StAddColumnButtonComponent {
|
|
11840
|
-
constructor() {
|
|
11841
|
-
this.enabled = false;
|
|
11842
|
-
this.addColumnClicked = new EventEmitter();
|
|
11843
11812
|
}
|
|
11844
|
-
|
|
11845
|
-
|
|
11846
|
-
this.
|
|
11813
|
+
onCellCancel(event) {
|
|
11814
|
+
this.cellCancel.emit(event);
|
|
11815
|
+
if (this.isKeyboardNavigationEnabled()) {
|
|
11816
|
+
this.getActiveTableState().clearEditingCell();
|
|
11817
|
+
}
|
|
11847
11818
|
}
|
|
11848
|
-
|
|
11849
|
-
|
|
11850
|
-
|
|
11851
|
-
|
|
11852
|
-
|
|
11853
|
-
|
|
11854
|
-
}
|
|
11855
|
-
type: Input
|
|
11856
|
-
}], addColumnClicked: [{
|
|
11857
|
-
type: Output
|
|
11858
|
-
}] } });
|
|
11859
|
-
|
|
11860
|
-
/**
|
|
11861
|
-
* Column Editor Component
|
|
11862
|
-
* Form-based column configuration
|
|
11863
|
-
*/
|
|
11864
|
-
class ColumnEditorComponent {
|
|
11865
|
-
constructor(fb) {
|
|
11866
|
-
this.fb = fb;
|
|
11867
|
-
this.columnUpdated = new EventEmitter();
|
|
11868
|
-
this.cancel = new EventEmitter();
|
|
11869
|
-
this.dataTypes = [
|
|
11870
|
-
{ value: CellDataType.STRING, label: 'Text' },
|
|
11871
|
-
{ value: CellDataType.NUMBER, label: 'Number' },
|
|
11872
|
-
{ value: CellDataType.DATE, label: 'Date' },
|
|
11873
|
-
{ value: CellDataType.BOOLEAN, label: 'Boolean' },
|
|
11874
|
-
{ value: CellDataType.CUSTOM, label: 'Custom' }
|
|
11875
|
-
];
|
|
11876
|
-
this.alignments = [
|
|
11877
|
-
{ value: CellAlignment.LEFT, label: 'Left' },
|
|
11878
|
-
{ value: CellAlignment.CENTER, label: 'Center' },
|
|
11879
|
-
{ value: CellAlignment.RIGHT, label: 'Right' }
|
|
11880
|
-
];
|
|
11881
|
-
this.verticalAlignments = [
|
|
11882
|
-
{ value: CellVerticalAlignment.TOP, label: 'Top' },
|
|
11883
|
-
{ value: CellVerticalAlignment.MIDDLE, label: 'Middle' },
|
|
11884
|
-
{ value: CellVerticalAlignment.BOTTOM, label: 'Bottom' }
|
|
11885
|
-
];
|
|
11886
|
-
this.editModes = [
|
|
11887
|
-
{ value: EditMode.CLICK, label: 'Click' },
|
|
11888
|
-
{ value: EditMode.MANUAL, label: 'Manual' },
|
|
11889
|
-
{ value: EditMode.NONE, label: 'None' }
|
|
11890
|
-
];
|
|
11891
|
-
this.stickyOptions = [
|
|
11892
|
-
{ value: false, label: 'None' },
|
|
11893
|
-
{ value: 'left', label: 'Left' },
|
|
11894
|
-
{ value: 'right', label: 'Right' }
|
|
11895
|
-
];
|
|
11819
|
+
onCellSaveAndNavigate(event) {
|
|
11820
|
+
if (this.isKeyboardNavigationEnabled()) {
|
|
11821
|
+
this.getActiveTableState().clearEditingCell();
|
|
11822
|
+
setTimeout(() => {
|
|
11823
|
+
this.getActiveTableState().moveFocus(event.direction);
|
|
11824
|
+
}, 0);
|
|
11825
|
+
}
|
|
11896
11826
|
}
|
|
11897
|
-
|
|
11898
|
-
this.
|
|
11827
|
+
onHeaderTabOut() {
|
|
11828
|
+
const tableEl = this.elementRef.nativeElement.querySelector('.st-table');
|
|
11829
|
+
tableEl?.focus();
|
|
11899
11830
|
}
|
|
11900
|
-
|
|
11901
|
-
|
|
11902
|
-
|
|
11903
|
-
|
|
11831
|
+
/** Get the column-action button at a given column index, if it exists. */
|
|
11832
|
+
getHeaderMenuButton(colIndex) {
|
|
11833
|
+
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11834
|
+
return headers[colIndex]?.querySelector('.column-menu-trigger') ?? null;
|
|
11904
11835
|
}
|
|
11905
11836
|
/**
|
|
11906
|
-
*
|
|
11837
|
+
* Focus the column-action button at colIndex, or — if that column has no
|
|
11838
|
+
* action button — the nearest column to its right (then left) that does.
|
|
11907
11839
|
*/
|
|
11908
|
-
|
|
11909
|
-
|
|
11910
|
-
|
|
11911
|
-
|
|
11912
|
-
|
|
11913
|
-
|
|
11914
|
-
|
|
11915
|
-
|
|
11916
|
-
|
|
11917
|
-
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
movable: [this.column.movable !== false],
|
|
11921
|
-
pinnable: [this.column.pinnable !== false],
|
|
11922
|
-
enableMenu: [this.column.enableMenu !== false],
|
|
11923
|
-
// Layout
|
|
11924
|
-
width: [this.column.width || ''],
|
|
11925
|
-
minWidth: [this.column.minWidth || ''],
|
|
11926
|
-
maxWidth: [this.column.maxWidth || ''],
|
|
11927
|
-
sticky: [this.column.sticky || false],
|
|
11928
|
-
alignment: [this.column.alignment || CellAlignment.LEFT],
|
|
11929
|
-
verticalAlignment: [this.column.verticalAlignment || CellVerticalAlignment.MIDDLE],
|
|
11930
|
-
// Edit mode
|
|
11931
|
-
editMode: [this.column.editMode || EditMode.CLICK],
|
|
11932
|
-
// Display
|
|
11933
|
-
visible: [this.column.visible !== false],
|
|
11934
|
-
truncate: [this.column.truncate || false]
|
|
11935
|
-
});
|
|
11936
|
-
// Subscribe to hideable changes to enforce visible=true when hideable=false
|
|
11937
|
-
this.form.get('hideable')?.valueChanges.subscribe(hideable => {
|
|
11938
|
-
if (!hideable) {
|
|
11939
|
-
this.form.get('visible')?.setValue(true, { emitEvent: false });
|
|
11840
|
+
focusHeader(colIndex) {
|
|
11841
|
+
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11842
|
+
let btn = this.getHeaderMenuButton(colIndex);
|
|
11843
|
+
if (btn) {
|
|
11844
|
+
btn.focus();
|
|
11845
|
+
return;
|
|
11846
|
+
}
|
|
11847
|
+
for (let i = colIndex + 1; i < headers.length; i++) {
|
|
11848
|
+
btn = this.getHeaderMenuButton(i);
|
|
11849
|
+
if (btn) {
|
|
11850
|
+
btn.focus();
|
|
11851
|
+
return;
|
|
11940
11852
|
}
|
|
11941
|
-
}
|
|
11942
|
-
|
|
11943
|
-
|
|
11853
|
+
}
|
|
11854
|
+
for (let i = colIndex - 1; i >= 0; i--) {
|
|
11855
|
+
btn = this.getHeaderMenuButton(i);
|
|
11856
|
+
if (btn) {
|
|
11857
|
+
btn.focus();
|
|
11858
|
+
return;
|
|
11859
|
+
}
|
|
11860
|
+
}
|
|
11944
11861
|
}
|
|
11945
|
-
/**
|
|
11946
|
-
|
|
11947
|
-
|
|
11948
|
-
|
|
11949
|
-
|
|
11950
|
-
|
|
11951
|
-
|
|
11952
|
-
|
|
11953
|
-
|
|
11954
|
-
|
|
11955
|
-
|
|
11956
|
-
sortable: this.column.sortable !== false,
|
|
11957
|
-
filterable: this.column.filterable !== false,
|
|
11958
|
-
resizable: this.column.resizable !== false,
|
|
11959
|
-
hideable: this.column.hideable !== false,
|
|
11960
|
-
movable: this.column.movable !== false,
|
|
11961
|
-
pinnable: this.column.pinnable !== false,
|
|
11962
|
-
enableMenu: this.column.enableMenu !== false,
|
|
11963
|
-
width: this.column.width || '',
|
|
11964
|
-
minWidth: this.column.minWidth || '',
|
|
11965
|
-
maxWidth: this.column.maxWidth || '',
|
|
11966
|
-
sticky: this.column.sticky || false,
|
|
11967
|
-
alignment: this.column.alignment || CellAlignment.LEFT,
|
|
11968
|
-
verticalAlignment: this.column.verticalAlignment || CellVerticalAlignment.MIDDLE,
|
|
11969
|
-
editMode: this.column.editMode || EditMode.CLICK,
|
|
11970
|
-
visible: this.column.visible !== false,
|
|
11971
|
-
truncate: this.column.truncate || false
|
|
11972
|
-
}, { emitEvent: false });
|
|
11862
|
+
/** Focus the next/previous column-action button after colIndex, skipping columns without actions. */
|
|
11863
|
+
focusAdjacentHeader(colIndex, direction) {
|
|
11864
|
+
const headers = Array.from(this.elementRef.nativeElement.querySelectorAll('thead .st-header'));
|
|
11865
|
+
const step = direction === 'right' ? 1 : -1;
|
|
11866
|
+
for (let i = colIndex + step; i >= 0 && i < headers.length; i += step) {
|
|
11867
|
+
const btn = this.getHeaderMenuButton(i);
|
|
11868
|
+
if (btn) {
|
|
11869
|
+
btn.focus();
|
|
11870
|
+
return;
|
|
11871
|
+
}
|
|
11872
|
+
}
|
|
11973
11873
|
}
|
|
11974
|
-
|
|
11975
|
-
|
|
11976
|
-
|
|
11977
|
-
|
|
11978
|
-
|
|
11979
|
-
|
|
11980
|
-
|
|
11981
|
-
|
|
11982
|
-
|
|
11983
|
-
|
|
11984
|
-
|
|
11985
|
-
|
|
11986
|
-
|
|
11987
|
-
|
|
11988
|
-
|
|
11989
|
-
|
|
11990
|
-
pinnable: formValue.pinnable,
|
|
11991
|
-
enableMenu: formValue.enableMenu,
|
|
11992
|
-
width: formValue.width || undefined,
|
|
11993
|
-
minWidth: formValue.minWidth || undefined,
|
|
11994
|
-
maxWidth: formValue.maxWidth || undefined,
|
|
11995
|
-
sticky: formValue.sticky || undefined,
|
|
11996
|
-
alignment: formValue.alignment,
|
|
11997
|
-
verticalAlignment: formValue.verticalAlignment,
|
|
11998
|
-
editMode: formValue.editMode,
|
|
11999
|
-
visible: formValue.visible,
|
|
12000
|
-
truncate: formValue.truncate
|
|
12001
|
-
};
|
|
12002
|
-
// Convert empty strings to undefined
|
|
12003
|
-
Object.keys(updates).forEach(key => {
|
|
12004
|
-
const value = updates[key];
|
|
12005
|
-
if (value === '' || value === null) {
|
|
12006
|
-
updates[key] = undefined;
|
|
12007
|
-
}
|
|
12008
|
-
});
|
|
12009
|
-
this.columnUpdated.emit(updates);
|
|
11874
|
+
onHeaderNavigate(direction, colIndex) {
|
|
11875
|
+
switch (direction) {
|
|
11876
|
+
case 'left':
|
|
11877
|
+
this.focusAdjacentHeader(colIndex, 'left');
|
|
11878
|
+
break;
|
|
11879
|
+
case 'right':
|
|
11880
|
+
this.focusAdjacentHeader(colIndex, 'right');
|
|
11881
|
+
break;
|
|
11882
|
+
case 'up':
|
|
11883
|
+
// ArrowUp from header → back to sheet tabs
|
|
11884
|
+
this.requestFocusTabs.emit();
|
|
11885
|
+
break;
|
|
11886
|
+
case 'down':
|
|
11887
|
+
// ArrowDown from header → enter the table at the same column
|
|
11888
|
+
this.getActiveTableState().focusCell(0, colIndex);
|
|
11889
|
+
break;
|
|
12010
11890
|
}
|
|
12011
|
-
|
|
12012
|
-
|
|
12013
|
-
|
|
12014
|
-
|
|
12015
|
-
|
|
11891
|
+
}
|
|
11892
|
+
onTableContainerFocus(event) {
|
|
11893
|
+
if (!this.isKeyboardNavigationEnabled())
|
|
11894
|
+
return;
|
|
11895
|
+
const tableState = this.getActiveTableState();
|
|
11896
|
+
const currentFocus = tableState.getFocusedPosition();
|
|
11897
|
+
const grid = this.visibleCellGrid();
|
|
11898
|
+
const cols = this.visibleColumns();
|
|
11899
|
+
if (!currentFocus && grid.length > 0 && cols.length > 0) {
|
|
11900
|
+
tableState.focusCell(0, 0);
|
|
12016
11901
|
}
|
|
12017
11902
|
}
|
|
12018
|
-
|
|
12019
|
-
|
|
12020
|
-
|
|
12021
|
-
onCancel() {
|
|
12022
|
-
this.cancel.emit();
|
|
11903
|
+
isKeyboardNavigationEnabled() {
|
|
11904
|
+
const merged = this.mergedConfig();
|
|
11905
|
+
return merged?.features?.keyboardNavigation?.enabled ?? false;
|
|
12023
11906
|
}
|
|
12024
|
-
|
|
12025
|
-
|
|
12026
|
-
|
|
12027
|
-
getErrorMessage(controlName) {
|
|
12028
|
-
const control = this.form.get(controlName);
|
|
12029
|
-
if (control?.hasError('required')) {
|
|
12030
|
-
return 'This field is required';
|
|
11907
|
+
getEditModeForCells() {
|
|
11908
|
+
if (this.isKeyboardNavigationEnabled()) {
|
|
11909
|
+
return EditMode.ENTER;
|
|
12031
11910
|
}
|
|
12032
|
-
|
|
12033
|
-
|
|
11911
|
+
return EditMode.CLICK;
|
|
11912
|
+
}
|
|
11913
|
+
onDocumentClick(event) {
|
|
11914
|
+
if (!this.isKeyboardNavigationEnabled())
|
|
11915
|
+
return;
|
|
11916
|
+
const target = event.target;
|
|
11917
|
+
const tableElement = target.closest('.st-table');
|
|
11918
|
+
const portalElement = target.closest('.nile-select-portal-append');
|
|
11919
|
+
const composedPath = event.composedPath?.() || [];
|
|
11920
|
+
const isInsideNileElement = composedPath.some((el) => {
|
|
11921
|
+
if (el instanceof HTMLElement) {
|
|
11922
|
+
const tagName = el.tagName?.toLowerCase();
|
|
11923
|
+
return tagName?.startsWith('nile-') ||
|
|
11924
|
+
el.classList?.contains('nile-select-portal-append');
|
|
11925
|
+
}
|
|
11926
|
+
return false;
|
|
11927
|
+
});
|
|
11928
|
+
// CodeMirror completion/hover layers are often on document.body (not under .st-table)
|
|
11929
|
+
const isInsideCodeMirrorTooltip = composedPath.some((el) => el instanceof Element && !!el.closest?.('.cm-tooltip'));
|
|
11930
|
+
if (!tableElement && !portalElement && !isInsideNileElement && !isInsideCodeMirrorTooltip) {
|
|
11931
|
+
this.getActiveTableState().clearFocus();
|
|
11932
|
+
this.getActiveTableState().clearEditingCell();
|
|
12034
11933
|
}
|
|
12035
|
-
return '';
|
|
12036
11934
|
}
|
|
12037
|
-
|
|
12038
|
-
|
|
12039
|
-
|
|
12040
|
-
|
|
12041
|
-
|
|
12042
|
-
|
|
11935
|
+
ngOnDestroy() {
|
|
11936
|
+
if (this.viewportMeasureRaf !== 0) {
|
|
11937
|
+
cancelAnimationFrame(this.viewportMeasureRaf);
|
|
11938
|
+
this.viewportMeasureRaf = 0;
|
|
11939
|
+
}
|
|
11940
|
+
this.detachTableResizeObserver();
|
|
11941
|
+
this.stateSubscription?.unsubscribe();
|
|
11942
|
+
this.scrollSubscription?.unsubscribe();
|
|
11943
|
+
this.focusSubscription?.unsubscribe();
|
|
11944
|
+
this.validationSubscription?.unsubscribe();
|
|
11945
|
+
this.dataSubscription?.unsubscribe();
|
|
11946
|
+
this.requestAddRowSubscription?.unsubscribe();
|
|
11947
|
+
this.virtualScrollTotalHeight$.complete();
|
|
11948
|
+
this.virtualScrollOffsetY$.complete();
|
|
11949
|
+
this.virtualScrollOffsetYNeg$.complete();
|
|
11950
|
+
this.visibleRows$.complete();
|
|
11951
|
+
this.internalData$.complete();
|
|
12043
11952
|
}
|
|
12044
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12045
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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"] }] }); }
|
|
11953
|
+
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" }] }); }
|
|
12046
11955
|
}
|
|
12047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StTableComponent, decorators: [{
|
|
12048
11957
|
type: Component,
|
|
12049
|
-
args: [{ selector: 'st-
|
|
12050
|
-
|
|
12051
|
-
|
|
12052
|
-
|
|
12053
|
-
|
|
12054
|
-
|
|
12055
|
-
|
|
12056
|
-
|
|
12057
|
-
|
|
11958
|
+
args: [{ selector: 'st-table', standalone: true, imports: [
|
|
11959
|
+
CommonModule,
|
|
11960
|
+
StPaginationComponent,
|
|
11961
|
+
StHeaderComponent,
|
|
11962
|
+
StCellComponent,
|
|
11963
|
+
StTableActionsComponent,
|
|
11964
|
+
StColumnMenuDropdownComponent,
|
|
11965
|
+
StRowActionsDropdownComponent,
|
|
11966
|
+
StKeyboardNavigationDirective,
|
|
11967
|
+
StColumnResizeDirective,
|
|
11968
|
+
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: [{
|
|
11971
|
+
type: ViewChild,
|
|
11972
|
+
args: ['scrollViewport', { read: ElementRef }]
|
|
11973
|
+
}], onDocumentClick: [{
|
|
11974
|
+
type: HostListener,
|
|
11975
|
+
args: ['document:click', ['$event']]
|
|
12058
11976
|
}] } });
|
|
12059
11977
|
|
|
12060
|
-
class
|
|
11978
|
+
class StColumnVisibilityComponent {
|
|
12061
11979
|
constructor() {
|
|
12062
|
-
this.
|
|
12063
|
-
this.
|
|
12064
|
-
this.columnIndex = -1;
|
|
11980
|
+
this.isOpen = false;
|
|
11981
|
+
this.columnsVisibility = [];
|
|
12065
11982
|
}
|
|
12066
11983
|
ngOnInit() {
|
|
12067
|
-
|
|
12068
|
-
|
|
12069
|
-
|
|
12070
|
-
|
|
12071
|
-
//
|
|
12072
|
-
|
|
12073
|
-
|
|
12074
|
-
|
|
12075
|
-
*/
|
|
12076
|
-
createDefaultColumn() {
|
|
12077
|
-
return ColumnConfigFactory.text('newColumn', {
|
|
12078
|
-
header: 'New Column',
|
|
12079
|
-
editable: true,
|
|
12080
|
-
sortable: true,
|
|
12081
|
-
filterable: true,
|
|
12082
|
-
resizable: true,
|
|
12083
|
-
hideable: true,
|
|
12084
|
-
visible: true
|
|
12085
|
-
});
|
|
11984
|
+
if (!this.tableState) {
|
|
11985
|
+
console.warn('tableState is required for st-column-visibility component');
|
|
11986
|
+
return;
|
|
11987
|
+
}
|
|
11988
|
+
// Initialize with current state
|
|
11989
|
+
this.updateColumnsVisibility();
|
|
11990
|
+
// Subscribe to state changes to update visibility list
|
|
11991
|
+
this.subscribeToStateChanges();
|
|
12086
11992
|
}
|
|
12087
|
-
|
|
12088
|
-
|
|
12089
|
-
|
|
12090
|
-
|
|
12091
|
-
|
|
12092
|
-
|
|
12093
|
-
this.
|
|
11993
|
+
ngOnChanges(changes) {
|
|
11994
|
+
// Handle tableState changes (when columns are added/removed)
|
|
11995
|
+
if (changes['tableState'] && !changes['tableState'].firstChange) {
|
|
11996
|
+
// Unsubscribe from old state
|
|
11997
|
+
this.stateSubscription?.unsubscribe();
|
|
11998
|
+
// Update columns visibility with new state
|
|
11999
|
+
if (this.tableState) {
|
|
12000
|
+
this.updateColumnsVisibility();
|
|
12001
|
+
// Re-subscribe to new state changes
|
|
12002
|
+
this.subscribeToStateChanges();
|
|
12003
|
+
}
|
|
12094
12004
|
}
|
|
12095
12005
|
}
|
|
12096
12006
|
/**
|
|
12097
|
-
*
|
|
12007
|
+
* Update columns visibility list from current table state
|
|
12098
12008
|
*/
|
|
12099
|
-
|
|
12100
|
-
|
|
12101
|
-
|
|
12102
|
-
// Use ColumnConfigFactory to create proper column based on data type
|
|
12103
|
-
let finalColumn;
|
|
12104
|
-
const key = updates.key || this.newColumn.key;
|
|
12105
|
-
const dataType = updates.dataType || this.newColumn.dataType;
|
|
12106
|
-
switch (dataType) {
|
|
12107
|
-
case CellDataType.NUMBER:
|
|
12108
|
-
finalColumn = ColumnConfigFactory.number(key, this.newColumn);
|
|
12109
|
-
break;
|
|
12110
|
-
case CellDataType.DATE:
|
|
12111
|
-
finalColumn = ColumnConfigFactory.date(key, this.newColumn);
|
|
12112
|
-
break;
|
|
12113
|
-
case CellDataType.BOOLEAN:
|
|
12114
|
-
finalColumn = ColumnConfigFactory.boolean(key, this.newColumn);
|
|
12115
|
-
break;
|
|
12116
|
-
default:
|
|
12117
|
-
finalColumn = ColumnConfigFactory.text(key, this.newColumn);
|
|
12009
|
+
updateColumnsVisibility() {
|
|
12010
|
+
if (this.tableState) {
|
|
12011
|
+
this.columnsVisibility = this.tableState.getAllColumnsVisibility();
|
|
12118
12012
|
}
|
|
12119
|
-
// Emit the created column
|
|
12120
|
-
this.columnCreated.emit(finalColumn);
|
|
12121
12013
|
}
|
|
12122
12014
|
/**
|
|
12123
|
-
*
|
|
12015
|
+
* Subscribe to table state changes
|
|
12124
12016
|
*/
|
|
12125
|
-
|
|
12126
|
-
this.
|
|
12017
|
+
subscribeToStateChanges() {
|
|
12018
|
+
if (!this.tableState)
|
|
12019
|
+
return;
|
|
12020
|
+
this.stateSubscription = this.tableState.stateChange$
|
|
12021
|
+
.subscribe(event => {
|
|
12022
|
+
if (event.type === 'column-visibility' || event.type === 'column-config') {
|
|
12023
|
+
this.updateColumnsVisibility();
|
|
12024
|
+
}
|
|
12025
|
+
});
|
|
12127
12026
|
}
|
|
12128
|
-
|
|
12129
|
-
|
|
12130
|
-
|
|
12131
|
-
|
|
12132
|
-
|
|
12133
|
-
|
|
12027
|
+
ngOnDestroy() {
|
|
12028
|
+
this.stateSubscription?.unsubscribe();
|
|
12029
|
+
}
|
|
12030
|
+
toggleMenu(event) {
|
|
12031
|
+
event.stopPropagation();
|
|
12032
|
+
this.isOpen = !this.isOpen;
|
|
12033
|
+
}
|
|
12034
|
+
closeMenu() {
|
|
12035
|
+
this.isOpen = false;
|
|
12036
|
+
}
|
|
12037
|
+
getColumnsVisibility() {
|
|
12038
|
+
return this.columnsVisibility;
|
|
12039
|
+
}
|
|
12040
|
+
isColumnHideable(column) {
|
|
12041
|
+
return column.hideable !== false; // Default to true if not set
|
|
12042
|
+
}
|
|
12043
|
+
onToggleColumn(columnKey, event) {
|
|
12044
|
+
event.stopPropagation();
|
|
12045
|
+
// Check if column is hideable before toggling (defensive check)
|
|
12046
|
+
const column = this.columnsVisibility.find(col => col.key === columnKey);
|
|
12047
|
+
if (column && !this.isColumnHideable(column)) {
|
|
12048
|
+
return;
|
|
12049
|
+
}
|
|
12050
|
+
if (this.tableState) {
|
|
12051
|
+
this.tableState.toggleColumnVisibility(columnKey);
|
|
12134
12052
|
}
|
|
12135
12053
|
}
|
|
12136
|
-
|
|
12137
|
-
|
|
12138
|
-
|
|
12139
|
-
|
|
12054
|
+
isColumnVisible(columnKey) {
|
|
12055
|
+
if (!this.tableState) {
|
|
12056
|
+
return true;
|
|
12057
|
+
}
|
|
12058
|
+
const column = this.tableState.getColumns().find(col => col.key === columnKey);
|
|
12059
|
+
return column ? (column.visible !== false) : true;
|
|
12060
|
+
}
|
|
12061
|
+
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:600;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
|
+
}
|
|
12064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
|
|
12065
|
+
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:600;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
|
+
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
12068
|
+
type: Input
|
|
12069
|
+
}] } });
|
|
12070
|
+
|
|
12071
|
+
class StAddColumnButtonComponent {
|
|
12072
|
+
constructor() {
|
|
12073
|
+
this.enabled = false;
|
|
12074
|
+
this.addColumnClicked = new EventEmitter();
|
|
12075
|
+
}
|
|
12076
|
+
onClick(event) {
|
|
12140
12077
|
event.stopPropagation();
|
|
12078
|
+
this.addColumnClicked.emit();
|
|
12141
12079
|
}
|
|
12142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
12080
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StAddColumnButtonComponent, isStandalone: true, selector: "st-add-column-button", inputs: { enabled: "enabled" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "@if (enabled) {\n <button \n class=\"st-add-column-button\"\n (click)=\"onClick($event)\"\n type=\"button\"\n title=\"Add Column\"\n aria-label=\"Add new column\">\n <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
12144
12082
|
}
|
|
12145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
|
|
12146
12084
|
type: Component,
|
|
12147
|
-
args: [{ selector: 'st-column-
|
|
12148
|
-
}], propDecorators: {
|
|
12149
|
-
type:
|
|
12150
|
-
}],
|
|
12085
|
+
args: [{ selector: 'st-add-column-button', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (enabled) {\n <button \n class=\"st-add-column-button\"\n (click)=\"onClick($event)\"\n type=\"button\"\n title=\"Add Column\"\n aria-label=\"Add new column\">\n <svg class=\"st-add-column-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n}\n", styles: [".st-add-column-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:#1976d2;color:#fff;border:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.st-add-column-button:hover{background-color:#1565c0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:scale(1.05)}.st-add-column-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:scale(.98)}.st-add-column-button:focus{outline:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f,0 0 0 3px #1976d24d}.st-add-column-icon{width:24px;height:24px}\n"] }]
|
|
12086
|
+
}], propDecorators: { enabled: [{
|
|
12087
|
+
type: Input
|
|
12088
|
+
}], addColumnClicked: [{
|
|
12151
12089
|
type: Output
|
|
12152
|
-
}], columnEditor: [{
|
|
12153
|
-
type: ViewChild,
|
|
12154
|
-
args: [ColumnEditorComponent]
|
|
12155
12090
|
}] } });
|
|
12156
12091
|
|
|
12157
12092
|
class StSheetActionsComponent {
|
|
@@ -12249,10 +12184,10 @@ class StSheetActionsComponent {
|
|
|
12249
12184
|
right: `${window.innerWidth - rect.right}px`
|
|
12250
12185
|
};
|
|
12251
12186
|
}
|
|
12252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StSheetActionsComponent, isStandalone: true, selector: "st-sheet-actions", inputs: { actions: "actions", sheetId: "sheetId" }, outputs: { actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visibleActions.length > 0) {\n <button \n class=\"sheet-actions-button\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Sheet Actions\"\n aria-label=\"Sheet actions menu\"\n [class.active]=\"isOpen\">\n <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n \n <!-- Dropdown menu -->\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n @for (action of visibleActions; track action.id) {\n <nile-menu-item \n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n \n @if (visibleActions.length === 0) {\n <nile-menu-item>\n No actions available\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
12254
12189
|
}
|
|
12255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StSheetActionsComponent, decorators: [{
|
|
12256
12191
|
type: Component,
|
|
12257
12192
|
args: [{ selector: 'st-sheet-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (visibleActions.length > 0) {\n <button \n class=\"sheet-actions-button\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Sheet Actions\"\n aria-label=\"Sheet actions menu\"\n [class.active]=\"isOpen\">\n <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n </button>\n}\n\n<!-- Dropdown container -->\n@if (isOpen) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n \n <!-- Dropdown menu -->\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n @for (action of visibleActions; track action.id) {\n <nile-menu-item \n [class.disabled]=\"isActionDisabled(action)\"\n (click)=\"onActionClick(action, $event)\">\n @if (action.icon) {\n <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n }\n {{ action.label }}\n </nile-menu-item>\n }\n \n @if (visibleActions.length === 0) {\n <nile-menu-item>\n No actions available\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n </div>\n}\n", styles: [":host{display:inline-block}.sheet-actions-button{display:flex;align-items:center;justify-content:center;width:2rem;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;color:var(--nile-color-neutral-600)}.sheet-actions-button nile-icon{font-size:16px}.dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.dropdown-container>*{pointer-events:auto}.dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.dropdown-menu{position:absolute;min-width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}\n"] }]
|
|
12258
12193
|
}], ctorParameters: () => [], propDecorators: { actions: [{
|
|
@@ -12653,10 +12588,10 @@ class StConditionValueEditorComponent {
|
|
|
12653
12588
|
this.activeSlot = null;
|
|
12654
12589
|
this.dropdownOpen = false;
|
|
12655
12590
|
}
|
|
12656
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12657
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }); }
|
|
12591
|
+
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 }); }
|
|
12658
12593
|
}
|
|
12659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, decorators: [{
|
|
12660
12595
|
type: Component,
|
|
12661
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"] }]
|
|
12662
12597
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
@@ -12743,10 +12678,10 @@ class StConditionFieldPickerComponent {
|
|
|
12743
12678
|
const el = this.dropdownRef?.nativeElement;
|
|
12744
12679
|
el?.hide?.();
|
|
12745
12680
|
}
|
|
12746
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12747
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12681
|
+
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(--nile-colors-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 }); }
|
|
12748
12683
|
}
|
|
12749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, decorators: [{
|
|
12750
12685
|
type: Component,
|
|
12751
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(--nile-colors-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"] }]
|
|
12752
12687
|
}], propDecorators: { value: [{
|
|
@@ -12895,10 +12830,10 @@ class StConditionRuleComponent {
|
|
|
12895
12830
|
emit(next) {
|
|
12896
12831
|
this.ruleChange.emit(next);
|
|
12897
12832
|
}
|
|
12898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12899
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12833
|
+
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(--nile-colors-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(--nile-colors-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 }); }
|
|
12900
12835
|
}
|
|
12901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, decorators: [{
|
|
12902
12837
|
type: Component,
|
|
12903
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(--nile-colors-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(--nile-colors-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"] }]
|
|
12904
12839
|
}], propDecorators: { rule: [{
|
|
@@ -13029,10 +12964,10 @@ class StConditionGroupComponent {
|
|
|
13029
12964
|
emit(next) {
|
|
13030
12965
|
this.groupChange.emit(next);
|
|
13031
12966
|
}
|
|
13032
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13033
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12967
|
+
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(--nile-colors-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(--nile-colors-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 }); }
|
|
13034
12969
|
}
|
|
13035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, decorators: [{
|
|
13036
12971
|
type: Component,
|
|
13037
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(--nile-colors-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(--nile-colors-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"] }]
|
|
13038
12973
|
}], propDecorators: { group: [{
|
|
@@ -13156,10 +13091,10 @@ class ConditionValidationService {
|
|
|
13156
13091
|
}
|
|
13157
13092
|
return `${index + 1}.${subIndex + 1}`;
|
|
13158
13093
|
}
|
|
13159
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13160
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
13094
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConditionValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
13095
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConditionValidationService, providedIn: 'root' }); }
|
|
13161
13096
|
}
|
|
13162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConditionValidationService, decorators: [{
|
|
13163
13098
|
type: Injectable,
|
|
13164
13099
|
args: [{ providedIn: 'root' }]
|
|
13165
13100
|
}] });
|
|
@@ -13413,10 +13348,10 @@ class StConditionBuilderComponent {
|
|
|
13413
13348
|
],
|
|
13414
13349
|
};
|
|
13415
13350
|
}
|
|
13416
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
13351
|
+
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(--nile-colors-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(--nile-colors-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 }); }
|
|
13418
13353
|
}
|
|
13419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, decorators: [{
|
|
13420
13355
|
type: Component,
|
|
13421
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(--nile-colors-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(--nile-colors-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"] }]
|
|
13422
13357
|
}], propDecorators: { config: [{
|
|
@@ -13588,10 +13523,10 @@ class StSheetComponent {
|
|
|
13588
13523
|
get headerVariant() {
|
|
13589
13524
|
return this.config?.display?.headerVariant || 'default';
|
|
13590
13525
|
}
|
|
13591
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
13526
|
+
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" }] }); }
|
|
13593
13528
|
}
|
|
13594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StSheetComponent, decorators: [{
|
|
13595
13530
|
type: Component,
|
|
13596
13531
|
args: [{ selector: 'st-sheet', standalone: true, imports: [CommonModule, StTableComponent, StSheetActionsComponent, StConditionBuilderComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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"] }]
|
|
13597
13532
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
@@ -13708,10 +13643,10 @@ class AutosaveService {
|
|
|
13708
13643
|
this.dirtyState.clear();
|
|
13709
13644
|
this.lastSaveTime.clear();
|
|
13710
13645
|
}
|
|
13711
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13712
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
13646
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
13647
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
|
|
13713
13648
|
}
|
|
13714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutosaveService, decorators: [{
|
|
13715
13650
|
type: Injectable,
|
|
13716
13651
|
args: [{
|
|
13717
13652
|
providedIn: 'root'
|
|
@@ -13785,6 +13720,22 @@ class StWorkbookComponent {
|
|
|
13785
13720
|
this.beforeUnloadHandler = null;
|
|
13786
13721
|
/** Sheet ID rendered in the last updateActiveSheet — used to skip key bumps that would otherwise re-mount the content on every config update. */
|
|
13787
13722
|
this.lastRenderedSheetId = null;
|
|
13723
|
+
/**
|
|
13724
|
+
* Pipe-joined column.key sequence for the table currently mounted in the
|
|
13725
|
+
* shared panel. We compare this on every `updateActiveSheet` to detect
|
|
13726
|
+
* structural column changes (insert / remove / reorder) WITHIN the same
|
|
13727
|
+
* sheet id and trigger a `tableComponentKey` bump so <st-table> rebuilds
|
|
13728
|
+
* its cell grid. Header text / width / formatter changes do NOT change the
|
|
13729
|
+
* key sequence, so cosmetic config updates stay flicker-free.
|
|
13730
|
+
*/
|
|
13731
|
+
this.lastRenderedColumnKeys = '';
|
|
13732
|
+
/**
|
|
13733
|
+
* Monotonic counter appended to `tableComponentKey` so consecutive bumps
|
|
13734
|
+
* (e.g. two column changes in the same millisecond) are guaranteed unique
|
|
13735
|
+
* even when `Date.now()` collides — without this, Angular's `@for…track`
|
|
13736
|
+
* sees the same key and skips the destroy/recreate we need.
|
|
13737
|
+
*/
|
|
13738
|
+
this.tableComponentKeyCounter = 0;
|
|
13788
13739
|
// Sync fullscreen signal to observable
|
|
13789
13740
|
effect(() => {
|
|
13790
13741
|
this.isFullscreen$.next(this.isFullscreen());
|
|
@@ -14098,10 +14049,16 @@ class StWorkbookComponent {
|
|
|
14098
14049
|
return;
|
|
14099
14050
|
this.selectedSheet.set(sheet);
|
|
14100
14051
|
this.selectedSheetIndex.set(this.activeSheetIndex());
|
|
14101
|
-
//
|
|
14102
|
-
//
|
|
14103
|
-
//
|
|
14104
|
-
//
|
|
14052
|
+
// Bump the @for track key only when the table needs to be recreated:
|
|
14053
|
+
// 1. Sheet id changed — user switched to a different sheet.
|
|
14054
|
+
// 2. Column key sequence changed — columns inserted / removed / reordered
|
|
14055
|
+
// within the SAME sheet id. `st-table` builds its cell grid in
|
|
14056
|
+
// ngOnInit and doesn't react to later `tableConfig` signal changes,
|
|
14057
|
+
// so without this bump cells stay bound to the old column positions.
|
|
14058
|
+
//
|
|
14059
|
+
// Cosmetic updates that keep the same column-key order (header text,
|
|
14060
|
+
// width, formatter swap, etc.) do NOT trigger a bump — that's what keeps
|
|
14061
|
+
// condition-builder valueChange edits flicker-free.
|
|
14105
14062
|
const sheetIdChanged = sheet.id !== this.lastRenderedSheetId;
|
|
14106
14063
|
this.lastRenderedSheetId = sheet.id;
|
|
14107
14064
|
const contentType = sheet.contentType ?? 'table';
|
|
@@ -14110,8 +14067,11 @@ class StWorkbookComponent {
|
|
|
14110
14067
|
this.currentTableConfig.set(null);
|
|
14111
14068
|
this.currentTableState.set(null);
|
|
14112
14069
|
this.currentTableData$.next([]);
|
|
14070
|
+
// The table is destroyed here; clear the tracker so switching back to
|
|
14071
|
+
// a table sheet correctly registers a key-sequence change.
|
|
14072
|
+
this.lastRenderedColumnKeys = '';
|
|
14113
14073
|
if (sheetIdChanged) {
|
|
14114
|
-
this.tableComponentKey.set(`${sheet.id}-${Date.now()}`);
|
|
14074
|
+
this.tableComponentKey.set(`${sheet.id}-${Date.now()}-${++this.tableComponentKeyCounter}`);
|
|
14115
14075
|
}
|
|
14116
14076
|
return;
|
|
14117
14077
|
}
|
|
@@ -14124,8 +14084,13 @@ class StWorkbookComponent {
|
|
|
14124
14084
|
this.currentTableConfig.set({ ...sheet.tableConfig });
|
|
14125
14085
|
this.currentTableData$.next(sheetData);
|
|
14126
14086
|
this.currentTableState.set(tableState);
|
|
14127
|
-
|
|
14128
|
-
|
|
14087
|
+
const newColumnKeys = (sheet.tableConfig.columns ?? [])
|
|
14088
|
+
.map(c => c.key)
|
|
14089
|
+
.join('|');
|
|
14090
|
+
const columnsStructurallyChanged = newColumnKeys !== this.lastRenderedColumnKeys;
|
|
14091
|
+
this.lastRenderedColumnKeys = newColumnKeys;
|
|
14092
|
+
if (sheetIdChanged || columnsStructurallyChanged) {
|
|
14093
|
+
this.tableComponentKey.set(`${sheet.id}-${Date.now()}-${++this.tableComponentKeyCounter}`);
|
|
14129
14094
|
}
|
|
14130
14095
|
this.activeState.setSheetTableState(sheet.id, tableState);
|
|
14131
14096
|
}
|
|
@@ -14476,10 +14441,10 @@ class StWorkbookComponent {
|
|
|
14476
14441
|
this.tableComponent.scrollToLastRow(focusFirstCell);
|
|
14477
14442
|
}
|
|
14478
14443
|
}
|
|
14479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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" }] }); }
|
|
14444
|
+
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" }] }); }
|
|
14481
14446
|
}
|
|
14482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StWorkbookComponent, decorators: [{
|
|
14483
14448
|
type: Component,
|
|
14484
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"] }]
|
|
14485
14450
|
}], 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: [{
|
|
@@ -14503,10 +14468,10 @@ class ClickOutsideDirective {
|
|
|
14503
14468
|
this.clickOutside.emit();
|
|
14504
14469
|
}
|
|
14505
14470
|
}
|
|
14506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14507
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
14471
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14472
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
|
|
14508
14473
|
}
|
|
14509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
14510
14475
|
type: Directive,
|
|
14511
14476
|
args: [{
|
|
14512
14477
|
selector: '[clickOutside]',
|
|
@@ -14525,11 +14490,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14525
14490
|
* This module breaks the circular dependency between the two modules
|
|
14526
14491
|
*/
|
|
14527
14492
|
class SharedTableComponentsModule {
|
|
14528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14529
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
14530
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
14493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
14494
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
|
|
14495
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
|
|
14531
14496
|
}
|
|
14532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
|
|
14533
14498
|
type: NgModule,
|
|
14534
14499
|
args: [{
|
|
14535
14500
|
imports: [
|
|
@@ -14542,8 +14507,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14542
14507
|
}] });
|
|
14543
14508
|
|
|
14544
14509
|
class SmartTableModule {
|
|
14545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14546
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
14510
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
14511
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
|
|
14547
14512
|
StCellComponent,
|
|
14548
14513
|
StTableComponent,
|
|
14549
14514
|
StHeaderComponent,
|
|
@@ -14587,7 +14552,7 @@ class SmartTableModule {
|
|
|
14587
14552
|
ClickOutsideDirective,
|
|
14588
14553
|
StColumnResizeDirective,
|
|
14589
14554
|
StKeyboardNavigationDirective] }); }
|
|
14590
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
14555
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SmartTableModule, providers: [
|
|
14591
14556
|
VirtualScrollService
|
|
14592
14557
|
], imports: [SharedTableComponentsModule,
|
|
14593
14558
|
StCellComponent,
|
|
@@ -14610,7 +14575,7 @@ class SmartTableModule {
|
|
|
14610
14575
|
StConditionValueEditorComponent,
|
|
14611
14576
|
StConditionFieldPickerComponent] }); }
|
|
14612
14577
|
}
|
|
14613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SmartTableModule, decorators: [{
|
|
14614
14579
|
type: NgModule,
|
|
14615
14580
|
args: [{
|
|
14616
14581
|
imports: [
|
|
@@ -14904,10 +14869,10 @@ class DefinitionBuilderService {
|
|
|
14904
14869
|
// Simple comparison - in production, use a deep equality library
|
|
14905
14870
|
return JSON.stringify(config1) === JSON.stringify(config2);
|
|
14906
14871
|
}
|
|
14907
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14908
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
14872
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
14873
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
|
|
14909
14874
|
}
|
|
14910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderService, decorators: [{
|
|
14911
14876
|
type: Injectable,
|
|
14912
14877
|
args: [{
|
|
14913
14878
|
providedIn: 'root'
|
|
@@ -15273,10 +15238,10 @@ class DefinitionExportService {
|
|
|
15273
15238
|
document.body.removeChild(link);
|
|
15274
15239
|
URL.revokeObjectURL(url);
|
|
15275
15240
|
}
|
|
15276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15277
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
15241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
15242
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
|
|
15278
15243
|
}
|
|
15279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionExportService, decorators: [{
|
|
15280
15245
|
type: Injectable,
|
|
15281
15246
|
args: [{
|
|
15282
15247
|
providedIn: 'root'
|
|
@@ -15625,10 +15590,10 @@ class DefinitionImportService {
|
|
|
15625
15590
|
return errorResult;
|
|
15626
15591
|
}
|
|
15627
15592
|
}
|
|
15628
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15629
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
15593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionImportService, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
15594
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
|
|
15630
15595
|
}
|
|
15631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionImportService, decorators: [{
|
|
15632
15597
|
type: Injectable,
|
|
15633
15598
|
args: [{
|
|
15634
15599
|
providedIn: 'root'
|
|
@@ -15728,10 +15693,10 @@ class BuilderToolbarComponent {
|
|
|
15728
15693
|
onTogglePreview() {
|
|
15729
15694
|
this.previewToggled.emit();
|
|
15730
15695
|
}
|
|
15731
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15732
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
15696
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BuilderToolbarComponent, deps: [{ token: DefinitionBuilderService }, { token: DefinitionExportService }, { token: DefinitionImportService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15697
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BuilderToolbarComponent, isStandalone: true, selector: "st-builder-toolbar", inputs: { hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { newDefinition: "newDefinition", saved: "saved", previewToggled: "previewToggled" }, ngImport: i0, template: "<div class=\"builder-toolbar\">\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n <span>New</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n <span>Open</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n <span>Save</span>\n @if (hasUnsavedChanges) {\n <span class=\"unsaved-indicator\">\u25CF</span>\n }\n </button>\n <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n <span>Load</span>\n </button>\n </div>\n\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n <span>Import JSON</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n <span>Export JSON</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n <span>Export TS</span>\n </button>\n </div>\n\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n <span>Preview</span>\n </button>\n </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
15733
15698
|
}
|
|
15734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
|
|
15735
15700
|
type: Component,
|
|
15736
15701
|
args: [{ selector: 'st-builder-toolbar', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"builder-toolbar\">\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onNewDefinition()\" title=\"New Definition\">\n <span>New</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onOpenFile()\" title=\"Open File\">\n <span>Open</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onSave()\" title=\"Save to LocalStorage\" [class.has-changes]=\"hasUnsavedChanges\">\n <span>Save</span>\n @if (hasUnsavedChanges) {\n <span class=\"unsaved-indicator\">\u25CF</span>\n }\n </button>\n <button class=\"toolbar-btn\" (click)=\"onLoad()\" title=\"Load from LocalStorage\">\n <span>Load</span>\n </button>\n </div>\n\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onImportJSON()\" title=\"Import JSON\">\n <span>Import JSON</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onExportJSON()\" title=\"Export JSON\">\n <span>Export JSON</span>\n </button>\n <button class=\"toolbar-btn\" (click)=\"onExportTypeScript()\" title=\"Export TypeScript\">\n <span>Export TS</span>\n </button>\n </div>\n\n <div class=\"toolbar-section\">\n <button class=\"toolbar-btn\" (click)=\"onTogglePreview()\" title=\"Toggle Preview\">\n <span>Preview</span>\n </button>\n </div>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.toolbar-section{display:flex;align-items:center;gap:.5rem}.toolbar-section:not(:last-child):after{content:\"\";width:1px;height:24px;background-color:#e0e0e0;margin-left:.5rem}.toolbar-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.toolbar-btn:hover{background-color:#f5f5f5;border-color:#b0b0b0}.toolbar-btn:active{background-color:#e8e8e8}.toolbar-btn.has-changes{border-color:#ff9800;background-color:#fff3e0}.toolbar-btn .unsaved-indicator{color:#ff9800;font-size:.75rem;margin-left:.25rem}\n"] }]
|
|
15737
15702
|
}], ctorParameters: () => [{ type: DefinitionBuilderService }, { type: DefinitionExportService }, { type: DefinitionImportService }], propDecorators: { hasUnsavedChanges: [{
|
|
@@ -15844,10 +15809,10 @@ class ColumnListComponent {
|
|
|
15844
15809
|
const type = this.dataTypes.find(dt => dt.value === column.dataType);
|
|
15845
15810
|
return type?.label || 'Text';
|
|
15846
15811
|
}
|
|
15847
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
15812
|
+
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:600;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:500;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 }] }); }
|
|
15849
15814
|
}
|
|
15850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnListComponent, decorators: [{
|
|
15851
15816
|
type: Component,
|
|
15852
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:600;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:500;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"] }]
|
|
15853
15818
|
}], propDecorators: { columns: [{
|
|
@@ -15980,10 +15945,10 @@ class TableConfigEditorComponent {
|
|
|
15980
15945
|
this.configUpdated.emit(updates);
|
|
15981
15946
|
}
|
|
15982
15947
|
}
|
|
15983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
15984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
15948
|
+
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:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;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:500;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:600;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"] }] }); }
|
|
15985
15950
|
}
|
|
15986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
|
|
15987
15952
|
type: Component,
|
|
15988
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:600;color:#333}.config-form{display:flex;flex-direction:column;gap:1.5rem}.config-section h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;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:500;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:600;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"] }]
|
|
15989
15954
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { config: [{
|
|
@@ -16105,10 +16070,10 @@ class SampleDataGeneratorService {
|
|
|
16105
16070
|
generateBooleanValue(rowIndex) {
|
|
16106
16071
|
return rowIndex % 2 === 0;
|
|
16107
16072
|
}
|
|
16108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
16109
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
16073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
16074
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
|
|
16110
16075
|
}
|
|
16111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
|
|
16112
16077
|
type: Injectable,
|
|
16113
16078
|
args: [{
|
|
16114
16079
|
providedIn: 'root'
|
|
@@ -16163,10 +16128,10 @@ class BuilderPreviewComponent {
|
|
|
16163
16128
|
// But we can log them for debugging
|
|
16164
16129
|
console.log('Preview state change:', event);
|
|
16165
16130
|
}
|
|
16166
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
16167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
16131
|
+
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:600;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", "columnAdded", "rowAction", "validationStateChange", "requestAddRow", "requestFocusTabs"] }] }); }
|
|
16168
16133
|
}
|
|
16169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
|
|
16170
16135
|
type: Component,
|
|
16171
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:600;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"] }]
|
|
16172
16137
|
}], ctorParameters: () => [{ type: SampleDataGeneratorService }], propDecorators: { tableConfig: [{
|
|
@@ -16261,10 +16226,10 @@ class DefinitionBuilderComponent {
|
|
|
16261
16226
|
onColumnCancel() {
|
|
16262
16227
|
this.builderService.clearSelection();
|
|
16263
16228
|
}
|
|
16264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
16265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
16229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DefinitionBuilderComponent, isStandalone: true, selector: "st-definition-builder", ngImport: i0, template: "<div class=\"definition-builder\">\n <!-- Toolbar -->\n <st-builder-toolbar\n [hasUnsavedChanges]=\"state.hasUnsavedChanges\"\n (newDefinition)=\"onNewDefinition()\"\n (saved)=\"onSaved()\"\n (previewToggled)=\"onPreviewToggled()\">\n </st-builder-toolbar>\n\n <div class=\"builder-content\">\n <!-- Left Panel: Column List and Table Config -->\n <div class=\"left-panel\">\n <!-- Column List -->\n <st-column-list\n [columns]=\"state.tableConfig.columns\"\n [selectedIndex]=\"state.selectedColumnIndex\"\n (columnSelected)=\"onColumnSelected($event)\"\n (columnAdded)=\"onColumnAdded($event)\"\n (columnDeleted)=\"onColumnDeleted($event)\"\n (columnReordered)=\"onColumnReordered($event.fromIndex, $event.toIndex)\">\n </st-column-list>\n\n <!-- Table Config Editor -->\n <st-table-config-editor\n [config]=\"state.tableConfig\"\n (configUpdated)=\"onTableConfigUpdated($event)\">\n </st-table-config-editor>\n </div>\n\n <!-- Middle Panel: Column Editor -->\n @if (state.selectedColumn) {\n <div class=\"middle-panel\">\n <st-column-editor\n [column]=\"state.selectedColumn\"\n [columnIndex]=\"state.selectedColumnIndex!\"\n (columnUpdated)=\"onColumnUpdated(state.selectedColumnIndex!, $event)\"\n (cancel)=\"onColumnCancel()\">\n </st-column-editor>\n </div>\n }\n\n <!-- Right Panel: Preview -->\n @if (state.previewVisible) {\n <div class=\"right-panel\">\n <st-builder-preview\n [tableConfig]=\"state.tableConfig\">\n </st-builder-preview>\n </div>\n }\n </div>\n</div>\n", styles: [".definition-builder{display:flex;flex-direction:column;height:100%;width:100%;background-color:#f5f5f5}.builder-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.left-panel{display:flex;flex-direction:column;width:300px;min-width:250px;gap:1rem;overflow-y:auto}.middle-panel{flex:1;min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}.right-panel{min-width:400px;overflow-y:auto;background-color:#fff;border-radius:4px;padding:1rem;box-shadow:0 2px 4px #0000001a}@media(max-width:1200px){.right-panel{display:none}}@media(max-width:800px){.builder-content{flex-direction:column}.left-panel,.middle-panel,.right-panel{width:100%;min-width:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BuilderToolbarComponent, selector: "st-builder-toolbar", inputs: ["hasUnsavedChanges"], outputs: ["newDefinition", "saved", "previewToggled"] }, { kind: "component", type: ColumnListComponent, selector: "st-column-list", inputs: ["columns", "selectedIndex"], outputs: ["columnSelected", "columnAdded", "columnDeleted", "columnReordered"] }, { kind: "component", type: TableConfigEditorComponent, selector: "st-table-config-editor", inputs: ["config"], outputs: ["configUpdated"] }, { kind: "component", type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }, { kind: "component", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: ["tableConfig"] }] }); }
|
|
16266
16231
|
}
|
|
16267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
|
|
16268
16233
|
type: Component,
|
|
16269
16234
|
args: [{ selector: 'st-definition-builder', standalone: true, imports: [
|
|
16270
16235
|
CommonModule,
|
|
@@ -16285,8 +16250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
16285
16250
|
* Module for the Visual UI Builder components
|
|
16286
16251
|
*/
|
|
16287
16252
|
class DefinitionBuilderModule {
|
|
16288
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
16289
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
16253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
16254
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
|
|
16290
16255
|
SharedTableComponentsModule,
|
|
16291
16256
|
DefinitionBuilderComponent,
|
|
16292
16257
|
BuilderToolbarComponent,
|
|
@@ -16298,7 +16263,7 @@ class DefinitionBuilderModule {
|
|
|
16298
16263
|
TableConfigEditorComponent,
|
|
16299
16264
|
BuilderPreviewComponent,
|
|
16300
16265
|
SharedTableComponentsModule] }); }
|
|
16301
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
16266
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
|
|
16302
16267
|
SharedTableComponentsModule,
|
|
16303
16268
|
DefinitionBuilderComponent,
|
|
16304
16269
|
BuilderToolbarComponent,
|
|
@@ -16306,7 +16271,7 @@ class DefinitionBuilderModule {
|
|
|
16306
16271
|
TableConfigEditorComponent,
|
|
16307
16272
|
BuilderPreviewComponent, SharedTableComponentsModule] }); }
|
|
16308
16273
|
}
|
|
16309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
|
|
16310
16275
|
type: NgModule,
|
|
16311
16276
|
args: [{
|
|
16312
16277
|
imports: [
|
|
@@ -16359,10 +16324,10 @@ class RowValidationService {
|
|
|
16359
16324
|
};
|
|
16360
16325
|
}
|
|
16361
16326
|
}
|
|
16362
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
16363
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
16327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
16328
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
|
|
16364
16329
|
}
|
|
16365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RowValidationService, decorators: [{
|
|
16366
16331
|
type: Injectable,
|
|
16367
16332
|
args: [{
|
|
16368
16333
|
providedIn: 'root'
|