@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/form/autoform-item.js

@@ -0,0 +1,791 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @file JSON-driven auto form item / JSON 驱动的自动表单项
+ * @description 单个表单项容器，固定三段式布局：顶部（图标+label+tooltip）、
+ *              中部（输入控件）、底部（description+校验错误提示）。
+ *              Single form item container with fixed three-section layout:
+ *              top (icon + label + tooltip), middle (input control),
+ *              bottom (description + validation error).
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+import { FormRegistry, FormRuleEngine } from '../../core/autoform';
+import { safeStringify } from '../../utils/utils';
+import '../display/label.js';
+/**
+ * JSON-driven auto form item with three-section layout and validation.
+ * JSON 驱动的自动表单项，三段式布局，支持校验。
+ *
+ * @slot - Default slot for the form control element. 表单控件元素内容。
+ * ### Events
+ * - **aithe-change** — Emitted when the field value changes, with `{ name, value }`. 字段值变更时触发。
+ * @example
+ * ```html
+ * <aithe-autoform-item
+ *   name="email"
+ *   type="input"
+ *   label="Email"
+ *   icon="mail"
+ *   tooltip="Your work email"
+ *   description="We will never share your email."
+ *   required
+ * ></aithe-autoform-item>
+ * ```
+ */
+let AitheAutoformItem = class AitheAutoformItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Field unique identifier. 字段唯一标识。 */
+        this.name = '';
+        /** Control type: input | textarea | select | radio | checkbox | switch | number | slider | date-picker | time-picker | rate | color-picker. 控件类型。 */
+        this.type = 'input';
+        /** Label text. 标签文本。 */
+        this.label = '';
+        /** Icon name displayed before the label. 标签前显示的图标名称。 */
+        this.icon = '';
+        /** Tooltip text shown on hover. 悬停提示文本。 */
+        this.tooltip = '';
+        /** Description text below the control. 控件下方的说明文字。 */
+        this.description = '';
+        /** Default value. 缺省值。 */
+        this.dft = '';
+        /** Placeholder text. 占位提示文本。 */
+        this.placeholder = '';
+        /** Whether the field is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Whether the field is required. 是否必填。 */
+        this.required = false;
+        /** Validation regex pattern string. 校验正则表达式字符串。 */
+        this.pattern = '';
+        /** Validation failure message. 校验失败提示语。 */
+        this.message = '';
+        /** Options for select/radio/checkbox. 选择类控件的选项。 */
+        this.options = [];
+        /** Current field value. 当前字段值。 */
+        this.value = '';
+        /** Input type attribute for type="input". input 控件的 type 属性。 */
+        this.inputType = 'text';
+        /** Minimum value for number/slider. 数字/滑块最小值。 */
+        this.min = '';
+        /** Maximum value for number/slider. 数字/滑块最大值。 */
+        this.max = '';
+        /** Step value for number/slider/rate. 数字/滑块/评分步长。 */
+        this.step = '';
+        /** Number of rows for textarea. 文本域行数。 */
+        this.rows = '3';
+        /** Whether to validate on every change. 是否在每次变更时实时校验。 */
+        this.validateOnChange = true;
+        /** Internal validation error message. 内部校验错误消息。 */
+        this.errorMsg = '';
+        /** Dependency field names. 依赖字段名称列表。 */
+        this.dependencies = [];
+        /** Dependency rules. 依赖联动规则。 */
+        this.rules = [];
+        /** Current values of dependency fields. 依赖字段的当前值。 */
+        this.dependencyValues = {};
+        /** Whether the field is visible (controlled by dependency rules). 字段是否可见（由依赖规则控制）。 */
+        this._visible = true;
+        /** Whether the field is disabled by dependency rules. 是否被依赖规则禁用。 */
+        this._ruleDisabled = false;
+        /** Options computed by dependency rules. 依赖规则计算的选项。 */
+        this._ruleOptions = null;
+        /** Whether the password is visible (only for inputType="password"). 密码是否明文显示（仅 inputType="password" 时生效）。 */
+        this._passwordVisible = false;
+        this.pendingClear = false;
+        /** Handles input/textarea/number change events. 处理 input/textarea/number 的变更事件。 */
+        this.handleInputChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value;
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Toggles password visibility (only for inputType="password"). 切换密码明文显示（仅 inputType="password" 时生效）。 */
+        this.togglePasswordVisible = () => {
+            this._passwordVisible = !this._passwordVisible;
+        };
+        /** Handles switch toggle change. 处理开关组件的切换事件。 */
+        this.handleSwitchChange = (ev) => {
+            const target = ev.target;
+            this.value = target.checked ? 'true' : 'false';
+            this.emit('aithe-change', { name: this.name, value: this.value === 'true' });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles select dropdown change. 处理下拉选择器的变更事件。 */
+        this.handleSelectChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles radio group selection change. 处理单选框组的变更事件。 */
+        this.handleRadioChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles checkbox group change, serializes selected values to JSON string. 处理复选框组的变更事件，将选中值序列化为 JSON 字符串。 */
+        this.handleCheckboxChange = (ev) => {
+            this.value = JSON.stringify(ev.detail.value ?? []);
+            this.emit('aithe-change', { name: this.name, value: this.getFieldValue() });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles slider value change. 处理滑块组件的变更事件。 */
+        this.handleSliderChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles rate component value change. 处理评分组件的变更事件。 */
+        this.handleRateChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles color picker value change. 处理颜色选择器的变更事件。 */
+        this.handleColorPickerChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles date picker value change. 处理日期选择器的变更事件。 */
+        this.handleDatePickerChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles time picker value change. 处理时间选择器的变更事件。 */
+        this.handleTimePickerChange = (ev) => {
+            const target = ev.target;
+            this.value = target.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+        /** Handles combobox value change. 处理组合框的变更事件。 */
+        this.handleComboboxChange = (ev) => {
+            this.value = ev.detail.value ?? '';
+            this.emit('aithe-change', { name: this.name, value: this.value });
+            if (this.validateOnChange) {
+                this.validate();
+            }
+        };
+    }
+    /** Whether the field is visible (controlled by dependency rules). 字段是否可见（由依赖规则控制）。 */
+    get visible() {
+        return this._visible;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-2);
+        width: 100%;
+      }
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-medium);
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text);
+        line-height: 1.5;
+      }
+
+      .item-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+        font-size: 14px;
+      }
+
+      .item-label {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .item-required {
+        color: var(--aithe-danger-6);
+        margin-left: 2px;
+      }
+
+      .item-tooltip {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+        cursor: help;
+        font-size: 12px;
+      }
+
+      .item-control {
+        width: 100%;
+      }
+
+      .item-control aithe-input,
+      .item-control aithe-textarea,
+      .item-control aithe-select,
+      .item-control aithe-slider,
+      .item-control aithe-rate,
+      .item-control aithe-color-picker,
+      .item-control aithe-date-picker,
+      .item-control aithe-time-picker,
+      .item-control aithe-combobox {
+        width: 100%;
+        display: block;
+      }
+
+      .item-control aithe-radio-group,
+      .item-control aithe-checkbox-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--aithe-space-3);
+      }
+
+      .item-control aithe-switch {
+        display: inline-flex;
+      }
+
+      .item-control input[type='number'] {
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md, 6px);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-base);
+        font-family: inherit;
+        line-height: var(--aithe-line-height-base, 1.5);
+        outline: none;
+        transition: border-color 0.2s;
+      }
+
+      .item-control input[type='number']:focus {
+        border-color: var(--aithe-primary-6);
+        box-shadow: 0 0 0 2px rgba(var(--aithe-primary-6-rgb, 77, 141, 255), 0.15);
+      }
+
+      .item-control input[type='number']:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background: var(--aithe-color-bg-subtle);
+      }
+
+      .item-footer {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-height: 0;
+      }
+
+      .item-description {
+        font-size: var(--aithe-font-size-xs);
+        color: var(--aithe-color-text-muted);
+        line-height: 1.5;
+      }
+
+      .item-error {
+        font-size: var(--aithe-font-size-xs);
+        color: var(--aithe-danger-6);
+        line-height: 1.5;
+      }
+    `,
+    ]; }
+    /** Initializes value from default if empty. 初始化时若值为空则使用缺省值。 */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === '' && this.dft !== '') {
+            this.value = this.dft;
+        }
+    }
+    /** Applies dependency rules when dependencyValues or rules change. Also emits change after a clear rule resets the value. 依赖值或规则变更时应用联动规则，clear 规则重置值后触发 change 事件。 */
+    updated(changed) {
+        if (this.rules.length > 0) {
+            const depsChanged = changed.has('dependencyValues');
+            const rulesChanged = changed.has('rules');
+            if (depsChanged || rulesChanged) {
+                this.applyRules();
+            }
+        }
+        if (this.pendingClear) {
+            this.pendingClear = false;
+            this.emit('aithe-change', { name: this.name, value: this.getFieldValue() });
+        }
+    }
+    /** Evaluates all dependency rules and updates visibility, disabled state, options, and value accordingly. 评估所有依赖规则，更新可见性、禁用状态、选项和值。 */
+    applyRules() {
+        const baseState = {
+            visible: this._visible,
+            disabled: this._ruleDisabled,
+            options: this._ruleOptions ?? this.options,
+            value: this.value,
+        };
+        const result = FormRuleEngine.evaluate(this.rules, this.dependencyValues, baseState);
+        if (result.visible !== this._visible) {
+            this._visible = result.visible;
+        }
+        if (result.disabled !== this._ruleDisabled) {
+            this._ruleDisabled = result.disabled;
+        }
+        if (result.options !== baseState.options) {
+            this._ruleOptions = result.options;
+        }
+        if (result.value === '' && this.value !== '') {
+            this.value = '';
+            this.pendingClear = true;
+        }
+    }
+    /** Validates the field and sets error state. Skips validation if hidden. 校验字段并设置错误状态，隐藏时跳过校验。 */
+    validate() {
+        if (!this._visible)
+            return true;
+        const val = this.value;
+        if (this.required && !String(val).trim()) {
+            this.errorMsg =
+                this.message ||
+                    t('form.formItem.required', '{label} is required', {
+                        label: this.label || this.name || t('form.formItem.requiredField'),
+                    });
+            return false;
+        }
+        if (this.pattern && String(val).trim()) {
+            const regex = new RegExp(this.pattern);
+            if (!regex.test(String(val))) {
+                this.errorMsg = this.message || t('form.autoform.patternMismatch');
+                return false;
+            }
+        }
+        this.errorMsg = '';
+        return true;
+    }
+    /** Clears the validation error. 清除校验错误。 */
+    clearError() {
+        this.errorMsg = '';
+    }
+    /** Returns the current validation error message. 返回当前校验错误消息。 */
+    getError() {
+        return this.errorMsg;
+    }
+    /** Returns the current field value. 返回当前字段值。 */
+    getFieldValue() {
+        if (this.type === 'switch') {
+            return this.value === 'true' || this.value === '';
+        }
+        if (this.type === 'number') {
+            const num = Number(this.value);
+            return Number.isNaN(num) ? '' : num;
+        }
+        if (this.type === 'checkbox') {
+            try {
+                const parsed = JSON.parse(this.value || '[]');
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        const customDef = FormRegistry.get(this.type);
+        if (customDef?.valueTransformer) {
+            return customDef.valueTransformer(this.value);
+        }
+        return this.value;
+    }
+    /** Resolves the effective input type for password fields based on visibility state. 根据可见状态解析密码字段的有效输入类型。 */
+    resolvePasswordType() {
+        return this._passwordVisible ? 'text' : 'password';
+    }
+    /** Renders the appropriate form control based on type. Falls back to input for unknown types. 根据控件类型渲染对应的表单控件，未知类型回退为 input。 */
+    renderControl() {
+        const ph = this.placeholder || '';
+        const dis = this.disabled || this._ruleDisabled;
+        const effectiveOptions = this._ruleOptions ?? this.options;
+        const customDef = FormRegistry.get(this.type);
+        if (customDef) {
+            return customDef.render({
+                value: this.value,
+                placeholder: ph,
+                disabled: dis,
+                name: this.name,
+                options: effectiveOptions,
+                min: this.min,
+                max: this.max,
+                step: this.step,
+                rows: this.rows,
+                inputType: this.inputType,
+                onChange: (val) => {
+                    if (val == null || typeof val === 'object') {
+                        this.value = '';
+                    }
+                    else {
+                        this.value = safeStringify(val);
+                    }
+                    this.emit('aithe-change', { name: this.name, value: this.getFieldValue() });
+                    if (this.validateOnChange) {
+                        this.validate();
+                    }
+                },
+            });
+        }
+        switch (this.type) {
+            case 'input': {
+                const isPassword = this.inputType === 'password';
+                const effectiveType = isPassword ? this.resolvePasswordType() : this.inputType || 'text';
+                const passwordIconName = this._passwordVisible ? 'eyeOff' : 'eye';
+                return html `
+          <aithe-input
+            .type=${effectiveType}
+            .placeholder=${ph}
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleInputChange}
+          >
+            ${isPassword
+                    ? html `
+                    <aithe-icon
+                      slot="suffix"
+                      name=${passwordIconName}
+                      size="sm"
+                      @click=${this.togglePasswordVisible}
+                    ></aithe-icon>
+                  `
+                    : nothing}
+          </aithe-input>
+        `;
+            }
+            case 'textarea':
+                return html `
+          <aithe-textarea
+            .placeholder=${ph}
+            .value=${this.value}
+            .rows=${Number(this.rows) || 3}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleInputChange}
+          ></aithe-textarea>
+        `;
+            case 'select':
+                return html `
+          <aithe-select
+            .placeholder=${ph}
+            .value=${this.value}
+            .options=${effectiveOptions}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleSelectChange}
+          ></aithe-select>
+        `;
+            case 'radio':
+                return html `
+          <aithe-radio-group
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleRadioChange}
+          >
+            ${this.renderRadioOptions(effectiveOptions)}
+          </aithe-radio-group>
+        `;
+            case 'checkbox':
+                return html `
+          <aithe-checkbox-group
+            .value=${this.parseCheckboxValue(this.value)}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleCheckboxChange}
+          >
+            ${this.renderCheckboxOptions(effectiveOptions)}
+          </aithe-checkbox-group>
+        `;
+            case 'switch':
+                return html `
+          <aithe-switch
+            .checked=${this.value === 'true' || this.value === ''}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleSwitchChange}
+          ></aithe-switch>
+        `;
+            case 'number':
+                return html `
+          <input
+            type="number"
+            .value=${this.value}
+            .placeholder=${ph}
+            ?disabled=${dis}
+            .min=${this.min || undefined}
+            .max=${this.max || undefined}
+            .step=${this.step || undefined}
+            name=${this.name}
+            @input=${this.handleInputChange}
+          />
+        `;
+            case 'slider':
+                return html `
+          <aithe-slider
+            .value=${this.value}
+            ?disabled=${dis}
+            .min=${this.min || undefined}
+            .max=${this.max || undefined}
+            .step=${this.step || undefined}
+            name=${this.name}
+            @aithe-change=${this.handleSliderChange}
+          ></aithe-slider>
+        `;
+            case 'rate':
+                return html `
+          <aithe-rate
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleRateChange}
+          ></aithe-rate>
+        `;
+            case 'color-picker':
+                return html `
+          <aithe-color-picker
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleColorPickerChange}
+          ></aithe-color-picker>
+        `;
+            case 'date-picker':
+                return html `
+          <aithe-date-picker
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleDatePickerChange}
+          ></aithe-date-picker>
+        `;
+            case 'time-picker':
+                return html `
+          <aithe-time-picker
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleTimePickerChange}
+          ></aithe-time-picker>
+        `;
+            case 'combobox':
+                return html `
+          <aithe-combobox
+            .placeholder=${ph}
+            .value=${this.value}
+            .options=${JSON.stringify(effectiveOptions)}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleComboboxChange}
+          ></aithe-combobox>
+        `;
+            default:
+                return html `
+          <aithe-input
+            .placeholder=${ph}
+            .value=${this.value}
+            ?disabled=${dis}
+            name=${this.name}
+            @aithe-change=${this.handleInputChange}
+          ></aithe-input>
+        `;
+        }
+    }
+    /** Renders radio button options for radio group. 渲染单选框组的选项。 */
+    renderRadioOptions(opts) {
+        return opts.map((opt) => html `
+        <aithe-radio value=${opt.id} name=${this.name} ?disabled=${opt.disabled ?? false}>
+          ${opt.label}
+        </aithe-radio>
+      `);
+    }
+    /** Renders checkbox options for checkbox group. 渲染复选框组的选项。 */
+    renderCheckboxOptions(opts) {
+        return opts.map((opt) => html `
+        <aithe-checkbox value=${opt.id} ?disabled=${opt.disabled ?? false}>
+          ${opt.label}
+        </aithe-checkbox>
+      `);
+    }
+    /** Parses checkbox value from JSON string or array to a string array. 将复选框值从 JSON 字符串或数组解析为字符串数组。 */
+    parseCheckboxValue(raw) {
+        if (Array.isArray(raw)) {
+            return raw;
+        }
+        try {
+            const parsed = JSON.parse(raw || '[]');
+            return Array.isArray(parsed) ? parsed.filter((v) => typeof v === 'string') : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    render() {
+        if (!this._visible)
+            return nothing;
+        const iconEl = this.icon
+            ? html `
+          <aithe-icon class="item-icon" name=${this.icon} size="14"></aithe-icon>
+        `
+            : nothing;
+        const requiredMark = this.required
+            ? html `
+          <span class="item-required">*</span>
+        `
+            : nothing;
+        const tooltipEl = this.tooltip
+            ? html `
+          <aithe-tooltip content=${this.tooltip}><span class="item-tooltip">ⓘ</span></aithe-tooltip>
+        `
+            : nothing;
+        const headerEl = this.label || this.icon || this.tooltip
+            ? html `
+            <div class="item-header">
+              ${iconEl}
+              <span class="item-label">${this.label}</span>
+              ${requiredMark} ${tooltipEl}
+            </div>
+          `
+            : nothing;
+        const descriptionEl = this.description
+            ? html `
+          <aithe-label class="item-description" content=${this.description} size="sm"></aithe-label>
+        `
+            : nothing;
+        const errorEl = this.errorMsg
+            ? html `
+          <span class="item-error">${this.errorMsg}</span>
+        `
+            : nothing;
+        const footerEl = descriptionEl || errorEl
+            ? html `
+            <div class="item-footer">${descriptionEl}${errorEl}</div>
+          `
+            : nothing;
+        return html `
+      ${headerEl}
+      <div class="item-control">${this.renderControl()}</div>
+      ${footerEl}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "dft", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheAutoformItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAutoformItem.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "message", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheAutoformItem.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "inputType", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "min", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "step", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoformItem.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-change' })
+], AitheAutoformItem.prototype, "validateOnChange", void 0);
+__decorate([
+    state()
+], AitheAutoformItem.prototype, "errorMsg", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheAutoformItem.prototype, "dependencies", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheAutoformItem.prototype, "rules", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheAutoformItem.prototype, "dependencyValues", void 0);
+__decorate([
+    state()
+], AitheAutoformItem.prototype, "_visible", void 0);
+__decorate([
+    state()
+], AitheAutoformItem.prototype, "_ruleDisabled", void 0);
+__decorate([
+    state()
+], AitheAutoformItem.prototype, "_ruleOptions", void 0);
+__decorate([
+    state()
+], AitheAutoformItem.prototype, "_passwordVisible", void 0);
+AitheAutoformItem = __decorate([
+    customElement('aithe-autoform-item')
+], AitheAutoformItem);
+export { AitheAutoformItem };