import { Host, h } from '@stencil/core';
import { getHostAttrs } from '../../utils';
/**
 * Displays an input element styled like a search field.
 * @docsPage
 * @exSlot
 */
export class BsInputSearch {
  constructor() {
    /** 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" })))));
  }
  static get is() { return "bs-input-search"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-input-search.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-input-search.css"]
    };
  }
  static get properties() {
    return {
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the disabled state on the input."
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes by name (comma-separated) to pass through to <input>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Placeholder attribute - same as native."
        },
        "attribute": "placeholder",
        "reflect": false,
        "defaultValue": "'Search Items'"
      },
      "hintId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Adds an id to associate a hint to an input."
        },
        "attribute": "hint-id",
        "reflect": false
      },
      "inputId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass id attribute to set on the native input element."
        },
        "attribute": "input-id",
        "reflect": false
      },
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the input value."
        },
        "attribute": "value",
        "reflect": false,
        "defaultValue": "''"
      }
    };
  }
  static get events() {
    return [{
        "method": "clear",
        "name": "clear",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits the clear button is clicked."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-input-search.js.map
