@piying-lib/angular-daisyui 1.0.0

package/fesm2022/piying-lib-angular-daisyui-extension.mjs

@@ -0,0 +1,1356 @@
+import { NgTemplateOutlet, NgClass, JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, input, inject, computed, Component, model, InjectionToken, Injector, untracked, signal, resource, Injectable, ElementRef, HostListener, Directive, linkedSignal, NgZone, EventEmitter, TemplateRef, ViewContainerRef, Output, forwardRef, ChangeDetectionStrategy, effect } from '@angular/core';
+import { SelectorlessOutlet } from '@cyia/ngx-common/directive';
+import { StrOrTemplateComponent, isSchema, computedWithPrev, DefaultOptionConvert, transformOption } from '@piying-lib/angular-core';
+import { CssPrefixPipe, MergeClassPipe, TwPrefixPipe } from '@piying-lib/angular-daisyui/pipe';
+import { ThemeService, CheckboxService } from '@piying-lib/angular-daisyui/service';
+import { AttributesDirective, PI_VIEW_FIELD_TOKEN, PiyingViewGroupBase, InsertFieldDirective, BaseControl, PiyingView, PI_INPUT_OPTIONS_TOKEN } from '@piying/view-angular';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { PurePipe } from '@cyia/ngx-common/pipe';
+import clsx from 'clsx';
+import * as v from 'valibot';
+import { setComponent, NFCSchema, actions } from '@piying/view-angular-core';
+import { ThWC, TdWC } from '@piying-lib/angular-daisyui/wrapper';
+import { Subject, filter, BehaviorSubject, Subscription } from 'rxjs';
+import { Directionality } from '@angular/cdk/bidi';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { createRepositionScrollStrategy, createOverlayRef, OverlayConfig, createFlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeWhile } from 'rxjs/operators';
+
+const routerLinkActiveOptions = { exact: false };
+class MenuTreeNFCC {
+    static __version = 2;
+    routerLinkActiveOptions = routerLinkActiveOptions;
+    StrOrTemplateComponent = StrOrTemplateComponent;
+    templateRef = viewChild.required('templateRef');
+    list = input([], ...(ngDevMode ? [{ debugName: "list" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    #theme = inject(ThemeService);
+    wrapperClass$ = computed(() => {
+        return this.#theme.setClass(this.#theme.addPrefix('menu'), this.#theme.addPrefix2('menu', this.direction()), this.#theme.setSize('menu', this.size()));
+    }, ...(ngDevMode ? [{ debugName: "wrapperClass$" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MenuTreeNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MenuTreeNFCC, isStandalone: true, selector: "app-menu-tree", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #liBaseContent let-item>\n  @if (item.icon; as icon) {\n    <mat-icon\n      [inline]=\"icon.inline\"\n      [fontIcon]=\"icon.fontIcon\"\n      [fontSet]=\"icon.fontSet\"\n      [svgIcon]=\"icon.svgIcon\"\n    ></mat-icon>\n  }\n  <span>\n    {{ item.title }}\n  </span>\n  @if (item.badge; as badge) {\n    <span [class]=\"badge.class | mergeClass: 'badge' | cssPrefix\">{{ badge.title }}</span>\n  }\n</ng-template>\n\n<ng-template #liBase let-item>\n  @if (item.router) {\n    @let router = item.router;\n    <a\n      [queryParams]=\"router.queryParams\"\n      [fragment]=\"router.fragment\"\n      [queryParamsHandling]=\"router.queryParamsHandling\"\n      [state]=\"router.state\"\n      [info]=\"router.info\"\n      [relativeTo]=\"router.relativeTo\"\n      [target]=\"router.target\"\n      [preserveFragment]=\"router.preserveFragment\"\n      [skipLocationChange]=\"router.skipLocationChange\"\n      [replaceUrl]=\"router.replaceUrl\"\n      [routerLink]=\"router.routerLink\"\n      [preserveFragment]=\"router.preserveFragment\"\n      [routerLinkActive]=\"'menu-active'\"\n      [routerLinkActiveOptions]=\"\n        router.activate?.routerLinkActiveOptions ?? routerLinkActiveOptions\n      \"\n      [ariaCurrentWhenActive]=\"router.activate?.ariaCurrentWhenActive ?? undefined\"\n      class=\"tooltip\"\n      [attr.data-tip]=\"item.tooltip || ''\"\n    >\n      <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else if (item.href) {\n    <a [href]=\"item.href\" [target]=\"item.target\">\n      <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n  }\n</ng-template>\n<ng-template #liGroup let-item>\n  <!-- todo open\u6D4B\u8BD5 -->\n  <details open>\n    <summary>{{ item.title }}</summary>\n    <ul>\n      @for (child of item.children; track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n        ></ng-container>\n      }\n    </ul>\n  </details>\n</ng-template>\n\n<ng-template #itemTemplate let-item>\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n    @switch (item.type) {\n      @case ('group') {\n        <li class=\"tooltip\" [attr.data-tip]=\"item.tooltip || ''\">\n          <ng-container *ngTemplateOutlet=\"liGroup; context: { $implicit: item }\"></ng-container>\n        </li>\n      }\n      @case ('divider') {\n        <li></li>\n      }\n      @default {\n        <li class=\"tooltip\" [attr.data-tip]=\"item.tooltip || ''\">\n          <ng-container *ngTemplateOutlet=\"liBase; context: { $implicit: item }\"></ng-container>\n        </li>\n      }\n    }\n  }\n</ng-template>\n<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [class]=\"wrapperClass$() | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    @for (child of list(); track $index) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"></ng-container>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MenuTreeNFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-menu-tree', imports: [
+                        AttributesDirective,
+                        NgClass,
+                        CssPrefixPipe,
+                        SelectorlessOutlet,
+                        StrOrTemplateComponent,
+                        RouterLink,
+                        RouterLinkActive,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MergeClassPipe,
+                        JsonPipe,
+                        MergeClassPipe,
+                    ], template: "<ng-template #liBaseContent let-item>\n  @if (item.icon; as icon) {\n    <mat-icon\n      [inline]=\"icon.inline\"\n      [fontIcon]=\"icon.fontIcon\"\n      [fontSet]=\"icon.fontSet\"\n      [svgIcon]=\"icon.svgIcon\"\n    ></mat-icon>\n  }\n  <span>\n    {{ item.title }}\n  </span>\n  @if (item.badge; as badge) {\n    <span [class]=\"badge.class | mergeClass: 'badge' | cssPrefix\">{{ badge.title }}</span>\n  }\n</ng-template>\n\n<ng-template #liBase let-item>\n  @if (item.router) {\n    @let router = item.router;\n    <a\n      [queryParams]=\"router.queryParams\"\n      [fragment]=\"router.fragment\"\n      [queryParamsHandling]=\"router.queryParamsHandling\"\n      [state]=\"router.state\"\n      [info]=\"router.info\"\n      [relativeTo]=\"router.relativeTo\"\n      [target]=\"router.target\"\n      [preserveFragment]=\"router.preserveFragment\"\n      [skipLocationChange]=\"router.skipLocationChange\"\n      [replaceUrl]=\"router.replaceUrl\"\n      [routerLink]=\"router.routerLink\"\n      [preserveFragment]=\"router.preserveFragment\"\n      [routerLinkActive]=\"'menu-active'\"\n      [routerLinkActiveOptions]=\"\n        router.activate?.routerLinkActiveOptions ?? routerLinkActiveOptions\n      \"\n      [ariaCurrentWhenActive]=\"router.activate?.ariaCurrentWhenActive ?? undefined\"\n      class=\"tooltip\"\n      [attr.data-tip]=\"item.tooltip || ''\"\n    >\n      <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else if (item.href) {\n    <a [href]=\"item.href\" [target]=\"item.target\">\n      <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"liBaseContent; context: { $implicit: item }\"></ng-container>\n  }\n</ng-template>\n<ng-template #liGroup let-item>\n  <!-- todo open\u6D4B\u8BD5 -->\n  <details open>\n    <summary>{{ item.title }}</summary>\n    <ul>\n      @for (child of item.children; track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n        ></ng-container>\n      }\n    </ul>\n  </details>\n</ng-template>\n\n<ng-template #itemTemplate let-item>\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n    @switch (item.type) {\n      @case ('group') {\n        <li class=\"tooltip\" [attr.data-tip]=\"item.tooltip || ''\">\n          <ng-container *ngTemplateOutlet=\"liGroup; context: { $implicit: item }\"></ng-container>\n        </li>\n      }\n      @case ('divider') {\n        <li></li>\n      }\n      @default {\n        <li class=\"tooltip\" [attr.data-tip]=\"item.tooltip || ''\">\n          <ng-container *ngTemplateOutlet=\"liBase; context: { $implicit: item }\"></ng-container>\n        </li>\n      }\n    }\n  }\n</ng-template>\n<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [class]=\"wrapperClass$() | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    @for (child of list(); track $index) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"></ng-container>\n    }\n  </ul>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
+
+const ExactMatchOptions = {
+    paths: 'exact',
+    fragment: 'ignored',
+    matrixParams: 'ignored',
+    queryParams: 'exact',
+};
+const SubsetMatchOptions = {
+    paths: 'subset',
+    fragment: 'ignored',
+    matrixParams: 'ignored',
+    queryParams: 'subset',
+};
+
+function goPage(value) {
+    return { type: 'go', value };
+}
+class PaginationNFCC {
+    static __version = 2;
+    StrOrTemplateComponent = StrOrTemplateComponent;
+    templateRef = viewChild.required('templateRef');
+    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    sizeOptions = input(...(ngDevMode ? [undefined, { debugName: "sizeOptions" }] : []));
+    optionsLabel = input(...(ngDevMode ? [undefined, { debugName: "optionsLabel" }] : []));
+    value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
+    #theme = inject(ThemeService);
+    wrapperClass$ = computed(() => {
+        return clsx(this.#theme.addPrefix('join'), this.#theme.addPrefix2('join', this.direction()));
+    }, ...(ngDevMode ? [{ debugName: "wrapperClass$" }] : []));
+    maxPageCount$$ = computed(() => {
+        return Math.ceil((this.count() ?? 0) / this.value().size);
+    }, ...(ngDevMode ? [{ debugName: "maxPageCount$$" }] : []));
+    pageRange$$ = computed(() => {
+        let list = [];
+        const current = this.value().index;
+        const fullStart = current - 4 < 0;
+        const fullEnd = current + 5 > this.maxPageCount$$();
+        if (fullStart) {
+            let index = current - 1;
+            while (index !== -1) {
+                list.unshift(goPage(index));
+                index--;
+            }
+        }
+        else {
+            list.push({ type: 'prev', value: 5 });
+            let index = current - 1;
+            const tempList = [];
+            while (index !== -1 && current - index < 3) {
+                tempList.unshift(goPage(index));
+                index--;
+            }
+            list = list.concat(tempList);
+        }
+        list.push(goPage(current));
+        if (fullEnd) {
+            let index = current + 1;
+            while (index < this.maxPageCount$$()) {
+                list.push(goPage(index));
+                index++;
+            }
+        }
+        else {
+            let index = current + 1;
+            while (index < this.maxPageCount$$() && index - current < 3) {
+                list.push(goPage(index));
+                index++;
+            }
+            list.push({ type: 'next', value: 5 });
+        }
+        return list;
+    }, ...(ngDevMode ? [{ debugName: "pageRange$$" }] : []));
+    #field = inject(PI_VIEW_FIELD_TOKEN, { optional: true });
+    ngOnInit() {
+        this.updatePageToProps();
+    }
+    gotoPage(value) {
+        this.value.update((data) => {
+            return { ...data, index: value };
+        });
+        this.updatePageToProps();
+    }
+    pageSizeChange(value) {
+        this.value.update((item) => {
+            return { ...item, size: value };
+        });
+        this.updatePageToProps();
+    }
+    updatePageToProps() {
+        const field = this.#field?.();
+        if (!field) {
+            console.warn(`❌piying-view🗄️`);
+            return;
+        }
+        field.props.update((data) => {
+            return {
+                ...data,
+                pageQueryParams: this.value(),
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: PaginationNFCC, isStandalone: true, selector: "app-pagination", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, sizeOptions: { classPropertyName: "sizeOptions", publicName: "sizeOptions", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"'flex items-center gap-2' | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    @if (sizeOptions(); as sizeOptions) {\n      <select class=\"select w-20\" [ngModel]=\"value().size\" (ngModelChange)=\"pageSizeChange($event)\">\n        @for (item of sizeOptions; track $index) {\n          <option [ngValue]=\"item\">\n            {{ optionsLabel() ? (optionsLabel()! | pure: item : value().index : count()) : item }}\n          </option>\n        }\n      </select>\n    }\n    <div [class]=\"wrapperClass$()\">\n      <button\n        class=\"join-item btn p-0 w-(--size)\"\n        [disabled]=\"value().index === 0\"\n        (click)=\"gotoPage(0)\"\n      >\n        \u00AB\n      </button>\n      @for (item of pageRange$$(); track $index) {\n        @if (item.type === 'go') {\n          <button\n            class=\"join-item btn p-0 w-(--size)\"\n            [aria-label]=\"item.value + 1\"\n            [class.btn-active]=\"item.value === value().index\"\n            (click)=\"gotoPage(item.value)\"\n          >\n            {{ item.value + 1 }}\n          </button>\n        } @else if (item.type === 'prev') {\n          <button class=\"join-item btn p-0 w-(--size)\" (click)=\"gotoPage(value().index - 5)\">\n            <\n          </button>\n        } @else if (item.type === 'next') {\n          <button class=\"join-item btn p-0 w-(--size)\" (click)=\"gotoPage(value().index + 5)\">\n            >\n          </button>\n        }\n      }\n      <button\n        class=\"join-item btn p-0 w-(--size)\"\n        [disabled]=\"value().index === maxPageCount$$() - 1\"\n        (click)=\"gotoPage(maxPageCount$$() - 1)\"\n      >\n        \u00BB\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaginationNFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pagination', imports: [
+                        AttributesDirective,
+                        MatIcon,
+                        NgTemplateOutlet,
+                        NgClass,
+                        CssPrefixPipe,
+                        StrOrTemplateComponent,
+                        SelectorlessOutlet,
+                        PurePipe,
+                        FormsModule,
+                        MergeClassPipe,
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"'flex items-center gap-2' | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    @if (sizeOptions(); as sizeOptions) {\n      <select class=\"select w-20\" [ngModel]=\"value().size\" (ngModelChange)=\"pageSizeChange($event)\">\n        @for (item of sizeOptions; track $index) {\n          <option [ngValue]=\"item\">\n            {{ optionsLabel() ? (optionsLabel()! | pure: item : value().index : count()) : item }}\n          </option>\n        }\n      </select>\n    }\n    <div [class]=\"wrapperClass$()\">\n      <button\n        class=\"join-item btn p-0 w-(--size)\"\n        [disabled]=\"value().index === 0\"\n        (click)=\"gotoPage(0)\"\n      >\n        \u00AB\n      </button>\n      @for (item of pageRange$$(); track $index) {\n        @if (item.type === 'go') {\n          <button\n            class=\"join-item btn p-0 w-(--size)\"\n            [aria-label]=\"item.value + 1\"\n            [class.btn-active]=\"item.value === value().index\"\n            (click)=\"gotoPage(item.value)\"\n          >\n            {{ item.value + 1 }}\n          </button>\n        } @else if (item.type === 'prev') {\n          <button class=\"join-item btn p-0 w-(--size)\" (click)=\"gotoPage(value().index - 5)\">\n            <\n          </button>\n        } @else if (item.type === 'next') {\n          <button class=\"join-item btn p-0 w-(--size)\" (click)=\"gotoPage(value().index + 5)\">\n            >\n          </button>\n        }\n      }\n      <button\n        class=\"join-item btn p-0 w-(--size)\"\n        [disabled]=\"value().index === maxPageCount$$() - 1\"\n        (click)=\"gotoPage(maxPageCount$$() - 1)\"\n      >\n        \u00BB\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], sizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeOptions", required: false }] }], optionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }] } });
+
+class TableRowFGC extends PiyingViewGroupBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableRowFGC, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TableRowFGC, isStandalone: true, selector: "tr", providers: [], usesInheritance: true, ngImport: i0, template: "@for (field of children$$(); track $index) {\n  <ng-container\n    *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n  ></ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableRowFGC, decorators: [{
+            type: Component,
+            args: [{ selector: 'tr', imports: [
+                        AttributesDirective,
+                        NgTemplateOutlet,
+                        PurePipe,
+                        SelectorlessOutlet,
+                        StrOrTemplateComponent,
+                        JsonPipe,
+                        FormsModule,
+                    ], providers: [], template: "@for (field of children$$(); track $index) {\n  <ng-container\n    *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n  ></ng-container>\n}\n" }]
+        }] });
+
+const TABLE_STATUS_TOKEN = new InjectionToken('TABLE_STATUS');
+
+function createRowDefine() {
+    return v.pipe(v.tuple([]), setComponent(TableRowFGC));
+}
+function createDefaultColDefine(isHeader, content, context) {
+    return v.pipe(NFCSchema, setComponent(StrOrTemplateComponent), actions.inputs.patch({ content, context }), actions.wrappers.set([{ type: isHeader ? ThWC : TdWC }]));
+}
+function createDefaultColDefineFn(isHeader, content, context) {
+    return v.pipe(NFCSchema, setComponent(StrOrTemplateComponent), actions.inputs.patch({ context }), actions.inputs.patchAsync({
+        content: ({ context }) => {
+            return computed(() => {
+                const item = context['item$']();
+                return content(item, context['index']);
+            });
+        },
+    }), actions.wrappers.set([{ type: isHeader ? ThWC : TdWC }]));
+}
+class TableNFCC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    StrOrTemplateComponent = StrOrTemplateComponent;
+    define = input(...(ngDevMode ? [undefined, { debugName: "define" }] : []));
+    // todo待修改
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    injector = inject(Injector);
+    data$$ = computed(() => {
+        const data = this.data();
+        return Array.isArray(data) ? data : data();
+    }, ...(ngDevMode ? [{ debugName: "data$$" }] : []));
+    #status = inject(TABLE_STATUS_TOKEN, { optional: true });
+    zebra = input(...(ngDevMode ? [undefined, { debugName: "zebra" }] : []));
+    pin = input(...(ngDevMode ? [undefined, { debugName: "pin" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    trackBy = input((key, value) => {
+        return key;
+    }, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    pagination = input(...(ngDevMode ? [undefined, { debugName: "pagination" }] : []));
+    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+    #theme = inject(ThemeService);
+    wrapperClass$$ = computed(() => {
+        return clsx(this.zebra() ? this.#theme.addPrefix(`table-zebra`) : undefined, this.pin()?.rows ? this.#theme.addPrefix(`table-pin-rows`) : undefined, this.pin()?.cols ? this.#theme.addPrefix(`table-pin-cols`) : undefined, this.#theme.setSize('table', this.size()));
+    }, ...(ngDevMode ? [{ debugName: "wrapperClass$$" }] : []));
+    columnsList$$ = computed(() => {
+        return Object.values(this.define().columns);
+    }, ...(ngDevMode ? [{ debugName: "columnsList$$" }] : []));
+    headList$$ = computed(() => {
+        return this.#toColList('head');
+    }, ...(ngDevMode ? [{ debugName: "headList$$" }] : []));
+    bodyList$$ = computed(() => {
+        return this.#toColList('body');
+    }, ...(ngDevMode ? [{ debugName: "bodyList$$" }] : []));
+    footList$$ = computed(() => {
+        return this.#toColList('foot');
+    }, ...(ngDevMode ? [{ debugName: "footList$$" }] : []));
+    #toColList(name) {
+        const define = this.define();
+        const rowList = (define.row?.[name] ?? [{}]).map((item) => {
+            return 'define' in item ? item : { ...item, define: createRowDefine() };
+        });
+        const isHeader = name === 'head';
+        return rowList
+            .map((row) => {
+            let colList;
+            if (!row.columns) {
+                colList = this.columnsList$$().map((item) => item[name]);
+            }
+            else {
+                colList = row.columns.map((col) => {
+                    const item = define.columns[col][name];
+                    return item;
+                });
+            }
+            colList = colList
+                .map((itemDefine) => {
+                if (itemDefine) {
+                    if (isSchema(itemDefine)) {
+                        return itemDefine;
+                    }
+                    else if (typeof itemDefine === 'function') {
+                        return createDefaultColDefineFn(isHeader, itemDefine);
+                    }
+                    else {
+                        return createDefaultColDefine(isHeader, itemDefine);
+                    }
+                }
+                return undefined;
+            })
+                .filter(Boolean);
+            if (colList.length) {
+                row.define.items.push(...colList);
+                return row.define;
+            }
+            return undefined;
+        })
+            .filter((a) => !!a);
+    }
+    dataConvert(data) {
+        if (data.length === 2 && typeof data[0] === 'number' && Array.isArray(data[1])) {
+            return data;
+        }
+        return [data.length, data];
+    }
+    isFunction(input) {
+        return typeof input === 'function';
+    }
+    selectorlessInput = (content, context) => {
+        const obj = { content: computed(() => content) };
+        if (context) {
+            obj['context'] = computed(() => {
+                return { ...context, status: this.#status };
+            });
+        }
+        return obj;
+    };
+    #itemDataMap = new Map();
+    getItemData = (id, value) => {
+        return untracked(() => {
+            const data = this.#itemDataMap.get(id) ?? signal(undefined);
+            data.set(value);
+            this.#itemDataMap.set(id, data);
+            return data;
+        });
+    };
+    isSchema = isSchema;
+    categoryHeadData = (data) => {
+        return computed(() => {
+            return data()[0];
+        });
+    };
+    categoryBodyData = (data, index) => {
+        return computed(() => {
+            return data()[1][index];
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TableNFCC, isStandalone: true, selector: "app-table", inputs: { define: { classPropertyName: "define", publicName: "define", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, pin: { classPropertyName: "pin", publicName: "pin", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"'overflow-x-auto' | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <table [class]=\"'table' | cssPrefix | mergeClass: wrapperClass$$()\">\n      @let headList = headList$$();\n      @let bodyList = bodyList$$();\n      @if (type() === 'category') {\n        @for (item of data$$(); track trackBy()($index, item)) {\n          @let id = trackBy() | pure: $index : item;\n          @let itemData = getItemData | pure: id : item;\n          <thead>\n            @let row = headList[0];\n            <ng-container\n              [selectlessOutlet]=\"StrOrTemplateComponent\"\n              [selectlessOutletInputs]=\"\n                selectorlessInput | pure: row : { item$: categoryHeadData | pure: itemData }\n              \"\n            ></ng-container>\n          </thead>\n          <tbody>\n            @let bodyData = item[1];\n            @for (groupItem of bodyData; track $index) {\n              @let index3 = $index;\n              @for (row of bodyList; track $index) {\n                <ng-container\n                  [selectlessOutlet]=\"StrOrTemplateComponent\"\n                  [selectlessOutletInputs]=\"\n                    selectorlessInput\n                      | pure\n                        : row\n                        : { item$: categoryBodyData | pure: itemData : index3, index: index3 }\n                  \"\n                ></ng-container>\n              }\n            }\n          </tbody>\n        }\n      } @else {\n        @if (headList.length) {\n          <thead>\n            @for (item of headList; track $index) {\n              <ng-container\n                [selectlessOutlet]=\"StrOrTemplateComponent\"\n                [selectlessOutletInputs]=\"selectorlessInput | pure: item\"\n              ></ng-container>\n            }\n          </thead>\n        }\n        @if (bodyList.length) {\n          <tbody>\n            @for (item of data$$(); track trackBy()($index, item)) {\n              @let index2 = $index;\n              @let id = trackBy() | pure: $index : item;\n              @let itemData = getItemData | pure: id : item;\n              @for (row of bodyList; track $index) {\n                <ng-container\n                  [selectlessOutlet]=\"StrOrTemplateComponent\"\n                  [selectlessOutletInputs]=\"\n                    selectorlessInput | pure: row : { item$: itemData, index: index2 }\n                  \"\n                ></ng-container>\n              }\n            }\n          </tbody>\n        }\n        @let footList = footList$$();\n        @if (footList.length) {\n          <tfoot>\n            @for (item of footList; track $index) {\n              <ng-container\n                [selectlessOutlet]=\"StrOrTemplateComponent\"\n                [selectlessOutletInputs]=\"selectorlessInput | pure: item\"\n              ></ng-container>\n            }\n          </tfoot>\n        }\n      }\n    </table>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: SelectorlessOutlet, selector: "[selectlessOutlet]", inputs: ["selectlessOutlet", "selectlessOutletInputs", "selectlessOutletOutputs", "selectlessOutletDirectives", "selectlessOutletInjector", "selectlessOutletEnvironmentInjector"], exportAs: ["selectlessOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableNFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table', imports: [
+                        AttributesDirective,
+                        NgTemplateOutlet,
+                        PurePipe,
+                        SelectorlessOutlet,
+                        StrOrTemplateComponent,
+                        JsonPipe,
+                        FormsModule,
+                        CssPrefixPipe,
+                        MergeClassPipe,
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"'overflow-x-auto' | mergeClass: attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <table [class]=\"'table' | cssPrefix | mergeClass: wrapperClass$$()\">\n      @let headList = headList$$();\n      @let bodyList = bodyList$$();\n      @if (type() === 'category') {\n        @for (item of data$$(); track trackBy()($index, item)) {\n          @let id = trackBy() | pure: $index : item;\n          @let itemData = getItemData | pure: id : item;\n          <thead>\n            @let row = headList[0];\n            <ng-container\n              [selectlessOutlet]=\"StrOrTemplateComponent\"\n              [selectlessOutletInputs]=\"\n                selectorlessInput | pure: row : { item$: categoryHeadData | pure: itemData }\n              \"\n            ></ng-container>\n          </thead>\n          <tbody>\n            @let bodyData = item[1];\n            @for (groupItem of bodyData; track $index) {\n              @let index3 = $index;\n              @for (row of bodyList; track $index) {\n                <ng-container\n                  [selectlessOutlet]=\"StrOrTemplateComponent\"\n                  [selectlessOutletInputs]=\"\n                    selectorlessInput\n                      | pure\n                        : row\n                        : { item$: categoryBodyData | pure: itemData : index3, index: index3 }\n                  \"\n                ></ng-container>\n              }\n            }\n          </tbody>\n        }\n      } @else {\n        @if (headList.length) {\n          <thead>\n            @for (item of headList; track $index) {\n              <ng-container\n                [selectlessOutlet]=\"StrOrTemplateComponent\"\n                [selectlessOutletInputs]=\"selectorlessInput | pure: item\"\n              ></ng-container>\n            }\n          </thead>\n        }\n        @if (bodyList.length) {\n          <tbody>\n            @for (item of data$$(); track trackBy()($index, item)) {\n              @let index2 = $index;\n              @let id = trackBy() | pure: $index : item;\n              @let itemData = getItemData | pure: id : item;\n              @for (row of bodyList; track $index) {\n                <ng-container\n                  [selectlessOutlet]=\"StrOrTemplateComponent\"\n                  [selectlessOutletInputs]=\"\n                    selectorlessInput | pure: row : { item$: itemData, index: index2 }\n                  \"\n                ></ng-container>\n              }\n            }\n          </tbody>\n        }\n        @let footList = footList$$();\n        @if (footList.length) {\n          <tfoot>\n            @for (item of footList; track $index) {\n              <ng-container\n                [selectlessOutlet]=\"StrOrTemplateComponent\"\n                [selectlessOutletInputs]=\"selectorlessInput | pure: item\"\n              ></ng-container>\n            }\n          </tfoot>\n        }\n      }\n    </table>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], define: [{ type: i0.Input, args: [{ isSignal: true, alias: "define", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "zebra", required: false }] }], pin: [{ type: i0.Input, args: [{ isSignal: true, alias: "pin", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+function dataConvert(data) {
+    if (data.length === 2 && typeof data[0] === 'number' && Array.isArray(data[1])) {
+        return data;
+    }
+    return [data.length, data];
+}
+
+function localData(data) {
+    const result = dataConvert(data);
+    return async (res) => {
+        const page = res.params.params?.['page'];
+        let list;
+        if (!page) {
+            list = result[1];
+        }
+        else {
+            const start = page.index * page.size;
+            list = result[1].slice(start, start + page.size);
+        }
+        const direction = res.params.params?.['direction'];
+        if (direction) {
+            for (const item of direction) {
+                list = list.sort((a, b) => {
+                    const result = a[item.key] > b[item.key] ? 1 : -1;
+                    return item.value === 1 ? result : -result;
+                });
+            }
+        }
+        return [result[0], list];
+    };
+}
+
+class TableResourceWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    rawData$$ = computed(() => {
+        const data = this.field$$().props()['data'];
+        return Array.isArray(data) ? localData(data) : data;
+    }, ...(ngDevMode ? [{ debugName: "rawData$$" }] : []));
+    queryParams$$ = computed(() => {
+        return this.field$$().props()['queryParams'];
+    }, ...(ngDevMode ? [{ debugName: "queryParams$$" }] : []));
+    data$ = resource({
+        params: computed(() => {
+            const params = this.queryParams$$();
+            return {
+                data: this.rawData$$(),
+                params,
+            };
+        }),
+        loader: async (res) => {
+            const { params } = res;
+            return params.data(res).then((data) => {
+                return dataConvert(data);
+            });
+        },
+    });
+    list$$ = computedWithPrev((value) => {
+        return this.data$.value()?.[1] ?? value;
+    });
+    count$$ = computedWithPrev((value) => {
+        return this.data$.value()?.[0] ?? value;
+    });
+    constructor() {
+        this.field$$().inputs.update((inputs) => {
+            return {
+                ...inputs,
+                data: this.list$$,
+            };
+        });
+        this.field$$().props.update((props) => {
+            return {
+                ...props,
+                count$$: this.count$$,
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableResourceWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: TableResourceWC, isStandalone: true, selector: "app-table-resource", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableResourceWC, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-table-resource',
+                    template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`,
+                    imports: [InsertFieldDirective],
+                }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+const SortMultiToken = new InjectionToken('SortMultiToken');
+class SortService {
+    direction$ = signal({}, ...(ngDevMode ? [{ debugName: "direction$" }] : []));
+    multiple = inject(SortMultiToken, { optional: true }) ?? true;
+    update(key, direction) {
+        if (this.multiple) {
+            this.direction$.update((data) => {
+                if (direction === 0) {
+                    data = { ...data };
+                    delete data[key];
+                    return data;
+                }
+                return {
+                    ...data,
+                    [key]: direction,
+                };
+            });
+        }
+        else {
+            if (direction === 0) {
+                if (key in this.direction$()) {
+                    this.direction$.set({});
+                }
+            }
+            else {
+                Object.keys(this.direction$()).forEach((k) => {
+                    if (k === key) {
+                        return;
+                    }
+                    this.#restore$.next({ key: k, value: 0 });
+                });
+                this.direction$.set({
+                    [key]: direction,
+                });
+            }
+        }
+        this.#update(this.direction$());
+    }
+    #update;
+    setUpdate(fn) {
+        this.#update = fn;
+    }
+    #restore$ = new Subject();
+    listenRestore(key) {
+        return this.#restore$.pipe(filter((a) => a.key === key));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortService, decorators: [{
+            type: Injectable
+        }] });
+
+class inputSortDirective {
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    inputSort = model.required(...(ngDevMode ? [{ debugName: "inputSort" }] : []));
+    #el = inject(ElementRef).nativeElement;
+    #sort = inject(SortService);
+    ngOnChanges() {
+        const result = this.inputSort();
+        this.#changeElProps(result);
+        this.#sort.update(this.key(), result);
+    }
+    #changeElProps(value) {
+        switch (value) {
+            case 0:
+                this.#el.indeterminate = true;
+                break;
+            case 1:
+                this.#el.checked = true;
+                break;
+            case -1:
+                this.#el.checked = false;
+                break;
+            default:
+                break;
+        }
+    }
+    ngOnInit() {
+        this.#sort.listenRestore(this.key()).subscribe(({ value }) => {
+            this.inputSort.set(value);
+            this.#changeElProps(value);
+        });
+    }
+    chagne() {
+        this.inputSort.update((a) => {
+            const value = ++a;
+            return value === 2 ? -1 : value;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: inputSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: inputSortDirective, isStandalone: true, selector: "[inputSort]", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, inputSort: { classPropertyName: "inputSort", publicName: "inputSort", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { inputSort: "inputSortChange" }, host: { listeners: { "change": "chagne()" } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: inputSortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[inputSort]',
+                }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], inputSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSort", required: true }] }, { type: i0.Output, args: ["inputSortChange"] }], chagne: [{
+                type: HostListener,
+                args: ['change']
+            }] } });
+
+class SortHeaderWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    key$$ = computed(() => {
+        return this.props$$()['key'];
+    }, ...(ngDevMode ? [{ debugName: "key$$" }] : []));
+    #direction$$ = computed(() => {
+        return this.props$$()['direction'];
+    }, ...(ngDevMode ? [{ debugName: "#direction$$", equal: () => false }] : [{ equal: () => false }]));
+    index$ = linkedSignal(() => {
+        return this.#direction$$() ?? 0;
+    }, ...(ngDevMode ? [{ debugName: "index$" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortHeaderWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: SortHeaderWC, isStandalone: true, selector: "app-sort-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n\n  <label\n    [class]=\"'swap swap-rotate' | mergeClass: attr()?.class | cssPrefix\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <input type=\"checkbox\" [(inputSort)]=\"index$\" [key]=\"key$$()\" />\n\n    <div [class]=\"'swap-indeterminate' | cssPrefix\"></div>\n    <div [class]=\"'swap-on' | cssPrefix\"><mat-icon>arrow_upward</mat-icon></div>\n    <div [class]=\"'swap-off' | cssPrefix\"><mat-icon>arrow_downward</mat-icon></div>\n  </label>\n</ng-template>\n", dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: inputSortDirective, selector: "[inputSort]", inputs: ["key", "inputSort"], outputs: ["inputSortChange"] }, { kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortHeaderWC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sort-header', imports: [
+                        MatIcon,
+                        FormsModule,
+                        CssPrefixPipe,
+                        MergeClassPipe,
+                        AttributesDirective,
+                        inputSortDirective,
+                        InsertFieldDirective,
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n\n  <label\n    [class]=\"'swap swap-rotate' | mergeClass: attr()?.class | cssPrefix\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <input type=\"checkbox\" [(inputSort)]=\"index$\" [key]=\"key$$()\" />\n\n    <div [class]=\"'swap-indeterminate' | cssPrefix\"></div>\n    <div [class]=\"'swap-on' | cssPrefix\"><mat-icon>arrow_upward</mat-icon></div>\n    <div [class]=\"'swap-off' | cssPrefix\"><mat-icon>arrow_downward</mat-icon></div>\n  </label>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class SortTablehWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    #sort = inject(SortService);
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    constructor() {
+        this.#sort.setUpdate((value) => {
+            this.field$$().props.update((data) => {
+                return {
+                    ...data,
+                    sortQueryParams: (this.props$$()['sortList'] ?? Object.keys(value))
+                        .map((key) => {
+                        return value[key] ? { key: key, value: value[key] } : undefined;
+                    })
+                        .filter(Boolean),
+                };
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortTablehWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: SortTablehWC, isStandalone: true, selector: "app-sort-table", providers: [SortService, { provide: SortMultiToken, useValue: false }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortTablehWC, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-sort-table',
+                    template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`,
+                    providers: [SortService, { provide: SortMultiToken, useValue: false }],
+                    imports: [InsertFieldDirective],
+                }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class TableStatusService {
+    expanded = new BehaviorSubject(undefined);
+    toggleExpand(value) {
+        this.expanded.next(value === this.expanded.value ? undefined : value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStatusService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStatusService, decorators: [{
+            type: Injectable
+        }] });
+
+class ExpandRowDirective {
+    #field = inject(PI_VIEW_FIELD_TOKEN);
+    #status = inject(TableStatusService);
+    a(event) {
+        if (event.target instanceof HTMLInputElement) {
+            return;
+        }
+        this.#status.toggleExpand(this.#field().context['item$']());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ExpandRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ExpandRowDirective, isStandalone: true, selector: "app-expand", host: { listeners: { "click": "a($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ExpandRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'app-expand',
+                }]
+        }], propDecorators: { a: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+// 切换状态演示,继承TABLE_STATUS_TOKEN自定义
+class TableStatusWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStatusWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: TableStatusWC, isStandalone: true, selector: "app-table-status", providers: [TableStatusService, { provide: TABLE_STATUS_TOKEN, useExisting: TableStatusService }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableStatusWC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-status', providers: [TableStatusService, { provide: TABLE_STATUS_TOKEN, useExisting: TableStatusService }], imports: [InsertFieldDirective], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class CheckboxTableWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    #checkbox = inject(CheckboxService);
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    constructor() {
+        this.#checkbox.setAllList(() => {
+            // todo 去掉数量
+            const data = this.field$$().inputs()['data'];
+            return Array.isArray(data) ? data[1] : data.value();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxTableWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: CheckboxTableWC, isStandalone: true, selector: "app-checkbox-table", providers: [CheckboxService], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxTableWC, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-checkbox-table',
+                    template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`,
+                    providers: [CheckboxService],
+                    imports: [InsertFieldDirective],
+                }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class TableCheckboxAllWC {
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    #checkboxService = inject(CheckboxService);
+    #key$$ = computed(() => {
+        return this.props$$()['key'];
+    }, ...(ngDevMode ? [{ debugName: "#key$$" }] : []));
+    toggle() {
+        this.#checkboxService.toggle(this.#key$$(), this.props$$()['item$']());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCheckboxAllWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: TableCheckboxAllWC, isStandalone: true, selector: "app-table-checkbox-all", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div (click)=\"toggle()\">\n    <ng-container insertField></ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCheckboxAllWC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-checkbox-all', imports: [InsertFieldDirective], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div (click)=\"toggle()\">\n    <ng-container insertField></ng-container>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class TableCheckboxOneWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    #checkboxService = inject(CheckboxService);
+    #key$$ = computed(() => {
+        return this.props$$()['key'];
+    }, ...(ngDevMode ? [{ debugName: "#key$$" }] : []));
+    constructor() {
+        this.field$$()
+            .form.control.valueChanges.pipe(filter((a) => a !== undefined))
+            .subscribe((a) => {
+            this.#checkboxService.toggle(this.#key$$(), this.field$$().context['item$']());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCheckboxOneWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: TableCheckboxOneWC, isStandalone: true, selector: "app-table-checkbox-body", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableCheckboxOneWC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-checkbox-body', imports: [InsertFieldDirective], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ng-container insertField></ng-container>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+var wrapper_index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CheckboxTablehWC: CheckboxTableWC,
+    SortHeaderWC: SortHeaderWC,
+    SortTablehWC: SortTablehWC,
+    TableCheckboxAllWC: TableCheckboxAllWC,
+    TableCheckboxOneWC: TableCheckboxOneWC,
+    TableResourceWC: TableResourceWC,
+    TableStatusWC: TableStatusWC
+});
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/** Gets the target of an event while accounting for Shadow DOM. */
+function _getEventTarget(event) {
+    // If an event is bound outside the Shadow DOM, the `event.target` will
+    // point to the shadow root so we have to use `composedPath` instead.
+    return (event.composedPath ? event.composedPath()[0] : event.target);
+}
+/** Default set of positions for the overlay. Follows the behavior of a dropdown. */
+const defaultPositionList = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+];
+/** Injection token that determines the scroll handling while the connected overlay is open. */
+const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('cdk-connected-overlay-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => {
+        const injector = inject(Injector);
+        return () => createRepositionScrollStrategy(injector);
+    },
+});
+/**
+ * Directive applied to an element to make it usable as an origin for an Overlay using a
+ * ConnectedPositionStrategy.
+ */
+class CdkOverlayOrigin {
+    elementRef = inject(ElementRef);
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CdkOverlayOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: CdkOverlayOrigin, isStandalone: true, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CdkOverlayOrigin, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
+                    exportAs: 'cdkOverlayOrigin',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to facilitate declarative creation of an
+ * Overlay using a FlexibleConnectedPositionStrategy.
+ */
+class CdkConnectedOverlay {
+    _dir = inject(Directionality, { optional: true });
+    _injector = inject(Injector);
+    _overlayRef;
+    _backdropSubscription = Subscription.EMPTY;
+    _attachSubscription = Subscription.EMPTY;
+    _detachSubscription = Subscription.EMPTY;
+    _positionSubscription = Subscription.EMPTY;
+    _position;
+    _scrollStrategyFactory = inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY);
+    _ngZone = inject(NgZone);
+    /** Origin for the connected overlay. */
+    origin = input.required(...(ngDevMode ? [{ debugName: "origin" }] : []));
+    /** Registered connected position pairs. */
+    positions = input(...(ngDevMode ? [undefined, { debugName: "positions" }] : []));
+    positions$$ = computed(() => {
+        const pos = this.positions();
+        return pos && pos.length ? pos : defaultPositionList;
+    }, ...(ngDevMode ? [{ debugName: "positions$$" }] : []));
+    /** The offset in pixels for the overlay connection point on the x-axis */
+    offsetX = input(...(ngDevMode ? [undefined, { debugName: "offsetX" }] : []));
+    /** The offset in pixels for the overlay connection point on the y-axis */
+    offsetY = input(...(ngDevMode ? [undefined, { debugName: "offsetY" }] : []));
+    overlayConfig = input(...(ngDevMode ? [undefined, { debugName: "overlayConfig" }] : []));
+    /** Margin between the overlay and the viewport edges. */
+    viewportMargin = input(0, ...(ngDevMode ? [{ debugName: "viewportMargin" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Whether the overlay can be closed by user interaction. */
+    disableClose = input(false, ...(ngDevMode ? [{ debugName: "disableClose" }] : []));
+    /** CSS selector which to set the transform origin. */
+    transformOriginSelector = input(...(ngDevMode ? [undefined, { debugName: "transformOriginSelector" }] : []));
+    /** Whether or not the overlay should be locked when scrolling. */
+    lockPosition = input(false, ...(ngDevMode ? [{ debugName: "lockPosition" }] : []));
+    /** Whether the overlay's width and height can be constrained to fit within the viewport. */
+    flexibleDimensions = input(false, ...(ngDevMode ? [{ debugName: "flexibleDimensions" }] : []));
+    /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */
+    growAfterOpen = input(false, ...(ngDevMode ? [{ debugName: "growAfterOpen" }] : []));
+    /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
+    push = input(false, ...(ngDevMode ? [{ debugName: "push" }] : []));
+    matchWidth = input(false, ...(ngDevMode ? [{ debugName: "matchWidth" }] : []));
+    /** Event emitted when the backdrop is clicked. */
+    backdropClick = new EventEmitter();
+    /** Event emitted when the position has changed. */
+    positionChange = new EventEmitter();
+    /** Event emitted when the overlay has been attached. */
+    attach = new EventEmitter();
+    /** Event emitted when the overlay has been detached. */
+    detach = new EventEmitter();
+    /** Emits when there are keyboard events that are targeted at the overlay. */
+    overlayKeydown = new EventEmitter();
+    /** Emits when there are mouse outside click events that are targeted at the overlay. */
+    overlayOutsideClick = new EventEmitter();
+    // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
+    defaultStrategy$$ = computed(() => {
+        return this._scrollStrategyFactory();
+    }, ...(ngDevMode ? [{ debugName: "defaultStrategy$$" }] : []));
+    _templatePortal = new TemplatePortal(inject(TemplateRef), inject(ViewContainerRef));
+    /** The associated overlay reference. */
+    get overlayRef() {
+        return this._overlayRef;
+    }
+    /** The element's layout direction. */
+    get dir() {
+        return this._dir ? this._dir.value : 'ltr';
+    }
+    ngOnDestroy() {
+        this._attachSubscription.unsubscribe();
+        this._detachSubscription.unsubscribe();
+        this._backdropSubscription.unsubscribe();
+        this._positionSubscription.unsubscribe();
+        this._overlayRef?.dispose();
+        this.disposeResizeUpdate?.();
+    }
+    ngOnChanges(changes) {
+        if (this._position) {
+            this._updatePositionStrategy(this._position);
+            this._overlayRef?.updateSize({
+                width: this._getWidth(),
+                minWidth: this.overlayConfig()?.minWidth,
+                height: this.overlayConfig()?.height,
+                minHeight: this.overlayConfig()?.minHeight,
+            });
+            if (changes['origin'] && this.open()) {
+                this._position.apply();
+            }
+        }
+        if (changes['open']) {
+            this.open() ? this.attachOverlay() : this.detachOverlay();
+        }
+        if (this._position && (changes['offsetX'] || changes['offsetY'])) {
+            this._updatePositionStrategy(this._position);
+        }
+    }
+    disposeResizeUpdate;
+    /** Creates an overlay */
+    _createOverlay() {
+        const overlayRef = (this._overlayRef = createOverlayRef(this._injector, this._buildConfig()));
+        this.disposeResizeUpdate?.();
+        const ob = new ResizeObserver(() => {
+            overlayRef.getConfig().positionStrategy.apply();
+        });
+        // 开始观察 overlay 元素
+        ob.observe(overlayRef.overlayElement);
+        this.disposeResizeUpdate = () => {
+            this.disposeResizeUpdate = undefined;
+            ob.disconnect();
+        };
+        this._attachSubscription = overlayRef.attachments().subscribe(() => {
+            this.attach.emit();
+        });
+        this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());
+        overlayRef.keydownEvents().subscribe((event) => {
+            this.overlayKeydown.next(event);
+            if (event.keyCode === ESCAPE && !this.disableClose() && !hasModifierKey(event)) {
+                event.preventDefault();
+                this.detachOverlay();
+            }
+        });
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            const origin = this._getOriginElement();
+            const target = _getEventTarget(event);
+            if (!origin || (origin !== target && !origin.contains(target))) {
+                this.overlayOutsideClick.next(event);
+            }
+        });
+    }
+    /** Builds the overlay config based on the directive's inputs */
+    _buildConfig() {
+        const overlayConfig = new OverlayConfig({
+            direction: this._dir || 'ltr',
+            ...this.overlayConfig(),
+        });
+        if (!overlayConfig.scrollStrategy) {
+            overlayConfig.scrollStrategy = this.defaultStrategy$$();
+        }
+        if (!overlayConfig.positionStrategy) {
+            overlayConfig.positionStrategy = this._createPositionStrategy();
+        }
+        this._position = overlayConfig.positionStrategy;
+        return overlayConfig;
+    }
+    /** Updates the state of a position strategy, based on the values of the directive inputs. */
+    _updatePositionStrategy(positionStrategy) {
+        const positions = this.positions$$().map((currentPosition) => ({
+            originX: currentPosition.originX,
+            originY: currentPosition.originY,
+            overlayX: currentPosition.overlayX,
+            overlayY: currentPosition.overlayY,
+            offsetX: currentPosition.offsetX || this.offsetX(),
+            offsetY: currentPosition.offsetY || this.offsetY(),
+            panelClass: currentPosition.panelClass || undefined,
+        }));
+        return positionStrategy
+            .setOrigin(this._getOrigin())
+            .withPositions(positions)
+            .withFlexibleDimensions(this.flexibleDimensions())
+            .withPush(this.push())
+            .withGrowAfterOpen(this.growAfterOpen())
+            .withViewportMargin(this.viewportMargin())
+            .withLockedPosition(this.lockPosition())
+            .withTransformOriginOn(this.transformOriginSelector());
+    }
+    /** Returns the position strategy of the overlay to be set on the overlay config */
+    _createPositionStrategy() {
+        const strategy = createFlexibleConnectedPositionStrategy(this._injector, this._getOrigin());
+        this._updatePositionStrategy(strategy);
+        return strategy;
+    }
+    _getOrigin() {
+        const origin = this.origin();
+        if (origin instanceof CdkOverlayOrigin) {
+            return origin.elementRef;
+        }
+        else {
+            return origin;
+        }
+    }
+    _getOriginElement() {
+        const origin = this.origin();
+        if (origin instanceof CdkOverlayOrigin) {
+            return origin.elementRef.nativeElement;
+        }
+        if (origin instanceof ElementRef) {
+            return origin.nativeElement;
+        }
+        if (typeof Element !== 'undefined' && origin instanceof Element) {
+            return origin;
+        }
+        return null;
+    }
+    _getWidth() {
+        if (this.overlayConfig()?.width) {
+            return this.overlayConfig().width;
+        }
+        // Null check `getBoundingClientRect` in case this is called during SSR.
+        return this.matchWidth()
+            ? this._getOriginElement()?.getBoundingClientRect?.().width
+            : undefined;
+    }
+    /** Attaches the overlay. */
+    attachOverlay() {
+        if (!this._overlayRef) {
+            this._createOverlay();
+        }
+        const ref = this._overlayRef;
+        // Update the overlay size, in case the directive's inputs have changed
+        ref.getConfig().hasBackdrop = this.overlayConfig()?.hasBackdrop;
+        ref.updateSize({ width: this._getWidth() });
+        if (!ref.hasAttached()) {
+            ref.attach(this._templatePortal);
+        }
+        if (this.overlayConfig()?.hasBackdrop) {
+            this._backdropSubscription = ref
+                .backdropClick()
+                .subscribe((event) => this.backdropClick.emit(event));
+        }
+        else {
+            this._backdropSubscription.unsubscribe();
+        }
+        this._positionSubscription.unsubscribe();
+        // Only subscribe to `positionChanges` if requested, because putting
+        // together all the information for it can be expensive.
+        if (this.positionChange.observers.length > 0) {
+            this._positionSubscription = this._position.positionChanges.pipe(takeWhile(() => this.positionChange.observers.length > 0)).subscribe((position) => {
+                this._ngZone.run(() => this.positionChange.emit(position));
+                if (this.positionChange.observers.length === 0) {
+                    this._positionSubscription.unsubscribe();
+                }
+            });
+        }
+        this.open.set(true);
+    }
+    /** Detaches the overlay. */
+    detachOverlay() {
+        this._overlayRef?.detach();
+        this._backdropSubscription.unsubscribe();
+        this._positionSubscription.unsubscribe();
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CdkConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: CdkConnectedOverlay, isStandalone: true, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: { origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null }, viewportMargin: { classPropertyName: "viewportMargin", publicName: "viewportMargin", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, transformOriginSelector: { classPropertyName: "transformOriginSelector", publicName: "transformOriginSelector", isSignal: true, isRequired: false, transformFunction: null }, lockPosition: { classPropertyName: "lockPosition", publicName: "lockPosition", isSignal: true, isRequired: false, transformFunction: null }, flexibleDimensions: { classPropertyName: "flexibleDimensions", publicName: "flexibleDimensions", isSignal: true, isRequired: false, transformFunction: null }, growAfterOpen: { classPropertyName: "growAfterOpen", publicName: "growAfterOpen", isSignal: true, isRequired: false, transformFunction: null }, push: { classPropertyName: "push", publicName: "push", isSignal: true, isRequired: false, transformFunction: null }, matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", backdropClick: "backdropClick", positionChange: "positionChange", attach: "attach", detach: "detach", overlayKeydown: "overlayKeydown", overlayOutsideClick: "overlayOutsideClick" }, exportAs: ["cdkConnectedOverlay"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CdkConnectedOverlay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
+                    exportAs: 'cdkConnectedOverlay',
+                    standalone: true,
+                }]
+        }], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetY", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }], viewportMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportMargin", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], transformOriginSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformOriginSelector", required: false }] }], lockPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockPosition", required: false }] }], flexibleDimensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexibleDimensions", required: false }] }], growAfterOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "growAfterOpen", required: false }] }], push: [{ type: i0.Input, args: [{ isSignal: true, alias: "push", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], backdropClick: [{
+                type: Output
+            }], positionChange: [{
+                type: Output
+            }], attach: [{
+                type: Output
+            }], detach: [{
+                type: Output
+            }], overlayKeydown: [{
+                type: Output
+            }], overlayOutsideClick: [{
+                type: Output
+            }] } });
+
+class PickerRefFCC extends BaseControl {
+    static index = 0;
+    SelectorlessOutlet = SelectorlessOutlet;
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    PiyingView = PiyingView;
+    trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+    changeClose = input(...(ngDevMode ? [undefined, { debugName: "changeClose" }] : []));
+    isOpen$ = signal(false, ...(ngDevMode ? [{ debugName: "isOpen$" }] : []));
+    overlayConfig = input(...(ngDevMode ? [undefined, { debugName: "overlayConfig" }] : []));
+    position$ = signal('', ...(ngDevMode ? [{ debugName: "position$" }] : []));
+    parentPyOptions = inject(PI_INPUT_OPTIONS_TOKEN, { optional: true });
+    triggerInput$$ = computed(() => {
+        return {
+            model: this.value$,
+            schema: this.trigger,
+            options: computed(() => ({
+                ...this.parentPyOptions(),
+                context: {
+                    ...this.parentPyOptions().context,
+                    pickerValue: this.value$,
+                },
+            })),
+            selectorless: true,
+        };
+    }, ...(ngDevMode ? [{ debugName: "triggerInput$$" }] : []));
+    // content应该是model
+    contentInput$$ = computed(() => {
+        return {
+            schema: this.content,
+            options: this.parentPyOptions,
+            selectorless: true,
+            model: this.value$,
+        };
+    }, ...(ngDevMode ? [{ debugName: "contentInput$$" }] : []));
+    contentOutput$$ = computed(() => {
+        return {
+            modelChange: (value) => {
+                this.valueAndTouchedChange(value);
+                if (this.changeClose()) {
+                    this.isOpen$.set(false);
+                }
+            },
+        };
+    }, ...(ngDevMode ? [{ debugName: "contentOutput$$" }] : []));
+    openRef() {
+        this.isOpen$.set(true);
+    }
+    outsideClick() {
+        this.isOpen$.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PickerRefFCC, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: PickerRefFCC, isStandalone: true, selector: "app-picker-ref", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, changeClose: { classPropertyName: "changeClose", publicName: "changeClose", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PickerRefFCC),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" [attributes]=\"attr()\" (click)=\"openRef()\">\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"triggerInput$$()\"\n    ></ng-container>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [origin]=\"trigger\"\n    [open]=\"isOpen$()\"\n    [overlayConfig]=\"overlayConfig()\"\n    (detach)=\"isOpen$.set(false)\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"contentInput$$()\"\n      [selectlessOutletOutputs]=\"contentOutput$$()\"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: SelectorlessOutlet, selector: "[selectlessOutlet]", inputs: ["selectlessOutlet", "selectlessOutletInputs", "selectlessOutletOutputs", "selectlessOutletDirectives", "selectlessOutletInjector", "selectlessOutletEnvironmentInjector"], exportAs: ["selectlessOutlet"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["origin", "positions", "offsetX", "offsetY", "overlayConfig", "viewportMargin", "open", "disableClose", "transformOriginSelector", "lockPosition", "flexibleDimensions", "growAfterOpen", "push", "matchWidth"], outputs: ["openChange", "backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PickerRefFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-picker-ref', imports: [
+                        FormsModule,
+                        AttributesDirective,
+                        CssPrefixPipe,
+                        MergeClassPipe,
+                        StrOrTemplateComponent,
+                        SelectorlessOutlet,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        PurePipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PickerRefFCC),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" [attributes]=\"attr()\" (click)=\"openRef()\">\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"triggerInput$$()\"\n    ></ng-container>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [origin]=\"trigger\"\n    [open]=\"isOpen$()\"\n    [overlayConfig]=\"overlayConfig()\"\n    (detach)=\"isOpen$.set(false)\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"contentInput$$()\"\n      [selectlessOutletOutputs]=\"contentOutput$$()\"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], changeClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeClose", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }] } });
+
+class OptionListFCC extends BaseControl {
+    static __version = 2;
+    StrOrTemplateComponent = StrOrTemplateComponent;
+    PiyingView = PiyingView;
+    templateRef = viewChild.required('templateRef');
+    options = input([], ...(ngDevMode ? [{ debugName: "options", transform: (input) => input ?? [] }] : [{
+            transform: (input) => input ?? [],
+        }]));
+    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+    optionConvert = input(DefaultOptionConvert, ...(ngDevMode ? [{ debugName: "optionConvert", transform: (input) => ({ ...DefaultOptionConvert, ...input }) }] : [{
+            transform: (input) => ({ ...DefaultOptionConvert, ...input }),
+        }]));
+    // listFilter=computed(() => {
+    //   return this.field$$().props()['filter']
+    // })
+    transformOption = transformOption;
+    optionInput = (content) => {
+        return {
+            content: signal(content),
+        };
+    };
+    selectOption(item) {
+        this.valueAndTouchedChange(item.value);
+    }
+    parentPyOptions = inject(PI_INPUT_OPTIONS_TOKEN, { optional: true });
+    getInput$$ = (schema) => {
+        return {
+            schema: schema,
+            options: this.parentPyOptions,
+            selectorless: true,
+        };
+    };
+    activateClass = (a, b) => {
+        return a === b ? 'menu-active' : '';
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OptionListFCC, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: OptionListFCC, isStandalone: true, selector: "app-option-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionConvert: { classPropertyName: "optionConvert", publicName: "optionConvert", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OptionListFCC),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #liGroup let-item>\n  <!-- todo open\u6D4B\u8BD5 -->\n  <details open>\n    <summary>{{ item.label }}</summary>\n    <ul>\n      @for (child of item.children; track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n        ></ng-container>\n      }\n    </ul>\n  </details>\n</ng-template>\n<ng-template #itemTemplate let-option>\n  @let rOption = transformOption | pure: option : optionConvert();\n  @let template = optionTemplate()?.[rOption.type];\n  @if (template) {\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"getInput$$ | pure: template\"\n    ></ng-container>\n  } @else if (rOption.type === 'option') {\n    <li (click)=\"selectOption(rOption)\">\n      <button [class]=\"activateClass | pure: rOption.value : value$()\">\n        <ng-template\n          [selectlessOutlet]=\"StrOrTemplateComponent\"\n          [selectlessOutletInputs]=\"optionInput | pure: rOption.label\"\n        ></ng-template>\n      </button>\n    </li>\n  } @else if (rOption.type === 'group') {\n    <li>\n      <details open>\n        <summary>\n          <ng-template\n            [selectlessOutlet]=\"StrOrTemplateComponent\"\n            [selectlessOutletInputs]=\"optionInput | pure: rOption.label\"\n          ></ng-template>\n        </summary>\n        <ul>\n          @for (child of rOption.children; track $index) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n            ></ng-container>\n          }\n        </ul>\n      </details>\n    </li>\n  }\n</ng-template>\n\n<ng-template #templateRef let-attr=\"attributes\">\n  <ul class=\"menu\">\n    @for (option of options(); track $index) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"></ng-container>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SelectorlessOutlet, selector: "[selectlessOutlet]", inputs: ["selectlessOutlet", "selectlessOutletInputs", "selectlessOutletOutputs", "selectlessOutletDirectives", "selectlessOutletInjector", "selectlessOutletEnvironmentInjector"], exportAs: ["selectlessOutlet"] }, { kind: "pipe", type: PurePipe, name: "pure" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OptionListFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-option-list', imports: [
+                        FormsModule,
+                        AttributesDirective,
+                        NgTemplateOutlet,
+                        NgClass,
+                        CssPrefixPipe,
+                        MergeClassPipe,
+                        TwPrefixPipe,
+                        StrOrTemplateComponent,
+                        SelectorlessOutlet,
+                        PurePipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OptionListFCC),
+                            multi: true,
+                        },
+                    ], template: "<ng-template #liGroup let-item>\n  <!-- todo open\u6D4B\u8BD5 -->\n  <details open>\n    <summary>{{ item.label }}</summary>\n    <ul>\n      @for (child of item.children; track $index) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n        ></ng-container>\n      }\n    </ul>\n  </details>\n</ng-template>\n<ng-template #itemTemplate let-option>\n  @let rOption = transformOption | pure: option : optionConvert();\n  @let template = optionTemplate()?.[rOption.type];\n  @if (template) {\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"getInput$$ | pure: template\"\n    ></ng-container>\n  } @else if (rOption.type === 'option') {\n    <li (click)=\"selectOption(rOption)\">\n      <button [class]=\"activateClass | pure: rOption.value : value$()\">\n        <ng-template\n          [selectlessOutlet]=\"StrOrTemplateComponent\"\n          [selectlessOutletInputs]=\"optionInput | pure: rOption.label\"\n        ></ng-template>\n      </button>\n    </li>\n  } @else if (rOption.type === 'group') {\n    <li>\n      <details open>\n        <summary>\n          <ng-template\n            [selectlessOutlet]=\"StrOrTemplateComponent\"\n            [selectlessOutletInputs]=\"optionInput | pure: rOption.label\"\n          ></ng-template>\n        </summary>\n        <ul>\n          @for (child of rOption.children; track $index) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate; context: { $implicit: child }\"\n            ></ng-container>\n          }\n        </ul>\n      </details>\n    </li>\n  }\n</ng-template>\n\n<ng-template #templateRef let-attr=\"attributes\">\n  <ul class=\"menu\">\n    @for (option of options(); track $index) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"></ng-container>\n    }\n  </ul>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionConvert: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionConvert", required: false }] }] } });
+
+class ListTemplateNFCC {
+    static __version = 2;
+    StrOrTemplateComponent = StrOrTemplateComponent;
+    PiyingView = PiyingView;
+    templateRef = viewChild.required('templateRef');
+    template = input.required(...(ngDevMode ? [{ debugName: "template" }] : []));
+    list = input([], ...(ngDevMode ? [{ debugName: "list" }] : []));
+    parentPyOptions = inject(PI_INPUT_OPTIONS_TOKEN, { optional: true });
+    field = inject(PI_VIEW_FIELD_TOKEN);
+    templateInput$$ = (data) => {
+        return {
+            schema: this.template,
+            options: computed(() => ({
+                ...this.parentPyOptions(),
+                context: {
+                    ...this.parentPyOptions().context,
+                    getParent: () => this.field(),
+                    getItem: () => data,
+                },
+            })),
+            selectorless: true,
+        };
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ListTemplateNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ListTemplateNFCC, isStandalone: true, selector: "app-list-template", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  @for (child of list(); track $index) {\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"templateInput$$ | pure: child\"\n    ></ng-container>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: SelectorlessOutlet, selector: "[selectlessOutlet]", inputs: ["selectlessOutlet", "selectlessOutletInputs", "selectlessOutletOutputs", "selectlessOutletDirectives", "selectlessOutletInjector", "selectlessOutletEnvironmentInjector"], exportAs: ["selectlessOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: PurePipe, name: "pure" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ListTemplateNFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-list-template', imports: [
+                        AttributesDirective,
+                        NgClass,
+                        CssPrefixPipe,
+                        SelectorlessOutlet,
+                        StrOrTemplateComponent,
+                        RouterLink,
+                        RouterLinkActive,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MergeClassPipe,
+                        JsonPipe,
+                        MergeClassPipe,
+                        PurePipe,
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  @for (child of list(); track $index) {\n    <ng-container\n      [selectlessOutlet]=\"PiyingView\"\n      [selectlessOutletInputs]=\"templateInput$$ | pure: child\"\n    ></ng-container>\n  }\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }] } });
+
+var component_index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ListTemplateNFCC: ListTemplateNFCC,
+    MenuTreeNFCC: MenuTreeNFCC,
+    OptionListFCC: OptionListFCC,
+    PaginationNFCC: PaginationNFCC,
+    PickerRefFCC: PickerRefFCC,
+    TableNFCC: TableNFCC,
+    TableRowFGC: TableRowFGC
+});
+
+class FilterOptionNFCC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    #field = inject(PI_VIEW_FIELD_TOKEN);
+    content = this.#field().props()['seachContent'];
+    stopKeyboardListen(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterOptionNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: FilterOptionNFCC, isStandalone: true, selector: "app-filter-option", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <input\n    type=\"text\"\n    [attributes]=\"attr?.()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr?.().class | mergeClass: 'input' | cssPrefix\"\n    [(ngModel)]=\"content\"\n    (keydown)=\"stopKeyboardListen($event)\"\n  />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FilterOptionNFCC, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-filter-option', imports: [MatIcon, FormsModule, CssPrefixPipe, MergeClassPipe, AttributesDirective, FormsModule], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <input\n    type=\"text\"\n    [attributes]=\"attr?.()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr?.().class | mergeClass: 'input' | cssPrefix\"\n    [(ngModel)]=\"content\"\n    (keydown)=\"stopKeyboardListen($event)\"\n  />\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+class OptionListLocalFilterWC {
+    static __version = 2;
+    templateRef = viewChild.required('templateRef');
+    searchContent = signal('', ...(ngDevMode ? [{ debugName: "searchContent" }] : []));
+    fileterOption = { type: 'local-filter' };
+    field$$ = inject(PI_VIEW_FIELD_TOKEN);
+    props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    constructor() {
+        this.field$$().props.update((a) => {
+            return { ...a, searchContent: this.searchContent };
+        });
+        const localFilterDefine = this.props$$()['filterDefine'] ?? v.pipe(NFCSchema, setComponent(FilterOptionNFCC));
+        this.field$$().inputs.update((a) => {
+            return {
+                ...a,
+                optionTemplate: {
+                    ...a?.['optionTemplate'],
+                    'local-filter': v.pipe(localFilterDefine, actions.props.patch({ seachContent: this.searchContent })),
+                },
+                options: [],
+            };
+        });
+        const filterWith = this.field$$().props()['filterWith'] ??
+            ((list, content) => list.filter((item) => item.includes(content)));
+        effect(() => {
+            const content = this.searchContent();
+            const list = this.field$$().props()['options'];
+            let filterList = list;
+            if (content) {
+                filterList = filterWith(list, content);
+            }
+            untracked(() => {
+                this.field$$().inputs.update((a) => {
+                    return {
+                        ...a,
+                        options: [this.fileterOption, ...filterList],
+                    };
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OptionListLocalFilterWC, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: OptionListLocalFilterWC, isStandalone: true, selector: "app-local-filter", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: InsertFieldDirective, selector: "[insertField]", exportAs: ["insertField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OptionListLocalFilterWC, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-local-filter',
+                    template: `<ng-template #templateRef> <ng-container insertField></ng-container></ng-template>`,
+                    imports: [InsertFieldDirective],
+                }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+
+var wrapper_index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CheckboxTablehWC: CheckboxTableWC,
+    OptionListLocalFilterWC: OptionListLocalFilterWC,
+    SortHeaderWC: SortHeaderWC,
+    SortTablehWC: SortTablehWC,
+    TableCheckboxAllWC: TableCheckboxAllWC,
+    TableCheckboxOneWC: TableCheckboxOneWC,
+    TableResourceWC: TableResourceWC,
+    TableStatusWC: TableStatusWC
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxTableWC, ExactMatchOptions, ExpandRowDirective, component_index as ExtComponentGroup, wrapper_index as ExtWrapperGroup, ListTemplateNFCC, MenuTreeNFCC, OptionListFCC, OptionListLocalFilterWC, PaginationNFCC, PickerRefFCC, SortHeaderWC, SortTablehWC, SubsetMatchOptions, TableCheckboxAllWC, TableCheckboxOneWC, TableNFCC, TableResourceWC, TableRowFGC, TableStatusService, TableStatusWC, wrapper_index$1 as WrapperGroup, createDefaultColDefine, createDefaultColDefineFn, createRowDefine, inputSortDirective };
+//# sourceMappingURL=piying-lib-angular-daisyui-extension.mjs.map