@operato/input 2.0.0-alpha.9 → 2.0.0-alpha.92

package/dist/src/ox-input-barcode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { scanImageData } from '@undecaf/zbar-wasm'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n/**\n * Custom input component for barcode scanning.\n *\n * This component provides a text input field and a barcode scanning button. Users can input text\n * manually or scan barcodes using the device camera. Supported barcode formats include:\n *\n * - Code-39\n * - Code-93\n * - Code-128\n * - Codabar\n * - Databar/Expanded\n * - EAN/GTIN-5/8/13\n * - ISBN-10/13\n * - ISBN-13+2\n * - ISBN-13+5\n * - ITF (Interleaved 2 of 5)\n * - QR Code\n * - UPC-A/E\n *\n * @fires CustomEvent#change - Dispatched when the input value changes.\n * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).\n *\n * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.\n *\n * @customElement\n */\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  /**\n   * Indicates whether barcode scanning is enabled.\n   * @property {Boolean} scannable\n   */\n  @property({ type: Boolean }) scannable?: boolean\n\n  /**\n   * If true, the \"Enter\" key press event is not fired after scanning a barcode.\n   * @property {Boolean} withoutEnter\n   */\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n\n  /**\n   * The value of the input field.\n   * @property {String} declare value\n   */\n  @property({ type: String }) declare value?: string\n\n  /**\n   * If true, only English characters are allowed in the input field.\n   * @property {Boolean} englishOnly\n   */\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n\n  /**\n   * If true, the input field is automatically selected after a change event.\n   * @property {Boolean} selectAfterChange\n   */\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n\n  @query('input') input!: HTMLInputElement\n\n  private popup: OxPopup | null = null\n  private video: HTMLVideoElement | null = null\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n        ?disabled=${this.disabled}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n        ?disabled=${this.disabled}\n      ></button>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      if (this.popup) {\n        this.stopScan()\n      }\n\n      this.popup = OxPopup.open({\n        template: html`\n          <video></video>\n          <mwc-icon\n            style=\"position: fixed; right: 0; top: 0; color: red; tabindex: 0\"\n            @click=${() => {\n              this.stopScan()\n            }}\n            >close</mwc-icon\n          >\n        `,\n        width: '100vw',\n        height: '100dvh'\n      })\n\n      this.video! = this.popup.querySelector('video') as HTMLVideoElement\n\n      var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.video.srcObject = this.stream\n      this.video.play()\n\n      this.video.onloadedmetadata = async e => {\n        var canvas = new OffscreenCanvas(\n          this.video!.videoWidth || this.video!.width,\n          this.video!.videoHeight || this.video!.height\n        )\n\n        var context = canvas.getContext('2d', {\n          willReadFrequently: true\n        })\n\n        const detect = async () => {\n          try {\n            if (!this.stream?.active) {\n              return\n            }\n\n            context!.drawImage(this.video!, 0, 0, canvas.width, canvas.height)\n            const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)\n            const symbols = await scanImageData(imageData)\n            const result = symbols[0]?.decode()\n\n            if (result) {\n              this.stopScan()\n\n              var input = this.input\n              input.focus()\n              this.value = input.value = String(result)\n\n              if (!this.withoutEnter) {\n                input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n              }\n            } else {\n              requestAnimationFrame(async () => await detect())\n            }\n          } catch (e) {\n            console.warn(e)\n            this.stopScan()\n          }\n        }\n\n        await detect()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    }\n  }\n\n  stopScan() {\n    if (this.video) {\n      this.video.pause()\n      this.video.srcObject = null\n    }\n\n    if (this.popup) {\n      this.popup.close()\n      this.popup = null\n    }\n\n    this.stream?.getTracks().forEach(track => track.stop())\n  }\n}\n"]}
+{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { scanImageData } from '@undecaf/zbar-wasm'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n/**\n * Custom input component for barcode scanning.\n *\n * This component provides a text input field and a barcode scanning button. Users can input text\n * manually or scan barcodes using the device camera. Supported barcode formats include:\n *\n * - Code-39\n * - Code-93\n * - Code-128\n * - Codabar\n * - Databar/Expanded\n * - EAN/GTIN-5/8/13\n * - ISBN-10/13\n * - ISBN-13+2\n * - ISBN-13+5\n * - ITF (Interleaved 2 of 5)\n * - QR Code\n * - UPC-A/E\n *\n * @fires CustomEvent#change - Dispatched when the input value changes.\n * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).\n *\n * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.\n *\n * @customElement\n */\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        background-color: inherit;\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  /**\n   * Indicates whether barcode scanning is enabled.\n   * @property {Boolean} scannable\n   */\n  @property({ type: Boolean }) scannable?: boolean\n\n  /**\n   * If true, the \"Enter\" key press event is not fired after scanning a barcode.\n   * @property {Boolean} withoutEnter\n   */\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n\n  /**\n   * The value of the input field.\n   * @property {String} declare value\n   */\n  @property({ type: String }) declare value?: string\n\n  /**\n   * If true, only English characters are allowed in the input field.\n   * @property {Boolean} englishOnly\n   */\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n\n  /**\n   * If true, the input field is automatically selected after a change event.\n   * @property {Boolean} selectAfterChange\n   */\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n\n  @query('input') input!: HTMLInputElement\n\n  private popup: OxPopup | null = null\n  private video: HTMLVideoElement | null = null\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n        ?disabled=${this.disabled}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n        ?disabled=${this.disabled}\n      ></button>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      if (this.popup) {\n        this.stopScan()\n      }\n\n      this.popup = OxPopup.open({\n        template: html`\n          <video></video>\n          <md-icon\n            style=\"position: fixed; right: 0; top: 0; color: red; tabindex: 0\"\n            @click=${() => {\n              this.stopScan()\n            }}\n            >close</md-icon\n          >\n        `,\n        width: '100vw',\n        height: '100dvh'\n      })\n\n      this.video! = this.popup.querySelector('video') as HTMLVideoElement\n\n      var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.video.srcObject = this.stream\n      this.video.play()\n\n      this.video.onloadedmetadata = async e => {\n        var canvas = new OffscreenCanvas(\n          this.video!.videoWidth || this.video!.width,\n          this.video!.videoHeight || this.video!.height\n        )\n\n        var context = canvas.getContext('2d', {\n          willReadFrequently: true\n        })\n\n        const detect = async () => {\n          try {\n            if (!this.stream?.active) {\n              return\n            }\n\n            context!.drawImage(this.video!, 0, 0, canvas.width, canvas.height)\n            const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)\n            const symbols = await scanImageData(imageData)\n            const result = symbols[0]?.decode()\n\n            if (result) {\n              this.stopScan()\n\n              var input = this.input\n              input.focus()\n              this.value = input.value = String(result)\n\n              if (!this.withoutEnter) {\n                input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n              }\n            } else {\n              requestAnimationFrame(async () => await detect())\n            }\n          } catch (e) {\n            console.warn(e)\n            this.stopScan()\n          }\n        }\n\n        await detect()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    }\n  }\n\n  stopScan() {\n    if (this.video) {\n      this.video.pause()\n      this.video.srcObject = null\n    }\n\n    if (this.popup) {\n      this.popup.close()\n      this.popup = null\n    }\n\n    this.stream?.getTracks().forEach(track => track.stop())\n  }\n}\n"]}

package/dist/src/ox-input-code.d.ts

@@ -9,7 +9,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 export declare class OxInputCode extends OxFormField {
@@ -18,8 +18,7 @@ export declare class OxInputCode extends OxFormField {
      * `value`는 에디터에서 작성중인 contents이다.
      */
     value: string;
-    tabSize: number;
-    tabAsSpace: boolean;
+    showLineNumbers: boolean;
     language?: string;
     private _self_changing;
     private _editor?;

package/dist/src/ox-input-code.js

@@ -4,8 +4,9 @@
 import { __decorate } from "tslib";
 import { css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { minimalSetup } from 'codemirror';
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
 import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
@@ -20,7 +21,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 let OxInputCode = class OxInputCode extends OxFormField {
@@ -30,8 +31,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
          * `value`는 에디터에서 작성중인 contents이다.
          */
         this.value = '';
-        this.tabSize = 2;
-        this.tabAsSpace = true;
+        this.showLineNumbers = false;
         this.language = 'javascript';
         this._self_changing = false;
         this._changed = false;
@@ -79,7 +79,9 @@ let OxInputCode = class OxInputCode extends OxFormField {
             this._editor = new EditorView({
                 doc: this.value,
                 extensions: [
+                    minimalSetup,
                     ...language,
+                    ...(this.showLineNumbers ? [lineNumbers()] : []),
                     bracketMatching(),
                     closeBrackets(),
                     history(),
@@ -113,12 +115,6 @@ let OxInputCode = class OxInputCode extends OxFormField {
             this.value = this._editor.state.doc.toString();
             this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
         });
-        // this._editor.contentDOM.addEventListener('change', async e => {
-        //   this._self_changing = true
-        //   this._changed = true
-        //   await this.updateComplete
-        //   this._self_changing = false
-        // })
         return this._editor;
     }
 };
@@ -126,11 +122,8 @@ __decorate([
     property({ type: String })
 ], OxInputCode.prototype, "value", void 0);
 __decorate([
-    property({ type: Number, attribute: 'tab-size' })
-], OxInputCode.prototype, "tabSize", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'tab-as-space' })
-], OxInputCode.prototype, "tabAsSpace", void 0);
+    property({ type: Boolean, attribute: 'show-line-numbers' })
+], OxInputCode.prototype, "showLineNumbers", void 0);
 __decorate([
     property({ type: String })
 ], OxInputCode.prototype, "language", void 0);

package/dist/src/ox-input-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} tab-size=\"4\" tab-as-space=\"true\" language=\"javascript\">\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n        overflow: auto;\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value: string = ''\n  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n  @property({ type: String }) language?: string = 'javascript'\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n  private _changed: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\n      let language: LanguageSupport[] = []\n      switch (this.language) {\n        case 'sql':\n          language = [sql()]\n          break\n        case 'json':\n          language = [json()]\n          break\n        case 'javascript':\n          language = [javascript()]\n          break\n        default:\n          break\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          ...language,\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          highlightActiveLine(),\n          keymap.of([...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of(async v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this._changed = true\n\n              await this.updateComplete\n\n              this._self_changing = false\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    this._editor.contentDOM.addEventListener('keydown', event => {\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    this._editor.contentDOM.addEventListener('blur', e => {\n      if (!this._changed) {\n        return\n      }\n\n      this.value = this._editor!.state.doc.toString()\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n    })\n\n    // this._editor.contentDOM.addEventListener('change', async e => {\n    //   this._self_changing = true\n    //   this._changed = true\n\n    //   await this.updateComplete\n\n    //   this._self_changing = false\n    // })\n\n    return this._editor\n  }\n}\n"]}
+{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { minimalSetup } from 'codemirror'\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} language=\"javascript\" show-line-numbers>\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n        overflow: auto;\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value: string = ''\n  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n  @property({ type: String }) language?: string = 'javascript'\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n  private _changed: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\n      let language: LanguageSupport[] = []\n      switch (this.language) {\n        case 'sql':\n          language = [sql()]\n          break\n        case 'json':\n          language = [json()]\n          break\n        case 'javascript':\n          language = [javascript()]\n          break\n        default:\n          break\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          minimalSetup,\n          ...language,\n          ...(this.showLineNumbers ? [lineNumbers()] : []),\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          highlightActiveLine(),\n          keymap.of([...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of(async v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this._changed = true\n\n              await this.updateComplete\n\n              this._self_changing = false\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    this._editor.contentDOM.addEventListener('keydown', event => {\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    this._editor.contentDOM.addEventListener('blur', e => {\n      if (!this._changed) {\n        return\n      }\n\n      this.value = this._editor!.state.doc.toString()\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n    })\n\n    return this._editor\n  }\n}\n"]}

package/dist/src/ox-input-color-gradient.d.ts

@@ -21,6 +21,6 @@ export declare class OxInputColorGradient extends OxFormField {
     value: GradientOption;
     firstUpdated(): void;
     _onChange(e: Event): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     _convertDirectionToRotation(direction: string): number;
 }

package/dist/src/ox-input-color-stops.d.ts

@@ -52,7 +52,7 @@ export declare class OxInputColorStops extends OxFormField {
     connectedCallback(): void;
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     _refinedValue(value: any): any[];
     _setFocused(index: number): void;
     _changeFocused(focused: any): void;

package/dist/src/ox-input-color.d.ts

@@ -165,7 +165,7 @@ export declare class OxInputColor extends OxFormField {
     static styles: import("lit").CSSResult;
     value?: string;
     properties: any;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     set colorString(colorString: string);
     _thumbnail(): string;
     _onInputChanged(e: Event): void;

package/dist/src/ox-input-container.d.ts

@@ -1,12 +1,12 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/popup/ox-popup-list.js';
 import { LitElement } from 'lit';
 import { OxPopupList } from '@operato/popup';
 export declare class OxInputContainer extends LitElement {
     popupList: OxPopupList;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     openPopupList(e: MouseEvent): void;
 }

package/dist/src/ox-input-container.js

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/popup/ox-popup-list.js';
 import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
@@ -10,7 +10,7 @@ let OxInputContainer = class OxInputContainer extends LitElement {
     render() {
         return html `
       <slot> </slot>
-      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>
+      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>
 
       <ox-popup-list></ox-popup-list>
     `;

package/dist/src/ox-input-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKjD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAG9C,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGjD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAjByB;IAAvB,KAAK,CAAC,eAAe,CAAC;mDAAwB;AADpC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAkB5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-input-container')\nexport class OxInputContainer extends LitElement {\n  @query('ox-popup-list') popupList!: OxPopupList\n\n  render() {\n    return html`\n      <slot> </slot>\n      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>\n\n      <ox-popup-list></ox-popup-list>\n    `\n  }\n\n  openPopupList(e: MouseEvent) {\n    this.popupList.open({\n      left: 0,\n      top: 0\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-input-container.js","sourceRoot":"","sources":["../../src/ox-input-container.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAKjD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAG9C,MAAM;QACJ,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGhD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAjByB;IAAvB,KAAK,CAAC,eAAe,CAAC;mDAAwB;AADpC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAkB5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-input-container')\nexport class OxInputContainer extends LitElement {\n  @query('ox-popup-list') popupList!: OxPopupList\n\n  render() {\n    return html`\n      <slot> </slot>\n      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>\n\n      <ox-popup-list></ox-popup-list>\n    `\n  }\n\n  openPopupList(e: MouseEvent) {\n    this.popupList.open({\n      left: 0,\n      top: 0\n    })\n  }\n}\n"]}

package/dist/src/ox-input-crontab.d.ts

@@ -1,7 +1,6 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@material/mwc-button';
 import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field';
 export declare class OxInputCrontab extends OxFormField {
@@ -17,7 +16,7 @@ export declare class OxInputCrontab extends OxFormField {
         value: string;
         description: string;
     }[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     get focusableElements(): HTMLElement[];
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;

package/dist/src/ox-input-crontab.js

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@material/mwc-button';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
@@ -205,14 +204,12 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    mwc-button {
-      background-color: var(--secondary-color);
+    button {
       border-radius: var(--button-border-radius);
-      --mdc-theme-primary: #fff;
       margin: 0.25rem;
     }
-    mwc-button:hover,
-    mwc-button:active {
+    button:hover,
+    button:active {
       background-color: var(--primary-color);
     }
   `; }
@@ -377,7 +374,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
     `;
     }
     get focusableElements() {
-        return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'));
+        return Array.from(this.renderRoot.querySelectorAll('select, input, button'));
     }
     firstUpdated() {
         ;

package/dist/src/ox-input-crontab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n  // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n  var regexByField = {} as any\n  regexByField['sec'] = '[0-5]?\\\\d'\n  regexByField['min'] = '[0-5]?\\\\d'\n  regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n  regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n  regexByField['month'] = '[1-9]|1[012]'\n  regexByField['dayOfWeek'] = '[0-7]'\n\n  var crontabFields = [type]\n  if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n  crontabFields.forEach(field => {\n    var number = regexByField[field]\n    var range =\n      '(?:' +\n      number +\n      ')' +\n      '(?:' +\n      '(?:-|/|,' +\n      ('dayOfWeek' === field ? '|#' : '') +\n      ')' +\n      '(?:' +\n      number +\n      ')' +\n      ')?'\n    if (field === 'dayOfWeek') range += '(?:L)?'\n    if (field === 'month') range += '(?:L|W)?'\n    regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n  })\n\n  var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n  var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n  regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n  var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n  var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n  regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n  if (!type)\n    return (\n      '^\\\\s*($' +\n      '|#' +\n      '|\\\\w+\\\\s*=' +\n      '|' +\n      '(' +\n      regexByField['sec'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['min'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['hour'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['day'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['month'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['dayOfWeek'] +\n      ')(|\\\\s)+' +\n      ')$'\n    )\n  else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border: 0;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: grid;\n      width: 100%;\n      height: 100%;\n      padding: 1rem;\n      grid-template: auto auto 1fr auto / repeat(6, 1fr);\n      grid-gap: 0.5rem;\n      justify-content: center;\n      align-items: center;\n      overflow: auto;\n    }\n\n    label[for='example'] {\n      text-align: right;\n      grid-column: 3;\n      font: normal 1em var(--theme-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n\n    #example {\n      grid-column: 4 / span 3;\n      width: 100%;\n      height: 100%;\n      padding: var(--input-padding);\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      text-transform: capitalize;\n      font: var(--label-font);\n      color: var(--label-color);\n    }\n\n    input {\n      width: 100%;\n      margin-top: var(--margin-default);\n      padding: 5px;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    label:not([for='example']) {\n      text-align: center;\n    }\n\n    #input-wrapper {\n      grid-column: span 6;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0 -0.25rem;\n    }\n\n    #input-wrapper > div {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n      grid-gap: 0.5rem;\n      min-width: 60px;\n      max-width: 33%;\n      margin: 0.25rem;\n    }\n\n    #tooltip {\n      grid-column: span 6;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      grid-gap: 0;\n      margin: auto;\n      grid-auto-rows: min-content;\n      align-self: center;\n      align-items: center;\n    }\n\n    #tooltip > div {\n      padding: 0.25rem 0.5rem;\n      border-bottom: #ccc 1px dashed;\n      font: normal 0.9em var(--theme-font);\n    }\n\n    #tooltip > .crontab-value {\n      text-align: right;\n      color: var(--secondary-color);\n    }\n\n    #tooltip > .crontab-description {\n      text-align: left;\n      color: #585858;\n    }\n\n    #button-wrapper {\n      grid-column: 1 / span 6;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      flex-direction: row-reverse;\n      margin: -0.25rem;\n    }\n\n    mwc-button {\n      background-color: var(--secondary-color);\n      border-radius: var(--button-border-radius);\n      --mdc-theme-primary: #fff;\n      margin: 0.25rem;\n    }\n    mwc-button:hover,\n    mwc-button:active {\n      background-color: var(--primary-color);\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: String }) second?: string\n  @property({ type: String }) minute?: string\n  @property({ type: String }) hour?: string\n  @property({ type: String }) dayOfMonth?: string\n  @property({ type: String }) month?: string\n  @property({ type: String }) dayOfWeek?: string\n\n  @state() tooltip: { value: string; description: string }[] = []\n\n  render() {\n    return html`\n      <form>\n        <label for=\"example\">${i18next.t('label.examples')}</label>\n        <select\n          id=\"example\"\n          @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n          .value=${this.value || ''}\n        >\n          <optgroup label=\"String(${i18next.t('label.second by second')})\">\n            <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n            <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n            <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n            <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n            <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n            <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n            <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n            <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.hourly')})\">\n            <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n            <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n            <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n            <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.daily')})\">\n            <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.weekly')})\">\n            <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n            <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n            <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.monthly')})\">\n            <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n            <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.yearly')})\">\n            <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n            <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n          </optgroup>\n        </select>\n        <div id=\"input-wrapper\">\n          <div>\n            <input\n              id=\"second-input\"\n              class=\"second\"\n              type=\"text\"\n              .value=${this.second || ''}\n              @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('second')\n              }}\n              pattern=${createCronRegex('sec')}\n              required\n            />\n            <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n          </div>\n          <div>\n            <input\n              id=\"minute-input\"\n              class=\"minute\"\n              type=\"text\"\n              .value=${this.minute || ''}\n              @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('minute')\n              }}\n              pattern=${createCronRegex('min')}\n              required\n            />\n            <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n          </div>\n          <div>\n            <input\n              id=\"hour-input\"\n              class=\"hour\"\n              type=\"text\"\n              .value=${this.hour || ''}\n              @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('hour')\n              }}\n              pattern=${createCronRegex('hour')}\n              required\n            />\n            <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n          </div>\n          <div>\n            <input\n              id=\"day-of-month-input\"\n              class=\"day-of-month\"\n              type=\"text\"\n              .value=${this.dayOfMonth || ''}\n              @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('dayOfMonth')\n              }}\n              pattern=${createCronRegex('day')}\n              required\n            />\n            <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n          </div>\n          <div>\n            <input\n              id=\"month-input\"\n              class=\"month\"\n              type=\"text\"\n              .value=${this.month || ''}\n              @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('month')\n              }}\n              pattern=${createCronRegex('month')}\n              required\n            />\n            <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n          </div>\n          <div>\n            <input\n              id=\"day-of-week-input\"\n              class=\"day-of-week\"\n              type=\"text\"\n              .value=${this.dayOfWeek || ''}\n              @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('dayOfWeek')\n              }}\n              pattern=${createCronRegex('dayOfWeek')}\n              required\n            />\n            <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n          </div>\n        </div>\n        <div id=\"tooltip\">\n          ${this.tooltip.map(\n            tip => html`\n              <div class=\"crontab-value\">${tip.value}</div>\n              <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n            `\n          )}\n        </div>\n        <button\n          id=\"clear\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n            this.value = ''\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n        >\n          Clear\n        </button>\n      </form>\n    `\n  }\n\n  get focusableElements(): HTMLElement[] {\n    return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n    this.renderRoot.addEventListener('change', this.onChange.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      var values = (this.value || '').split(' ')\n\n      if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n      else if (values.length == 5) values = ['0'].concat(values)\n\n      this.second = values[0]\n      this.minute = values[1]\n      this.hour = values[2]\n      this.dayOfMonth = values[3]\n      this.month = values[4]\n      this.dayOfWeek = values[5]\n    }\n  }\n\n  showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n    switch (type) {\n      case 'second':\n      case 'minute':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-59',\n            description: 'allowed values'\n          }\n        ]\n        break\n      case 'hour':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-23',\n            description: 'allowed values'\n          }\n        ]\n        break\n\n      case 'dayOfMonth':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '1-31',\n            description: 'allowed values'\n          }\n        ]\n        break\n\n      case 'month':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '1-12',\n            description: 'allowed values'\n          },\n          {\n            value: 'JAN-DEC',\n            description: 'alternative single values'\n          }\n        ]\n        break\n\n      case 'dayOfWeek':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-6',\n            description: 'allowed values'\n          },\n          {\n            value: 'SUN-SAT',\n            description: 'alternative single values'\n          }\n        ]\n        break\n\n      default:\n        this.tooltip = []\n        break\n    }\n  }\n\n  onChange() {\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n  // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n  var regexByField = {} as any\n  regexByField['sec'] = '[0-5]?\\\\d'\n  regexByField['min'] = '[0-5]?\\\\d'\n  regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n  regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n  regexByField['month'] = '[1-9]|1[012]'\n  regexByField['dayOfWeek'] = '[0-7]'\n\n  var crontabFields = [type]\n  if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n  crontabFields.forEach(field => {\n    var number = regexByField[field]\n    var range =\n      '(?:' +\n      number +\n      ')' +\n      '(?:' +\n      '(?:-|/|,' +\n      ('dayOfWeek' === field ? '|#' : '') +\n      ')' +\n      '(?:' +\n      number +\n      ')' +\n      ')?'\n    if (field === 'dayOfWeek') range += '(?:L)?'\n    if (field === 'month') range += '(?:L|W)?'\n    regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n  })\n\n  var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n  var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n  regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n  var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n  var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n  regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n  if (!type)\n    return (\n      '^\\\\s*($' +\n      '|#' +\n      '|\\\\w+\\\\s*=' +\n      '|' +\n      '(' +\n      regexByField['sec'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['min'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['hour'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['day'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['month'] +\n      ')\\\\s+' +\n      '(' +\n      regexByField['dayOfWeek'] +\n      ')(|\\\\s)+' +\n      ')$'\n    )\n  else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border: 0;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: grid;\n      width: 100%;\n      height: 100%;\n      padding: 1rem;\n      grid-template: auto auto 1fr auto / repeat(6, 1fr);\n      grid-gap: 0.5rem;\n      justify-content: center;\n      align-items: center;\n      overflow: auto;\n    }\n\n    label[for='example'] {\n      text-align: right;\n      grid-column: 3;\n      font: normal 1em var(--theme-font);\n      color: var(--secondary-color);\n      text-transform: capitalize;\n    }\n\n    #example {\n      grid-column: 4 / span 3;\n      width: 100%;\n      height: 100%;\n      padding: var(--input-padding);\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      text-transform: capitalize;\n      font: var(--label-font);\n      color: var(--label-color);\n    }\n\n    input {\n      width: 100%;\n      margin-top: var(--margin-default);\n      padding: 5px;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    label:not([for='example']) {\n      text-align: center;\n    }\n\n    #input-wrapper {\n      grid-column: span 6;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0 -0.25rem;\n    }\n\n    #input-wrapper > div {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n      grid-gap: 0.5rem;\n      min-width: 60px;\n      max-width: 33%;\n      margin: 0.25rem;\n    }\n\n    #tooltip {\n      grid-column: span 6;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      grid-gap: 0;\n      margin: auto;\n      grid-auto-rows: min-content;\n      align-self: center;\n      align-items: center;\n    }\n\n    #tooltip > div {\n      padding: 0.25rem 0.5rem;\n      border-bottom: #ccc 1px dashed;\n      font: normal 0.9em var(--theme-font);\n    }\n\n    #tooltip > .crontab-value {\n      text-align: right;\n      color: var(--secondary-color);\n    }\n\n    #tooltip > .crontab-description {\n      text-align: left;\n      color: #585858;\n    }\n\n    #button-wrapper {\n      grid-column: 1 / span 6;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      flex-direction: row-reverse;\n      margin: -0.25rem;\n    }\n\n    button {\n      border-radius: var(--button-border-radius);\n      margin: 0.25rem;\n    }\n    button:hover,\n    button:active {\n      background-color: var(--primary-color);\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: String }) second?: string\n  @property({ type: String }) minute?: string\n  @property({ type: String }) hour?: string\n  @property({ type: String }) dayOfMonth?: string\n  @property({ type: String }) month?: string\n  @property({ type: String }) dayOfWeek?: string\n\n  @state() tooltip: { value: string; description: string }[] = []\n\n  render() {\n    return html`\n      <form>\n        <label for=\"example\">${i18next.t('label.examples')}</label>\n        <select\n          id=\"example\"\n          @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n          .value=${this.value || ''}\n        >\n          <optgroup label=\"String(${i18next.t('label.second by second')})\">\n            <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n            <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n            <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n            <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n            <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n            <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n            <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n            <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.hourly')})\">\n            <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n            <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n            <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n            <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.daily')})\">\n            <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.weekly')})\">\n            <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n            <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n            <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.monthly')})\">\n            <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n            <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n          </optgroup>\n          <optgroup label=\"String(${i18next.t('label.yearly')})\">\n            <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n            <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n          </optgroup>\n        </select>\n        <div id=\"input-wrapper\">\n          <div>\n            <input\n              id=\"second-input\"\n              class=\"second\"\n              type=\"text\"\n              .value=${this.second || ''}\n              @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('second')\n              }}\n              pattern=${createCronRegex('sec')}\n              required\n            />\n            <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n          </div>\n          <div>\n            <input\n              id=\"minute-input\"\n              class=\"minute\"\n              type=\"text\"\n              .value=${this.minute || ''}\n              @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('minute')\n              }}\n              pattern=${createCronRegex('min')}\n              required\n            />\n            <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n          </div>\n          <div>\n            <input\n              id=\"hour-input\"\n              class=\"hour\"\n              type=\"text\"\n              .value=${this.hour || ''}\n              @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('hour')\n              }}\n              pattern=${createCronRegex('hour')}\n              required\n            />\n            <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n          </div>\n          <div>\n            <input\n              id=\"day-of-month-input\"\n              class=\"day-of-month\"\n              type=\"text\"\n              .value=${this.dayOfMonth || ''}\n              @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('dayOfMonth')\n              }}\n              pattern=${createCronRegex('day')}\n              required\n            />\n            <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n          </div>\n          <div>\n            <input\n              id=\"month-input\"\n              class=\"month\"\n              type=\"text\"\n              .value=${this.month || ''}\n              @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('month')\n              }}\n              pattern=${createCronRegex('month')}\n              required\n            />\n            <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n          </div>\n          <div>\n            <input\n              id=\"day-of-week-input\"\n              class=\"day-of-week\"\n              type=\"text\"\n              .value=${this.dayOfWeek || ''}\n              @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n              @focus=${(e: Event) => {\n                this.showTooltip('dayOfWeek')\n              }}\n              pattern=${createCronRegex('dayOfWeek')}\n              required\n            />\n            <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n          </div>\n        </div>\n        <div id=\"tooltip\">\n          ${this.tooltip.map(\n            tip => html`\n              <div class=\"crontab-value\">${tip.value}</div>\n              <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n            `\n          )}\n        </div>\n        <button\n          id=\"clear\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n            this.value = ''\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n        >\n          Clear\n        </button>\n      </form>\n    `\n  }\n\n  get focusableElements(): HTMLElement[] {\n    return Array.from(this.renderRoot.querySelectorAll('select, input, button'))\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n    this.renderRoot.addEventListener('change', this.onChange.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      var values = (this.value || '').split(' ')\n\n      if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n      else if (values.length == 5) values = ['0'].concat(values)\n\n      this.second = values[0]\n      this.minute = values[1]\n      this.hour = values[2]\n      this.dayOfMonth = values[3]\n      this.month = values[4]\n      this.dayOfWeek = values[5]\n    }\n  }\n\n  showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n    switch (type) {\n      case 'second':\n      case 'minute':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-59',\n            description: 'allowed values'\n          }\n        ]\n        break\n      case 'hour':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-23',\n            description: 'allowed values'\n          }\n        ]\n        break\n\n      case 'dayOfMonth':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '1-31',\n            description: 'allowed values'\n          }\n        ]\n        break\n\n      case 'month':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '1-12',\n            description: 'allowed values'\n          },\n          {\n            value: 'JAN-DEC',\n            description: 'alternative single values'\n          }\n        ]\n        break\n\n      case 'dayOfWeek':\n        this.tooltip = [\n          {\n            value: '*',\n            description: 'any value'\n          },\n          {\n            value: ',',\n            description: 'value list separator'\n          },\n          {\n            value: '-',\n            description: 'range of values'\n          },\n          {\n            value: '/',\n            description: 'step values'\n          },\n          {\n            value: '0-6',\n            description: 'allowed values'\n          },\n          {\n            value: 'SUN-SAT',\n            description: 'alternative single values'\n          }\n        ]\n        break\n\n      default:\n        this.tooltip = []\n        break\n    }\n  }\n\n  onChange() {\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-data.d.ts

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import './ox-input-code';
-import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field.js';
 /**
 WEB Component for code-mirror based data editor.
@@ -14,11 +13,11 @@ Example:
 */
 export declare class OxInputData extends OxFormField {
     static styles: import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
-    udpated(changes: PropertyValues<this>): void;
+    _setDataTypeAndValue(type: string | undefined | null, value: any): void;
     _setDataType(type: string | undefined | null): void;
     _clearData(): void;
-    _getData(data: any): any;
-    _onAfterValueChange(): void;
+    _getStringData(data: any): string;
+    _onAfterValueChange(): Promise<void>;
 }