cmat 0.0.87 → 0.0.88

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

@@ -1,25 +1,24 @@
 import * as i6 from '@angular/cdk/overlay';
-import { Overlay, OverlayConfig, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i4 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, DestroyRef, EventEmitter, Output, Injector, afterNextRender } from '@angular/core';
+import { signal, Injectable, input, viewChild, inject, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, effect, untracked, output, Injector, afterNextRender } from '@angular/core';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { SelectionModel } from '@angular/cdk/collections';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i1$2 from '@angular/material/card';
@@ -32,19 +31,25 @@ import { of } from 'rxjs';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 
+/* eslint-disable @typescript-eslint/member-ordering */
 class CmatTransferPickerService {
     constructor() {
-        this._dataSourceChange = signal([], ...(ngDevMode ? [{ debugName: "_dataSourceChange" }] : /* istanbul ignore next */ []));
-        this._refreshDataSourceChange = signal({ clear: true, nonce: 0 }, ...(ngDevMode ? [{ debugName: "_refreshDataSourceChange" }] : /* istanbul ignore next */ []));
-        this._filtersChange = signal([], ...(ngDevMode ? [{ debugName: "_filtersChange" }] : /* istanbul ignore next */ []));
-        this._sourceOptionsChange = signal(void 0, ...(ngDevMode ? [{ debugName: "_sourceOptionsChange" }] : /* istanbul ignore next */ []));
-        this._selectedValuesChange = signal([], ...(ngDevMode ? [{ debugName: "_selectedValuesChange" }] : /* istanbul ignore next */ []));
+        this._dataSourceChange = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dataSourceChange" }] : /* istanbul ignore next */ []));
+        this._refreshDataSourceChange = signal({ clear: true, nonce: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_refreshDataSourceChange" }] : /* istanbul ignore next */ []));
+        this._filtersChange = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_filtersChange" }] : /* istanbul ignore next */ []));
+        this._sourceOptionsChange = signal(void 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_sourceOptionsChange" }] : /* istanbul ignore next */ []));
+        this._selectedValuesChange = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_selectedValuesChange" }] : /* istanbul ignore next */ []));
         this._refreshNonce = 0;
-        this._dataSourceChange$ = toObservable(this._dataSourceChange);
-        this._refreshDataSourceChange$ = toObservable(this._refreshDataSourceChange);
-        this._filtersChange$ = toObservable(this._filtersChange);
-        this._sourceOptionsChange$ = toObservable(this._sourceOptionsChange);
-        this._selectedValuesChange$ = toObservable(this._selectedValuesChange);
+        this.dataSourceChange = this._dataSourceChange.asReadonly();
+        this.refreshDataSourceChange = this._refreshDataSourceChange.asReadonly();
+        this.filtersChange = this._filtersChange.asReadonly();
+        this.sourceOptionsChange = this._sourceOptionsChange.asReadonly();
+        this.selectedValuesChange = this._selectedValuesChange.asReadonly();
         this._compareMap = new Map([
             ['0', (a, b) => a === b],
             ['1', (a, b) => a !== b],
@@ -66,21 +71,6 @@ class CmatTransferPickerService {
                 }).result],
         ]);
     }
-    get dataSourceChange() {
-        return this._dataSourceChange$;
-    }
-    get refreshDataSourceChange() {
-        return this._refreshDataSourceChange$;
-    }
-    get filtersChange() {
-        return this._filtersChange$;
-    }
-    get sourceOptionsChange() {
-        return this._sourceOptionsChange$;
-    }
-    get selectedValuesChange() {
-        return this._selectedValuesChange$;
-    }
     get dataSource() {
         return this._dataSource;
     }
@@ -177,10 +167,10 @@ class CmatTransferPickerService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -189,6 +179,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class CmatTransferPickerFilterComponent {
     constructor() {
+        this.filters = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filters" }] : /* istanbul ignore next */ []));
+        this._overlayOrigin = viewChild(CdkOverlayOrigin, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_overlayOrigin" }] : /* istanbul ignore next */ []));
+        this._filterTemplate = viewChild('filterTemplate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_filterTemplate" }] : /* istanbul ignore next */ []));
         this._overlay = inject(Overlay);
         this._service = inject(CmatTransferPickerService);
         this.filterData = {
@@ -204,7 +200,7 @@ class CmatTransferPickerFilterComponent {
         });
         config.positionStrategy = this._overlay
             .position()
-            .flexibleConnectedTo(this.overlayOrigin.elementRef).withPositions([
+            .flexibleConnectedTo(this._overlayOrigin().elementRef).withPositions([
             {
                 originX: 'end', originY: 'bottom', overlayX: 'end',
                 overlayY: 'top', offsetX: 5
@@ -226,7 +222,7 @@ class CmatTransferPickerFilterComponent {
             this.overlayRef.detach();
         }
         else {
-            this.overlayRef.attach(this.filterTemplate);
+            this.overlayRef.attach(this._filterTemplate());
         }
     }
     onFilterClick(filter) {
@@ -252,45 +248,37 @@ class CmatTransferPickerFilterComponent {
             this.overlayRef.dispose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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\" matIconButton  cdk-overlay-origin (click)=\"toggleFilter()\">\r\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\r\n</button>\r\n<ng-template #filterTemplate=\"cdkPortal\" cdkPortal>\r\n  <div\r\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\r\n    <mat-button-toggle-group name=\"condition\" [hideSingleSelectionIndicator]=\"true\" (change)=\"onConditionChange($event.value)\">\r\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\r\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n\r\n    <div class=\"chip-list\">\r\n      @for (item of filters; track $index) {\r\n        <div class=\"chip-wrapper\" role=\"presentation\"\r\n          (click)=\"onFilterClick(item)\">\r\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0;border-width:1px}.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: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTransferPickerFilterComponent, isStandalone: true, selector: "cmat-transfer-picker-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "_filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, isSignal: true }], exportAs: ["cmatTransferPickerFilter"], ngImport: i0, template: "<button type=\"button\" class=\"mr-2 mt-1\" matIconButton  cdk-overlay-origin (click)=\"toggleFilter()\">\r\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\r\n</button>\r\n<ng-template #filterTemplate=\"cdkPortal\" cdkPortal>\r\n  <div\r\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\r\n    <mat-button-toggle-group name=\"condition\" [hideSingleSelectionIndicator]=\"true\" (change)=\"onConditionChange($event.value)\">\r\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\r\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n\r\n    <div class=\"chip-list\">\r\n      @for (item of filters(); track $index) {\r\n        <div class=\"chip-wrapper\" role=\"presentation\"\r\n          (click)=\"onFilterClick(item)\">\r\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0;border-width:1px}.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: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i6.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: "21.2.11", ngImport: i0, type: CmatTransferPickerFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-filter', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerFilter', imports: [MatButtonToggleModule, MatIconModule, CommonModule, PortalModule, MatButtonModule, OverlayModule], template: "<button type=\"button\" class=\"mr-2 mt-1\" matIconButton  cdk-overlay-origin (click)=\"toggleFilter()\">\r\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\r\n</button>\r\n<ng-template #filterTemplate=\"cdkPortal\" cdkPortal>\r\n  <div\r\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\r\n    <mat-button-toggle-group name=\"condition\" [hideSingleSelectionIndicator]=\"true\" (change)=\"onConditionChange($event.value)\">\r\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\r\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n\r\n    <div class=\"chip-list\">\r\n      @for (item of filters; track $index) {\r\n        <div class=\"chip-wrapper\" role=\"presentation\"\r\n          (click)=\"onFilterClick(item)\">\r\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0;border-width:1px}.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: () => [], propDecorators: { filters: [{
-                type: Input
-            }], overlayOrigin: [{
-                type: ViewChild,
-                args: [CdkOverlayOrigin, { static: true }]
-            }], filterTemplate: [{
-                type: ViewChild,
-                args: ['filterTemplate', { static: true }]
-            }] } });
+            args: [{ selector: 'cmat-transfer-picker-filter', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerFilter', imports: [MatButtonToggleModule, MatIconModule, CommonModule, PortalModule, MatButtonModule, OverlayModule], template: "<button type=\"button\" class=\"mr-2 mt-1\" matIconButton  cdk-overlay-origin (click)=\"toggleFilter()\">\r\n  <mat-icon svgIcon=\"mat_outline:filter_list\"></mat-icon>\r\n</button>\r\n<ng-template #filterTemplate=\"cdkPortal\" cdkPortal>\r\n  <div\r\n    class=\"transfer-picker-filter-panel bg-card flex flex-col flex-nowrap place-content-start box-border items-start w-full shadow\">\r\n    <mat-button-toggle-group name=\"condition\" [hideSingleSelectionIndicator]=\"true\" (change)=\"onConditionChange($event.value)\">\r\n      <mat-button-toggle value=\"or\" [checked]=\"filterData.condition === 'or'\">\u6216</mat-button-toggle>\r\n      <mat-button-toggle value=\"and\" [checked]=\"filterData.condition === 'and'\">\u4E14</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n\r\n    <div class=\"chip-list\">\r\n      @for (item of filters(); track $index) {\r\n        <div class=\"chip-wrapper\" role=\"presentation\"\r\n          (click)=\"onFilterClick(item)\">\r\n          <span class=\"chip\" [ngClass]=\"{selected: item?.selected}\">{{item.label}}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".transfer-picker-filter-panel{min-width:276px;padding:10px 0;border-width:1px}.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: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], _overlayOrigin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }], _filterTemplate: [{ type: i0.ViewChild, args: ['filterTemplate', { isSignal: true }] }] } });
 
 class CmatTransferPickerSearchComponent {
     constructor() {
+        this.searchPlaceholder = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
         this._service = inject(CmatTransferPickerService);
         this.keyword = new FormControl();
     }
     ngOnInit() {
         this.keyword
             .valueChanges
-            .pipe(debounceTime(200), distinctUntilChanged())
+            .pipe(debounceTime(300), distinctUntilChanged())
             .subscribe((keyword) => this._service.filterDataSource({ keyword: keyword ?? '' }));
     }
     reset() {
         this.keyword.setValue('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatTransferPickerSearchComponent, isStandalone: true, selector: "cmat-transfer-picker-search", inputs: { searchPlaceholder: "searchPlaceholder" }, exportAs: ["cmatTransferPickerSearch"], ngImport: i0, template: "<mat-form-field>\r\n  <input placeholder=\"{{searchPlaceholder}}\" matInput type=\"text\" [formControl]=\"keyword\">\r\n  @if (keyword.value) {\r\n    <button type=\"button\" matSuffix matIconButton  (click)=\"reset()\">\r\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n    </button>\r\n  }\r\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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTransferPickerSearchComponent, isStandalone: true, selector: "cmat-transfer-picker-search", inputs: { searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatTransferPickerSearch"], ngImport: i0, template: "<mat-form-field appearance=\"fill\">\r\n  <input placeholder=\"{{searchPlaceholder()}}\" matInput type=\"text\" [formControl]=\"keyword\">\r\n  @if (keyword.value) {\r\n    <button type=\"button\" matSuffix matIconButton  (click)=\"reset()\">\r\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n    </button>\r\n  }\r\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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-search', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSearch', imports: [MatFormFieldModule, MatIconModule, ReactiveFormsModule, MatButtonModule, MatInputModule], template: "<mat-form-field>\r\n  <input placeholder=\"{{searchPlaceholder}}\" matInput type=\"text\" [formControl]=\"keyword\">\r\n  @if (keyword.value) {\r\n    <button type=\"button\" matSuffix matIconButton  (click)=\"reset()\">\r\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n    </button>\r\n  }\r\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: () => [], propDecorators: { searchPlaceholder: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-transfer-picker-search', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSearch', imports: [MatFormFieldModule, MatIconModule, ReactiveFormsModule, MatButtonModule, MatInputModule], template: "<mat-form-field appearance=\"fill\">\r\n  <input placeholder=\"{{searchPlaceholder()}}\" matInput type=\"text\" [formControl]=\"keyword\">\r\n  @if (keyword.value) {\r\n    <button type=\"button\" matSuffix matIconButton  (click)=\"reset()\">\r\n      <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n    </button>\r\n  }\r\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: () => [], propDecorators: { searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/naming-convention */
 class CmatTransferItemNode {
@@ -308,21 +296,25 @@ var CmatTransferFilterCondition;
 class CmatTransferPickerSourceComponent {
     constructor() {
         this.nestedNodeMap = new Map();
-        this.dataSource = signal([], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
-        this.dataFlatNodes = signal([], ...(ngDevMode ? [{ debugName: "dataFlatNodes" }] : /* istanbul ignore next */ []));
+        this.dataFlatNodes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataFlatNodes" }] : /* istanbul ignore next */ []));
         this.checklistSelection = new SelectionModel(true /* multiple */);
-        this.options = signal({
-            title: '',
-            filterable: false,
-            searchable: false,
-            searchPlaceholder: '',
-            filters: []
-        }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.committedSelection = signal([], ...(ngDevMode ? [{ debugName: "committedSelection" }] : /* istanbul ignore next */ []));
-        this.committedValueSet = computed(() => new Set(this.committedSelection().map(node => node.value)), ...(ngDevMode ? [{ debugName: "committedValueSet" }] : /* istanbul ignore next */ []));
+        this.committedSelection = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "committedSelection" }] : /* istanbul ignore next */ []));
+        this.committedValueSet = computed(() => new Set(this.committedSelection().map(node => node.value)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "committedValueSet" }] : /* istanbul ignore next */ []));
+        this._tree = viewChild('componentTree', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_tree" }] : /* istanbul ignore next */ []));
         this._flatNodeByValue = new Map();
         this._service = inject(CmatTransferPickerService);
-        this._destroyRef = inject(DestroyRef);
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.dataSource = this._service.dataSourceChange;
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.refreshDataSourceChange = this._service.refreshDataSourceChange;
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.options = this._service.sourceOptionsChange;
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.selectedValuesChange = this._service.selectedValuesChange;
         this.childrenAccessor = (node) => node.children ?? [];
         this.hasChild = (_, node) => !!node.children && node.children.length > 0;
         this._getLevel = (node) => node.level;
@@ -341,46 +333,37 @@ class CmatTransferPickerSourceComponent {
             this._flatNodeByValue.set(node.value, flatNode);
             return flatNode;
         };
-    }
-    ngOnInit() {
-        // 监听数据源变化并重建平铺节点
-        this._service
-            .dataSourceChange
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((data) => {
-            this.dataSource.set(data);
-            this._flatNodeByValue.clear();
-            this.dataFlatNodes.set(this._getFlattenNodes(this.dataSource()));
+        effect(() => {
+            const data = this.dataSource();
+            untracked(() => {
+                this._flatNodeByValue.clear();
+                this.dataFlatNodes.set(this._getFlattenNodes(data));
+            });
         });
-        this._service.refreshDataSourceChange.pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(({ clear }) => {
-            // 刷新时按状态重置或恢复选择
-            if (clear) {
-                this.checklistSelection.clear();
-                this.committedSelection.set([]);
-            }
-            else {
-                this._selectNodesByValues(this.checklistSelection.selected.map(node => node.value));
-                this.commitSelection();
-            }
+        effect(() => {
+            const clear = this.refreshDataSourceChange();
+            untracked(() => {
+                if (clear) {
+                    this.checklistSelection.clear();
+                    this.committedSelection.set([]);
+                }
+                else {
+                    this._selectNodesByValues(this.checklistSelection.selected.map(node => node.value));
+                    this.commitSelection();
+                }
+            });
         });
-        this._service
-            .selectedValuesChange
-            .pipe(filter((values) => !!values.length), takeUntilDestroyed(this._destroyRef))
-            .subscribe((values) => {
-            // 根据外部值同步选中节点
-            this._selectNodesByValues(values);
-            this.commitSelection();
+        effect(() => {
+            const values = this.selectedValuesChange();
+            untracked(() => {
+                this._selectNodesByValues(values);
+                this.commitSelection();
+            });
         });
-        this._service
-            .sourceOptionsChange
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((options) => { if (options)
-            this.options.set(options); });
     }
     ngAfterViewInit() {
         // 初始化时展开整棵树
-        this.tree.expandAll();
+        this._tree()?.expandAll();
     }
     getCommittedSelection() {
         return this.committedSelection();
@@ -507,69 +490,75 @@ class CmatTransferPickerSourceComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatTransferPickerSourceComponent, isStandalone: true, selector: "cmat-transfer-picker-source", viewQueries: [{ propertyName: "tree", first: true, predicate: ["componentTree"], descendants: true }], exportAs: ["cmatTransferPickerSource"], ngImport: i0, template: "<mat-card class=\"transfer-picker-source shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-source-title\">{{options().title}}</mat-card-title>\r\n    @if (options().filterable) {\r\n      <cmat-transfer-picker-filter\r\n      [filters]=\"options().filters\"></cmat-transfer-picker-filter>\r\n    }\r\n  </mat-card-header>\r\n  <mat-card-content class=\"transfer-picker-source-content\">\r\n    @if (options().searchable) {\r\n      <cmat-transfer-picker-search\r\n      [searchPlaceholder]=\"options().searchPlaceholder\"></cmat-transfer-picker-search>\r\n    }\r\n\r\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto scrollbar-custom\">\r\n        <mat-tree #componentTree [dataSource]=\"dataSource()\"  [childrenAccessor]=\"childrenAccessor\">\r\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  disabled> </button>\r\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(nestedNodeMap.get(node)!)\"\r\n            [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\" (change)=\"transferLeafItemSelectionToggle(nestedNodeMap.get(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]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  matTreeNodeToggle>\r\n            <mat-icon svgIcon=\"{{componentTree.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\"\r\n              class=\"mat-icon-rtl-mirror\">\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox [checked]=\"descendantsAllSelected(nestedNodeMap.get(node)!)||committedValueSet().has(nestedNodeMap.get(node)!.value)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(nestedNodeMap.get(node)!)\" [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\"\r\n            (change)=\"transferItemSelectionToggle(nestedNodeMap.get(node)!)\">\r\n            {{node.label}}\r\n          </mat-checkbox>\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n      @if (!dataSource().length) {\r\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i2$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i2$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i2$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "22.0.2", ngImport: i0, type: CmatTransferPickerSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTransferPickerSourceComponent, isStandalone: true, selector: "cmat-transfer-picker-source", viewQueries: [{ propertyName: "_tree", first: true, predicate: ["componentTree"], descendants: true, isSignal: true }], exportAs: ["cmatTransferPickerSource"], ngImport: i0, template: "<mat-card class=\"transfer-picker-source shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-source-title\">{{options()?.title}}</mat-card-title>\r\n    @if (options()?.filterable) {\r\n      <cmat-transfer-picker-filter\r\n      [filters]=\"options()?.filters\"></cmat-transfer-picker-filter>\r\n    }\r\n  </mat-card-header>\r\n  <mat-card-content class=\"transfer-picker-source-content\">\r\n    @if (options()?.searchable) {\r\n      <cmat-transfer-picker-search\r\n      [searchPlaceholder]=\"options()?.searchPlaceholder\"></cmat-transfer-picker-search>\r\n    }\r\n\r\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto scrollbar-custom\">\r\n        <mat-tree #componentTree [dataSource]=\"dataSource()\"  [childrenAccessor]=\"childrenAccessor\">\r\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  disabled> </button>\r\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(nestedNodeMap.get(node)!)\"\r\n            [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\" (change)=\"transferLeafItemSelectionToggle(nestedNodeMap.get(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]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  matTreeNodeToggle>\r\n            <mat-icon svgIcon=\"{{componentTree.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\"\r\n              class=\"mat-icon-rtl-mirror\">\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox [checked]=\"descendantsAllSelected(nestedNodeMap.get(node)!)||committedValueSet().has(nestedNodeMap.get(node)!.value)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(nestedNodeMap.get(node)!)\" [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\"\r\n            (change)=\"transferItemSelectionToggle(nestedNodeMap.get(node)!)\">\r\n            {{node.label}}\r\n          </mat-checkbox>\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n      @if (!dataSource().length) {\r\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i2$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i2$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i2$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerSourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerSourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-transfer-picker-source', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerSource', imports: [MatCardModule, MatTreeModule, MatCheckboxModule, MatIconModule, MatButtonModule,
-                        CmatTransferPickerFilterComponent, CmatTransferPickerSearchComponent, ScrollingModule], template: "<mat-card class=\"transfer-picker-source shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-source-title\">{{options().title}}</mat-card-title>\r\n    @if (options().filterable) {\r\n      <cmat-transfer-picker-filter\r\n      [filters]=\"options().filters\"></cmat-transfer-picker-filter>\r\n    }\r\n  </mat-card-header>\r\n  <mat-card-content class=\"transfer-picker-source-content\">\r\n    @if (options().searchable) {\r\n      <cmat-transfer-picker-search\r\n      [searchPlaceholder]=\"options().searchPlaceholder\"></cmat-transfer-picker-search>\r\n    }\r\n\r\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto scrollbar-custom\">\r\n        <mat-tree #componentTree [dataSource]=\"dataSource()\"  [childrenAccessor]=\"childrenAccessor\">\r\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  disabled> </button>\r\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(nestedNodeMap.get(node)!)\"\r\n            [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\" (change)=\"transferLeafItemSelectionToggle(nestedNodeMap.get(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]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  matTreeNodeToggle>\r\n            <mat-icon svgIcon=\"{{componentTree.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\"\r\n              class=\"mat-icon-rtl-mirror\">\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox [checked]=\"descendantsAllSelected(nestedNodeMap.get(node)!)||committedValueSet().has(nestedNodeMap.get(node)!.value)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(nestedNodeMap.get(node)!)\" [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\"\r\n            (change)=\"transferItemSelectionToggle(nestedNodeMap.get(node)!)\">\r\n            {{node.label}}\r\n          </mat-checkbox>\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n      @if (!dataSource().length) {\r\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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"] }]
-        }], propDecorators: { tree: [{
-                type: ViewChild,
-                args: ['componentTree', { static: false }]
-            }] } });
+                        CmatTransferPickerFilterComponent, CmatTransferPickerSearchComponent, ScrollingModule], template: "<mat-card class=\"transfer-picker-source shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-source-title\">{{options()?.title}}</mat-card-title>\r\n    @if (options()?.filterable) {\r\n      <cmat-transfer-picker-filter\r\n      [filters]=\"options()?.filters\"></cmat-transfer-picker-filter>\r\n    }\r\n  </mat-card-header>\r\n  <mat-card-content class=\"transfer-picker-source-content\">\r\n    @if (options()?.searchable) {\r\n      <cmat-transfer-picker-search\r\n      [searchPlaceholder]=\"options()?.searchPlaceholder\"></cmat-transfer-picker-search>\r\n    }\r\n\r\n    <cdk-virtual-scroll-viewport itemSize=\"48\"\r\n      class=\"transfer-picker-source-scroll-wrapper overflow-y-auto scrollbar-custom\">\r\n        <mat-tree #componentTree [dataSource]=\"dataSource()\"  [childrenAccessor]=\"childrenAccessor\">\r\n        <mat-tree-node *matTreeNodeDef=\"let node\" [matTreeNodePadding]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  disabled> </button>\r\n          <mat-checkbox class=\"checklist-leaf-node\" [checked]=\"checklistSelection.isSelected(nestedNodeMap.get(node)!)\"\r\n            [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\" (change)=\"transferLeafItemSelectionToggle(nestedNodeMap.get(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]=\"nestedNodeMap.get(node)?.level\">\r\n          <button type=\"button\" matIconButton  matTreeNodeToggle>\r\n            <mat-icon svgIcon=\"{{componentTree.isExpanded(node) ? 'mat_outline:expand_more' : 'mat_outline:chevron_right'}}\"\r\n              class=\"mat-icon-rtl-mirror\">\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox [checked]=\"descendantsAllSelected(nestedNodeMap.get(node)!)||committedValueSet().has(nestedNodeMap.get(node)!.value)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(nestedNodeMap.get(node)!)\" [disabled]=\"isNodeDisabled(nestedNodeMap.get(node)!)\"\r\n            (change)=\"transferItemSelectionToggle(nestedNodeMap.get(node)!)\">\r\n            {{node.label}}\r\n          </mat-checkbox>\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n      @if (!dataSource().length) {\r\n        <div class=\"transfer-picker-source-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: () => [], propDecorators: { _tree: [{ type: i0.ViewChild, args: ['componentTree', { isSignal: true }] }] } });
 
 class CmatTransferPickerTargetComponent {
     constructor() {
-        this.clearItemChange = new EventEmitter();
+        this.committedSelection = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "committedSelection" }] : /* istanbul ignore next */ []));
+        this.clearItemChange = output();
     }
     clearItem(item) {
         this.clearItemChange.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerTargetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatTransferPickerTargetComponent, isStandalone: true, selector: "cmat-transfer-picker-target", inputs: { committedSelection: "committedSelection" }, outputs: { clearItemChange: "clearItemChange" }, exportAs: ["cmatTransferPickerTarget"], ngImport: i0, template: "<mat-card class=\"transfer-picker-target shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{committedSelection.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 scrollbar-custom\">\r\n      <mat-list dense>\r\n        @for (item of committedSelection; track $index) {\r\n          <mat-list-item class=\"transfer-picker-target-item\">\r\n            <div mat-line class=\"flex flex-row items-center\">\r\n              <div class=\"flex-1\">{{item.label}}</div>\r\n              <button type=\"button\" matIconButton  (click)=\"clearItem(item)\">\r\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        }\r\n      </mat-list>\r\n      @if (!committedSelection.length) {\r\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$2.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerTargetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatTransferPickerTargetComponent, isStandalone: true, selector: "cmat-transfer-picker-target", inputs: { committedSelection: { classPropertyName: "committedSelection", publicName: "committedSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearItemChange: "clearItemChange" }, exportAs: ["cmatTransferPickerTarget"], ngImport: i0, template: "<mat-card class=\"transfer-picker-target shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{committedSelection().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 scrollbar-custom\">\r\n      <mat-list dense>\r\n        @for (item of committedSelection(); track $index) {\r\n          <mat-list-item class=\"transfer-picker-target-item\">\r\n            <div mat-line class=\"flex flex-row items-center\">\r\n              <div class=\"flex-1\">{{item.label}}</div>\r\n              <button type=\"button\" matIconButton  (click)=\"clearItem(item)\">\r\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        }\r\n      </mat-list>\r\n      @if (!committedSelection().length) {\r\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$2.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerTargetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerTargetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-transfer-picker-target', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerTarget', imports: [MatCardModule, MatListModule, MatIconModule, ScrollingModule, MatButtonModule], template: "<mat-card class=\"transfer-picker-target shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{committedSelection.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 scrollbar-custom\">\r\n      <mat-list dense>\r\n        @for (item of committedSelection; track $index) {\r\n          <mat-list-item class=\"transfer-picker-target-item\">\r\n            <div mat-line class=\"flex flex-row items-center\">\r\n              <div class=\"flex-1\">{{item.label}}</div>\r\n              <button type=\"button\" matIconButton  (click)=\"clearItem(item)\">\r\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        }\r\n      </mat-list>\r\n      @if (!committedSelection.length) {\r\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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: { committedSelection: [{
-                type: Input
-            }], clearItemChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-transfer-picker-target', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPickerTarget', imports: [MatCardModule, MatListModule, MatIconModule, ScrollingModule, MatButtonModule], template: "<mat-card class=\"transfer-picker-target shadow\">\r\n  <mat-card-header class=\"pb-3 items-center\">\r\n    <mat-card-title class=\"transfer-picker-target-title\">\u5DF2\u9009\u62E9 {{committedSelection().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 scrollbar-custom\">\r\n      <mat-list dense>\r\n        @for (item of committedSelection(); track $index) {\r\n          <mat-list-item class=\"transfer-picker-target-item\">\r\n            <div mat-line class=\"flex flex-row items-center\">\r\n              <div class=\"flex-1\">{{item.label}}</div>\r\n              <button type=\"button\" matIconButton  (click)=\"clearItem(item)\">\r\n                <mat-icon svgIcon=\"heroicons_solid:x-circle\"></mat-icon>\r\n              </button>\r\n            </div>\r\n          </mat-list-item>\r\n        }\r\n      </mat-list>\r\n      @if (!committedSelection().length) {\r\n        <div class=\"transfer-picker-target-empty\">\u6682\u65E0\u6570\u636E</div>\r\n      }\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-card-content>\r\n</mat-card>\r\n", 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"] }]
+        }], propDecorators: { committedSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "committedSelection", required: false }] }], clearItemChange: [{ type: i0.Output, args: ["clearItemChange"] }] } });
 
 class CmatTransferPickerComponent {
     constructor() {
-        this.committedSelection = signal([], ...(ngDevMode ? [{ debugName: "committedSelection" }] : /* istanbul ignore next */ []));
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        this.filterable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+        this.searchable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input('请输入关键字', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.dataSource = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.filters = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        this.selectedValues = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        this.selectChange = output();
+        this.committedSelection = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "committedSelection" }] : /* istanbul ignore next */ []));
+        this.source = viewChild.required(CmatTransferPickerSourceComponent);
         this._service = inject(CmatTransferPickerService);
         this._injector = inject(Injector);
-        this.filterable = true;
-        this.dataSource = [];
-        this.filters = [];
-        this.committedSelection.set([]);
-        this.selectedValues = [];
     }
     ngOnInit() {
-        this._service.dataSource = this.dataSource;
-        this._service.selectedValues = this.selectedValues;
+        this._service.dataSource = this.dataSource();
+        this._service.selectedValues = this.selectedValues();
         this._service.sourceOptions = {
-            title: this.title || '数据源',
-            filterable: this.filterable || true,
-            searchable: this.searchable || true,
-            searchPlaceholder: this.searchPlaceholder || '搜索关键字',
-            filters: this.filters || []
+            title: this.title() ?? '数据源',
+            filterable: this.filterable() || true,
+            searchable: this.searchable() || true,
+            searchPlaceholder: this.searchPlaceholder() || '搜索关键字',
+            filters: this.filters() || []
         };
-        this.selectChange = new EventEmitter();
     }
     ngAfterViewInit() {
-        if (this.selectedValues.length) {
+        if (this.selectedValues().length) {
             afterNextRender(() => {
                 this.pick();
             }, { injector: this._injector });
         }
     }
     pick() {
-        this._commitSelection(this.source.commitSelection());
+        this._commitSelection(this.source().commitSelection());
     }
     reset() {
         if (this.committedSelection().length) {
@@ -579,8 +568,8 @@ class CmatTransferPickerComponent {
     }
     onClearItemChange(item) {
         if (item) {
-            this.source.resetSelectedItem(item);
-            this._commitSelection(this.source.getCommittedSelection());
+            this.source().resetSelectedItem(item);
+            this._commitSelection(this.source().getCommittedSelection());
         }
     }
     _commitSelection(selectedList) {
@@ -590,32 +579,13 @@ class CmatTransferPickerComponent {
     _emitterChange() {
         this.selectChange.emit(this.committedSelection());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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>\r\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"pick()\">\r\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\r\n    </button>\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"reset()\">\r\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\r\n    </button>\r\n</div>\r\n<cmat-transfer-picker-target [committedSelection]=\"committedSelection()\" (clearItemChange)=\"onClearItemChange($event)\">\r\n</cmat-transfer-picker-target>\r\n", 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatTransferPickerSourceComponent, selector: "cmat-transfer-picker-source", exportAs: ["cmatTransferPickerSource"] }, { kind: "component", type: CmatTransferPickerTargetComponent, selector: "cmat-transfer-picker-target", inputs: ["committedSelection"], outputs: ["clearItemChange"], exportAs: ["cmatTransferPickerTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatTransferPickerComponent, isStandalone: true, selector: "cmat-transfer-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "source", first: true, predicate: CmatTransferPickerSourceComponent, descendants: true, isSignal: true }], exportAs: ["cmatTransferPicker"], ngImport: i0, template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\r\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"pick()\">\r\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\r\n    </button>\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"reset()\">\r\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\r\n    </button>\r\n</div>\r\n<cmat-transfer-picker-target [committedSelection]=\"committedSelection()\" (clearItemChange)=\"onClearItemChange($event)\">\r\n</cmat-transfer-picker-target>\r\n", 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatTransferPickerSourceComponent, selector: "cmat-transfer-picker-source", exportAs: ["cmatTransferPickerSource"] }, { kind: "component", type: CmatTransferPickerTargetComponent, selector: "cmat-transfer-picker-target", inputs: ["committedSelection"], outputs: ["clearItemChange"], exportAs: ["cmatTransferPickerTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatTransferPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatTransferPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-transfer-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatTransferPicker', imports: [MatIconModule, MatButtonModule, CmatTransferPickerSourceComponent, CmatTransferPickerTargetComponent], template: "<cmat-transfer-picker-source></cmat-transfer-picker-source>\r\n<div class=\"cmat-transfer-picker-operation flex flex-col flex-nowrap gap-2 mx-2\">\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"pick()\">\r\n        \u9009\u62E9<mat-icon svgIcon=\"mat_outline:chevron_right\"></mat-icon>\r\n    </button>\r\n    <button type=\"button\" class=\"pl-2\" matButton=\"filled\" color=\"primary\" (click)=\"reset()\">\r\n        <mat-icon svgIcon=\"mat_outline:chevron_left\"></mat-icon>\u91CD\u7F6E\r\n    </button>\r\n</div>\r\n<cmat-transfer-picker-target [committedSelection]=\"committedSelection()\" (clearItemChange)=\"onClearItemChange($event)\">\r\n</cmat-transfer-picker-target>\r\n", 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: () => [], propDecorators: { title: [{
-                type: Input
-            }], filterable: [{
-                type: Input
-            }], searchable: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], selectedValues: [{
-                type: Input
-            }], selectChange: [{
-                type: Output
-            }], source: [{
-                type: ViewChild,
-                args: [CmatTransferPickerSourceComponent, { static: true }]
-            }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], source: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatTransferPickerSourceComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.