'use strict';

var index = require('./index-pX0sBY0-.js');
var index$1 = require('./index-CVw4GUo6.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');
require('./_commonjsHelpers-CFO10eej.js');

const spinnerCss = () => `:host{display:inline-block}.spinner{position:relative}.spinner.m{width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}.semiconductor.m svg{width:40px;height:40px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`;

const Spinner = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    /**
     * Visual size of the spinner.
     * @default "m"
     */
    size = "m";
    /**
     * Spinner style variant.
     * @default "default"
     */
    variant = "default";
    /**
     * Renders the spinner in inverted color for dark backgrounds.
     * @default false
     */
    inverted = false;
    /**
     * Accessible label announced by assistive technologies.
     * @default null
     */
    ariaLabelText;
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-spinner", await framework);
        }
    }
    render() {
        return (index.h("div", { key: '411983ff1d6a06b3919c958ebf405b753080ba6b', role: "status", "aria-label": this.ariaLabelText || "Loading", class: this.getClassNames() }, index.h("div", { key: 'a73cdd3355c187cd20b457d9eec918a3deecdf37', class: `${this.variant !== "brand" ? "border" : ""} ${this.inverted ? "inverted" : ""}` }), this.variant === "brand" && (index.h("div", { key: 'f333a6b98558d57fc9068073bfafc7f98bc40391', class: `semiconductor ${this.inverted ? "inverted" : ""} ${this.getSizeClass()}` }, index.h("svg", { key: 'a084510e1b21ba583d8eb49a1911986b34276782', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '270ae15fb16644d8be2849e5a43817fabf0afffe', id: "spinner/conductor" }, index.h("path", { key: '36a66c4c8a747948a72ad0a71dc720b24964532a', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" })))))));
    }
    getSizeClass() {
        return this.size;
    }
    getClassNames() {
        return index$1.classNames("spinner", this.getSizeClass());
    }
};
Spinner.style = spinnerCss();

const textFieldCss = () => `: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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxInput = index.createEvent(this, "ifxInput", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
    }
    inputElement;
    get el() { return index.getElement(this); }
    /** Placeholder text shown when the field is empty. */
    placeholder = "Placeholder";
    /** Current value of the text field (can be updated programmatically). */
    value = "";
    /** If true, shows the text field in an error state. */
    error = false;
    /** Label text shown above the text field. */
    label = "";
    /** Optional icon shown inside or next to the text field. */
    icon = "";
    /** Helper text shown below the text field. */
    caption = "";
    /** Size of the text field (e.g. s, m, l). */
    size = "m";
    /** Whether a value is required (used for validation). */
    required = false;
    /** If true, shows the text field in a success/valid state. */
    success = false;
    /** If true, the text field is disabled and not interactive. */
    disabled = false;
    /** If true, the text field is read-only but focusable. */
    readOnly = false;
    /** Maximum number of characters allowed. */
    maxlength;
    /** If true, shows a delete/clear icon to remove the current value. */
    showDeleteIcon = false;
    /** Native autocomplete attribute value. */
    autocomplete = "on";
    /** Input type for the field (text or password). */
    type = "text";
    /** Internal ID used to link label and input elements. */
    internalId = "text-field";
    internalType;
    /** Fired when the user types or the value changes. */
    ifxInput;
    // @Prop({ reflect: true })
    // resetOnSubmit: boolean = false;
    internals;
    valueWatcher(newValue) {
        if (newValue !== this.inputElement.value) {
            this.inputElement.value = newValue;
        }
    }
    /** Resets the text field value and clears the underlying input element. */
    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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-text-field", await framework);
        }
    }
    render() {
        return (index.h("div", { key: '3a0325a6fb3840d23816a40fbdcf4149776bc152', "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" : ""}` }, index.h("div", { key: '1d018c34e55b68bd6bb425f44e47152615f77f61', class: "textInput__top-wrapper" }, this.label && (index.h("label", { key: '10ddb3f2233cb42677694829111824923eb743d6', htmlFor: this.internalId }, index.h("span", { key: 'd2a01f7885370ec79cf7d2a7b71b3233a5d836c4' }, this.label), this.required && (index.h("span", { key: 'efdd81a5c7f1010c03227df6ab1e6df3c991c53f', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))))), index.h("div", { key: '6fdbad0fa63bbb8057acf6e96b27da2e9a24ea2b', class: "textInput__bottom-wrapper" }, index.h("div", { key: 'f5f9cc6f79a9a278f233af0b9c4aa81d0e65ff84', class: "input-container" }, this.icon && index.h("ifx-icon", { key: 'd8ec860c600fb697a24939ec50b4e4d4cc091481', class: "input-icon", icon: this.icon }), index.h("input", { key: 'cf8c359c14f00dcc4d117d437d1d43b63f5fd673', 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 && (index.h("ifx-icon", { key: 'a916ac876ae75e02ccb45457d81ec27cfa093b8e', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && (index.h("div", { key: '88e143703bf28d6f2e3efbfdacb4604c2d193845', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? "error" : ""} ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, this.caption)))));
    }
    static get watchers() { return {
        "value": [{
                "valueWatcher": 0
            }]
    }; }
};
TextField.style = textFieldCss();

exports.ifx_spinner = Spinner;
exports.ifx_text_field = TextField;
