'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.js');
const uniqueId = require('./uniqueId-dab8aef4.js');
const stringCombiner = require('./stringCombiner-21e97a77.js');

const checkBold = { "name": "check-bold", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M56.6648 10.2486C59.2886 12.2726 59.7747 16.0404 57.7507 18.6641L32.1401 51.8631C29.1931 55.6832 23.5605 56.0451 20.1489 52.6335L6.75736 39.242C4.41421 36.8988 4.41421 33.0998 6.75736 30.7567C9.1005 28.4135 12.8995 28.4135 15.2426 30.7567L25.4174 40.9314L48.2493 11.3345C50.2733 8.71076 54.0411 8.2246 56.6648 10.2486Z\"/></svg>" };

const minusBold = { "name": "minus-bold", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 32C4 28.6863 6.68629 26 10 26H54C57.3137 26 60 28.6863 60 32C60 35.3137 57.3137 38 54 38H10C6.68629 38 4 35.3137 4 32Z\"/></svg>" };

const teliaCheckboxCss = ".telia-checkbox{display:block}.telia-checkbox__main{align-items:flex-start;display:inline-flex;position:relative}.telia-checkbox__main:hover .telia-checkbox__input:not(:disabled)~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e}.telia-checkbox__main:hover .telia-checkbox__input:focus~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-checkbox__main:hover .telia-checkbox__input--touched:invalid:not(:disabled)~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-checkbox__main:hover .telia-checkbox__input:checked:not(:disabled)~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #5e0092;background-color:#5e0092}.telia-checkbox__main:hover .telia-checkbox__input--touched:invalid:focus~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-checkbox__input{appearance:none;height:calc(4.4rem * var(--voca-rem-multiplier));left:calc(calc(2.4rem * var(--voca-rem-multiplier)) / 2);margin:0;opacity:0;padding:0;position:absolute;top:calc(calc(2.4rem * var(--voca-rem-multiplier)) / 2);transform:translate(-50%, -50%);width:calc(4.4rem * var(--voca-rem-multiplier));}.telia-checkbox__input:focus~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox::before{border-radius:calc(0.2rem * 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)));height:calc(100% + calc(0.4rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.4rem * var(--voca-rem-multiplier)))}.telia-checkbox__input:focus:not(:focus-visible)~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox::before{box-shadow:none;outline:0}.telia-checkbox__input:disabled~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{background-color:rgba(0, 0, 0, 0.1);border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);cursor:not-allowed}.telia-checkbox__input:disabled~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__icon{color:transparent}.telia-checkbox__input:disabled~.telia-checkbox__label{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-checkbox__input:disabled~.telia-checkbox__fake-checkbox-wrapper:hover{background:none}.telia-checkbox__input:disabled~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__additional{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-checkbox__input:checked~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox,.telia-checkbox__input:indeterminate~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{background-color:#29003e;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e}.telia-checkbox__input:disabled:checked~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox,.telia-checkbox__input:disabled:indeterminate~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{background-color:rgba(0, 0, 0, 0.1);border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15)}.telia-checkbox__input:disabled:checked~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox .telia-checkbox__icon,.telia-checkbox__input:disabled:indeterminate~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox .telia-checkbox__icon{color:rgba(0, 0, 0, 0.6)}.telia-checkbox__input--touched:invalid~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-checkbox__input--touched:invalid:focus~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-checkbox__input--touched:invalid:checked~.telia-checkbox__fake-checkbox-wrapper .telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e}.telia-checkbox__fake-checkbox-wrapper{z-index:1;cursor:pointer}.telia-checkbox__fake-checkbox{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));align-items:center;cursor:pointer;display:flex;height:calc(2.4rem * var(--voca-rem-multiplier));justify-content:center;min-width:calc(2.4rem * var(--voca-rem-multiplier));vertical-align:top;width:calc(2.4rem * var(--voca-rem-multiplier))}.telia-checkbox__icon{color:#ffffff}.telia-checkbox__label{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;color:rgba(0, 0, 0, 0.85);cursor:pointer;min-height:calc(2.4rem * var(--voca-rem-multiplier));padding:0 0 0 calc(1.2rem * var(--voca-rem-multiplier))}.telia-checkbox--disabled .telia-checkbox__additional{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-checkbox__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0}";

const TeliaCheckbox = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** Set checkbox disabled */
    this.disabled = false;
    /** Additional description id */
    this.additionalId = uniqueId.uniqueId('additional');
    /** Indeterminate state */
    this.indeterminate = false;
    /** Field needs to be checked, so it can be submitted  */
    this.required = false;
    /** Error description id */
    this.errorId = uniqueId.uniqueId('error');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-checkbox';
    /**
     * Input has been blurred at least once.
     */
    this.touched = false;
    /**
     * Error message
     */
    this.errorMessageState = '';
    this.updateCheckedValue = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.inputChecked = this.inputElement ? this.inputElement.checked : false;
    };
    this.updateIndeterminateState = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      if (this.inputElement) {
        this.inputElement.indeterminate = this.indeterminate;
      }
    };
    /**
     * Stop event propagation for label element
     */
    this.onLabelClickHandler = (event) => {
      // Type should be EventTarget, but it doesn't support element attributes.
      const target = event.target;
      if ((target === null || target === void 0 ? void 0 : target.type) !== 'checkbox') {
        event.stopPropagation();
      }
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    this.updateErrorState = () => {
      if (this.errorMessage) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (this.required) {
        if (this.touched && !!this.requiredErrorMessage && !this.inputChecked) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
        else {
          // Clear required error
          if (!!this.requiredErrorMessage)
            this.updateErrorMessage('');
        }
      }
    };
  }
  componentWillLoad() {
    this.updateIndeterminateState();
    this.updateCheckedValue();
    this.updateErrorState();
  }
  componentWillUpdate() {
    this.updateIndeterminateState();
    this.updateErrorState();
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a, _b, _c;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.inputElement && ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);
    }
  }
  render() {
    const showError = this.touched && !!this.errorMessageState.length;
    const showAdditional = !!this.additional;
    const describedBy = stringCombiner.stringCombiner({
      [this.additionalId]: showAdditional,
      [this.errorId]: showError,
    });
    return (index.h(index.Host, { class: `telia-checkbox ${this.disabled ? 'telia-checkbox--disabled' : ''}` }, index.h("label", { onClick: this.onLabelClickHandler, class: "telia-checkbox__main" }, index.h("input", { class: {
        'telia-checkbox__input': true,
        'telia-checkbox__input--touched': this.touched,
      }, type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, checked: this.checked, ref: ref => (this.inputElement = ref), required: this.required, "aria-labelledby": this.labelledby, "aria-describedby": describedBy, onBlur: () => {
        this.touched = true;
        this.updateErrorState();
      }, onChange: () => {
        this.updateCheckedValue();
        this.updateErrorState();
      }, onInvalid: event => {
        event.preventDefault();
        this.touched = true;
        this.updateErrorState();
      }, form: this.htmlForm }), index.h("div", { class: "telia-checkbox__fake-checkbox-wrapper" }, index.h("div", { class: "telia-checkbox__fake-checkbox" }, index.h("telia-icon", { class: "telia-checkbox__icon", svg: this.indeterminate ? minusBold.svg : checkBold.svg, size: "sm" }))), index.h("telia-vst", { dataTrackingId: this.dataTrackingId }), index.h("span", { class: "telia-checkbox__label" }, this.required && index.h("span", { "aria-hidden": "true" }, '* '), index.h("slot", null))), showAdditional && (index.h("telia-field-assistive-text", { class: "telia-checkbox__additional", id: this.additionalId }, this.additional)), showError && (index.h("telia-field-error", { id: this.errorId, class: "telia-checkbox__error" }, this.errorMessageState))));
  }
};
TeliaCheckbox.style = teliaCheckboxCss;

exports.telia_checkbox = TeliaCheckbox;
