import { Component, Prop, h, Watch } from '@stencil/core';
export class TeliaFieldset {
  constructor() {
    /** Disables descendant form controls.*/
    this.disabled = false;
    /** Indicates that contents in this fieldset are required to fill out. Please note that using this property does NOT add constraints on descendant elements, but is merely a visual guide to help the user fill the form correctly. Set required on each input as appropriate.*/
    this.required = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-fieldset';
  }
  validateLegend(value) {
    const isBlank = typeof value !== 'string' || value == '';
    if (isBlank) {
      throw new Error('legend: required');
    }
  }
  componentWillLoad() {
    this.validateLegend(this.legend);
  }
  render() {
    const componentClass = 'telia-fieldset';
    const wrapperClasses = {
      [`${componentClass}`]: true,
      [`${componentClass}--${this.variant}`]: !!this.variant,
    };
    return (h("fieldset", { disabled: this.disabled, form: this.form, name: this.name, class: wrapperClasses },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      h("legend", null,
        this.required && h("span", { "aria-hidden": "true" }, '* '),
        this.legend),
      h("slot", null)));
  }
  static get is() { return "telia-fieldset"; }
  static get originalStyleUrls() { return {
    "$": ["telia-fieldset.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-fieldset.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": "Disables descendant form controls."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "form": {
      "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": "form",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name associated with the group"
      },
      "attribute": "name",
      "reflect": false
    },
    "legend": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The title of the fieldset which is always required"
      },
      "attribute": "legend",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Indicates that contents in this fieldset are required to fill out. Please note that using this property does NOT add constraints on descendant elements, but is merely a visual guide to help the user fill the form correctly. Set required on each input as appropriate."
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Fieldset variant"
      },
      "attribute": "variant",
      "reflect": false
    }
  }; }
  static get watchers() { return [{
      "propName": "legend",
      "methodName": "validateLegend"
    }]; }
}
