import { r as registerInstance, h, H as Host, a as getElement } from './index-D0dWnGvB.js';
import { g as guid } from './index-DEtoWGOc.js';
import { S as SxStyleManager } from './sx-style-manager-BFEqPAFn.js';

const DgaHelperText = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.helperText = '';
        this.error = false;
    }
    render() {
        var _a;
        return (h("div", { key: 'fba2082feeec8236bb4b1c427530200461fde1c7', class: `dga-helper-text ${this.error ? "dga-helper-text--error" : ""}` }, h("span", { key: '045252be8c2ad9d9efc620bb08476f62f18d1bc7', class: "dga-helper-text__icon" }, this.helperTextIcon && ((_a = this.helperTextIcon) === null || _a === void 0 ? void 0 : _a.name) && h("dga-icon", { key: '762ed7b7ff308b0ab447f6f38c7bf421b586e3b4', icon: this.helperTextIcon.name, variant: this.helperTextIcon.variant, type: this.helperTextIcon.type, size: 16 })), h("span", { key: '45d3cea48852598a25cd3d5798c1b9e099411085', class: "dga-helper-text__desc" }, this.helperText)));
    }
};

const DgaLabel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.label = '';
        this.variant = 'default';
        this.size = 'md';
        this.disabled = false;
        this.required = false;
    }
    render() {
        return (h("label", { key: '2664ee2470a12a0a0c4319ace89e7433b9f97fb4', class: `dga-label dga-label--${this.size} ${this.disabled ? "disabled" : ""}` }, this.required && h("span", { key: 'a133a41c5a00e5c010485629f3caf56da205d09d', class: "star" }, "*"), this.label));
    }
};

const feedbackIconTypes = {
    success: h("dga-icon", { icon: "CheckmarkCircle02Icon", variant: "solid" }),
    error: h("dga-icon", { icon: "AlertCircleIcon", variant: "solid" }),
    warning: h("dga-icon", { icon: "Alert02Icon", variant: "solid" }),
};
const DgaTextInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.size = 'lg';
        this.type = 'text';
        this.variant = 'default';
        this.error = false;
        this.feedbackIcon = false;
        this.feedbackIconType = 'success';
        this.feedbackIconRing = false;
        this.helperText = '';
        this.disabled = false;
        this.readonly = false;
        this.required = false;
        this.fullwidth = true;
        //   @Prop() id: string = guid();
        this.name = guid();
        this.value = '';
        this.isActive = false;
        this.isFocused = false;
        // Generate a unique ID if not provided
        this.componentId = `dga-button-${Math.random().toString(36).substring(2, 9)}`;
        // Computed inline styles
        this.rootStyles = {};
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.textInputEl['value'] = newValue;
        }
    }
    handleSxChange() {
        this.processStyling();
    }
    componentWillLoad() {
        // Initialize style manager with element reference
        this.sxStyleManager = new SxStyleManager(this.componentId, this.el);
    }
    componentDidLoad() {
        // Process styling after the component is fully loaded and shadow DOM is ready
        this.processStyling();
    }
    componentDidUpdate() {
        // Re-process styling after updates
        this.processStyling();
    }
    processStyling() {
        if (!this.sx)
            return;
        // Handle both string and object formats
        const sxValue = typeof this.sx === 'string' ? JSON.parse(this.sx) : this.sx;
        this.rootStyles = this.sxStyleManager.processSxProp(sxValue);
    }
    disconnectedCallback() {
        var _a;
        // Clean up styles when component is removed
        (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
    }
    render() {
        return (h(Host, { key: 'adabf71d1c87cb0c46329397ad6f0e7c266ea12c', id: this.componentId, style: this.rootStyles }, h("div", { key: 'fb2980499894e0f74d139c6cdf845b584f0eed45', class: { "dga-form-control": true, "dga-form-control--fullwidth": this.fullwidth } }, this.label && h("dga-label", { key: '6d55b18ababa9c2889aa812eacb17b766e6fb3d9', label: this.label, size: this.size, required: this.required, disabled: this.disabled }), h("div", { key: 'ec180d4b780bfb4d6f0c0ada2c9b9b1c017965ed', class: `input input--${this.size} ${this.error ? 'input--error' : ''} ${this.variant !== 'default' ? `input--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'input--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, h("slot", { key: '49bf9e9c32ad4d924b83d3c69b501d2cfc29790a', name: "prefix" }), this.icon && (h("span", { key: 'cd8b961739982b43da19dc62de08b5c504fb2a0a', class: "input__icon" }, h("dga-icon", { key: '59b68d7269ddd1d32a4b1e0becfb43875c64cf54', icon: this.icon.name, variant: this.icon.variant, type: this.icon.type, size: 20 }))), h("input", { key: 'dd38bb384e9c8c282d857be74379ec3f55615693',
            // id={id}
            ref: (el) => (this.textInputEl = el), value: this.value, name: this.name, type: this.type, onFocus: () => (this.isFocused = true), onBlur: e => {
                this.isFocused = false;
                this.onBlur(e);
            }, class: "input__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput }), this.error ? (h("span", { class: `input__feedback-icon input__feedback-icon--error ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` })) : this.feedbackIcon ? (h("span", { class: `input__feedback-icon input__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` }, feedbackIconTypes[this.feedbackIconType])) : null, h("slot", { key: '5271bbff657a8a584f03a45d2ee5a8231602e1e3', name: "suffix" }), " "), this.helperText && h("dga-helper-text", { key: 'affe6c109ebbab79e4e258fdeedd7ff0777deed7', helperText: this.helperText, helperTextIcon: this.helperTextIcon, error: this.error }))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "value": ["valueChanged"],
        "sx": ["handleSxChange"]
    }; }
};

export { DgaHelperText as dga_helper_text, DgaLabel as dga_label, DgaTextInput as dga_text_input };
