@piying-lib/angular-daisyui 1.2.0 → 1.2.1

package/fesm2022/piying-lib-angular-daisyui-non-field-control.mjs

@@ -11,13 +11,22 @@ import { CssPrefixPipe, MergeClassPipe, TwPrefixPipe } from '@piying-lib/angular
 import { PurePipe } from '@cyia/ngx-common/pipe';
 import { FormsModule } from '@angular/forms';
 
+/**
+ * 警告提示组件
+ * 用于显示重要的提示信息，支持多种样式、颜色和布局方向
+ * 常用于操作反馈、错误提示、成功通知等场景
+ */
 class AlertNFCC {
     static __version = 2;
     StrOrTemplateComponent = StrOrTemplateComponent;
     templateRef = viewChild.required('templateRef');
+    /** 样式风格 */
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 方向 */
     direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    /** 内容 */
     content = input('Default', ...(ngDevMode ? [{ debugName: "content" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -31,13 +40,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-alert', imports: [AttributesDirective, NgClass, SelectorlessOutlet], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div role=\"alert\" [attributes]=\"attr()\" [ngClass]=\"wrapperClass$()\">\n    <ng-template\n      [selectlessOutlet]=\"StrOrTemplateComponent\"\n      [selectlessOutletInputs]=\"{ content: content }\"\n    ></ng-template>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
+/**
+ * 头像组件
+ * 用于显示用户头像、图标或占位符，支持在线/离线状态指示
+ * 可用于个人资料、列表项、评论等场景
+ */
 class AvatarNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 占位符文本或内容 */
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    /** 占位符 CSS 类名 */
     placeholderClass = input('', ...(ngDevMode ? [{ debugName: "placeholderClass" }] : []));
+    /** 图片 URL */
     imgUrl = input(...(ngDevMode ? [undefined, { debugName: "imgUrl" }] : []));
+    /** 包装器 CSS 类名 */
     wrapperClass = input('w-24 rounded', ...(ngDevMode ? [{ debugName: "wrapperClass" }] : []));
+    /** 状态指示 */
     status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
     #theme = inject(ThemeService);
     mainClass$$ = computed(() => {
@@ -51,13 +70,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-avatar', imports: [AttributesDirective, NgClass], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div [attributes]=\"attr()\" [ngClass]=\"mainClass$$()\">\n    <div [class]=\"wrapperClass()\">\n      @if (imgUrl()) {\n        <img [src]=\"imgUrl()\" />\n      } @else {\n        <span [class]=\"placeholderClass()\">{{ placeholder() }}</span>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderClass", required: false }] }], imgUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgUrl", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
 
+/**
+ * 徽章组件
+ * 用于显示数量标签、状态标记或重要提示，如未读消息数、通知提示等
+ * 支持多种样式风格和颜色尺寸配置
+ */
 class BadgeNFCC {
     static __version = 2;
     StrOrTemplateComponent = StrOrTemplateComponent;
     templateRef = viewChild.required('templateRef');
+    /** 样式风格 */
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 内容 */
     content = input('Badge', ...(ngDevMode ? [{ debugName: "content" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -71,10 +99,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-badge', imports: [AttributesDirective, NgClass, SelectorlessOutlet, EventsDirective], template: "<ng-template #templateRef let-attr=\"attributes\" let-events=\"events\">\n  <span [attributes]=\"attr()\" [ngClass]=\"wrapperClass$()\" [events]=\"events()\">\n    <ng-template\n      [selectlessOutlet]=\"StrOrTemplateComponent\"\n      [selectlessOutletInputs]=\"{ content: content }\"\n    ></ng-template\n  ></span>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
+/**
+ * 面包屑导航组件
+ * 用于显示页面层级结构和当前位置，帮助用户了解所处位置并快速返回上级页面
+ * 支持自定义标签、图标和 URL 配置
+ */
 class BreadcrumbsNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 面包屑选项列表 */
     options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    /** 选项 CSS 类名 */
     optionClass = input(...(ngDevMode ? [undefined, { debugName: "optionClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BreadcrumbsNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: BreadcrumbsNFCC, isStandalone: true, selector: "app-breadcrumbs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #displayTemp let-item>\n  @if (item.icon) {\n    <mat-icon\n      [inline]=\"item.icon.inline\"\n      [fontIcon]=\"item.icon.fontIcon\"\n      [fontSet]=\"item.icon.fontSet\"\n      [svgIcon]=\"item.icon.svgIcon\"\n    ></mat-icon>\n  }\n  @if (item.label) {\n    <span>{{ item.label }}</span>\n  }\n  @if (item.templateRef) {\n    <ng-container *ngTemplateOutlet=\"item.templateRef; context: { $implicit: item }\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"attr()?.class | mergeClass: ('breadcrumbs' | cssPrefix)\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <ul>\n      @for (item of options(); track $index) {\n        <li [class]=\"optionClass()\">\n          @if (item.url && item.extraLink) {\n            <a [href]=\"item.url\" class=\"{{ 'link' | cssPrefix }}\">\n              <ng-container\n                *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n              ></ng-container>\n            </a>\n          } @else if (item.url) {\n            <a\n              [routerLink]=\"item.url\"\n              routerLinkActive=\"{{ 'breadcrumbs-item-activate' | cssPrefix }}\"\n              class=\"{{ 'link' | cssPrefix }}\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n              ></ng-container\n            ></a>\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n            ></ng-container>\n          }\n        </li>\n      }\n    </ul>\n  </div>\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
@@ -92,18 +127,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                     ], template: "<ng-template #displayTemp let-item>\n  @if (item.icon) {\n    <mat-icon\n      [inline]=\"item.icon.inline\"\n      [fontIcon]=\"item.icon.fontIcon\"\n      [fontSet]=\"item.icon.fontSet\"\n      [svgIcon]=\"item.icon.svgIcon\"\n    ></mat-icon>\n  }\n  @if (item.label) {\n    <span>{{ item.label }}</span>\n  }\n  @if (item.templateRef) {\n    <ng-container *ngTemplateOutlet=\"item.templateRef; context: { $implicit: item }\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"attr()?.class | mergeClass: ('breadcrumbs' | cssPrefix)\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    <ul>\n      @for (item of options(); track $index) {\n        <li [class]=\"optionClass()\">\n          @if (item.url && item.extraLink) {\n            <a [href]=\"item.url\" class=\"{{ 'link' | cssPrefix }}\">\n              <ng-container\n                *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n              ></ng-container>\n            </a>\n          } @else if (item.url) {\n            <a\n              [routerLink]=\"item.url\"\n              routerLinkActive=\"{{ 'breadcrumbs-item-activate' | cssPrefix }}\"\n              class=\"{{ 'link' | cssPrefix }}\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n              ></ng-container\n            ></a>\n          } @else {\n            <ng-container\n              *ngTemplateOutlet=\"displayTemp; context: { $implicit: item }\"\n            ></ng-container>\n          }\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionClass", required: false }] }] } });
 
+/**
+ * 按钮组件
+ * 用于触发操作或提交表单，是最常用的操作控件
+ * 支持多种颜色、样式、尺寸、形状以及加载状态
+ */
 class ButtonNFCC {
     static __version = 2;
     StrOrTemplateComponent = StrOrTemplateComponent;
     templateRef = viewChild.required('templateRef');
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 按钮样式风格 */
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 形状 */
     shape = input(...(ngDevMode ? [undefined, { debugName: "shape" }] : []));
+    /** 是否激活状态 */
     active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+    /** 按钮内容 */
     content = input('Default', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    /** 点击事件处理函数 */
     clicked = input(...(ngDevMode ? [undefined, { debugName: "clicked" }] : []));
+    /** 是否禁用 */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** 是否禁用加载图标 */
     disableLoadingIcon = input(false, ...(ngDevMode ? [{ debugName: "disableLoadingIcon" }] : []));
     isLoading$ = signal(false, ...(ngDevMode ? [{ debugName: "isLoading$" }] : []));
     async onClick(event) {
@@ -130,12 +179,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-button', imports: [AttributesDirective, CssPrefixPipe, SelectorlessOutlet, MergeClassPipe, TwPrefixPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  @let forAttr = attr()?.for;\n  @let isDisabled = isLoading$() || disabled();\n  @if (forAttr) {\n    <label\n      [attributes]=\"attr()\"\n      [excludes]=\"['class']\"\n      [class]=\"\n        attr()?.class\n          | mergeClass: wrapperClass$() : (isDisabled ? ('btn-disabled' | cssPrefix) : undefined)\n      \"\n      (click)=\"onClick($event)\"\n      tabindex=\"-1\"\n      role=\"button\"\n      aria-disabled=\"true\"\n    >\n      @if (isLoading$() && !disableLoadingIcon()) {\n        <span\n          [class]=\"'loading loading-spinner' | cssPrefix | mergeClass: ('absolute z-10' | twPrefix)\"\n        ></span>\n      }\n      <ng-template\n        [selectlessOutlet]=\"StrOrTemplateComponent\"\n        [selectlessOutletInputs]=\"{ content: content }\"\n      ></ng-template\n    ></label>\n  } @else {\n    <button\n      [attributes]=\"attr()\"\n      [excludes]=\"['class', 'type']\"\n      [class]=\"attr()?.class | mergeClass: wrapperClass$()\"\n      (click)=\"onClick($event)\"\n      [disabled]=\"isLoading$() || disabled()\"\n      [type]=\"attr()?.type ?? 'button'\"\n    >\n      @if (isLoading$() && !disableLoadingIcon()) {\n        <span\n          [class]=\"'loading loading-spinner' | cssPrefix | mergeClass: ('absolute z-10' | twPrefix)\"\n        ></span>\n      }\n      <ng-template\n        [selectlessOutlet]=\"StrOrTemplateComponent\"\n        [selectlessOutletInputs]=\"{ content: content }\"\n      ></ng-template>\n    </button>\n  }\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], clicked: [{ type: i0.Input, args: [{ isSignal: true, alias: "clicked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableLoadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLoadingIcon", required: false }] }] } });
 
+/**
+ * 分割线组件
+ * 用于在内容之间添加视觉分隔，支持水平/垂直方向和内容位置调整
+ * 常用于表单、列表、段落之间的分隔
+ */
 class DividerNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 方向 */
     direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
+    /** 内容位置 */
     contentPosition = input(...(ngDevMode ? [undefined, { debugName: "contentPosition" }] : []));
+    /** 分割线内容 */
     content = input('Default', ...(ngDevMode ? [{ debugName: "content" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$$ = computed(() => {
@@ -179,8 +237,11 @@ class FabItem {
 class FabNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 选项列表 */
     options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    /** 是否启用花朵式展开 */
     flower = input(false, ...(ngDevMode ? [{ debugName: "flower" }] : []));
+    /** 点击选项后是否自动关闭 */
     autoClose = input(true, ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
     resolvedOptions$$ = computed(() => {
         return (this.options()?.map((option) => {
@@ -228,10 +289,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                     ], template: "<ng-template #iconTemp let-item let-disableButton=\"disableButton\">\n  @if (item.option.templateRef) {\n    <ng-container\n      *ngTemplateOutlet=\"item.option.templateRef; context: { $implicit: item }\"\n    ></ng-container>\n  } @else if (item.option.label) {\n    @if (disableButton) {\n      <span [class]=\"item.option.class | mergeClass: commonClass()\" (click)=\"item.onClick($event)\">\n        {{ item.option.label }}\n      </span>\n    } @else {\n      <button\n        [class]=\"item.option.class\"\n        (click)=\"item.onClick($event)\"\n        [disabled]=\"item.isLoading$()\"\n      >\n        {{ item.option.label }}\n      </button>\n    }\n  } @else {\n    @let icon = item.option.icon;\n    <mat-icon\n      [class]=\"item.option.class\"\n      (click)=\"item.onClick($event)\"\n      [ariaDisabled]=\"item.isLoading$()\"\n      [inline]=\"icon.inline\"\n      [fontIcon]=\"icon.fontIcon\"\n      [fontSet]=\"icon.fontSet\"\n      [svgIcon]=\"icon.svgIcon\"\n    ></mat-icon>\n  }\n</ng-template>\n\n<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"attr()?.class\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    class=\"{{ 'fab' | cssPrefix }}\"\n    [ngClass]=\"wrapperClass()\"\n  >\n    @let defaultIcon = defaultIcon$$();\n    <div tabindex=\"0\" role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"iconTemp; context: { $implicit: defaultIcon, disableButton: true }\"\n      ></ng-container>\n    </div>\n    @if (closeIcon$$(); as closeIcon) {\n      <div class=\"{{ 'fab-close' | cssPrefix }}\" role=\"button\" tabindex=\"0\">\n        <ng-container\n          *ngTemplateOutlet=\"iconTemp; context: { $implicit: closeIcon, disableButton: true }\"\n        ></ng-container>\n      </div>\n    }\n    @if (mainIcon$$(); as mainIcon) {\n      <div class=\"{{ 'fab-main-action' | cssPrefix }}\">\n        <ng-container *ngTemplateOutlet=\"iconTemp; context: { $implicit: mainIcon }\"></ng-container>\n      </div>\n    }\n\n    @for (item of resolvedOptions$$(); track $index) {\n      <ng-container *ngTemplateOutlet=\"iconTemp; context: { $implicit: item }\"></ng-container>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], flower: [{ type: i0.Input, args: [{ isSignal: true, alias: "flower", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], commonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "commonClass", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], mainIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainIcon", required: false }] }] } });
 
+/**
+ * 键盘按键组件
+ * 用于展示键盘快捷键或组合键提示，常见于帮助文档、教程或功能说明中
+ * 可显示单个按键或按键组合
+ */
 class KbdNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 内容 */
     content = input('Default', ...(ngDevMode ? [{ debugName: "content" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -245,10 +313,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-kbd', imports: [AttributesDirective, NgClass, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <kbd\n    [class]=\"attr()?.class | mergeClass: ('kbd' | cssPrefix)\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [ngClass]=\"wrapperClass$()\"\n    >{{ content() }}</kbd\n  >\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
+/**
+ * 加载指示器组件
+ * 用于在数据加载、请求处理等异步操作期间显示加载状态
+ * 提供多种样式类型（-spinner、dots、ring 等）供选择
+ */
 class LoadingNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 加载类型 */
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$$ = computed(() => {
@@ -262,11 +337,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-loading', imports: [AttributesDirective, NgClass, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <span\n    [class]=\"attr()?.class | mergeClass: ('loading' | cssPrefix)\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [ngClass]=\"wrapperClass$$()\"\n  ></span>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
+/**
+ * 进度条组件
+ * 用于显示操作完成的进度或数据加载的百分比
+ * 支持自定义颜色和进度值显示
+ */
 class ProgressNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 进度值 */
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /** 最大值 */
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -283,13 +366,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-progress', imports: [AttributesDirective, NgClass, CssPrefixPipe, MergeClassPipe, PurePipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  @if (isNumber | pure: value()) {\n    <progress\n      [value]=\"value()\"\n      [max]=\"max()\"\n      [class]=\"attr()?.class | mergeClass: ('progress' | cssPrefix)\"\n      [ngClass]=\"wrapperClass$()\"\n      [attributes]=\"attr()\"\n      [excludes]=\"['class']\"\n    ></progress>\n  } @else {\n    <progress\n      [max]=\"max()\"\n      [class]=\"attr()?.class | mergeClass: ('progress' | cssPrefix)\"\n      [ngClass]=\"wrapperClass$()\"\n      [attributes]=\"attr()\"\n      [excludes]=\"['class']\"\n    ></progress>\n  }\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
+/**
+ * 环形进度组件
+ * 用于显示圆形的进度指示器，适合空间受限或需要美观展示的场景
+ * 支持自定义线宽和进度值配置
+ */
 class RadialProgressNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 进度值 */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** 进度值映射函数 */
     valueMap = input((value) => {
         return `${value * 100}%`;
     }, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
+    /** 线宽 */
     strokeWidth = input(...(ngDevMode ? [undefined, { debugName: "strokeWidth" }] : []));
     value$$ = computed(() => {
         return this.value() * 100;
@@ -313,13 +404,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-radial-progress', imports: [AttributesDirective, NgStyle, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [aria-valuenow]=\"value$$()\"\n    role=\"progressbar\"\n    [ngStyle]=\"wrapperStyle$$()\"\n    [class]=\"attr()?.class | mergeClass: ('radial-progress' | cssPrefix)\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    {{ valueMap()(value()) }}\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMap", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
 
+/**
+ * 状态指示器组件
+ * 用于显示对象的当前状态（如在线、离线、完成等），常用于列表项或卡片中
+ * 支持多种动画效果（ping、bounce）增强视觉提示
+ */
 class StatusNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 内容 */
     content = input('Default', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 是否启用 ping 动画效果 */
     animatePing = input(...(ngDevMode ? [undefined, { debugName: "animatePing" }] : []));
+    /** 是否启用 bounce 动画效果 */
     animateBounce = input(...(ngDevMode ? [undefined, { debugName: "animateBounce" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -333,9 +434,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-status', imports: [AttributesDirective, NgClass, CssPrefixPipe, TwPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"attr()?.class | mergeClass: 'flex items-center gap-2'\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n  >\n    @if (animatePing()) {\n      <div class=\"{{ 'inline-grid *:[grid-area:1/1]' | twPrefix }}\">\n        <div class=\"{{ 'status' | cssPrefix }}\" [ngClass]=\"wrapperClass$()\"></div>\n        <div class=\"{{ 'status' | cssPrefix }}\" [ngClass]=\"wrapperClass$()\"></div>\n      </div>\n    } @else {\n      <div class=\"{{ 'status' | cssPrefix }}\" [ngClass]=\"wrapperClass$()\"></div>\n    }\n    @if (content(); as value) {\n      <span>\n        {{ value }}\n      </span>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animatePing: [{ type: i0.Input, args: [{ isSignal: true, alias: "animatePing", required: false }] }], animateBounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateBounce", required: false }] }] } });
 
+/**
+ * 主题控制器组件
+ * 用于切换应用的主题样式，通常与主题切换功能配合使用
+ * 可通过配置不同的主题值来改变整体配色方案
+ */
 class ThemeControllerNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 主题值 */
     value = input('synthwave', ...(ngDevMode ? [{ debugName: "value" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThemeControllerNFCC, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: ThemeControllerNFCC, isStandalone: true, selector: "app-theme-controller", inputs: { value: { classPropertyName: "value", publicName: "value", 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  <input\n    type=\"checkbox\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('toggle theme-controller' | cssPrefix)\"\n    [value]=\"value()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: AttributesDirective, selector: "[attributes]", inputs: ["attributes", "excludes"] }, { kind: "pipe", type: CssPrefixPipe, name: "cssPrefix" }, { kind: "pipe", type: MergeClassPipe, name: "mergeClass" }] });
@@ -345,16 +452,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ selector: 'app-theme-controller', imports: [AttributesDirective, CssPrefixPipe, MergeClassPipe], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <input\n    type=\"checkbox\"\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class | mergeClass: ('toggle theme-controller' | cssPrefix)\"\n    [value]=\"value()\"\n  />\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
+/**
+ * 下拉菜单组件
+ * 用于在有限空间内展示多个操作选项或列表项
+ * 支持悬停或点击触发，可配置菜单对齐方式和显示位置
+ */
 class DropdownNFCC {
     static __version = 2;
     StrOrTemplateComponent = StrOrTemplateComponent;
     templateRef = viewChild.required('templateRef');
+    /** 标题内容 */
     title = input('Default', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** 标题 CSS 类名 */
     titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : []));
+    /** 对齐方式 */
     align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : []));
+    /** 位置 */
     position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
+    /** 触发动作 */
     triggerAction = input(...(ngDevMode ? [undefined, { debugName: "triggerAction" }] : []));
+    /** 内容 */
     content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+    /** 内容 CSS 类名 */
     contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : []));
     #theme = inject(ThemeService);
     wrapperClass$ = computed(() => {
@@ -376,19 +495,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                     ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [attributes]=\"attr()\"\n    [excludes]=\"['class']\"\n    [class]=\"attr()?.class\"\n    [ngClass]=\"wrapperClass$()\"\n  >\n    <div\n      tabindex=\"0\"\n      role=\"button\"\n      class=\"{{ 'btn' | cssPrefix | mergeClass: ('m-1' | twPrefix) : titleClass() }}\"\n    >\n      <ng-template\n        [selectlessOutlet]=\"StrOrTemplateComponent\"\n        [selectlessOutletInputs]=\"{ content: title }\"\n      ></ng-template>\n    </div>\n    <div tabindex=\"-1\" class=\"{{ 'dropdown-content' | cssPrefix | mergeClass: contentClass() }}\">\n      <ng-template\n        [selectlessOutlet]=\"StrOrTemplateComponent\"\n        [selectlessOutletInputs]=\"{ content: content }\"\n      ></ng-template>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], triggerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAction", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] } });
 
+/**
+ * 统计数据显示组件
+ * 用于展示关键数据指标，支持标题、数值、描述和图标的组合展示
+ * 常用于数据报表、仪表盘等数据可视化场景
+ */
 class StatNFCC {
     static __version = 2;
     StrOrTemplateComponent = StrOrTemplateComponent;
     PiyingView = PiyingView;
     templateRef = viewChild.required('templateRef');
     parentPyOptions = inject(PI_INPUT_OPTIONS_TOKEN, { optional: true });
+    /** 标题内容 */
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    /** 标题 CSS 类名 */
     titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : []));
+    /** 数值内容 */
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /** 数值 CSS 类名 */
     valueClass = input(...(ngDevMode ? [undefined, { debugName: "valueClass" }] : []));
+    /** 描述内容 */
     desc = input(...(ngDevMode ? [undefined, { debugName: "desc" }] : []));
+    /** 描述 CSS 类名 */
     descClass = input(...(ngDevMode ? [undefined, { debugName: "descClass" }] : []));
+    /** 图标内容 */
     figure = input(...(ngDevMode ? [undefined, { debugName: "figure" }] : []));
+    /** 图标 CSS 类名 */
     figureClass = input(...(ngDevMode ? [undefined, { debugName: "figureClass" }] : []));
     templateInput = (schema) => {
         return {
@@ -413,16 +545,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                     ], template: "<ng-template #templateRef let-attr=\"attributes\">\n  <div\n    [class]=\"'stat' | cssPrefix | mergeClass: attr?.().class\"\n    [attributes]=\"attr?.()\"\n    [excludes]=\"['class']\"\n  >\n    @if (title()) {\n      <div [class]=\"'stat-title' | cssPrefix | mergeClass: titleClass()\">\n        <ng-template\n          [selectlessOutlet]=\"PiyingView\"\n          [selectlessOutletInputs]=\"templateInput | pure: title\"\n        ></ng-template>\n      </div>\n    }\n    @if (value()) {\n      <div [class]=\"'stat-value' | cssPrefix | mergeClass: valueClass()\">\n        <ng-template\n          [selectlessOutlet]=\"PiyingView\"\n          [selectlessOutletInputs]=\"templateInput | pure: value\"\n        ></ng-template>\n      </div>\n    }\n    @if (desc()) {\n      <div [class]=\"'stat-desc' | cssPrefix | mergeClass: descClass()\">\n        <ng-template\n          [selectlessOutlet]=\"PiyingView\"\n          [selectlessOutletInputs]=\"templateInput | pure: desc\"\n        ></ng-template>\n      </div>\n    }\n    @if (figure()) {\n      <div [class]=\"'stat-figure' | cssPrefix | mergeClass: figureClass()\">\n        <ng-template\n          [selectlessOutlet]=\"PiyingView\"\n          [selectlessOutletInputs]=\"templateInput | pure: figure\"\n        ></ng-template>\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], desc: [{ type: i0.Input, args: [{ isSignal: true, alias: "desc", required: false }] }], descClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "descClass", required: false }] }], figure: [{ type: i0.Input, args: [{ isSignal: true, alias: "figure", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }] } });
 
+/**
+ * 表单提交按钮组件
+ * 用于表单提交、重置等操作，具有与按钮组件相同的样式特性
+ * 常用于表单底部操作区域
+ */
 class InputButtonNFCC {
     static __version = 2;
     templateRef = viewChild.required('templateRef');
+    /** 按钮类型 */
     type = input('submit', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /** 颜色主题 */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** 按钮样式风格 */
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+    /** 尺寸大小 */
     size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    /** 形状 */
     shape = input(...(ngDevMode ? [undefined, { debugName: "shape" }] : []));
+    /** 是否激活状态 */
     active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+    /** 点击事件处理函数 */
     clicked = input(...(ngDevMode ? [undefined, { debugName: "clicked" }] : []));
+    /** 是否禁用 */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     isLoading$ = signal(false, ...(ngDevMode ? [{ debugName: "isLoading$" }] : []));
     async onClick(event) {