import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
import { d as defineCustomElement$1 } from './p-Bm-eGlq5.js';

const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container:not(.readonly,.disabled) .delete-icon:hover{cursor:pointer}.textInput__container.disabled:not(.readonly) #text-field{color:#FFFFFF}.textInput__container.disabled:not(.readonly) .delete-icon{color:#FFFFFF}.textInput__container.disabled:not(.readonly) .textInput__top-wrapper label{color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__top-wrapper .required{color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__bottom-wrapper input{border:1px solid #BFBBBB;background-color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__bottom-wrapper input::placeholder{font-size:1rem;color:#FFFFFF}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{color:#575352;margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:1rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.readonly{border:none;border-radius:var(--borderRadius-12, 1px);border-bottom:1px solid var(--color-engineering-300, #bfbbbb);background:var(--color-base-white, #fff);padding-left:0}.textInput__container .textInput__bottom-wrapper input.readonly::placeholder{color:#1D1D1D}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success):not(.readonly){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input.readonly:focus,.textInput__container .textInput__bottom-wrapper input[readonly]:focus{outline:none;box-shadow:none;border:none;border-bottom:1px solid var(--color-engineering-300, #bfbbbb)}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success):not(.readonly){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#BFBBBB}";

const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxInput = createEvent(this, "ifxInput", 7);
        this.internals = this.attachInternals();
        this.placeholder = 'Placeholder';
        this.value = '';
        this.error = false;
        this.label = '';
        this.icon = '';
        this.caption = '';
        this.size = 'm';
        this.required = false;
        this.success = false;
        this.disabled = false;
        this.readOnly = false;
        this.showDeleteIcon = false;
        this.autocomplete = 'on';
        this.type = 'text';
        this.internalId = 'text-field';
    }
    valueWatcher(newValue) {
        if (newValue !== this.inputElement.value) {
            this.inputElement.value = newValue;
        }
    }
    async reset() {
        this.value = '';
        this.inputElement.value = '';
    }
    handleDeleteContent() {
        if (!this.disabled && !this.readOnly) {
            this.reset();
            this.ifxInput.emit(this.value);
        }
    }
    handleInput() {
        const query = this.inputElement.value;
        this.value = query;
        //this.internals.setFormValue(query) // update form value
        this.ifxInput.emit(this.value);
    }
    handleTypeProp() {
        this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';
    }
    // formResetCallback() {
    //   this.internals.setValidity({});
    //   this.internals.setFormValue("");
    // }
    componentWillLoad() {
        this.handleTypeProp();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-text-field', await framework);
        }
    }
    render() {
        return (h("div", { key: 'fde8ba65931e70265b84ddd75143a78627cbbba7', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '662198ca46ff5a6d568589b5d0ebb4b6117a6205', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'be2ec4dec1d869c891f8defac11181ca18f06053', htmlFor: this.internalId }, h("span", { key: '46d77c5682c4ed8ac8cfb41a4ef676bc061236a8' }, this.label), this.required && h("span", { key: '28ddfeee2b30168c4c755bdc822fec0ef98c529a', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: '20457f5caf1857c5e7259763a885ed7c7a9df636', class: "textInput__bottom-wrapper" }, h("div", { key: '7e9a0bfc6a2f590d741ece4639d5f38e4c712085', class: "input-container" }, this.icon && h("ifx-icon", { key: 'ebdc52fb4dcca7912fd6ac428f1f42442fbb2313', class: "input-icon", icon: this.icon }), h("input", { key: '4760819b300477cbac4da643c41b3dfb97d62285', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
                ${this.error ? 'error' : ''} 
                ${this.readOnly ? 'readonly' : ''} 
              ${this.size === 's' ? 'input-s' : ''}
              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: '34d4b05f44f3b5a0f4afddf40b2d3a0384482a57', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: 'da655fe4c12336e535e9f1be649136ce9344c115', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
    }
    get el() { return this; }
    static get watchers() { return {
        "value": ["valueWatcher"]
    }; }
    static get style() { return textFieldCss; }
}, [257, "ifx-text-field", {
        "placeholder": [1],
        "value": [1025],
        "error": [4],
        "label": [1],
        "icon": [1],
        "caption": [1],
        "size": [1],
        "required": [4],
        "success": [4],
        "disabled": [4],
        "readOnly": [4, "read-only"],
        "maxlength": [2],
        "showDeleteIcon": [4, "show-delete-icon"],
        "autocomplete": [1],
        "type": [1],
        "internalId": [1, "internal-id"],
        "internalType": [32],
        "reset": [64]
    }, undefined, {
        "value": ["valueWatcher"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-text-field", "ifx-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-text-field":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TextField);
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { TextField as T, defineCustomElement as d };
//# sourceMappingURL=p-B61i82g5.js.map

//# sourceMappingURL=p-B61i82g5.js.map