@aqua-ds/web-components/components-build/aq-search-bar2.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './aq-button2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-text-field2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';

const aqSearchBarCss = ":host{display:block}";

const AqSearchBar = /*@__PURE__*/ proxyCustomElement(class AqSearchBar extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.searchBarOpen = createEvent(this, "searchBarOpen", 7);
        this.searchBarClose = createEvent(this, "searchBarClose", 7);
        this.aqInput = createEvent(this, "aqInput", 7);
        this.value = '';
        this.placeholder = '';
        this.isLoading = false;
        this.isDisabled = false;
        this.isButton = false;
        this.icon = 'aq-icon-search';
    }
    openSearchBar() {
        this.isButton = false;
        this.searchBarOpen.emit();
    }
    closeSearchBar() {
        this.isButton = true;
        this.searchBarClose.emit();
    }
    getValue(event) {
        const input = event.target;
        this.value = input.value;
        this.aqInput.emit({ value: this.value, event });
    }
    render() {
        return (h(Host, { key: '4f938642227da93f0e94a54f32d37a41e9c37e51', class: "aq-search-bar" }, (this.isButton || this.isLoading || this.isDisabled) && (h("aq-button", { key: '2c1f854a671148f702ce55abc1d1716c7e71baa3', isLoading: this.isLoading, isDisabled: this.isDisabled, onClick: () => this.openSearchBar() }, h("i", { key: 'ceb0df0d361185da54979f6675754c4f04677993', class: this.icon }))), !this.isButton && !this.isLoading && !this.isDisabled && (h("aq-text-field", { key: '54f897a31f8ff40b23e31cf895f5265dbe739db2', placeholder: this.placeholder, icon: this.icon, "has-clear": true, onInput: event => this.getValue(event), onClear: () => this.closeSearchBar() }, h("slot", { key: 'a6639b7d8c1a46c11706949b71044663d6a3ace9', name: "left-content" }, h("em", { key: '72e1ed1b43efda35af10d8516ae17923d7b0e663', class: this.icon }))))));
    }
    static get style() { return aqSearchBarCss; }
}, [260, "aq-search-bar", {
        "value": [1537],
        "placeholder": [1],
        "isLoading": [4, "is-loading"],
        "isDisabled": [4, "is-disabled"],
        "isButton": [1540, "is-button"],
        "icon": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-search-bar", "aq-button", "aq-helper-text", "aq-label", "aq-text-field", "aq-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-search-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqSearchBar);
            }
            break;
        case "aq-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "aq-helper-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "aq-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "aq-text-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "aq-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { AqSearchBar as A, defineCustomElement as d };