cmat 0.0.86 → 0.0.88

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

@@ -0,0 +1,996 @@
+import { map, startWith, debounceTime, distinctUntilChanged, tap, switchMap, catchError } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, DestroyRef, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, ElementRef, Input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NgControl } from '@angular/forms';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i7 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i8 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i9 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { CmatPaginationComponent, CmatPaginatePipe } from 'cmat/components/pagination';
+import { EMPTY, Subject } from 'rxjs';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef, MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { CmatMediaWatcherService } from 'cmat/services/media-watcher';
+
+/**
+ * HTTP数据提供者实现
+ */
+class HttpDataPickerProvider {
+    constructor(_dataService, _config) {
+        this._dataService = _dataService;
+        this._config = _config;
+    }
+    loadPage(query) {
+        const { url, method = 'post', params = {}, searchParam = 'search', orderByField = 'orderBy', descField = 'desc', responseMapper } = this._config;
+        // 构建请求参数
+        const requestParams = { ...params };
+        // 添加分页参数（使用后端期望的字段名）
+        requestParams.pageIndex = query.page;
+        requestParams.pageSize = query.size;
+        // 添加搜索参数（支持自定义字段名）
+        if (query.search) {
+            requestParams[searchParam] = query.search;
+        }
+        // 添加排序参数（固定使用 orderBy 和 desc，但字段名可配置）
+        if (query.orderBy) {
+            requestParams[orderByField] = query.orderBy;
+            requestParams[descField] = query.desc ?? false;
+        }
+        // 根据请求方法调用不同的服务
+        const request$ = method.toLowerCase() === 'get'
+            ? this._dataService.get(url, requestParams)
+            : this._dataService.post(url, requestParams);
+        return request$.pipe(map((res) => {
+            // 如果提供了自定义映射函数，优先使用
+            if (responseMapper) {
+                return responseMapper(res);
+            }
+            // 默认映射：支持多种常见的响应格式
+            const record = res;
+            // 尝试常见的数据字段名
+            const data = (record['data'] ?? record['detail'] ?? record['items'] ?? record['list'] ?? []);
+            // 尝试常见的总数字段名
+            const total = (record['total'] ?? record['totalCount'] ?? record['count'] ?? record['totalItems'] ?? 0);
+            return {
+                data,
+                total
+            };
+        }));
+    }
+}
+/**
+ * 创建HTTP数据提供者的工厂函数
+ * @param config 数据源配置
+ * @param dataService CmatDataService 实例
+ */
+function createHttpDataProvider(config, dataService) {
+    return new HttpDataPickerProvider(dataService, config);
+}
+
+class CmatDataPickerListComponent {
+    constructor() {
+        // === 输入 ===
+        this.dataProvider = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataProvider" }] : /* istanbul ignore next */ []));
+        this.columns = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.keyField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.searchable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+        this.pageSize = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input('搜索...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.emptyText = input('暂无数据', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.paginationId = input('data-picker-pagination', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginationId" }] : /* istanbul ignore next */ []));
+        // === 输出 ===
+        this.selectionChange = output();
+        // === 内部状态 ===
+        this.items = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.selectedItems = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        // === 分页状态（统一管理） ===
+        this.pagination = signal({
+            currentPage: 1,
+            itemsPerPage: 20,
+            totalItems: 0
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        // === 排序状态 ===
+        this.sortState = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+        // === 搜索控制 ===
+        this.searchControl = new FormControl('');
+        // === 计算属性 ===
+        this.displayedColumns = computed(() => {
+            const cols = this.columns().map(c => c.key);
+            return ['_selection', ...cols];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+        this.selectedCount = computed(() => this.selectedItems().size, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+        this.isAllSelected = computed(() => {
+            if (!this.multiple() || this.items().length === 0) {
+                return false;
+            }
+            return this.items().every(item => this.selectedItems().has(this.getItemKey(item)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+        this.isIndeterminate = computed(() => {
+            if (!this.multiple()) {
+                return false;
+            }
+            const selectedCount = this.items().filter(item => this.selectedItems().has(this.getItemKey(item))).length;
+            return selectedCount > 0 && selectedCount < this.items().length;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+        this._destroyRef = inject(DestroyRef);
+        // 监听搜索变化，带防抖
+        effect(() => {
+            const provider = this.dataProvider();
+            if (!provider)
+                return;
+            untracked(() => {
+                this.searchControl.valueChanges.pipe(startWith(''), debounceTime(300), distinctUntilChanged(), tap(() => this.loading.set(true)), switchMap((search) => {
+                    // 在闭包中捕获当前的排序状态
+                    const currentSort = this.sortState();
+                    return provider.loadPage({
+                        page: 1,
+                        size: this.pagination().itemsPerPage,
+                        search: search ?? undefined,
+                        orderBy: currentSort.active,
+                        desc: currentSort.direction === 'desc'
+                    });
+                }), takeUntilDestroyed(this._destroyRef), catchError((error) => {
+                    console.error('Search failed:', error);
+                    this.items.set([]);
+                    return EMPTY;
+                })).subscribe((result) => {
+                    // 确保即使返回空数组也正确更新状态
+                    this.items.set(result.data || []);
+                    this.pagination.update(p => ({ ...p, currentPage: 1, totalItems: result.total || 0 }));
+                    this.loading.set(false);
+                });
+            });
+        });
+    }
+    /**
+     * 加载数据（公共方法，用于初始化和重置）
+     */
+    loadData() {
+        this._loadPageData(this.pagination().currentPage, this.pagination().itemsPerPage, this.searchControl.value ?? undefined);
+    }
+    /**
+     * 重置组件状态（用于重新打开时）
+     */
+    reset() {
+        // 重置分页状态
+        this.pagination.set({
+            currentPage: 1,
+            itemsPerPage: this.pageSize(),
+            totalItems: 0
+        });
+        // 重置排序状态
+        this.sortState.set({});
+        // 清空搜索（不触发事件，避免重复加载）
+        this.searchControl.setValue('', { emitEvent: false });
+        // 清空选中项
+        this.selectedItems.set(new Map());
+        // 清空数据列表
+        this.items.set([]);
+        // 重新加载数据
+        this._loadPageData(1, this.pageSize(), '', undefined, undefined);
+    }
+    /**
+     * 获取项的唯一键
+     */
+    getItemKey(item) {
+        return item[this.keyField()];
+    }
+    /**
+     * 判断是否选中
+     */
+    isSelected(item) {
+        return this.selectedItems().has(this.getItemKey(item));
+    }
+    /**
+     * 切换单个项的选中状态
+     */
+    toggleSelection(item, checked) {
+        const key = this.getItemKey(item);
+        const newMap = new Map(this.selectedItems());
+        if (checked) {
+            newMap.set(key, item);
+        }
+        else {
+            newMap.delete(key);
+        }
+        this.selectedItems.set(newMap);
+        this._emitSelectionChange();
+    }
+    /**
+     * 单选模式
+     */
+    selectSingle(item) {
+        const key = this.getItemKey(item);
+        const newMap = new Map();
+        newMap.set(key, item);
+        this.selectedItems.set(newMap);
+        this._emitSelectionChange();
+    }
+    /**
+     * 全选/取消全选当前页
+     */
+    toggleSelectAll(checked) {
+        const newMap = new Map(this.selectedItems());
+        if (checked) {
+            // 选中当前页所有项
+            this.items().forEach((item) => {
+                newMap.set(this.getItemKey(item), item);
+            });
+        }
+        else {
+            // 取消当前页所有项
+            const currentKeys = new Set(this.items().map(item => this.getItemKey(item)));
+            currentKeys.forEach(key => newMap.delete(key));
+        }
+        this.selectedItems.set(newMap);
+        this._emitSelectionChange();
+    }
+    /**
+     * 行点击事件
+     */
+    onRowClick(item) {
+        if (this.multiple()) {
+            const checked = !this.isSelected(item);
+            this.toggleSelection(item, checked);
+        }
+        else {
+            this.selectSingle(item);
+        }
+    }
+    /**
+     * 排序变化
+     */
+    onSortChange(sort) {
+        // 更新排序状态
+        this.sortState.set({
+            active: sort.active || undefined,
+            direction: sort.direction === 'asc' || sort.direction === 'desc' ? sort.direction : undefined
+        });
+        // 重置到第一页并重新加载数据
+        this.pagination.update(p => ({ ...p, currentPage: 1 }));
+        this._loadPageData(1, this.pagination().itemsPerPage, this.searchControl.value ?? undefined, sort.active || undefined, sort.direction === 'desc');
+    }
+    /**
+     * 页码变化
+     */
+    onPageChange(page) {
+        this.pagination.update(p => ({ ...p, currentPage: page }));
+        const currentSort = this.sortState();
+        this._loadPageData(page, this.pagination().itemsPerPage, this.searchControl.value ?? undefined, currentSort.active, currentSort.direction === 'desc');
+    }
+    /**
+     * 每页数量变化
+     */
+    onPageSizeChange(size) {
+        // 更新分页状态
+        this.pagination.update(p => ({ ...p, itemsPerPage: size, currentPage: 1 }));
+        // 直接使用新的 size 加载第一页数据
+        const currentSort = this.sortState();
+        this._loadPageData(1, size, this.searchControl.value ?? undefined, currentSort.active, currentSort.direction === 'desc');
+    }
+    /**
+    * 获取选中的项数组
+    */
+    getSelectedArray() {
+        return Array.from(this.selectedItems().values());
+    }
+    /**
+     * 设置选中项（用于初始化）
+     */
+    setSelectedItems(items) {
+        const newMap = new Map();
+        items.forEach((item) => {
+            newMap.set(this.getItemKey(item), item);
+        });
+        this.selectedItems.set(newMap);
+    }
+    /**
+     * 加载数据（统一入口，私有方法）
+     */
+    _loadPageData(page, size, search, orderBy, desc) {
+        const provider = this.dataProvider();
+        if (!provider) {
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        provider.loadPage({
+            page,
+            size,
+            search: search ?? undefined,
+            orderBy,
+            desc
+        }).subscribe({
+            next: (result) => {
+                // 确保即使返回空数组也正确更新状态
+                this.items.set(result.data || []);
+                this.pagination.update(p => ({ ...p, totalItems: result.total || 0 }));
+                // 无论数据是否为空，都要关闭加载状态
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Failed to load data:', error);
+                // 发生错误时也要关闭加载状态
+                this.items.set([]);
+                this.loading.set(false);
+            },
+            complete: () => {
+                // 确保在流完成时也关闭加载状态（防御性编程）
+                if (this.loading()) {
+                    this.loading.set(false);
+                }
+            }
+        });
+    }
+    /**
+     * 发出选择变化事件（私有方法）
+     */
+    _emitSelectionChange() {
+        const keys = new Set(this.selectedItems().keys());
+        this.selectionChange.emit(keys);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDataPickerListComponent, isStandalone: true, selector: "cmat-data-picker-list", inputs: { dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginationId: { classPropertyName: "paginationId", publicName: "paginationId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\r\n  <!-- \u641C\u7D22\u6846 -->\r\n  @if (searchable()) {\r\n  <div class=\"px-4 py-3 border-b\">\r\n    <mat-form-field class=\"w-full\">\r\n      <mat-icon matPrefix [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n      <input matInput [formControl]=\"searchControl\" [placeholder]=\"searchPlaceholder()\" />\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <!-- \u6570\u636E\u8868\u683C -->\r\n  <div class=\"flex-1 overflow-y-auto scrollbar-custom\">\r\n    @if (loading()) {\r\n    <div class=\"flex items-center justify-center h-full min-h-30\">\r\n      <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\r\n    </div>\r\n    } @else if (items().length === 0) {\r\n    <div class=\"flex flex-col items-center justify-center h-full py-8\">\r\n      <mat-icon class=\"icon-size-16 text-hint\" [svgIcon]=\"'heroicons_outline:inbox'\"></mat-icon>\r\n      <p class=\"mt-2 text-secondary\">{{ emptyText() }}</p>\r\n    </div>\r\n    } @else {\r\n    <table mat-table matSort class=\"w-full\"\r\n      [dataSource]=\"items() | paginate: {id:paginationId(),currentPage: pagination().currentPage, itemsPerPage: pagination().itemsPerPage, totalItems: pagination().totalItems}\"\r\n      (matSortChange)=\"onSortChange($event)\">\r\n\r\n      <!-- \u9009\u62E9\u5217 -->\r\n      <ng-container matColumnDef=\"_selection\">\r\n        <th *matHeaderCellDef mat-header-cell class=\"w-12\">\r\n          @if (multiple()) {\r\n          <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n            (change)=\"toggleSelectAll($event.checked)\">\r\n          </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let item\" mat-cell class=\"w-12\">\r\n          @if (multiple()) {\r\n          <mat-checkbox [checked]=\"isSelected(item)\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"toggleSelection(item, $event.checked)\">\r\n          </mat-checkbox>\r\n          } @else {\r\n          <mat-radio-button [checked]=\"isSelected(item)\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"selectSingle(item)\">\r\n          </mat-radio-button>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- \u6570\u636E\u5217 -->\r\n      @for (column of columns(); track column.key) {\r\n      <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell \r\n          [mat-sort-header]=\"column.sortable ? column.key : ''\"\r\n          [disabled]=\"!column.sortable\"\r\n          [start]=\"column.sortable ? 'asc' : ''\">\r\n          {{ column.name }}\r\n        </th>\r\n        <td *matCellDef=\"let item\" mat-cell>\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column.name + ':'\">\r\n            {{ item[column.key] }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"displayedColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let item; columns: displayedColumns()\" mat-row class=\"cursor-pointer\" (click)=\"onRowClick(item)\">\r\n      </tr>\r\n    </table>\r\n    }\r\n  </div>\r\n\r\n  <!-- \u5206\u9875\u5668 -->\r\n  <div class=\"border-t\">\r\n    <cmat-pagination class=\"bg-slate-50 dark:bg-transparent\" [id]=\"paginationId()\" [initPerPage]=\"pageSize()\"\r\n      [ngClass]=\"{'pointer-events-none': loading()}\" [hidden]=\"pagination().totalItems=== 0\" (pageChange)=\"onPageChange($event)\"\r\n      (perPageCountChange)=\"onPageSizeChange($event)\">\r\n    </cmat-pagination>\r\n  </div>\r\n\r\n</div>", styles: ["cmat-data-picker-list{display:flex;flex-direction:column;width:100%}cmat-data-picker-list .mat-mdc-row{border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CmatPaginationComponent, selector: "cmat-pagination", inputs: ["id", "maxSize", "itemsPerPages", "initPerPage", "autoHide"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["cmatPagination"] }, { kind: "pipe", type: CmatPaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatProgressSpinnerModule,
+                        MatRadioModule,
+                        MatSortModule,
+                        MatTableModule,
+                        CmatPaginationComponent,
+                        CmatPaginatePipe
+                    ], template: "<div class=\"flex flex-col h-full\">\r\n  <!-- \u641C\u7D22\u6846 -->\r\n  @if (searchable()) {\r\n  <div class=\"px-4 py-3 border-b\">\r\n    <mat-form-field class=\"w-full\">\r\n      <mat-icon matPrefix [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n      <input matInput [formControl]=\"searchControl\" [placeholder]=\"searchPlaceholder()\" />\r\n    </mat-form-field>\r\n  </div>\r\n  }\r\n\r\n  <!-- \u6570\u636E\u8868\u683C -->\r\n  <div class=\"flex-1 overflow-y-auto scrollbar-custom\">\r\n    @if (loading()) {\r\n    <div class=\"flex items-center justify-center h-full min-h-30\">\r\n      <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\r\n    </div>\r\n    } @else if (items().length === 0) {\r\n    <div class=\"flex flex-col items-center justify-center h-full py-8\">\r\n      <mat-icon class=\"icon-size-16 text-hint\" [svgIcon]=\"'heroicons_outline:inbox'\"></mat-icon>\r\n      <p class=\"mt-2 text-secondary\">{{ emptyText() }}</p>\r\n    </div>\r\n    } @else {\r\n    <table mat-table matSort class=\"w-full\"\r\n      [dataSource]=\"items() | paginate: {id:paginationId(),currentPage: pagination().currentPage, itemsPerPage: pagination().itemsPerPage, totalItems: pagination().totalItems}\"\r\n      (matSortChange)=\"onSortChange($event)\">\r\n\r\n      <!-- \u9009\u62E9\u5217 -->\r\n      <ng-container matColumnDef=\"_selection\">\r\n        <th *matHeaderCellDef mat-header-cell class=\"w-12\">\r\n          @if (multiple()) {\r\n          <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n            (change)=\"toggleSelectAll($event.checked)\">\r\n          </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let item\" mat-cell class=\"w-12\">\r\n          @if (multiple()) {\r\n          <mat-checkbox [checked]=\"isSelected(item)\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"toggleSelection(item, $event.checked)\">\r\n          </mat-checkbox>\r\n          } @else {\r\n          <mat-radio-button [checked]=\"isSelected(item)\" (click)=\"$event.stopPropagation()\"\r\n            (change)=\"selectSingle(item)\">\r\n          </mat-radio-button>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- \u6570\u636E\u5217 -->\r\n      @for (column of columns(); track column.key) {\r\n      <ng-container [matColumnDef]=\"column.key\">\r\n        <th *matHeaderCellDef mat-header-cell \r\n          [mat-sort-header]=\"column.sortable ? column.key : ''\"\r\n          [disabled]=\"!column.sortable\"\r\n          [start]=\"column.sortable ? 'asc' : ''\">\r\n          {{ column.name }}\r\n        </th>\r\n        <td *matCellDef=\"let item\" mat-cell>\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column.name + ':'\">\r\n            {{ item[column.key] }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"displayedColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let item; columns: displayedColumns()\" mat-row class=\"cursor-pointer\" (click)=\"onRowClick(item)\">\r\n      </tr>\r\n    </table>\r\n    }\r\n  </div>\r\n\r\n  <!-- \u5206\u9875\u5668 -->\r\n  <div class=\"border-t\">\r\n    <cmat-pagination class=\"bg-slate-50 dark:bg-transparent\" [id]=\"paginationId()\" [initPerPage]=\"pageSize()\"\r\n      [ngClass]=\"{'pointer-events-none': loading()}\" [hidden]=\"pagination().totalItems=== 0\" (pageChange)=\"onPageChange($event)\"\r\n      (perPageCountChange)=\"onPageSizeChange($event)\">\r\n    </cmat-pagination>\r\n  </div>\r\n\r\n</div>", styles: ["cmat-data-picker-list{display:flex;flex-direction:column;width:100%}cmat-data-picker-list .mat-mdc-row{border-width:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], paginationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+class CmatDataPickerSheetComponent {
+    constructor() {
+        this.data = inject(MAT_BOTTOM_SHEET_DATA);
+        this.title = computed(() => this.data.multiple ? '选择多项' : '选择一项', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this._listComponent = viewChild.required((CmatDataPickerListComponent));
+        this._bottomSheetRef = inject((MatBottomSheetRef));
+        this._selectedKeys = new Set();
+        // 初始化选中项
+        if (this.data.initialSelection && this.data.initialSelection.length > 0) {
+            const keys = this.data.initialSelection.map(item => item[this.data.keyField]);
+            this._selectedKeys = new Set(keys);
+        }
+    }
+    ngAfterViewInit() {
+        // 在视图初始化后，如果已有选中项，设置到 list 组件
+        if (this.data.initialSelection && this.data.initialSelection.length > 0) {
+            this._listComponent().setSelectedItems(this.data.initialSelection);
+        }
+    }
+    onSelectionChange(keys) {
+        this._selectedKeys = keys;
+    }
+    dismiss() {
+        this._bottomSheetRef.dismiss();
+    }
+    confirm() {
+        const selectedItems = this._listComponent().getSelectedArray();
+        const result = this.data.multiple ? selectedItems : (selectedItems[0] ?? null);
+        this._bottomSheetRef.dismiss(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatDataPickerSheetComponent, isStandalone: true, selector: "cmat-data-picker-sheet", viewQueries: [{ propertyName: "_listComponent", first: true, predicate: (CmatDataPickerListComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full max-h-[70vh] -mx-4\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-4 py-3 border-b bg-card\">\r\n    <h2 class=\"text-lg font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-4 py-3 border-t flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatDataPickerListComponent, selector: "cmat-data-picker-list", inputs: ["dataProvider", "columns", "keyField", "multiple", "searchable", "pageSize", "searchPlaceholder", "emptyText", "paginationId"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        CmatDataPickerListComponent
+                    ], template: "<div class=\"flex flex-col h-full max-h-[70vh] -mx-4\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-4 py-3 border-b bg-card\">\r\n    <h2 class=\"text-lg font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-4 py-3 border-t flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>", styles: [":host{display:block;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _listComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatDataPickerListComponent), { isSignal: true }] }] } });
+
+class CmatDataPickerDialogComponent {
+    constructor() {
+        this.data = inject(MAT_DIALOG_DATA);
+        this.title = computed(() => this.data.multiple ? '选择多项' : '选择一项', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this._listComponent = viewChild.required((CmatDataPickerListComponent));
+        this._dialogRef = inject((MatDialogRef));
+        this._selectedKeys = new Set();
+        // 初始化选中项
+        if (this.data.initialSelection && this.data.initialSelection.length > 0) {
+            const keys = this.data.initialSelection.map(item => item[this.data.keyField]);
+            this._selectedKeys = new Set(keys);
+        }
+    }
+    ngAfterViewInit() {
+        // 在视图初始化后，如果已有选中项，设置到 list 组件
+        if (this.data.initialSelection && this.data.initialSelection.length > 0) {
+            this._listComponent().setSelectedItems(this.data.initialSelection);
+        }
+    }
+    onSelectionChange(keys) {
+        this._selectedKeys = keys;
+    }
+    dismiss() {
+        this._dialogRef.close();
+    }
+    confirm() {
+        const selectedItems = this._listComponent().getSelectedArray();
+        const result = this.data.multiple ? selectedItems : (selectedItems[0] ?? null);
+        this._dialogRef.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatDataPickerDialogComponent, isStandalone: true, selector: "cmat-data-picker-dialog", viewQueries: [{ propertyName: "_listComponent", first: true, predicate: (CmatDataPickerListComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full max-h-[80vh]\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-6 py-4 border-b\">\r\n    <h2 class=\"text-xl font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-6 py-4 border-t flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatDataPickerListComponent, selector: "cmat-data-picker-list", inputs: ["dataProvider", "columns", "keyField", "multiple", "searchable", "pageSize", "searchPlaceholder", "emptyText", "paginationId"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        CmatDataPickerListComponent
+                    ], template: "<div class=\"flex flex-col h-full max-h-[80vh]\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-6 py-4 border-b\">\r\n    <h2 class=\"text-xl font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-6 py-4 border-t flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { _listComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatDataPickerListComponent), { isSignal: true }] }] } });
+
+class CmatDataPickerDrawerComponent {
+    constructor() {
+        this.title = computed(() => this.data?.multiple ? '选择多项' : '选择一项', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this._listComponent = viewChild.required((CmatDataPickerListComponent));
+        this._selectedKeys = new Set();
+    }
+    ngAfterViewInit() {
+        // 在视图初始化后，如果已有选中项，设置到 list 组件
+        if (this.data.initialSelection && this.data.initialSelection.length > 0) {
+            const keys = this.data.initialSelection.map(item => item[this.data.keyField]);
+            this._selectedKeys = new Set(keys);
+            this._listComponent().setSelectedItems(this.data.initialSelection);
+        }
+    }
+    onSelectionChange(keys) {
+        this._selectedKeys = keys;
+    }
+    dismiss() {
+        // 触发关闭回调
+        if (this.data.onClose) {
+            this.data.onClose();
+        }
+    }
+    confirm() {
+        const selectedItems = this._listComponent().getSelectedArray();
+        const result = this.data.multiple ? selectedItems : (selectedItems[0] ?? null);
+        if (this.data.onConfirm) {
+            this.data.onConfirm(result);
+        }
+        // 确认后也要关闭
+        if (this.data.onClose) {
+            this.data.onClose();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatDataPickerDrawerComponent, isStandalone: true, selector: "cmat-data-picker-drawer", viewQueries: [{ propertyName: "_listComponent", first: true, predicate: (CmatDataPickerListComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-6 py-4 border-b bg-card\">\r\n    <h2 class=\"text-xl font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-6 py-4 border-t bg-card flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>", styles: ["cmat-data-picker-drawer{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatDataPickerListComponent, selector: "cmat-data-picker-list", inputs: ["dataProvider", "columns", "keyField", "multiple", "searchable", "pageSize", "searchPlaceholder", "emptyText", "paginationId"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        CmatDataPickerListComponent
+                    ], template: "<div class=\"flex flex-col h-full\">\r\n  <!-- \u5934\u90E8 -->\r\n  <div class=\"flex items-center justify-between px-6 py-4 border-b bg-card\">\r\n    <h2 class=\"text-xl font-semibold\">{{ title() }}</h2>\r\n    <button matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u5217\u8868\u5185\u5BB9 -->\r\n  <div class=\"flex-1 overflow-hidden min-h-0 flex\">\r\n    <cmat-data-picker-list [dataProvider]=\"data.dataProvider\" [columns]=\"data.columns\" [keyField]=\"data.keyField\"\r\n      [multiple]=\"data.multiple\" [searchable]=\"data.searchable\" [pageSize]=\"data.pageSize\"\r\n      (selectionChange)=\"onSelectionChange($event)\">\r\n    </cmat-data-picker-list>\r\n  </div>\r\n\r\n  <!-- \u5E95\u90E8\u64CD\u4F5C\u680F -->\r\n  <div class=\"px-6 py-4 border-t bg-card flex justify-end gap-2\">\r\n    <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">\r\n      \u786E\u5B9A\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"dismiss()\">\u53D6\u6D88</button>\r\n  </div>\r\n</div>", styles: ["cmat-data-picker-drawer{display:block;width:100%}\n"] }]
+        }], propDecorators: { _listComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatDataPickerListComponent), { isSignal: true }] }] } });
+
+let NEXT_ID = 0;
+class CmatDataPickerComponent {
+    constructor() {
+        this.id = `cmat-data-picker-${NEXT_ID++}`;
+        this.stateChanges = new Subject();
+        this.controlType = 'cmat-data-picker';
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.apiUrl = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "apiUrl" }] : /* istanbul ignore next */ []));
+        this.dataSource = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.dataProvider = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : /* istanbul ignore next */ []));
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.keyField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        this.labelField = input('name', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelField" }] : /* istanbul ignore next */ []));
+        this.displayTemplate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
+        this.displayLabelFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "displayLabelFn" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.searchable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+        this.debounceTime = input(300, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+        this.pageSize = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.uiMode = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiMode" }] : /* istanbul ignore next */ []));
+        this.drawerPosition = input('end', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawerPosition" }] : /* istanbul ignore next */ []));
+        this.drawerWidth = input('600px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawerWidth" }] : /* istanbul ignore next */ []));
+        this.dialogWidth = input('800px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogWidth" }] : /* istanbul ignore next */ []));
+        this.dialogMaxHeight = input('80vh', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogMaxHeight" }] : /* istanbul ignore next */ []));
+        this.selectionChange = output();
+        this.selectedItems = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        this._placeholderSignal = signal('请选择...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_placeholderSignal" }] : /* istanbul ignore next */ []));
+        this._disabledSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : /* istanbul ignore next */ []));
+        this._requiredSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_requiredSignal" }] : /* istanbul ignore next */ []));
+        this._focusedSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_focusedSignal" }] : /* istanbul ignore next */ []));
+        this._valueSignal = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_valueSignal" }] : /* istanbul ignore next */ []));
+        this._formField = inject(MatFormField, { optional: true });
+        this._overlay = inject(Overlay);
+        this._bottomSheet = inject(MatBottomSheet);
+        this._dialog = inject(MatDialog);
+        this._cmatMediaWatcherService = inject(CmatMediaWatcherService);
+        this._elementRef = inject(ElementRef);
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.isHandSet = computed(() => {
+            return !this._cmatMediaWatcherService.mediaChange().matchingAliases.includes('lg');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHandSet" }] : /* istanbul ignore next */ []));
+        // === Internal Callbacks ===
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get appearanceIsFill() {
+        if (this._formField?.appearance === 'fill') {
+            return true;
+        }
+        return false;
+    }
+    get focused() {
+        return this._focusedSignal();
+    }
+    get empty() {
+        return this.selectedItems().size === 0;
+    }
+    get errorState() {
+        if (this.ngControl == null) {
+            return false;
+        }
+        return (this.ngControl.invalid && (this.ngControl.dirty ?? this.ngControl.touched)) ?? false;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    get placeholder() {
+        return this._placeholderSignal();
+    }
+    set placeholder(value) {
+        this._placeholderSignal.set(value);
+        this.stateChanges.next();
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    get value() {
+        return this._valueSignal();
+    }
+    set value(val) {
+        if (val !== this._valueSignal()) {
+            this._valueSignal.set(val);
+            // 同步更新 selectedItems
+            if (val === null || val === undefined) {
+                this.selectedItems.set(new Map());
+            }
+            else if (Array.isArray(val)) {
+                const newMap = new Map();
+                val.forEach((item) => {
+                    const key = item[this.keyField()];
+                    newMap.set(key, item);
+                });
+                this.selectedItems.set(newMap);
+            }
+            else {
+                const newMap = new Map();
+                const key = val[this.keyField()];
+                newMap.set(key, val);
+                this.selectedItems.set(newMap);
+            }
+            this.stateChanges.next();
+            this._onChange(val);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    get required() {
+        return this._requiredSignal();
+    }
+    set required(value) {
+        this._requiredSignal.set(coerceBooleanProperty(value));
+        this.stateChanges.next();
+    }
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    get disabled() {
+        if (this.ngControl?.disabled != null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabledSignal();
+    }
+    set disabled(value) {
+        const coerced = coerceBooleanProperty(value);
+        this._disabledSignal.set(coerced);
+        this.stateChanges.next();
+    }
+    ngOnInit() {
+        // Initialize data provider if needed
+        const ds = this.dataSource();
+        const url = this.apiUrl();
+        if (url && !ds) {
+            // Cannot set input() signals, log warning for parent component to handle
+            console.warn('apiUrl is provided without dataSource. Please provide complete dataSource or dataProvider from parent component.');
+        }
+        if (!this.dataProvider() && ds) {
+            // Create provider internally but cannot update the input signal
+            // Parent component should provide dataProvider directly
+            console.warn('dataSource is provided without dataProvider. Please create dataProvider using createHttpDataProvider in parent component.');
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    setDescribedByIds(ids) {
+        if (ids.length) {
+            this.userAriaDescribedBy = ids.join(' ');
+            this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this.userAriaDescribedBy = undefined;
+            this._elementRef.nativeElement.removeAttribute('aria-describedby');
+        }
+        this.stateChanges.next();
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this.openPicker();
+        }
+    }
+    writeValue(value) {
+        this._valueSignal.set(value);
+        if (value === null || value === undefined) {
+            this.selectedItems.set(new Map());
+        }
+        else if (Array.isArray(value)) {
+            const newMap = new Map();
+            value.forEach((item) => {
+                const key = item[this.keyField()];
+                newMap.set(key, item);
+            });
+            this.selectedItems.set(newMap);
+        }
+        else {
+            const newMap = new Map();
+            const key = value[this.keyField()];
+            newMap.set(key, value);
+            this.selectedItems.set(newMap);
+        }
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * Open picker
+     */
+    openPicker() {
+        if (this.disabled) {
+            return;
+        }
+        const mode = this.resolveUIMode();
+        const data = this.getPickerData();
+        switch (mode) {
+            case 'bottom-sheet':
+                this.openBottomSheet(data);
+                break;
+            case 'dialog':
+                this.openDialog(data);
+                break;
+            case 'drawer':
+                this.openDrawer();
+                break;
+        }
+        this._onTouched();
+    }
+    removeItem(item) {
+        const key = item[this.keyField()];
+        const newMap = new Map(this.selectedItems());
+        newMap.delete(key);
+        const selectedArray = Array.from(newMap.values());
+        const finalValue = this.multiple() ? selectedArray : (selectedArray[0] ?? null);
+        // 直接设置 value，它会同时更新 _valueSignal、selectedItems，并触发 _onChange
+        this.value = finalValue;
+        this.selectionChange.emit(finalValue);
+    }
+    hasValue() {
+        return this.selectedItems().size > 0;
+    }
+    getDisplayLabel(item) {
+        // First use custom function
+        const labelFn = this.displayLabelFn();
+        if (labelFn) {
+            return labelFn(item);
+        }
+        // Second use template
+        const template = this.displayTemplate();
+        if (template) {
+            return this.formatTemplate(template, item);
+        }
+        // Default use labelField
+        return item[this.labelField()] ?? String(item);
+    }
+    /**
+     * Get selected items array
+     */
+    getSelectedArray() {
+        return Array.from(this.selectedItems().values());
+    }
+    /**
+     * Handle focus event
+     */
+    onFocusIn() {
+        if (!this.focused) {
+            this._focusedSignal.set(true);
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Handle blur event
+     */
+    onFocusOut() {
+        if (this.focused) {
+            this._focusedSignal.set(false);
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Resolve UI mode
+     */
+    resolveUIMode() {
+        const mode = this.uiMode();
+        if (mode !== 'auto') {
+            return mode;
+        }
+        return this.isHandSet() ? 'bottom-sheet' : 'dialog';
+    }
+    /**
+     * Get picker data
+     */
+    getPickerData() {
+        return {
+            dataProvider: this.dataProvider(),
+            columns: this.columns(),
+            keyField: this.keyField(),
+            multiple: this.multiple(),
+            searchable: this.searchable(),
+            pageSize: this.pageSize(),
+            initialSelection: Array.from(this.selectedItems().values()),
+        };
+    }
+    /**
+     * Open BottomSheet
+     */
+    openBottomSheet(data) {
+        const sheetRef = this._bottomSheet.open(CmatDataPickerSheetComponent, {
+            data,
+        });
+        sheetRef.afterDismissed().subscribe((result) => {
+            if (result !== undefined) {
+                this.updateSelection(result);
+            }
+        });
+    }
+    /**
+     * Open Dialog
+     */
+    openDialog(data) {
+        const dialogRef = this._dialog.open(CmatDataPickerDialogComponent, {
+            width: this.dialogWidth(),
+            maxHeight: this.dialogMaxHeight(),
+            data,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result !== undefined) {
+                this.updateSelection(result);
+            }
+        });
+    }
+    /**
+     * Open Drawer
+     */
+    openDrawer() {
+        // 创建 Overlay 配置
+        const positionStrategy = this.drawerPosition() === 'end'
+            ? this._overlay.position().global().right('0')
+            : this._overlay.position().global().left('0');
+        const overlayRef = this._overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            positionStrategy,
+            width: this.drawerWidth(),
+            height: '100%',
+            panelClass: ['cmat-data-picker-drawer-overlay', 'cmat-drawer-enter'],
+        });
+        // 创建 Drawer 组件实例
+        const drawerPortal = new ComponentPortal(CmatDataPickerDrawerComponent);
+        const drawerRef = overlayRef.attach(drawerPortal);
+        // 传递数据到 Drawer 组件
+        const data = {
+            dataProvider: this.dataProvider(),
+            columns: this.columns(),
+            keyField: this.keyField(),
+            multiple: this.multiple(),
+            searchable: this.searchable(),
+            pageSize: this.pageSize(),
+            initialSelection: Array.from(this.selectedItems().values()),
+            onConfirm: (result) => {
+                if (result !== undefined) {
+                    this.updateSelection(result);
+                }
+            },
+            onClose: () => {
+                // 添加退出动画类
+                const paneElement = overlayRef.overlayElement;
+                if (paneElement) {
+                    paneElement.classList.remove('cmat-drawer-enter');
+                    paneElement.classList.add('cmat-drawer-leave');
+                    // 等待动画完成后销毁
+                    setTimeout(() => {
+                        overlayRef.dispose();
+                    }, 300);
+                }
+                else {
+                    overlayRef.dispose();
+                }
+            },
+        };
+        drawerRef.instance.data = data;
+        // 监听背景点击关闭
+        overlayRef.backdropClick().subscribe(() => {
+            const paneElement = overlayRef.overlayElement;
+            if (paneElement) {
+                paneElement.classList.remove('cmat-drawer-enter');
+                paneElement.classList.add('cmat-drawer-leave');
+                setTimeout(() => {
+                    overlayRef.dispose();
+                }, 300);
+            }
+            else {
+                overlayRef.dispose();
+            }
+        });
+        // 组件销毁时清理资源
+        overlayRef.detachments().subscribe(() => {
+            overlayRef.dispose();
+        });
+    }
+    /**
+     * Update selection
+     */
+    updateSelection(newValue) {
+        // 直接设置 value，它会同时更新 _valueSignal、selectedItems，并触发 _onChange
+        this.value = newValue;
+        this.selectionChange.emit(newValue);
+    }
+    /**
+     * Format template string
+     * 支持两种格式：
+     * 1. Mustache 风格: {{name}} ({{department}})
+     * 2. 模板字符串风格: ${name} (${department})
+     */
+    formatTemplate(template, item) {
+        const record = item;
+        // 先处理 Mustache 风格: {{key}}
+        let result = template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+            const value = record[key];
+            return value ?? '';
+        });
+        // 再处理模板字符串风格: ${key}
+        result = result.replace(/\$\{(\w+)\}/g, (_, key) => {
+            const value = record[key];
+            return value ?? '';
+        });
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDataPickerComponent, isStandalone: true, selector: "cmat-data-picker", inputs: { apiUrl: { classPropertyName: "apiUrl", publicName: "apiUrl", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, displayLabelFn: { classPropertyName: "displayLabelFn", publicName: "displayLabelFn", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, uiMode: { classPropertyName: "uiMode", publicName: "uiMode", isSignal: true, isRequired: false, transformFunction: null }, drawerPosition: { classPropertyName: "drawerPosition", publicName: "drawerPosition", isSignal: true, isRequired: false, transformFunction: null }, drawerWidth: { classPropertyName: "drawerWidth", publicName: "drawerWidth", isSignal: true, isRequired: false, transformFunction: null }, dialogWidth: { classPropertyName: "dialogWidth", publicName: "dialogWidth", isSignal: true, isRequired: false, transformFunction: null }, dialogMaxHeight: { classPropertyName: "dialogMaxHeight", publicName: "dialogMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.id": "id" } }, providers: [
+            { provide: MatFormFieldControl, useExisting: CmatDataPickerComponent }
+        ], ngImport: i0, template: "<div class=\"cmat-data-picker\">\r\n  <!-- \u89E6\u53D1\u5668 -->\r\n  <div class=\"picker-trigger\" tabindex=\"0\" role=\"button\" [class.has-value]=\"hasValue()\" [class.disabled]=\"disabled\"\r\n    (click)=\"openPicker()\" (focus)=\"onFocusIn()\" (blur)=\"onFocusOut()\" (keydown.enter)=\"openPicker()\"\r\n    (keydown.space)=\"$event.preventDefault(); openPicker()\">\r\n\r\n    @if (selectedItems().size > 0) {\r\n    <mat-chip-grid class=\"items-center\">\r\n      @for (item of getSelectedArray(); track item) {\r\n      <mat-chip-row (removed)=\"removeItem(item)\">\r\n        {{ getDisplayLabel(item) }}\r\n        <button matChipRemove class=\"print:hidden\">\r\n          <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_solid:cancel'\"></mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n    } @else {\r\n    <span class=\"placeholder\">{{appearanceIsFill? placeholder:''}}</span>\r\n    }\r\n\r\n    <mat-icon class=\"trigger-icon\" [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  </div>\r\n</div>", styles: ["cmat-data-picker{width:100%}.cmat-data-picker{width:100%}.picker-trigger{display:flex;align-items:center;box-sizing:border-box}.picker-trigger .placeholder{color:#0009;line-height:1;display:inline-block}.picker-trigger .trigger-icon{margin-right:-6px}.cmat-data-picker-drawer-overlay{box-shadow:-2px 0 8px #00000026;z-index:2000}.cmat-data-picker-drawer-overlay.cmat-drawer-enter{animation:slideInFromRight .3s ease-out}.cmat-data-picker-drawer-overlay.cmat-drawer-leave{animation:slideOutToRight .3s ease-in forwards}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"]{box-shadow:2px 0 8px #00000026}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"].cmat-drawer-enter{animation:slideInFromLeft .3s ease-out}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"].cmat-drawer-leave{animation:slideOutToLeft .3s ease-in forwards}@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDataPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-data-picker', providers: [
+                        { provide: MatFormFieldControl, useExisting: CmatDataPickerComponent }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        MatChipsModule,
+                        MatIconModule
+                    ], host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[attr.id]': 'id'
+                    }, template: "<div class=\"cmat-data-picker\">\r\n  <!-- \u89E6\u53D1\u5668 -->\r\n  <div class=\"picker-trigger\" tabindex=\"0\" role=\"button\" [class.has-value]=\"hasValue()\" [class.disabled]=\"disabled\"\r\n    (click)=\"openPicker()\" (focus)=\"onFocusIn()\" (blur)=\"onFocusOut()\" (keydown.enter)=\"openPicker()\"\r\n    (keydown.space)=\"$event.preventDefault(); openPicker()\">\r\n\r\n    @if (selectedItems().size > 0) {\r\n    <mat-chip-grid class=\"items-center\">\r\n      @for (item of getSelectedArray(); track item) {\r\n      <mat-chip-row (removed)=\"removeItem(item)\">\r\n        {{ getDisplayLabel(item) }}\r\n        <button matChipRemove class=\"print:hidden\">\r\n          <mat-icon class=\"icon-size-5\" [svgIcon]=\"'mat_solid:cancel'\"></mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n    } @else {\r\n    <span class=\"placeholder\">{{appearanceIsFill? placeholder:''}}</span>\r\n    }\r\n\r\n    <mat-icon class=\"trigger-icon\" [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  </div>\r\n</div>", styles: ["cmat-data-picker{width:100%}.cmat-data-picker{width:100%}.picker-trigger{display:flex;align-items:center;box-sizing:border-box}.picker-trigger .placeholder{color:#0009;line-height:1;display:inline-block}.picker-trigger .trigger-icon{margin-right:-6px}.cmat-data-picker-drawer-overlay{box-shadow:-2px 0 8px #00000026;z-index:2000}.cmat-data-picker-drawer-overlay.cmat-drawer-enter{animation:slideInFromRight .3s ease-out}.cmat-data-picker-drawer-overlay.cmat-drawer-leave{animation:slideOutToRight .3s ease-in forwards}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"]{box-shadow:2px 0 8px #00000026}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"].cmat-drawer-enter{animation:slideInFromLeft .3s ease-out}.cmat-data-picker-drawer-overlay[style*=\"left: 0\"].cmat-drawer-leave{animation:slideOutToLeft .3s ease-in forwards}@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes slideOutToLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { apiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "apiUrl", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], displayLabelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLabelFn", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], uiMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiMode", required: false }] }], drawerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerPosition", required: false }] }], drawerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerWidth", required: false }] }], dialogWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogWidth", required: false }] }], dialogMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogMaxHeight", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatDataPickerComponent, CmatDataPickerDialogComponent, CmatDataPickerDrawerComponent, CmatDataPickerListComponent, CmatDataPickerSheetComponent, HttpDataPickerProvider, createHttpDataProvider };
+//# sourceMappingURL=cmat-components-data-picker.mjs.map