@piying-lib/angular-daisyui 1.1.7 → 1.2.1

package/fesm2022/piying-lib-angular-daisyui-field-group.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, viewChild, inject, computed, Component, linkedSignal, model, effect } from '@angular/core';
+import { input, viewChild, inject, computed, Component, linkedSignal, model, effect, output } from '@angular/core';
 import { PurePipe } from '@cyia/ngx-common/pipe';
 import { MergeClassPipe, CssPrefixPipe, TwPrefixPipe } from '@piying-lib/angular-daisyui/pipe';
 import { useTwClass, ThemeService } from '@piying-lib/angular-daisyui/service';
@@ -11,22 +11,34 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SelectorlessOutlet } from '@cyia/ngx-common/directive';
 import { StrOrTemplateComponent } from '@piying-lib/angular-core';
+import { FieldLogicGroup } from '@piying/view-angular-core';
 
 class AccordionItem {
     constructor(field) { }
     isActivated() { }
 }
+/**
+ * 折叠面板组
+ *
+ * 用于将多个内容块进行折叠/展开管理，支持单展开或多展开模式。
+ * 适合内容较多但需要节省空间的场景，如常见问题解答、设置选项分组等。
+ */
 class AccordionFGC extends PiyingViewGroupBase {
     static __version = 2;
     static index = 0;
     name = `accordion-${AccordionFGC.index++}`;
+    /** 是否允许多个面板同时展开 */
     multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
     templateRef = viewChild.required('templateRef');
+    /** 子项标题函数，用于自定义标题显示 */
     childTitleFn = input((item) => {
         return item.props()?.['title'] ?? item.keyPath?.slice(-1)[0] ?? '';
     }, ...(ngDevMode ? [{ debugName: "childTitleFn" }] : []));
+    /** 是否连接子项 */
     joinChild = input(true, ...(ngDevMode ? [{ debugName: "joinChild" }] : []));
+    /** 折叠图标样式 */
     collapseIcon = input(...(ngDevMode ? [undefined, { debugName: "collapseIcon" }] : []));
+    /** 子项 CSS 类名 */
     childClass = input(useTwClass('bg-base-100 border border-base-300'), ...(ngDevMode ? [{ debugName: "childClass" }] : []));
     #theme = inject(ThemeService);
     childClass$$ = computed(() => {
@@ -46,16 +58,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-accordion', imports: [AttributesDirective, NgTemplateOutlet, PurePipe, MergeClassPipe, CssPrefixPipe], template: "<ng-template #mainTemp>\n  @for (field of children$$(); track field.id || $index) {\n    <div [class]=\"childClass$$() | mergeClass: ('collapse' | cssPrefix)\">\n      <input\n        type=\"radio\"\n        [name]=\"childName | pure: multi() : $index\"\n        [checked]=\"!!field.props()['checked']\"\n      />\n      <div class=\"{{ 'collapse-title' | cssPrefix }}\">\n        {{ childTitleFn() | pure: field }}\n      </div>\n      <div class=\"{{ 'collapse-content' | cssPrefix }}\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </div>\n    </div>\n  }\n</ng-template>\n<ng-template #templateRef let-attr=\"attributes\">\n  @if (joinChild()) {\n    <div\n      [attributes]=\"attr()\"\n      [excludes]=\"['class']\"\n      [class]=\"attr()?.class | mergeClass: ('join join-vertical' | cssPrefix)\"\n    >\n      <ng-container *ngTemplateOutlet=\"mainTemp\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"mainTemp\"></ng-container>\n  }\n</ng-template>\n" }]
         }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], childTitleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "childTitleFn", required: false }] }], joinChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "joinChild", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], childClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "childClass", required: false }] }] } });
 
+/**
+ * 卡片组
+ *
+ * 用于将表单字段组织成卡片式布局，支持标题、图片和操作区的自定义。
+ * 适合需要突出显示每组字段、创建美观表单界面的场景，如用户资料编辑、表单 Wizard 等。
+ */
 class CardFGC extends PiyingViewGroupBase {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 边框样式 */
     border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : []));
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 内容区域 CSS 类名 */
     bodyClass = input(...(ngDevMode ? [undefined, { debugName: "bodyClass" }] : []));
+    /** 图片区域 CSS 类名 */
     figureClass = input(...(ngDevMode ? [undefined, { debugName: "figureClass" }] : []));
+    /** 操作区域 CSS 类名 */
     actionsClass = input(useTwClass('justify-end'), ...(ngDevMode ? [{ debugName: "actionsClass" }] : []));
+    /** 标题字段键名 */
     titleKey = input('title', ...(ngDevMode ? [{ debugName: "titleKey" }] : []));
+    /** 图片字段键名 */
     figureKey = input('figure', ...(ngDevMode ? [{ debugName: "figureKey" }] : []));
+    /** 操作字段键名 */
     actionsKey = input('actions', ...(ngDevMode ? [{ debugName: "actionsKey" }] : []));
     titleFiled$$ = computed(() => {
         return this.field$$()
@@ -98,13 +124,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-card', imports: [AttributesDirective, NgTemplateOutlet, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('card' | cssPrefix) : wrapperClass$()\"\n  >\n    @if (figureFiled$$(); as field) {\n      <figure [class]=\"figureClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </figure>\n    }\n    <div [class]=\"bodyClass() | mergeClass: ('card-body' | cssPrefix)\">\n      @if (titleFiled$$(); as field) {\n        <h2 class=\"{{ 'card-title' | cssPrefix }}\">\n          <ng-container\n            *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n          ></ng-container>\n        </h2>\n      }\n      @if (bodyChildren$$(); as bodyChildren) {\n        <div>\n          @for (field of bodyChildren; track $index) {\n            <ng-container\n              *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n            ></ng-container>\n          }\n        </div>\n      }\n      @if (actionsFiled$$(); as field) {\n        <div [class]=\"actionsClass() | mergeClass: ('card-actions' | cssPrefix)\">\n          <ng-container\n            *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], actionsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsClass", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], figureKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureKey", required: false }] }], actionsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsKey", required: false }] }] } });
 
+/**
+ * 走马灯组
+ *
+ * 用于横向或纵向滚动展示多个表单字段，支持自动滚动和对齐方式设置。
+ * 适合字段较多且需要空间节省的场景，如多步骤表单、长列表项展示等。
+ */
 class CarouselFGC extends PiyingViewGroupBase {
     static __version = 2;
     static index = 0;
     index = CarouselFGC.index++;
     templateRef = viewChild.required('templateRef');
+    /** 滚动方向 */
     direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    /** 滚动对齐方式 */
     scrollAlign = input(...(ngDevMode ? [undefined, { debugName: "scrollAlign" }] : []));
+    /** 子项 ID 映射函数 */
     childIdMap = input((compIndex, childIndex) => {
         return `carousel-${compIndex}-${childIndex}`;
     }, ...(ngDevMode ? [{ debugName: "childIdMap" }] : []));
@@ -123,10 +158,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-carousel', imports: [AttributesDirective, NgTemplateOutlet, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('carousel' | cssPrefix) : ngClass$$()\"\n  >\n    @for (field of children$$(); track $index) {\n      <div class=\"{{ 'carousel-item' | cssPrefix }}\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </div>\n    }\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 }] }], scrollAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAlign", required: false }] }], childIdMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "childIdMap", required: false }] }] } });
 
+/**
+ * 舷窗组
+ *
+ * 底部导航栏（也称为“Dock”或“底部栏”）是一种用户界面元素，用于向用户提供导航选项。该栏固定在屏幕底部。
+ */
 class DockFGC extends PiyingViewGroupBase {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 当前激活的索引 */
     activatedIndex = input(0, ...(ngDevMode ? [{ debugName: "activatedIndex" }] : []));
     activatedIndex$ = linkedSignal(this.activatedIndex, ...(ngDevMode ? [{ debugName: "activatedIndex$" }] : []));
     toggleActivate(index) {
@@ -144,9 +186,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-dock', imports: [AttributesDirective, NgTemplateOutlet, MatIcon, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  @let activatedField = children$$()[activatedIndex$()];\n  @if (activatedField) {\n    <ng-container\n      *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: activatedField }\"\n    ></ng-container>\n  }\n\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('dock' | cssPrefix) : wrapperClass$()\"\n  >\n    @for (field of children$$(); track $index) {\n      @let item = field.props();\n      <button\n        (click)=\"toggleActivate($index)\"\n        [class]=\"$index === activatedIndex$() ? ('dock-active' | cssPrefix) : ''\"\n      >\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        @if (item['title']) {\n          <span [class]=\"'dock-label' | cssPrefix\">{{ item['title'] }}</span>\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], activatedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedIndex", required: false }] }] } });
 
+/**
+ * 列表组
+ *
+ * 用于将表单字段以列表形式垂直排列展示，支持自定义标题样式。
+ * 适合字段较多、需要清晰层级结构的场景，如设置列表、表单项清单等。
+ */
 class ListFGC extends PiyingViewGroupBase {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 标题 CSS 类名 */
     titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ListFGC, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ListFGC, isStandalone: true, selector: "app-list", inputs: { titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('list' | cssPrefix)\"\n  >\n    @let title = props$$()['title'];\n    @if (title) {\n      <li [class]=\"titleClass()\">{{ title }}</li>\n    }\n\n    @for (field of children$$(); track $index) {\n      <li [class]=\"'list-row' | cssPrefix\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
@@ -156,6 +205,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-list', imports: [AttributesDirective, NgTemplateOutlet, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('list' | cssPrefix)\"\n  >\n    @let title = props$$()['title'];\n    @if (title) {\n      <li [class]=\"titleClass()\">{{ title }}</li>\n    }\n\n    @for (field of children$$(); track $index) {\n      <li [class]=\"'list-row' | cssPrefix\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </li>\n    }\n  </ul>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }] } });
 
+/**
+ * 导航栏组
+ *
+ * 用于将表单字段组织成导航栏布局，支持开始、中间、结束三个区域的智能分配。
+ * 适合需要在顶部导航栏展示表单操作或导航项的场景，如搜索栏、工具栏等。
+ */
 class NavbarFGC extends PiyingViewGroupBase {
     static __version = 2;
     static index = 0;
@@ -190,15 +245,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-navbar', imports: [AttributesDirective, NgTemplateOutlet, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('navbar' | cssPrefix)\"\n  >\n    @for (field of rest$$(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n      ></ng-container>\n    }\n    @let start = start$$();\n    @if (start) {\n      <div [class]=\"'navbar-start' | cssPrefix\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: start }\"\n        ></ng-container>\n      </div>\n    }\n    @let center = center$$();\n    @if (center) {\n      <div [class]=\"'navbar-center' | cssPrefix\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: center }\"\n        ></ng-container>\n      </div>\n    }\n\n    @let end = end$$();\n    @if (end) {\n      <div [class]=\"'navbar-end' | cssPrefix\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: end }\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
 
+/**
+ * 抽屉组
+ *
+ * 用于将表单字段组织成可侧边抽屉展开/收起的布局，支持覆盖和侧边两种模式。
+ * 适合次要或辅助性的字段组，如筛选条件、详细信息、操作面板等。
+ */
 class DrawerFGC extends PiyingViewGroupBase {
     static __version = 2;
     static index = 0;
     name = `drawer-${DrawerFGC.index++}`;
     templateRef = viewChild.required('templateRef');
+    /** 抽屉内容区域 CSS 类名 */
     contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : []));
+    /** 侧边栏区域 CSS 类名 */
     sideClass = input(...(ngDevMode ? [undefined, { debugName: "sideClass" }] : []));
+    /** 遮罩层 CSS 类名 */
     overlayClass = input(...(ngDevMode ? [undefined, { debugName: "overlayClass" }] : []));
+    /** 抽屉模式 */
     mode = input('over', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** 抽屉位置 */
     position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
     contentFiled$$ = computed(() => {
         return this.field$$()
@@ -230,24 +296,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-drawer', imports: [AttributesDirective, NgTemplateOutlet, FormsModule, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('drawer' | cssPrefix) : wrapperClass$()\"\n  >\n    <input\n      [id]=\"name\"\n      type=\"checkbox\"\n      class=\"{{ 'drawer-toggle' | cssPrefix }}\"\n      #toggle\n      [ngModel]=\"opened()\"\n      (ngModelChange)=\"openChanged($event)\"\n    />\n    <div [class]=\"contentClass() | mergeClass: ('drawer-content' | cssPrefix)\">\n      <ng-container\n        *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: contentFiled$$() }\"\n      ></ng-container>\n    </div>\n    <div [class]=\"sideClass() | mergeClass: ('drawer-side' | cssPrefix)\">\n      <label\n        [for]=\"name\"\n        aria-label=\"close sidebar\"\n        [class]=\"overlayClass() | mergeClass: ('drawer-overlay' | cssPrefix)\"\n      ></label>\n      <ng-container\n        *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: sideFiled$$() }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], sideClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideClass", required: false }] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
 
+/**
+ * 标签页组
+ *
+ * 用于将表单字段组织成多标签页切换展示，支持多种标签样式和位置布局。
+ * 适合字段较多需要分类管理、多配置项分页展示的场景，如系统设置、表单分组等。
+ */
 class TabsFGC extends PiyingViewGroupBase {
     static __version = 2;
     static index = 0;
     templateRef = viewChild.required('templateRef');
     StrOrTemplateComponent = StrOrTemplateComponent;
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
     name = `pc-tabs-${TabsFGC.index++}`;
+    /** 当前激活的标签页索引 */
     activatedIndex = input(0, ...(ngDevMode ? [{ debugName: "activatedIndex" }] : []));
+    /** 标签类型 */
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+    /** 标签页位置 */
     placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+    /** 标签页内容区域 CSS 类名 */
     tabContentClass = input(useTwClass('bg-base-100 border-base-300 p-6'), ...(ngDevMode ? [{ debugName: "tabContentClass" }] : []));
-    isUnion = input(false, ...(ngDevMode ? [{ debugName: "isUnion" }] : []));
-    activatedIndex$ = linkedSignal(this.activatedIndex, ...(ngDevMode ? [{ debugName: "activatedIndex$" }] : []));
+    activatedIndex$ = linkedSignal(this.activatedIndex, ...(ngDevMode ? [{ debugName: "activatedIndex$", equal: () => false }] : [{ equal: () => false }]));
+    /** 切换前的回调函数 */
     beforeChange = input(...(ngDevMode ? [undefined, { debugName: "beforeChange" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$$ = computed(() => {
         return this.#theme.setClass(this.#theme.setSize('tabs', this.size()), this.type() ? this.#theme.addPrefix(`tabs-${this.type()}`) : undefined, this.placement() ? this.#theme.addPrefix(`tabs-${this.placement()}`) : undefined);
     }, ...(ngDevMode ? [{ debugName: "wrapperClass$$" }] : []));
+    isUnion$$ = computed(() => {
+        return (this.field$$().form.control instanceof FieldLogicGroup &&
+            this.field$$().form.control.type() === 'or');
+    }, ...(ngDevMode ? [{ debugName: "isUnion$$" }] : []));
     labelInputs = (input) => {
         return {
             content: input,
@@ -256,8 +337,7 @@ class TabsFGC extends PiyingViewGroupBase {
     constructor() {
         super();
         effect(() => {
-            const isUnion = this.isUnion();
-            if (isUnion) {
+            if (this.isUnion$$()) {
                 const index = this.activatedIndex$();
                 const control = this.field$$().form.control;
                 control.activateIndex$.set(index);
@@ -271,7 +351,7 @@ class TabsFGC extends PiyingViewGroupBase {
         this.activatedIndex$.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsFGC, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TabsFGC, isStandalone: true, selector: "app-tabs", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activatedIndex: { classPropertyName: "activatedIndex", publicName: "activatedIndex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, tabContentClass: { classPropertyName: "tabContentClass", publicName: "tabContentClass", isSignal: true, isRequired: false, transformFunction: null }, isUnion: { classPropertyName: "isUnion", publicName: "isUnion", isSignal: true, isRequired: false, transformFunction: null }, beforeChange: { classPropertyName: "beforeChange", publicName: "beforeChange", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    role=\"tablist\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('tabs' | cssPrefix) : wrapperClass$$()\"\n  >\n    @for (field of children$$(); track $index) {\n      @let item = field.props();\n      <label\n        role=\"tab\"\n        [class]=\"\n          'tab'\n            | cssPrefix\n            | mergeClass: ($index === activatedIndex$() ? ('tab-active' | cssPrefix) : undefined)\n        \"\n        (click)=\"changeIndex($index)\"\n      >\n        <!-- <input type=\"radio\" [name]=\"name\" /> -->\n\n        <ng-template\n          [selectlessOutlet]=\"StrOrTemplateComponent\"\n          [selectlessOutletInputs]=\"labelInputs | pure: item['title']\"\n        ></ng-template>\n      </label>\n      <div [class]=\"'tab-content' | cssPrefix | mergeClass: tabContentClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }, { kind: "pipe", type: PurePipe, name: "pure" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TabsFGC, isStandalone: true, selector: "app-tabs", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activatedIndex: { classPropertyName: "activatedIndex", publicName: "activatedIndex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, tabContentClass: { classPropertyName: "tabContentClass", publicName: "tabContentClass", isSignal: true, isRequired: false, transformFunction: null }, beforeChange: { classPropertyName: "beforeChange", publicName: "beforeChange", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    role=\"tablist\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('tabs' | cssPrefix) : wrapperClass$$()\"\n  >\n    @for (field of children$$(); track $index) {\n      @let item = field.props();\n      <label\n        role=\"tab\"\n        [class]=\"\n          'tab'\n            | cssPrefix\n            | mergeClass: ($index === activatedIndex$() ? ('tab-active' | cssPrefix) : undefined)\n        \"\n        (click)=\"changeIndex($index)\"\n      >\n        <!-- <input type=\"radio\" [name]=\"name\" /> -->\n\n        <ng-template\n          [selectlessOutlet]=\"StrOrTemplateComponent\"\n          [selectlessOutletInputs]=\"labelInputs | pure: item['title']\"\n        ></ng-template>\n      </label>\n      <div [class]=\"'tab-content' | cssPrefix | mergeClass: tabContentClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }, { kind: "pipe", type: PurePipe, name: "pure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsFGC, decorators: [{
             type: Component,
@@ -283,27 +363,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         PurePipe,
                         SelectorlessOutlet,
                     ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    role=\"tablist\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('tabs' | cssPrefix) : wrapperClass$$()\"\n  >\n    @for (field of children$$(); track $index) {\n      @let item = field.props();\n      <label\n        role=\"tab\"\n        [class]=\"\n          'tab'\n            | cssPrefix\n            | mergeClass: ($index === activatedIndex$() ? ('tab-active' | cssPrefix) : undefined)\n        \"\n        (click)=\"changeIndex($index)\"\n      >\n        <!-- <input type=\"radio\" [name]=\"name\" /> -->\n\n        <ng-template\n          [selectlessOutlet]=\"StrOrTemplateComponent\"\n          [selectlessOutletInputs]=\"labelInputs | pure: item['title']\"\n        ></ng-template>\n      </label>\n      <div [class]=\"'tab-content' | cssPrefix | mergeClass: tabContentClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], activatedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedIndex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], tabContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabContentClass", required: false }] }], isUnion: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUnion", required: false }] }], beforeChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeChange", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], activatedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedIndex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], tabContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabContentClass", required: false }] }], beforeChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeChange", required: false }] }] } });
 
+/**
+ * 步骤组
+ *
+ * 用于将表单字段组织成多步骤向导流程，支持步骤进度管理和前后切换。
+ * 适合复杂表单分步填写的场景，如注册流程、配置向导、订单填写等。
+ */
 class StepsFGC extends PiyingViewGroupBase {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
     StrOrTemplateComponent = StrOrTemplateComponent;
-    activatedIndex = model(0, ...(ngDevMode ? [{ debugName: "activatedIndex" }] : []));
-    activatedItem$$ = computed(() => this.field$$().children()[this.activatedIndex()], ...(ngDevMode ? [{ debugName: "activatedItem$$" }] : []));
+    // todo model
+    /** 当前激活的步骤索引 */
+    activatedIndex = input(0, ...(ngDevMode ? [{ debugName: "activatedIndex" }] : []));
+    activatedIndex$ = linkedSignal(this.activatedIndex, ...(ngDevMode ? [{ debugName: "activatedIndex$" }] : []));
+    activatedIndexChange = output();
+    activatedItem$$ = computed(() => this.field$$().children()[this.activatedIndex$()], ...(ngDevMode ? [{ debugName: "activatedItem$$" }] : []));
     prevItem$$ = computed(() => {
-        return this.children$$()[this.activatedIndex() - 1];
+        return this.children$$()[this.activatedIndex$() - 1];
     }, ...(ngDevMode ? [{ debugName: "prevItem$$" }] : []));
+    /** 自定义操作区域 */
     customAction = input(...(ngDevMode ? [undefined, { debugName: "customAction" }] : []));
+    /** 上一步按钮内容 */
     prev = input('⬅️', ...(ngDevMode ? [{ debugName: "prev" }] : []));
+    /** 下一步按钮内容 */
     next = input('➡️', ...(ngDevMode ? [{ debugName: "next" }] : []));
+    /** 步骤方向 */
     direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    /** 步骤颜色 */
     stepColor = input('primary', ...(ngDevMode ? [{ debugName: "stepColor" }] : []));
     toPrev() {
-        this.activatedIndex.update((value) => value - 1);
+        this.activatedIndex$.update((value) => value - 1);
+        this.activatedIndexChange.emit(this.activatedIndex$());
     }
     toNext() {
-        this.activatedIndex.update((value) => value + 1);
+        this.activatedIndex$.update((value) => value + 1);
+        this.activatedIndexChange.emit(this.activatedIndex$());
     }
     isActivated(activatedIndex, currentIndex) {
         return activatedIndex >= currentIndex;
@@ -313,7 +410,7 @@ class StepsFGC extends PiyingViewGroupBase {
         return clsx(this.#theme.addPrefix('steps'), this.#theme.addPrefix2('steps', this.direction()));
     }, ...(ngDevMode ? [{ debugName: "wrapperClass$$" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: StepsFGC, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: StepsFGC, isStandalone: true, selector: "app-steps", inputs: { activatedIndex: { classPropertyName: "activatedIndex", publicName: "activatedIndex", isSignal: true, isRequired: false, transformFunction: null }, customAction: { classPropertyName: "customAction", publicName: "customAction", isSignal: true, isRequired: false, transformFunction: null }, prev: { classPropertyName: "prev", publicName: "prev", isSignal: true, isRequired: false, transformFunction: null }, next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedIndex: "activatedIndexChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: wrapperClass$$()\"\n  >\n    @for (field of children$$(); track field.id || $index) {\n      @let label = field.props()['title'] || '\uD83D\uDCC4' + ($index + 1);\n      <li\n        [class]=\"\n          'step'\n            | cssPrefix\n            | mergeClass\n              : ((isActivated | pure: activatedIndex() : $index)\n                  ? ('step-' + stepColor() | cssPrefix)\n                  : undefined)\n        \"\n      >\n        {{ label }}\n      </li>\n    }\n  </ul>\n  <div class=\"{{ 'flex flex-col gap-4' | twPrefix }}\">\n    <ng-container\n      *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: activatedItem$$() }\"\n    ></ng-container>\n    @if (customAction()) {\n      <ng-container\n        *ngComponentOutlet=\"\n          StrOrTemplateComponent;\n          context: { inputs: { content: customAction(), context: this } }\n        \"\n      ></ng-container>\n    } @else {\n      <div [class]=\"'flex gap-2 items-center' | twPrefix\">\n        <button\n          [class]=\"'btn btn-secondary' | cssPrefix\"\n          [disabled]=\"activatedIndex() === 0 || prevItem$$().form.control?.invalid\"\n          (click)=\"toPrev()\"\n        >\n          {{ prev() }}\n        </button>\n\n        <button\n          [class]=\"'btn btn-primary' | cssPrefix\"\n          [disabled]=\"\n            activatedItem$$().form.control?.invalid || activatedIndex() + 1 !== children$$().length\n          \"\n          (click)=\"toNext()\"\n        >\n          {{ next() }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }, { kind: "pipe", type: TwPrefixPipe, name: "twPrefix" }, { kind: "pipe", type: PurePipe, name: "pure" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: StepsFGC, isStandalone: true, selector: "app-steps", inputs: { activatedIndex: { classPropertyName: "activatedIndex", publicName: "activatedIndex", isSignal: true, isRequired: false, transformFunction: null }, customAction: { classPropertyName: "customAction", publicName: "customAction", isSignal: true, isRequired: false, transformFunction: null }, prev: { classPropertyName: "prev", publicName: "prev", isSignal: true, isRequired: false, transformFunction: null }, next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedIndexChange: "activatedIndexChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: wrapperClass$$()\"\n  >\n    @for (field of children$$(); track field.id || $index) {\n      @let label = field.props()['title'] || '\uD83D\uDCC4' + ($index + 1);\n      <li\n        [class]=\"\n          'step'\n            | cssPrefix\n            | mergeClass\n              : ((isActivated | pure: activatedIndex$() : $index)\n                  ? ('step-' + stepColor() | cssPrefix)\n                  : undefined)\n        \"\n      >\n        {{ label }}\n      </li>\n    }\n  </ul>\n  <div class=\"{{ 'flex flex-col gap-4' | twPrefix }}\">\n    <ng-container\n      *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: activatedItem$$() }\"\n    ></ng-container>\n    @if (customAction()) {\n      <ng-container\n        *ngComponentOutlet=\"\n          StrOrTemplateComponent;\n          context: { inputs: { content: customAction(), context: this } }\n        \"\n      ></ng-container>\n    } @else {\n      <div [class]=\"'flex gap-2 items-center' | twPrefix\">\n        <button\n          [class]=\"'btn btn-secondary btn-circle' | cssPrefix\"\n          [disabled]=\"activatedIndex$() === 0 || prevItem$$().form.control?.invalid\"\n          (click)=\"toPrev()\"\n        >\n          {{ prev() }}\n        </button>\n\n        <button\n          [class]=\"'btn btn-primary btn-circle' | cssPrefix\"\n          [disabled]=\"\n            !activatedItem$$().form.control?.valid || activatedIndex$() + 1 === children$$().length\n          \"\n          (click)=\"toNext()\"\n        >\n          {{ next() }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }, { kind: "pipe", type: TwPrefixPipe, name: "twPrefix" }, { kind: "pipe", type: PurePipe, name: "pure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: StepsFGC, decorators: [{
             type: Component,
@@ -325,23 +422,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         PurePipe,
                         NgComponentOutlet,
                         AttributesDirective,
-                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: wrapperClass$$()\"\n  >\n    @for (field of children$$(); track field.id || $index) {\n      @let label = field.props()['title'] || '\uD83D\uDCC4' + ($index + 1);\n      <li\n        [class]=\"\n          'step'\n            | cssPrefix\n            | mergeClass\n              : ((isActivated | pure: activatedIndex() : $index)\n                  ? ('step-' + stepColor() | cssPrefix)\n                  : undefined)\n        \"\n      >\n        {{ label }}\n      </li>\n    }\n  </ul>\n  <div class=\"{{ 'flex flex-col gap-4' | twPrefix }}\">\n    <ng-container\n      *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: activatedItem$$() }\"\n    ></ng-container>\n    @if (customAction()) {\n      <ng-container\n        *ngComponentOutlet=\"\n          StrOrTemplateComponent;\n          context: { inputs: { content: customAction(), context: this } }\n        \"\n      ></ng-container>\n    } @else {\n      <div [class]=\"'flex gap-2 items-center' | twPrefix\">\n        <button\n          [class]=\"'btn btn-secondary' | cssPrefix\"\n          [disabled]=\"activatedIndex() === 0 || prevItem$$().form.control?.invalid\"\n          (click)=\"toPrev()\"\n        >\n          {{ prev() }}\n        </button>\n\n        <button\n          [class]=\"'btn btn-primary' | cssPrefix\"\n          [disabled]=\"\n            activatedItem$$().form.control?.invalid || activatedIndex() + 1 !== children$$().length\n          \"\n          (click)=\"toNext()\"\n        >\n          {{ next() }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], activatedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedIndex", required: false }] }, { type: i0.Output, args: ["activatedIndexChange"] }], customAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "customAction", required: false }] }], prev: [{ type: i0.Input, args: [{ isSignal: true, alias: "prev", required: false }] }], next: [{ type: i0.Input, args: [{ isSignal: true, alias: "next", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }] } });
-
-class FieldsetFGC extends PiyingViewGroupBase {
-    static __version = 2;
-    templateRef = viewChild.required('templateRef');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FieldsetFGC, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FieldsetFGC, isStandalone: true, selector: "app-fieldset", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #templateRef let-attr=\"attributes\">\n  <fieldset\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"'fieldset' | cssPrefix | mergeClass: attr()?.class\"\n  >\n    <legend [class]=\"'fieldset-legend' | cssPrefix\">{{ props$$()['title'] }}</legend>\n\n    @for (field of children$$(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n      ></ng-container>\n    }\n  </fieldset>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: FieldsetFGC, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-fieldset', imports: [AttributesDirective, NgTemplateOutlet, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <fieldset\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"'fieldset' | cssPrefix | mergeClass: attr()?.class\"\n  >\n    <legend [class]=\"'fieldset-legend' | cssPrefix\">{{ props$$()['title'] }}</legend>\n\n    @for (field of children$$(); track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: field }\"\n      ></ng-container>\n    }\n  </fieldset>\n</ng-template>\n" }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+                    ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <ul\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: wrapperClass$$()\"\n  >\n    @for (field of children$$(); track field.id || $index) {\n      @let label = field.props()['title'] || '\uD83D\uDCC4' + ($index + 1);\n      <li\n        [class]=\"\n          'step'\n            | cssPrefix\n            | mergeClass\n              : ((isActivated | pure: activatedIndex$() : $index)\n                  ? ('step-' + stepColor() | cssPrefix)\n                  : undefined)\n        \"\n      >\n        {{ label }}\n      </li>\n    }\n  </ul>\n  <div class=\"{{ 'flex flex-col gap-4' | twPrefix }}\">\n    <ng-container\n      *ngTemplateOutlet=\"fieldTemplateRef(); context: { $implicit: activatedItem$$() }\"\n    ></ng-container>\n    @if (customAction()) {\n      <ng-container\n        *ngComponentOutlet=\"\n          StrOrTemplateComponent;\n          context: { inputs: { content: customAction(), context: this } }\n        \"\n      ></ng-container>\n    } @else {\n      <div [class]=\"'flex gap-2 items-center' | twPrefix\">\n        <button\n          [class]=\"'btn btn-secondary btn-circle' | cssPrefix\"\n          [disabled]=\"activatedIndex$() === 0 || prevItem$$().form.control?.invalid\"\n          (click)=\"toPrev()\"\n        >\n          {{ prev() }}\n        </button>\n\n        <button\n          [class]=\"'btn btn-primary btn-circle' | cssPrefix\"\n          [disabled]=\"\n            !activatedItem$$().form.control?.valid || activatedIndex$() + 1 === children$$().length\n          \"\n          (click)=\"toNext()\"\n        >\n          {{ next() }}\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], activatedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedIndex", required: false }] }], activatedIndexChange: [{ type: i0.Output, args: ["activatedIndexChange"] }], customAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "customAction", required: false }] }], prev: [{ type: i0.Input, args: [{ isSignal: true, alias: "prev", required: false }] }], next: [{ type: i0.Input, args: [{ isSignal: true, alias: "next", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionFGC, CardFGC, CarouselFGC, DockFGC, DrawerFGC, FieldsetFGC, ListFGC, NavbarFGC, StepsFGC, TabsFGC };
+export { AccordionFGC, CardFGC, CarouselFGC, DockFGC, DrawerFGC, ListFGC, NavbarFGC, StepsFGC, TabsFGC };
 //# sourceMappingURL=piying-lib-angular-daisyui-field-group.mjs.map