import { Component, input, output } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgStyle, NgTemplateOutlet } from '@angular/common';
import { ThyCollapseModule } from 'ngx-tethys/collapse';
import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
import { ThyInputNumber } from 'ngx-tethys/input-number';
import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
import { ThyOption } from 'ngx-tethys/shared';
import { ThyTooltipModule } from 'ngx-tethys/tooltip';
import { ThyButtonModule } from 'ngx-tethys/button';
import { ThyGridModule } from 'ngx-tethys/grid';
import { ThyLayoutModule } from 'ngx-tethys/layout';
import { ThyColorPickerDirective } from 'ngx-tethys/color-picker';
import { ThyDatePickerModule } from 'ngx-tethys/date-picker';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "ngx-tethys/collapse";
import * as i3 from "ngx-tethys/input";
import * as i4 from "ngx-tethys/select";
import * as i5 from "ngx-tethys/shared";
import * as i6 from "ngx-tethys/tooltip";
import * as i7 from "ngx-tethys/button";
import * as i8 from "ngx-tethys/grid";
import * as i9 from "ngx-tethys/date-picker";
export class PuzzleFormRendererComponent {
    /**
     * 表单字段配置数组
     */
    sections = input.required();
    /**
     * 表单数据对象
     */
    formData = input.required();
    accordion = input(true);
    /**
     * 表单字段值变化事件
     */
    fieldChange = output();
    /**
     * 数组项添加事件
     */
    arrayItemAdd = output();
    /**
     * 数组项删除事件
     */
    arrayItemRemove = output();
    /**
     * 按钮点击事件
     */
    buttonClick = output();
    /**
     * 日期变化事件（特殊处理）
     */
    dateChange = output();
    /**
     * 选项编辑事件
     */
    optionAdd = output();
    optionRemove = output();
    /**
     * 字段值变化处理
     */
    onFormFieldChange(key, value, parentKey, index) {
        this.fieldChange.emit({ key, value, parentKey, index });
    }
    /**
     * 添加数组项
     */
    onAddArrayItem(fieldKey, children = []) {
        this.arrayItemAdd.emit({ fieldKey, children });
    }
    /**
     * 删除数组项
     */
    onRemoveArrayItem(fieldKey, index) {
        this.arrayItemRemove.emit({ fieldKey, index });
    }
    /**
     * 按钮点击处理
     */
    onButtonClick(field, data) {
        this.buttonClick.emit({ field, data });
    }
    /**
     * 日期变化处理
     */
    onDateChange(key, value) {
        this.dateChange.emit({ key, value });
    }
    /**
     * 添加选项
     */
    onAddOption(fieldKey) {
        this.optionAdd.emit({ fieldKey });
    }
    /**
     * 删除选项
     */
    onRemoveOption(fieldKey, index) {
        this.optionRemove.emit({ fieldKey, index });
    }
    /**
     * 检查字段是否可见
     */
    isFieldVisible(field) {
        if (!field.visibleWhen) {
            return true;
        }
        return field.visibleWhen(this.formData());
    }
    /**
     * 获取字段的选项列表
     */
    getFieldOptions(field) {
        if (field.optionsStream) {
            // TODO: 处理流式选项，这里可能需要异步处理
            return field.options || [];
        }
        return field.options || [];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PuzzleFormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PuzzleFormRendererComponent, isStandalone: true, selector: "ngx-puzzle-form-renderer, puzzle-form-renderer", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: true, transformFunction: null }, accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", arrayItemAdd: "arrayItemAdd", arrayItemRemove: "arrayItemRemove", buttonClick: "buttonClick", dateChange: "dateChange", optionAdd: "optionAdd", optionRemove: "optionRemove" }, ngImport: i0, template: "<div class=\"dynamic-form-renderer\">\n  <thy-collapse [thyAccordion]=\"accordion()\">\n    @for (section of sections();let i = $index; track section.label) {\n      <thy-collapse-item [thyTitle]=\"section.label\" [thyActive]=\"i === 0\">\n        @if (section?.children && section.children!.length > 0) {\n          <ng-container\n            [ngTemplateOutlet]=\"fieldRenderer\"\n            [ngTemplateOutletContext]=\"{\n              fields: section.children,\n              formData: formData(),\n              parentKey: '',\n              level: 0\n            }\"\n          >\n          </ng-container>\n        }\n      </thy-collapse-item>\n    }\n  </thy-collapse>\n</div>\n\n<!-- \u9012\u5F52\u5B57\u6BB5\u6E32\u67D3\u5668\u6A21\u677F -->\n<ng-template #fieldRenderer let-fields=\"fields\" let-formData=\"formData\" let-parentKey=\"parentKey\" let-level=\"level\">\n  <div thyRow [thyGutter]=\"16\" [style.margin-left.px]=\"level * 16\">\n    @for (field of fields; track field.key) {\n      @if (isFieldVisible(field)) {\n        @switch (field.schemaType) {\n          @case ('group') {\n            <div [thyCol]=\"24\" class=\"group-field mb-3\">\n              <div class=\"group-header mb-2\">\n                <h6 class=\"mb-1\">{{ field.label }}</h6>\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </div>\n              @if (field.children) {\n                <ng-container\n                  [ngTemplateOutlet]=\"fieldRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    fields: field.children,\n                    formData: formData,\n                    parentKey: parentKey,\n                    level: level + 1\n                  }\"\n                >\n                </ng-container>\n              }\n            </div>\n          }\n\n          @case ('array') {\n            <div [thyCol]=\"24\" class=\"array-field mb-3\">\n              <div class=\"array-header d-flex justify-content-between align-items-center mb-2\">\n                <label class=\"mb-0\">\n                  {{ field.label }}\n                  @if (field?.description) {\n                    <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                  }\n                </label>\n                <thy-button thySize=\"sm\" thyIcon=\"plus\" (click)=\"onAddArrayItem(field.key, field.children || [])\"> \u6DFB\u52A0 </thy-button>\n              </div>\n\n              @for (item of formData[field.key] || []; track $index) {\n                <div class=\"array-item border rounded p-3 mb-2\">\n                  <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                    <span class=\"text-muted\">{{ field.label }} #{{ $index + 1 }}</span>\n                    <thy-button thySize=\"sm\" thyIcon=\"trash\" [thyType]=\"'danger'\" (click)=\"onRemoveArrayItem(field.key, $index)\">\n                      \u5220\u9664\n                    </thy-button>\n                  </div>\n\n                  @if (field.children) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"arrayItemRenderer\"\n                      [ngTemplateOutletContext]=\"{\n                        fields: field.children,\n                        itemData: item,\n                        parentKey: field.key,\n                        index: $index\n                      }\"\n                    >\n                    </ng-container>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @default {\n            <div [thyCol]=\"field.schemaType === 'textarea' || field.schemaType === 'code' ? 24 : 12\" class=\"input-item\">\n              <label class=\"block mb-1 mt-1 font-size-sm\">\n                {{ field.label }}\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </label>\n\n              @switch (field.schemaType) {\n                @case ('text') {\n                  <input\n                    thyInput\n                    [attr.id]=\"field.key\"\n                    type=\"text\"\n                    thySize=\"sm\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  />\n                }\n\n                @case ('textarea') {\n                  <textarea\n                    thyInput\n                    thySize=\"sm\"\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"4\"\n                  >\n                  </textarea>\n                }\n\n                @case ('select') {\n                  <thy-select\n                    [(ngModel)]=\"formData[field.key]\"\n                    thySize=\"sm\"\n                    [thyPlaceHolder]=\"field?.placeholder || ''\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    thySize=\"sm\"\n                    [thyPlaceHolder]=\"field?.placeholder || ''\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\">\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiColorSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    thySize=\"sm\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\">\n                        <span class=\"color-option\">\n                          <span class=\"color-dot\" [style.background-color]=\"opt.val\"></span>\n                          {{ opt.label }}\n                        </span>\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('color') {\n                  <div\n                    class=\"color-picker-box\"\n                    [ngStyle]=\"{ background: formData[field.key] }\"\n                    thyColorPicker\n                    [thyOffset]=\"10\"\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></div>\n                }\n\n                @case ('number') {\n                  <thy-input-number\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [thyMin]=\"field?.min || 0\"\n                    [thyMax]=\"field?.max || 999999\"\n                    [thyStep]=\"field?.step || 1\"\n                    [thySize]=\"'sm'\"\n                    [thySuffix]=\"field?.suffix || ''\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-input-number>\n                }\n\n                @case ('date') {\n                  <thy-date-picker\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onDateChange(field.key, $event)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-date-picker>\n                }\n\n                @case ('button') {\n                  <thy-button thySize=\"sm\" (click)=\"onButtonClick(field, formData)\" [class]=\"field.className?.join(' ')\">\n                    {{ field.label }}\n                  </thy-button>\n                }\n\n                @case ('select-image') {\n                  <thy-select\n                    thyPlaceHolder=\"\u8BF7\u9009\u62E9\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    [thyAllowClear]=\"true\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyShowOptionCustom]=\"true\">\n                        <div class=\"option-image\" [style.background-image]=\"opt.val\"></div>\n                      </thy-option>\n                    }\n                    <ng-template #selectedDisplay let-value>\n                      @if (!value) {\n                        <span class=\"empty-placeholder\">\u8BF7\u9009\u62E9\u56FE\u7247</span>\n                      } @else {\n                        <div class=\"selected-image-display\">\n                          <div class=\"selected-option-image\" [style.background-image]=\"value\"></div>\n                        </div>\n                      }\n                    </ng-template>\n                  </thy-select>\n\n                }\n\n                @case ('cascade-select') {\n                  <!-- \u7EA7\u8054\u9009\u62E9\u5668 - \u53EF\u4EE5\u6839\u636E\u9700\u8981\u5B9E\u73B0 -->\n                  <thy-select\n                    [(ngModel)]=\"formData[field.key]\"\n                    thySize=\"sm\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('code') {\n                  <textarea\n                    thyInput\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    class=\"code-editor\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"8\"\n                    placeholder=\"\u8BF7\u8F93\u5165\u4EE3\u7801...\"\n                    style=\"font-family: 'Monaco', 'Menlo', monospace\"\n                  >\n                  </textarea>\n                }\n\n                @case ('options-editor') {\n                  <div class=\"options-editor\">\n                    @for (option of formData[field.key] || []; track $index) {\n                      <div class=\"option-item d-flex align-items-center mb-2\">\n                        <input\n                          thyInput\n                          placeholder=\"\u6807\u7B7E\"\n                          [(ngModel)]=\"option.label\"\n                          (ngModelChange)=\"onFormFieldChange(field.key, formData[field.key], parentKey)\"\n                          class=\"me-2\"\n                        />\n                        <input\n                          thyInput\n                          placeholder=\"\u503C\"\n                          [(ngModel)]=\"option.value\"\n                          (ngModelChange)=\"onFormFieldChange(field.key, formData[field.key], parentKey)\"\n                          class=\"me-2\"\n                        />\n                        <thy-button thySize=\"sm\" thyIcon=\"delete\" [thyType]=\"'danger'\" (click)=\"onRemoveOption(field.key, $index)\">\n                        </thy-button>\n                      </div>\n                    }\n                    <thy-button thySize=\"sm\" thyIcon=\"plus\" (click)=\"onAddOption(field.key)\"> \u6DFB\u52A0\u9009\u9879 </thy-button>\n                  </div>\n                }\n              }\n            </div>\n          }\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- \u6570\u7EC4\u9879\u6E32\u67D3\u5668\u6A21\u677F -->\n<ng-template #arrayItemRenderer let-fields=\"fields\" let-itemData=\"itemData\" let-parentKey=\"parentKey\" let-index=\"index\">\n  <div thyRow [thyGutter]=\"8\">\n    @for (field of fields; track field.key) {\n      @if (isFieldVisible(field)) {\n        @switch (field.schemaType) {\n          @case ('group') {\n            <div [thyCol]=\"24\" class=\"group-field-in-array mb-2\">\n              <div class=\"group-header-small mb-1\">\n                <strong>{{ field.label }}</strong>\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </div>\n              @if (field.children) {\n                <ng-container\n                  [ngTemplateOutlet]=\"arrayItemRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    fields: field.children,\n                    itemData: itemData,\n                    parentKey: parentKey,\n                    index: index\n                  }\"\n                >\n                </ng-container>\n              }\n            </div>\n          }\n\n          @default {\n            <div [thyCol]=\"field.schemaType === 'textarea' || field.schemaType === 'code' ? 24 : 12\" class=\"input-item-small\">\n              <label class=\"block mb-1 text-xs text-muted\">{{ field.label }}</label>\n\n              @switch (field.schemaType) {\n                @case ('text') {\n                  <input\n                    thyInput\n                    thySize=\"sm\"\n                    type=\"text\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                  />\n                }\n\n                @case ('textarea') {\n                  <textarea\n                    thyInput\n                    thySize=\"sm\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"3\"\n                  >\n                  </textarea>\n                }\n\n                @case ('select') {\n                  <thy-select\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\">\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('color') {\n                  <div\n                    class=\"color-picker-box\"\n                    [ngStyle]=\"{ background: itemData[field.key] }\"\n                    thyColorPicker\n                    [thyOffset]=\"10\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></div>\n                }\n\n                @case ('number') {\n                  <thy-input-number\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [thyMin]=\"field?.min || 0\"\n                    [thyMax]=\"field?.max || 999999\"\n                    [thyStep]=\"field?.step || 1\"\n                    [thySize]=\"'sm'\"\n                    [thySuffix]=\"field?.suffix || ''\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-input-number>\n                }\n\n                @case ('date') {\n                  <thy-date-picker\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onDateChange(field.key, $event)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-date-picker>\n                }\n              }\n            </div>\n          }\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.dynamic-form-renderer .group-field .group-header{border-bottom:1px solid #e9ecef;padding-bottom:8px}.dynamic-form-renderer .group-field .group-header h6{color:#495057;font-weight:600}.dynamic-form-renderer .group-field-in-array .group-header-small{border-bottom:1px solid #dee2e6;padding-bottom:4px}.dynamic-form-renderer .group-field-in-array .group-header-small strong{font-size:.875rem;color:#6c757d}.dynamic-form-renderer .array-field .array-header{border-bottom:1px solid #e9ecef;padding-bottom:8px}.dynamic-form-renderer .array-field .array-header label{font-weight:500;color:#495057}.dynamic-form-renderer .array-field .array-item{background-color:#f8f9fa;border:1px solid #dee2e6;transition:box-shadow .2s ease}.dynamic-form-renderer .array-field .array-item:hover{box-shadow:0 2px 4px #0000001a}.dynamic-form-renderer .input-item label{font-weight:500;color:#495057}.dynamic-form-renderer .input-item-small label{font-size:.75rem;color:#6c757d}.dynamic-form-renderer .field-label-icon{color:#6c757d;margin-left:4px;cursor:help}.dynamic-form-renderer .number-suffix{margin-left:8px;color:#6c757d;font-size:.875rem}.dynamic-form-renderer .color-option{display:flex;align-items:center;gap:8px}.dynamic-form-renderer .color-option .color-dot{width:16px;height:16px;border-radius:50%;border:1px solid #dee2e6;display:inline-block}.dynamic-form-renderer .select-image-placeholder{display:flex;flex-direction:column;gap:8px}.dynamic-form-renderer .select-image-placeholder .selected-image{max-width:100px;max-height:100px;object-fit:cover;border-radius:4px;border:1px solid #dee2e6}.dynamic-form-renderer .table-editor-placeholder{padding:16px;border:1px dashed #dee2e6;border-radius:4px;text-align:center;background-color:#f8f9fa}.dynamic-form-renderer .code-editor{font-family:Monaco,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.4;background-color:#f8f9fa}.dynamic-form-renderer .options-editor .option-item{padding:8px;background-color:#f8f9fa;border-radius:4px;border:1px solid #dee2e6}.dynamic-form-renderer .options-editor .option-item input{flex:1}.dynamic-form-renderer .color-picker-box{width:28px;height:28px;border-radius:4px;cursor:pointer;border:1px solid #dee2e6}.dynamic-form-renderer .selected-image-display{display:flex;align-items:center;gap:8px;width:100%}.dynamic-form-renderer .selected-image-display .selected-option-image{width:90px;height:24px;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:4px;border:1px solid #d9d9d9;background-color:#f5f5f5;flex-shrink:0}.dynamic-form-renderer .selected-image-display .selected-option-image:not([style*=background-image]):before,.dynamic-form-renderer .selected-image-display .selected-option-image[style*=\"background-image: none\"]:before,.dynamic-form-renderer .selected-image-display .selected-option-image[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;opacity:.5}.dynamic-form-renderer .selected-image-display .selected-label{font-size:12px;color:#666;font-weight:500}.dynamic-form-renderer .empty-placeholder{color:#999;font-style:italic;font-size:14px}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]{padding:6px 12px!important;min-height:40px!important;display:flex!important;align-items:center!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div{width:100%!important;height:32px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:4px!important;border:1px solid #e8e8e8!important;background-color:#f5f5f5!important;position:relative!important;transition:all .2s ease!important;min-width:120px!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div:not([style*=background-image]):before,::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div[style*=\"background-image: none\"]:before,::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\"!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:16px!important;opacity:.5!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]:hover{background-color:#f5f5f5!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]:hover div{border-color:#007bff!important;box-shadow:0 2px 4px #007bff26!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true].thy-option-selected{background-color:#e3f2fd!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true].thy-option-selected div{border-color:#1976d2!important;box-shadow:0 0 0 2px #1976d233!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-option-image{width:20px!important;height:20px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:2px!important;border:1px solid #d9d9d9!important;background-color:#f5f5f5!important;flex-shrink:0!important;position:relative!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-option-image:before{font-size:10px!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-label{font-size:12px!important;color:#666!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .empty-placeholder{color:#999!important;font-style:italic!important}::ng-deep .thy-option-item .option-image{width:100%!important;height:32px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:4px!important;border:1px solid #e8e8e8!important;background-color:#f5f5f5!important;position:relative!important;transition:all .2s ease!important;min-width:120px!important}::ng-deep .thy-option-item .option-image:not([style*=background-image]):before,::ng-deep .thy-option-item .option-image[style*=\"background-image: none\"]:before,::ng-deep .thy-option-item .option-image[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\"!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:16px!important;opacity:.5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ThyCollapseModule }, { kind: "component", type: i2.ThyCollapse, selector: "thy-collapse", inputs: ["thyTheme", "thyAccordion", "thyArrowIconPosition"] }, { kind: "component", type: i2.ThyCollapseItem, selector: "thy-collapse-panel, thy-collapse-item", inputs: ["thyTitle", "thyActive", "thyDisabled", "thyHeaderTemplate", "thyArrowIcon", "thyExtra"], outputs: ["thyActiveChange"], exportAs: ["ThyCollapseComponent"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "ngmodule", type: ThySelectModule }, { kind: "component", type: i4.ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: i5.ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i6.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "ngmodule", type: ThyButtonModule }, { kind: "component", type: i7.ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i8.ThyRowDirective, selector: "[thyRow]", inputs: ["thyGutter"] }, { kind: "directive", type: i8.ThyColDirective, selector: "[thyCol]", inputs: ["thyCol", "thySpan"] }, { kind: "ngmodule", type: ThyLayoutModule }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "ngmodule", type: ThyDatePickerModule }, { kind: "component", type: i9.ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PuzzleFormRendererComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-puzzle-form-renderer, puzzle-form-renderer', standalone: true, imports: [
                        FormsModule,
                        ReactiveFormsModule,
                        NgTemplateOutlet,
                        ThyCollapseModule,
                        ThyInputModule,
                        ThyInputDirective,
                        ThyInputNumber,
                        ThySelectModule,
                        ThySelect,
                        ThyOption,
                        ThyTooltipModule,
                        ThyButtonModule,
                        ThyGridModule,
                        ThyLayoutModule,
                        ThyColorPickerDirective,
                        ThyDatePickerModule,
                        NgStyle,
                    ], template: "<div class=\"dynamic-form-renderer\">\n  <thy-collapse [thyAccordion]=\"accordion()\">\n    @for (section of sections();let i = $index; track section.label) {\n      <thy-collapse-item [thyTitle]=\"section.label\" [thyActive]=\"i === 0\">\n        @if (section?.children && section.children!.length > 0) {\n          <ng-container\n            [ngTemplateOutlet]=\"fieldRenderer\"\n            [ngTemplateOutletContext]=\"{\n              fields: section.children,\n              formData: formData(),\n              parentKey: '',\n              level: 0\n            }\"\n          >\n          </ng-container>\n        }\n      </thy-collapse-item>\n    }\n  </thy-collapse>\n</div>\n\n<!-- \u9012\u5F52\u5B57\u6BB5\u6E32\u67D3\u5668\u6A21\u677F -->\n<ng-template #fieldRenderer let-fields=\"fields\" let-formData=\"formData\" let-parentKey=\"parentKey\" let-level=\"level\">\n  <div thyRow [thyGutter]=\"16\" [style.margin-left.px]=\"level * 16\">\n    @for (field of fields; track field.key) {\n      @if (isFieldVisible(field)) {\n        @switch (field.schemaType) {\n          @case ('group') {\n            <div [thyCol]=\"24\" class=\"group-field mb-3\">\n              <div class=\"group-header mb-2\">\n                <h6 class=\"mb-1\">{{ field.label }}</h6>\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </div>\n              @if (field.children) {\n                <ng-container\n                  [ngTemplateOutlet]=\"fieldRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    fields: field.children,\n                    formData: formData,\n                    parentKey: parentKey,\n                    level: level + 1\n                  }\"\n                >\n                </ng-container>\n              }\n            </div>\n          }\n\n          @case ('array') {\n            <div [thyCol]=\"24\" class=\"array-field mb-3\">\n              <div class=\"array-header d-flex justify-content-between align-items-center mb-2\">\n                <label class=\"mb-0\">\n                  {{ field.label }}\n                  @if (field?.description) {\n                    <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                  }\n                </label>\n                <thy-button thySize=\"sm\" thyIcon=\"plus\" (click)=\"onAddArrayItem(field.key, field.children || [])\"> \u6DFB\u52A0 </thy-button>\n              </div>\n\n              @for (item of formData[field.key] || []; track $index) {\n                <div class=\"array-item border rounded p-3 mb-2\">\n                  <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                    <span class=\"text-muted\">{{ field.label }} #{{ $index + 1 }}</span>\n                    <thy-button thySize=\"sm\" thyIcon=\"trash\" [thyType]=\"'danger'\" (click)=\"onRemoveArrayItem(field.key, $index)\">\n                      \u5220\u9664\n                    </thy-button>\n                  </div>\n\n                  @if (field.children) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"arrayItemRenderer\"\n                      [ngTemplateOutletContext]=\"{\n                        fields: field.children,\n                        itemData: item,\n                        parentKey: field.key,\n                        index: $index\n                      }\"\n                    >\n                    </ng-container>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @default {\n            <div [thyCol]=\"field.schemaType === 'textarea' || field.schemaType === 'code' ? 24 : 12\" class=\"input-item\">\n              <label class=\"block mb-1 mt-1 font-size-sm\">\n                {{ field.label }}\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </label>\n\n              @switch (field.schemaType) {\n                @case ('text') {\n                  <input\n                    thyInput\n                    [attr.id]=\"field.key\"\n                    type=\"text\"\n                    thySize=\"sm\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  />\n                }\n\n                @case ('textarea') {\n                  <textarea\n                    thyInput\n                    thySize=\"sm\"\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"4\"\n                  >\n                  </textarea>\n                }\n\n                @case ('select') {\n                  <thy-select\n                    [(ngModel)]=\"formData[field.key]\"\n                    thySize=\"sm\"\n                    [thyPlaceHolder]=\"field?.placeholder || ''\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    thySize=\"sm\"\n                    [thyPlaceHolder]=\"field?.placeholder || ''\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\">\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiColorSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    thySize=\"sm\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\">\n                        <span class=\"color-option\">\n                          <span class=\"color-dot\" [style.background-color]=\"opt.val\"></span>\n                          {{ opt.label }}\n                        </span>\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('color') {\n                  <div\n                    class=\"color-picker-box\"\n                    [ngStyle]=\"{ background: formData[field.key] }\"\n                    thyColorPicker\n                    [thyOffset]=\"10\"\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></div>\n                }\n\n                @case ('number') {\n                  <thy-input-number\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [thyMin]=\"field?.min || 0\"\n                    [thyMax]=\"field?.max || 999999\"\n                    [thyStep]=\"field?.step || 1\"\n                    [thySize]=\"'sm'\"\n                    [thySuffix]=\"field?.suffix || ''\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-input-number>\n                }\n\n                @case ('date') {\n                  <thy-date-picker\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onDateChange(field.key, $event)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-date-picker>\n                }\n\n                @case ('button') {\n                  <thy-button thySize=\"sm\" (click)=\"onButtonClick(field, formData)\" [class]=\"field.className?.join(' ')\">\n                    {{ field.label }}\n                  </thy-button>\n                }\n\n                @case ('select-image') {\n                  <thy-select\n                    thyPlaceHolder=\"\u8BF7\u9009\u62E9\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    [thyAllowClear]=\"true\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyShowOptionCustom]=\"true\">\n                        <div class=\"option-image\" [style.background-image]=\"opt.val\"></div>\n                      </thy-option>\n                    }\n                    <ng-template #selectedDisplay let-value>\n                      @if (!value) {\n                        <span class=\"empty-placeholder\">\u8BF7\u9009\u62E9\u56FE\u7247</span>\n                      } @else {\n                        <div class=\"selected-image-display\">\n                          <div class=\"selected-option-image\" [style.background-image]=\"value\"></div>\n                        </div>\n                      }\n                    </ng-template>\n                  </thy-select>\n\n                }\n\n                @case ('cascade-select') {\n                  <!-- \u7EA7\u8054\u9009\u62E9\u5668 - \u53EF\u4EE5\u6839\u636E\u9700\u8981\u5B9E\u73B0 -->\n                  <thy-select\n                    [(ngModel)]=\"formData[field.key]\"\n                    thySize=\"sm\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('code') {\n                  <textarea\n                    thyInput\n                    [attr.id]=\"field.key\"\n                    [(ngModel)]=\"formData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey)\"\n                    class=\"code-editor\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"8\"\n                    placeholder=\"\u8BF7\u8F93\u5165\u4EE3\u7801...\"\n                    style=\"font-family: 'Monaco', 'Menlo', monospace\"\n                  >\n                  </textarea>\n                }\n\n                @case ('options-editor') {\n                  <div class=\"options-editor\">\n                    @for (option of formData[field.key] || []; track $index) {\n                      <div class=\"option-item d-flex align-items-center mb-2\">\n                        <input\n                          thyInput\n                          placeholder=\"\u6807\u7B7E\"\n                          [(ngModel)]=\"option.label\"\n                          (ngModelChange)=\"onFormFieldChange(field.key, formData[field.key], parentKey)\"\n                          class=\"me-2\"\n                        />\n                        <input\n                          thyInput\n                          placeholder=\"\u503C\"\n                          [(ngModel)]=\"option.value\"\n                          (ngModelChange)=\"onFormFieldChange(field.key, formData[field.key], parentKey)\"\n                          class=\"me-2\"\n                        />\n                        <thy-button thySize=\"sm\" thyIcon=\"delete\" [thyType]=\"'danger'\" (click)=\"onRemoveOption(field.key, $index)\">\n                        </thy-button>\n                      </div>\n                    }\n                    <thy-button thySize=\"sm\" thyIcon=\"plus\" (click)=\"onAddOption(field.key)\"> \u6DFB\u52A0\u9009\u9879 </thy-button>\n                  </div>\n                }\n              }\n            </div>\n          }\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- \u6570\u7EC4\u9879\u6E32\u67D3\u5668\u6A21\u677F -->\n<ng-template #arrayItemRenderer let-fields=\"fields\" let-itemData=\"itemData\" let-parentKey=\"parentKey\" let-index=\"index\">\n  <div thyRow [thyGutter]=\"8\">\n    @for (field of fields; track field.key) {\n      @if (isFieldVisible(field)) {\n        @switch (field.schemaType) {\n          @case ('group') {\n            <div [thyCol]=\"24\" class=\"group-field-in-array mb-2\">\n              <div class=\"group-header-small mb-1\">\n                <strong>{{ field.label }}</strong>\n                @if (field?.description) {\n                  <i [thyTooltip]=\"field?.description!\" thyTooltipPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                }\n              </div>\n              @if (field.children) {\n                <ng-container\n                  [ngTemplateOutlet]=\"arrayItemRenderer\"\n                  [ngTemplateOutletContext]=\"{\n                    fields: field.children,\n                    itemData: itemData,\n                    parentKey: parentKey,\n                    index: index\n                  }\"\n                >\n                </ng-container>\n              }\n            </div>\n          }\n\n          @default {\n            <div [thyCol]=\"field.schemaType === 'textarea' || field.schemaType === 'code' ? 24 : 12\" class=\"input-item-small\">\n              <label class=\"block mb-1 text-xs text-muted\">{{ field.label }}</label>\n\n              @switch (field.schemaType) {\n                @case ('text') {\n                  <input\n                    thyInput\n                    thySize=\"sm\"\n                    type=\"text\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                  />\n                }\n\n                @case ('textarea') {\n                  <textarea\n                    thyInput\n                    thySize=\"sm\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                    rows=\"3\"\n                  >\n                  </textarea>\n                }\n\n                @case ('select') {\n                  <thy-select\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\"></thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('multiSelect') {\n                  <thy-select\n                    thyMode=\"multiple\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  >\n                    @for (opt of getFieldOptions(field); track opt.val) {\n                      <thy-option [thyValue]=\"opt.val\" [thyLabelText]=\"opt.label\">\n                      </thy-option>\n                    }\n                  </thy-select>\n                }\n\n                @case ('color') {\n                  <div\n                    class=\"color-picker-box\"\n                    [ngStyle]=\"{ background: itemData[field.key] }\"\n                    thyColorPicker\n                    [thyOffset]=\"10\"\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></div>\n                }\n\n                @case ('number') {\n                  <thy-input-number\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onFormFieldChange(field.key, $event, parentKey, index)\"\n                    [thyMin]=\"field?.min || 0\"\n                    [thyMax]=\"field?.max || 999999\"\n                    [thyStep]=\"field?.step || 1\"\n                    [thySize]=\"'sm'\"\n                    [thySuffix]=\"field?.suffix || ''\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-input-number>\n                }\n\n                @case ('date') {\n                  <thy-date-picker\n                    [(ngModel)]=\"itemData[field.key]\"\n                    (ngModelChange)=\"onDateChange(field.key, $event)\"\n                    thySize=\"sm\"\n                    [class]=\"field.className?.join(' ')\"\n                  ></thy-date-picker>\n                }\n              }\n            </div>\n          }\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.dynamic-form-renderer .group-field .group-header{border-bottom:1px solid #e9ecef;padding-bottom:8px}.dynamic-form-renderer .group-field .group-header h6{color:#495057;font-weight:600}.dynamic-form-renderer .group-field-in-array .group-header-small{border-bottom:1px solid #dee2e6;padding-bottom:4px}.dynamic-form-renderer .group-field-in-array .group-header-small strong{font-size:.875rem;color:#6c757d}.dynamic-form-renderer .array-field .array-header{border-bottom:1px solid #e9ecef;padding-bottom:8px}.dynamic-form-renderer .array-field .array-header label{font-weight:500;color:#495057}.dynamic-form-renderer .array-field .array-item{background-color:#f8f9fa;border:1px solid #dee2e6;transition:box-shadow .2s ease}.dynamic-form-renderer .array-field .array-item:hover{box-shadow:0 2px 4px #0000001a}.dynamic-form-renderer .input-item label{font-weight:500;color:#495057}.dynamic-form-renderer .input-item-small label{font-size:.75rem;color:#6c757d}.dynamic-form-renderer .field-label-icon{color:#6c757d;margin-left:4px;cursor:help}.dynamic-form-renderer .number-suffix{margin-left:8px;color:#6c757d;font-size:.875rem}.dynamic-form-renderer .color-option{display:flex;align-items:center;gap:8px}.dynamic-form-renderer .color-option .color-dot{width:16px;height:16px;border-radius:50%;border:1px solid #dee2e6;display:inline-block}.dynamic-form-renderer .select-image-placeholder{display:flex;flex-direction:column;gap:8px}.dynamic-form-renderer .select-image-placeholder .selected-image{max-width:100px;max-height:100px;object-fit:cover;border-radius:4px;border:1px solid #dee2e6}.dynamic-form-renderer .table-editor-placeholder{padding:16px;border:1px dashed #dee2e6;border-radius:4px;text-align:center;background-color:#f8f9fa}.dynamic-form-renderer .code-editor{font-family:Monaco,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.4;background-color:#f8f9fa}.dynamic-form-renderer .options-editor .option-item{padding:8px;background-color:#f8f9fa;border-radius:4px;border:1px solid #dee2e6}.dynamic-form-renderer .options-editor .option-item input{flex:1}.dynamic-form-renderer .color-picker-box{width:28px;height:28px;border-radius:4px;cursor:pointer;border:1px solid #dee2e6}.dynamic-form-renderer .selected-image-display{display:flex;align-items:center;gap:8px;width:100%}.dynamic-form-renderer .selected-image-display .selected-option-image{width:90px;height:24px;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:4px;border:1px solid #d9d9d9;background-color:#f5f5f5;flex-shrink:0}.dynamic-form-renderer .selected-image-display .selected-option-image:not([style*=background-image]):before,.dynamic-form-renderer .selected-image-display .selected-option-image[style*=\"background-image: none\"]:before,.dynamic-form-renderer .selected-image-display .selected-option-image[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;opacity:.5}.dynamic-form-renderer .selected-image-display .selected-label{font-size:12px;color:#666;font-weight:500}.dynamic-form-renderer .empty-placeholder{color:#999;font-style:italic;font-size:14px}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]{padding:6px 12px!important;min-height:40px!important;display:flex!important;align-items:center!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div{width:100%!important;height:32px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:4px!important;border:1px solid #e8e8e8!important;background-color:#f5f5f5!important;position:relative!important;transition:all .2s ease!important;min-width:120px!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div:not([style*=background-image]):before,::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div[style*=\"background-image: none\"]:before,::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true] div[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\"!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:16px!important;opacity:.5!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]:hover{background-color:#f5f5f5!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true]:hover div{border-color:#007bff!important;box-shadow:0 2px 4px #007bff26!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true].thy-option-selected{background-color:#e3f2fd!important}::ng-deep .thy-select-dropdown .thy-option[thy-show-option-custom=true].thy-option-selected div{border-color:#1976d2!important;box-shadow:0 0 0 2px #1976d233!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-option-image{width:20px!important;height:20px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:2px!important;border:1px solid #d9d9d9!important;background-color:#f5f5f5!important;flex-shrink:0!important;position:relative!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-option-image:before{font-size:10px!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .selected-image-display .selected-label{font-size:12px!important;color:#666!important}::ng-deep .thy-select-selection .thy-select-selection__rendered .empty-placeholder{color:#999!important;font-style:italic!important}::ng-deep .thy-option-item .option-image{width:100%!important;height:32px!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:4px!important;border:1px solid #e8e8e8!important;background-color:#f5f5f5!important;position:relative!important;transition:all .2s ease!important;min-width:120px!important}::ng-deep .thy-option-item .option-image:not([style*=background-image]):before,::ng-deep .thy-option-item .option-image[style*=\"background-image: none\"]:before,::ng-deep .thy-option-item .option-image[style*='background-image: url(\"none\")']:before{content:\"\\1f5bc\\fe0f\"!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:16px!important;opacity:.5!important}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 