@reforgium/data-grid 2.3.0 → 2.3.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, TemplateRef, Directive, Component, input, booleanAttribute, ElementRef, output, contentChild, signal,
|
|
2
|
+
import { inject, TemplateRef, Directive, Component, input, booleanAttribute, ElementRef, output, contentChild, signal, computed, viewChild, effect, afterNextRender } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
const isVisible = (column) => column.visible !== false;
|
|
@@ -75,6 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
75
75
|
}] });
|
|
76
76
|
|
|
77
77
|
class DataGridColumnManagerTriggerDirective {
|
|
78
|
+
template = inject((TemplateRef), { optional: true });
|
|
78
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManagerTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
79
80
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridColumnManagerTriggerDirective, isStandalone: true, selector: "[reDataGridColumnManagerTrigger]", ngImport: i0 });
|
|
80
81
|
}
|
|
@@ -209,6 +210,7 @@ class DataGridColumnManager {
|
|
|
209
210
|
openedPinMenuKey = signal(null, ...(ngDevMode ? [{ debugName: "openedPinMenuKey" }] : []));
|
|
210
211
|
panelLeft = signal(0, ...(ngDevMode ? [{ debugName: "panelLeft" }] : []));
|
|
211
212
|
hasCustomTrigger = signal(false, ...(ngDevMode ? [{ debugName: "hasCustomTrigger" }] : []));
|
|
213
|
+
triggerTemplate = computed(() => this.triggerDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "triggerTemplate" }] : []));
|
|
212
214
|
root = viewChild('root', ...(ngDevMode ? [{ debugName: "root" }] : []));
|
|
213
215
|
panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
|
|
214
216
|
filteredColumns = computed(() => {
|
|
@@ -411,6 +413,10 @@ class DataGridColumnManager {
|
|
|
411
413
|
hasProjectedTrigger() {
|
|
412
414
|
return !!this.host.nativeElement.querySelector('[reDataGridColumnManagerTrigger]');
|
|
413
415
|
}
|
|
416
|
+
onCustomTriggerSpace(event) {
|
|
417
|
+
event.preventDefault();
|
|
418
|
+
this.toggleOpen();
|
|
419
|
+
}
|
|
414
420
|
syncCustomTriggerState() {
|
|
415
421
|
const hasCustom = !!this.triggerDirective() || this.hasProjectedTrigger();
|
|
416
422
|
if (this.hasCustomTrigger() !== hasCustom) {
|
|
@@ -449,14 +455,14 @@ class DataGridColumnManager {
|
|
|
449
455
|
this.panelLeft.set(Number.isFinite(nextLeft) ? nextLeft : 0);
|
|
450
456
|
}
|
|
451
457
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\n <button\n type=\"button\"\n class=\"re-dg-cm__trigger\"\n [class.re-dg-cm__trigger--open]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-haspopup]=\"'dialog'\"\n (click)=\"toggleOpen()\"\n >\n @if (hasCustomTrigger()) {\n <ng-content select=\"[reDataGridColumnManagerTrigger]\" />\n } @else {\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\n }\n </button>\n\n @if (opened()) {\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\n @let list = filteredColumns();\n\n @if (controlsVisible() && searchable()) {\n <label class=\"re-dg-cm__search\">\n <input\n type=\"search\"\n [value]=\"searchQuery()\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"onSearch($event)\"\n />\n </label>\n }\n\n <div class=\"re-dg-cm__title-row\">\n @if (controlsVisible()) {\n <div class=\"re-dg-cm__tools\">\n <button type=\"button\" (click)=\"showAll()\">Show all</button>\n <button type=\"button\" (click)=\"hideOptional()\">Hide All</button>\n </div>\n } @else {\n <span></span>\n }\n\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\n </div>\n\n <div class=\"re-dg-cm__list\">\n @for (column of list; track column.key) {\n @let currentPin = pin(column.key);\n @let disabled = !!column.disabled;\n @let canHideValue = canHideColumn(column.key);\n\n <div\n class=\"re-dg-cm__row\"\n [attr.draggable]=\"allowReorder() && !disabled\"\n [class.re-dg-cm__row--disabled]=\"disabled\"\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\n (dragstart)=\"onDragStart($event, column.key)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, column.key)\"\n (dragend)=\"draggingKey.set(null)\"\n >\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\n\n <label class=\"re-dg-cm__checkbox\">\n <button\n [class.active]=\"column.visible !== false\"\n [disabled]=\"disabled || !canHideValue\"\n (click)=\"onVisibleChange(column.key)\"\n >\n <re-eye-ic [open]=\"column.visible !== false\" />\n </button>\n @if (columnTitleTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\n />\n } @else {\n <span>{{ column.header || column.key }}</span>\n }\n </label>\n\n <div class=\"re-dg-cm__actions\">\n @if (allowPin()) {\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\n <button\n type=\"button\"\n class=\"re-dg-cm__pin-current\"\n [disabled]=\"disabled\"\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\n (click)=\"togglePinMenu($event, column.key)\"\n [title]=\"pinLabel(currentPin)\"\n >\n @if (currentPin === 'left') {\n <re-pin-ic />\n } @else if (currentPin === 'right') {\n <re-pin-ic toRight />\n } @else {\n <re-cross-ic />\n }\n </button>\n\n @if (openedPinMenuKey() === column.key && !disabled) {\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\n (click)=\"selectPin(column.key, 'left')\"\n title=\"Pin left\"\n >\n <re-pin-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\n (click)=\"selectPin(column.key, 'none')\"\n title=\"Unpin\"\n >\n <re-cross-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\n (click)=\"selectPin(column.key, 'right')\"\n title=\"Pin right\"\n >\n <re-pin-ic toRight />\n </button>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
|
|
458
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\n @if (hasCustomTrigger()) {\n <div\n tabindex=\"0\"\n role=\"button\"\n [class.re-dg-cm__trigger--open]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-haspopup]=\"'dialog'\"\n (click)=\"toggleOpen()\"\n (keydown.enter)=\"toggleOpen()\"\n (keydown.space)=\"onCustomTriggerSpace($event)\"\n >\n @if (triggerTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n <ng-content select=\"[reDataGridColumnManagerTrigger]\" />\n }\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"re-dg-cm__trigger\"\n [class.re-dg-cm__trigger--open]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-haspopup]=\"'dialog'\"\n (click)=\"toggleOpen()\"\n >\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\n </button>\n }\n\n @if (opened()) {\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\n @let list = filteredColumns();\n\n @if (controlsVisible() && searchable()) {\n <label class=\"re-dg-cm__search\">\n <input\n type=\"search\"\n [value]=\"searchQuery()\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"onSearch($event)\"\n />\n </label>\n }\n\n <div class=\"re-dg-cm__title-row\">\n @if (controlsVisible()) {\n <div class=\"re-dg-cm__tools\">\n <button type=\"button\" (click)=\"showAll()\">Show all</button>\n <button type=\"button\" (click)=\"hideOptional()\">Hide All</button>\n </div>\n } @else {\n <span></span>\n }\n\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\n </div>\n\n <div class=\"re-dg-cm__list\">\n @for (column of list; track column.key) {\n @let currentPin = pin(column.key);\n @let disabled = !!column.disabled;\n @let canHideValue = canHideColumn(column.key);\n\n <div\n class=\"re-dg-cm__row\"\n [attr.draggable]=\"allowReorder() && !disabled\"\n [class.re-dg-cm__row--disabled]=\"disabled\"\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\n (dragstart)=\"onDragStart($event, column.key)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, column.key)\"\n (dragend)=\"draggingKey.set(null)\"\n >\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\n\n <label class=\"re-dg-cm__checkbox\">\n <button\n [class.active]=\"column.visible !== false\"\n [disabled]=\"disabled || !canHideValue\"\n (click)=\"onVisibleChange(column.key)\"\n >\n <re-eye-ic [open]=\"column.visible !== false\" />\n </button>\n @if (columnTitleTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\n />\n } @else {\n <span>{{ column.header || column.key }}</span>\n }\n </label>\n\n <div class=\"re-dg-cm__actions\">\n @if (allowPin()) {\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\n <button\n type=\"button\"\n class=\"re-dg-cm__pin-current\"\n [disabled]=\"disabled\"\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\n (click)=\"togglePinMenu($event, column.key)\"\n [title]=\"pinLabel(currentPin)\"\n >\n @if (currentPin === 'left') {\n <re-pin-ic />\n } @else if (currentPin === 'right') {\n <re-pin-ic toRight />\n } @else {\n <re-cross-ic />\n }\n </button>\n\n @if (openedPinMenuKey() === column.key && !disabled) {\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\n (click)=\"selectPin(column.key, 'left')\"\n title=\"Pin left\"\n >\n <re-pin-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\n (click)=\"selectPin(column.key, 'none')\"\n title=\"Unpin\"\n >\n <re-cross-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\n (click)=\"selectPin(column.key, 'right')\"\n title=\"Pin right\"\n >\n <re-pin-ic toRight />\n </button>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
|
|
453
459
|
}
|
|
454
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, decorators: [{
|
|
455
461
|
type: Component,
|
|
456
462
|
args: [{ selector: 're-data-grid-column-manager', standalone: true, host: {
|
|
457
463
|
'document:mousedown': 'onDocumentMouseDown($event.target)',
|
|
458
464
|
'window:resize': 'onWindowResize()',
|
|
459
|
-
}, imports: [NgTemplateOutlet, EyeIcon, CrossIcon, PinIcon], template: "<div class=\"re-dg-cm\" #root>\n <
|
|
465
|
+
}, imports: [NgTemplateOutlet, EyeIcon, CrossIcon, PinIcon], template: "<div class=\"re-dg-cm\" #root>\n @if (hasCustomTrigger()) {\n <div\n tabindex=\"0\"\n role=\"button\"\n [class.re-dg-cm__trigger--open]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-haspopup]=\"'dialog'\"\n (click)=\"toggleOpen()\"\n (keydown.enter)=\"toggleOpen()\"\n (keydown.space)=\"onCustomTriggerSpace($event)\"\n >\n @if (triggerTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" />\n } @else {\n <ng-content select=\"[reDataGridColumnManagerTrigger]\" />\n }\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"re-dg-cm__trigger\"\n [class.re-dg-cm__trigger--open]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-haspopup]=\"'dialog'\"\n (click)=\"toggleOpen()\"\n >\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\n </button>\n }\n\n @if (opened()) {\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\n @let list = filteredColumns();\n\n @if (controlsVisible() && searchable()) {\n <label class=\"re-dg-cm__search\">\n <input\n type=\"search\"\n [value]=\"searchQuery()\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"onSearch($event)\"\n />\n </label>\n }\n\n <div class=\"re-dg-cm__title-row\">\n @if (controlsVisible()) {\n <div class=\"re-dg-cm__tools\">\n <button type=\"button\" (click)=\"showAll()\">Show all</button>\n <button type=\"button\" (click)=\"hideOptional()\">Hide All</button>\n </div>\n } @else {\n <span></span>\n }\n\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\n </div>\n\n <div class=\"re-dg-cm__list\">\n @for (column of list; track column.key) {\n @let currentPin = pin(column.key);\n @let disabled = !!column.disabled;\n @let canHideValue = canHideColumn(column.key);\n\n <div\n class=\"re-dg-cm__row\"\n [attr.draggable]=\"allowReorder() && !disabled\"\n [class.re-dg-cm__row--disabled]=\"disabled\"\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\n (dragstart)=\"onDragStart($event, column.key)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, column.key)\"\n (dragend)=\"draggingKey.set(null)\"\n >\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\n\n <label class=\"re-dg-cm__checkbox\">\n <button\n [class.active]=\"column.visible !== false\"\n [disabled]=\"disabled || !canHideValue\"\n (click)=\"onVisibleChange(column.key)\"\n >\n <re-eye-ic [open]=\"column.visible !== false\" />\n </button>\n @if (columnTitleTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\n />\n } @else {\n <span>{{ column.header || column.key }}</span>\n }\n </label>\n\n <div class=\"re-dg-cm__actions\">\n @if (allowPin()) {\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\n <button\n type=\"button\"\n class=\"re-dg-cm__pin-current\"\n [disabled]=\"disabled\"\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\n (click)=\"togglePinMenu($event, column.key)\"\n [title]=\"pinLabel(currentPin)\"\n >\n @if (currentPin === 'left') {\n <re-pin-ic />\n } @else if (currentPin === 'right') {\n <re-pin-ic toRight />\n } @else {\n <re-cross-ic />\n }\n </button>\n\n @if (openedPinMenuKey() === column.key && !disabled) {\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\n (click)=\"selectPin(column.key, 'left')\"\n title=\"Pin left\"\n >\n <re-pin-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\n (click)=\"selectPin(column.key, 'none')\"\n title=\"Unpin\"\n >\n <re-cross-ic />\n </button>\n\n <button\n type=\"button\"\n class=\"pin-button\"\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\n (click)=\"selectPin(column.key, 'right')\"\n title=\"Pin right\"\n >\n <re-pin-ic toRight />\n </button>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"] }]
|
|
460
466
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], controlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsVisible", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReorder", required: false }] }], allowPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPin", required: false }] }], allowVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowVisibility", required: false }] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridColumnManagerTriggerDirective), { isSignal: true }] }], columnTitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridColumnManagerColumnTitleDirective), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
461
467
|
|
|
462
468
|
/**
|
package/package.json
CHANGED
|
@@ -37,6 +37,7 @@ declare class DataGridColumnManager<Data extends RowLike = RowLike> implements A
|
|
|
37
37
|
protected openedPinMenuKey: _angular_core.WritableSignal<string | null>;
|
|
38
38
|
protected panelLeft: _angular_core.WritableSignal<number>;
|
|
39
39
|
protected hasCustomTrigger: _angular_core.WritableSignal<boolean>;
|
|
40
|
+
protected triggerTemplate: _angular_core.Signal<_angular_core.TemplateRef<any> | null>;
|
|
40
41
|
private root;
|
|
41
42
|
private panel;
|
|
42
43
|
protected filteredColumns: _angular_core.Signal<GridColumn<Data>[]>;
|
|
@@ -64,6 +65,7 @@ declare class DataGridColumnManager<Data extends RowLike = RowLike> implements A
|
|
|
64
65
|
private findColumn;
|
|
65
66
|
private commit;
|
|
66
67
|
private hasProjectedTrigger;
|
|
68
|
+
protected onCustomTriggerSpace(event: Event): void;
|
|
67
69
|
private syncCustomTriggerState;
|
|
68
70
|
private isInsidePinMenu;
|
|
69
71
|
protected buildColumnTitleContext(column: GridColumn<Data>): DataGridColumnManagerColumnTitleContext<Data>;
|
|
@@ -74,6 +76,7 @@ declare class DataGridColumnManager<Data extends RowLike = RowLike> implements A
|
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
declare class DataGridColumnManagerTriggerDirective {
|
|
79
|
+
readonly template: TemplateRef<any> | null;
|
|
77
80
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridColumnManagerTriggerDirective, never>;
|
|
78
81
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridColumnManagerTriggerDirective, "[reDataGridColumnManagerTrigger]", never, {}, {}, never, never, true, never>;
|
|
79
82
|
}
|