import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ThyCollapseModule } from 'ngx-tethys/collapse';
import { ThyInputNumber } from 'ngx-tethys/input-number';
import { ThyInputDirective } from 'ngx-tethys/input';
import { ThyOption } from 'ngx-tethys/shared';
import { ThySelect } from 'ngx-tethys/select';
import { ThyTooltipModule } from 'ngx-tethys/tooltip';
import { ThyColorPickerDirective } from 'ngx-tethys/color-picker';
import { ThyGridModule } from 'ngx-tethys/grid';
import { ThyLayoutModule } from 'ngx-tethys/layout';
import { EditorBaseComponent } from 'ngx-puzzle/components/editor/dynamic-editor/base/editor-base.component';
import { TEXT_FIELDS_MAP } from 'ngx-puzzle/core/constants/field-configs/text-editor-fields-config';
import * as i0 from "@angular/core";
import * as i1 from "ngx-tethys/collapse";
import * as i2 from "@angular/forms";
import * as i3 from "ngx-tethys/tooltip";
import * as i4 from "ngx-tethys/grid";
export class NgxPuzzleTextEditorComponent extends EditorBaseComponent {
    setFields(type) {
        if (!type)
            return;
        this.sections = TEXT_FIELDS_MAP[type];
    }
    getComponentType() {
        return 'text';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzleTextEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgxPuzzleTextEditorComponent, isStandalone: true, selector: "ngx-puzzle-text-editor, puzzle-text-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"text-editor\">\n  <thy-collapse>\n    @for (section of sections; track section.label) {\n      <thy-collapse-item [thyTitle]=\"section.label\">\n        @if (section?.children && section.children!.length > 0) {\n          <div thyRow [thyGutter]=\"16\">\n            @for (field of section.children; track field.key) {\n              <div [thyCol]=\"12\" class=\"input-item\">\n                <label class=\"block mb-1 text-sm\">\n                  {{ field.label }}\n                  @if (field?.description) {\n                    <i [thyTooltip]=\"field?.description!\" thyPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                  }\n                </label>\n                @switch (field.schemaType) {\n                  @case ('select') {\n                    <thy-select [(ngModel)]=\"formData[field.key]\" (ngModelChange)=\"onFormFieldChange(field.key, $event)\">\n                      @for (opt of field.options; track opt.val) {\n                        <thy-option [thyValue]=\"opt.val\">{{ opt.label }}</thy-option>\n                      }\n                    </thy-select>\n                  }\n                  @case ('text') {\n                    <input\n                      thyInput\n                      [attr.id]=\"field.key\"\n                      type=\"text\"\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                    />\n                  }\n                  @case ('number') {\n                    <thy-input-number\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      [thyMin]=\"field?.min || 0\"\n                      [thyMax]=\"field?.max || 9999\"\n                      [thyStep]=\"field?.step || 1\"\n                      [thySize]=\"'sm'\"\n                    ></thy-input-number>\n                  }\n                  @case ('color') {\n                    <div class=\"flex items-center gap-2\">\n                      <div\n                        class=\"color-picker-box\"\n                        [ngStyle]=\"{ backgroundColor: formData[field.key] }\"\n                        thyColorPicker\n                        [thyOffset]=\"10\"\n                        [(ngModel)]=\"formData[field.key]\"\n                        (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      ></div>\n                      <input\n                        thyInput\n                        type=\"text\"\n                        class=\"color-hex-input\"\n                        [(ngModel)]=\"formData[field.key]\"\n                        (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      />\n                    </div>\n                  }\n                  @case ('textarea') {\n                    <textarea\n                      thyInput\n                      rows=\"5\"\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                    ></textarea>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </thy-collapse-item>\n    }\n  </thy-collapse>\n</div>\n", styles: [".text-editor .input-item{margin-bottom:8px}.text-editor .color-hex-input{width:120px}\n"], dependencies: [{ kind: "ngmodule", type: ThyCollapseModule }, { kind: "component", type: i1.ThyCollapse, selector: "thy-collapse", inputs: ["thyTheme", "thyAccordion", "thyArrowIconPosition"] }, { kind: "component", type: i1.ThyCollapseItem, selector: "thy-collapse-panel, thy-collapse-item", inputs: ["thyTitle", "thyActive", "thyDisabled", "thyHeaderTemplate", "thyArrowIcon", "thyExtra"], outputs: ["thyActiveChange"], exportAs: ["ThyCollapseComponent"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: 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: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i3.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i4.ThyRowDirective, selector: "[thyRow]", inputs: ["thyGutter"] }, { kind: "directive", type: i4.ThyColDirective, selector: "[thyCol]", inputs: ["thyCol", "thySpan"] }, { kind: "ngmodule", type: ThyLayoutModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzleTextEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-puzzle-text-editor, puzzle-text-editor', standalone: true, imports: [
                        ThyCollapseModule,
                        ThyInputNumber,
                        ReactiveFormsModule,
                        ThyInputDirective,
                        FormsModule,
                        ThyOption,
                        ThySelect,
                        ThyTooltipModule,
                        ThyColorPickerDirective,
                        NgStyle,
                        ThyGridModule,
                        ThyLayoutModule
                    ], template: "<div class=\"text-editor\">\n  <thy-collapse>\n    @for (section of sections; track section.label) {\n      <thy-collapse-item [thyTitle]=\"section.label\">\n        @if (section?.children && section.children!.length > 0) {\n          <div thyRow [thyGutter]=\"16\">\n            @for (field of section.children; track field.key) {\n              <div [thyCol]=\"12\" class=\"input-item\">\n                <label class=\"block mb-1 text-sm\">\n                  {{ field.label }}\n                  @if (field?.description) {\n                    <i [thyTooltip]=\"field?.description!\" thyPlacement=\"top\" class=\"field-label-icon pi pi-question-circle\"></i>\n                  }\n                </label>\n                @switch (field.schemaType) {\n                  @case ('select') {\n                    <thy-select [(ngModel)]=\"formData[field.key]\" (ngModelChange)=\"onFormFieldChange(field.key, $event)\">\n                      @for (opt of field.options; track opt.val) {\n                        <thy-option [thyValue]=\"opt.val\">{{ opt.label }}</thy-option>\n                      }\n                    </thy-select>\n                  }\n                  @case ('text') {\n                    <input\n                      thyInput\n                      [attr.id]=\"field.key\"\n                      type=\"text\"\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                    />\n                  }\n                  @case ('number') {\n                    <thy-input-number\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      [thyMin]=\"field?.min || 0\"\n                      [thyMax]=\"field?.max || 9999\"\n                      [thyStep]=\"field?.step || 1\"\n                      [thySize]=\"'sm'\"\n                    ></thy-input-number>\n                  }\n                  @case ('color') {\n                    <div class=\"flex items-center gap-2\">\n                      <div\n                        class=\"color-picker-box\"\n                        [ngStyle]=\"{ backgroundColor: formData[field.key] }\"\n                        thyColorPicker\n                        [thyOffset]=\"10\"\n                        [(ngModel)]=\"formData[field.key]\"\n                        (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      ></div>\n                      <input\n                        thyInput\n                        type=\"text\"\n                        class=\"color-hex-input\"\n                        [(ngModel)]=\"formData[field.key]\"\n                        (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                      />\n                    </div>\n                  }\n                  @case ('textarea') {\n                    <textarea\n                      thyInput\n                      rows=\"5\"\n                      [(ngModel)]=\"formData[field.key]\"\n                      (ngModelChange)=\"onFormFieldChange(field.key, $event)\"\n                    ></textarea>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </thy-collapse-item>\n    }\n  </thy-collapse>\n</div>\n", styles: [".text-editor .input-item{margin-bottom:8px}.text-editor .color-hex-input{width:120px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 