import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as getHostAttrs } from './index2.js';
import { d as defineCustomElement$3 } from './bs-input2.js';
import { d as defineCustomElement$2 } from './bs-input-addon2.js';

const bsInputSearchCss = ":where(bs-input-search){display:inline-block;width:100%}bs-input-search :where(bs-input-addon) :where(bs-icon-search){padding-left:0.75rem}bs-input-search :where(bs-input-addon) :where(bs-icon-close){padding-right:0.75rem}bs-input-search :where(bs-input-addon) :where(button){align-items:center;background-color:transparent;cursor:pointer;display:flex;height:100%}";

const BsInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class BsInputSearch extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.clear = createEvent(this, "clear", 7);
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.disabled = false;
    this.passAttrs = '';
    this.placeholder = 'Search Items';
    this.hintId = undefined;
    this.inputId = undefined;
    this.value = '';
  }
  componentWillLoad() {
    var _a, _b;
    this.attrs = getHostAttrs(this.hostEl, [
      'autocomplete',
      'maxlength',
      'minlength',
      'name',
      ...this.passAttrs.split(',')
    ]);
    // Only add aria-label if hintId (used for aria-describedby) is not given
    if (!this.hintId) {
      const ariaLabel = (_b = (_a = this.hostEl.attributes.getNamedItem('aria-label')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'Search Items';
      this.attrs['aria-label'] = ariaLabel;
    }
  }
  render() {
    const passAttrs = `aria-label,${this.passAttrs}`;
    return (h(Host, null, h("bs-input-addon", { disabled: this.disabled }, h("bs-icon-search", null), h("bs-input", Object.assign({ "data-autowidth": true, disabled: this.disabled, "hint-id": this.hintId, "input-id": this.inputId, "pass-attrs": passAttrs, placeholder: this.placeholder, value: this.value }, this.attrs)), !this.disabled &&
      h("button", { title: "Clear", type: "button", onClick: () => this.clear.emit() }, h("bs-icon-close", { size: "sm" })))));
  }
  get hostEl() { return this; }
  static get style() { return bsInputSearchCss; }
}, [0, "bs-input-search", {
    "disabled": [4],
    "passAttrs": [1, "pass-attrs"],
    "placeholder": [1],
    "hintId": [1, "hint-id"],
    "inputId": [1, "input-id"],
    "value": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-input-search", "bs-input", "bs-input-addon"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-input-search":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsInputSearch$1);
      }
      break;
    case "bs-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "bs-input-addon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const BsInputSearch = BsInputSearch$1;
const defineCustomElement = defineCustomElement$1;

export { BsInputSearch, defineCustomElement };

//# sourceMappingURL=bs-input-search.js.map