@saydar/table-builder 1.0.16-beta.1 → 1.0.16-beta.2
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.
|
@@ -4326,11 +4326,11 @@ class ColumnsPanelComponent {
|
|
|
4326
4326
|
return row.key;
|
|
4327
4327
|
}
|
|
4328
4328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnsPanelComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ColumnsPanelComponent, isStandalone: false, selector: "tb-columns-panel", ngImport: i0, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.cp-zones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.cp-zone{background:var(--mat-sys-surface-container-lowest, #ffffff);border:1.5px dashed color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 20%,transparent);border-radius:10px;padding:8px;min-height:200px;max-height:360px;overflow-y:auto}.cp-zone-visible{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 45%,transparent)}.cp-zone.cdk-drop-list-dragging{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 4%,transparent)}.cp-zone-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mat-sys-primary, #7d00fa);padding:2px 4px 8px;display:flex;align-items:center;gap:6px}.cp-zone-count{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);padding:1px 7px;border-radius:999px;font-size:10px}.cp-empty{text-align:center;color:#00000059;font-size:11.5px;font-style:italic;padding:16px 8px}.cp-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;-webkit-user-select:none;user-select:none}.cp-tag-hidden{background:#00000006;border-style:dashed;color:var(--mat-sys-on-surface-variant, #6b6970)}.cp-tag:hover{border-color:var(--mat-sys-primary, #7d00fa)}.cp-tag .cp-grip,.cp-row .cp-grip{color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent);font-size:11px;flex-shrink:0;cursor:grab}.cp-tag .cp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;transition:border-color .12s ease}.cp-row:hover{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-priority{width:18px;height:18px;border-radius:50%;background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.cp-priority.cp-priority-empty{background:transparent;color:transparent}.cp-col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-dir-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;min-width:56px;box-sizing:border-box;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;transition:all .15s ease;flex-shrink:0}.cp-dir-pill.cp-dir-none{color:#00000059;border-color:#0000001a}.cp-dir-pill.cp-dir-none:hover{color:var(--mat-sys-primary, #7d00fa);border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-dir-pill.cp-dir-asc,.cp-dir-pill.cp-dir-desc{background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent)}.cp-foot{font-size:10.5px;color:var(--mat-sys-on-surface-variant, #6b6970);padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06);line-height:1.4}.cdk-drag-placeholder{opacity:.4}.cdk-drag-preview{box-shadow:0 4px 14px #14003c33}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ColumnsPanelComponent, isStandalone: false, selector: "tb-columns-panel", ngImport: i0, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.cp-zones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.cp-zone{background:var(--mat-sys-surface-container-lowest, #ffffff);border:1.5px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);border-radius:10px;padding:8px;min-height:200px;max-height:360px;overflow-y:auto}.cp-zone-visible{border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.cp-zone.cdk-drop-list-dragging{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 4%,transparent)}.cp-zone-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mat-sys-primary, #006a6a);padding:2px 4px 8px;display:flex;align-items:center;gap:6px}.cp-zone-count{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 7px;border-radius:999px;font-size:10px}.cp-empty{text-align:center;color:#00000059;font-size:11.5px;font-style:italic;padding:16px 8px}.cp-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;-webkit-user-select:none;user-select:none}.cp-tag-hidden{background:#00000006;border-style:dashed;color:var(--mat-sys-on-surface-variant, #6b6970)}.cp-tag:hover{border-color:var(--mat-sys-primary, #006a6a)}.cp-tag .cp-grip,.cp-row .cp-grip{color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent);font-size:11px;flex-shrink:0;cursor:grab}.cp-tag .cp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;transition:border-color .12s ease}.cp-row:hover{border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 40%,transparent)}.cp-priority{width:18px;height:18px;border-radius:50%;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.cp-priority.cp-priority-empty{background:transparent;color:transparent}.cp-col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-dir-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;min-width:56px;box-sizing:border-box;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;transition:all .15s ease;flex-shrink:0}.cp-dir-pill.cp-dir-none{color:#00000059;border-color:#0000001a}.cp-dir-pill.cp-dir-none:hover{color:var(--mat-sys-primary, #006a6a);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 40%,transparent)}.cp-dir-pill.cp-dir-asc,.cp-dir-pill.cp-dir-desc{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.cp-foot{font-size:10.5px;color:var(--mat-sys-on-surface-variant, #6b6970);padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06);line-height:1.4}.cdk-drag-placeholder{opacity:.4}.cdk-drag-preview{box-shadow:0 4px 14px #14003c33}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4330
4330
|
}
|
|
4331
4331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnsPanelComponent, decorators: [{
|
|
4332
4332
|
type: Component,
|
|
4333
|
-
args: [{ selector: 'tb-columns-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #
|
|
4333
|
+
args: [{ selector: 'tb-columns-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.cp-zones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.cp-zone{background:var(--mat-sys-surface-container-lowest, #ffffff);border:1.5px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);border-radius:10px;padding:8px;min-height:200px;max-height:360px;overflow-y:auto}.cp-zone-visible{border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.cp-zone.cdk-drop-list-dragging{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 4%,transparent)}.cp-zone-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mat-sys-primary, #006a6a);padding:2px 4px 8px;display:flex;align-items:center;gap:6px}.cp-zone-count{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 7px;border-radius:999px;font-size:10px}.cp-empty{text-align:center;color:#00000059;font-size:11.5px;font-style:italic;padding:16px 8px}.cp-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;-webkit-user-select:none;user-select:none}.cp-tag-hidden{background:#00000006;border-style:dashed;color:var(--mat-sys-on-surface-variant, #6b6970)}.cp-tag:hover{border-color:var(--mat-sys-primary, #006a6a)}.cp-tag .cp-grip,.cp-row .cp-grip{color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent);font-size:11px;flex-shrink:0;cursor:grab}.cp-tag .cp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;transition:border-color .12s ease}.cp-row:hover{border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 40%,transparent)}.cp-priority{width:18px;height:18px;border-radius:50%;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.cp-priority.cp-priority-empty{background:transparent;color:transparent}.cp-col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-dir-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;min-width:56px;box-sizing:border-box;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;transition:all .15s ease;flex-shrink:0}.cp-dir-pill.cp-dir-none{color:#00000059;border-color:#0000001a}.cp-dir-pill.cp-dir-none:hover{color:var(--mat-sys-primary, #006a6a);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 40%,transparent)}.cp-dir-pill.cp-dir-asc,.cp-dir-pill.cp-dir-desc{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.cp-foot{font-size:10.5px;color:var(--mat-sys-on-surface-variant, #6b6970);padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06);line-height:1.4}.cdk-drag-placeholder{opacity:.4}.cdk-drag-preview{box-shadow:0 4px 14px #14003c33}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
4334
4334
|
}], ctorParameters: () => [{ type: TableStore }] });
|
|
4335
4335
|
|
|
4336
4336
|
class KeyDisplayPipe {
|