import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class SearchBar {
    el;
    /**
     * Controls whether the search bar is expanded (open) or collapsed.
     * This is mirrored into internal state and drives the visible UI.
     */
    isOpen = true;
    /**
     * Disables user interaction with the search field and close control.
     */
    disabled = false;
    /**
     * Current input value of the search field.
     * This is updated when the field emits input events.
     */
    value;
    /**
     * Maximum allowed length for the search input.
     */
    maxlength;
    /**
     * Autocomplete behavior passed to the underlying search field.
     */
    autocomplete = "on";
    /**
     * Emits when the search input value changes.
     */
    ifxInput;
    /**
     * Emits when the search bar is opened or closed.
     * Payload is the new open state.
     */
    ifxOpen;
    internalState;
    /**
     * Closes the search bar when triggered from a mobile navbar context.
     * Emits `ifxOpen` with `false` and updates internal state.
     */
    async onNavbarMobile() {
        this.ifxOpen.emit(false);
        this.internalState = false;
    }
    handlePropChange() {
        this.internalState = this.isOpen;
    }
    handleCloseButton = () => {
        this.internalState = !this.internalState;
        this.ifxOpen.emit(this.internalState);
    };
    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: '617fc2ae4bc28aca2d01f62cef32c0dd5a638c1d', role: "search", "aria-label": "a search field for user input", "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" })))));
    }
    static get is() { return "ifx-search-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["search-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["search-bar.css"]
        };
    }
    static get properties() {
        return {
            "isOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Controls whether the search bar is expanded (open) or collapsed.\nThis is mirrored into internal state and drives the visible UI."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-open",
                "defaultValue": "true"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables user interaction with the search field and close control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current input value of the search field.\nThis is updated when the field emits input events."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Maximum allowed length for the search input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "maxlength"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Autocomplete behavior passed to the underlying search field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete",
                "defaultValue": "\"on\""
            }
        };
    }
    static get states() {
        return {
            "internalState": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxInput",
                "name": "ifxInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits when the search input value changes."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "ifxOpen",
                "name": "ifxOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits when the search bar is opened or closed.\nPayload is the new open state."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "onNavbarMobile": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the search bar when triggered from a mobile navbar context.\nEmits `ifxOpen` with `false` and updates internal state.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "isOpen",
                "methodName": "handlePropChange"
            }];
    }
}
//# sourceMappingURL=search-bar.js.map
