import { Component, Prop, h, Host } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
import { checkmark } from '@teliads/icons';
export class TeliaChipFilter {
  constructor() {
    /** Set chip disabled */
    this.disabled = false;
    /** Input element id */
    this.inputId = uniqueId('input');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-chip-filter';
    /**
     * Renders content passed in via props or fallbacks to slot
     * @private
     */
    this.renderContent = () => {
      if (this.text) {
        return this.text;
      }
      return h("slot", null);
    };
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.htmlForm) {
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setAttribute('form', this.htmlForm);
    }
  }
  render() {
    return (h(Host, { class: "telia-chip-filter" },
      h("div", { class: "telia-chip-filter__wrapper" },
        h("input", { id: this.inputId, class: "telia-chip-filter__input", type: "checkbox", name: this.name, ref: ref => (this.inputElement = ref), value: this.value, disabled: this.disabled, checked: this.checked, form: this.htmlForm }),
        h("label", { class: "telia-chip-filter__label", htmlFor: this.inputId, onClick: ev => ev.stopPropagation() },
          this.renderContent(),
          h("telia-icon", { svg: checkmark.svg, class: "telia-chip-filter__checkmark" })),
        h("telia-vst", { dataTrackingId: this.dataTrackingId }))));
  }
  static get is() { return "telia-chip-filter"; }
  static get originalStyleUrls() { return {
    "$": ["telia-chip-filter.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-chip-filter.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set chip disabled"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "htmlForm": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "ID of the form this component belongs to. Should only be set If the component is not wrapped inside its form element."
      },
      "attribute": "html-form",
      "reflect": false
    },
    "inputId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input element id"
      },
      "attribute": "input-id",
      "reflect": false,
      "defaultValue": "uniqueId('input')"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input value attribute"
      },
      "attribute": "value",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input name attribute"
      },
      "attribute": "name",
      "reflect": false
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Check state of input"
      },
      "attribute": "checked",
      "reflect": false
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text which will be displayed inside the chip button"
      },
      "attribute": "text",
      "reflect": false
    }
  }; }
}
