@myrmidon/paged-data-browsers 5.2.0 → 5.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -19,15 +19,17 @@ class CompactPagerComponent {
|
|
|
19
19
|
/**
|
|
20
20
|
* The current paging information.
|
|
21
21
|
*/
|
|
22
|
-
this.paging = input({ pageNumber: 0, pageCount: 0, total: 0 }, ...(ngDevMode ? [{ debugName: "paging" }] : []));
|
|
22
|
+
this.paging = input({ pageNumber: 0, pageCount: 0, total: 0 }, ...(ngDevMode ? [{ debugName: "paging" }] : /* istanbul ignore next */ []));
|
|
23
23
|
/**
|
|
24
24
|
* Emits the new paging information when the user changes the page.
|
|
25
25
|
*/
|
|
26
26
|
this.pagingChange = output();
|
|
27
27
|
}
|
|
28
|
+
/** Navigate to the first page. */
|
|
28
29
|
onFirst() {
|
|
29
30
|
this.pagingChange.emit({ ...this.paging(), pageNumber: 1 });
|
|
30
31
|
}
|
|
32
|
+
/** Navigate to the previous page (no-op when already on page 1). */
|
|
31
33
|
onPrevious() {
|
|
32
34
|
if (this.paging().pageNumber > 1) {
|
|
33
35
|
this.pagingChange.emit({
|
|
@@ -36,6 +38,7 @@ class CompactPagerComponent {
|
|
|
36
38
|
});
|
|
37
39
|
}
|
|
38
40
|
}
|
|
41
|
+
/** Navigate to the next page (no-op when already on the last page). */
|
|
39
42
|
onNext() {
|
|
40
43
|
if (this.paging().pageNumber < this.paging().pageCount) {
|
|
41
44
|
this.pagingChange.emit({
|
|
@@ -44,6 +47,7 @@ class CompactPagerComponent {
|
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
49
|
}
|
|
50
|
+
/** Navigate to the last page (no-op when already on the last page). */
|
|
47
51
|
onLast() {
|
|
48
52
|
if (this.paging().pageNumber < this.paging().pageCount) {
|
|
49
53
|
this.pagingChange.emit({
|
|
@@ -52,12 +56,12 @@ class CompactPagerComponent {
|
|
|
52
56
|
});
|
|
53
57
|
}
|
|
54
58
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CompactPagerComponent, isStandalone: true, selector: "pdb-compact-pager", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingChange: "pagingChange" }, ngImport: i0, template: "@if (paging().pageCount) {\n <div class=\"form-row\">\n <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onFirst()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onPrevious()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>navigate_before</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onNext()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>navigate_next</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onLast()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n <span id=\"total\">{{ paging().total }} </span>\n </div>\n}\n", styles: ["#pages,#total{color:var(--mat-sys-on-surface-variant)}.form-row{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
57
61
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CompactPagerComponent, decorators: [{
|
|
59
63
|
type: Component,
|
|
60
|
-
args: [{ selector: 'pdb-compact-pager', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (paging().pageCount) {\n <div class=\"form-row\">\n <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onFirst()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onPrevious()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>navigate_before</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onNext()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>navigate_next</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onLast()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n <span id=\"total\">{{ paging().total }} </span>\n </div>\n}\n", styles: ["#pages,#total{color:
|
|
64
|
+
args: [{ selector: 'pdb-compact-pager', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (paging().pageCount) {\n <div class=\"form-row\">\n <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onFirst()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onPrevious()\"\n [disabled]=\"paging().pageNumber < 2\"\n >\n <mat-icon>navigate_before</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onNext()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>navigate_next</mat-icon>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"onLast()\"\n [disabled]=\"paging().pageNumber === paging().pageCount\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n <span id=\"total\">{{ paging().total }} </span>\n </div>\n}\n", styles: ["#pages,#total{color:var(--mat-sys-on-surface-variant)}.form-row{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
|
|
61
65
|
}], propDecorators: { paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], pagingChange: [{ type: i0.Output, args: ["pagingChange"] }] } });
|
|
62
66
|
|
|
63
67
|
class RangeViewComponent {
|
|
@@ -65,19 +69,22 @@ class RangeViewComponent {
|
|
|
65
69
|
/**
|
|
66
70
|
* The domain of the range view (start, limit).
|
|
67
71
|
*/
|
|
68
|
-
this.domain = input([0, 100], ...(ngDevMode ? [{ debugName: "domain" }] : []));
|
|
72
|
+
this.domain = input([0, 100], ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
|
|
69
73
|
/**
|
|
70
74
|
* The range of the range view (start, limit).
|
|
71
75
|
*/
|
|
72
|
-
this.range = input([0, 100], ...(ngDevMode ? [{ debugName: "range" }] : []));
|
|
76
|
+
this.range = input([0, 100], ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
|
|
73
77
|
/**
|
|
74
78
|
* The width of the component.
|
|
75
79
|
*/
|
|
76
|
-
this.width = input(100, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
80
|
+
this.width = input(100, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
77
81
|
/**
|
|
78
82
|
* The height of the component.
|
|
79
83
|
*/
|
|
80
|
-
this.height = input(5, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
84
|
+
this.height = input(5, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
85
|
+
/**
|
|
86
|
+
* The scaled range [start, limit] in pixels, derived from domain, range, and width.
|
|
87
|
+
*/
|
|
81
88
|
this.scaledRange = computed(() => {
|
|
82
89
|
const domain = this.domain();
|
|
83
90
|
const range = this.range();
|
|
@@ -89,12 +96,12 @@ class RangeViewComponent {
|
|
|
89
96
|
(rangeStart / domainWidth) * width,
|
|
90
97
|
((rangeStart + rangeWidth) / domainWidth) * width,
|
|
91
98
|
];
|
|
92
|
-
}, ...(ngDevMode ? [{ debugName: "scaledRange" }] : []));
|
|
99
|
+
}, ...(ngDevMode ? [{ debugName: "scaledRange" }] : /* istanbul ignore next */ []));
|
|
93
100
|
}
|
|
94
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: RangeViewComponent, isStandalone: true, selector: "pdb-range-view", inputs: { domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n <rect id=\"rdomain\" [attr.width]=\"width()\" [attr.height]=\"height()\" />\n <rect\n id=\"rrange\"\n [attr.x]=\"scaledRange()[0]\"\n [attr.y]=\"0\"\n [attr.width]=\"scaledRange()[1] - scaledRange()[0]\"\n [attr.height]=\"height()\"\n />\n</svg>\n", styles: ["#rdomain{fill:#d3d3d3;stroke-width:3;stroke:#c1ba9b}#rrange{fill:#91aad3;stroke-width:3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
96
103
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RangeViewComponent, decorators: [{
|
|
98
105
|
type: Component,
|
|
99
106
|
args: [{ selector: 'pdb-range-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n <rect id=\"rdomain\" [attr.width]=\"width()\" [attr.height]=\"height()\" />\n <rect\n id=\"rrange\"\n [attr.x]=\"scaledRange()[0]\"\n [attr.y]=\"0\"\n [attr.width]=\"scaledRange()[1] - scaledRange()[0]\"\n [attr.height]=\"height()\"\n />\n</svg>\n", styles: ["#rdomain{fill:#d3d3d3;stroke-width:3;stroke:#c1ba9b}#rrange{fill:#91aad3;stroke-width:3}\n"] }]
|
|
100
107
|
}], ctorParameters: () => [], propDecorators: { domain: [{ type: i0.Input, args: [{ isSignal: true, alias: "domain", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
@@ -113,15 +120,15 @@ class BrowserTreeNodeComponent {
|
|
|
113
120
|
/**
|
|
114
121
|
* The node to display.
|
|
115
122
|
*/
|
|
116
|
-
this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : []));
|
|
123
|
+
this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : /* istanbul ignore next */ []));
|
|
117
124
|
/**
|
|
118
125
|
* The paging information for the node's children.
|
|
119
126
|
*/
|
|
120
|
-
this.paging = input(...(ngDevMode ? [undefined, { debugName: "paging" }] : []));
|
|
127
|
+
this.paging = input(...(ngDevMode ? [undefined, { debugName: "paging" }] : /* istanbul ignore next */ []));
|
|
121
128
|
/**
|
|
122
129
|
* True to show debug information.
|
|
123
130
|
*/
|
|
124
|
-
this.debug = input(...(ngDevMode ? [undefined, { debugName: "debug" }] : []));
|
|
131
|
+
this.debug = input(...(ngDevMode ? [undefined, { debugName: "debug" }] : /* istanbul ignore next */ []));
|
|
125
132
|
/**
|
|
126
133
|
* True to hide the node's loc and label. This is useful if you want to
|
|
127
134
|
* provide your own view for the node, between the expansion toggle and
|
|
@@ -131,27 +138,27 @@ class BrowserTreeNodeComponent {
|
|
|
131
138
|
* the view, then you can just add your own content to this component's
|
|
132
139
|
* template, without setting this property to true.
|
|
133
140
|
*/
|
|
134
|
-
this.hideLabel = input(...(ngDevMode ? [undefined, { debugName: "hideLabel" }] : []));
|
|
141
|
+
this.hideLabel = input(...(ngDevMode ? [undefined, { debugName: "hideLabel" }] : /* istanbul ignore next */ []));
|
|
135
142
|
/**
|
|
136
143
|
* True to hide the node's location (y and x).
|
|
137
144
|
*/
|
|
138
|
-
this.hideLoc = input(...(ngDevMode ? [undefined, { debugName: "hideLoc" }] : []));
|
|
145
|
+
this.hideLoc = input(...(ngDevMode ? [undefined, { debugName: "hideLoc" }] : /* istanbul ignore next */ []));
|
|
139
146
|
/**
|
|
140
147
|
* True to hide the node's paging control unless hovered.
|
|
141
148
|
*/
|
|
142
|
-
this.hidePaging = input(...(ngDevMode ? [undefined, { debugName: "hidePaging" }] : []));
|
|
149
|
+
this.hidePaging = input(...(ngDevMode ? [undefined, { debugName: "hidePaging" }] : /* istanbul ignore next */ []));
|
|
143
150
|
/**
|
|
144
151
|
* True to hide the node's filter edit button.
|
|
145
152
|
*/
|
|
146
|
-
this.hideFilter = input(...(ngDevMode ? [undefined, { debugName: "hideFilter" }] : []));
|
|
153
|
+
this.hideFilter = input(...(ngDevMode ? [undefined, { debugName: "hideFilter" }] : /* istanbul ignore next */ []));
|
|
147
154
|
/**
|
|
148
155
|
* The indent size for the node's children.
|
|
149
156
|
*/
|
|
150
|
-
this.indentSize = input(30, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
|
|
157
|
+
this.indentSize = input(30, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
|
|
151
158
|
/**
|
|
152
159
|
* The width of the range view.
|
|
153
160
|
*/
|
|
154
|
-
this.rangeWidth = input(250, ...(ngDevMode ? [{ debugName: "rangeWidth" }] : []));
|
|
161
|
+
this.rangeWidth = input(250, ...(ngDevMode ? [{ debugName: "rangeWidth" }] : /* istanbul ignore next */ []));
|
|
155
162
|
/**
|
|
156
163
|
* Emits when the user wants to toggle the expanded state of the node.
|
|
157
164
|
*/
|
|
@@ -165,31 +172,34 @@ class BrowserTreeNodeComponent {
|
|
|
165
172
|
*/
|
|
166
173
|
this.editNodeFilterRequest = output();
|
|
167
174
|
}
|
|
175
|
+
/** Emits toggleExpandedRequest for the current node. */
|
|
168
176
|
onToggleExpanded() {
|
|
169
177
|
if (!this.node()) {
|
|
170
178
|
return;
|
|
171
179
|
}
|
|
172
180
|
this.toggleExpandedRequest.emit(this.node());
|
|
173
181
|
}
|
|
182
|
+
/** Emits changePageRequest for the given node and new paging state. */
|
|
174
183
|
onPagingChange(node, paging) {
|
|
175
184
|
this.changePageRequest.emit({
|
|
176
185
|
node,
|
|
177
186
|
paging,
|
|
178
187
|
});
|
|
179
188
|
}
|
|
189
|
+
/** Emits editNodeFilterRequest for the current node. */
|
|
180
190
|
onEditFilter() {
|
|
181
191
|
if (this.node()) {
|
|
182
192
|
this.editNodeFilterRequest.emit(this.node());
|
|
183
193
|
}
|
|
184
194
|
}
|
|
185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BrowserTreeNodeComponent, isStandalone: true, selector: "pdb-browser-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLoc: { classPropertyName: "hideLoc", publicName: "hideLoc", isSignal: true, isRequired: false, transformFunction: null }, hidePaging: { classPropertyName: "hidePaging", publicName: "hidePaging", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, rangeWidth: { classPropertyName: "rangeWidth", publicName: "rangeWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\" [class.hilite]=\"node()!.hilite\">\r\n <!-- pager -->\r\n @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n <pdb-compact-pager\r\n [paging]=\"paging()!\"\r\n (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n />\r\n <pdb-range-view\r\n [width]=\"rangeWidth()\"\r\n [domain]=\"[0, paging()!.pageCount]\"\r\n [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n />\r\n </div>\r\n }\r\n <!-- node -->\r\n <div class=\"form-row\">\r\n <!-- expand/collapse button -->\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n i18n-matTooltip\r\n [disabled]=\"node()!.hasChildren === false\"\r\n (click)=\"onToggleExpanded()\"\r\n >\r\n <mat-icon class=\"mat-primary\" i18n>\r\n @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n chevron_left } @else { chevron_right } } @else { stop }\r\n </mat-icon>\r\n </button>\r\n\r\n <!-- tag -->\r\n @if (!hideLabel()) {\r\n <span\r\n class=\"tag\"\r\n [ngStyle]=\"{\r\n 'background-color': (node()!.tag | stringToColor),\r\n color: node()!.tag | stringToColor | colorToContrast\r\n }\"\r\n >{{ node()!.tag }}</span\r\n >\r\n\r\n <!-- loc and label -->\r\n @if (!hideLoc()) {\r\n <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n {{ node()!.label }}\r\n }\r\n\r\n <!-- PROJECTED NODE -->\r\n <ng-content></ng-content>\r\n\r\n <!-- debug -->\r\n @if (debug()) {\r\n <span class=\"debug\"\r\n >#{{ node()!.id }}\r\n <span\r\n >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n node()!.paging.total\r\n }})</span\r\n ></span\r\n >\r\n }\r\n\r\n <!-- filter -->\r\n @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n matTooltip=\"Add filter\"\r\n i18n-matTooltip\r\n (click)=\"onEditFilter()\"\r\n >\r\n <mat-icon>filter_list</mat-icon>\r\n </button>\r\n </div>\r\n } @if (node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n </button>\r\n </div>\r\n } }\r\n </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid var(--mat-sys-on-surface-variant);--browser-tree-node-border-radius: 6px;--browser-tree-node-hover-bg-color: var(--mat-sys-surface-variant);--browser-tree-node-hilite-bg-color: var(--mat-sys-secondary-container);--browser-tree-node-hilite-border: 2px solid var(--mat-sys-warning)}#node{margin-bottom:var(--browser-tree-node-margin-bottom);padding:var(--browser-tree-node-padding);border:var(--browser-tree-node-border);border-radius:var(--browser-tree-node-border-radius)}#node:hover{background-color:var(--browser-tree-node-hover-bg-color)}#node.hilite{background-color:var(--browser-tree-node-hilite-bg-color)!important;border:var(--browser-tree-node-hilite-border)!important}.form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.form-row span{flex:0 1 auto;white-space:normal}#node #pager{display:none}#node:hover #pager{display:block}span.loc{font-size:.85em;color:#666;vertical-align:middle}span.tag{border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:0 4px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:4px 6px;margin:4px 0}legend{color:var(--mat-sys-on-surface-variant)}.muted{opacity:.3}.muted:hover{opacity:1}.debug{font-size:.85em;color:var(--mat-sys-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type:
|
|
187
197
|
// local
|
|
188
198
|
CompactPagerComponent, selector: "pdb-compact-pager", inputs: ["paging"], outputs: ["pagingChange"] }, { kind: "component", type: RangeViewComponent, selector: "pdb-range-view", inputs: ["domain", "range", "width", "height"] }, { kind: "pipe", type:
|
|
189
199
|
// ngx-tools
|
|
190
200
|
ColorToContrastPipe, name: "colorToContrast" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
191
201
|
}
|
|
192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
|
|
193
203
|
type: Component,
|
|
194
204
|
args: [{ selector: 'pdb-browser-tree-node', imports: [
|
|
195
205
|
CommonModule,
|
|
@@ -203,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
203
213
|
// local
|
|
204
214
|
CompactPagerComponent,
|
|
205
215
|
RangeViewComponent,
|
|
206
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\" [class.hilite]=\"node()!.hilite\">\r\n <!-- pager -->\r\n @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n <pdb-compact-pager\r\n [paging]=\"paging()!\"\r\n (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n />\r\n <pdb-range-view\r\n [width]=\"rangeWidth()\"\r\n [domain]=\"[0, paging()!.pageCount]\"\r\n [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n />\r\n </div>\r\n }\r\n <!-- node -->\r\n <div class=\"form-row\">\r\n <!-- expand/collapse button -->\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n i18n-matTooltip\r\n [disabled]=\"node()!.hasChildren === false\"\r\n (click)=\"onToggleExpanded()\"\r\n >\r\n <mat-icon class=\"mat-primary\" i18n>\r\n @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n chevron_left } @else { chevron_right } } @else { stop }\r\n </mat-icon>\r\n </button>\r\n\r\n <!-- tag -->\r\n @if (!hideLabel()) {\r\n <span\r\n class=\"tag\"\r\n [ngStyle]=\"{\r\n 'background-color': (node()!.tag | stringToColor),\r\n color: node()!.tag | stringToColor | colorToContrast\r\n }\"\r\n >{{ node()!.tag }}</span\r\n >\r\n\r\n <!-- loc and label -->\r\n @if (!hideLoc()) {\r\n <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n {{ node()!.label }}\r\n }\r\n\r\n <!-- PROJECTED NODE -->\r\n <ng-content></ng-content>\r\n\r\n <!-- debug -->\r\n @if (debug()) {\r\n <span class=\"debug\"\r\n >#{{ node()!.id }}\r\n <span\r\n >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n node()!.paging.total\r\n }})</span\r\n ></span\r\n >\r\n }\r\n\r\n <!-- filter -->\r\n @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n matTooltip=\"Add filter\"\r\n i18n-matTooltip\r\n (click)=\"onEditFilter()\"\r\n >\r\n <mat-icon>filter_list</mat-icon>\r\n </button>\r\n </div>\r\n } @if (node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n </button>\r\n </div>\r\n } }\r\n </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid
|
|
216
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\" [class.hilite]=\"node()!.hilite\">\r\n <!-- pager -->\r\n @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n <pdb-compact-pager\r\n [paging]=\"paging()!\"\r\n (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n />\r\n <pdb-range-view\r\n [width]=\"rangeWidth()\"\r\n [domain]=\"[0, paging()!.pageCount]\"\r\n [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n />\r\n </div>\r\n }\r\n <!-- node -->\r\n <div class=\"form-row\">\r\n <!-- expand/collapse button -->\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n i18n-matTooltip\r\n [disabled]=\"node()!.hasChildren === false\"\r\n (click)=\"onToggleExpanded()\"\r\n >\r\n <mat-icon class=\"mat-primary\" i18n>\r\n @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n chevron_left } @else { chevron_right } } @else { stop }\r\n </mat-icon>\r\n </button>\r\n\r\n <!-- tag -->\r\n @if (!hideLabel()) {\r\n <span\r\n class=\"tag\"\r\n [ngStyle]=\"{\r\n 'background-color': (node()!.tag | stringToColor),\r\n color: node()!.tag | stringToColor | colorToContrast\r\n }\"\r\n >{{ node()!.tag }}</span\r\n >\r\n\r\n <!-- loc and label -->\r\n @if (!hideLoc()) {\r\n <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n {{ node()!.label }}\r\n }\r\n\r\n <!-- PROJECTED NODE -->\r\n <ng-content></ng-content>\r\n\r\n <!-- debug -->\r\n @if (debug()) {\r\n <span class=\"debug\"\r\n >#{{ node()!.id }}\r\n <span\r\n >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n node()!.paging.total\r\n }})</span\r\n ></span\r\n >\r\n }\r\n\r\n <!-- filter -->\r\n @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n matTooltip=\"Add filter\"\r\n i18n-matTooltip\r\n (click)=\"onEditFilter()\"\r\n >\r\n <mat-icon>filter_list</mat-icon>\r\n </button>\r\n </div>\r\n } @if (node()?.filter && node()?.y) {\r\n <div class=\"muted\">\r\n <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n </button>\r\n </div>\r\n } }\r\n </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid var(--mat-sys-on-surface-variant);--browser-tree-node-border-radius: 6px;--browser-tree-node-hover-bg-color: var(--mat-sys-surface-variant);--browser-tree-node-hilite-bg-color: var(--mat-sys-secondary-container);--browser-tree-node-hilite-border: 2px solid var(--mat-sys-warning)}#node{margin-bottom:var(--browser-tree-node-margin-bottom);padding:var(--browser-tree-node-padding);border:var(--browser-tree-node-border);border-radius:var(--browser-tree-node-border-radius)}#node:hover{background-color:var(--browser-tree-node-hover-bg-color)}#node.hilite{background-color:var(--browser-tree-node-hilite-bg-color)!important;border:var(--browser-tree-node-hilite-border)!important}.form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.form-row span{flex:0 1 auto;white-space:normal}#node #pager{display:none}#node:hover #pager{display:block}span.loc{font-size:.85em;color:#666;vertical-align:middle}span.tag{border:1px solid var(--mat-sys-on-surface-variant);border-radius:4px;padding:0 4px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:6px;padding:4px 6px;margin:4px 0}legend{color:var(--mat-sys-on-surface-variant)}.muted{opacity:.3}.muted:hover{opacity:1}.debug{font-size:.85em;color:var(--mat-sys-error)}\n"] }]
|
|
207
217
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideLoc: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLoc", required: false }] }], hidePaging: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePaging", required: false }] }], hideFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFilter", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], rangeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeWidth", required: false }] }], toggleExpandedRequest: [{ type: i0.Output, args: ["toggleExpandedRequest"] }], changePageRequest: [{ type: i0.Output, args: ["changePageRequest"] }], editNodeFilterRequest: [{ type: i0.Output, args: ["editNodeFilterRequest"] }] } });
|
|
208
218
|
|
|
209
219
|
/**
|
|
@@ -677,15 +687,31 @@ class PagedTreeStore {
|
|
|
677
687
|
const pageNodes = this.createPageNodes(page);
|
|
678
688
|
console.log('[PagedTreeStore] reset: calling _nodes$.next with', pageNodes.length, 'nodes');
|
|
679
689
|
this._nodes$.next(pageNodes);
|
|
680
|
-
// get the children of each node
|
|
690
|
+
// get the children of each node to determine their hasChildren property
|
|
681
691
|
const childrenObservables = this._nodes$.value.map((node) => this.getPageFromCacheOrServer({ ...filter, parentId: node.id }, 1));
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
692
|
+
const finalize = () => {
|
|
693
|
+
this._dirty = false;
|
|
694
|
+
resolve(true);
|
|
695
|
+
};
|
|
696
|
+
if (childrenObservables.length === 0) {
|
|
697
|
+
finalize();
|
|
698
|
+
}
|
|
699
|
+
else {
|
|
700
|
+
forkJoin(childrenObservables).subscribe({
|
|
701
|
+
next: (childrenPages) => {
|
|
702
|
+
childrenPages.forEach((page, i) => {
|
|
703
|
+
this._nodes$.value[i].hasChildren = page.total > 0;
|
|
704
|
+
});
|
|
705
|
+
// re-emit so subscribers see updated hasChildren values
|
|
706
|
+
this._nodes$.next([...this._nodes$.value]);
|
|
707
|
+
finalize();
|
|
708
|
+
},
|
|
709
|
+
error: (err) => {
|
|
710
|
+
finalize();
|
|
711
|
+
console.error('[PagedTreeStore] reset: forkJoin error', err);
|
|
712
|
+
},
|
|
685
713
|
});
|
|
686
|
-
}
|
|
687
|
-
this._dirty = false;
|
|
688
|
-
resolve(true);
|
|
714
|
+
}
|
|
689
715
|
},
|
|
690
716
|
error: (error) => {
|
|
691
717
|
reject(error);
|