import { Component, Prop, h } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
export class TeliaRadioButton {
  constructor() {
    /** Set radio button disabled */
    this.disabled = false;
    /** Additional description id */
    this.additionalId = uniqueId('additional');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-radio-button';
    /**
     * Renders content passed in via props or fallbacks to slot
     * @private
     */
    this.renderContent = () => {
      if (this.label) {
        return this.label;
      }
      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() {
    const showAdditional = !!this.additional;
    return (h("div", { class: `telia-radio-button ${this.disabled ? 'telia-radio-button--disabled' : ''}` },
      h("telia-label", { class: "telia-radio-button__main", dataTestid: this.dataTestid },
        h("input", { class: "telia-radio-button__input", type: "radio", name: this.name, ref: ref => (this.inputElement = ref), value: this.value, disabled: this.disabled, checked: this.checked, "aria-labelledby": this.labelledby, form: this.htmlForm }),
        h("div", { class: "telia-radio-button__fake-radio-button" },
          h("div", { class: "telia-radio-button__fake-dot" })),
        !this.labelledby && (h("span", { class: "telia-radio-button__label" }, this.renderContent())),
        h("telia-vst", { dataTrackingId: this.dataTrackingId })),
      showAdditional && (h("telia-field-assistive-text", { class: "telia-radio-button__additional", id: this.additionalId }, this.additional))));
  }
  static get is() { return "telia-radio-button"; }
  static get originalStyleUrls() { return {
    "$": ["telia-radio-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-radio-button.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 radio button 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
    },
    "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
    },
    "additional": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Additional description"
      },
      "attribute": "additional",
      "reflect": false
    },
    "additionalId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Additional description id"
      },
      "attribute": "additional-id",
      "reflect": false,
      "defaultValue": "uniqueId('additional')"
    },
    "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
    },
    "labelledby": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Id of element that should label the radio button"
      },
      "attribute": "labelledby",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label which will be displayed next to radio button if labelledby attribute is not set"
      },
      "attribute": "label",
      "reflect": false
    }
  }; }
}
