@aquera/ngx-smart-table 0.0.32 → 0.0.33
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.
|
@@ -7470,10 +7470,10 @@ class StCellComponent {
|
|
|
7470
7470
|
this.editorCleanup = undefined;
|
|
7471
7471
|
}
|
|
7472
7472
|
}
|
|
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.
|
|
7473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
7475
|
}
|
|
7476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StCellComponent, decorators: [{
|
|
7477
7477
|
type: Component,
|
|
7478
7478
|
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
7479
|
}], 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 +8292,10 @@ class ValidationLoggerService {
|
|
|
8292
8292
|
getLogSize() {
|
|
8293
8293
|
return this.logEntries.length;
|
|
8294
8294
|
}
|
|
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.
|
|
8295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ValidationLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8296
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ValidationLoggerService, providedIn: 'root' }); }
|
|
8297
8297
|
}
|
|
8298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ValidationLoggerService, decorators: [{
|
|
8299
8299
|
type: Injectable,
|
|
8300
8300
|
args: [{
|
|
8301
8301
|
providedIn: 'root'
|
|
@@ -8502,10 +8502,10 @@ class JsonSchemaValidatorService {
|
|
|
8502
8502
|
return error.message || `Field '${field}' is invalid`;
|
|
8503
8503
|
}
|
|
8504
8504
|
}
|
|
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.
|
|
8505
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: JsonSchemaValidatorService, deps: [{ token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8506
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: JsonSchemaValidatorService, providedIn: 'root' }); }
|
|
8507
8507
|
}
|
|
8508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: JsonSchemaValidatorService, decorators: [{
|
|
8509
8509
|
type: Injectable,
|
|
8510
8510
|
args: [{
|
|
8511
8511
|
providedIn: 'root'
|
|
@@ -8553,10 +8553,10 @@ class VirtualScrollService {
|
|
|
8553
8553
|
return fromEvent(element, 'scroll').pipe(map((event) => event.target.scrollTop), throttleTime(16, undefined, { leading: true, trailing: true }) // 60fps
|
|
8554
8554
|
);
|
|
8555
8555
|
}
|
|
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.
|
|
8556
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: VirtualScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8557
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: VirtualScrollService }); }
|
|
8558
8558
|
}
|
|
8559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: VirtualScrollService, decorators: [{
|
|
8560
8560
|
type: Injectable
|
|
8561
8561
|
}] });
|
|
8562
8562
|
|
|
@@ -8631,10 +8631,10 @@ class StPaginationComponent {
|
|
|
8631
8631
|
this.tableState.setPageSize(newPageSize);
|
|
8632
8632
|
}
|
|
8633
8633
|
}
|
|
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.
|
|
8634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", 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
8636
|
}
|
|
8637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StPaginationComponent, decorators: [{
|
|
8638
8638
|
type: Component,
|
|
8639
8639
|
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
8640
|
}], propDecorators: { tableState: [{
|
|
@@ -8832,10 +8832,10 @@ class StHeaderComponent {
|
|
|
8832
8832
|
};
|
|
8833
8833
|
this.columnMoved.emit(moveEvent);
|
|
8834
8834
|
}
|
|
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.
|
|
8835
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8836
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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}.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
8837
|
}
|
|
8838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StHeaderComponent, decorators: [{
|
|
8839
8839
|
type: Component,
|
|
8840
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"] }]
|
|
8841
8841
|
}], propDecorators: { column: [{
|
|
@@ -9019,10 +9019,10 @@ class StTableActionsComponent {
|
|
|
9019
9019
|
isColumnHideable(column) {
|
|
9020
9020
|
return column.hideable !== false; // Default to true if not set
|
|
9021
9021
|
}
|
|
9022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StTableActionsComponent, isStandalone: true, selector: "st-table-actions", inputs: { tableState: "tableState", allowAddColumn: "allowAddColumn" }, outputs: { addColumnClicked: "addColumnClicked" }, ngImport: i0, template: "<button \n class=\"table-actions-button\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Table Actions\"\n aria-label=\"Table actions menu\"\n [class.active]=\"isOpen\">\n <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n \n <!-- Main Menu -->\n @if (currentView === 'main') {\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n <!-- Add Column -->\n @if (allowAddColumn) {\n <nile-menu-item (click)=\"onAddColumn($event)\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n \n <!-- Show/Hide Columns -->\n <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\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 <!-- Column Visibility Submenu -->\n @if (currentView === 'columns') {\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n <!-- Back button -->\n <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n \n <nile-divider></nile-divider>\n \n <!-- Column checkboxes -->\n @for (column of columnsVisibility; track column.key) {\n <nile-menu-item \n [class.disabled]=\"!isColumnHideable(column)\"\n (click)=\"onToggleColumn(column.key, $event)\">\n <nile-checkbox \n [checked]=\"isColumnVisible(column.key)\" \n [disabled]=\"!isColumnHideable(column)\" \n [label]=\"column.header || column.key\" \n (nile-change)=\"onToggleColumn(column.key, $event)\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n}\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}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
9024
9024
|
}
|
|
9025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StTableActionsComponent, decorators: [{
|
|
9026
9026
|
type: Component,
|
|
9027
9027
|
args: [{ selector: 'st-table-actions', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<button \n class=\"table-actions-button\"\n (click)=\"toggleMenu($event)\"\n type=\"button\"\n title=\"Table Actions\"\n aria-label=\"Table actions menu\"\n [class.active]=\"isOpen\">\n <nile-icon name=\"settings\"></nile-icon>\n</button>\n\n<!-- Dropdown container with shared pattern -->\n@if (isOpen) {\n <div class=\"dropdown-container\">\n <!-- Backdrop -->\n <div class=\"dropdown-backdrop\" (click)=\"closeMenu()\"></div>\n \n <!-- Main Menu -->\n @if (currentView === 'main') {\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n <!-- Add Column -->\n @if (allowAddColumn) {\n <nile-menu-item (click)=\"onAddColumn($event)\">\n <nile-icon slot=\"prefix\" name=\"plus\" size=\"12\"></nile-icon>\n Add Column\n </nile-menu-item>\n }\n \n <!-- Show/Hide Columns -->\n <nile-menu-item (click)=\"openColumnsSubmenu($event)\">\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 <!-- Column Visibility Submenu -->\n @if (currentView === 'columns') {\n <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n <nile-menu>\n <!-- Back button -->\n <nile-menu-item (click)=\"backToMain($event)\" class=\"back-item\">\n <nile-icon size=\"12\" slot=\"prefix\" name=\"chevron-left\"></nile-icon>\n Back\n </nile-menu-item>\n \n <nile-divider></nile-divider>\n \n <!-- Column checkboxes -->\n @for (column of columnsVisibility; track column.key) {\n <nile-menu-item \n [class.disabled]=\"!isColumnHideable(column)\"\n (click)=\"onToggleColumn(column.key, $event)\">\n <nile-checkbox \n [checked]=\"isColumnVisible(column.key)\" \n [disabled]=\"!isColumnHideable(column)\" \n [label]=\"column.header || column.key\" \n (nile-change)=\"onToggleColumn(column.key, $event)\">\n </nile-checkbox>\n </nile-menu-item>\n }\n </nile-menu>\n </div>\n }\n </div>\n}\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}.dropdown-container{position:fixed;inset:0;z-index:9996}.dropdown-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:9996}.dropdown-menu{position:fixed;pointer-events:auto;z-index:9997;min-width:15rem}nile-menu{max-height:30rem;overflow-y:auto}nile-menu::part(base){width:fit-content;min-height:auto}nile-menu nile-menu-item::part(base){min-height:2.5rem}nile-menu nile-menu-item::part(label){font-size:12px}nile-menu nile-menu-item.back-item{font-weight:500}nile-menu nile-menu-item.disabled{opacity:.5;cursor:not-allowed}nile-menu nile-menu-item nile-checkbox::part(base){display:flex;align-items:center}nile-menu nile-menu-item nile-checkbox::part(label){font-size:12px;margin-top:0}\n"] }]
|
|
9028
9028
|
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
@@ -9380,10 +9380,10 @@ class StColumnFilterComponent {
|
|
|
9380
9380
|
// Align left for first 2 columns to prevent clipping
|
|
9381
9381
|
return this.columnIndex <= 1;
|
|
9382
9382
|
}
|
|
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.
|
|
9383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
9385
|
}
|
|
9386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnFilterComponent, decorators: [{
|
|
9387
9387
|
type: Component,
|
|
9388
9388
|
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
9389
|
}], propDecorators: { filterAnchor: [{
|
|
@@ -9672,10 +9672,10 @@ class StColumnMenuDropdownComponent {
|
|
|
9672
9672
|
// Align left for first 2 columns to prevent clipping
|
|
9673
9673
|
return (this.context?.columnIndex || 0) <= 1;
|
|
9674
9674
|
}
|
|
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.
|
|
9675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
9677
|
}
|
|
9678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
|
|
9679
9679
|
type: Component,
|
|
9680
9680
|
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
9681
|
}], propDecorators: { isOpen: [{
|
|
@@ -9879,10 +9879,10 @@ class StRowActionsDropdownComponent {
|
|
|
9879
9879
|
onDropdownClick(event) {
|
|
9880
9880
|
event.stopPropagation();
|
|
9881
9881
|
}
|
|
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.
|
|
9882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9883
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
9884
|
}
|
|
9885
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
|
|
9886
9886
|
type: Component,
|
|
9887
9887
|
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
9888
|
}], propDecorators: { isOpen: [{
|
|
@@ -10004,10 +10004,10 @@ class StKeyboardNavigationDirective {
|
|
|
10004
10004
|
};
|
|
10005
10005
|
return map[key];
|
|
10006
10006
|
}
|
|
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.
|
|
10007
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10008
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StKeyboardNavigationDirective, isStandalone: true, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
|
|
10009
10009
|
}
|
|
10010
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
|
|
10011
10011
|
type: Directive,
|
|
10012
10012
|
args: [{
|
|
10013
10013
|
selector: '[stKeyboardNavigation]',
|
|
@@ -10119,10 +10119,10 @@ class StColumnResizeDirective {
|
|
|
10119
10119
|
document.removeEventListener('mousemove', this.onResizeMove);
|
|
10120
10120
|
document.removeEventListener('mouseup', this.onResizeEnd);
|
|
10121
10121
|
}
|
|
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.
|
|
10122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10123
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StColumnResizeDirective, isStandalone: true, selector: "[stColumnResize]", inputs: { column: "column" }, outputs: { columnResized: "columnResized", columnResizing: "columnResizing" }, host: { listeners: { "mousedown": "onResizeStart($event)" } }, ngImport: i0 }); }
|
|
10124
10124
|
}
|
|
10125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnResizeDirective, decorators: [{
|
|
10126
10126
|
type: Directive,
|
|
10127
10127
|
args: [{
|
|
10128
10128
|
selector: '[stColumnResize]',
|
|
@@ -11719,10 +11719,10 @@ class StTableComponent {
|
|
|
11719
11719
|
this.visibleRows$.complete();
|
|
11720
11720
|
this.internalData$.complete();
|
|
11721
11721
|
}
|
|
11722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
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" }] }); }
|
|
11722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
11724
|
}
|
|
11725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StTableComponent, decorators: [{
|
|
11726
11726
|
type: Component,
|
|
11727
11727
|
args: [{ selector: 'st-table', standalone: true, imports: [
|
|
11728
11728
|
CommonModule,
|
|
@@ -11826,10 +11826,10 @@ class StColumnVisibilityComponent {
|
|
|
11826
11826
|
const column = this.tableState.getColumns().find(col => col.key === columnKey);
|
|
11827
11827
|
return column ? (column.visible !== false) : true;
|
|
11828
11828
|
}
|
|
11829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
11831
|
}
|
|
11832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnVisibilityComponent, decorators: [{
|
|
11833
11833
|
type: Component,
|
|
11834
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
11835
|
}], ctorParameters: () => [], propDecorators: { tableState: [{
|
|
@@ -11845,10 +11845,10 @@ class StAddColumnButtonComponent {
|
|
|
11845
11845
|
event.stopPropagation();
|
|
11846
11846
|
this.addColumnClicked.emit();
|
|
11847
11847
|
}
|
|
11848
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StAddColumnButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }] }); }
|
|
11850
11850
|
}
|
|
11851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StAddColumnButtonComponent, decorators: [{
|
|
11852
11852
|
type: Component,
|
|
11853
11853
|
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"] }]
|
|
11854
11854
|
}], propDecorators: { enabled: [{
|
|
@@ -12041,10 +12041,10 @@ class ColumnEditorComponent {
|
|
|
12041
12041
|
const control = this.form.get(controlName);
|
|
12042
12042
|
return !!(control && control.invalid && (control.dirty || control.touched));
|
|
12043
12043
|
}
|
|
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"] }] }); }
|
|
12044
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12045
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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"] }] }); }
|
|
12046
12046
|
}
|
|
12047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColumnEditorComponent, decorators: [{
|
|
12048
12048
|
type: Component,
|
|
12049
12049
|
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"] }]
|
|
12050
12050
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { column: [{
|
|
@@ -12139,10 +12139,10 @@ class StColumnEditorModalComponent {
|
|
|
12139
12139
|
onModalContentClick(event) {
|
|
12140
12140
|
event.stopPropagation();
|
|
12141
12141
|
}
|
|
12142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
12142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", 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"] }] }); }
|
|
12144
12144
|
}
|
|
12145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
|
|
12146
12146
|
type: Component,
|
|
12147
12147
|
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"] }]
|
|
12148
12148
|
}], propDecorators: { columnCreated: [{
|
|
@@ -12249,10 +12249,10 @@ class StSheetActionsComponent {
|
|
|
12249
12249
|
right: `${window.innerWidth - rect.right}px`
|
|
12250
12250
|
};
|
|
12251
12251
|
}
|
|
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.
|
|
12252
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StSheetActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
12254
|
}
|
|
12255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StSheetActionsComponent, decorators: [{
|
|
12256
12256
|
type: Component,
|
|
12257
12257
|
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
12258
|
}], ctorParameters: () => [], propDecorators: { actions: [{
|
|
@@ -12653,10 +12653,10 @@ class StConditionValueEditorComponent {
|
|
|
12653
12653
|
this.activeSlot = null;
|
|
12654
12654
|
this.dropdownOpen = false;
|
|
12655
12655
|
}
|
|
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 }); }
|
|
12656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionValueEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
12658
|
}
|
|
12659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionValueEditorComponent, decorators: [{
|
|
12660
12660
|
type: Component,
|
|
12661
12661
|
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
12662
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
@@ -12743,10 +12743,10 @@ class StConditionFieldPickerComponent {
|
|
|
12743
12743
|
const el = this.dropdownRef?.nativeElement;
|
|
12744
12744
|
el?.hide?.();
|
|
12745
12745
|
}
|
|
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.
|
|
12746
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionFieldPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
12748
|
}
|
|
12749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionFieldPickerComponent, decorators: [{
|
|
12750
12750
|
type: Component,
|
|
12751
12751
|
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
12752
|
}], propDecorators: { value: [{
|
|
@@ -12895,10 +12895,10 @@ class StConditionRuleComponent {
|
|
|
12895
12895
|
emit(next) {
|
|
12896
12896
|
this.ruleChange.emit(next);
|
|
12897
12897
|
}
|
|
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.
|
|
12898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
12900
|
}
|
|
12901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionRuleComponent, decorators: [{
|
|
12902
12902
|
type: Component,
|
|
12903
12903
|
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
12904
|
}], propDecorators: { rule: [{
|
|
@@ -13029,10 +13029,10 @@ class StConditionGroupComponent {
|
|
|
13029
13029
|
emit(next) {
|
|
13030
13030
|
this.groupChange.emit(next);
|
|
13031
13031
|
}
|
|
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.
|
|
13032
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13033
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
13034
|
}
|
|
13035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionGroupComponent, decorators: [{
|
|
13036
13036
|
type: Component,
|
|
13037
13037
|
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
13038
|
}], propDecorators: { group: [{
|
|
@@ -13156,10 +13156,10 @@ class ConditionValidationService {
|
|
|
13156
13156
|
}
|
|
13157
13157
|
return `${index + 1}.${subIndex + 1}`;
|
|
13158
13158
|
}
|
|
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.
|
|
13159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ConditionValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
13160
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ConditionValidationService, providedIn: 'root' }); }
|
|
13161
13161
|
}
|
|
13162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ConditionValidationService, decorators: [{
|
|
13163
13163
|
type: Injectable,
|
|
13164
13164
|
args: [{ providedIn: 'root' }]
|
|
13165
13165
|
}] });
|
|
@@ -13413,10 +13413,10 @@ class StConditionBuilderComponent {
|
|
|
13413
13413
|
],
|
|
13414
13414
|
};
|
|
13415
13415
|
}
|
|
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.
|
|
13416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
13418
|
}
|
|
13419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StConditionBuilderComponent, decorators: [{
|
|
13420
13420
|
type: Component,
|
|
13421
13421
|
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
13422
|
}], propDecorators: { config: [{
|
|
@@ -13588,10 +13588,10 @@ class StSheetComponent {
|
|
|
13588
13588
|
get headerVariant() {
|
|
13589
13589
|
return this.config?.display?.headerVariant || 'default';
|
|
13590
13590
|
}
|
|
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.
|
|
13591
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13592
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
13593
|
}
|
|
13594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StSheetComponent, decorators: [{
|
|
13595
13595
|
type: Component,
|
|
13596
13596
|
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
13597
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
@@ -13708,10 +13708,10 @@ class AutosaveService {
|
|
|
13708
13708
|
this.dirtyState.clear();
|
|
13709
13709
|
this.lastSaveTime.clear();
|
|
13710
13710
|
}
|
|
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.
|
|
13711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
13712
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AutosaveService, providedIn: 'root' }); }
|
|
13713
13713
|
}
|
|
13714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AutosaveService, decorators: [{
|
|
13715
13715
|
type: Injectable,
|
|
13716
13716
|
args: [{
|
|
13717
13717
|
providedIn: 'root'
|
|
@@ -13785,6 +13785,22 @@ class StWorkbookComponent {
|
|
|
13785
13785
|
this.beforeUnloadHandler = null;
|
|
13786
13786
|
/** Sheet ID rendered in the last updateActiveSheet — used to skip key bumps that would otherwise re-mount the content on every config update. */
|
|
13787
13787
|
this.lastRenderedSheetId = null;
|
|
13788
|
+
/**
|
|
13789
|
+
* Pipe-joined column.key sequence for the table currently mounted in the
|
|
13790
|
+
* shared panel. We compare this on every `updateActiveSheet` to detect
|
|
13791
|
+
* structural column changes (insert / remove / reorder) WITHIN the same
|
|
13792
|
+
* sheet id and trigger a `tableComponentKey` bump so <st-table> rebuilds
|
|
13793
|
+
* its cell grid. Header text / width / formatter changes do NOT change the
|
|
13794
|
+
* key sequence, so cosmetic config updates stay flicker-free.
|
|
13795
|
+
*/
|
|
13796
|
+
this.lastRenderedColumnKeys = '';
|
|
13797
|
+
/**
|
|
13798
|
+
* Monotonic counter appended to `tableComponentKey` so consecutive bumps
|
|
13799
|
+
* (e.g. two column changes in the same millisecond) are guaranteed unique
|
|
13800
|
+
* even when `Date.now()` collides — without this, Angular's `@for…track`
|
|
13801
|
+
* sees the same key and skips the destroy/recreate we need.
|
|
13802
|
+
*/
|
|
13803
|
+
this.tableComponentKeyCounter = 0;
|
|
13788
13804
|
// Sync fullscreen signal to observable
|
|
13789
13805
|
effect(() => {
|
|
13790
13806
|
this.isFullscreen$.next(this.isFullscreen());
|
|
@@ -14098,10 +14114,16 @@ class StWorkbookComponent {
|
|
|
14098
14114
|
return;
|
|
14099
14115
|
this.selectedSheet.set(sheet);
|
|
14100
14116
|
this.selectedSheetIndex.set(this.activeSheetIndex());
|
|
14101
|
-
//
|
|
14102
|
-
//
|
|
14103
|
-
//
|
|
14104
|
-
//
|
|
14117
|
+
// Bump the @for track key only when the table needs to be recreated:
|
|
14118
|
+
// 1. Sheet id changed — user switched to a different sheet.
|
|
14119
|
+
// 2. Column key sequence changed — columns inserted / removed / reordered
|
|
14120
|
+
// within the SAME sheet id. `st-table` builds its cell grid in
|
|
14121
|
+
// ngOnInit and doesn't react to later `tableConfig` signal changes,
|
|
14122
|
+
// so without this bump cells stay bound to the old column positions.
|
|
14123
|
+
//
|
|
14124
|
+
// Cosmetic updates that keep the same column-key order (header text,
|
|
14125
|
+
// width, formatter swap, etc.) do NOT trigger a bump — that's what keeps
|
|
14126
|
+
// condition-builder valueChange edits flicker-free.
|
|
14105
14127
|
const sheetIdChanged = sheet.id !== this.lastRenderedSheetId;
|
|
14106
14128
|
this.lastRenderedSheetId = sheet.id;
|
|
14107
14129
|
const contentType = sheet.contentType ?? 'table';
|
|
@@ -14110,8 +14132,11 @@ class StWorkbookComponent {
|
|
|
14110
14132
|
this.currentTableConfig.set(null);
|
|
14111
14133
|
this.currentTableState.set(null);
|
|
14112
14134
|
this.currentTableData$.next([]);
|
|
14135
|
+
// The table is destroyed here; clear the tracker so switching back to
|
|
14136
|
+
// a table sheet correctly registers a key-sequence change.
|
|
14137
|
+
this.lastRenderedColumnKeys = '';
|
|
14113
14138
|
if (sheetIdChanged) {
|
|
14114
|
-
this.tableComponentKey.set(`${sheet.id}-${Date.now()}`);
|
|
14139
|
+
this.tableComponentKey.set(`${sheet.id}-${Date.now()}-${++this.tableComponentKeyCounter}`);
|
|
14115
14140
|
}
|
|
14116
14141
|
return;
|
|
14117
14142
|
}
|
|
@@ -14124,8 +14149,13 @@ class StWorkbookComponent {
|
|
|
14124
14149
|
this.currentTableConfig.set({ ...sheet.tableConfig });
|
|
14125
14150
|
this.currentTableData$.next(sheetData);
|
|
14126
14151
|
this.currentTableState.set(tableState);
|
|
14127
|
-
|
|
14128
|
-
|
|
14152
|
+
const newColumnKeys = (sheet.tableConfig.columns ?? [])
|
|
14153
|
+
.map(c => c.key)
|
|
14154
|
+
.join('|');
|
|
14155
|
+
const columnsStructurallyChanged = newColumnKeys !== this.lastRenderedColumnKeys;
|
|
14156
|
+
this.lastRenderedColumnKeys = newColumnKeys;
|
|
14157
|
+
if (sheetIdChanged || columnsStructurallyChanged) {
|
|
14158
|
+
this.tableComponentKey.set(`${sheet.id}-${Date.now()}-${++this.tableComponentKeyCounter}`);
|
|
14129
14159
|
}
|
|
14130
14160
|
this.activeState.setSheetTableState(sheet.id, tableState);
|
|
14131
14161
|
}
|
|
@@ -14476,10 +14506,10 @@ class StWorkbookComponent {
|
|
|
14476
14506
|
this.tableComponent.scrollToLastRow(focusFirstCell);
|
|
14477
14507
|
}
|
|
14478
14508
|
}
|
|
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" }] }); }
|
|
14509
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StWorkbookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
14511
|
}
|
|
14482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StWorkbookComponent, decorators: [{
|
|
14483
14513
|
type: Component,
|
|
14484
14514
|
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
14515
|
}], 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 +14533,10 @@ class ClickOutsideDirective {
|
|
|
14503
14533
|
this.clickOutside.emit();
|
|
14504
14534
|
}
|
|
14505
14535
|
}
|
|
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.
|
|
14536
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14537
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
|
|
14508
14538
|
}
|
|
14509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
14510
14540
|
type: Directive,
|
|
14511
14541
|
args: [{
|
|
14512
14542
|
selector: '[clickOutside]',
|
|
@@ -14525,11 +14555,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14525
14555
|
* This module breaks the circular dependency between the two modules
|
|
14526
14556
|
*/
|
|
14527
14557
|
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.
|
|
14558
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SharedTableComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
14559
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent], exports: [ColumnEditorComponent] }); }
|
|
14560
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SharedTableComponentsModule, imports: [ColumnEditorComponent] }); }
|
|
14531
14561
|
}
|
|
14532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SharedTableComponentsModule, decorators: [{
|
|
14533
14563
|
type: NgModule,
|
|
14534
14564
|
args: [{
|
|
14535
14565
|
imports: [
|
|
@@ -14542,8 +14572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14542
14572
|
}] });
|
|
14543
14573
|
|
|
14544
14574
|
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.
|
|
14575
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
14576
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: SmartTableModule, imports: [SharedTableComponentsModule,
|
|
14547
14577
|
StCellComponent,
|
|
14548
14578
|
StTableComponent,
|
|
14549
14579
|
StHeaderComponent,
|
|
@@ -14587,7 +14617,7 @@ class SmartTableModule {
|
|
|
14587
14617
|
ClickOutsideDirective,
|
|
14588
14618
|
StColumnResizeDirective,
|
|
14589
14619
|
StKeyboardNavigationDirective] }); }
|
|
14590
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
14620
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SmartTableModule, providers: [
|
|
14591
14621
|
VirtualScrollService
|
|
14592
14622
|
], imports: [SharedTableComponentsModule,
|
|
14593
14623
|
StCellComponent,
|
|
@@ -14610,7 +14640,7 @@ class SmartTableModule {
|
|
|
14610
14640
|
StConditionValueEditorComponent,
|
|
14611
14641
|
StConditionFieldPickerComponent] }); }
|
|
14612
14642
|
}
|
|
14613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SmartTableModule, decorators: [{
|
|
14614
14644
|
type: NgModule,
|
|
14615
14645
|
args: [{
|
|
14616
14646
|
imports: [
|
|
@@ -14904,10 +14934,10 @@ class DefinitionBuilderService {
|
|
|
14904
14934
|
// Simple comparison - in production, use a deep equality library
|
|
14905
14935
|
return JSON.stringify(config1) === JSON.stringify(config2);
|
|
14906
14936
|
}
|
|
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.
|
|
14937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
14938
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderService, providedIn: 'root' }); }
|
|
14909
14939
|
}
|
|
14910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderService, decorators: [{
|
|
14911
14941
|
type: Injectable,
|
|
14912
14942
|
args: [{
|
|
14913
14943
|
providedIn: 'root'
|
|
@@ -15273,10 +15303,10 @@ class DefinitionExportService {
|
|
|
15273
15303
|
document.body.removeChild(link);
|
|
15274
15304
|
URL.revokeObjectURL(url);
|
|
15275
15305
|
}
|
|
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.
|
|
15306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
15307
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionExportService, providedIn: 'root' }); }
|
|
15278
15308
|
}
|
|
15279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionExportService, decorators: [{
|
|
15280
15310
|
type: Injectable,
|
|
15281
15311
|
args: [{
|
|
15282
15312
|
providedIn: 'root'
|
|
@@ -15625,10 +15655,10 @@ class DefinitionImportService {
|
|
|
15625
15655
|
return errorResult;
|
|
15626
15656
|
}
|
|
15627
15657
|
}
|
|
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.
|
|
15658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionImportService, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
15659
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionImportService, providedIn: 'root' }); }
|
|
15630
15660
|
}
|
|
15631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionImportService, decorators: [{
|
|
15632
15662
|
type: Injectable,
|
|
15633
15663
|
args: [{
|
|
15634
15664
|
providedIn: 'root'
|
|
@@ -15728,10 +15758,10 @@ class BuilderToolbarComponent {
|
|
|
15728
15758
|
onTogglePreview() {
|
|
15729
15759
|
this.previewToggled.emit();
|
|
15730
15760
|
}
|
|
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.
|
|
15761
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BuilderToolbarComponent, deps: [{ token: DefinitionBuilderService }, { token: DefinitionExportService }, { token: DefinitionImportService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
15763
|
}
|
|
15734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BuilderToolbarComponent, decorators: [{
|
|
15735
15765
|
type: Component,
|
|
15736
15766
|
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
15767
|
}], ctorParameters: () => [{ type: DefinitionBuilderService }, { type: DefinitionExportService }, { type: DefinitionImportService }], propDecorators: { hasUnsavedChanges: [{
|
|
@@ -15844,10 +15874,10 @@ class ColumnListComponent {
|
|
|
15844
15874
|
const type = this.dataTypes.find(dt => dt.value === column.dataType);
|
|
15845
15875
|
return type?.label || 'Text';
|
|
15846
15876
|
}
|
|
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.
|
|
15877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColumnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
15879
|
}
|
|
15850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColumnListComponent, decorators: [{
|
|
15851
15881
|
type: Component,
|
|
15852
15882
|
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
15883
|
}], propDecorators: { columns: [{
|
|
@@ -15980,10 +16010,10 @@ class TableConfigEditorComponent {
|
|
|
15980
16010
|
this.configUpdated.emit(updates);
|
|
15981
16011
|
}
|
|
15982
16012
|
}
|
|
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.
|
|
16013
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TableConfigEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
16015
|
}
|
|
15986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TableConfigEditorComponent, decorators: [{
|
|
15987
16017
|
type: Component,
|
|
15988
16018
|
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
16019
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { config: [{
|
|
@@ -16105,10 +16135,10 @@ class SampleDataGeneratorService {
|
|
|
16105
16135
|
generateBooleanValue(rowIndex) {
|
|
16106
16136
|
return rowIndex % 2 === 0;
|
|
16107
16137
|
}
|
|
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.
|
|
16138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SampleDataGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
16139
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SampleDataGeneratorService, providedIn: 'root' }); }
|
|
16110
16140
|
}
|
|
16111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SampleDataGeneratorService, decorators: [{
|
|
16112
16142
|
type: Injectable,
|
|
16113
16143
|
args: [{
|
|
16114
16144
|
providedIn: 'root'
|
|
@@ -16163,10 +16193,10 @@ class BuilderPreviewComponent {
|
|
|
16163
16193
|
// But we can log them for debugging
|
|
16164
16194
|
console.log('Preview state change:', event);
|
|
16165
16195
|
}
|
|
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.
|
|
16196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
16198
|
}
|
|
16169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
|
|
16170
16200
|
type: Component,
|
|
16171
16201
|
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
16202
|
}], ctorParameters: () => [{ type: SampleDataGeneratorService }], propDecorators: { tableConfig: [{
|
|
@@ -16261,10 +16291,10 @@ class DefinitionBuilderComponent {
|
|
|
16261
16291
|
onColumnCancel() {
|
|
16262
16292
|
this.builderService.clearSelection();
|
|
16263
16293
|
}
|
|
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.
|
|
16294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderComponent, deps: [{ token: DefinitionBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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
16296
|
}
|
|
16267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderComponent, decorators: [{
|
|
16268
16298
|
type: Component,
|
|
16269
16299
|
args: [{ selector: 'st-definition-builder', standalone: true, imports: [
|
|
16270
16300
|
CommonModule,
|
|
@@ -16285,8 +16315,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
16285
16315
|
* Module for the Visual UI Builder components
|
|
16286
16316
|
*/
|
|
16287
16317
|
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.
|
|
16318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
16319
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
|
|
16290
16320
|
SharedTableComponentsModule,
|
|
16291
16321
|
DefinitionBuilderComponent,
|
|
16292
16322
|
BuilderToolbarComponent,
|
|
@@ -16298,7 +16328,7 @@ class DefinitionBuilderModule {
|
|
|
16298
16328
|
TableConfigEditorComponent,
|
|
16299
16329
|
BuilderPreviewComponent,
|
|
16300
16330
|
SharedTableComponentsModule] }); }
|
|
16301
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
16331
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderModule, imports: [SmartTableModule,
|
|
16302
16332
|
SharedTableComponentsModule,
|
|
16303
16333
|
DefinitionBuilderComponent,
|
|
16304
16334
|
BuilderToolbarComponent,
|
|
@@ -16306,7 +16336,7 @@ class DefinitionBuilderModule {
|
|
|
16306
16336
|
TableConfigEditorComponent,
|
|
16307
16337
|
BuilderPreviewComponent, SharedTableComponentsModule] }); }
|
|
16308
16338
|
}
|
|
16309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DefinitionBuilderModule, decorators: [{
|
|
16310
16340
|
type: NgModule,
|
|
16311
16341
|
args: [{
|
|
16312
16342
|
imports: [
|
|
@@ -16359,10 +16389,10 @@ class RowValidationService {
|
|
|
16359
16389
|
};
|
|
16360
16390
|
}
|
|
16361
16391
|
}
|
|
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.
|
|
16392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RowValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
16393
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RowValidationService, providedIn: 'root' }); }
|
|
16364
16394
|
}
|
|
16365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
16395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RowValidationService, decorators: [{
|
|
16366
16396
|
type: Injectable,
|
|
16367
16397
|
args: [{
|
|
16368
16398
|
providedIn: 'root'
|