'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-128c5169.js');
const index$1 = require('./index-06cbe7f9.js');

const bsInputSearchCss = "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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.onclear = index.createEvent(this, "onclear", 7);
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.disabled = false;
    this.passAttrs = '';
    this.placeholder = "Search Items";
    this.ariaLabel = "Search Items";
    this.hintId = undefined;
    this.value = '';
  }
  componentWillLoad() {
    this.attrs = index$1.getHostAttrs(this.hostEl, [
      'autocomplete',
      'id',
      'maxlength',
      'minlength',
      'name',
      ...this.passAttrs.split(',')
    ]);
  }
  render() {
    const passAttrs = 'aria-label';
    return (index.h(index.Host, null, index.h("bs-input-addon", { disabled: this.disabled }, index.h("bs-icon-search", null), index.h("bs-input", Object.assign({ "aria-label": this.ariaLabel, "data-autowidth": true, disabled: this.disabled, passAttrs: passAttrs, placeholder: this.placeholder, value: this.value }, Object.assign(Object.assign({}, this.attrs), { 'aria-describedby': this.hintId }))), !this.disabled &&
      index.h("button", { title: "Clear", type: "button", onClick: () => this.onclear.emit() }, index.h("bs-icon-close", { size: "sm" })))));
  }
  get hostEl() { return index.getElement(this); }
};
BsInputSearch.style = bsInputSearchCss;

exports.bs_input_search = BsInputSearch;

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