cmat 0.0.7 → 0.0.9

package/fesm2022/cmat-components-select-tree.mjs

@@ -1,39 +1,41 @@
-import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild } from '@angular/core';
-import * as i5 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ReplaySubject, Subject, merge } from 'rxjs';
-import { takeUntil, debounceTime } from 'rxjs/operators';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import * as i6 from '@angular/material/tree';
-import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import * as i3 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i8 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/button';
+import { NgClass, AsyncPipe, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Self, HostBinding, Input, ViewChild, HostListener } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { CmatSelectSearchComponent } from 'cmat/components/select-search';
+import * as i7 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { NgClass, AsyncPipe, NgStyle } from '@angular/common';
-import * as i1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { isNil } from 'lodash-es';
+import * as i3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/tree';
+import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
+import { isUndefined, isNil } from 'lodash-es';
+import { ReplaySubject, Subject, merge } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import { CmatSelectSearchComponent } from 'cmat/components/select-search';
 import * as i4 from '@angular/material/core';
 
 class CmatSelectTreeFlatNode {
 }
 
+/* eslint-disable @typescript-eslint/member-ordering */
+let NEXT_ID = 0;
 class CmatSelectTreeComponent {
-    constructor(_cd) {
-        this._cd = _cd;
-        this.showLabel = true;
+    constructor(ngControl, _changeDetectorRef) {
+        this.ngControl = ngControl;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.id = `cmat-select-tree-${NEXT_ID++}`;
         this.noEntriesFoundLabel = '无结果';
         this.showNoFoundLabel = true;
-        this.placeholder = '部门';
-        this.prefixIcon = 'heroicons_outline:building-library';
+        this.multiple = false;
         this.overallSearchEnabled = true;
         this.canNull = false;
         this.showToggleAllCheckbox = false;
@@ -41,11 +43,16 @@ class CmatSelectTreeComponent {
         this.nestedNodeMap = new Map();
         this.selectedParent = null;
         this.checklistSelection = new SelectionModel(true);
+        this.overallFilterControl = new FormControl();
         this.isIndeterminate = false;
         this.isChecked = false;
-        this.dataCount = 0;
+        this.checkCount = 0;
         this.selectControl = new FormControl();
         this.matSelectData = new ReplaySubject(1);
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.touched = false;
+        this.controlType = 'cmat-select-tree';
         this._unsubscribeAll = new Subject();
         this.getLevel = (node) => node.level;
         this.isExpandable = (node) => node.expandable;
@@ -65,20 +72,41 @@ class CmatSelectTreeComponent {
             this.nestedNodeMap.set(node, flatNode);
             return flatNode;
         };
-        this.overallFilterControl = new FormControl();
+        this._placeholder = '';
+        this._required = false;
+        this._disabled = false;
+        this._onModelChange = () => { };
+        this._onTouchedChange = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
         this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
         this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     }
-    ngOnInit() {
-        this.multiple = this.multiple || false;
-        this.required = this.required || false;
-        this.treeDataSource.data = this.dataSource;
-        this.dataCount = this.treeControl.dataNodes.length;
-        this.matSelectData.next(this.treeControl.dataNodes);
-        if (this.expandable) {
-            this.treeControl.expandAll();
+    set matSelect(m) {
+        const existsSelect = !isUndefined(this._matSelect);
+        this._matSelect = m;
+        if (!existsSelect) {
+            this._init(this.value);
+        }
+    }
+    clickedOut() {
+        if (!this._matSelect?.panelOpen) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['dataSource']) {
+            this.treeDataSource.data = this.dataSource;
+            this.matSelectData.next(this.treeControl.dataNodes);
+            if (this.dataSource.length > 0) {
+                this._init(this.value);
+            }
         }
+    }
+    ngAfterViewInit() {
         let panelClass = '';
         if (!this.overallSearchEnabled) {
             panelClass = 'cmat-select-search-panel overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom';
@@ -109,15 +137,12 @@ class CmatSelectTreeComponent {
                 });
             }
             if (!opened) {
-                if (this.overallSearchEnabled) {
-                    this._resetFilters();
-                }
                 setTimeout(() => {
                     if (!isNil(this.checklistSelection.selected)) {
                         if (this.multiple) {
                             const findOutNode = [];
                             this.checklistSelection.selected.forEach((node) => {
-                                const parentNode = this.getParentNode(node);
+                                const parentNode = this._getParentNode(node);
                                 if (parentNode && this.checklistSelection.isSelected(parentNode)) {
                                     findOutNode.push(node);
                                 }
@@ -125,83 +150,126 @@ class CmatSelectTreeComponent {
                             findOutNode.forEach((node) => {
                                 this.checklistSelection.deselect(node);
                             });
-                            this._matSelect.writeValue(this.checklistSelection.selected);
-                            if (this._matSelect.value !== this.checklistSelection.selected) {
-                                this._matSelect.value = this.checklistSelection.selected;
-                            }
-                            this._matSelect._onChange(this.checklistSelection.selected);
+                            this.value = this.checklistSelection.selected;
                         }
                         else {
                             if (this.checklistSelection.selected && this.checklistSelection.selected.length > 0) {
-                                this._matSelect.writeValue(this.checklistSelection.selected[0]);
-                                if (this._matSelect.value !== this.checklistSelection.selected[0]) {
-                                    this._matSelect.value = this.checklistSelection.selected[0];
-                                }
-                                this._matSelect._onChange(this.checklistSelection.selected[0]);
+                                this.value = this.checklistSelection.selected[0];
                             }
                         }
+                        this._matSelect.writeValue(this.value);
+                        this._matSelect._onChange(this.value);
                     }
                 }, 200);
             }
         });
-    }
-    ngAfterViewInit() {
         merge(this.overallFilterControl.valueChanges)
             .pipe(takeUntil(this._unsubscribeAll), debounceTime(200))
             .subscribe(() => {
-            const dataClone = JSON.parse(JSON.stringify([...this.dataSource]));
-            const arr = [];
-            for (let i = dataClone.length - 1; i >= 0; i--) {
-                if (!this._applyColumnLevelFilters(dataClone[i], this.overallFilterControl.value.toLowerCase())) {
-                    arr.push(i);
+            if (this._matSelect.panelOpen) {
+                const dataClone = JSON.parse(JSON.stringify([...this.dataSource]));
+                const arr = [];
+                for (let i = dataClone.length - 1; i >= 0; i--) {
+                    if (!this._applyColumnLevelFilters(dataClone[i], this.overallFilterControl.value.toLowerCase())) {
+                        arr.push(i);
+                    }
                 }
+                arr.forEach((v) => { dataClone.splice(v, 1); });
+                this.treeDataSource.data = dataClone;
+                this.matSelectData.next(this.treeControl.dataNodes);
+                if (this.expandable) {
+                    this.treeControl.expandAll();
+                }
+                this._updateSelect(this.checklistSelection.selected);
+                this._changeDetectorRef.detectChanges();
             }
-            arr.forEach((v) => { dataClone.splice(v, 1); });
-            this.treeDataSource.data = dataClone;
-            this.matSelectData.next(this.treeControl.dataNodes);
-            if (this.expandable) {
-                this.treeControl.expandAll();
-            }
-            this._updateSelect(this.checklistSelection.selected);
-            this._cd.detectChanges();
         });
     }
     ngOnDestroy() {
+        this.stateChanges.complete();
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (value !== this.value) {
+            this._value = value;
+            this.stateChanges.next();
+            this._onModelChange(value);
+        }
+    }
+    get empty() {
+        return !this._value;
+    }
+    get errorState() {
+        if (this.ngControl == null)
+            return false;
+        return (this.touched && this.ngControl?.invalid) ?? false;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() { return this._required; }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
     registerOnChange(fn) {
-        const proxyFn = (value) => {
-            fn(value);
-        };
-        this._matSelect.registerOnChange(proxyFn);
+        this._onModelChange = fn;
     }
     registerOnTouched(fn) {
-        this._matSelect.registerOnTouched(fn);
+        this._onTouchedChange = fn;
     }
     setDisabledState(isDisabled) {
-        this._matSelect.setDisabledState(isDisabled);
+        this._matSelect?.setDisabledState(isDisabled);
     }
-    writeValue(value) {
-        if (!isNil(value)) {
-            this._updateChecklistSelection(value);
-        }
-        else {
-            this.checklistSelection.clear();
+    setDescribedByIds(ids) {
+        this._matSelect?.setDescribedByIds(ids);
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this._matSelect?.focus();
         }
-        if (this.multiple) {
-            this._matSelect.writeValue(this.checklistSelection.selected);
-            if (this._matSelect.value !== this.checklistSelection.selected) {
-                this._matSelect.value = this.checklistSelection.selected;
-            }
+    }
+    onFocusIn() {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
         }
-        else {
-            this._matSelect.writeValue(this.checklistSelection.selected[0]);
-            if (this._matSelect.value !== this.checklistSelection.selected[0]) {
-                this._matSelect.value = this.checklistSelection.selected[0];
-            }
+    }
+    onFocusOut(event) {
+        if (!this._matSelect.panel.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this._onTouchedChange();
+            this.stateChanges.next();
         }
     }
+    writeValue(value) {
+        this._init(value);
+    }
     simpleTriggerLabelFn(value) {
         return value.map((node) => {
             if (isNil(node)) {
@@ -229,7 +297,7 @@ class CmatSelectTreeComponent {
     descendantsPartiallySelected(node) {
         const descendants = this.treeControl.getDescendants(node);
         const result = descendants.some(child => this.checklistSelection.isSelected(child));
-        return result && !this.descendantsAllSelected(node);
+        return result && !descendants.every(child => this.checklistSelection.isSelected(child));
     }
     /** Toggle the to-do item selection. Select/deselect all the descendants node */
     todoItemSelectionToggle(event, node) {
@@ -237,12 +305,17 @@ class CmatSelectTreeComponent {
         if (this.multiple) {
             this.checklistSelection.toggle(node);
             const descendants = this.treeControl.getDescendants(node);
-            this.checklistSelection.isSelected(node) ? this.checklistSelection.select(...descendants) : this.checklistSelection.deselect(...descendants);
-            this.checkAllParentsSelection(node);
-            if (this.showToggleAllCheckbox) {
-                this.isIndeterminate = this.checklistSelection.selected.length < this.dataCount && this.checklistSelection.selected.length > 0;
-                this.isChecked = this.checklistSelection.selected.length === this.dataCount;
+            const diffCount = descendants.filter(child => this.checklistSelection.isSelected(child)).length;
+            if (this.checklistSelection.isSelected(node)) {
+                this.checklistSelection.select(...descendants);
+                this.checkCount = this.checkCount + 1 + descendants.length - diffCount;
+            }
+            else {
+                this.checklistSelection.deselect(...descendants);
+                this.checkCount = this.checkCount - 1 - descendants.length;
             }
+            this._checkAllParentsSelection(node);
+            this._updateCheckState();
         }
         else {
             this.checklistSelection.clear();
@@ -255,11 +328,9 @@ class CmatSelectTreeComponent {
         event.stopPropagation();
         if (this.multiple) {
             this.checklistSelection.toggle(node);
-            this.checkAllParentsSelection(node);
-            if (this.showToggleAllCheckbox) {
-                this.isIndeterminate = this.checklistSelection.selected.length < this.dataCount && this.checklistSelection.selected.length > 0;
-                this.isChecked = this.checklistSelection.selected.length === this.dataCount;
-            }
+            this.checklistSelection.isSelected(node) ? this.checkCount += 1 : this.checkCount -= 1;
+            this._checkAllParentsSelection(node);
+            this._updateCheckState();
         }
         else {
             this.checklistSelection.clear();
@@ -269,31 +340,105 @@ class CmatSelectTreeComponent {
     }
     clearSelection() {
         this.checklistSelection.clear();
+        this.isChecked = false;
+        this.isIndeterminate = false;
+        this.checkCount = 0;
+        this.value = null;
+        this._matSelect.writeValue(null);
+        this._matSelect._onChange(null);
+    }
+    toggleSelectAll(selectAllValue) {
+        if (selectAllValue) {
+            this.treeControl.dataNodes.forEach((node) => {
+                this.checklistSelection.select(node);
+            });
+            this.isIndeterminate = false;
+            this.isChecked = true;
+            this.checkCount = this.checklistSelection.selected.length;
+        }
+        else {
+            this.checklistSelection.clear();
+            this.isChecked = false;
+            this.isIndeterminate = false;
+            this.checkCount = 0;
+        }
+    }
+    compareObjects(o1, o2) {
+        return o1 && o2 ? o1?.name === o2?.name && o1?.id === o2?.id : o1 === o2;
+    }
+    trackByFn(index, item) {
+        return index || item;
+    }
+    _init(v) {
+        if (this.dataSource.length > 0 && this.treeControl.dataNodes && this._matSelect) {
+            if (this.expandable) {
+                this.treeControl.expandAll();
+            }
+            if (!isNil(v)) {
+                this._updateChecklistSelection(v);
+            }
+            else {
+                this.checklistSelection.clear();
+            }
+            if (v && v.length > 0) {
+                if (this.multiple) {
+                    const findOutNode = [];
+                    this.checklistSelection.selected.forEach((node) => {
+                        const parentNode = this._getParentNode(node);
+                        if (parentNode && this.checklistSelection.isSelected(parentNode)) {
+                            findOutNode.push(node);
+                        }
+                    });
+                    findOutNode.forEach((node) => {
+                        this.checklistSelection.deselect(node);
+                    });
+                    this.value = this.checklistSelection.selected;
+                    this.checkCount = this.checklistSelection.selected.length;
+                }
+                else {
+                    this.value = this.checklistSelection.selected;
+                    this.checkCount = 1;
+                }
+            }
+            else {
+                this.value = v;
+                this.checkCount = 0;
+            }
+            this._matSelect.writeValue(this.value);
+            this._matSelect._onChange(this.value);
+            this._updateCheckState();
+            this._changeDetectorRef.markForCheck();
+        }
+        else {
+            this.value = v;
+        }
     }
     /* Checks all the parents when a leaf node is selected/unselected */
-    checkAllParentsSelection(node) {
-        let parent = this.getParentNode(node);
+    _checkAllParentsSelection(node) {
+        let parent = this._getParentNode(node);
         while (parent) {
             parent.expandable = true;
             this.treeControl.expand(parent);
-            this.checkRootNodeSelection(parent);
-            parent = this.getParentNode(parent);
+            this._checkRootNodeSelection(parent);
+            parent = this._getParentNode(parent);
         }
     }
     /** Check root node checked state and change it accordingly */
-    checkRootNodeSelection(node) {
+    _checkRootNodeSelection(node) {
         const nodeSelected = this.checklistSelection.isSelected(node);
         const descendants = this.treeControl.getDescendants(node);
         const descAllSelected = descendants.every(child => this.checklistSelection.isSelected(child));
         if (nodeSelected && !descAllSelected) {
             this.checklistSelection.deselect(node);
+            this.checkCount -= 1;
         }
         else if (!nodeSelected && (descAllSelected || descendants.length === 0)) {
             this.checklistSelection.select(node);
+            this.checkCount += 1;
         }
     }
     /* Get the parent node of a node */
-    getParentNode(node) {
+    _getParentNode(node) {
         const currentLevel = this.getLevel(node);
         if (currentLevel < 1) {
             return null;
@@ -307,27 +452,6 @@ class CmatSelectTreeComponent {
         }
         return null;
     }
-    toggleSelectAll(selectAllValue) {
-        if (selectAllValue) {
-            this.treeControl.dataNodes.forEach((node) => {
-                this.checklistSelection.select(node);
-                this.checkAllParentsSelection(node);
-            });
-            this.isIndeterminate = this.checklistSelection.selected.length < this.dataCount && this.checklistSelection.selected.length > 0;
-            this.isChecked = this.checklistSelection.selected.length === this.dataCount;
-        }
-        else {
-            this.checklistSelection.clear();
-            this.isChecked = false;
-            this.isIndeterminate = false;
-        }
-    }
-    compareObjects(o1, o2) {
-        return o1 && o2 ? o1?.name === o2?.name && o1?.id === o2?.id : o1 === o2;
-    }
-    trackByFn(index, item) {
-        return index || item;
-    }
     _updateChecklistSelection(value) {
         this.checklistSelection.clear();
         if (!isNil(value)) {
@@ -344,6 +468,7 @@ class CmatSelectTreeComponent {
     _updateSelect(value) {
         if (!isNil(value)) {
             const valueArray = !Array.isArray(value) ? [value] : value;
+            this.checkCount = 0;
             if (this.overallSearchEnabled) //有搜索功能，转化选中节点为当前数据源节点
              {
                 valueArray.forEach((item) => {
@@ -351,19 +476,17 @@ class CmatSelectTreeComponent {
                     if (isNil(nodeFound)) {
                         return;
                     }
+                    this.checkCount += 1;
                     this.checklistSelection.deselect(item);
                     this.checklistSelection.select(nodeFound);
                 });
             }
             if (this.multiple) {
                 this.checklistSelection.selected.forEach((item) => {
-                    this.checkAllParentsSelection(item);
+                    this._checkAllParentsSelection(item);
                 });
             }
-            if (this.showToggleAllCheckbox) {
-                this.isIndeterminate = this.checklistSelection.selected.length < this.dataCount && this.checklistSelection.selected.length > 0;
-                this.isChecked = this.checklistSelection.selected.length === this.dataCount;
-            }
+            this._updateCheckState();
         }
     }
     _applyColumnLevelFilters(node, filter) {
@@ -386,46 +509,36 @@ class CmatSelectTreeComponent {
         }
         return result;
     }
-    _resetFilters() {
-        if (this.overallSearchEnabled) {
-            this.overallFilterControl.setValue('');
+    _updateCheckState() {
+        if (this.showToggleAllCheckbox && this.dataSource.length > 0) {
+            this.isIndeterminate = this.checkCount < this.treeControl.dataNodes.length && this.checkCount > 0;
+            this.isChecked = this.checkCount === this.treeControl.dataNodes.length && this.checkCount > 0;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatSelectTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatSelectTreeComponent, isStandalone: true, selector: "cmat-select-tree", inputs: { dataSource: "dataSource", showLabel: "showLabel", noEntriesFoundLabel: "noEntriesFoundLabel", showNoFoundLabel: "showNoFoundLabel", placeholder: "placeholder", prefixIcon: "prefixIcon", multiple: "multiple", required: "required", overallSearchEnabled: "overallSearchEnabled", canNull: "canNull", customTriggerLabelFn: "customTriggerLabelFn", customTriggerLabelTemplate: "customTriggerLabelTemplate", expandable: "expandable", showToggleAllCheckbox: "showToggleAllCheckbox" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CmatSelectTreeComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "_matSelect", first: true, predicate: ["componentSelect"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field class=\"w-full\">\n  @if (showLabel) {\n    <mat-label>{{placeholder}}</mat-label>\n  }\n  <mat-icon class=\"icon-size-5\" [svgIcon]=\"prefixIcon\" matPrefix></mat-icon>\n  <mat-select #componentSelect [formControl]=\"selectControl\" [placeholder]=\"placeholder\" [multiple]=\"multiple\" [required]=\"required\"\n    [compareWith]=\"compareObjects\" panelClass=\"scrollbar-custom\">\n    <mat-select-trigger>\n      @if (!customTriggerLabelFn) {\n        {{simpleTriggerLabelFn(checklistSelection.selected)}}\n      }\n      @else{\n        {{customTriggerLabelFn}}\n      }\n    </mat-select-trigger>\n\n    <div>\n      @if (overallSearchEnabled) {\n        <mat-option>\n          <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n            [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n            (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox\">\n          </cmat-select-search>\n        </mat-option>\n      }\n      @if (canNull&&treeDataSource.data.length!==0) {\n        <mat-option (click)=\"clearSelection()\">\u7A7A</mat-option>\n      }\n      @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n        <mat-option class=\"hidden\"\n        [value]=\"selectData\">{{selectData.name}}</mat-option>\n      }\n\n      <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n          [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n          (click)=\"todoLeafItemSelectionToggle($event,node)\">\n          <button type=\"button\" mat-icon-button disabled>\n\n          </button>\n          @if (multiple) {\n            <mat-checkbox class=\"checklist-leaf-node text-current\"\n            [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n          }\n          @if (!multiple) {\n            <span class=\"text-current\">{{node.name}}</span>\n          }\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n          [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n          (click)=\"todoItemSelectionToggle($event,node)\">\n          <button type=\"button\" mat-icon-button matTreeNodeToggle\n            [attr.aria-label]=\"'toggle ' + node.filename\">\n            <mat-icon class=\"mat-icon-rtl-mirror\"\n              [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n            </mat-icon>\n          </button>\n          @if (multiple) {\n            <mat-checkbox [checked]=\"descendantsAllSelected(node)\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n          }\n          @if (!multiple) {\n            <span class=\"text-current\">{{node.name}}</span>\n          }\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-select>\n</mat-form-field>", styles: ["cmat-select-tree{display:block;z-index:101}cmat-select-tree.hidden{display:none}cmat-select-tree .cmat-select-search-inner{overflow:hidden;position:fixed;line-height:45px;display:flex;flex-direction:row}cmat-select-tree .cmat-select-search-inner span{display:flex;place-items:center}cmat-select-tree .cmat-select-search-no-entries-found{width:100%;text-align:center;border-radius:.25rem;box-shadow:0 2px 8px #00000059}cmat-select-tree .cmat-select-search-input{padding-top:0;padding-bottom:0;height:48px;line-height:48px}cmat-select-tree .cmat-select-search-clear{top:3px;margin:0 10px}cmat-select-tree .cmat-select-search-icon{margin-right:0;margin-left:10px}cmat-select-tree .mat-mdc-option-pseudo-checkbox{display:none}cmat-select-tree .mat-tree-node{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i6.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i6.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatSelectTreeComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatSelectTreeComponent, isStandalone: true, selector: "cmat-select-tree", inputs: { id: "id", dataSource: "dataSource", noEntriesFoundLabel: "noEntriesFoundLabel", showNoFoundLabel: "showNoFoundLabel", multiple: "multiple", overallSearchEnabled: "overallSearchEnabled", canNull: "canNull", customTriggerLabelFn: "customTriggerLabelFn", customTriggerLabelTemplate: "customTriggerLabelTemplate", expandable: "expandable", showToggleAllCheckbox: "showToggleAllCheckbox", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, host: { listeners: { "document:click": "clickedOut()" }, properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatSelectTreeComponent }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["componentSelect"], descendants: true }], exportAs: ["cmatSelectTree"], usesOnChanges: true, ngImport: i0, template: "@if(multiple){\n<mat-select #componentSelect [placeholder]=\"placeholder\" multiple [required]=\"required\" [formControl]=\"selectControl\"\n  [compareWith]=\"compareObjects\" (focusin)=\"onFocusIn()\"\n  panelClass=\"overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n  <mat-select-trigger>\n    @if (!customTriggerLabelFn) {\n    {{simpleTriggerLabelFn(checklistSelection.selected)}}\n    }\n    @else{\n    {{customTriggerLabelFn}}\n    }\n  </mat-select-trigger>\n\n  <div (focusout)=\"onFocusOut($event)\">\n    @if (overallSearchEnabled) {\n    <mat-option>\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox&&multiple\">\n      </cmat-select-search>\n    </mat-option>\n    }\n    @if (canNull&&treeDataSource.data.length!==0) {\n    <mat-option (click)=\"clearSelection()\" class=\"pl-10\">\u7A7A</mat-option>\n    }\n    @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n    <mat-option class=\"hidden\" [value]=\"selectData\">{{selectData.name}}</mat-option>\n    }\n\n    <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n        (click)=\"todoLeafItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button disabled>\n\n        </button>\n        @if (multiple) {\n        <mat-checkbox class=\"checklist-leaf-node text-current\" [color]=\"'primary'\"\n          [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n        }\n        @else{\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\" (click)=\"todoItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'toggle ' + node.name\">\n          <mat-icon class=\"mat-icon-rtl-mirror\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n          </mat-icon>\n        </button>\n        @if (multiple) {\n        <mat-checkbox [checked]=\"descendantsAllSelected(node)\" [color]=\"'primary'\"\n          [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n        }\n        @else {\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n    </mat-tree>\n  </div>\n</mat-select>\n}\n@else {\n<mat-select #componentSelect [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\"\n  [compareWith]=\"compareObjects\" (focusin)=\"onFocusIn()\"\n  panelClass=\"overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n  <mat-select-trigger>\n    @if (!customTriggerLabelFn) {\n    {{simpleTriggerLabelFn(checklistSelection.selected)}}\n    }\n    @else{\n    {{customTriggerLabelFn}}\n    }\n  </mat-select-trigger>\n\n  <div (focusout)=\"onFocusOut($event)\">\n    @if (overallSearchEnabled) {\n    <mat-option>\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox&&multiple\">\n      </cmat-select-search>\n    </mat-option>\n    }\n    @if (canNull&&treeDataSource.data.length!==0) {\n    <mat-option (click)=\"clearSelection()\" class=\"pl-10\">\u7A7A</mat-option>\n    }\n    @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n    <mat-option class=\"hidden\" [value]=\"selectData\">{{selectData.name}}</mat-option>\n    }\n\n    <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n        (click)=\"todoLeafItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button disabled>\n\n        </button>\n        @if (multiple) {\n        <mat-checkbox class=\"checklist-leaf-node text-current\" [color]=\"'primary'\"\n          [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n        }\n        @else{\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\" (click)=\"todoItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'toggle ' + node.name\">\n          <mat-icon class=\"mat-icon-rtl-mirror\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n          </mat-icon>\n        </button>\n        @if (multiple) {\n        <mat-checkbox [checked]=\"descendantsAllSelected(node)\" [color]=\"'primary'\"\n          [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n        }\n        @else {\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n    </mat-tree>\n  </div>\n</mat-select>\n}", styles: ["cmat-select-tree{display:block;width:100%;z-index:101}cmat-select-tree.hidden{display:none}cmat-select-tree .cmat-select-search-inner{overflow:hidden;position:fixed;line-height:45px;display:flex;flex-direction:row}cmat-select-tree .cmat-select-search-inner span{display:flex;place-items:center}cmat-select-tree .cmat-select-search-no-entries-found{width:100%;text-align:center;border-radius:.25rem;box-shadow:0 2px 8px #00000059}cmat-select-tree .cmat-select-search-input{padding-top:0;padding-bottom:0;height:48px;line-height:48px}cmat-select-tree .cmat-select-search-clear{top:3px;margin:0 10px}cmat-select-tree .cmat-select-search-icon{margin-right:0;margin-left:10px}cmat-select-tree .mat-mdc-option-pseudo-checkbox{display:none}cmat-select-tree .mat-tree-node{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatSelectTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatSelectTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-select-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CmatSelectTreeComponent),
-                            multi: true
-                        }
-                    ], standalone: true, imports: [MatFormFieldModule, MatIconModule, MatSelectModule, CmatSelectSearchComponent, FormsModule,
-                        ReactiveFormsModule, MatTreeModule, NgClass, MatButtonModule, MatCheckboxModule, AsyncPipe, NgStyle], template: "<mat-form-field class=\"w-full\">\n  @if (showLabel) {\n    <mat-label>{{placeholder}}</mat-label>\n  }\n  <mat-icon class=\"icon-size-5\" [svgIcon]=\"prefixIcon\" matPrefix></mat-icon>\n  <mat-select #componentSelect [formControl]=\"selectControl\" [placeholder]=\"placeholder\" [multiple]=\"multiple\" [required]=\"required\"\n    [compareWith]=\"compareObjects\" panelClass=\"scrollbar-custom\">\n    <mat-select-trigger>\n      @if (!customTriggerLabelFn) {\n        {{simpleTriggerLabelFn(checklistSelection.selected)}}\n      }\n      @else{\n        {{customTriggerLabelFn}}\n      }\n    </mat-select-trigger>\n\n    <div>\n      @if (overallSearchEnabled) {\n        <mat-option>\n          <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n            [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n            [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n            (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox\">\n          </cmat-select-search>\n        </mat-option>\n      }\n      @if (canNull&&treeDataSource.data.length!==0) {\n        <mat-option (click)=\"clearSelection()\">\u7A7A</mat-option>\n      }\n      @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n        <mat-option class=\"hidden\"\n        [value]=\"selectData\">{{selectData.name}}</mat-option>\n      }\n\n      <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n          [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n          (click)=\"todoLeafItemSelectionToggle($event,node)\">\n          <button type=\"button\" mat-icon-button disabled>\n\n          </button>\n          @if (multiple) {\n            <mat-checkbox class=\"checklist-leaf-node text-current\"\n            [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n          }\n          @if (!multiple) {\n            <span class=\"text-current\">{{node.name}}</span>\n          }\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n          [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n          (click)=\"todoItemSelectionToggle($event,node)\">\n          <button type=\"button\" mat-icon-button matTreeNodeToggle\n            [attr.aria-label]=\"'toggle ' + node.filename\">\n            <mat-icon class=\"mat-icon-rtl-mirror\"\n              [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n            </mat-icon>\n          </button>\n          @if (multiple) {\n            <mat-checkbox [checked]=\"descendantsAllSelected(node)\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n          }\n          @if (!multiple) {\n            <span class=\"text-current\">{{node.name}}</span>\n          }\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-select>\n</mat-form-field>", styles: ["cmat-select-tree{display:block;z-index:101}cmat-select-tree.hidden{display:none}cmat-select-tree .cmat-select-search-inner{overflow:hidden;position:fixed;line-height:45px;display:flex;flex-direction:row}cmat-select-tree .cmat-select-search-inner span{display:flex;place-items:center}cmat-select-tree .cmat-select-search-no-entries-found{width:100%;text-align:center;border-radius:.25rem;box-shadow:0 2px 8px #00000059}cmat-select-tree .cmat-select-search-input{padding-top:0;padding-bottom:0;height:48px;line-height:48px}cmat-select-tree .cmat-select-search-clear{top:3px;margin:0 10px}cmat-select-tree .cmat-select-search-icon{margin-right:0;margin-left:10px}cmat-select-tree .mat-mdc-option-pseudo-checkbox{display:none}cmat-select-tree .mat-tree-node{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dataSource: [{
+            args: [{ selector: 'cmat-select-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MatFormFieldControl, useExisting: CmatSelectTreeComponent }], exportAs: 'cmatSelectTree', standalone: true, imports: [MatIconModule, MatSelectModule, CmatSelectSearchComponent,
+                        ReactiveFormsModule, MatTreeModule, NgClass, MatButtonModule, MatCheckboxModule, AsyncPipe, NgStyle], template: "@if(multiple){\n<mat-select #componentSelect [placeholder]=\"placeholder\" multiple [required]=\"required\" [formControl]=\"selectControl\"\n  [compareWith]=\"compareObjects\" (focusin)=\"onFocusIn()\"\n  panelClass=\"overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n  <mat-select-trigger>\n    @if (!customTriggerLabelFn) {\n    {{simpleTriggerLabelFn(checklistSelection.selected)}}\n    }\n    @else{\n    {{customTriggerLabelFn}}\n    }\n  </mat-select-trigger>\n\n  <div (focusout)=\"onFocusOut($event)\">\n    @if (overallSearchEnabled) {\n    <mat-option>\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox&&multiple\">\n      </cmat-select-search>\n    </mat-option>\n    }\n    @if (canNull&&treeDataSource.data.length!==0) {\n    <mat-option (click)=\"clearSelection()\" class=\"pl-10\">\u7A7A</mat-option>\n    }\n    @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n    <mat-option class=\"hidden\" [value]=\"selectData\">{{selectData.name}}</mat-option>\n    }\n\n    <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n        (click)=\"todoLeafItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button disabled>\n\n        </button>\n        @if (multiple) {\n        <mat-checkbox class=\"checklist-leaf-node text-current\" [color]=\"'primary'\"\n          [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n        }\n        @else{\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\" (click)=\"todoItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'toggle ' + node.name\">\n          <mat-icon class=\"mat-icon-rtl-mirror\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n          </mat-icon>\n        </button>\n        @if (multiple) {\n        <mat-checkbox [checked]=\"descendantsAllSelected(node)\" [color]=\"'primary'\"\n          [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n        }\n        @else {\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n    </mat-tree>\n  </div>\n</mat-select>\n}\n@else {\n<mat-select #componentSelect [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\"\n  [compareWith]=\"compareObjects\" (focusin)=\"onFocusIn()\"\n  panelClass=\"overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n  <mat-select-trigger>\n    @if (!customTriggerLabelFn) {\n    {{simpleTriggerLabelFn(checklistSelection.selected)}}\n    }\n    @else{\n    {{customTriggerLabelFn}}\n    }\n  </mat-select-trigger>\n\n  <div (focusout)=\"onFocusOut($event)\">\n    @if (overallSearchEnabled) {\n    <mat-option>\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"true\"\n        [toggleAllCheckboxIndeterminate]=\"isIndeterminate\" [toggleAllCheckboxChecked]=\"isChecked\"\n        (toggleAll)=\"toggleSelectAll($event)\" [showToggleAllCheckbox]=\"showToggleAllCheckbox&&multiple\">\n      </cmat-select-search>\n    </mat-option>\n    }\n    @if (canNull&&treeDataSource.data.length!==0) {\n    <mat-option (click)=\"clearSelection()\" class=\"pl-10\">\u7A7A</mat-option>\n    }\n    @for (selectData of matSelectData | async ; track trackByFn($index, selectData)) {\n    <mat-option class=\"hidden\" [value]=\"selectData\">{{selectData.name}}</mat-option>\n    }\n\n    <mat-tree [dataSource]=\"treeDataSource\" [treeControl]=\"treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\"\n        (click)=\"todoLeafItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button disabled>\n\n        </button>\n        @if (multiple) {\n        <mat-checkbox class=\"checklist-leaf-node text-current\" [color]=\"'primary'\"\n          [checked]=\"checklistSelection.isSelected(node)\">{{node.name}}</mat-checkbox>\n        }\n        @else{\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n        [ngClass]=\"checklistSelection.isSelected(node)?'selected':''\" (click)=\"todoItemSelectionToggle($event,node)\">\n        <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'toggle ' + node.name\">\n          <mat-icon class=\"mat-icon-rtl-mirror\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'\">\n          </mat-icon>\n        </button>\n        @if (multiple) {\n        <mat-checkbox [checked]=\"descendantsAllSelected(node)\" [color]=\"'primary'\"\n          [indeterminate]=\"descendantsPartiallySelected(node)\" class=\"text-current\">{{node.name}}</mat-checkbox>\n        }\n        @else {\n        <span class=\"text-current\">{{node.name}}</span>\n        }\n      </mat-tree-node>\n    </mat-tree>\n  </div>\n</mat-select>\n}", styles: ["cmat-select-tree{display:block;width:100%;z-index:101}cmat-select-tree.hidden{display:none}cmat-select-tree .cmat-select-search-inner{overflow:hidden;position:fixed;line-height:45px;display:flex;flex-direction:row}cmat-select-tree .cmat-select-search-inner span{display:flex;place-items:center}cmat-select-tree .cmat-select-search-no-entries-found{width:100%;text-align:center;border-radius:.25rem;box-shadow:0 2px 8px #00000059}cmat-select-tree .cmat-select-search-input{padding-top:0;padding-bottom:0;height:48px;line-height:48px}cmat-select-tree .cmat-select-search-clear{top:3px;margin:0 10px}cmat-select-tree .cmat-select-search-icon{margin-right:0;margin-left:10px}cmat-select-tree .mat-mdc-option-pseudo-checkbox{display:none}cmat-select-tree .mat-tree-node{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
                 type: Input
-            }], showLabel: [{
+            }], dataSource: [{
                 type: Input
             }], noEntriesFoundLabel: [{
                 type: Input
             }], showNoFoundLabel: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }], prefixIcon: [{
-                type: Input
             }], multiple: [{
                 type: Input
-            }], required: [{
-                type: Input
             }], overallSearchEnabled: [{
                 type: Input
             }], canNull: [{
@@ -438,9 +551,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], showToggleAllCheckbox: [{
                 type: Input
-            }], _matSelect: [{
+            }], matSelect: [{
                 type: ViewChild,
-                args: ['componentSelect', { static: true }]
+                args: ['componentSelect', { static: false }]
+            }], clickedOut: [{
+                type: HostListener,
+                args: ['document:click']
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class CmatSelectTreeNode {