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$3 } from './p-DhNY6ZGA.js';
import { d as defineCustomElement$2 } from './p-BHAk4WfT.js';

const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";

const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxInput = createEvent(this, "ifxInput", 7);
        this.ifxOpen = createEvent(this, "ifxOpen", 7);
        this.isOpen = true;
        this.disabled = false;
        this.autocomplete = "on";
        this.handleCloseButton = () => {
            this.internalState = !this.internalState;
            this.ifxOpen.emit(this.internalState);
        };
        this.handleFocus = () => {
            this.internalState = true;
        };
    }
    async onNavbarMobile() {
        this.ifxOpen.emit(false);
        this.internalState = false;
    }
    handlePropChange() {
        this.internalState = this.isOpen;
    }
    setInitialState() {
        this.internalState = this.isOpen;
    }
    componentWillLoad() {
        this.setInitialState();
        this.ifxOpen.emit(this.internalState);
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-search-bar', await framework);
        }
    }
    handleInput(event) {
        this.value = event.detail;
    }
    render() {
        return (h("div", { key: '79e53af4741984e201a7c62711236c8091538b7d', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
    }
    get el() { return this; }
    static get watchers() { return {
        "isOpen": ["handlePropChange"]
    }; }
    static get style() { return searchBarCss; }
}, [257, "ifx-search-bar", {
        "isOpen": [4, "is-open"],
        "disabled": [4],
        "value": [1025],
        "maxlength": [2],
        "autocomplete": [1],
        "internalState": [32],
        "onNavbarMobile": [64]
    }, undefined, {
        "isOpen": ["handlePropChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-search-bar", "ifx-icon", "ifx-search-field"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-search-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SearchBar);
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ifx-search-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IfxSearchBar = SearchBar;
const defineCustomElement = defineCustomElement$1;

export { IfxSearchBar, defineCustomElement };
//# sourceMappingURL=ifx-search-bar.js.map

//# sourceMappingURL=ifx-search-bar.js.map