'use strict';

var index = require('./index-CpWVsZ_u.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;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}@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); }
    size;
    variant;
    inverted = false;
    ariaLabel;
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-spinner", await framework);
        }
    }
    render() {
        return (index.h("div", { key: 'a782bb3f9e80bb113ee1363ff7ca3c10af8ba72a', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, index.h("div", { key: '85b131b089ccda44fc2d5fe6b872eb5913ee3894', class: `${this.variant !== "brand" ? "border" : ""} ${this.inverted ? "inverted" : ""}` }), this.variant === "brand" && (index.h("div", { key: '737b64b1605ee96fbe230c5667a5a00beead34f9', class: `semiconductor ${this.inverted ? "inverted" : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '66bf1281f8b2a1a70c504cecbb63ed55b7881c78', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'bd419d6011f48d8acefc7c616cf66288ce2d89b2', id: "spinner/conductor" }, index.h("path", { key: '9ce85c25451db005e152b2b4250201b8db06fcdb', 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}` === "s" ? "s" : "";
    }
    getClassNames() {
        return index$1.classNames("spinner", this.size && `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 = "Placeholder";
    value = "";
    error = false;
    label = "";
    icon = "";
    caption = "";
    size = "m";
    required = false;
    success = false;
    disabled = false;
    readOnly = false;
    maxlength;
    showDeleteIcon = false;
    autocomplete = "on";
    type = "text";
    internalId = "text-field";
    internalType;
    ifxInput;
    // @Prop({ reflect: true })
    // resetOnSubmit: boolean = false;
    internals;
    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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-text-field", await framework);
        }
    }
    render() {
        return (index.h("div", { key: 'fa71f4cb980bb817baa86877079f00348cca6101', "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: '69c11fcdbc4f512a0fb7422f729103042a1d6263', class: "textInput__top-wrapper" }, this.label && (index.h("label", { key: '4bf08f701eaf3232e1956ee1e402f7631c5c3ee3', htmlFor: this.internalId }, index.h("span", { key: 'f298e78538be032b283e1455583383354a0806d1' }, this.label), this.required && (index.h("span", { key: 'd3b18e265d9e2170a71b39b2dd62ffbf979b5468', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))))), index.h("div", { key: '6d3ad385b764576f431866e5577ded7c6e8a19e8', class: "textInput__bottom-wrapper" }, index.h("div", { key: 'ffe365440e606cb0ff338998acdf82f1d674e8ce', class: "input-container" }, this.icon && index.h("ifx-icon", { key: '0cc097786fbdaf05189678df403daf966a6c5298', class: "input-icon", icon: this.icon }), index.h("input", { key: '495a533ff654318f3ed36d7736e758211ec4ffeb', 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: '112a55f7e1dc11128d9f489213a5925dde32d2f7', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && (index.h("div", { key: '4d64c4500f6d905a339d672e079bbef8eb757ac6', 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;
//# sourceMappingURL=ifx-spinner.ifx-text-field.entry.cjs.js.map

//# sourceMappingURL=ifx-spinner_2.cjs.entry.js.map