@mozaic-ds/angular 2.0.53 → 2.0.55
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.
|
@@ -16772,9 +16772,9 @@ class MozComboboxComponent {
|
|
|
16772
16772
|
return Math.min(count * ITEM_SIZE_PX, VIEWPORT_HEIGHT_PX);
|
|
16773
16773
|
}, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
|
|
16774
16774
|
/**
|
|
16775
|
-
* Whether a section
|
|
16776
|
-
* so
|
|
16777
|
-
*
|
|
16775
|
+
* Whether all non-disabled children of a section are selected. Disabled
|
|
16776
|
+
* children are ignored so the header state stays aligned with what a click
|
|
16777
|
+
* on the section checkbox will actually toggle.
|
|
16778
16778
|
*/
|
|
16779
16779
|
isSectionFullySelected = (sectionTitle) => {
|
|
16780
16780
|
const val = this._currentValueAsArray();
|
|
@@ -16782,18 +16782,18 @@ class MozComboboxComponent {
|
|
|
16782
16782
|
return false;
|
|
16783
16783
|
const cmp = this.compareWith();
|
|
16784
16784
|
const children = this.flatItems()
|
|
16785
|
-
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle)
|
|
16785
|
+
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle && !i.disabled)
|
|
16786
16786
|
.map((i) => i.value);
|
|
16787
16787
|
return children.length > 0 && children.every((cv) => val.some((sv) => cmp(sv, cv)));
|
|
16788
16788
|
};
|
|
16789
|
-
/** Whether a section's children are partially selected
|
|
16789
|
+
/** Whether a section's non-disabled children are partially selected. */
|
|
16790
16790
|
isSectionPartiallySelected = (sectionTitle) => {
|
|
16791
16791
|
const val = this._currentValueAsArray();
|
|
16792
16792
|
if (val.length === 0)
|
|
16793
16793
|
return false;
|
|
16794
16794
|
const cmp = this.compareWith();
|
|
16795
16795
|
const children = this.flatItems()
|
|
16796
|
-
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle)
|
|
16796
|
+
.filter((i) => isFlatOption(i) && i.sectionTitle === sectionTitle && !i.disabled)
|
|
16797
16797
|
.map((i) => i.value);
|
|
16798
16798
|
const selectedCount = children.filter((cv) => val.some((sv) => cmp(sv, cv))).length;
|
|
16799
16799
|
return selectedCount > 0 && selectedCount < children.length;
|
|
@@ -17043,10 +17043,20 @@ class MozComboboxComponent {
|
|
|
17043
17043
|
this.value.set([...this.allSelectableValues()]);
|
|
17044
17044
|
}
|
|
17045
17045
|
clearSelection() {
|
|
17046
|
+
const cmp = this.compareWith();
|
|
17047
|
+
const disabledValues = this.flatItems()
|
|
17048
|
+
.filter((i) => isFlatOption(i) && !!i.disabled)
|
|
17049
|
+
.map((i) => i.value);
|
|
17046
17050
|
if (this.multiple()) {
|
|
17047
|
-
this.
|
|
17051
|
+
const current = this._currentValueAsArray();
|
|
17052
|
+
const kept = current.filter((sv) => disabledValues.some((dv) => cmp(sv, dv)));
|
|
17053
|
+
this.value.set(kept);
|
|
17048
17054
|
}
|
|
17049
17055
|
else {
|
|
17056
|
+
const raw = this.value();
|
|
17057
|
+
if (raw != null && !Array.isArray(raw) && disabledValues.some((dv) => cmp(raw, dv))) {
|
|
17058
|
+
return;
|
|
17059
|
+
}
|
|
17050
17060
|
this.value.set(null);
|
|
17051
17061
|
}
|
|
17052
17062
|
}
|
|
@@ -17448,8 +17458,20 @@ class TreeSelectionService {
|
|
|
17448
17458
|
selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
|
|
17449
17459
|
selectionMode = signal('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
|
|
17450
17460
|
rootNodes = signal([], ...(ngDevMode ? [{ debugName: "rootNodes" }] : /* istanbul ignore next */ []));
|
|
17461
|
+
canSelectFn = signal(null, ...(ngDevMode ? [{ debugName: "canSelectFn" }] : /* istanbul ignore next */ []));
|
|
17451
17462
|
setSelectedIds(ids) {
|
|
17452
|
-
this.
|
|
17463
|
+
const pred = this.canSelectFn();
|
|
17464
|
+
if (!pred) {
|
|
17465
|
+
this.selectedIds.set(new Set(ids));
|
|
17466
|
+
return;
|
|
17467
|
+
}
|
|
17468
|
+
const next = new Set();
|
|
17469
|
+
for (const id of ids) {
|
|
17470
|
+
const node = this._resolveNode({ id });
|
|
17471
|
+
if (pred(node))
|
|
17472
|
+
next.add(id);
|
|
17473
|
+
}
|
|
17474
|
+
this.selectedIds.set(next);
|
|
17453
17475
|
}
|
|
17454
17476
|
setMode(mode) {
|
|
17455
17477
|
this.selectionMode.set(mode);
|
|
@@ -17457,6 +17479,13 @@ class TreeSelectionService {
|
|
|
17457
17479
|
setRootNodes(nodes) {
|
|
17458
17480
|
this.rootNodes.set(nodes);
|
|
17459
17481
|
}
|
|
17482
|
+
setCanSelect(fn) {
|
|
17483
|
+
this.canSelectFn.set(fn);
|
|
17484
|
+
}
|
|
17485
|
+
canSelect(node) {
|
|
17486
|
+
const pred = this.canSelectFn();
|
|
17487
|
+
return pred ? pred(node) : true;
|
|
17488
|
+
}
|
|
17460
17489
|
isSelected(id) {
|
|
17461
17490
|
return this.selectedIds().has(id);
|
|
17462
17491
|
}
|
|
@@ -17506,6 +17535,8 @@ class TreeSelectionService {
|
|
|
17506
17535
|
* Select a node: add all leaf descendant IDs (or the node's own ID if leaf).
|
|
17507
17536
|
*/
|
|
17508
17537
|
selectNode(node) {
|
|
17538
|
+
if (!this.canSelect(node))
|
|
17539
|
+
return;
|
|
17509
17540
|
if (this.selectionMode() === 'radio') {
|
|
17510
17541
|
this.selectedIds.set(new Set([node.id]));
|
|
17511
17542
|
return;
|
|
@@ -17794,6 +17825,11 @@ class MozTreeNodeComponent {
|
|
|
17794
17825
|
isSelected = computed(() => this.selectionService.isCheckedComputed(this.node()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
17795
17826
|
isIndeterminate = computed(() => this.selectionService.isIndeterminate(this.node()), ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
|
|
17796
17827
|
isFocused = computed(() => this.keyboardService.focusedNodeId() === this.node().id, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
17828
|
+
isSelectable = computed(() => {
|
|
17829
|
+
if (this.selectionMode() === 'none')
|
|
17830
|
+
return false;
|
|
17831
|
+
return this.selectionService.canSelect(this.node());
|
|
17832
|
+
}, ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ []));
|
|
17797
17833
|
hasChildren = computed(() => {
|
|
17798
17834
|
const node = this.node();
|
|
17799
17835
|
return (node.hasChildren !== false &&
|
|
@@ -17866,7 +17902,7 @@ class MozTreeNodeComponent {
|
|
|
17866
17902
|
return null;
|
|
17867
17903
|
}
|
|
17868
17904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17869
|
-
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]=\"
|
|
17905
|
+
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 });
|
|
17870
17906
|
}
|
|
17871
17907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeNodeComponent, decorators: [{
|
|
17872
17908
|
type: Component,
|
|
@@ -17878,7 +17914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
17878
17914
|
MozLoaderComponent,
|
|
17879
17915
|
ChevronDown20,
|
|
17880
17916
|
ChevronRight20,
|
|
17881
|
-
], 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]=\"
|
|
17917
|
+
], 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"] }]
|
|
17882
17918
|
}], 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"] }] } });
|
|
17883
17919
|
|
|
17884
17920
|
class MozTreeNodeTemplateDirective {
|
|
@@ -17904,6 +17940,7 @@ class MozTreeComponent {
|
|
|
17904
17940
|
expandedIds = input(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
|
|
17905
17941
|
selectedIds = input(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
|
|
17906
17942
|
loadChildren = input(null, ...(ngDevMode ? [{ debugName: "loadChildren" }] : /* istanbul ignore next */ []));
|
|
17943
|
+
canSelect = input(null, ...(ngDevMode ? [{ debugName: "canSelect" }] : /* istanbul ignore next */ []));
|
|
17907
17944
|
indentSize = input(24, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
|
|
17908
17945
|
virtualScroll = input('auto', ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
|
|
17909
17946
|
virtualScrollThreshold = input(100, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
|
|
@@ -17953,6 +17990,9 @@ class MozTreeComponent {
|
|
|
17953
17990
|
effect(() => {
|
|
17954
17991
|
this.selectionService.setRootNodes(this.nodes());
|
|
17955
17992
|
});
|
|
17993
|
+
effect(() => {
|
|
17994
|
+
this.selectionService.setCanSelect(this.canSelect());
|
|
17995
|
+
});
|
|
17956
17996
|
effect(() => {
|
|
17957
17997
|
this.stateService.loadChildrenFn.set(this.loadChildren());
|
|
17958
17998
|
});
|
|
@@ -18041,12 +18081,12 @@ class MozTreeComponent {
|
|
|
18041
18081
|
return flat.node.id;
|
|
18042
18082
|
}
|
|
18043
18083
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18044
|
-
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 });
|
|
18084
|
+
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 });
|
|
18045
18085
|
}
|
|
18046
18086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozTreeComponent, decorators: [{
|
|
18047
18087
|
type: Component,
|
|
18048
18088
|
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"] }]
|
|
18049
|
-
}], 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"] }] } });
|
|
18089
|
+
}], 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"] }] } });
|
|
18050
18090
|
|
|
18051
18091
|
/**
|
|
18052
18092
|
* Generated bundle index. Do not edit.
|