@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-search-bar.cjs.entry.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const searchBarCss = () => `: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 .search-bar__icon-wrapper:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}`;
+
+const SearchBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxInput = index.createEvent(this, "ifxInput", 7);
+        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * 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";
+    /**
+     * Toggles the close button outside the input field
+     */
+    showCloseButton = true;
+    /**
+     * 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;
+    pendingFocus = false;
+    /**
+     * Opens the search bar when triggered programatically
+     * Emits `ifxOpen` with `false` and updates internal state.
+     */
+    async open() {
+        this.pendingFocus = true;
+        this.internalState = true;
+    }
+    /**
+    * Closes the search bar when triggered programatically
+    * Emits `ifxOpen` with `true` and updates internal state.
+    */
+    async close() {
+        this.internalState = false;
+        this.ifxOpen.emit(false);
+    }
+    handlePropChange() {
+        this.internalState = this.isOpen;
+    }
+    handleCloseButton = () => {
+        const newState = !this.internalState;
+        if (newState)
+            this.pendingFocus = true;
+        this.internalState = newState;
+        this.ifxOpen.emit(newState);
+    };
+    setInitialState() {
+        this.internalState = this.isOpen;
+    }
+    componentWillLoad() {
+        this.setInitialState();
+        //this.ifxOpen.emit(this.internalState);
+    }
+    componentDidUpdate() {
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            const searchField = this.el.shadowRoot?.querySelector('ifx-search-field');
+            if (typeof searchField?.setFocus === 'function') {
+                searchField.setFocus();
+            }
+        }
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-search-bar", await framework);
+        }
+    }
+    handleInput(event) {
+        this.value = event.detail;
+    }
+    handleOpenSearchKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseButton();
+        }
+    };
+    render() {
+        return (index.h("div", { key: 'e6fb09717914d5b2bf1f14ce678f409042031343', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+            index.h("a", { "aria-label": "Close button", href: urlUtils.sanitizeHref("javascript:void(0)"), onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton, role: "button", tabindex: "0", "aria-label": "Open search bar", onKeyDown: this.handleOpenSearchKeyDown }, index.h("ifx-icon", { icon: "search-16" })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "handlePropChange": 0
+            }]
+    }; }
+};
+SearchBar.style = searchBarCss();
+
+exports.ifx_search_bar = SearchBar;