import { r as registerInstance, h, H as Host } from './index-c269755a.js';
import { u as uniqueId } from './uniqueId-2052fef6.js';

const teliaChipChoiceCss = ".telia-chip-choice .telia-chip-choice__wrapper{display:inline-block;position:relative}.telia-chip-choice .telia-chip-choice__wrapper:hover .telia-chip-choice__input:not(:disabled):not(:checked)~.telia-chip-choice__label:not(:active){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-choice .telia-chip-choice__wrapper:hover .telia-chip-choice__input:not(:disabled):not(:checked)~.telia-chip-choice__label:not(:active)~.telia-chip-choice__svg{stroke:#29003e}.telia-chip-choice__input{opacity:0;position:absolute}.telia-chip-choice__input:focus~.telia-chip-choice__label::before{border-radius:calc(0.8rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));content:\"\";display:block;left:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.2rem * var(--voca-rem-multiplier)))}.telia-chip-choice__input:focus:not(:focus-visible)~.telia-chip-choice__label::before{box-shadow:none}.telia-chip-choice__input:checked~.telia-chip-choice__label{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;background-color:#29003e;color:#ffffff;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-choice__input:checked~.telia-chip-choice__svg{stroke:#ffffff}.telia-chip-choice__input:disabled~.telia-chip-choice__label{background-color:transparent;border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);color:rgba(0, 0, 0, 0.4);cursor:not-allowed;padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier))}.telia-chip-choice__input:disabled~.telia-chip-choice__svg{stroke:rgba(0, 0, 0, 0.3)}.telia-chip-choice__label{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(0.8rem * var(--voca-rem-multiplier));color:#29003e;font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:calc(\n      calc(2.4rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))\n    );padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier));transition:background-color 0.3s, border-color 0.3s}.telia-chip-choice__label:active{background-color:#edc8ff;border:calc(0.2rem * var(--voca-rem-multiplier)) solid #edc8ff;padding:calc(calc(0.8rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-chip-choice__label:active .telia-chip-choice__input:not(:checked)~.telia-chip-choice__svg{stroke:#29003e}.telia-chip-choice .telia-chip-choice__svg{height:100%;left:50%;pointer-events:none;position:absolute;stroke:#29003e;transform:translate(-50%, 0);transition:all 0.3s}.telia-chip-choice .telia-chip-choice__ally-unavailable{display:none}";

const TeliaChipChoice = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Set chip disabled */
    this.disabled = false;
    /** Input element id */
    this.inputId = uniqueId('input');
    /** Id of the element containing the unavailable text */
    this.unavailableElementId = uniqueId('unavailable');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-chip-choice';
    this.largeDiagonal = this.createDiagonal(40, 42);
    this.smallDiagonal = this.createDiagonal(24, 42);
    this.diagonal = this.largeDiagonal;
    this.getElementRef = (el) => {
      this.labelEl = el;
    };
    /**
     * Returns content provided via props or fallbacks to slots
     * @private
     */
    this.renderContent = () => {
      if (this.text) {
        return this.text;
      }
      return h("slot", null);
    };
  }
  componentDidLoad() {
    if (this.unavailable) {
      /**
       * Only change state if the chip is small,
       * else use the default diagonal.
       */
      const style = this.getLabelStyle();
      if (style && !this.isWide(style)) {
        this.diagonal = this.smallDiagonal;
      }
    }
  }
  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);
    }
  }
  createDiagonal(width, height) {
    return (h("svg", { "aria-hidden": "true", width: width, height: height, class: "telia-chip-choice__svg", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("line", { id: "svg-line1", x1: "1", x2: width - 1, y1: "-3", y2: "45", "stroke-width": "1" })));
  }
  getLabelStyle() {
    /**
     * If this is called before the comonent
     * has rendered, the labelEl is null.
     * This will throw an error unless wrapped
     * in try/catch.
     */
    try {
      return window.getComputedStyle(this.labelEl);
    }
    catch (e) {
      console.error(e);
      return null;
    }
  }
  isWide(style) {
    const paddings = [style.paddingLeft, style.paddingRight];
    const paddingCombined = paddings.reduce((acc, current) => acc + parseInt(current), 0) - 8;
    let width = this.labelEl.offsetWidth - paddingCombined;
    if (width <= 37) {
      return false;
    }
    else {
      return true;
    }
  }
  render() {
    return (h(Host, { class: "telia-chip-choice" }, h("div", { class: "telia-chip-choice__wrapper" }, h("input", { id: this.inputId, class: "telia-chip-choice__input", type: "radio", ref: ref => (this.inputElement = ref), name: this.name, value: this.value, disabled: this.disabled, checked: this.checked, "aria-describedby": this.unavailable ? this.unavailableElementId : null, form: this.htmlForm }), h("label", { class: "telia-chip-choice__label", htmlFor: this.inputId, ref: this.getElementRef, onClick: ev => ev.stopPropagation() }, this.renderContent()), h("p", { id: this.unavailableElementId, class: "telia-chip-choice__ally-unavailable" }, this.unavailable), this.unavailable && this.diagonal, h("telia-vst", { dataTrackingId: this.dataTrackingId }))));
  }
};
TeliaChipChoice.style = teliaChipChoiceCss;

export { TeliaChipChoice as telia_chip_choice };
