@mozaic-ds/angular 2.0.30 → 2.0.31

package/fesm2022/mozaic-ds-angular.mjs

@@ -11801,7 +11801,7 @@ class MozTreeNodeComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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]=\"selectionMode() !== 'none' ? 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    <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 (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\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\" />\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{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{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:48px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{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;width:28px;height:28px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility: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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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]=\"selectionMode() !== 'none' ? 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    <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 (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\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{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{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:48px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{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;width:28px;height:28px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeNodeComponent, decorators: [{
             type: Component,
@@ -11813,7 +11813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         MozLoaderComponent,
                         ChevronDown20,
                         ChevronRight20,
-                    ], 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]=\"selectionMode() !== 'none' ? 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    <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 (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\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\" />\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{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{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:48px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{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;width:28px;height:28px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility: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"] }]
+                    ], 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]=\"selectionMode() !== 'none' ? 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    <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 (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\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{background:var(--color-background-accent);border-radius:var(--border-radius-m, 8px)}.tree-node--disabled{pointer-events:none;color:var(--color-text-disabled)}.tree-node--disabled>.tree-node__header{opacity:.5}.tree-node--focused>.tree-node__header,.tree-node:focus-visible>.tree-node__header{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:48px;padding:4px 0;border-radius:var(--border-radius-m, 8px);transition:background .15s ease;-webkit-user-select:none;user-select:none}.tree-node__header--expandable{cursor:pointer}.tree-node__header:hover{background:var(--color-background-secondary)}.tree-node--selected>.tree-node__header:hover{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;width:28px;height:28px;color:var(--color-text-primary)}.tree-node__chevron--leaf{width:28px;visibility: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"] }]
         }], 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"] }] } });
 
 class MozTreeNodeTemplateDirective {
@@ -11909,11 +11909,11 @@ class MozTreeComponent {
         return flat.node.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", 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 class=\"tree__viewport\" [itemSize]=\"itemSize()\">\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}.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%;height:400px}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", 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 class=\"tree__viewport\" [itemSize]=\"itemSize()\">\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%;height:400px}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozTreeComponent, decorators: [{
             type: Component,
-            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 class=\"tree__viewport\" [itemSize]=\"itemSize()\">\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}.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%;height:400px}\n"] }]
+            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 class=\"tree__viewport\" [itemSize]=\"itemSize()\">\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%;height:400px}\n"] }]
         }], 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 }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", 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"] }] } });
 
 /**