@mozaic-ds/angular 2.0.52 → 2.0.54
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.
|
@@ -17330,6 +17330,12 @@ class TreeStateService {
|
|
|
17330
17330
|
loadingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
|
|
17331
17331
|
internalNodes = signal([], ...(ngDevMode ? [{ debugName: "internalNodes" }] : /* istanbul ignore next */ []));
|
|
17332
17332
|
loadChildrenFn = signal(null, ...(ngDevMode ? [{ debugName: "loadChildrenFn" }] : /* istanbul ignore next */ []));
|
|
17333
|
+
/**
|
|
17334
|
+
* Parent IDs for which children have been patched in (via lazy-load).
|
|
17335
|
+
* Grows monotonically — consumers diff against their own "processed" set.
|
|
17336
|
+
* Not emitted for statically-populated children present at init.
|
|
17337
|
+
*/
|
|
17338
|
+
loadedParentIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadedParentIds" }] : /* istanbul ignore next */ []));
|
|
17333
17339
|
flatVisibleNodes = computed(() => {
|
|
17334
17340
|
const result = [];
|
|
17335
17341
|
this._flatten(this.internalNodes(), result, 0, null);
|
|
@@ -17393,6 +17399,11 @@ class TreeStateService {
|
|
|
17393
17399
|
}
|
|
17394
17400
|
patchChildren(nodeId, children) {
|
|
17395
17401
|
this.internalNodes.update((nodes) => this._patchNode(nodes, nodeId, children));
|
|
17402
|
+
this.loadedParentIds.update((set) => {
|
|
17403
|
+
const next = new Set(set);
|
|
17404
|
+
next.add(nodeId);
|
|
17405
|
+
return next;
|
|
17406
|
+
});
|
|
17396
17407
|
}
|
|
17397
17408
|
_patchNode(nodes, targetId, children) {
|
|
17398
17409
|
return nodes.map((n) => {
|
|
@@ -17437,8 +17448,20 @@ class TreeSelectionService {
|
|
|
17437
17448
|
selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
|
|
17438
17449
|
selectionMode = signal('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
|
|
17439
17450
|
rootNodes = signal([], ...(ngDevMode ? [{ debugName: "rootNodes" }] : /* istanbul ignore next */ []));
|
|
17451
|
+
canSelectFn = signal(null, ...(ngDevMode ? [{ debugName: "canSelectFn" }] : /* istanbul ignore next */ []));
|
|
17440
17452
|
setSelectedIds(ids) {
|
|
17441
|
-
this.
|
|
17453
|
+
const pred = this.canSelectFn();
|
|
17454
|
+
if (!pred) {
|
|
17455
|
+
this.selectedIds.set(new Set(ids));
|
|
17456
|
+
return;
|
|
17457
|
+
}
|
|
17458
|
+
const next = new Set();
|
|
17459
|
+
for (const id of ids) {
|
|
17460
|
+
const node = this._resolveNode({ id });
|
|
17461
|
+
if (pred(node))
|
|
17462
|
+
next.add(id);
|
|
17463
|
+
}
|
|
17464
|
+
this.selectedIds.set(next);
|
|
17442
17465
|
}
|
|
17443
17466
|
setMode(mode) {
|
|
17444
17467
|
this.selectionMode.set(mode);
|
|
@@ -17446,6 +17469,13 @@ class TreeSelectionService {
|
|
|
17446
17469
|
setRootNodes(nodes) {
|
|
17447
17470
|
this.rootNodes.set(nodes);
|
|
17448
17471
|
}
|
|
17472
|
+
setCanSelect(fn) {
|
|
17473
|
+
this.canSelectFn.set(fn);
|
|
17474
|
+
}
|
|
17475
|
+
canSelect(node) {
|
|
17476
|
+
const pred = this.canSelectFn();
|
|
17477
|
+
return pred ? pred(node) : true;
|
|
17478
|
+
}
|
|
17449
17479
|
isSelected(id) {
|
|
17450
17480
|
return this.selectedIds().has(id);
|
|
17451
17481
|
}
|
|
@@ -17495,6 +17525,8 @@ class TreeSelectionService {
|
|
|
17495
17525
|
* Select a node: add all leaf descendant IDs (or the node's own ID if leaf).
|
|
17496
17526
|
*/
|
|
17497
17527
|
selectNode(node) {
|
|
17528
|
+
if (!this.canSelect(node))
|
|
17529
|
+
return;
|
|
17498
17530
|
if (this.selectionMode() === 'radio') {
|
|
17499
17531
|
this.selectedIds.set(new Set([node.id]));
|
|
17500
17532
|
return;
|
|
@@ -17783,6 +17815,11 @@ class MozTreeNodeComponent {
|
|
|
17783
17815
|
isSelected = computed(() => this.selectionService.isCheckedComputed(this.node()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
17784
17816
|
isIndeterminate = computed(() => this.selectionService.isIndeterminate(this.node()), ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
|
|
17785
17817
|
isFocused = computed(() => this.keyboardService.focusedNodeId() === this.node().id, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
17818
|
+
isSelectable = computed(() => {
|
|
17819
|
+
if (this.selectionMode() === 'none')
|
|
17820
|
+
return false;
|
|
17821
|
+
return this.selectionService.canSelect(this.node());
|
|
17822
|
+
}, ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ []));
|
|
17786
17823
|
hasChildren = computed(() => {
|
|
17787
17824
|
const node = this.node();
|
|
17788
17825
|
return (node.hasChildren !== false &&
|
|
@@ -17855,7 +17892,7 @@ class MozTreeNodeComponent {
|
|
|
17855
17892
|
return null;
|
|
17856
17893
|
}
|
|
17857
17894
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17858
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"
|
|
17895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeNodeComponent, isStandalone: true, selector: "moz-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, ancestors: { classPropertyName: "ancestors", publicName: "ancestors", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange", selectionChange: "selectionChange" }, host: { styleAttribute: "display: block" }, ngImport: i0, template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"isSelectable() ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (isSelectable()) { @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n } }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17859
17896
|
}
|
|
17860
17897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, decorators: [{
|
|
17861
17898
|
type: Component,
|
|
@@ -17867,7 +17904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
17867
17904
|
MozLoaderComponent,
|
|
17868
17905
|
ChevronDown20,
|
|
17869
17906
|
ChevronRight20,
|
|
17870
|
-
], template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"
|
|
17907
|
+
], template: "<li\n class=\"tree-node\"\n [class.tree-node--selected]=\"isSelected()\"\n [class.tree-node--disabled]=\"isDisabled()\"\n [class.tree-node--focused]=\"isFocused()\"\n role=\"treeitem\"\n [id]=\"'tree-node-' + node().id\"\n [attr.aria-level]=\"depth() + 1\"\n [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n [attr.aria-selected]=\"isSelectable() ? isSelected() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.data-tree-node-id]=\"node().id\"\n [tabindex]=\"isFocused() ? 0 : -1\"\n>\n <div\n class=\"tree-node__header\"\n [class.tree-node__header--expandable]=\"hasChildren()\"\n (click)=\"onHeaderClick()\"\n >\n <div class=\"tree-node__indent\" [style.width.px]=\"indentPx()\"></div>\n\n <div class=\"tree-node__row\">\n <span class=\"tree-node__chevron\" [class.tree-node__chevron--leaf]=\"!hasChildren()\">\n @if (hasChildren()) { @if (isExpanded()) {\n <ChevronDown20 />\n } @else {\n <ChevronRight20 />\n } }\n </span>\n\n <div class=\"tree-node__content\">\n @if (resolvedTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"resolvedTemplate()!\"\n [ngTemplateOutletContext]=\"templateContext()\"\n />\n } @else {\n <span class=\"tree-node__label\">{{ node().id }}</span>\n }\n </div>\n\n @if (isSelectable()) { @if (selectionMode() === 'checkbox') {\n <moz-checkbox\n class=\"tree-node__selection\"\n [id]=\"'tree-checkbox-' + node().id\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @else if (selectionMode() === 'radio') {\n <moz-radio\n class=\"tree-node__selection\"\n [id]=\"'tree-radio-' + node().id\"\n [name]=\"radioName\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"isSelected()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onRadioChange($event)\"\n />\n } }\n </div>\n </div>\n\n @if (isExpanded() && !flat()) {\n <ul class=\"tree-node__children\" role=\"group\">\n @if (isLoading()) {\n <li class=\"tree-node__loading\" role=\"presentation\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" />\n </li>\n } @else { @if (resolvedChildren().length === 0) {\n <li class=\"tree-node__empty\" role=\"presentation\">\n <span>{{ noResultText() }}</span>\n </li>\n } @for (child of resolvedChildren(); track child.id) {\n <moz-tree-node\n [node]=\"child\"\n [depth]=\"depth() + 1\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"ancestorsWithSelf()\"\n (expandChange)=\"expandChange.emit($event)\"\n (selectionChange)=\"selectionChange.emit($event)\"\n />\n } }\n </ul>\n }\n</li>\n", styles: [".tree-node{list-style:none;margin:0;padding:0;outline:none;display:flex;flex-direction:column;gap:4px}.tree-node--selected>.tree-node__header>.tree-node__row{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--focused>.tree-node__header>.tree-node__row,.tree-node:focus-visible>.tree-node__header>.tree-node__row{outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;border-radius:var(--border-radius-m, 8px)}.tree-node__header{display:flex;align-items:center;width:100%;min-height:57px;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__row{display:flex;align-items:center;height:57px;flex:1;min-width:0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease}.tree-node__header:hover>.tree-node__row{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover>.tree-node__row{background:var(--color-background-accent)}.tree-node__indent{flex-shrink:0}.tree-node__chevron{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:16px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:0;padding-left:0;overflow:hidden}.tree-node__content{flex:1;min-width:0;display:flex;align-items:center;padding:4px 8px}.tree-node__selection{flex-shrink:0;margin-left:auto;margin-right:8px}.tree-node__label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node__children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.tree-node__loading{display:flex;align-items:center;justify-content:center;padding:8px 16px}.tree-node__empty{display:flex;align-items:center;padding:8px 16px;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}\n"] }]
|
|
17871
17908
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], nodeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplates", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], ancestors: [{ type: i0.Input, args: [{ isSignal: true, alias: "ancestors", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], expandChange: [{ type: i0.Output, args: ["expandChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
17872
17909
|
|
|
17873
17910
|
class MozTreeNodeTemplateDirective {
|
|
@@ -17893,6 +17930,7 @@ class MozTreeComponent {
|
|
|
17893
17930
|
expandedIds = input(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
|
|
17894
17931
|
selectedIds = input(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
|
|
17895
17932
|
loadChildren = input(null, ...(ngDevMode ? [{ debugName: "loadChildren" }] : /* istanbul ignore next */ []));
|
|
17933
|
+
canSelect = input(null, ...(ngDevMode ? [{ debugName: "canSelect" }] : /* istanbul ignore next */ []));
|
|
17896
17934
|
indentSize = input(24, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
|
|
17897
17935
|
virtualScroll = input('auto', ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
|
|
17898
17936
|
virtualScrollThreshold = input(100, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
|
|
@@ -17942,33 +17980,24 @@ class MozTreeComponent {
|
|
|
17942
17980
|
effect(() => {
|
|
17943
17981
|
this.selectionService.setRootNodes(this.nodes());
|
|
17944
17982
|
});
|
|
17983
|
+
effect(() => {
|
|
17984
|
+
this.selectionService.setCanSelect(this.canSelect());
|
|
17985
|
+
});
|
|
17945
17986
|
effect(() => {
|
|
17946
17987
|
this.stateService.loadChildrenFn.set(this.loadChildren());
|
|
17947
17988
|
});
|
|
17948
|
-
//
|
|
17949
|
-
//
|
|
17950
|
-
|
|
17989
|
+
// React to genuine lazy-load events emitted by patchChildren. Static
|
|
17990
|
+
// initial children never go through patchChildren, so pre-selected
|
|
17991
|
+
// descendants of statically-populated parents are left untouched.
|
|
17992
|
+
const processed = new Set();
|
|
17951
17993
|
effect(() => {
|
|
17952
|
-
const
|
|
17994
|
+
const loaded = this.stateService.loadedParentIds();
|
|
17953
17995
|
if (this.selectionService.selectionMode() !== 'checkbox')
|
|
17954
17996
|
return;
|
|
17955
|
-
const
|
|
17956
|
-
|
|
17957
|
-
|
|
17958
|
-
|
|
17959
|
-
const hadChildren = prevChildMap.get(n.id) ?? false;
|
|
17960
|
-
const hasChildrenNow = !!(n.children && n.children.length > 0);
|
|
17961
|
-
newChildMap.set(n.id, hasChildrenNow);
|
|
17962
|
-
if (!hadChildren && hasChildrenNow) {
|
|
17963
|
-
newlyLoadedParentIds.push(n.id);
|
|
17964
|
-
}
|
|
17965
|
-
if (n.children)
|
|
17966
|
-
visit(n.children);
|
|
17967
|
-
}
|
|
17968
|
-
};
|
|
17969
|
-
visit(nodes);
|
|
17970
|
-
prevChildMap = newChildMap;
|
|
17971
|
-
for (const parentId of newlyLoadedParentIds) {
|
|
17997
|
+
for (const parentId of loaded) {
|
|
17998
|
+
if (processed.has(parentId))
|
|
17999
|
+
continue;
|
|
18000
|
+
processed.add(parentId);
|
|
17972
18001
|
this.selectionService.propagateOnChildrenLoaded(parentId);
|
|
17973
18002
|
}
|
|
17974
18003
|
});
|
|
@@ -18042,12 +18071,12 @@ class MozTreeComponent {
|
|
|
18042
18071
|
return flat.node.id;
|
|
18043
18072
|
}
|
|
18044
18073
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18045
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeComponent, isStandalone: true, selector: "moz-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedIdsChange: "expandedIdsChange", selectionChange: "selectionChange" }, providers: [TreeStateService, TreeSelectionService, TreeKeyboardService], queries: [{ propertyName: "_defaultTemplate", first: true, predicate: MozTreeNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_typedTemplates", predicate: MozTreeNodeTemplateDirective, isSignal: true }], ngImport: i0, template: "<ul\n class=\"tree\"\n role=\"tree\"\n tabindex=\"0\"\n [attr.aria-multiselectable]=\"selectionMode() === 'checkbox' ? 'true' : null\"\n [attr.aria-activedescendant]=\"keyboardService.focusedNodeId() ? 'tree-node-' + keyboardService.focusedNodeId() : null\"\n (keydown)=\"onTreeKeydown($event)\"\n (focus)=\"onTreeFocus()\"\n>\n @if (!useVirtualScroll()) { @for (node of nodes(); track trackNode($index, node)) {\n <moz-tree-node\n [node]=\"node\"\n [depth]=\"0\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n } } @else {\n <cdk-virtual-scroll-viewport\n class=\"tree__viewport\"\n [itemSize]=\"itemSize()\"\n [style.height]=\"viewportHeight()\"\n >\n <moz-tree-node\n *cdkVirtualFor=\"let flatNode of stateService.flatVisibleNodes(); trackBy: trackFlatNode\"\n [node]=\"flatNode.node\"\n [depth]=\"flatNode.depth\"\n [flat]=\"true\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n </cdk-virtual-scroll-viewport>\n }\n</ul>\n", styles: [".tree{list-style:none;padding:0;margin:0;width:100%;outline:none;display:flex;flex-direction:column;gap:4px}.tree:focus-visible{outline:2px solid var(--color-background-accent-inverse);outline-offset:2px;border-radius:var(--border-radius-m, 8px)}.tree__viewport{width:100%}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18074
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozTreeComponent, isStandalone: true, selector: "moz-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedIdsChange: "expandedIdsChange", selectionChange: "selectionChange" }, providers: [TreeStateService, TreeSelectionService, TreeKeyboardService], queries: [{ propertyName: "_defaultTemplate", first: true, predicate: MozTreeNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_typedTemplates", predicate: MozTreeNodeTemplateDirective, isSignal: true }], ngImport: i0, template: "<ul\n class=\"tree\"\n role=\"tree\"\n tabindex=\"0\"\n [attr.aria-multiselectable]=\"selectionMode() === 'checkbox' ? 'true' : null\"\n [attr.aria-activedescendant]=\"keyboardService.focusedNodeId() ? 'tree-node-' + keyboardService.focusedNodeId() : null\"\n (keydown)=\"onTreeKeydown($event)\"\n (focus)=\"onTreeFocus()\"\n>\n @if (!useVirtualScroll()) { @for (node of nodes(); track trackNode($index, node)) {\n <moz-tree-node\n [node]=\"node\"\n [depth]=\"0\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n } } @else {\n <cdk-virtual-scroll-viewport\n class=\"tree__viewport\"\n [itemSize]=\"itemSize()\"\n [style.height]=\"viewportHeight()\"\n >\n <moz-tree-node\n *cdkVirtualFor=\"let flatNode of stateService.flatVisibleNodes(); trackBy: trackFlatNode\"\n [node]=\"flatNode.node\"\n [depth]=\"flatNode.depth\"\n [flat]=\"true\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n </cdk-virtual-scroll-viewport>\n }\n</ul>\n", styles: [".tree{list-style:none;padding:0;margin:0;width:100%;outline:none;display:flex;flex-direction:column;gap:4px}.tree:focus-visible{outline:2px solid var(--color-background-accent-inverse);outline-offset:2px;border-radius:var(--border-radius-m, 8px)}.tree__viewport{width:100%}\n"], dependencies: [{ kind: "component", type: MozTreeNodeComponent, selector: "moz-tree-node", inputs: ["node", "depth", "selectionMode", "indentSize", "nodeTemplate", "nodeTemplates", "loadChildren", "ancestors", "flat", "noResultText"], outputs: ["expandChange", "selectionChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18046
18075
|
}
|
|
18047
18076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeComponent, decorators: [{
|
|
18048
18077
|
type: Component,
|
|
18049
18078
|
args: [{ selector: 'moz-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozTreeNodeComponent, ScrollingModule], providers: [TreeStateService, TreeSelectionService, TreeKeyboardService], template: "<ul\n class=\"tree\"\n role=\"tree\"\n tabindex=\"0\"\n [attr.aria-multiselectable]=\"selectionMode() === 'checkbox' ? 'true' : null\"\n [attr.aria-activedescendant]=\"keyboardService.focusedNodeId() ? 'tree-node-' + keyboardService.focusedNodeId() : null\"\n (keydown)=\"onTreeKeydown($event)\"\n (focus)=\"onTreeFocus()\"\n>\n @if (!useVirtualScroll()) { @for (node of nodes(); track trackNode($index, node)) {\n <moz-tree-node\n [node]=\"node\"\n [depth]=\"0\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n } } @else {\n <cdk-virtual-scroll-viewport\n class=\"tree__viewport\"\n [itemSize]=\"itemSize()\"\n [style.height]=\"viewportHeight()\"\n >\n <moz-tree-node\n *cdkVirtualFor=\"let flatNode of stateService.flatVisibleNodes(); trackBy: trackFlatNode\"\n [node]=\"flatNode.node\"\n [depth]=\"flatNode.depth\"\n [flat]=\"true\"\n [selectionMode]=\"selectionMode()\"\n [indentSize]=\"indentSize()\"\n [nodeTemplate]=\"nodeTemplate()\"\n [nodeTemplates]=\"nodeTemplates()\"\n [loadChildren]=\"loadChildren()\"\n [ancestors]=\"[]\"\n (expandChange)=\"onExpandChange()\"\n (selectionChange)=\"onSelectionChange($event)\"\n />\n </cdk-virtual-scroll-viewport>\n }\n</ul>\n", styles: [".tree{list-style:none;padding:0;margin:0;width:100%;outline:none;display:flex;flex-direction:column;gap:4px}.tree:focus-visible{outline:2px solid var(--color-background-accent-inverse);outline-offset:2px;border-radius:var(--border-radius-m, 8px)}.tree__viewport{width:100%}\n"] }]
|
|
18050
|
-
}], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], _defaultTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MozTreeNodeTemplateDirective), { isSignal: true }] }], _typedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozTreeNodeTemplateDirective), { isSignal: true }] }], expandedIdsChange: [{ type: i0.Output, args: ["expandedIdsChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
18079
|
+
}], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], _defaultTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MozTreeNodeTemplateDirective), { isSignal: true }] }], _typedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozTreeNodeTemplateDirective), { isSignal: true }] }], expandedIdsChange: [{ type: i0.Output, args: ["expandedIdsChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
18051
18080
|
|
|
18052
18081
|
/**
|
|
18053
18082
|
* Generated bundle index. Do not edit.
|