@reforgium/data-grid 1.1.0 → 2.0.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.
@@ -0,0 +1,601 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Component, input, booleanAttribute, output, signal, viewChild, computed, effect } from '@angular/core';
3
+ import { NgTemplateOutlet } from '@angular/common';
4
+
5
+ const isVisible = (column) => column.visible !== false;
6
+ function cloneColumns(columns) {
7
+ return columns.map((column) => ({ ...column }));
8
+ }
9
+ function resolvePinState(columns, key) {
10
+ const visible = columns.filter(isVisible);
11
+ const index = visible.findIndex((column) => column.key === key);
12
+ if (index < 0) {
13
+ return 'none';
14
+ }
15
+ const column = visible[index];
16
+ if (!column.sticky) {
17
+ return 'none';
18
+ }
19
+ const middleIndex = Math.floor(visible.length / 2);
20
+ return index < middleIndex ? 'left' : 'right';
21
+ }
22
+ function moveColumn(columns, fromIndex, toIndex) {
23
+ if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= columns.length || toIndex >= columns.length) {
24
+ return columns;
25
+ }
26
+ const next = [...columns];
27
+ const [moving] = next.splice(fromIndex, 1);
28
+ next.splice(toIndex, 0, moving);
29
+ return next;
30
+ }
31
+ function setColumnPin(columns, key, pin) {
32
+ const fromIndex = columns.findIndex((column) => column.key === key);
33
+ if (fromIndex < 0) {
34
+ return columns;
35
+ }
36
+ const next = cloneColumns(columns);
37
+ next[fromIndex] = {
38
+ ...next[fromIndex],
39
+ sticky: pin === 'none' ? undefined : pin,
40
+ };
41
+ if (pin === 'none') {
42
+ return next;
43
+ }
44
+ const toIndex = pin === 'left' ? 0 : next.length - 1;
45
+ return moveColumn(next, fromIndex, toIndex);
46
+ }
47
+ function setColumnVisibility(columns, key, visible) {
48
+ const index = columns.findIndex((column) => column.key === key);
49
+ if (index < 0) {
50
+ return columns;
51
+ }
52
+ const visibleCount = columns.filter(isVisible).length;
53
+ if (!visible && visibleCount <= 1 && isVisible(columns[index])) {
54
+ return columns;
55
+ }
56
+ const next = cloneColumns(columns);
57
+ next[index] = {
58
+ ...next[index],
59
+ visible,
60
+ };
61
+ return next;
62
+ }
63
+
64
+ class CrossIcon {
65
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrossIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
66
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: CrossIcon, isStandalone: true, selector: "re-cross-ic", ngImport: i0, template: `
67
+ <svg width="16" height="16" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
68
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
69
+ <path
70
+ d="M10.1958 7.3658L14.4358 3.1258C14.5295 3.03284 14.6039 2.92223 14.6547 2.80037C14.7055 2.67852 14.7316 2.54781 14.7316 2.4158C14.7316 2.28379 14.7055 2.15308 14.6547 2.03122C14.6039 1.90936 14.5295 1.79876 14.4358 1.7058L13.0258 0.295798C12.9328 0.20207 12.8222 0.127676 12.7004 0.0769072C12.5785 0.0261385 12.4478 0 12.3158 0C12.1838 0 12.0531 0.0261385 11.9312 0.0769072C11.8094 0.127676 11.6988 0.20207 11.6058 0.295798L7.3658 4.5358L3.1258 0.295798C3.03284 0.20207 2.92223 0.127676 2.80037 0.0769072C2.67852 0.0261385 2.54781 0 2.4158 0C2.28379 0 2.15308 0.0261385 2.03122 0.0769072C1.90936 0.127676 1.79876 0.20207 1.7058 0.295798L0.295798 1.7058C0.20207 1.79876 0.127676 1.90936 0.0769072 2.03122C0.0261385 2.15308 0 2.28379 0 2.4158C0 2.54781 0.0261385 2.67852 0.0769072 2.80037C0.127676 2.92223 0.20207 3.03284 0.295798 3.1258L4.5358 7.3658L0.295798 11.6058C0.20207 11.6988 0.127676 11.8094 0.0769072 11.9312C0.0261385 12.0531 0 12.1838 0 12.3158C0 12.4478 0.0261385 12.5785 0.0769072 12.7004C0.127676 12.8222 0.20207 12.9328 0.295798 13.0258L1.7058 14.4358C1.79876 14.5295 1.90936 14.6039 2.03122 14.6547C2.15308 14.7055 2.28379 14.7316 2.4158 14.7316C2.54781 14.7316 2.67852 14.7055 2.80037 14.6547C2.92223 14.6039 3.03284 14.5295 3.1258 14.4358L7.3658 10.1958L11.6058 14.4358C11.6988 14.5295 11.8094 14.6039 11.9312 14.6547C12.0531 14.7055 12.1838 14.7316 12.3158 14.7316C12.4478 14.7316 12.5785 14.7055 12.7004 14.6547C12.8222 14.6039 12.9328 14.5295 13.0258 14.4358L14.4358 13.0258C14.5295 12.9328 14.6039 12.8222 14.6547 12.7004C14.7055 12.5785 14.7316 12.4478 14.7316 12.3158C14.7316 12.1838 14.7055 12.0531 14.6547 11.9312C14.6039 11.8094 14.5295 11.6988 14.4358 11.6058L10.1958 7.3658Z"
71
+ fill="var(--re-data-grid-cross-ic-surface)"
72
+ />
73
+ </svg>
74
+ </svg>
75
+ `, isInline: true, styles: [":host{--re-data-grid-cross-ic-surface: currentColor}\n"] });
76
+ }
77
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CrossIcon, decorators: [{
78
+ type: Component,
79
+ args: [{ selector: 're-cross-ic', template: `
80
+ <svg width="16" height="16" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
81
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
82
+ <path
83
+ d="M10.1958 7.3658L14.4358 3.1258C14.5295 3.03284 14.6039 2.92223 14.6547 2.80037C14.7055 2.67852 14.7316 2.54781 14.7316 2.4158C14.7316 2.28379 14.7055 2.15308 14.6547 2.03122C14.6039 1.90936 14.5295 1.79876 14.4358 1.7058L13.0258 0.295798C12.9328 0.20207 12.8222 0.127676 12.7004 0.0769072C12.5785 0.0261385 12.4478 0 12.3158 0C12.1838 0 12.0531 0.0261385 11.9312 0.0769072C11.8094 0.127676 11.6988 0.20207 11.6058 0.295798L7.3658 4.5358L3.1258 0.295798C3.03284 0.20207 2.92223 0.127676 2.80037 0.0769072C2.67852 0.0261385 2.54781 0 2.4158 0C2.28379 0 2.15308 0.0261385 2.03122 0.0769072C1.90936 0.127676 1.79876 0.20207 1.7058 0.295798L0.295798 1.7058C0.20207 1.79876 0.127676 1.90936 0.0769072 2.03122C0.0261385 2.15308 0 2.28379 0 2.4158C0 2.54781 0.0261385 2.67852 0.0769072 2.80037C0.127676 2.92223 0.20207 3.03284 0.295798 3.1258L4.5358 7.3658L0.295798 11.6058C0.20207 11.6988 0.127676 11.8094 0.0769072 11.9312C0.0261385 12.0531 0 12.1838 0 12.3158C0 12.4478 0.0261385 12.5785 0.0769072 12.7004C0.127676 12.8222 0.20207 12.9328 0.295798 13.0258L1.7058 14.4358C1.79876 14.5295 1.90936 14.6039 2.03122 14.6547C2.15308 14.7055 2.28379 14.7316 2.4158 14.7316C2.54781 14.7316 2.67852 14.7055 2.80037 14.6547C2.92223 14.6039 3.03284 14.5295 3.1258 14.4358L7.3658 10.1958L11.6058 14.4358C11.6988 14.5295 11.8094 14.6039 11.9312 14.6547C12.0531 14.7055 12.1838 14.7316 12.3158 14.7316C12.4478 14.7316 12.5785 14.7055 12.7004 14.6547C12.8222 14.6039 12.9328 14.5295 13.0258 14.4358L14.4358 13.0258C14.5295 12.9328 14.6039 12.8222 14.6547 12.7004C14.7055 12.5785 14.7316 12.4478 14.7316 12.3158C14.7316 12.1838 14.7055 12.0531 14.6547 11.9312C14.6039 11.8094 14.5295 11.6988 14.4358 11.6058L10.1958 7.3658Z"
84
+ fill="var(--re-data-grid-cross-ic-surface)"
85
+ />
86
+ </svg>
87
+ </svg>
88
+ `, styles: [":host{--re-data-grid-cross-ic-surface: currentColor}\n"] }]
89
+ }] });
90
+
91
+ class EyeIcon {
92
+ open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
93
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EyeIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
94
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: EyeIcon, isStandalone: true, selector: "re-eye-ic", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
95
+ @if (open()) {
96
+ <svg width="13.5" height="13.5" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
97
+ <path
98
+ d="M12.85 8.56C12.85 9.12368 12.6828 9.6747 12.3697 10.1434C12.0565 10.6121 11.6114 10.9773 11.0906 11.1931C10.5699 11.4088 9.99684 11.4652 9.44399 11.3552C8.89115 11.2453 8.38333 10.9738 7.98475 10.5753C7.58617 10.1767 7.31473 9.66885 7.20476 9.11601C7.09479 8.56316 7.15123 7.99012 7.36694 7.46935C7.58265 6.94858 7.94795 6.50347 8.41663 6.19031C8.88531 5.87715 9.43632 5.71 10 5.71C10.7551 5.71264 11.4784 6.01375 12.0123 6.54766C12.5463 7.08157 12.8474 7.80494 12.85 8.56ZM20 8.56C20 12.56 15 17.12 10 17.12C5.27 17.12 0 12.32 0 8.56C0 4.62 5.27 0 10 0C14.73 0 20 4.74 20 8.56ZM14.35 8.56C14.35 7.69965 14.0949 6.85862 13.6169 6.14327C13.1389 5.42792 12.4595 4.87037 11.6647 4.54112C10.8698 4.21188 9.99517 4.12574 9.15136 4.29358C8.30754 4.46143 7.53244 4.87573 6.92409 5.48409C6.31573 6.09244 5.90143 6.86754 5.73358 7.71136C5.56574 8.55517 5.65188 9.42981 5.98112 10.2247C6.31037 11.0195 6.86792 11.6989 7.58327 12.1769C8.29862 12.6549 9.13965 12.91 10 12.91C11.1537 12.91 12.2601 12.4517 13.0759 11.6359C13.8917 10.8201 14.35 9.71369 14.35 8.56Z"
99
+ fill="var(--re-data-grid-eye-ic-surface)"
100
+ />
101
+ </svg>
102
+ } @else {
103
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
104
+ <path
105
+ d="M21.66 2.38028C21.5164 2.24158 21.3246 2.16406 21.125 2.16406C20.9254 2.16406 20.7336 2.24158 20.59 2.38028L17.21 5.75028C15.6674 4.70563 13.8618 4.11647 12 4.05028C7.27 4.05028 2 8.67028 2 12.6103C2 14.3803 3.18 16.3803 4.91 18.0003L2.35 20.5503C2.20894 20.6926 2.12979 20.8849 2.12979 21.0853C2.12979 21.2857 2.20894 21.478 2.35 21.6203C2.49233 21.7613 2.68461 21.8405 2.885 21.8405C3.08539 21.8405 3.27767 21.7613 3.42 21.6203L21.65 3.45028C21.7924 3.30927 21.8733 3.11773 21.8752 2.91734C21.8771 2.71695 21.7997 2.52392 21.66 2.38028ZM7.66 12.6103C7.65079 11.8501 7.84329 11.1011 8.21787 10.4395C8.59245 9.77798 9.13572 9.22757 9.79232 8.84438C10.4489 8.4612 11.1954 8.25894 11.9556 8.25822C12.7158 8.2575 13.4627 8.45834 14.12 8.84028L13 10.0003C12.6822 9.87139 12.3429 9.80354 12 9.80028C11.2449 9.80292 10.5216 10.104 9.98766 10.6379C9.45375 11.1718 9.15264 11.8952 9.15 12.6503C9.15367 12.9922 9.218 13.3308 9.34 13.6503L8.22 14.7003C7.85137 14.0651 7.6549 13.3447 7.65 12.6103H7.66ZM22.01 12.6103C22.01 16.6103 17.01 21.1703 12.01 21.1703C10.3603 21.1211 8.75145 20.6457 7.34 19.7903L10.48 16.6703C11.1371 16.9247 11.8464 17.0146 12.5462 16.9321C13.2459 16.8495 13.9149 16.5971 14.4947 16.1967C15.0745 15.7964 15.5476 15.2603 15.8727 14.6352C16.1979 14.01 16.3651 13.3149 16.36 12.6103C16.3566 12.0934 16.2583 11.5816 16.07 11.1003L19.55 7.63028C20.9613 8.92507 21.8355 10.7021 22 12.6103H22.01ZM11.71 15.4303L14.82 12.3403C14.8249 12.4302 14.8249 12.5203 14.82 12.6103C14.82 13.361 14.5239 14.0814 13.9959 14.615C13.4679 15.1486 12.7507 15.4524 12 15.4603C11.9029 15.4552 11.8061 15.4452 11.71 15.4303Z"
106
+ fill="var(--re-data-grid-eye-ic-surface)"
107
+ />
108
+ </svg>
109
+ }
110
+ `, isInline: true, styles: [":host{--re-data-grid-eye-ic-surface: var(--primary-color, currentColor);width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] });
111
+ }
112
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: EyeIcon, decorators: [{
113
+ type: Component,
114
+ args: [{ selector: 're-eye-ic', template: `
115
+ @if (open()) {
116
+ <svg width="13.5" height="13.5" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
117
+ <path
118
+ d="M12.85 8.56C12.85 9.12368 12.6828 9.6747 12.3697 10.1434C12.0565 10.6121 11.6114 10.9773 11.0906 11.1931C10.5699 11.4088 9.99684 11.4652 9.44399 11.3552C8.89115 11.2453 8.38333 10.9738 7.98475 10.5753C7.58617 10.1767 7.31473 9.66885 7.20476 9.11601C7.09479 8.56316 7.15123 7.99012 7.36694 7.46935C7.58265 6.94858 7.94795 6.50347 8.41663 6.19031C8.88531 5.87715 9.43632 5.71 10 5.71C10.7551 5.71264 11.4784 6.01375 12.0123 6.54766C12.5463 7.08157 12.8474 7.80494 12.85 8.56ZM20 8.56C20 12.56 15 17.12 10 17.12C5.27 17.12 0 12.32 0 8.56C0 4.62 5.27 0 10 0C14.73 0 20 4.74 20 8.56ZM14.35 8.56C14.35 7.69965 14.0949 6.85862 13.6169 6.14327C13.1389 5.42792 12.4595 4.87037 11.6647 4.54112C10.8698 4.21188 9.99517 4.12574 9.15136 4.29358C8.30754 4.46143 7.53244 4.87573 6.92409 5.48409C6.31573 6.09244 5.90143 6.86754 5.73358 7.71136C5.56574 8.55517 5.65188 9.42981 5.98112 10.2247C6.31037 11.0195 6.86792 11.6989 7.58327 12.1769C8.29862 12.6549 9.13965 12.91 10 12.91C11.1537 12.91 12.2601 12.4517 13.0759 11.6359C13.8917 10.8201 14.35 9.71369 14.35 8.56Z"
119
+ fill="var(--re-data-grid-eye-ic-surface)"
120
+ />
121
+ </svg>
122
+ } @else {
123
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
124
+ <path
125
+ d="M21.66 2.38028C21.5164 2.24158 21.3246 2.16406 21.125 2.16406C20.9254 2.16406 20.7336 2.24158 20.59 2.38028L17.21 5.75028C15.6674 4.70563 13.8618 4.11647 12 4.05028C7.27 4.05028 2 8.67028 2 12.6103C2 14.3803 3.18 16.3803 4.91 18.0003L2.35 20.5503C2.20894 20.6926 2.12979 20.8849 2.12979 21.0853C2.12979 21.2857 2.20894 21.478 2.35 21.6203C2.49233 21.7613 2.68461 21.8405 2.885 21.8405C3.08539 21.8405 3.27767 21.7613 3.42 21.6203L21.65 3.45028C21.7924 3.30927 21.8733 3.11773 21.8752 2.91734C21.8771 2.71695 21.7997 2.52392 21.66 2.38028ZM7.66 12.6103C7.65079 11.8501 7.84329 11.1011 8.21787 10.4395C8.59245 9.77798 9.13572 9.22757 9.79232 8.84438C10.4489 8.4612 11.1954 8.25894 11.9556 8.25822C12.7158 8.2575 13.4627 8.45834 14.12 8.84028L13 10.0003C12.6822 9.87139 12.3429 9.80354 12 9.80028C11.2449 9.80292 10.5216 10.104 9.98766 10.6379C9.45375 11.1718 9.15264 11.8952 9.15 12.6503C9.15367 12.9922 9.218 13.3308 9.34 13.6503L8.22 14.7003C7.85137 14.0651 7.6549 13.3447 7.65 12.6103H7.66ZM22.01 12.6103C22.01 16.6103 17.01 21.1703 12.01 21.1703C10.3603 21.1211 8.75145 20.6457 7.34 19.7903L10.48 16.6703C11.1371 16.9247 11.8464 17.0146 12.5462 16.9321C13.2459 16.8495 13.9149 16.5971 14.4947 16.1967C15.0745 15.7964 15.5476 15.2603 15.8727 14.6352C16.1979 14.01 16.3651 13.3149 16.36 12.6103C16.3566 12.0934 16.2583 11.5816 16.07 11.1003L19.55 7.63028C20.9613 8.92507 21.8355 10.7021 22 12.6103H22.01ZM11.71 15.4303L14.82 12.3403C14.8249 12.4302 14.8249 12.5203 14.82 12.6103C14.82 13.361 14.5239 14.0814 13.9959 14.615C13.4679 15.1486 12.7507 15.4524 12 15.4603C11.9029 15.4552 11.8061 15.4452 11.71 15.4303Z"
126
+ fill="var(--re-data-grid-eye-ic-surface)"
127
+ />
128
+ </svg>
129
+ }
130
+ `, styles: [":host{--re-data-grid-eye-ic-surface: var(--primary-color, currentColor);width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
131
+ }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
132
+
133
+ class PinIcon {
134
+ toRight = input(false, { ...(ngDevMode ? { debugName: "toRight" } : {}), transform: booleanAttribute });
135
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PinIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
136
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: PinIcon, isStandalone: true, selector: "re-pin-ic", inputs: { toRight: { classPropertyName: "toRight", publicName: "toRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
137
+ <svg
138
+ width="16"
139
+ height="16"
140
+ viewBox="0 0 20 20"
141
+ fill="none"
142
+ xmlns="http://www.w3.org/2000/svg"
143
+ [class.toRight]="toRight()"
144
+ >
145
+ <path
146
+ d="M19.6209 7.55125L18.9009 8.27125C18.8075 8.36959 18.695 8.44789 18.5704 8.5014C18.4457 8.55491 18.3115 8.5825 18.1759 8.5825C18.0402 8.5825 17.906 8.55491 17.7814 8.5014C17.6568 8.44789 17.5443 8.36959 17.4509 8.27125L16.7309 7.55125L13.5709 10.7113C14.0298 11.6766 14.2297 12.7448 14.1508 13.8108C14.0719 14.8768 13.717 15.904 13.1209 16.7913C12.9705 17.0138 12.7731 17.2005 12.5425 17.3382C12.3119 17.4759 12.0538 17.5611 11.7865 17.5878C11.5193 17.6145 11.2495 17.5821 10.9962 17.4928C10.7429 17.4036 10.5123 17.2596 10.3209 17.0713L2.86088 9.61125C2.67251 9.41982 2.52858 9.18928 2.4393 8.93598C2.35003 8.68268 2.31761 8.41283 2.34433 8.1456C2.37105 7.87836 2.45627 7.62028 2.59393 7.38967C2.7316 7.15907 2.91833 6.96159 3.14088 6.81125C4.02817 6.21517 5.0553 5.86024 6.12131 5.78134C7.18732 5.70244 8.25551 5.90229 9.22088 6.36125L12.3809 3.20125L11.6609 2.48125C11.5625 2.38783 11.4842 2.27538 11.4307 2.15075C11.3772 2.02611 11.3496 1.89189 11.3496 1.75625C11.3496 1.62061 11.3772 1.48639 11.4307 1.36176C11.4842 1.23712 11.5625 1.12467 11.6609 1.03125L12.3809 0.311251C12.4743 0.212914 12.5868 0.13461 12.7114 0.0811017C12.836 0.0275935 12.9702 0 13.1059 0C13.2415 0 13.3757 0.0275935 13.5004 0.0811017C13.625 0.13461 13.7375 0.212914 13.8309 0.311251L19.6209 6.10125C19.7192 6.19467 19.7975 6.30712 19.851 6.43176C19.9045 6.55639 19.9321 6.69061 19.9321 6.82625C19.9321 6.96189 19.9045 7.09611 19.851 7.22075C19.7975 7.34538 19.7192 7.45783 19.6209 7.55125ZM1.62088 15.4513C1.09342 15.9597 0.695621 16.5873 0.460884 17.2812L0.0608836 18.4713C-0.0069043 18.6664 -0.0183471 18.8768 0.0278657 19.0782C0.0740786 19.2795 0.176078 19.4638 0.322183 19.61C0.468287 19.7561 0.652588 19.8581 0.853976 19.9043C1.05536 19.9505 1.2657 19.939 1.46088 19.8713L2.65088 19.4713C3.34193 19.2452 3.96923 18.8578 4.48088 18.3413L6.96088 15.8513L4.08088 12.9713L1.62088 15.4513ZM8.07088 14.7913L5.15088 11.8913L8.07088 14.7913Z"
147
+ fill="var(--re-data-grid-pin-ic-surface)"
148
+ />
149
+ </svg>
150
+ `, isInline: true, styles: [":host{--re-data-grid-pin-ic-surface: currentColor}.toRight{transform:rotate(-90deg)}\n"] });
151
+ }
152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PinIcon, decorators: [{
153
+ type: Component,
154
+ args: [{ selector: 're-pin-ic', template: `
155
+ <svg
156
+ width="16"
157
+ height="16"
158
+ viewBox="0 0 20 20"
159
+ fill="none"
160
+ xmlns="http://www.w3.org/2000/svg"
161
+ [class.toRight]="toRight()"
162
+ >
163
+ <path
164
+ d="M19.6209 7.55125L18.9009 8.27125C18.8075 8.36959 18.695 8.44789 18.5704 8.5014C18.4457 8.55491 18.3115 8.5825 18.1759 8.5825C18.0402 8.5825 17.906 8.55491 17.7814 8.5014C17.6568 8.44789 17.5443 8.36959 17.4509 8.27125L16.7309 7.55125L13.5709 10.7113C14.0298 11.6766 14.2297 12.7448 14.1508 13.8108C14.0719 14.8768 13.717 15.904 13.1209 16.7913C12.9705 17.0138 12.7731 17.2005 12.5425 17.3382C12.3119 17.4759 12.0538 17.5611 11.7865 17.5878C11.5193 17.6145 11.2495 17.5821 10.9962 17.4928C10.7429 17.4036 10.5123 17.2596 10.3209 17.0713L2.86088 9.61125C2.67251 9.41982 2.52858 9.18928 2.4393 8.93598C2.35003 8.68268 2.31761 8.41283 2.34433 8.1456C2.37105 7.87836 2.45627 7.62028 2.59393 7.38967C2.7316 7.15907 2.91833 6.96159 3.14088 6.81125C4.02817 6.21517 5.0553 5.86024 6.12131 5.78134C7.18732 5.70244 8.25551 5.90229 9.22088 6.36125L12.3809 3.20125L11.6609 2.48125C11.5625 2.38783 11.4842 2.27538 11.4307 2.15075C11.3772 2.02611 11.3496 1.89189 11.3496 1.75625C11.3496 1.62061 11.3772 1.48639 11.4307 1.36176C11.4842 1.23712 11.5625 1.12467 11.6609 1.03125L12.3809 0.311251C12.4743 0.212914 12.5868 0.13461 12.7114 0.0811017C12.836 0.0275935 12.9702 0 13.1059 0C13.2415 0 13.3757 0.0275935 13.5004 0.0811017C13.625 0.13461 13.7375 0.212914 13.8309 0.311251L19.6209 6.10125C19.7192 6.19467 19.7975 6.30712 19.851 6.43176C19.9045 6.55639 19.9321 6.69061 19.9321 6.82625C19.9321 6.96189 19.9045 7.09611 19.851 7.22075C19.7975 7.34538 19.7192 7.45783 19.6209 7.55125ZM1.62088 15.4513C1.09342 15.9597 0.695621 16.5873 0.460884 17.2812L0.0608836 18.4713C-0.0069043 18.6664 -0.0183471 18.8768 0.0278657 19.0782C0.0740786 19.2795 0.176078 19.4638 0.322183 19.61C0.468287 19.7561 0.652588 19.8581 0.853976 19.9043C1.05536 19.9505 1.2657 19.939 1.46088 19.8713L2.65088 19.4713C3.34193 19.2452 3.96923 18.8578 4.48088 18.3413L6.96088 15.8513L4.08088 12.9713L1.62088 15.4513ZM8.07088 14.7913L5.15088 11.8913L8.07088 14.7913Z"
165
+ fill="var(--re-data-grid-pin-ic-surface)"
166
+ />
167
+ </svg>
168
+ `, styles: [":host{--re-data-grid-pin-ic-surface: currentColor}.toRight{transform:rotate(-90deg)}\n"] }]
169
+ }], propDecorators: { toRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "toRight", required: false }] }] } });
170
+
171
+ // noinspection CssUnresolvedCustomProperty
172
+ class DataGridColumnManager {
173
+ columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
174
+ triggerLabel = input('Columns', ...(ngDevMode ? [{ debugName: "triggerLabel" }] : []));
175
+ triggerTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "triggerTemplate" }] : []));
176
+ controlsVisible = input(true, { ...(ngDevMode ? { debugName: "controlsVisible" } : {}), transform: booleanAttribute });
177
+ searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
178
+ searchPlaceholder = input('Search columns...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
179
+ allowReorder = input(true, { ...(ngDevMode ? { debugName: "allowReorder" } : {}), transform: booleanAttribute });
180
+ allowPin = input(true, { ...(ngDevMode ? { debugName: "allowPin" } : {}), transform: booleanAttribute });
181
+ allowVisibility = input(true, { ...(ngDevMode ? { debugName: "allowVisibility" } : {}), transform: booleanAttribute });
182
+ columnsChange = output();
183
+ state = signal([], ...(ngDevMode ? [{ debugName: "state" }] : []));
184
+ searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
185
+ draggingKey = signal(null, ...(ngDevMode ? [{ debugName: "draggingKey" }] : []));
186
+ opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
187
+ root = viewChild('root', ...(ngDevMode ? [{ debugName: "root" }] : []));
188
+ filteredColumns = computed(() => {
189
+ const query = this.searchQuery().trim().toLowerCase();
190
+ if (!query) {
191
+ return this.state();
192
+ }
193
+ return this.state().filter((column) => {
194
+ const key = String(column.key).toLowerCase();
195
+ const header = String(column.header || '').toLowerCase();
196
+ return key.includes(query) || header.includes(query);
197
+ });
198
+ }, ...(ngDevMode ? [{ debugName: "filteredColumns" }] : []));
199
+ visibleColumnsCount = computed(() => this.state().filter((column) => column.visible !== false).length, ...(ngDevMode ? [{ debugName: "visibleColumnsCount" }] : []));
200
+ constructor() {
201
+ effect(() => {
202
+ this.state.set(cloneColumns(this.columns()));
203
+ });
204
+ }
205
+ pin = (key) => resolvePinState(this.state(), key);
206
+ toggleOpen() {
207
+ this.opened.update((current) => !current);
208
+ }
209
+ onDocumentMouseDown(target) {
210
+ if (!this.opened()) {
211
+ return;
212
+ }
213
+ const root = this.root()?.nativeElement;
214
+ if (root && target instanceof Node && !root.contains(target)) {
215
+ this.opened.set(false);
216
+ }
217
+ }
218
+ onSearch(event) {
219
+ const target = event.target;
220
+ this.searchQuery.set(target?.value ?? '');
221
+ }
222
+ canHideColumn(key) {
223
+ const list = this.state();
224
+ const column = list.find((item) => item.key === key);
225
+ if (!column || !this.allowVisibility() || column.disabled) {
226
+ return false;
227
+ }
228
+ if (column.visible === false) {
229
+ return true;
230
+ }
231
+ return this.visibleColumnsCount() > 1;
232
+ }
233
+ onVisibleChange(key) {
234
+ if (!this.allowVisibility()) {
235
+ return;
236
+ }
237
+ const column = this.findColumn(key);
238
+ if (!column || column.disabled) {
239
+ return;
240
+ }
241
+ const nextVisible = column.visible === false;
242
+ this.commit(setColumnVisibility(this.state(), key, nextVisible));
243
+ }
244
+ onPin(key, pin) {
245
+ if (!this.allowPin()) {
246
+ return;
247
+ }
248
+ const column = this.findColumn(key);
249
+ if (!column || column.disabled) {
250
+ return;
251
+ }
252
+ this.commit(setColumnPin(this.state(), key, pin));
253
+ }
254
+ move(key, delta) {
255
+ if (!this.allowReorder()) {
256
+ return;
257
+ }
258
+ const sourceColumn = this.findColumn(key);
259
+ if (!sourceColumn || sourceColumn.disabled) {
260
+ return;
261
+ }
262
+ const list = this.filteredColumns();
263
+ const index = list.findIndex((column) => column.key === key);
264
+ if (index < 0) {
265
+ return;
266
+ }
267
+ const target = list[index + delta];
268
+ if (!target || target.disabled) {
269
+ return;
270
+ }
271
+ this.reorderByKey(key, target.key);
272
+ }
273
+ showAll() {
274
+ if (!this.allowVisibility()) {
275
+ return;
276
+ }
277
+ this.commit(this.state().map((column) => ({ ...column, visible: true })));
278
+ }
279
+ hideOptional() {
280
+ if (!this.allowVisibility()) {
281
+ return;
282
+ }
283
+ const visible = this.state().filter((column) => column.visible !== false);
284
+ if (visible.length <= 1) {
285
+ return;
286
+ }
287
+ const fallback = visible.find((column) => !column.disabled) ?? visible[0];
288
+ this.commit(this.state().map((column) => ({
289
+ ...column,
290
+ visible: column.disabled ? true : column.key === fallback.key,
291
+ })));
292
+ }
293
+ onDragStart(event, key) {
294
+ if (!this.allowReorder()) {
295
+ return;
296
+ }
297
+ const column = this.findColumn(key);
298
+ if (!column || column.disabled) {
299
+ return;
300
+ }
301
+ this.draggingKey.set(key);
302
+ if (event.dataTransfer) {
303
+ event.dataTransfer.effectAllowed = 'move';
304
+ event.dataTransfer.setData('text/plain', key);
305
+ }
306
+ }
307
+ onDragOver(event) {
308
+ if (!this.allowReorder()) {
309
+ return;
310
+ }
311
+ event.preventDefault();
312
+ }
313
+ onDrop(event, targetKey) {
314
+ if (!this.allowReorder()) {
315
+ return;
316
+ }
317
+ event.preventDefault();
318
+ const target = this.findColumn(targetKey);
319
+ if (!target || target.disabled) {
320
+ this.draggingKey.set(null);
321
+ return;
322
+ }
323
+ const source = this.draggingKey() || event.dataTransfer?.getData('text/plain') || null;
324
+ this.draggingKey.set(null);
325
+ if (!source || source === targetKey) {
326
+ return;
327
+ }
328
+ this.reorderByKey(source, targetKey);
329
+ }
330
+ reorderByKey(sourceKey, targetKey) {
331
+ const list = this.state();
332
+ const from = list.findIndex((column) => column.key === sourceKey);
333
+ const to = list.findIndex((column) => column.key === targetKey);
334
+ if (from < 0 || to < 0) {
335
+ return;
336
+ }
337
+ this.commit(moveColumn(list, from, to));
338
+ }
339
+ findColumn(key) {
340
+ return this.state().find((column) => column.key === key);
341
+ }
342
+ commit(next) {
343
+ this.state.set(next);
344
+ this.columnsChange.emit(cloneColumns(next));
345
+ }
346
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
347
+ 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 }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", 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)" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
348
+ <div class="re-dg-cm" #root>
349
+ <button
350
+ type="button"
351
+ class="re-dg-cm__trigger"
352
+ [class.re-dg-cm__trigger--open]="opened()"
353
+ [attr.aria-expanded]="opened()"
354
+ [attr.aria-haspopup]="'dialog'"
355
+ (click)="toggleOpen()"
356
+ >
357
+ @if (triggerTemplate()) {
358
+ <ng-container
359
+ [ngTemplateOutlet]="triggerTemplate()!"
360
+ [ngTemplateOutletContext]="{
361
+ $implicit: triggerLabel(),
362
+ visible: visibleColumnsCount(),
363
+ total: state().length
364
+ }"
365
+ />
366
+ } @else {
367
+ <span class="re-dg-cm__trigger-label">{{ triggerLabel() }}</span>
368
+ <span class="re-dg-cm__trigger-count">{{ visibleColumnsCount() }}/{{ state().length }}</span>
369
+ }
370
+ </button>
371
+
372
+ @if (opened()) {
373
+ <div class="re-dg-cm__panel" role="dialog">
374
+ @let list = filteredColumns();
375
+
376
+ @if (controlsVisible() && searchable()) {
377
+ <label class="re-dg-cm__search">
378
+ <input
379
+ type="search"
380
+ [value]="searchQuery()"
381
+ [placeholder]="searchPlaceholder()"
382
+ (input)="onSearch($event)"
383
+ />
384
+ </label>
385
+ }
386
+
387
+ <div class="re-dg-cm__title-row">
388
+ @if (controlsVisible()) {
389
+ <div class="re-dg-cm__tools">
390
+ <button type="button" (click)="showAll()">Show all</button>
391
+ <button type="button" (click)="hideOptional()">Hide All</button>
392
+ </div>
393
+ } @else {
394
+ <span></span>
395
+ }
396
+
397
+ <span class="re-dg-cm__meta">{{ visibleColumnsCount() }} / {{ state().length }}</span>
398
+ </div>
399
+
400
+ <div class="re-dg-cm__list">
401
+ @for (column of list; track column.key) {
402
+ @let currentPin = pin(column.key);
403
+ @let disabled = !!column.disabled;
404
+ @let canHideValue = canHideColumn(column.key);
405
+
406
+ <div
407
+ class="re-dg-cm__row"
408
+ [attr.draggable]="allowReorder() && !disabled"
409
+ [class.re-dg-cm__row--disabled]="disabled"
410
+ [class.re-dg-cm__row--dragging]="draggingKey() === column.key"
411
+ (dragstart)="onDragStart($event, column.key)"
412
+ (dragover)="onDragOver($event)"
413
+ (drop)="onDrop($event, column.key)"
414
+ (dragend)="draggingKey.set(null)"
415
+ >
416
+ <span class="re-dg-cm__drag" title="Reorder">::</span>
417
+
418
+ <label class="re-dg-cm__checkbox">
419
+ <button [disabled]="disabled || !canHideValue" (click)="onVisibleChange(column.key)">
420
+ <re-eye-ic [open]="column.visible !== false" />
421
+ </button>
422
+ <span>{{ column.header || column.key }}</span>
423
+ </label>
424
+
425
+ <div class="re-dg-cm__actions">
426
+ @if (allowPin()) {
427
+ <button
428
+ type="button"
429
+ class="pin-button"
430
+ [class.re-dg-cm__action--active]="currentPin === 'left'"
431
+ [disabled]="disabled"
432
+ (click)="onPin(column.key, 'left')"
433
+ title="Pin left"
434
+ >
435
+ <re-pin-ic />
436
+ </button>
437
+
438
+ <button
439
+ type="button"
440
+ class="pin-button"
441
+ [class.re-dg-cm__action--active]="currentPin === 'none'"
442
+ [disabled]="disabled"
443
+ (click)="onPin(column.key, 'none')"
444
+ title="Unpin"
445
+ >
446
+ <re-cross-ic />
447
+ </button>
448
+
449
+ <button
450
+ type="button"
451
+ class="pin-button"
452
+ [class.re-dg-cm__action--active]="currentPin === 'right'"
453
+ [disabled]="disabled"
454
+ (click)="onPin(column.key, 'right')"
455
+ title="Pin right"
456
+ >
457
+ <re-pin-ic toRight />
458
+ </button>
459
+ }
460
+ </div>
461
+ </div>
462
+ }
463
+ </div>
464
+ </div>
465
+ }
466
+ </div>
467
+ `, isInline: true, 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__actions{gap:.25rem;margin-left:auto}.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"] }] });
468
+ }
469
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridColumnManager, decorators: [{
470
+ type: Component,
471
+ args: [{ selector: 're-data-grid-column-manager', standalone: true, template: `
472
+ <div class="re-dg-cm" #root>
473
+ <button
474
+ type="button"
475
+ class="re-dg-cm__trigger"
476
+ [class.re-dg-cm__trigger--open]="opened()"
477
+ [attr.aria-expanded]="opened()"
478
+ [attr.aria-haspopup]="'dialog'"
479
+ (click)="toggleOpen()"
480
+ >
481
+ @if (triggerTemplate()) {
482
+ <ng-container
483
+ [ngTemplateOutlet]="triggerTemplate()!"
484
+ [ngTemplateOutletContext]="{
485
+ $implicit: triggerLabel(),
486
+ visible: visibleColumnsCount(),
487
+ total: state().length
488
+ }"
489
+ />
490
+ } @else {
491
+ <span class="re-dg-cm__trigger-label">{{ triggerLabel() }}</span>
492
+ <span class="re-dg-cm__trigger-count">{{ visibleColumnsCount() }}/{{ state().length }}</span>
493
+ }
494
+ </button>
495
+
496
+ @if (opened()) {
497
+ <div class="re-dg-cm__panel" role="dialog">
498
+ @let list = filteredColumns();
499
+
500
+ @if (controlsVisible() && searchable()) {
501
+ <label class="re-dg-cm__search">
502
+ <input
503
+ type="search"
504
+ [value]="searchQuery()"
505
+ [placeholder]="searchPlaceholder()"
506
+ (input)="onSearch($event)"
507
+ />
508
+ </label>
509
+ }
510
+
511
+ <div class="re-dg-cm__title-row">
512
+ @if (controlsVisible()) {
513
+ <div class="re-dg-cm__tools">
514
+ <button type="button" (click)="showAll()">Show all</button>
515
+ <button type="button" (click)="hideOptional()">Hide All</button>
516
+ </div>
517
+ } @else {
518
+ <span></span>
519
+ }
520
+
521
+ <span class="re-dg-cm__meta">{{ visibleColumnsCount() }} / {{ state().length }}</span>
522
+ </div>
523
+
524
+ <div class="re-dg-cm__list">
525
+ @for (column of list; track column.key) {
526
+ @let currentPin = pin(column.key);
527
+ @let disabled = !!column.disabled;
528
+ @let canHideValue = canHideColumn(column.key);
529
+
530
+ <div
531
+ class="re-dg-cm__row"
532
+ [attr.draggable]="allowReorder() && !disabled"
533
+ [class.re-dg-cm__row--disabled]="disabled"
534
+ [class.re-dg-cm__row--dragging]="draggingKey() === column.key"
535
+ (dragstart)="onDragStart($event, column.key)"
536
+ (dragover)="onDragOver($event)"
537
+ (drop)="onDrop($event, column.key)"
538
+ (dragend)="draggingKey.set(null)"
539
+ >
540
+ <span class="re-dg-cm__drag" title="Reorder">::</span>
541
+
542
+ <label class="re-dg-cm__checkbox">
543
+ <button [disabled]="disabled || !canHideValue" (click)="onVisibleChange(column.key)">
544
+ <re-eye-ic [open]="column.visible !== false" />
545
+ </button>
546
+ <span>{{ column.header || column.key }}</span>
547
+ </label>
548
+
549
+ <div class="re-dg-cm__actions">
550
+ @if (allowPin()) {
551
+ <button
552
+ type="button"
553
+ class="pin-button"
554
+ [class.re-dg-cm__action--active]="currentPin === 'left'"
555
+ [disabled]="disabled"
556
+ (click)="onPin(column.key, 'left')"
557
+ title="Pin left"
558
+ >
559
+ <re-pin-ic />
560
+ </button>
561
+
562
+ <button
563
+ type="button"
564
+ class="pin-button"
565
+ [class.re-dg-cm__action--active]="currentPin === 'none'"
566
+ [disabled]="disabled"
567
+ (click)="onPin(column.key, 'none')"
568
+ title="Unpin"
569
+ >
570
+ <re-cross-ic />
571
+ </button>
572
+
573
+ <button
574
+ type="button"
575
+ class="pin-button"
576
+ [class.re-dg-cm__action--active]="currentPin === 'right'"
577
+ [disabled]="disabled"
578
+ (click)="onPin(column.key, 'right')"
579
+ title="Pin right"
580
+ >
581
+ <re-pin-ic toRight />
582
+ </button>
583
+ }
584
+ </div>
585
+ </div>
586
+ }
587
+ </div>
588
+ </div>
589
+ }
590
+ </div>
591
+ `, host: {
592
+ 'document:mousedown': 'onDocumentMouseDown($event.target)',
593
+ }, imports: [NgTemplateOutlet, EyeIcon, CrossIcon, PinIcon], 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__actions{gap:.25rem;margin-left:auto}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"] }]
594
+ }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTemplate", 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"] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
595
+
596
+ /**
597
+ * Generated bundle index. Do not edit.
598
+ */
599
+
600
+ export { DataGridColumnManager };
601
+ //# sourceMappingURL=reforgium-data-grid-column-manager.mjs.map