@myrmidon/paged-data-browsers 5.2.1 → 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.
|
@@ -25,9 +25,11 @@ class CompactPagerComponent {
|
|
|
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,10 +56,10 @@ 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
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"] }] } });
|
|
@@ -78,6 +82,9 @@ class RangeViewComponent {
|
|
|
78
82
|
* The height of the component.
|
|
79
83
|
*/
|
|
80
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();
|
|
@@ -91,10 +98,10 @@ class RangeViewComponent {
|
|
|
91
98
|
];
|
|
92
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 }] }] } });
|
|
@@ -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,
|
|
@@ -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);
|