@ptsecurity/mosaic 15.6.0 → 15.8.0

package/fesm2020/ptsecurity-mosaic-tree.mjs

@@ -9,8 +9,8 @@ import * as i1$1 from 'rxjs/internal/scheduler/AsyncScheduler';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 import * as i3 from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { TreeSizePaddingLeft } from '@mosaic-design/tokens-fe-2022/web';
-import { takeUntil, map, take, delay } from 'rxjs/operators';
+import { TreeSizePaddingLeft } from '@mosaic-design/tokens-fe-2022/web/index.js';
+import { takeUntil, take, delay, map } from 'rxjs/operators';
 import { TAB, hasModifierKey, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN } from '@ptsecurity/cdk/keycodes';
 import { McDropdownTrigger } from '@ptsecurity/mosaic/dropdown';
 import { McTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
@@ -346,8 +346,7 @@ class McTreeNodeToggleBaseDirective extends McTreeNodeToggleMixinBase {
         this.treeNode = treeNode;
         this._recursive = false;
         this.tree.treeControl.filterValue
-            .pipe(map((value) => value?.length > 0))
-            .subscribe((state) => this.disabled = state);
+            .subscribe((value) => this.disabled = !!value);
     }
     get recursive() {
         return this._recursive;
@@ -536,6 +535,9 @@ class McTreeOption extends McTreeNode {
         else {
             this.tree.selectionModel.deselect(this.data);
         }
+        if (this.showCheckbox) {
+            this.updateCheckboxState();
+        }
         this.markForCheck();
     }
     focus(focusOrigin) {
@@ -637,7 +639,7 @@ class McTreeOption extends McTreeNode {
         { provide: McTreeNode, useExisting: McTreeOption },
         { provide: MC_TITLE_TEXT_REF, useExisting: McTreeOption },
         { provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
-    ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: McTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: McTreeNodeToggleComponent, 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 }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["mcTitleContainer"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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]=\"checkboxState\"\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\" #mcTitleContainer><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,.mc-tree-option>.toggle-wrapper>.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: McTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: McTreeNodeToggleComponent, 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 }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["mcTitleContainer"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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]=\"checkboxState\"\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\" #mcTitleContainer><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-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;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,.mc-tree-option>.toggle-wrapper>.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{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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTreeOption, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tree-option', exportAs: 'mcTreeOption', host: {
@@ -656,7 +658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         { provide: McTreeNode, useExisting: McTreeOption },
                         { provide: MC_TITLE_TEXT_REF, useExisting: McTreeOption },
                         { provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
-                    ], template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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]=\"checkboxState\"\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\" #mcTitleContainer><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,.mc-tree-option>.toggle-wrapper>.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"] }]
+                    ], template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"mc-tree-node-toggle, [mc-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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]=\"checkboxState\"\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\" #mcTitleContainer><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-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;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,.mc-tree-option>.toggle-wrapper>.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{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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MC_TREE_OPTION_PARENT_COMPONENT]
@@ -864,6 +866,52 @@ class BaseTreeControl {
     }
 }
 
+class FilterByViewValue {
+    constructor(control) {
+        this.control = control;
+    }
+    handle(value) {
+        this.result = this.control.dataNodes
+            .filter((node) => this.control.compareViewValues(this.control.getViewValue(node), value));
+        return this.result;
+    }
+}
+class FilterParentsForNodes {
+    constructor(control) {
+        this.control = control;
+    }
+    handle(_, prevFilter) {
+        const result = new Set();
+        this.control.dataNodes
+            .filter((node) => prevFilter?.result.includes(node))
+            .forEach((node) => {
+            this.control.getParents(node, [])
+                .forEach((parent) => result.add(parent));
+            result.add(node);
+        });
+        this.result = Array.from(result);
+        return this.result;
+    }
+}
+class FilterByValues {
+    constructor(control) {
+        this.control = control;
+        this.values = [];
+        this.setValues = (values) => {
+            this.values = values;
+        };
+    }
+    handle(_, prevFilter) {
+        const found = this.control.dataNodes
+            .filter((node) => this.values.includes(this.control.getValue(node)));
+        this.result = Array.from(new Set([...(prevFilter?.result || []), ...found]));
+        return this.result;
+    }
+    getValues() {
+        return this.values;
+    }
+}
+
 function defaultCompareValues(firstValue, secondValue) {
     return firstValue === secondValue;
 }
@@ -892,6 +940,7 @@ class FlatTreeControl extends BaseTreeControl {
         this.compareValues = compareValues;
         this.compareViewValues = compareViewValues;
         this.isDisabled = isDisabled;
+        this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
     }
     /**
      * Gets a list of the data node's subtree of descendent data nodes.
@@ -934,62 +983,42 @@ class FlatTreeControl extends BaseTreeControl {
     hasValue(value) {
         return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
     }
-    filterNodes(value) {
+    filterNodes(value = null) {
         this.saveExpansionState();
-        this.filterModel.clear();
-        this.expansionModel.clear();
-        const filteredNodes = this.dataNodes
-            .filter((node) => this.compareViewValues(this.getViewValue(node), value));
-        const filteredNodesWithTheirParents = new Set();
-        filteredNodes.forEach((filteredNode) => {
-            this.getParents(filteredNode, [])
-                .forEach((node) => {
-                filteredNodesWithTheirParents.add(node);
-                this.expandDataNode(node);
-            });
-            filteredNodesWithTheirParents.add(filteredNode);
-            this.expandDataNode(filteredNode);
-            if (this.isExpandable(filteredNode)) {
-                const childNodeLevel = this.getLevel(filteredNode) + 1;
-                this.getDescendants(filteredNode)
-                    .filter((childNode) => this.getLevel(childNode) === childNodeLevel)
-                    .filter((childNode) => !this.isExpandable(childNode) || !this.hasFilteredDescendant(childNode, filteredNodes))
-                    .forEach((childNode) => {
-                    filteredNodesWithTheirParents.add(childNode);
-                    this.expandDataNode(childNode);
-                });
-            }
+        let result = [];
+        this.filters
+            .forEach((filter, index, filters) => {
+            const prevFilter = filters[index - 1] || null;
+            result = filter.handle(value, prevFilter);
         });
-        this.filterModel.select(...Array.from(filteredNodesWithTheirParents));
+        this.filterModel.clear();
+        this.filterModel.select(...result);
+        // set current expansion state according to filtered tree
+        this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)));
         this.updateFilterValue(value);
-        this.restoreExpansionState();
+        Promise.resolve()
+            .then(() => this.restoreExpansionState());
     }
-    updateFilterValue(value) {
-        Promise.resolve().then(() => this.filterValue.next(value));
+    getFilters() {
+        return this.filters;
     }
-    expandDataNode(dataNode) {
-        if (this.isExpandable(dataNode)) {
-            this.expansionModel.select(dataNode);
-        }
+    setFilters(...filters) {
+        this.filters = filters;
+    }
+    updateFilterValue(value) {
+        Promise.resolve()
+            .then(() => this.filterValue.next(value));
     }
     saveExpansionState() {
-        if (this.filterValue.value === '') {
+        if (!this.filterValue.value) {
             this.expandedItemsBeforeFiltration = this.expansionModel.selected;
         }
     }
     restoreExpansionState() {
-        if (this.filterValue.value === '') {
-            this.expansionModel.clear();
-            this.expansionModel.select(...this.expandedItemsBeforeFiltration);
+        if (!this.filterValue.value) {
+            this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
         }
     }
-    hasFilteredDescendant(dataNode, filteredNodes) {
-        const filteredViewValues = filteredNodes
-            .map((node) => this.getViewValue(node));
-        return this.getDescendants(dataNode)
-            .filter((node) => filteredViewValues.includes(this.getViewValue(node)))
-            .length > 0;
-    }
 }
 
 /* tslint:disable:no-empty */
@@ -1282,8 +1311,9 @@ class McTreeSelection extends McTreeBase {
         const options = this.renderedOptions.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
         let toIndex = this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex;
-        const selectedOptionState = options[fromIndex].selected;
-        if (toIndex === fromIndex) {
+        const selectedOptionState = options[fromIndex]?.selected;
+        if (toIndex === fromIndex || fromIndex === -1) {
+            options[toIndex].toggle();
             return;
         }
         if (fromIndex > toIndex) {
@@ -1323,8 +1353,8 @@ class McTreeSelection extends McTreeBase {
     selectAllOptions() {
         const optionsToSelect = this.renderedOptions
             .filter((option) => !option.disabled);
-        optionsToSelect
-            .forEach((option) => option.setSelected(true));
+        const hasDeselectedOptions = optionsToSelect.some((option) => !option.selected);
+        optionsToSelect.forEach((option) => option.setSelected(hasDeselectedOptions));
         this.onSelectAll.emit(new McTreeSelectAllEvent(this, optionsToSelect));
     }
     copyActiveOption() {
@@ -1799,5 +1829,5 @@ class McTreeNestedDataSource extends DataSource {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseTreeControl, FlatTreeControl, MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTree, McTreeBase, McTreeCopyEvent, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNode, McTreeNodeDef, McTreeNodeOutlet, McTreeNodeOutletContext, McTreeNodePadding, McTreeNodeToggleBase, McTreeNodeToggleBaseDirective, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeNodeToggleMixinBase, McTreeOption, McTreeOptionChange, McTreeSelectAllEvent, McTreeSelection, McTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
+export { BaseTreeControl, FilterByValues, FilterByViewValue, FilterParentsForNodes, FlatTreeControl, MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTree, McTreeBase, McTreeCopyEvent, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNode, McTreeNodeDef, McTreeNodeOutlet, McTreeNodeOutletContext, McTreeNodePadding, McTreeNodeToggleBase, McTreeNodeToggleBaseDirective, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeNodeToggleMixinBase, McTreeOption, McTreeOptionChange, McTreeSelectAllEvent, McTreeSelection, McTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
 //# sourceMappingURL=ptsecurity-mosaic-tree.mjs.map