@piying-lib/angular-daisyui 1.0.11 → 1.0.13

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

@@ -1,7 +1,6 @@
-import { NgTemplateOutlet, NgClass, JsonPipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { viewChild, input, inject, computed, Component, model, InjectionToken, Injector, untracked, signal, Injectable, HostListener, Directive, effect, resource, ElementRef, linkedSignal, NgZone, EventEmitter, TemplateRef, ViewContainerRef, Output, forwardRef, ChangeDetectionStrategy } 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';
@@ -13,6 +12,7 @@ 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 { SelectorlessOutlet } from '@cyia/ngx-common/directive';
 import * as v from 'valibot';
 import { setComponent, NFCSchema, actions } from '@piying/view-angular-core';
 import { ThWC, TdWC } from '@piying-lib/angular-daisyui/wrapper';
@@ -45,16 +45,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             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 }] }] } });
@@ -165,18 +161,7 @@ class PaginationNFCC {
 }
 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" }]
+            args: [{ selector: 'app-pagination', imports: [AttributesDirective, 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 {
@@ -185,15 +170,7 @@ class TableRowFGC extends PiyingViewGroupBase {
 }
 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" }]
+            args: [{ selector: 'tr', imports: [NgTemplateOutlet, 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');
@@ -286,7 +263,7 @@ class TableNFCC {
             })
                 .filter(Boolean);
             if (colList.length) {
-                let items = row.define.items;
+                const items = row.define.items;
                 items.length = 0;
                 row.define.items.push(...colList);
                 return row.define;
@@ -340,11 +317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Component,
             args: [{ selector: 'app-table', imports: [
                         AttributesDirective,
-                        NgTemplateOutlet,
                         PurePipe,
                         SelectorlessOutlet,
-                        StrOrTemplateComponent,
-                        JsonPipe,
                         FormsModule,
                         CssPrefixPipe,
                         MergeClassPipe,
@@ -358,27 +332,35 @@ function dataConvert(data) {
     return [data.length, data];
 }
 
-function localData(data) {
+function defaultCompare(key) {
+    return (a, b) => {
+        return a[key] > b[key] ? 1 : -1;
+    };
+}
+function localData(data, options) {
     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);
+        let list = result[1];
+        if (options?.filterFn) {
+            list = list.filter((item) => options.filterFn(item, res.params.params?.['filter']));
         }
         const direction = res.params.params?.['direction'];
         if (direction) {
             for (const item of direction) {
+                const compareFn = options?.sortCompareMap
+                    ? options.sortCompareMap[item.key]
+                    : defaultCompare(item.key);
                 list = list.sort((a, b) => {
-                    const result = a[item.key] > b[item.key] ? 1 : -1;
+                    const result = compareFn(a, b);
                     return item.value === 1 ? result : -result;
                 });
             }
         }
+        const page = res.params.params?.['page'];
+        if (page) {
+            const start = page.index * page.size;
+            list = list.slice(start, start + page.size);
+        }
         return [result[0], list];
     };
 }
@@ -464,15 +446,16 @@ class TableResourceWC {
     field$$ = inject(PI_VIEW_FIELD_TOKEN);
     #status = inject(TableStatusService);
     props$$ = computed(() => this.field$$().props(), ...(ngDevMode ? [{ debugName: "props$$" }] : []));
+    #localSearchOptions$$ = computed(() => this.props$$()['localSearchOptions'], ...(ngDevMode ? [{ debugName: "#localSearchOptions$$" }] : []));
     #data$$ = computed(() => this.field$$().props()['data'], ...(ngDevMode ? [{ debugName: "#data$$" }] : []));
     rawData$$ = computed(() => {
         const data = this.#data$$();
         this.#status.updateIndex$();
         return Array.isArray(data) || !data
-            ? Promise.resolve(localData(data ?? []))
+            ? Promise.resolve(localData(data ?? [], this.#localSearchOptions$$()))
             : data().then((value) => {
                 if (Array.isArray(value) || !value) {
-                    return localData(value ?? []);
+                    return localData(value ?? [], this.#localSearchOptions$$());
                 }
                 return value;
             });
@@ -490,7 +473,7 @@ class TableResourceWC {
         }),
         loader: async (res) => {
             const { params } = res;
-            let dataResult = await params.data;
+            const dataResult = await params.data;
             return dataResult(res).then((data) => {
                 return dataConvert(data);
             });
@@ -647,7 +630,7 @@ class SortHeaderWC {
         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" }] });
+    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  <div class=\"flex items-center\">\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' | mergeClass: 'flex' | twPrefix\">\n        <mat-icon>arrow_upward</mat-icon>\n      </div>\n      <div [class]=\"'swap-off' | cssPrefix | mergeClass: 'flex' | twPrefix\">\n        <mat-icon>arrow_downward</mat-icon>\n      </div>\n    </label>\n  </div>\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" }, { kind: "pipe", type: TwPrefixPipe, name: "twPrefix" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortHeaderWC, decorators: [{
             type: Component,
@@ -659,7 +642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         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" }]
+                        TwPrefixPipe
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div class=\"flex items-center\">\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' | mergeClass: 'flex' | twPrefix\">\n        <mat-icon>arrow_upward</mat-icon>\n      </div>\n      <div [class]=\"'swap-off' | cssPrefix | mergeClass: 'flex' | twPrefix\">\n        <mat-icon>arrow_downward</mat-icon>\n      </div>\n    </label>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
 
 class SortTablehWC {
@@ -731,7 +715,7 @@ class TableCheckboxAllWC {
         return this.props$$()['key'];
     }, ...(ngDevMode ? [{ debugName: "#key$$" }] : []));
     toggle() {
-        this.#checkboxService.toggle(this.#key$$(), this.props$$()['item$']());
+        this.#checkboxService.selectAll(this.#key$$());
     }
     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"] }] });
@@ -1194,13 +1178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-picker-ref', imports: [
                         FormsModule,
                         AttributesDirective,
-                        CssPrefixPipe,
-                        MergeClassPipe,
-                        StrOrTemplateComponent,
                         SelectorlessOutlet,
                         CdkConnectedOverlay,
                         CdkOverlayOrigin,
-                        PurePipe,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1256,18 +1236,7 @@ class OptionListFCC extends BaseControl {
 }
 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: [
+            args: [{ selector: 'app-option-list', imports: [FormsModule, NgTemplateOutlet, SelectorlessOutlet, PurePipe], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => OptionListFCC),
@@ -1304,21 +1273,7 @@ class ListTemplateNFCC {
 }
 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" }]
+            args: [{ selector: 'app-list-template', imports: [SelectorlessOutlet, MatIconModule, 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({
@@ -1346,7 +1301,7 @@ class FilterOptionNFCC {
 }
 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" }]
+            args: [{ selector: 'app-filter-option', imports: [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 {