@ptsecurity/mosaic 13.3.1 → 13.4.0

package/fesm2020/ptsecurity-mosaic-tree.mjs

@@ -1,11 +1,11 @@
-import * as i2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Input, ViewChild, ContentChildren, forwardRef, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, EventEmitter, ContentChild, Output, Optional, QueryList, Attribute, NgModule } from '@angular/core';
+import { Directive, Input, ViewChild, ContentChildren, forwardRef, Inject, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, EventEmitter, ContentChild, Output, QueryList, Attribute, NgModule } from '@angular/core';
 import * as i1 from '@ptsecurity/mosaic/core';
 import { mixinDisabled, MC_OPTION_ACTION_PARENT, McPseudoCheckbox, McOptionActionComponent, MultipleMode, getMcSelectNonArrayValueError, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
-import * as i3 from '@angular/cdk/bidi';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i2 from '@angular/cdk/bidi';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TreeSizePaddingLeft } from '@ptsecurity/mosaic/design-tokens';
 import { BehaviorSubject, Subject, Observable, of, merge } from 'rxjs';
 import { takeUntil, map, take, delay } from 'rxjs/operators';
@@ -33,9 +33,9 @@ class McTreeNodeDef {
         this.template = template;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeDef, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mcTreeNodeDef]',
@@ -52,9 +52,9 @@ class McTreeNodeOutlet {
         this.changeDetectorRef = changeDetectorRef;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeNodeOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNodeOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeOutlet, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNodeOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNodeOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeOutlet, decorators: [{
             type: Directive,
             args: [{ selector: '[mcTreeNodeOutlet]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
@@ -269,9 +269,9 @@ class McTreeBase {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeBase, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeBase, inputs: { treeControl: "treeControl", trackBy: "trackBy", dataSource: "dataSource" }, queries: [{ propertyName: "nodeDefs", predicate: McTreeNodeDef }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeBase, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeBase, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeBase, inputs: { treeControl: "treeControl", trackBy: "trackBy", dataSource: "dataSource" }, queries: [{ propertyName: "nodeDefs", predicate: McTreeNodeDef }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { treeControl: [{
                 type: Input
@@ -318,9 +318,9 @@ class McTreeNode {
  * in `McTree` and set the data to it.
  */
 McTreeNode.mostRecentTreeNode = null;
-/** @nocollapse */ /** @nocollapse */ McTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNode, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => McTreeBase) }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNode.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNode, selector: "mc-tree-node", exportAs: ["mcTreeNode"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNode, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNode, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => McTreeBase) }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNode.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNode, selector: "mc-tree-node", exportAs: ["mcTreeNode"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNode, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-tree-node',
@@ -331,6 +331,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
                     args: [forwardRef(() => McTreeBase)]
                 }] }]; } });
 
+/** Regex used to split a string on its CSS units. */
+const cssUnitPattern = /([A-Za-z%]+)$/;
+class McTreeNodePadding {
+    constructor(treeNode, tree, renderer, element, dir) {
+        this.treeNode = treeNode;
+        this.tree = tree;
+        this.renderer = renderer;
+        this.element = element;
+        this.dir = dir;
+        this._indent = 20;
+        /** CSS units used for the indentation value. */
+        this.indentUnits = 'px';
+        this.baseLeftPadding = parseInt(TreeSizePaddingLeft);
+        this.iconWidth = 24;
+        this.destroyed = new Subject();
+        this.dir?.change?.pipe(takeUntil(this.destroyed))
+            .subscribe(() => this.setPadding());
+    }
+    get level() {
+        return this._level;
+    }
+    set level(value) {
+        this.setLevelInput(value);
+    }
+    get indent() {
+        return this._indent;
+    }
+    set indent(indent) {
+        this.setIndentInput(indent);
+    }
+    get leftPadding() {
+        return (this.withIcon ? 0 : this.iconWidth) + this.baseLeftPadding;
+    }
+    ngOnInit() {
+        this.withIcon = this.tree.treeControl.isExpandable(this.treeNode.data);
+        this.setPadding();
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    paddingIndent() {
+        const nodeLevel = (this.treeNode.data && this.tree.treeControl.getLevel)
+            ? this.tree.treeControl.getLevel(this.treeNode.data)
+            : 0;
+        const level = this.level || nodeLevel;
+        return level > 0 ? `${(level * this._indent) + this.leftPadding}px` : `${this.leftPadding}px`;
+    }
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    setLevelInput(value) {
+        // Set to null as the fallback value so that _setPadding can fall back to the node level if the
+        // consumer set the directive as `mcTreeNodePadding=""`. We still want to take this value if
+        // they set 0 explicitly.
+        this._level = coerceNumberProperty(value, null);
+        this.setPadding();
+    }
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    setIndentInput(indent) {
+        let value = indent;
+        let units = 'px';
+        if (typeof indent === 'string') {
+            const parts = indent.split(cssUnitPattern);
+            value = parts[0];
+            units = parts[1] || units;
+        }
+        this.indentUnits = units;
+        this._indent = coerceNumberProperty(value);
+        this.setPadding();
+    }
+    setPadding() {
+        const padding = this.paddingIndent();
+        const paddingProp = this.dir?.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodePadding, deps: [{ token: McTreeNode }, { token: McTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { indent: ["mcTreeNodePaddingIndent", "indent"] }, exportAs: ["mcTreeNodePadding"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodePadding, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcTreeNodePadding]',
+                    exportAs: 'mcTreeNodePadding'
+                }]
+        }], ctorParameters: function () { return [{ type: McTreeNode }, { type: McTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { indent: [{
+                type: Input,
+                args: ['mcTreeNodePaddingIndent']
+            }] } });
+
 class McTreeNodeToggleBase {
 }
 // tslint:disable-next-line:naming-convention
@@ -365,9 +465,9 @@ class McTreeNodeToggleBaseDirective extends McTreeNodeToggleMixinBase {
         event.stopPropagation();
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleBaseDirective, deps: [{ token: McTreeBase }, { token: McTreeNode }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["mcTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleBaseDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleBaseDirective, deps: [{ token: McTreeBase }, { token: McTreeNode }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["mcTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleBaseDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: McTreeBase }, { type: McTreeNode }]; }, propDecorators: { node: [{
                 type: Input
@@ -377,9 +477,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
             }] } });
 class McTreeNodeToggleComponent extends McTreeNodeToggleBaseDirective {
 }
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodeToggleComponent, selector: "mc-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.mc-expanded": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-node-toggle" }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`, isInline: true, styles: [".mc-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--mc-tree-size-toggle-padding, 4px);padding-right:var(--mc-tree-size-toggle-padding, 4px);cursor:pointer}.mc-tree-node-toggle .mc-icon{transform:rotate(-90deg)}.mc-tree-node-toggle.mc-expanded .mc-icon{transform:rotate(0)}.mc-tree-node-toggle[disabled]{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodeToggleComponent, selector: "mc-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.mc-expanded": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-node-toggle" }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`, isInline: true, styles: [".mc-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--mc-tree-size-toggle-padding, 4px);padding-right:var(--mc-tree-size-toggle-padding, 4px);cursor:pointer}.mc-tree-node-toggle .mc-icon{transform:rotate(-90deg)}.mc-tree-node-toggle.mc-expanded .mc-icon{transform:rotate(0)}.mc-tree-node-toggle[disabled]{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tree-node-toggle', exportAs: 'mcTreeNodeToggle', template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`, host: {
                         class: 'mc-tree-node-toggle',
@@ -390,9 +490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
         }] });
 class McTreeNodeToggleDirective extends McTreeNodeToggleBaseDirective {
 }
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodeToggleDirective, selector: "[mc-tree-node-toggle], [mcTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodeToggleDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTreeNodeToggleDirective, selector: "[mc-tree-node-toggle], [mcTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeNodeToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mc-tree-node-toggle], [mcTreeNodeToggle]',
@@ -404,6 +504,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
                 }]
         }] });
 
+class McTree extends McTreeBase {
+}
+/** @nocollapse */ /** @nocollapse */ McTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTree, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTree, selector: "mc-tree", host: { classAttribute: "mc-tree" }, exportAs: ["mcTree"], usesInheritance: true, ngImport: i0, template: `<ng-container mcTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mc-tree{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-tree', exportAs: 'mcTree', template: `<ng-container mcTreeNodeOutlet></ng-container>`, host: {
+                        class: 'mc-tree'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mc-tree{display:block}\n"] }]
+        }] });
+
 /**
  * Injection token used to provide the parent component to options.
  */
@@ -576,12 +687,12 @@ class McTreeOption extends McTreeNode {
         this.changeDetectorRef.markForCheck();
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: MC_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: McTreeOption, selector: "mc-tree-option", inputs: { disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-option" }, providers: [
+/** @nocollapse */ /** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: MC_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTreeOption, selector: "mc-tree-option", inputs: { disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-option" }, providers: [
         { provide: McTreeNode, useExisting: McTreeOption },
         { provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
-    ], queries: [{ propertyName: "toggleElement", first: true, predicate: McTreeNodeToggleDirective, descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: McPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content *ngSwitchCase=\"true\" select=\"mc-pseudo-checkbox\"></ng-content>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <mc-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [state]=\"selected ? 'checked' : 'unchecked'\"\n            [disabled]=\"disabled\">\n        </mc-pseudo-checkbox>\n    </ng-container>\n</ng-container>\n\n<ng-content select=\"mc-checkbox\"></ng-content>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<ng-content select=\"mc-progress-spinner\"></ng-content>\n\n<span class=\"mc-option-text mc-no-select\"><ng-content></ng-content></span>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-tree-option{box-sizing:border-box;display:flex;align-items:center;height:var(--mc-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.mc-tree-option .mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:var(--mc-tree-size-padding-right, 16px)}.mc-tree-option>.mc-icon{margin-right:var(--mc-tree-size-icon-padding, 8px);cursor:pointer}.mc-tree-option>.mc-progress-spinner{margin-right:8px}.mc-tree-option:focus{outline:none}.mc-tree-option:not([disabled]){cursor:pointer}.mc-tree-option>.mc-pseudo-checkbox,.mc-tree-option>.mc-checkbox{margin-right:var(--mc-tree-size-icon-padding, 8px)}.mc-tree-option .mc-option-action{display:none}.mc-tree-option:not([disabled]):hover .mc-option-action,.mc-tree-option:not([disabled]).mc-focused .mc-option-action,.mc-tree-option:not([disabled]).mc-action-button-focused .mc-option-action{display:flex}\n"], components: [{ type: i1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeOption, decorators: [{
+    ], queries: [{ propertyName: "toggleElement", first: true, predicate: ["mcTreeNodeToggle"], descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: McPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content *ngSwitchCase=\"true\" select=\"mc-pseudo-checkbox\"></ng-content>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <mc-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [state]=\"selected ? 'checked' : 'unchecked'\"\n            [disabled]=\"disabled\">\n        </mc-pseudo-checkbox>\n    </ng-container>\n</ng-container>\n\n<ng-content select=\"mc-checkbox\"></ng-content>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<ng-content select=\"mc-progress-spinner\"></ng-content>\n\n<span class=\"mc-option-text mc-no-select\"><ng-content></ng-content></span>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-tree-option{box-sizing:border-box;display:flex;align-items:center;height:var(--mc-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.mc-tree-option .mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:var(--mc-tree-size-padding-right, 16px)}.mc-tree-option>.mc-icon{margin-right:var(--mc-tree-size-icon-padding, 8px);cursor:pointer}.mc-tree-option>.mc-progress-spinner{margin-right:8px}.mc-tree-option:focus{outline:none}.mc-tree-option:not([disabled]){cursor:pointer}.mc-tree-option>.mc-pseudo-checkbox,.mc-tree-option>.mc-checkbox{margin-right:var(--mc-tree-size-icon-padding, 8px)}.mc-tree-option .mc-option-action{display:none}.mc-tree-option:not([disabled]):hover .mc-option-action,.mc-tree-option:not([disabled]).mc-focused .mc-option-action,.mc-tree-option:not([disabled]).mc-action-button-focused .mc-option-action{display:flex}\n"], components: [{ type: i1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeOption, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tree-option', exportAs: 'mcTreeOption', host: {
                         class: 'mc-tree-option',
@@ -604,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
                     args: [MC_TREE_OPTION_PARENT_COMPONENT]
                 }] }]; }, propDecorators: { toggleElement: [{
                 type: ContentChild,
-                args: [McTreeNodeToggleDirective]
+                args: ['mcTreeNodeToggle']
             }], pseudoCheckbox: [{
                 type: ContentChild,
                 args: [McPseudoCheckbox]
@@ -625,118 +736,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
                 type: Output
             }] } });
 
-/** Regex used to split a string on its CSS units. */
-const cssUnitPattern = /([A-Za-z%]+)$/;
-class McTreeNodePadding {
-    constructor(treeNode, tree, renderer, element, option, dir) {
-        this.treeNode = treeNode;
-        this.tree = tree;
-        this.renderer = renderer;
-        this.element = element;
-        this.option = option;
-        this.dir = dir;
-        this._indent = 20;
-        /** CSS units used for the indentation value. */
-        this.indentUnits = 'px';
-        this.baseLeftPadding = parseInt(TreeSizePaddingLeft);
-        this.iconWidth = 24;
-        this.destroyed = new Subject();
-        this.dir?.change?.pipe(takeUntil(this.destroyed))
-            .subscribe(() => this.setPadding());
-    }
-    get level() {
-        return this._level;
-    }
-    set level(value) {
-        this.setLevelInput(value);
-    }
-    get indent() {
-        return this._indent;
-    }
-    set indent(indent) {
-        this.setIndentInput(indent);
-    }
-    get leftPadding() {
-        return (this.withIcon ? 0 : this.iconWidth) + this.baseLeftPadding;
-    }
-    ngAfterViewInit() {
-        this.withIcon = !!this.option.toggleElement;
-        this.setPadding();
-    }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.complete();
-    }
-    paddingIndent() {
-        const nodeLevel = (this.treeNode.data && this.tree.treeControl.getLevel)
-            ? this.tree.treeControl.getLevel(this.treeNode.data)
-            : 0;
-        const level = this.level || nodeLevel;
-        return level > 0 ? `${(level * this._indent) + this.leftPadding}px` : `${this.leftPadding}px`;
-    }
-    /**
-     * This has been extracted to a util because of TS 4 and VE.
-     * View Engine doesn't support property rename inheritance.
-     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
-     */
-    setLevelInput(value) {
-        // Set to null as the fallback value so that _setPadding can fall back to the node level if the
-        // consumer set the directive as `mcTreeNodePadding=""`. We still want to take this value if
-        // they set 0 explicitly.
-        this._level = coerceNumberProperty(value, null);
-        this.setPadding();
-    }
-    /**
-     * This has been extracted to a util because of TS 4 and VE.
-     * View Engine doesn't support property rename inheritance.
-     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
-     * @docs-private
-     */
-    setIndentInput(indent) {
-        let value = indent;
-        let units = 'px';
-        if (typeof indent === 'string') {
-            const parts = indent.split(cssUnitPattern);
-            value = parts[0];
-            units = parts[1] || units;
-        }
-        this.indentUnits = units;
-        this._indent = coerceNumberProperty(value);
-        this.setPadding();
-    }
-    setPadding() {
-        const padding = this.paddingIndent();
-        const paddingProp = this.dir?.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
-        this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodePadding, deps: [{ token: McTreeNode }, { token: McTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: McTreeOption }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: McTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { indent: ["mcTreeNodePaddingIndent", "indent"] }, exportAs: ["mcTreeNodePadding"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeNodePadding, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mcTreeNodePadding]',
-                    exportAs: 'mcTreeNodePadding'
-                }]
-        }], ctorParameters: function () { return [{ type: McTreeNode }, { type: McTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: McTreeOption }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { indent: [{
-                type: Input,
-                args: ['mcTreeNodePaddingIndent']
-            }] } });
-
-class McTree extends McTreeBase {
-}
-/** @nocollapse */ /** @nocollapse */ McTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTree, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: McTree, selector: "mc-tree", host: { classAttribute: "mc-tree" }, exportAs: ["mcTree"], usesInheritance: true, ngImport: i0, template: `<ng-container mcTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mc-tree{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTree, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-tree', exportAs: 'mcTree', template: `<ng-container mcTreeNodeOutlet></ng-container>`, host: {
-                        class: 'mc-tree'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mc-tree{display:block}\n"] }]
-        }] });
-
 /** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
 /* tslint:disable-next-line:naming-convention */
 class BaseTreeControl {
@@ -1382,13 +1381,13 @@ class McTreeSelection extends McTreeBase {
         return $event.relatedTarget.classList.contains('mc-tree-option');
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeSelection, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1$1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: McTreeSelection, selector: "mc-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-selection" }, providers: [
+/** @nocollapse */ /** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeSelection, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1$1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTreeSelection, selector: "mc-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-selection" }, providers: [
         MC_SELECTION_TREE_VALUE_ACCESSOR,
         { provide: MC_TREE_OPTION_PARENT_COMPONENT, useExisting: McTreeSelection },
         { provide: McTreeBase, useExisting: McTreeSelection }
     ], queries: [{ propertyName: "unorderedOptions", predicate: McTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], exportAs: ["mcTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container mcTreeNodeOutlet></ng-container>', isInline: true, styles: [".mc-tree-selection{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeSelection, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tree-selection', exportAs: 'mcTreeSelection', template: '<ng-container mcTreeNodeOutlet></ng-container>', host: {
                         class: 'mc-tree-selection',
@@ -1447,8 +1446,8 @@ const MC_TREE_DIRECTIVES = [
 ];
 class McTreeModule {
 }
-/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeModule, declarations: [McTreeNodeOutlet,
+/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeModule, declarations: [McTreeNodeOutlet,
         McTreeNodeDef,
         McTreeNode,
         McTreeNodePadding,
@@ -1465,8 +1464,8 @@ class McTreeModule {
         McTreeOption,
         McTreeNodeToggleComponent,
         McTreeNodeToggleDirective] });
-/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: McTreeModule, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, McPseudoCheckboxModule],