{"version":3,"sources":["scripts/mn-option.class.js"],"names":["evaluate","value","isVariable","startsWith","isNaN","eval","e","isObject","obj","_typeof","Array","isArray","MnOption","self","_this","_ret","_classCallCheck","this","classList","add","setInput","setCustomInput","setPlaceholder","input","checked","addEventListener","getAttribute","name","lastChecked","document","querySelector","remove","appendChild","label","_possibleConstructorReturn","setInputAttribute","attribute","isDefaultAttribute","hasOwnProperty","attributeValue","element","isValidValue","values","indexOf","default","setAttribute","hasAttribute","evaluatedValue","JSON","stringify","console","error","inputAttributes","createElement","map","removeAttribute","blur","type","isNatural","contains","customInput","className","vector","createElementNS","innerHTML","background","placeholderText","textContent","form","closest","options","querySelectorAll","from","item","filter","isRadio","isSingleOption","length","isBoolean","Boolean","setById","option","id","_id","forEach","stringifiedValue","replace","HTMLElement","window","customElements","define"],"mappings":"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","file":"mn-option.js","sourcesContent":["class MnOption extends HTMLElement {\n  constructor(self) {\n    self = super(self)\n    this.classList.add('mn-option')\n    this.setInput()\n    this.setCustomInput()\n    this.setPlaceholder()\n\n    if (this.input.checked) {\n      this.classList.add('checked')\n    }\n\n    this.input.addEventListener('change', () => {\n      if (this.input.getAttribute('type') === 'radio') {\n        const name = this.input.getAttribute('name')\n        const lastChecked = document.querySelector(`.mn-option.checked[name=\"${name}\"]`)\n        if (lastChecked) {\n          lastChecked.classList.remove('checked')\n        }\n      }\n\n      this.input.checked\n        ? this.classList.add('checked')\n        : this.classList.remove('checked')\n    })\n\n    this.appendChild(this.label)\n\n    return self\n  }\n\n  setInput() {\n    const element = this\n\n    if (!this.hasAttribute('value')) {\n      const name = this.hasAttribute('name')\n        ? `[name=\"${this.getAttribute('name')}\"]`\n        : ''\n\n      console.error(`missing value in mn-option${name}`)\n    } else {\n      const evaluatedValue = evaluate(this.getAttribute('value'))\n\n      if (isObject(evaluatedValue)) {\n        this.setAttribute('value', JSON.stringify(evaluatedValue))\n      }\n    }\n\n    const inputAttributes = [\n      {\n        name: 'type',\n        values: ['radio', 'checkbox'],\n        default: 'checkbox',\n      },\n      {\n        name: 'name',\n      },\n      {\n        name: 'autofocus',\n      },\n      {\n        name: 'checked',\n      },\n      {\n        name: 'disabled',\n      },\n      {\n        name: 'readonly',\n      },\n      {\n        name: 'value',\n      },\n      {\n        name: 'id',\n      },\n    ]\n\n    const label = document.createElement('label')\n    this.label = label\n\n    // input element\n    const input = document.createElement('input')\n    this.input = input\n    inputAttributes.map(setInputAttribute)\n    this.removeAttribute('id')\n    label.appendChild(input)\n\n    this.addEventListener('mouseleave', () => {\n      input.blur()\n    })\n\n    function setInputAttribute(attribute) {\n      const isDefaultAttribute = attribute.hasOwnProperty('default')\n      const attributeValue = element.getAttribute(attribute.name)\n\n      if (isDefaultAttribute) {\n        const isValidValue = attribute.hasOwnProperty('values')\n          && attribute.values.indexOf(attributeValue) >= 0\n\n        const value = isValidValue\n          ? attributeValue\n          : attribute.default\n\n        input.setAttribute(attribute.name, value)\n      } else if (attributeValue) {\n        input.setAttribute(attribute.name, attributeValue)\n      }\n    }\n  }\n\n  setCustomInput() {\n    // custom input\n    const type = this.getAttribute('type')\n    const isNatural = this.classList.contains('natural')\n    if (type && !isNatural) {\n      const customInput = document.createElement('div')\n      customInput.className = 'input'\n      customInput.classList.add(type)\n      this.label.appendChild(customInput)\n\n      if (type === 'checkbox') {\n        const vector = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n        vector.setAttribute('width', '16px')\n        vector.setAttribute('height', '16px')\n        vector.innerHTML = `<g\n          stroke=\"none\"\n          stroke-width=\"1\"\n          fill=\"none\"\n          fill-rule=\"evenodd\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\">\n            <g\n              transform=\"translate(2.000000, 3.000000)\"\n              stroke-width=\"2\"\n              stroke=\"#000000\">\n                <polyline\n                  points=\"12.3825 0.581533333 3.653 10.3935333 0.273722222 6.7386\"></polyline>\n            </g>\n        </g>`\n        customInput.appendChild(vector)\n      }\n    } else {\n      const background = document.createElement('div')\n      background.classList.add('background')\n      this.label.appendChild(background)\n    }\n  }\n\n  setPlaceholder() {\n    // placeholder text\n    const placeholderText = document.createElement('span')\n    placeholderText.classList.add('text')\n    placeholderText.textContent = this.getAttribute('placeholder') || this.getAttribute('value')\n    this.label.appendChild(placeholderText)\n  }\n\n  get value() {\n    const form = this.closest('form') || document\n    const name = this.getAttribute('name')\n      ? `[name=\"${this.getAttribute('name')}\"]`\n      : ':not([name])'\n    const options = form.querySelectorAll(`.mn-option${name}`)\n    const type = this.getAttribute('type')\n\n    const value = Array\n      .from(options)\n      .map(item => item.querySelector('input'))\n      .filter(item => item.checked)\n      .map(item => evaluate(item.value))\n\n    const isRadio = type === 'radio'\n    const isSingleOption = options.length === 1\n    const isBoolean = typeof evaluate(options[0].getAttribute('value')) === 'boolean'\n\n    return isRadio || (isSingleOption && isBoolean)\n      ? isSingleOption && isBoolean\n        ? Boolean(value[0])\n        : value[0]\n      : value\n  }\n\n  set value(value) {\n    const form = this.closest('form') || document\n    const name = this.getAttribute('name')\n      ? `[name=\"${this.getAttribute('name')}\"]`\n      : ':not([name])'\n    const options = form.querySelectorAll(`.mn-option${name}`)\n    const type = options[0].getAttribute('type')\n    const values = Array.isArray(value)\n      ? value\n      : [value]\n\n    Array\n      .from(options)\n      .forEach(option => {\n        option.checked = false\n      })\n\n    if (value) {\n      if (type === 'radio') {\n        const value = values[0]\n        const stringifiedValue = typeof value === 'string'\n          ? value.replace(/\"/g, '\\\\\"')\n          : value\n            ? JSON.stringify(value).replace(/\"/g, '\\\\\"')\n            : value\n\n        // console.log('try', `mn-option${name}[value=\"${stringifiedValue}\"]`)\n        const option = form.querySelector(`.mn-option${name}[value=\"${stringifiedValue}\"]`)\n        if (option) {\n          option.checked = true\n        } else {\n          setById(value)\n        }\n      } else {\n        values\n          .forEach(value => {\n            const stringifiedValue = typeof value === 'string'\n              ? value.replace(/\"/g, '\\\\\"')\n              : value\n                ? JSON.stringify(value).replace(/\"/g, '\\\\\"')\n                : value\n\n            const option = form.querySelector(`.mn-option${name}[value=\"${stringifiedValue}\"]`)\n            if (option) {\n              option.checked = true\n            } else {\n              setById(value)\n            }\n          })\n      }\n    }\n\n    function setById(value) {\n      value = evaluate(value)\n      try {\n        let options = form.querySelectorAll(`.mn-option${name}`)\n        // let mnOption =\n\n        options = Array\n          .from(options)\n          .filter(option => {\n            const evaluatedValue = evaluate(option.getAttribute('value'))\n            const id = value.id || value._id\n            const idEqual = id\n              && (\n                id === evaluatedValue.id\n                || id === evaluatedValue._id\n              )\n\n            return idEqual\n          })\n\n        if (options.length) {\n          options[0].classList.add('checked')\n          options[0].querySelector('input').checked = true\n        } else {\n          console.error(`${JSON.stringify(value)} is a invalid value to mn-option${name}`)\n        }\n\n      } catch (e) {\n        console.error(`${JSON.stringify(value)} is a invalid value to mn-option${name}`)\n      }\n      // console.error(`${JSON.stringify(value)} is a invalid value to mn-option${name}`)\n    }\n  }\n\n  get checked() {\n    return this.hasAttribute('checked')\n  }\n\n  set checked(checked) {\n    if (checked) {\n      this.setAttribute('checked', 'true')\n      this.classList.add('checked')\n    } else {\n      this.removeAttribute('checked')\n      this.classList.remove('checked')\n    }\n\n    this.querySelector('input').checked = checked\n  }\n}\n\nfunction evaluate(value) {\n  try {\n    const isVariable = !value.startsWith('[')\n      && !value.startsWith('{')\n      && !value.startsWith('\\'')\n      && !value.startsWith('\"')\n      && !value.startsWith('`')\n      && value !== 'true'\n      && value !== 'false'\n      && isNaN(value)\n\n    return isVariable\n        ? eval(`'${value}'`) // convert to string\n        : eval(`(${value})`) // evaluate\n  } catch (e) {\n    return value\n  }\n}\n\nfunction isObject(obj) {\n  return obj !== null\n    && typeof obj === 'object'\n    && !Array.isArray(obj)\n}\n\nwindow.customElements.define('mn-option', MnOption)\nwindow.MnOption = MnOption\n"]}