@ptsecurity/mosaic 15.5.0 → 15.7.2

package/fesm2020/ptsecurity-mosaic-tree.mjs

@@ -536,6 +536,9 @@ class McTreeOption extends McTreeNode {
         else {
             this.tree.selectionModel.deselect(this.data);
         }
+        if (this.showCheckbox) {
+            this.updateCheckboxState();
+        }
         this.markForCheck();
     }
     focus(focusOrigin) {
@@ -601,6 +604,7 @@ class McTreeOption extends McTreeNode {
         this._selected = false;
         this.updateCheckboxState();
         this.markForCheck();
+        this.emitSelectionChangeEvent();
     }
     onKeydown($event) {
         if (!this.actionButton) {
@@ -636,7 +640,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: {
@@ -655,7 +659,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]
@@ -1281,8 +1285,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) {
@@ -1322,8 +1327,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() {