'use strict';

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

const index = require('./index-b499856a.js');
const uniqueId = require('./uniqueId-dab8aef4.js');
const chevronDown = require('./chevron-down-dda65b2e.js');

const teliaSelectCss = ".telia-select{display:flex;flex-direction:column;justify-content:center}.telia-select__select{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;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;-webkit-appearance:none;appearance:none;box-sizing:border-box;color:rgba(0, 0, 0, 0.85);display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;cursor:pointer;height:calc(4.6rem * var(--voca-rem-multiplier));margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;padding-right:calc(4.5rem * var(--voca-rem-multiplier))}.telia-select__select:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)));padding-right:calc(4.4rem * var(--voca-rem-multiplier))}.telia-select__select:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-select__select:hover:disabled,.telia-select__select:hover:read-only{padding-right:calc(4.5rem * var(--voca-rem-multiplier))}.telia-select__select:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));padding-right:calc(4.5rem * var(--voca-rem-multiplier))}.telia-select__select:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-select__select:focus~telia-icon{color:#990ae3}.telia-select__select:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);background-color:rgba(0, 0, 0, 0.1);color:rgba(0, 0, 0, 0.4);cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-select__select:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-select__select:invalid{box-shadow:none}.telia-select__select--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-select__select--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-select__select--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #e4175c;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-select__select~telia-icon{color:#e4175c}.telia-select--disabled .telia-icon__container,.telia-select--disabled .telia-select__additional{color:rgba(0, 0, 0, 0.4)}.telia-select--disabled telia-label .telia-label{color:rgba(0, 0, 0, 0.4)}.telia-select__main{align-items:center;display:flex;order:2;position:relative}.telia-select__main telia-icon{color:#222222;margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;pointer-events:none;position:absolute;right:calc(1.2rem * var(--voca-rem-multiplier))}.telia-select__additional{order:3}.telia-select__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:4}";

const TeliaSelect = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** Set select disabled */
    this.disabled = false;
    /** Select element id */
    this.selectId = uniqueId.uniqueId('select');
    /** Additional description id */
    this.additionalId = uniqueId.uniqueId('additional');
    /** Error description id */
    this.errorId = uniqueId.uniqueId('error');
    /** Field needs to be filled, so it can be submitted  */
    this.required = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-select';
    /**
     * Select has been blurred at least once.
     */
    this.touched = false;
    /**
     * Real time value of select
     */
    this.selectValue = '';
    /**
     * Error message
     */
    this.errorMessageState = '';
    /**
     * Renders out options property array as option elements if provided
     * Fallbacks to slot element
     */
    this.renderOptionElements = () => {
      const optionsProps = typeof this.options === 'string'
        ? JSON.parse(this.options)
        : this.options;
      if (optionsProps === null || optionsProps === void 0 ? void 0 : optionsProps.length) {
        return optionsProps.map(properties => (index.h("option", Object.assign({}, properties), properties.label)));
      }
      return index.h("slot", null);
    };
    /**
     * Renders out options property array as option elements if provided
     * Fallbacks to slot element
     */
    this.renderOptionGroupElements = () => {
      const optionsProps = typeof this.optGroup === 'string'
        ? JSON.parse(this.optGroup)
        : this.optGroup;
      if (optionsProps) {
        return Object.values(optionsProps).map((optGroup) => {
          return (index.h("optgroup", { label: optGroup.name }, optGroup.options.map(properties => {
            return index.h("option", Object.assign({}, properties), properties.label);
          })));
        });
      }
      return index.h("slot", null);
    };
    this.updateSelectedValue = () => {
      var _a;
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.selectValue = this.selectElement ? (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.value : '';
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    this.updateErrorState = (skipTouched = false) => {
      var _a, _b, _c;
      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
      const requiredInUse = this.required;
      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);
      if (generalErrorInUse) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (this.required) {
        if (((_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.value.length) === 0 &&
          !!this.requiredErrorMessage) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
        else if (skipTouched && !!this.requiredErrorMessage) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
        else {
          // Clear required error
          if (!!this.requiredErrorMessage)
            this.updateErrorMessage('');
        }
      }
      // Clean error message if needed
      if (errorMessageIsSet) {
        if (generalErrorInUse)
          return;
        if (requiredInUse)
          return;
        this.updateErrorMessage('');
      }
    };
  }
  componentWillLoad() {
    this.updateErrorState();
  }
  componentWillUpdate() {
    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.selectElement && ((_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.selectElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.selectElement) === 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 = showAdditional ? this.additionalId : '';
    return (index.h("div", { class: {
        'telia-select': true,
        'telia-select--disabled': this.disabled,
      } }, index.h("div", { class: "telia-select__main" }, index.h("select", { id: this.selectId, ref: ref => (this.selectElement = ref), class: {
        'telia-select__select': true,
        'telia-select__select--touched': this.touched,
      }, "aria-describedby": describedBy, disabled: this.disabled, form: this.htmlForm, required: this.required, onBlur: () => {
        this.touched = true;
        this.updateErrorState();
      }, onChange: () => {
        this.updateSelectedValue();
        this.updateErrorState();
      }, onInvalid: () => {
        this.touched = true;
        this.updateErrorState();
      } }, this.optGroup
      ? this.renderOptionGroupElements()
      : this.renderOptionElements()), index.h("telia-icon", { svg: chevronDown.chevronDown.svg })), index.h("telia-label", { htmlFor: this.selectId }, this.required && index.h("span", { "aria-hidden": "true" }, '* '), this.label), showAdditional && (index.h("telia-field-assistive-text", { class: "telia-select__additional", id: this.additionalId }, this.additional)), showError && (index.h("telia-field-error", { id: this.errorId, class: "telia-select__error" }, this.errorMessageState)), index.h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaSelect.style = teliaSelectCss;

exports.telia_select = TeliaSelect;
