cmat 0.0.3 → 0.0.4

package/fesm2022/cmat-components-transfer-picker.mjs

@@ -1,20 +1,25 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { NgFor, NgClass, NgIf } from '@angular/common';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i5 from '@angular/cdk/portal';
+import * as i6 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
+import * as i5$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { BehaviorSubject, Subject, of } from 'rxjs';
 import * as i4 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime, distinctUntilChanged, takeUntil, filter } from 'rxjs/operators';
 import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i3$2 from '@angular/material/tree';
@@ -23,7 +28,7 @@ import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i4$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i6 from '@angular/cdk/scrolling';
+import * as i7 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -31,6 +36,7 @@ import { MatListModule } from '@angular/material/list';
 class CmatTransferPickerService {
     constructor() {
         this.dataSourceChange = new BehaviorSubject([]);
+        this.refreshDataSourceChange = new BehaviorSubject(true);
         this.filtersChange = new BehaviorSubject([]);
         this.sourceOptionsChange = new BehaviorSubject(void 0);
         this.selectedValuesChange = new BehaviorSubject([]);
@@ -83,7 +89,7 @@ class CmatTransferPickerService {
                 this._filterDataSourceByType(this._originalDataSource, 'Keyword');
             }
             else {
-                this.resetDataSource();
+                this.resetDataSource(false);
             }
             return;
         }
@@ -96,14 +102,15 @@ class CmatTransferPickerService {
                 this._filterDataSourceByType(this._originalDataSource, 'Filters');
             }
             else {
-                this.resetDataSource();
+                this.resetDataSource(false);
             }
             return;
         }
     }
-    resetDataSource() {
+    resetDataSource(clear) {
         this.dataSource = this._originalDataSource;
         this._filteredDataSource = [];
+        this.refreshDataSourceChange.next(clear);
     }
     _filterDataSourceByType(dataSource, type) {
         this._filteredDataSource = [];
@@ -116,6 +123,7 @@ class CmatTransferPickerService {
                 break;
         }
         this.dataSource = this._filteredDataSource;
+        this.refreshDataSourceChange.next(false);
     }
     _setFilteredDataSourceByFilters(dataSource) {
         dataSource.map((data) => {
@@ -149,10 +157,10 @@ class CmatTransferPickerService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -180,6 +188,12 @@ class CmatTransferPickerFilterComponent {
             {
                 originX: 'end', originY: 'bottom', overlayX: 'end',
                 overlayY: 'top', offsetX: 5
+            }, {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetX: -5
             }
         ]);
         this.overlayRef = this._overlay.create(config);
@@ -216,12 +230,12 @@ class CmatTransferPickerFilterComponent {
     trackByFn(index, item) {
         return index || item.label;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerFilterComponent, deps: [{ token: i1.Overlay }, { token: CmatTransferPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatTransferPickerFilterComponent, isStandalone: true, selector: "cmat-transfer-picker-filter", inputs: { filters: "filters" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }], exportAs: ["cmatTransferPickerFilter"], ngImport: i0, template: "<button type=\"button\" class=\"mr-2 mt-1\" mat-icon-button (click)=\"toggleFilter()\" cdk-overlay-origin>\n    <mat-icon svgIcon=\"mat_solid:filter_list\"></mat-icon>\n</button>\n<ng-template cdk-portal #filterTemplate=\"cdkPortal\">\n    <div\n        class=\"filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\n        <mat-button-toggle-group name=\"condition\" (change)=\"onConditionChange($event.value)\">\n            <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\n            <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <div class=\"chip-list\">\n            <div class=\"chip-wrapper\" role=\"presentation\" *ngFor=\"let item of filters;trackBy: trackByFn\"\n                (click)=\"onFilterClick(item)\">\n                <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\n            </div>\n        </div>\n    </div>\n</ng-template>", styles: [".filter-panel{min-width:276px;padding:10px 0}.filter-panel .mat-button-toggle-group{font-size:12px;margin-right:15px;margin-bottom:20px;align-self:flex-end}.filter-panel .mat-button-toggle-group .mat-button-toggle-label-content{line-height:1.8}.filter-panel .chip-list{width:276px;@apply flex flex-row flex-wrap justify-between box-border;}.filter-panel .chip-list:after{content:\"\";@apply flex-1 max-w-1/3;}.filter-panel .chip-list .chip-wrapper{@apply flex-1 box-border max-w-1/3 text-center;margin-bottom:20px}.filter-panel .chip-list .chip-wrapper .chip{@apply inline-block min-w-1/2 cursor-pointer text-secondary bg-default;padding:5px 10px;font-size:12px}.filter-panel .chip-list .chip-wrapper .chip.selected{@apply bg-primary bg-opacity-50;}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i5.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerFilterComponent, deps: [{ token: i1.Overlay }, { token: CmatTransferPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatTransferPickerFilterComponent, isStandalone: true, selector: "cmat-transfer-picker-filter", inputs: { filters: "filters" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }], exportAs: ["cmatTransferPickerFilter"], ngImport: i0, template: "<button type=\"button\" class=\"mr-2 mt-1\" mat-icon-button (click)=\"toggleFilter()\" cdk-overlay-origin>\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\n</button>\n<ng-template cdk-portal #filterTemplate=\"cdkPortal\">\n  <div\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\n    <mat-button-toggle-group name=\"condition\" (change)=\"onConditionChange($event.value)\">\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <div class=\"chip-list\">\n      @for (item of filters; track trackByFn($index, item)) {\n        <div class=\"chip-wrapper\" role=\"presentation\"\n          (click)=\"onFilterClick(item)\">\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0}.transfer-picker-filter-panel .mat-button-toggle-group{font-size:12px;margin-right:15px;margin-bottom:20px;align-self:flex-end}.transfer-picker-filter-panel .mat-button-toggle-group .mat-button-toggle-label-content{line-height:1.8}.transfer-picker-filter-panel .chip-list{width:276px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;box-sizing:border-box}.transfer-picker-filter-panel .chip-list:after{content:\"\";flex:1 1 0%;max-width:33.333333%}.transfer-picker-filter-panel .chip-list .chip-wrapper{flex:1 1 0%;box-sizing:border-box;max-width:33.333333%;text-align:center;margin-bottom:20px}.transfer-picker-filter-panel .chip-list .chip-wrapper .chip{display:inline-block;min-width:50%;cursor:pointer;padding:5px 10px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i6.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-filter', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerFilter', standalone: true, imports: [MatButtonToggleModule, MatIconModule, NgFor, NgClass, PortalModule], template: "<button type=\"button\" class=\"mr-2 mt-1\" mat-icon-button (click)=\"toggleFilter()\" cdk-overlay-origin>\n    <mat-icon svgIcon=\"mat_solid:filter_list\"></mat-icon>\n</button>\n<ng-template cdk-portal #filterTemplate=\"cdkPortal\">\n    <div\n        class=\"filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\n        <mat-button-toggle-group name=\"condition\" (change)=\"onConditionChange($event.value)\">\n            <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\n            <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\n        </mat-button-toggle-group>\n\n        <div class=\"chip-list\">\n            <div class=\"chip-wrapper\" role=\"presentation\" *ngFor=\"let item of filters;trackBy: trackByFn\"\n                (click)=\"onFilterClick(item)\">\n                <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\n            </div>\n        </div>\n    </div>\n</ng-template>", styles: [".filter-panel{min-width:276px;padding:10px 0}.filter-panel .mat-button-toggle-group{font-size:12px;margin-right:15px;margin-bottom:20px;align-self:flex-end}.filter-panel .mat-button-toggle-group .mat-button-toggle-label-content{line-height:1.8}.filter-panel .chip-list{width:276px;@apply flex flex-row flex-wrap justify-between box-border;}.filter-panel .chip-list:after{content:\"\";@apply flex-1 max-w-1/3;}.filter-panel .chip-list .chip-wrapper{@apply flex-1 box-border max-w-1/3 text-center;margin-bottom:20px}.filter-panel .chip-list .chip-wrapper .chip{@apply inline-block min-w-1/2 cursor-pointer text-secondary bg-default;padding:5px 10px;font-size:12px}.filter-panel .chip-list .chip-wrapper .chip.selected{@apply bg-primary bg-opacity-50;}\n"] }]
+            args: [{ selector: 'cmat-transfer-picker-filter', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerFilter', standalone: true, imports: [MatButtonToggleModule, MatIconModule, CommonModule, PortalModule, MatButtonModule, OverlayModule], template: "<button type=\"button\" class=\"mr-2 mt-1\" mat-icon-button (click)=\"toggleFilter()\" cdk-overlay-origin>\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\n</button>\n<ng-template cdk-portal #filterTemplate=\"cdkPortal\">\n  <div\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\n    <mat-button-toggle-group name=\"condition\" (change)=\"onConditionChange($event.value)\">\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\n    </mat-button-toggle-group>\n\n    <div class=\"chip-list\">\n      @for (item of filters; track trackByFn($index, item)) {\n        <div class=\"chip-wrapper\" role=\"presentation\"\n          (click)=\"onFilterClick(item)\">\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0}.transfer-picker-filter-panel .mat-button-toggle-group{font-size:12px;margin-right:15px;margin-bottom:20px;align-self:flex-end}.transfer-picker-filter-panel .mat-button-toggle-group .mat-button-toggle-label-content{line-height:1.8}.transfer-picker-filter-panel .chip-list{width:276px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;box-sizing:border-box}.transfer-picker-filter-panel .chip-list:after{content:\"\";flex:1 1 0%;max-width:33.333333%}.transfer-picker-filter-panel .chip-list .chip-wrapper{flex:1 1 0%;box-sizing:border-box;max-width:33.333333%;text-align:center;margin-bottom:20px}.transfer-picker-filter-panel .chip-list .chip-wrapper .chip{display:inline-block;min-width:50%;cursor:pointer;padding:5px 10px;font-size:12px}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: CmatTransferPickerService }], propDecorators: { filters: [{
                 type: Input
             }], overlayOrigin: [{
@@ -246,12 +260,12 @@ class CmatTransferPickerSearchComponent {
     reset() {
         this.keyword.setValue('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerSearchComponent, deps: [{ token: CmatTransferPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatTransferPickerSearchComponent, isStandalone: true, selector: "cmat-transfer-picker-search", inputs: { searchPlaceholder: "searchPlaceholder" }, exportAs: ["cmatTransferPickerSearch"], ngImport: i0, template: "<mat-form-field>\n    <input matInput type=\"text\" placeholder=\"{{searchPlaceholder}}\" [formControl]=\"keyword\">\n    <button type=\"button\" mat-button *ngIf=\"keyword.value\" matSuffix mat-icon-button (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\n    </button>\n</mat-form-field>", styles: ["cmat-transfer-picker-search{@apply flex flex-row flex-nowrap justify-center items-center;}cmat-transfer-picker-search .mat-mdc-form-field{width:88%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerSearchComponent, deps: [{ token: CmatTransferPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatTransferPickerSearchComponent, isStandalone: true, selector: "cmat-transfer-picker-search", inputs: { searchPlaceholder: "searchPlaceholder" }, exportAs: ["cmatTransferPickerSearch"], ngImport: i0, template: "<mat-form-field>\n  <input matInput type=\"text\" placeholder=\"{{searchPlaceholder}}\" [formControl]=\"keyword\">\n  @if (keyword.value) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"reset()\">\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\n    </button>\n  }\n</mat-form-field>", styles: ["cmat-transfer-picker-search{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center}cmat-transfer-picker-search .mat-mdc-form-field{width:88%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-search', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSearch', standalone: true, imports: [MatFormFieldModule, MatIconModule, ReactiveFormsModule], template: "<mat-form-field>\n    <input matInput type=\"text\" placeholder=\"{{searchPlaceholder}}\" [formControl]=\"keyword\">\n    <button type=\"button\" mat-button *ngIf=\"keyword.value\" matSuffix mat-icon-button (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\n    </button>\n</mat-form-field>", styles: ["cmat-transfer-picker-search{@apply flex flex-row flex-nowrap justify-center items-center;}cmat-transfer-picker-search .mat-mdc-form-field{width:88%}\n"] }]
+            args: [{ selector: 'cmat-transfer-picker-search', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSearch', standalone: true, imports: [MatFormFieldModule, MatIconModule, ReactiveFormsModule, MatButtonModule, MatInputModule], template: "<mat-form-field>\n  <input matInput type=\"text\" placeholder=\"{{searchPlaceholder}}\" [formControl]=\"keyword\">\n  @if (keyword.value) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"reset()\">\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\n    </button>\n  }\n</mat-form-field>", styles: ["cmat-transfer-picker-search{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center}cmat-transfer-picker-search .mat-mdc-form-field{width:88%}\n"] }]
         }], ctorParameters: () => [{ type: CmatTransferPickerService }], propDecorators: { searchPlaceholder: [{
                 type: Input
             }] } });
@@ -274,8 +288,9 @@ var CmatTransferFilterCondition;
 })(CmatTransferFilterCondition || (CmatTransferFilterCondition = {}));
 
 class CmatTransferPickerSourceComponent {
-    constructor(_service) {
+    constructor(_service, _changeDetectorRef) {
         this._service = _service;
+        this._changeDetectorRef = _changeDetectorRef;
         /** Map from nested node to flattened node. This helps us to keep the same object for selection */
         this.nestedNodeMap = new Map();
         /** The selection for checklist */
@@ -284,7 +299,7 @@ class CmatTransferPickerSourceComponent {
         this.hasChild = (_, _nodeData) => _nodeData.expandable;
         this._getLevel = (node) => node.level;
         this._isExpandable = (node) => node.expandable;
-        this._getChildren = (node) => of(node.children);
+        this._getChildren = (node) => of(node.children ?? []);
         /**
          * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
          */
@@ -300,7 +315,6 @@ class CmatTransferPickerSourceComponent {
             this.nestedNodeMap.set(node, flatNode);
             return flatNode;
         };
-        this.checklistChange = new EventEmitter();
     }
     ngOnInit() {
         this.treeFlattener = new MatTreeFlattener(this._transformer, this._getLevel, this._isExpandable, this._getChildren);
@@ -311,7 +325,25 @@ class CmatTransferPickerSourceComponent {
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((data) => {
             this.dataSource.data = data;
-            this.checklistSelection.clear();
+            this._changeDetectorRef.markForCheck();
+        });
+        this._service.refreshDataSourceChange.pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((state) => {
+            if (state) {
+                this.checklistSelection.clear();
+                this._changeDetectorRef.markForCheck();
+            }
+            else {
+                this.checklistSelection.selected.map((selectedNode) => {
+                    this.treeControl.dataNodes.map((node) => {
+                        if (node.value === selectedNode.value) {
+                            this.checklistSelection.deselect(selectedNode);
+                            this.checklistSelection.select(node);
+                        }
+                    });
+                });
+                this.getSelectedList();
+            }
         });
         this._service
             .selectedValuesChange
@@ -324,12 +356,13 @@ class CmatTransferPickerSourceComponent {
                     }
                 });
             });
+            this._changeDetectorRef.markForCheck();
         });
         this._service
             .sourceOptionsChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((options) => { if (options)
-            this.options = options; });
+            this.options = options; this._changeDetectorRef.markForCheck(); });
     }
     ngAfterViewInit() {
         this.treeControl.expandAll();
@@ -348,13 +381,18 @@ class CmatTransferPickerSourceComponent {
                 this.checklistSelection.select(item);
             });
         }
+        this._changeDetectorRef.markForCheck();
         return this.selectedList;
     }
     resetSelectedItem(item) {
-        /* 取消禁用 */
-        item.disabled = false;
-        /* 取消选中 */
-        this.checklistSelection.deselect(item);
+        const s = this.checklistSelection.selected.find(i => i.value === item.value);
+        if (s) {
+            /* 取消禁用 */
+            s.disabled = false;
+            /* 取消选中 */
+            this.checklistSelection.deselect(s);
+            this._changeDetectorRef.markForCheck();
+        }
     }
     /** Whether all the descendants of the node are selected */
     descendantsAllSelected(node) {
@@ -419,16 +457,14 @@ class CmatTransferPickerSourceComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerSourceComponent, deps: [{ token: CmatTransferPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatTransferPickerSourceComponent, isStandalone: true, selector: "cmat-transfer-picker-source", outputs: { checklistChange: "checklistChange" }, exportAs: ["cmatTransferPickerSource"], ngImport: i0, template: "<mat-card class=\"transfer-picker-source shadow\">\r\n    <mat-card-header>\r\n        <mat-card-title class=\"transfer-picker-source-title\">{{options.title}}</mat-card-title>\r\n        <cmat-transfer-picker-filter *ngIf=\"options.filterable\"\r\n            [filters]=\"options.filters\"></cmat-transfer-picker-filter>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"transfer-picker-source-content\">\r\n        <cmat-transfer-picker-search *ngIf=\"options.searchable\"\r\n            [searchPlaceholder]=\"options.searchPlaceholder\"></cmat-transfer-picker-search>\r\n\r\n        <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n            class=\"transfer-picker-source-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n                <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding>\r\n                    <button type=\"button\" mat-icon-button disabled>\r\n\r\n                    </button>\r\n                    <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(node)\"\r\n                        [disabled]=\"node?.disabled\" (change)=\"transferLeafItemSelectionToggle(node);\">\r\n                        {{node.label}}\r\n                    </mat-checkbox>\r\n                </mat-tree-node>\r\n\r\n                <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n                    <button type=\"button\" mat-icon-button matTreeNodeToggle>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\"\r\n                            svgIcon=\"{{treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\">\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-checkbox [checked]=\"descendantsAllSelected(node)\"\r\n                        [indeterminate]=\"descendantsPartiallySelected(node)\" [disabled]=\"node?.disabled\"\r\n                        (change)=\"transferItemSelectionToggle(node)\">\r\n                        {{node.label}}\r\n                    </mat-checkbox>\r\n                </mat-tree-node>\r\n            </mat-tree>\r\n            <div *ngIf=\"!dataSource?.data?.length\" class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </mat-card-content>\r\n</mat-card>", styles: [".transfer-picker-source{@apply h-full p-0 shadow;width:276px}.transfer-picker-source .mat-mdc-card-header{@apply flex flex-row flex-nowrap box-border place-content-between items-start;margin-bottom:-8px}.transfer-picker-source-title{@apply text-lg mb-0;padding:12px 0}.transfer-picker-source-scroll-wrapper{height:300px}.transfer-picker-source-empty{@apply text-center text-lg;margin-top:20px;color:#00000040}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CmatTransferPickerFilterComponent, selector: "cmat-transfer-picker-filter", inputs: ["filters"], exportAs: ["cmatTransferPickerFilter"] }, { kind: "component", type: CmatTransferPickerSearchComponent, selector: "cmat-transfer-picker-search", inputs: ["searchPlaceholder"], exportAs: ["cmatTransferPickerSearch"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerSourceComponent, deps: [{ token: CmatTransferPickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatTransferPickerSourceComponent, isStandalone: true, selector: "cmat-transfer-picker-source", exportAs: ["cmatTransferPickerSource"], ngImport: i0, template: "<mat-card class=\"transfer-picker-source shadow\">\n  <mat-card-header class=\"pb-3 items-center\">\n    <mat-card-title class=\"transfer-picker-source-title\">{{options.title}}</mat-card-title>\n    @if (options.filterable) {\n      <cmat-transfer-picker-filter\n      [filters]=\"options.filters\"></cmat-transfer-picker-filter>\n    }\n  </mat-card-header>\n  <mat-card-content class=\"transfer-picker-source-content\">\n    @if (options.searchable) {\n      <cmat-transfer-picker-search\n      [searchPlaceholder]=\"options.searchPlaceholder\"></cmat-transfer-picker-search>\n    }\n\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n      <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"node.level\">\n          <button type=\"button\" mat-icon-button disabled> </button>\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(node)\"\n            [disabled]=\"node?.disabled\" (change)=\"transferLeafItemSelectionToggle(node);\">\n            {{node.label}}\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" [matTreeNodePadding]=\"node.level\">\n          <button type=\"button\" mat-icon-button matTreeNodeToggle>\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          <mat-checkbox [checked]=\"descendantsAllSelected(node)||node?.disabled\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" [disabled]=\"node?.disabled\"\n            (change)=\"transferItemSelectionToggle(node)\">\n            {{node.label}}\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n      @if (!dataSource?.data?.length) {\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\n      }\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>", styles: [".transfer-picker-source{width:276px;height:100%;padding:0}.transfer-picker-source .mat-mdc-card-header{display:flex;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;place-content:space-between;align-items:flex-start;margin-bottom:-8px}.transfer-picker-source-title{font-size:1rem;margin-bottom:0}.transfer-picker-source-scroll-wrapper{height:300px}.transfer-picker-source-empty{text-align:center;font-size:1rem;margin-top:20px;color:#00000040}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: CmatTransferPickerFilterComponent, selector: "cmat-transfer-picker-filter", inputs: ["filters"], exportAs: ["cmatTransferPickerFilter"] }, { kind: "component", type: CmatTransferPickerSearchComponent, selector: "cmat-transfer-picker-search", inputs: ["searchPlaceholder"], exportAs: ["cmatTransferPickerSearch"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerSourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerSourceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-source', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSource', standalone: true, imports: [MatCardModule, MatTreeModule, MatCheckboxModule, MatIconModule, NgIf,
-                        CmatTransferPickerFilterComponent, CmatTransferPickerSearchComponent, ScrollingModule], template: "<mat-card class=\"transfer-picker-source shadow\">\r\n    <mat-card-header>\r\n        <mat-card-title class=\"transfer-picker-source-title\">{{options.title}}</mat-card-title>\r\n        <cmat-transfer-picker-filter *ngIf=\"options.filterable\"\r\n            [filters]=\"options.filters\"></cmat-transfer-picker-filter>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"transfer-picker-source-content\">\r\n        <cmat-transfer-picker-search *ngIf=\"options.searchable\"\r\n            [searchPlaceholder]=\"options.searchPlaceholder\"></cmat-transfer-picker-search>\r\n\r\n        <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n            class=\"transfer-picker-source-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n                <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding>\r\n                    <button type=\"button\" mat-icon-button disabled>\r\n\r\n                    </button>\r\n                    <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(node)\"\r\n                        [disabled]=\"node?.disabled\" (change)=\"transferLeafItemSelectionToggle(node);\">\r\n                        {{node.label}}\r\n                    </mat-checkbox>\r\n                </mat-tree-node>\r\n\r\n                <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n                    <button type=\"button\" mat-icon-button matTreeNodeToggle>\r\n                        <mat-icon class=\"mat-icon-rtl-mirror\"\r\n                            svgIcon=\"{{treeControl.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\">\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-checkbox [checked]=\"descendantsAllSelected(node)\"\r\n                        [indeterminate]=\"descendantsPartiallySelected(node)\" [disabled]=\"node?.disabled\"\r\n                        (change)=\"transferItemSelectionToggle(node)\">\r\n                        {{node.label}}\r\n                    </mat-checkbox>\r\n                </mat-tree-node>\r\n            </mat-tree>\r\n            <div *ngIf=\"!dataSource?.data?.length\" class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </mat-card-content>\r\n</mat-card>", styles: [".transfer-picker-source{@apply h-full p-0 shadow;width:276px}.transfer-picker-source .mat-mdc-card-header{@apply flex flex-row flex-nowrap box-border place-content-between items-start;margin-bottom:-8px}.transfer-picker-source-title{@apply text-lg mb-0;padding:12px 0}.transfer-picker-source-scroll-wrapper{height:300px}.transfer-picker-source-empty{@apply text-center text-lg;margin-top:20px;color:#00000040}\n"] }]
-        }], ctorParameters: () => [{ type: CmatTransferPickerService }], propDecorators: { checklistChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-transfer-picker-source', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSource', standalone: true, imports: [MatCardModule, MatTreeModule, MatCheckboxModule, MatIconModule, MatButtonModule,
+                        CmatTransferPickerFilterComponent, CmatTransferPickerSearchComponent, ScrollingModule], template: "<mat-card class=\"transfer-picker-source shadow\">\n  <mat-card-header class=\"pb-3 items-center\">\n    <mat-card-title class=\"transfer-picker-source-title\">{{options.title}}</mat-card-title>\n    @if (options.filterable) {\n      <cmat-transfer-picker-filter\n      [filters]=\"options.filters\"></cmat-transfer-picker-filter>\n    }\n  </mat-card-header>\n  <mat-card-content class=\"transfer-picker-source-content\">\n    @if (options.searchable) {\n      <cmat-transfer-picker-search\n      [searchPlaceholder]=\"options.searchPlaceholder\"></cmat-transfer-picker-search>\n    }\n\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n      <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"node.level\">\n          <button type=\"button\" mat-icon-button disabled> </button>\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(node)\"\n            [disabled]=\"node?.disabled\" (change)=\"transferLeafItemSelectionToggle(node);\">\n            {{node.label}}\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" [matTreeNodePadding]=\"node.level\">\n          <button type=\"button\" mat-icon-button matTreeNodeToggle>\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          <mat-checkbox [checked]=\"descendantsAllSelected(node)||node?.disabled\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" [disabled]=\"node?.disabled\"\n            (change)=\"transferItemSelectionToggle(node)\">\n            {{node.label}}\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n      @if (!dataSource?.data?.length) {\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\n      }\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>", styles: [".transfer-picker-source{width:276px;height:100%;padding:0}.transfer-picker-source .mat-mdc-card-header{display:flex;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;place-content:space-between;align-items:flex-start;margin-bottom:-8px}.transfer-picker-source-title{font-size:1rem;margin-bottom:0}.transfer-picker-source-scroll-wrapper{height:300px}.transfer-picker-source-empty{text-align:center;font-size:1rem;margin-top:20px;color:#00000040}\n"] }]
+        }], ctorParameters: () => [{ type: CmatTransferPickerService }, { type: i0.ChangeDetectorRef }] });
 
 class CmatTransferPickerTargetComponent {
     constructor() {
@@ -441,12 +477,12 @@ class CmatTransferPickerTargetComponent {
     trackByFn(index, item) {
         return index || item.label;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerTargetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatTransferPickerTargetComponent, isStandalone: true, selector: "cmat-transfer-picker-target", inputs: { selectedList: "selectedList" }, outputs: { clearItemChange: "clearItemChange" }, exportAs: ["cmatTransferPickerTarget"], ngImport: i0, template: "<mat-card class=\"transfer-picker-target shadow\">\r\n    <mat-card-header>\r\n        <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{selectedList.length}} \u9879</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\"\r\n            class=\"transfer-picker-target-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n            <mat-list dense>\r\n                <mat-list-item *ngFor=\"let item of selectedList;trackBy: trackByFn\" class=\"transfer-picker-target-item\">\r\n                    <div mat-line class=\"label\">{{item.label}}</div>\r\n                    <button type=\"button\" mat-icon-button (click)=\"clearItem(item)\">\r\n                        <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n                    </button>\r\n                </mat-list-item>\r\n            </mat-list>\r\n            <div *ngIf=\"!selectedList?.length\" class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </mat-card-content>\r\n</mat-card>", styles: [".transfer-picker-target{@apply h-full p-0 shadow bg-card;width:276px}.transfer-picker-target .mat-mdc-card-header{margin-bottom:-8px}.transfer-picker-target-title{@apply text-lg mb-0;padding:12px 0}.transfer-picker-target-item{@apply w-full;}.transfer-picker-target-scroll-wrapper{height:356px}.transfer-picker-target-empty{@apply text-center;margin-top:20px;color:#00000040}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerTargetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatTransferPickerTargetComponent, isStandalone: true, selector: "cmat-transfer-picker-target", inputs: { selectedList: "selectedList" }, outputs: { clearItemChange: "clearItemChange" }, exportAs: ["cmatTransferPickerTarget"], ngImport: i0, template: "<mat-card class=\"transfer-picker-target shadow\">\n  <mat-card-header class=\"pb-3 items-center\">\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{selectedList.length}} \u9879</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <cdk-virtual-scroll-viewport itemSize=\"40\"\n      class=\"transfer-picker-target-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n      <mat-list dense>\n        @for (item of selectedList; track trackByFn($index, item)) {\n          <mat-list-item class=\"transfer-picker-target-item\">\n            <div mat-line class=\"flex flex-row items-center\">\n              <div class=\"flex-1\">{{item.label}}</div>\n              <button type=\"button\" mat-icon-button (click)=\"clearItem(item)\">\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\n              </button>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n      @if (!selectedList.length) {\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\n      }\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>", styles: [".transfer-picker-target{height:100%;padding:0;width:276px}.transfer-picker-target .mat-mdc-card-header{margin-bottom:-8px}.transfer-picker-target-title{font-size:1rem;margin-bottom:0;padding:12px 0}.transfer-picker-target-item{width:100%}.transfer-picker-target-scroll-wrapper{height:356px}.transfer-picker-target-empty{text-align:center;margin-top:20px;color:#00000040}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerTargetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerTargetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-target', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerTarget', standalone: true, imports: [MatCardModule, MatListModule, MatIconModule, NgIf, ScrollingModule], template: "<mat-card class=\"transfer-picker-target shadow\">\r\n    <mat-card-header>\r\n        <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{selectedList.length}} \u9879</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\"\r\n            class=\"transfer-picker-target-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n            <mat-list dense>\r\n                <mat-list-item *ngFor=\"let item of selectedList;trackBy: trackByFn\" class=\"transfer-picker-target-item\">\r\n                    <div mat-line class=\"label\">{{item.label}}</div>\r\n                    <button type=\"button\" mat-icon-button (click)=\"clearItem(item)\">\r\n                        <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n                    </button>\r\n                </mat-list-item>\r\n            </mat-list>\r\n            <div *ngIf=\"!selectedList?.length\" class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </mat-card-content>\r\n</mat-card>", styles: [".transfer-picker-target{@apply h-full p-0 shadow bg-card;width:276px}.transfer-picker-target .mat-mdc-card-header{margin-bottom:-8px}.transfer-picker-target-title{@apply text-lg mb-0;padding:12px 0}.transfer-picker-target-item{@apply w-full;}.transfer-picker-target-scroll-wrapper{height:356px}.transfer-picker-target-empty{@apply text-center;margin-top:20px;color:#00000040}\n"] }]
+            args: [{ selector: 'cmat-transfer-picker-target', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerTarget', standalone: true, imports: [MatCardModule, MatListModule, MatIconModule, ScrollingModule, MatButtonModule], template: "<mat-card class=\"transfer-picker-target shadow\">\n  <mat-card-header class=\"pb-3 items-center\">\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{selectedList.length}} \u9879</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <cdk-virtual-scroll-viewport itemSize=\"40\"\n      class=\"transfer-picker-target-scroll-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n      <mat-list dense>\n        @for (item of selectedList; track trackByFn($index, item)) {\n          <mat-list-item class=\"transfer-picker-target-item\">\n            <div mat-line class=\"flex flex-row items-center\">\n              <div class=\"flex-1\">{{item.label}}</div>\n              <button type=\"button\" mat-icon-button (click)=\"clearItem(item)\">\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\n              </button>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n      @if (!selectedList.length) {\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\n      }\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>", styles: [".transfer-picker-target{height:100%;padding:0;width:276px}.transfer-picker-target .mat-mdc-card-header{margin-bottom:-8px}.transfer-picker-target-title{font-size:1rem;margin-bottom:0;padding:12px 0}.transfer-picker-target-item{width:100%}.transfer-picker-target-scroll-wrapper{height:356px}.transfer-picker-target-empty{text-align:center;margin-top:20px;color:#00000040}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedList: [{
                 type: Input
             }], clearItemChange: [{
@@ -478,7 +514,6 @@ class CmatTransferPickerComponent {
     ngAfterViewInit() {
         if (this.selectedValues.length) {
             this.pick();
-            this._changeDetectorRef.detectChanges();
         }
     }
     pick() {
@@ -488,7 +523,7 @@ class CmatTransferPickerComponent {
     reset() {
         if (this.selectedList.length) {
             this.selectedList = [];
-            this._service.resetDataSource();
+            this._service.resetDataSource(true);
             this._emitterChange();
         }
     }
@@ -500,13 +535,14 @@ class CmatTransferPickerComponent {
     }
     _emitterChange() {
         this.selectChange.next(this.selectedList);
+        this._changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerComponent, deps: [{ token: CmatTransferPickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatTransferPickerComponent, isStandalone: true, selector: "cmat-transfer-picker", inputs: { title: "title", filterable: "filterable", searchable: "searchable", searchPlaceholder: "searchPlaceholder", dataSource: "dataSource", filters: "filters", selectedValues: "selectedValues" }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "source", first: true, predicate: CmatTransferPickerSourceComponent, descendants: true, static: true }], exportAs: ["cmatTransferPicker"], ngImport: i0, template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\n    <button type=\"button\" class=\"pr-2\" mat-raised-button color=\"primary\" (click)=\"pick()\">\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\n    </button>\n    <button type=\"button\" class=\"pl-2\" mat-raised-button color=\"primary\" (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\n    </button>\n</div>\n<cmat-transfer-picker-target [selectedList]=\"selectedList\" (clearItemChange)=\"onClearItemChange($event)\">\n</cmat-transfer-picker-target>", styles: ["cmat-transfer-picker-container{@apply h-full overflow-hidden p-4 flex flex-col md:flex-row flex-nowrap justify-items-center items-center gap-2;}cmat-transfer-picker-container cmat-transfer-picker-source,cmat-transfer-picker-container cmat-transfer-picker-target{@apply h-full;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatTransferPickerSourceComponent, selector: "cmat-transfer-picker-source", outputs: ["checklistChange"], exportAs: ["cmatTransferPickerSource"] }, { kind: "component", type: CmatTransferPickerTargetComponent, selector: "cmat-transfer-picker-target", inputs: ["selectedList"], outputs: ["clearItemChange"], exportAs: ["cmatTransferPickerTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerComponent, deps: [{ token: CmatTransferPickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CmatTransferPickerComponent, isStandalone: true, selector: "cmat-transfer-picker", inputs: { title: "title", filterable: "filterable", searchable: "searchable", searchPlaceholder: "searchPlaceholder", dataSource: "dataSource", filters: "filters", selectedValues: "selectedValues" }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "source", first: true, predicate: CmatTransferPickerSourceComponent, descendants: true, static: true }], exportAs: ["cmatTransferPicker"], ngImport: i0, template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\n    <button type=\"button\" class=\"pr-2\" mat-raised-button color=\"primary\" (click)=\"pick()\">\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\n    </button>\n    <button type=\"button\" class=\"pl-2\" mat-raised-button color=\"primary\" (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\n    </button>\n</div>\n<cmat-transfer-picker-target [selectedList]=\"selectedList\" (clearItemChange)=\"onClearItemChange($event)\">\n</cmat-transfer-picker-target>", styles: ["cmat-transfer-picker{height:100%;overflow:hidden;padding:1rem;display:flex;flex-wrap:nowrap;justify-items:center;align-items:center;gap:.5rem}cmat-transfer-picker cmat-transfer-picker-source,cmat-transfer-picker cmat-transfer-picker-target{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CmatTransferPickerSourceComponent, selector: "cmat-transfer-picker-source", exportAs: ["cmatTransferPickerSource"] }, { kind: "component", type: CmatTransferPickerTargetComponent, selector: "cmat-transfer-picker-target", inputs: ["selectedList"], outputs: ["clearItemChange"], exportAs: ["cmatTransferPickerTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatTransferPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatTransferPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPicker', standalone: true, imports: [MatIconModule, CmatTransferPickerSourceComponent, CmatTransferPickerTargetComponent], template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\n    <button type=\"button\" class=\"pr-2\" mat-raised-button color=\"primary\" (click)=\"pick()\">\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\n    </button>\n    <button type=\"button\" class=\"pl-2\" mat-raised-button color=\"primary\" (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\n    </button>\n</div>\n<cmat-transfer-picker-target [selectedList]=\"selectedList\" (clearItemChange)=\"onClearItemChange($event)\">\n</cmat-transfer-picker-target>", styles: ["cmat-transfer-picker-container{@apply h-full overflow-hidden p-4 flex flex-col md:flex-row flex-nowrap justify-items-center items-center gap-2;}cmat-transfer-picker-container cmat-transfer-picker-source,cmat-transfer-picker-container cmat-transfer-picker-target{@apply h-full;}\n"] }]
+            args: [{ selector: 'cmat-transfer-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPicker', standalone: true, imports: [MatIconModule, MatButtonModule, CmatTransferPickerSourceComponent, CmatTransferPickerTargetComponent], template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\n    <button type=\"button\" class=\"pr-2\" mat-raised-button color=\"primary\" (click)=\"pick()\">\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\n    </button>\n    <button type=\"button\" class=\"pl-2\" mat-raised-button color=\"primary\" (click)=\"reset()\">\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\n    </button>\n</div>\n<cmat-transfer-picker-target [selectedList]=\"selectedList\" (clearItemChange)=\"onClearItemChange($event)\">\n</cmat-transfer-picker-target>", styles: ["cmat-transfer-picker{height:100%;overflow:hidden;padding:1rem;display:flex;flex-wrap:nowrap;justify-items:center;align-items:center;gap:.5rem}cmat-transfer-picker cmat-transfer-picker-source,cmat-transfer-picker cmat-transfer-picker-target{height:100%}\n"] }]
         }], ctorParameters: () => [{ type: CmatTransferPickerService }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], filterable: [{