@reforgium/data-grid 2.5.4 → 3.1.0
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.
- package/CHANGELOG.md +310 -0
- package/LICENSE +21 -0
- package/README.md +110 -4
- package/fesm2022/reforgium-data-grid-column-manager.mjs +35 -28
- package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-zC9rb3bw.mjs → reforgium-data-grid-grid-overlay-scroll.feature-BQFxyNCT.mjs} +2 -2
- package/fesm2022/reforgium-data-grid-paginator.mjs +12 -12
- package/fesm2022/{reforgium-data-grid-reforgium-data-grid-C2zJNoKs.mjs → reforgium-data-grid-reforgium-data-grid-d5V0EST_.mjs} +861 -202
- package/fesm2022/reforgium-data-grid-ui.mjs +3 -3
- package/fesm2022/reforgium-data-grid.mjs +1 -1
- package/package.json +1 -1
- package/types/reforgium-data-grid-column-manager.d.ts +1 -1
- package/types/reforgium-data-grid.d.ts +340 -194
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
3
|
import { inject, TemplateRef, Directive, Component, input, booleanAttribute, Injector, output, contentChild, signal, computed, viewChild, effect, runInInjectionContext, afterNextRender } from '@angular/core';
|
|
3
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
const isVisible = (column) => column.visible !== false;
|
|
6
6
|
function cloneColumns(columns) {
|
|
@@ -14,7 +14,11 @@ function resolvePinState(columns, key) {
|
|
|
14
14
|
return column.sticky === 'right' ? 'right' : 'left';
|
|
15
15
|
}
|
|
16
16
|
function moveColumn(columns, fromIndex, toIndex) {
|
|
17
|
-
if (fromIndex === toIndex ||
|
|
17
|
+
if (fromIndex === toIndex ||
|
|
18
|
+
fromIndex < 0 ||
|
|
19
|
+
toIndex < 0 ||
|
|
20
|
+
fromIndex >= columns.length ||
|
|
21
|
+
toIndex >= columns.length) {
|
|
18
22
|
return columns;
|
|
19
23
|
}
|
|
20
24
|
const next = [...columns];
|
|
@@ -53,10 +57,10 @@ function setColumnVisibility(columns, key, visible) {
|
|
|
53
57
|
|
|
54
58
|
class DataGridColumnManagerColumnTitleDirective {
|
|
55
59
|
template = inject((TemplateRef));
|
|
56
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
57
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerColumnTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
61
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridColumnManagerColumnTitleDirective, isStandalone: true, selector: "ng-template[reDataGridColumnManagerColumnTitle]", ngImport: i0 });
|
|
58
62
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerColumnTitleDirective, decorators: [{
|
|
60
64
|
type: Directive,
|
|
61
65
|
args: [{
|
|
62
66
|
selector: 'ng-template[reDataGridColumnManagerColumnTitle]',
|
|
@@ -66,10 +70,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
66
70
|
|
|
67
71
|
class DataGridColumnManagerTriggerDirective {
|
|
68
72
|
template = inject((TemplateRef));
|
|
69
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
70
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
74
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridColumnManagerTriggerDirective, isStandalone: true, selector: "ng-template[reDataGridColumnManagerTrigger]", ngImport: i0 });
|
|
71
75
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerTriggerDirective, decorators: [{
|
|
73
77
|
type: Directive,
|
|
74
78
|
args: [{
|
|
75
79
|
selector: 'ng-template[reDataGridColumnManagerTrigger]',
|
|
@@ -77,9 +81,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
77
81
|
}]
|
|
78
82
|
}] });
|
|
79
83
|
|
|
84
|
+
/* eslint-disable max-len */
|
|
80
85
|
class CrossIcon {
|
|
81
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
82
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CrossIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CrossIcon, isStandalone: true, selector: "re-cross-ic", ngImport: i0, template: `
|
|
83
88
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
89
|
<path
|
|
85
90
|
d="M10.3052 8L13.759 4.5462C13.8354 4.47048 13.896 4.38038 13.9374 4.28111C13.9787 4.18186 14 4.07538 14 3.96785C14 3.86032 13.9787 3.75385 13.9374 3.65458C13.896 3.55532 13.8354 3.46523 13.759 3.3895L12.6105 2.24095C12.5347 2.1646 12.4447 2.104 12.3454 2.06265C12.2461 2.02129 12.1397 2 12.0321 2C11.9246 2 11.8182 2.02129 11.7189 2.06265C11.6196 2.104 11.5296 2.1646 11.4538 2.24095L8 5.69475L4.5462 2.24095C4.47048 2.1646 4.38038 2.104 4.28111 2.06265C4.18186 2.02129 4.07538 2 3.96785 2C3.86032 2 3.75385 2.02129 3.65458 2.06265C3.55532 2.104 3.46523 2.1646 3.3895 2.24095L2.24095 3.3895C2.1646 3.46523 2.104 3.55532 2.06265 3.65458C2.02129 3.75385 2 3.86032 2 3.96785C2 4.07538 2.02129 4.18186 2.06265 4.28111C2.104 4.38038 2.1646 4.47048 2.24095 4.5462L5.69475 8L2.24095 11.4538C2.1646 11.5296 2.104 11.6196 2.06265 11.7189C2.02129 11.8182 2 11.9246 2 12.0321C2 12.1397 2.02129 12.2461 2.06265 12.3454C2.104 12.4447 2.1646 12.5347 2.24095 12.6105L3.3895 13.759C3.46523 13.8354 3.55532 13.896 3.65458 13.9374C3.75385 13.9787 3.86032 14 3.96785 14C4.07538 14 4.18186 13.9787 4.28111 13.9374C4.38038 13.896 4.47048 13.8354 4.5462 13.759L8 10.3052L11.4538 13.759C11.5296 13.8354 11.6196 13.896 11.7189 13.9374C11.8182 13.9787 11.9246 14 12.0321 14C12.1397 14 12.2461 13.9787 12.3454 13.9374C12.4447 13.896 12.5347 13.8354 12.6105 13.759L13.759 12.6105C13.8354 12.5347 13.896 12.4447 13.9374 12.3454C13.9787 12.2461 14 12.1397 14 12.0321C14 11.9246 13.9787 11.8182 13.9374 11.7189C13.896 11.6196 13.8354 11.5296 13.759 11.4538L10.3052 8Z"
|
|
@@ -88,7 +93,7 @@ class CrossIcon {
|
|
|
88
93
|
</svg>
|
|
89
94
|
`, isInline: true, styles: [":host{--re-data-grid-cross-ic-surface: currentColor;display:inline-block;width:16px;height:16px}\n"] });
|
|
90
95
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CrossIcon, decorators: [{
|
|
92
97
|
type: Component,
|
|
93
98
|
args: [{ selector: 're-cross-ic', template: `
|
|
94
99
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -100,10 +105,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
100
105
|
`, styles: [":host{--re-data-grid-cross-ic-surface: currentColor;display:inline-block;width:16px;height:16px}\n"] }]
|
|
101
106
|
}] });
|
|
102
107
|
|
|
108
|
+
/* eslint-disable max-len */
|
|
103
109
|
class EyeIcon {
|
|
104
110
|
open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
|
|
105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EyeIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EyeIcon, isStandalone: true, selector: "re-eye-ic", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
107
113
|
@if (open()) {
|
|
108
114
|
<svg width="13.5" height="13.5" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
109
115
|
<path
|
|
@@ -121,7 +127,7 @@ class EyeIcon {
|
|
|
121
127
|
}
|
|
122
128
|
`, isInline: true, styles: [":host{--re-data-grid-eye-ic-surface: currentColor;max-width:16px;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] });
|
|
123
129
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EyeIcon, decorators: [{
|
|
125
131
|
type: Component,
|
|
126
132
|
args: [{ selector: 're-eye-ic', template: `
|
|
127
133
|
@if (open()) {
|
|
@@ -142,10 +148,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
142
148
|
`, styles: [":host{--re-data-grid-eye-ic-surface: currentColor;max-width:16px;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
143
149
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
|
|
144
150
|
|
|
151
|
+
/* eslint-disable max-len */
|
|
145
152
|
class PinIcon {
|
|
146
153
|
toRight = input(false, { ...(ngDevMode ? { debugName: "toRight" } : {}), transform: booleanAttribute });
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
154
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PinIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: PinIcon, isStandalone: true, selector: "re-pin-ic", inputs: { toRight: { classPropertyName: "toRight", publicName: "toRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
149
156
|
<svg
|
|
150
157
|
width="16"
|
|
151
158
|
height="16"
|
|
@@ -161,7 +168,7 @@ class PinIcon {
|
|
|
161
168
|
</svg>
|
|
162
169
|
`, isInline: true, styles: [":host{--re-data-grid-pin-ic-surface: currentColor;display:inline-block;width:16px;height:16px}.toRight{transform:rotate(-90deg)}\n"] });
|
|
163
170
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PinIcon, decorators: [{
|
|
165
172
|
type: Component,
|
|
166
173
|
args: [{ selector: 're-pin-ic', template: `
|
|
167
174
|
<svg
|
|
@@ -379,6 +386,14 @@ class DataGridColumnManager {
|
|
|
379
386
|
}
|
|
380
387
|
this.reorderByKey(source, targetKey);
|
|
381
388
|
}
|
|
389
|
+
buildColumnTitleContext(column) {
|
|
390
|
+
const title = String(column.header || column.key);
|
|
391
|
+
return {
|
|
392
|
+
$implicit: title,
|
|
393
|
+
title,
|
|
394
|
+
column,
|
|
395
|
+
};
|
|
396
|
+
}
|
|
382
397
|
reorderByKey(sourceKey, targetKey) {
|
|
383
398
|
const list = this.state();
|
|
384
399
|
const from = list.findIndex((column) => column.key === sourceKey);
|
|
@@ -398,14 +413,6 @@ class DataGridColumnManager {
|
|
|
398
413
|
isInsidePinMenu(target) {
|
|
399
414
|
return target instanceof Element && !!target.closest('[data-pin-menu]');
|
|
400
415
|
}
|
|
401
|
-
buildColumnTitleContext(column) {
|
|
402
|
-
const title = String(column.header || column.key);
|
|
403
|
-
return {
|
|
404
|
-
$implicit: title,
|
|
405
|
-
title,
|
|
406
|
-
column,
|
|
407
|
-
};
|
|
408
|
-
}
|
|
409
416
|
schedulePanelPositioning() {
|
|
410
417
|
runInInjectionContext(this.injector, () => {
|
|
411
418
|
afterNextRender(() => this.positionPanel());
|
|
@@ -428,10 +435,10 @@ class DataGridColumnManager {
|
|
|
428
435
|
const nextLeft = Math.min(Math.max(0, lower), upper);
|
|
429
436
|
this.panelLeft.set(Number.isFinite(nextLeft) ? nextLeft : 0);
|
|
430
437
|
}
|
|
431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
432
|
-
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 }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", 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>\r\n <button\r\n type=\"button\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n @if (triggerTemplate(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n } @else {\r\n <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n </div>\r\n }\r\n </button>\r\n\r\n @if (opened()) {\r\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n @let list = filteredColumns();\r\n\r\n @if (controlsVisible() && searchable()) {\r\n <label class=\"re-dg-cm__search\">\r\n <input\r\n type=\"search\"\r\n [value]=\"searchQuery()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n </label>\r\n }\r\n\r\n <div class=\"re-dg-cm__title-row\">\r\n @if (controlsVisible()) {\r\n <div class=\"re-dg-cm__tools\">\r\n <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n\r\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n </div>\r\n\r\n <div class=\"re-dg-cm__list\">\r\n @for (column of list; track column.key) {\r\n @let currentPin = pin(column.key);\r\n @let disabled = !!column.disabled;\r\n @let canHideValue = canHideColumn(column.key);\r\n\r\n <div\r\n class=\"re-dg-cm__row\"\r\n [attr.draggable]=\"allowReorder() && !disabled\"\r\n [class.re-dg-cm__row--disabled]=\"disabled\"\r\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n (dragstart)=\"onDragStart($event, column.key)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event, column.key)\"\r\n (dragend)=\"draggingKey.set(null)\"\r\n >\r\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n <div class=\"re-dg-cm__checkbox\">\r\n <button\r\n type=\"button\"\r\n [class.active]=\"column.visible !== false\"\r\n [disabled]=\"disabled || !canHideValue\"\r\n (click)=\"onVisibleChange(column.key)\"\r\n >\r\n <re-eye-ic [open]=\"column.visible !== false\" />\r\n </button>\r\n @if (columnTitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n />\r\n } @else {\r\n <span>{{ column.header || column.key }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"re-dg-cm__actions\">\r\n @if (allowPin()) {\r\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n <button\r\n type=\"button\"\r\n class=\"re-dg-cm__pin-current\"\r\n [disabled]=\"disabled\"\r\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n (click)=\"togglePinMenu($event, column.key)\"\r\n [title]=\"pinLabel(currentPin)\"\r\n >\r\n @if (currentPin === 'left') {\r\n <re-pin-ic />\r\n } @else if (currentPin === 'right') {\r\n <re-pin-ic toRight />\r\n } @else {\r\n <re-cross-ic />\r\n }\r\n </button>\r\n\r\n @if (openedPinMenuKey() === column.key && !disabled) {\r\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n (click)=\"selectPin(column.key, 'left')\"\r\n title=\"Pin left\"\r\n >\r\n <re-pin-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n (click)=\"selectPin(column.key, 'none')\"\r\n title=\"Unpin\"\r\n >\r\n <re-cross-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n (click)=\"selectPin(column.key, 'right')\"\r\n title=\"Pin right\"\r\n >\r\n <re-pin-ic toRight />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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"] }] });
|
|
438
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", 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>\r\n <button\r\n type=\"button\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n @if (triggerTemplate(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n } @else {\r\n <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n </div>\r\n }\r\n </button>\r\n\r\n @if (opened()) {\r\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n @let list = filteredColumns();\r\n\r\n @if (controlsVisible() && searchable()) {\r\n <label class=\"re-dg-cm__search\">\r\n <input\r\n type=\"search\"\r\n [value]=\"searchQuery()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n </label>\r\n }\r\n\r\n <div class=\"re-dg-cm__title-row\">\r\n @if (controlsVisible()) {\r\n <div class=\"re-dg-cm__tools\">\r\n <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n\r\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n </div>\r\n\r\n <div class=\"re-dg-cm__list\">\r\n @for (column of list; track column.key) {\r\n @let currentPin = pin(column.key);\r\n @let disabled = !!column.disabled;\r\n @let canHideValue = canHideColumn(column.key);\r\n\r\n <div\r\n class=\"re-dg-cm__row\"\r\n [attr.draggable]=\"allowReorder() && !disabled\"\r\n [class.re-dg-cm__row--disabled]=\"disabled\"\r\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n (dragstart)=\"onDragStart($event, column.key)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event, column.key)\"\r\n (dragend)=\"draggingKey.set(null)\"\r\n >\r\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n <div class=\"re-dg-cm__checkbox\">\r\n <button\r\n type=\"button\"\r\n [class.active]=\"column.visible !== false\"\r\n [disabled]=\"disabled || !canHideValue\"\r\n (click)=\"onVisibleChange(column.key)\"\r\n >\r\n <re-eye-ic [open]=\"column.visible !== false\" />\r\n </button>\r\n @if (columnTitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n />\r\n } @else {\r\n <span>{{ column.header || column.key }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"re-dg-cm__actions\">\r\n @if (allowPin()) {\r\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n <button\r\n type=\"button\"\r\n class=\"re-dg-cm__pin-current\"\r\n [disabled]=\"disabled\"\r\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n (click)=\"togglePinMenu($event, column.key)\"\r\n [title]=\"pinLabel(currentPin)\"\r\n >\r\n @if (currentPin === 'left') {\r\n <re-pin-ic />\r\n } @else if (currentPin === 'right') {\r\n <re-pin-ic toRight />\r\n } @else {\r\n <re-cross-ic />\r\n }\r\n </button>\r\n\r\n @if (openedPinMenuKey() === column.key && !disabled) {\r\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n (click)=\"selectPin(column.key, 'left')\"\r\n title=\"Pin left\"\r\n >\r\n <re-pin-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n (click)=\"selectPin(column.key, 'none')\"\r\n title=\"Unpin\"\r\n >\r\n <re-cross-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n (click)=\"selectPin(column.key, 'right')\"\r\n title=\"Pin right\"\r\n >\r\n <re-pin-ic toRight />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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"] }] });
|
|
433
440
|
}
|
|
434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManager, decorators: [{
|
|
435
442
|
type: Component,
|
|
436
443
|
args: [{ selector: 're-data-grid-column-manager', standalone: true, host: {
|
|
437
444
|
'document:mousedown': 'onDocumentMouseDown($event.target)',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-
|
|
1
|
+
import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-d5V0EST_.mjs';
|
|
2
2
|
|
|
3
3
|
function createGridOverlayScrollFeature(ctx) {
|
|
4
4
|
const showScrollbar = () => {
|
|
@@ -76,4 +76,4 @@ function createGridOverlayScrollFeature(ctx) {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
export { createGridOverlayScrollFeature };
|
|
79
|
-
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-
|
|
79
|
+
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-BQFxyNCT.mjs.map
|
|
@@ -5,10 +5,10 @@ import { DataGridDropdown } from '@reforgium/data-grid/ui';
|
|
|
5
5
|
|
|
6
6
|
class DataGridPaginatorFirstDirective {
|
|
7
7
|
tpl = inject((TemplateRef));
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
9
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorFirstDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorFirstDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorFirst]", ngImport: i0 });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorFirstDirective, decorators: [{
|
|
12
12
|
type: Directive,
|
|
13
13
|
args: [{
|
|
14
14
|
selector: 'ng-template[reDataGridPaginatorFirst]',
|
|
@@ -16,10 +16,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
16
16
|
}] });
|
|
17
17
|
class DataGridPaginatorLastDirective {
|
|
18
18
|
tpl = inject((TemplateRef));
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
20
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorLastDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorLastDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorLast]", ngImport: i0 });
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorLastDirective, decorators: [{
|
|
23
23
|
type: Directive,
|
|
24
24
|
args: [{
|
|
25
25
|
selector: 'ng-template[reDataGridPaginatorLast]',
|
|
@@ -27,10 +27,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
27
27
|
}] });
|
|
28
28
|
class DataGridPaginatorPageDirective {
|
|
29
29
|
tpl = inject((TemplateRef));
|
|
30
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
31
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
31
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorPageDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorPage]", ngImport: i0 });
|
|
32
32
|
}
|
|
33
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
33
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorPageDirective, decorators: [{
|
|
34
34
|
type: Directive,
|
|
35
35
|
args: [{
|
|
36
36
|
selector: 'ng-template[reDataGridPaginatorPage]',
|
|
@@ -117,8 +117,8 @@ class DataGridPaginator {
|
|
|
117
117
|
}
|
|
118
118
|
this.pageSizeChange.emit(typedValue);
|
|
119
119
|
}
|
|
120
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataGridPaginator, isStandalone: true, selector: "re-data-grid-paginator", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxShowPages: { classPropertyName: "maxShowPages", publicName: "maxShowPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, showPerPage: { classPropertyName: "showPerPage", publicName: "showPerPage", isSignal: true, isRequired: false, transformFunction: null }, perPageLabel: { classPropertyName: "perPageLabel", publicName: "perPageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, queries: [{ propertyName: "firstSlotRefs", predicate: DataGridPaginatorFirstDirective, isSignal: true }, { propertyName: "lastSlotRefs", predicate: DataGridPaginatorLastDirective, isSignal: true }, { propertyName: "pageSlotRefs", predicate: DataGridPaginatorPageDirective, isSignal: true }], ngImport: i0, template: `
|
|
122
122
|
@let total = totalPages();
|
|
123
123
|
@let perPageOptions = normalizedPageSizeOptions();
|
|
124
124
|
|
|
@@ -195,7 +195,7 @@ class DataGridPaginator {
|
|
|
195
195
|
}
|
|
196
196
|
`, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;white-space:nowrap;transition:all .2s}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);cursor:pointer;white-space:nowrap;transition:all .2s}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridDropdown, selector: "re-data-grid-dropdown", inputs: ["options", "value", "disabled", "placeholder"], outputs: ["selectValue"] }] });
|
|
197
197
|
}
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, decorators: [{
|
|
199
199
|
type: Component,
|
|
200
200
|
args: [{ selector: 're-data-grid-paginator', imports: [NgTemplateOutlet, DataGridDropdown], template: `
|
|
201
201
|
@let total = totalPages();
|