@operato/input 1.0.0-beta.4 → 1.0.0-beta.43

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred  : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n    <ox-input-color .value=${color}>\n    </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input[type='text'] {\n      padding-right: 24px;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    a {\n      -webkit-appearance: none;\n      display: flex;\n      position: absolute;\n      width: 24px;\n      height: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      justify-content: center;\n    }\n\n    span {\n      width: 18px;\n      height: 100%;\n      max-height: 18px;\n      border-radius: 10%;\n      border: 1px solid #eee;\n    }\n\n    span.transparent {\n      background-color: #fefefe;\n      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n      background-position: 0 0, 9px 9px;\n      background-size: 18px 18px;\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n      />\n\n      <a @click=${(e: MouseEvent) => this.showPicker()}>\n        <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n      </a>\n    `\n  }\n\n  set colorString(colorString: string) {\n    var color = tinycolor(colorString, {})\n    var { withoutAlpha, valueType } = this.properties || {}\n\n    if (color.isValid()) {\n      if (valueType == 'hex' || withoutAlpha) {\n        this.value = color.toHexString(false)\n      } else this.value = color.toRgbString()\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _thumbnail() {\n    return tinycolor(this.value || 'transparent', {}).toRgbString()\n  }\n\n  _onInputChanged(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 외부에서 호출 가능한 메쏘드임.\n   */\n  showPicker() {\n    var { withoutAlpha } = this.properties || {}\n\n    var color = tinycolor(this.value, {})\n\n    var picker = document.createElement('paper-color-picker') as HTMLElement & {\n      shape: string\n      color: any\n      colorAsString: string\n      allowAlpha: boolean\n      alwaysShowAlpha: boolean\n      type: string\n      _initialAlphaValueHack: number\n      set: (name: string, value: number) => void\n      open: () => void\n    }\n\n    picker.shape = 'huebox'\n    picker.color = color\n    picker.colorAsString = color.toRgbString()\n    if (!withoutAlpha) {\n      picker.allowAlpha = true\n      picker.alwaysShowAlpha = true\n    }\n    picker.type = 'hsl'\n\n    if (color.isValid()) {\n      let rgb = color.toRgb() as { r: number; g: number; b: number }\n      let alpha = color.getAlpha()\n\n      picker._initialAlphaValueHack = alpha\n\n      picker.set('immediateColor.red', rgb.r)\n      picker.set('immediateColor.green', rgb.g)\n      picker.set('immediateColor.blue', rgb.b)\n\n      if (alpha != undefined) {\n        picker.set('immediateColor.alpha', alpha)\n      }\n    }\n\n    document.body.appendChild(picker)\n\n    var _ = (e: Event) => {\n      if (!(e as CustomEvent)?.detail?.confirmed) {\n        return\n      }\n\n      if (picker.colorAsString) {\n        this.colorString = picker.colorAsString\n      }\n\n      picker.removeEventListener('iron-overlay-closed', _)\n      picker.parentNode?.removeChild(picker)\n    }\n    picker.addEventListener('iron-overlay-closed', _)\n\n    setTimeout(() => picker.open())\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred  : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n    <ox-input-color .value=${color}>\n    </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input[type='text'] {\n      width: 100%;\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      padding-right: 35px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    a {\n      -webkit-appearance: none;\n      display: flex;\n      position: absolute;\n      width: 35px;\n      height: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      justify-content: center;\n    }\n\n    span {\n      width: 80%;\n      height: 60%;\n      border: var(--border-dark-color);\n      border-radius: var(--border-radius);\n    }\n\n    span.transparent {\n      background-color: #fefefe;\n      background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n        linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n      background-position: 0 0, 9px 9px;\n      background-size: 18px 18px;\n    }\n  `\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  render() {\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n      />\n\n      <a @click=${(e: MouseEvent) => this.showPicker()}>\n        <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n      </a>\n    `\n  }\n\n  set colorString(colorString: string) {\n    var color = tinycolor(colorString, {})\n    var { withoutAlpha, valueType } = this.properties || {}\n\n    if (color.isValid()) {\n      if (valueType == 'hex' || withoutAlpha) {\n        this.value = color.toHexString(false)\n      } else this.value = color.toRgbString()\n\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  _thumbnail() {\n    return tinycolor(this.value || 'transparent', {}).toRgbString()\n  }\n\n  _onInputChanged(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 외부에서 호출 가능한 메쏘드임.\n   */\n  showPicker() {\n    var { withoutAlpha } = this.properties || {}\n\n    var color = tinycolor(this.value, {})\n\n    var picker = document.createElement('paper-color-picker') as HTMLElement & {\n      shape: string\n      color: any\n      colorAsString: string\n      allowAlpha: boolean\n      alwaysShowAlpha: boolean\n      type: string\n      _initialAlphaValueHack: number\n      set: (name: string, value: number) => void\n      open: () => void\n    }\n\n    picker.shape = 'huebox'\n    picker.color = color\n    picker.colorAsString = color.toRgbString()\n    if (!withoutAlpha) {\n      picker.allowAlpha = true\n      picker.alwaysShowAlpha = true\n    }\n    picker.type = 'hsl'\n\n    if (color.isValid()) {\n      let rgb = color.toRgb() as { r: number; g: number; b: number }\n      let alpha = color.getAlpha()\n\n      picker._initialAlphaValueHack = alpha\n\n      picker.set('immediateColor.red', rgb.r)\n      picker.set('immediateColor.green', rgb.g)\n      picker.set('immediateColor.blue', rgb.b)\n\n      if (alpha != undefined) {\n        picker.set('immediateColor.alpha', alpha)\n      }\n    }\n\n    document.body.appendChild(picker)\n\n    var _ = (e: Event) => {\n      if (!(e as CustomEvent)?.detail?.confirmed) {\n        return\n      }\n\n      if (picker.colorAsString) {\n        this.colorString = picker.colorAsString\n      }\n\n      picker.removeEventListener('iron-overlay-closed', _)\n      picker.parentNode?.removeChild(picker)\n    }\n    picker.addEventListener('iron-overlay-closed', _)\n\n    setTimeout(() => picker.open())\n  }\n}\n"]}

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

@@ -79,7 +79,6 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
       width: 100%;
       height: 100%;
       border: 0;
-      background-color: var(--main-section-background-color);
     }
 
     :host * {
@@ -113,32 +112,36 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
       grid-column: 4 / span 3;
       width: 100%;
       height: 100%;
-      font: normal 0.9em var(--theme-font);
+      padding: var(--input-padding);
+      border: 0;
+      border-bottom: var(--border-dark-color);
       text-transform: capitalize;
-      border-radius: var(--border-radius);
-      border: var(--border-dark-color);
+      font: var(--label-font);
+      color: var(--label-color);
     }
 
     input {
       width: 100%;
       margin-top: var(--margin-default);
       padding: 5px;
-      border-radius: var(--border-radius);
-      border: var(--border-dark-color);
-      font: normal 1em var(--theme-font);
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
     }
     input:focus {
-      border: 1px solid var(--primary-color);
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     input:invalid {
-      border: 1px solid var(--status-danger-color);
+      border-bottom: 1px solid var(--status-danger-color);
       color: var(--status-danger-color);
     }
 
     label {
       width: 100%;
-      height: 100%;
       font: normal 0.8em var(--theme-font);
       color: var(--primary-color);
     }
@@ -352,6 +355,21 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
               <div class="crontab-description">${i18next.t(`text.${tip.description}`)}</div>
             `)}
         </div>
+        <button
+          id="clear"
+          @click=${(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.value = '';
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        }}
+        >
+          Clear
+        </button>
       </form>
     `;
     }

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":";AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,SAAS,eAAe,CAAC,IAA4D;IACnF,yDAAyD;IACzD,IAAI,YAAY,GAAG,EAAS,CAAA;IAC5B,YAAY,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA;IACjC,YAAY,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA;IACjC,YAAY,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACxC,YAAY,CAAC,KAAK,CAAC,GAAG,uBAAuB,CAAA;IAC7C,YAAY,CAAC,OAAO,CAAC,GAAG,cAAc,CAAA;IACtC,YAAY,CAAC,WAAW,CAAC,GAAG,OAAO,CAAA;IAEnC,IAAI,aAAa,GAAG,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,CAAC,IAAI;QAAE,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAA;IAE9E,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC5B,IAAI,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;QAChC,IAAI,KAAK,GACP,KAAK;YACL,MAAM;YACN,GAAG;YACH,KAAK;YACL,UAAU;YACV,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACnC,GAAG;YACH,KAAK;YACL,MAAM;YACN,GAAG;YACH,IAAI,CAAA;QACN,IAAI,KAAK,KAAK,WAAW;YAAE,KAAK,IAAI,QAAQ,CAAA;QAC5C,IAAI,KAAK,KAAK,OAAO;YAAE,KAAK,IAAI,UAAU,CAAA;QAC1C,YAAY,CAAC,KAAK,CAAC,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAA;IAClE,CAAC,CAAC,CAAA;IAEF,IAAI,WAAW,GAAG,iDAAiD,CAAA;IACnE,IAAI,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,cAAc,GAAG,WAAW,GAAG,KAAK,CAAA;IAC3E,YAAY,CAAC,OAAO,CAAC,IAAI,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAA;IAE9E,IAAI,eAAe,GAAG,6BAA6B,CAAA;IACnD,IAAI,cAAc,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,GAAG,KAAK,CAAA;IACvF,YAAY,CAAC,WAAW,CAAC,IAAI,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;IAE1F,IAAI,CAAC,IAAI;QACP,OAAO,CACL,SAAS;YACT,IAAI;YACJ,YAAY;YACZ,GAAG;YACH,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,MAAM,CAAC;YACpB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,OAAO,CAAC;YACrB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,WAAW,CAAC;YACzB,UAAU;YACV,IAAI,CACL,CAAA;;QACE,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAA;AACvC,CAAC;AAGD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;IAA/C;;QAmJW,YAAO,GAA6C,EAAE,CAAA;IA8UjE,CAAC;aAheQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwIlB,CAAA;IAYD,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;oBAGtC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;mBACzE,IAAI,CAAC,KAAK;;6BAEA,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;0CACtB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;4CAC5B,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;6CAChC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;6CAClC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;6BAElD,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;0CACtB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;4CAC5B,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;6CAChC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;6CAClC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;6BAEjD,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;0CACZ,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;4CAC1B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;6CAC9B,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;8CAC/B,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC;;6BAEjE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;0CACX,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;6BAExC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;4CACV,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;0CAChC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;4CAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;6BAE9C,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;0CACb,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC;4CAC5C,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;;6BAEtD,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;0CACZ,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;4CAC3C,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;;;;;;;;uBAStD,IAAI,CAAC,MAAM,IAAI,EAAE;uBACjB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACzE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;uDAGS,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;;;uBAOzD,IAAI,CAAC,MAAM,IAAI,EAAE;uBACjB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACzE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;uDAGS,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;;;uBAOzD,IAAI,CAAC,IAAI,IAAI,EAAE;uBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACvE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAC1B,CAAC;wBACS,eAAe,CAAC,MAAM,CAAC;;;mDAGI,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;;;;;;uBAOnD,IAAI,CAAC,UAAU,IAAI,EAAE;uBACrB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBAC7E,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAA;QAChC,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;mEAGqB,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;;;;;;uBAO3E,IAAI,CAAC,KAAK,IAAI,EAAE;uBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACxE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC;wBACS,eAAe,CAAC,OAAO,CAAC;;;qDAGK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;;;uBAOtD,IAAI,CAAC,SAAS,IAAI,EAAE;uBACpB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBAC5E,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QAC/B,CAAC;wBACS,eAAe,CAAC,WAAW,CAAC;;;iEAGa,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;YAInF,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;2CACoB,GAAG,CAAC,KAAK;iDACH,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,WAAW,EAAE,CAAC;aACxE,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,CAAC;QAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAsB,CAAC,KAAK,EAAE,CAAA;QACrE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE1C,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;iBAC1D,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAE1D,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACvB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;SAC3B;IACH,CAAC;IAED,WAAW,CAAC,IAAyE;QACnF,QAAQ,IAAI,EAAE;YACZ,KAAK,QAAQ,CAAC;YACd,KAAK,QAAQ;gBACX,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YACP,KAAK,MAAM;gBACT,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,YAAY;gBACf,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,OAAO;gBACV,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,2BAA2B;qBACzC;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,WAAW;gBACd,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,KAAK;wBACZ,WAAW,EAAE,gBAAgB;qBAC9B;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,2BAA2B;qBACzC;iBACF,CAAA;gBACD,MAAK;YAEP;gBACE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBACjB,MAAK;SACR;IACH,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACnE,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QAChC,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,cAAc,EAAE,CAAA;YACrB,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,CAAA;QAE5G,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAtV6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAErC;IAAR,KAAK,EAAE;+CAAuD;AAnJpD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAie1B;SAjeY,cAAc","sourcesContent":["import '@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      background-color: var(--main-section-background-color);\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      font: normal 0.9em var(--theme-font);\n      text-transform: capitalize;\n      border-radius: var(--border-radius);\n      border: var(--border-dark-color);\n    }\n\n    input {\n      width: 100%;\n      margin-top: var(--margin-default);\n      padding: 5px;\n      border-radius: var(--border-radius);\n      border: var(--border-dark-color);\n      font: normal 1em var(--theme-font);\n    }\n    input:focus {\n      border: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      height: 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=\"${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=\"${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=\"${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=\"${i18next.t('label.daily')}\">\n            <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n          </optgroup>\n          <optgroup label=\"${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=\"${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=\"${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      </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":["import '@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=\"${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=\"${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=\"${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=\"${i18next.t('label.daily')}\">\n            <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n          </optgroup>\n          <optgroup label=\"${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=\"${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=\"${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"]}

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

@@ -0,0 +1,13 @@
+import '@material/mwc-button';
+import { OxFormField } from './ox-form-field';
+export declare class OxInputDuration extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    days: HTMLInputElement;
+    hours: HTMLInputElement;
+    minutes: HTMLInputElement;
+    seconds: HTMLInputElement;
+    onChange(e: Event): void;
+}

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

@@ -0,0 +1,163 @@
+import { __decorate } from "tslib";
+import '@material/mwc-button';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { OxFormField } from './ox-form-field';
+let OxInputDuration = class OxInputDuration extends OxFormField {
+    static { this.styles = css `
+    :host {
+      text-align: center;
+      padding: 10px;
+    }
+
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host *:focus {
+      outline: none;
+    }
+
+    form {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+    }
+
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      padding-right: 0;
+      max-width: 70px;
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      text-align: right;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input:invalid {
+      border-bottom: 1px solid var(--status-danger-color);
+      color: var(--status-danger-color);
+    }
+
+    label {
+      width: 100%;
+      margin-right: var(--margin-default);
+      font: normal 0.8em var(--theme-font);
+      color: var(--primary-color);
+    }
+
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      min-height: 35px;
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
+    }
+  `; }
+    render() {
+        var d = Number(this.value || 0);
+        const days = Math.floor(d / (3600 * 24));
+        d -= days * 24 * 3600;
+        const hours = Math.floor(d / 3600);
+        d -= hours * 3600;
+        const minutes = Math.floor(d / 60);
+        const seconds = d - minutes * 60;
+        return html `
+      <form @change=${this.onChange.bind(this)}>
+        <input id="days" type="number" .value=${days} pattern="\\d*" />
+        <label for="days">${i18next.t('label.days')}</label>
+
+        <input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
+        <label for="hour">${i18next.t('label.hours')}</label>
+
+        <input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
+        <label for="minute">${i18next.t('label.minutes')}</label>
+
+        <input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
+        <label for="second">${i18next.t('label.seconds')}</label>
+
+        <button
+          type="button"
+          @click=${(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.value = 0;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        }}
+        >
+          <mwc-icon>backspace</mwc-icon>
+        </button>
+      </form>
+    `;
+    }
+    firstUpdated() {
+        ;
+        this.renderRoot.querySelector('input').focus();
+    }
+    onChange(e) {
+        e.stopPropagation();
+        var form = this.renderRoot.querySelector('form');
+        var valid = form.checkValidity();
+        if (!valid) {
+            form.reportValidity();
+            return;
+        }
+        const days = Number(this.days.value);
+        const hours = Number(this.hours.value);
+        const minutes = Number(this.minutes.value);
+        const seconds = Number(this.seconds.value);
+        this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    property({ type: Number })
+], OxInputDuration.prototype, "value", void 0);
+__decorate([
+    query('#days')
+], OxInputDuration.prototype, "days", void 0);
+__decorate([
+    query('#hours')
+], OxInputDuration.prototype, "hours", void 0);
+__decorate([
+    query('#minutes')
+], OxInputDuration.prototype, "minutes", void 0);
+__decorate([
+    query('#seconds')
+], OxInputDuration.prototype, "seconds", void 0);
+OxInputDuration = __decorate([
+    customElement('ox-input-duration')
+], OxInputDuration);
+export { OxInputDuration };
+//# sourceMappingURL=ox-input-duration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n      justify-content: center;\n    }\n\n    input {\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      text-align: right;\n    }\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      margin-right: var(--margin-default);\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      min-height: 35px;\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n  `\n\n  @property({ type: Number }) declare value?: number\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <input id=\"days\" type=\"number\" .value=${days} pattern=\"\\\\d*\" />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input id=\"hours\" type=\"number\" .value=${hours} pattern=\"[01]?\\\\d|2[0-3]\" />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input id=\"minutes\" type=\"number\" .value=${minutes} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input id=\"seconds\" type=\"number\" .value=${seconds} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n        >\n          <mwc-icon>backspace</mwc-icon>\n        </button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\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    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\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-file.js

@@ -2,12 +2,14 @@ import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
 import { FileDropHelper } from '@operato/utils';
 import { OxFormField } from './ox-form-field.js';
-import { ScrollbarStyles } from '@operato/styles';
 let OxInputFile = class OxInputFile extends OxFormField {
     constructor() {
         super(...arguments);
+        this.icon = 'upload';
+        this.description = 'drop files here!';
         this.hideFileList = false;
         this.attachFileList = false;
     }
@@ -87,9 +89,9 @@ let OxInputFile = class OxInputFile extends OxFormField {
     render() {
         var files = this.value || [];
         return html `
-      <mwc-icon>upload</mwc-icon>
+      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
 
-      <span>drop files here!</span>
+      <span>${this.description || 'drop files here!'}</span>
 
       <input
         id="input-file"

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\nimport { OxFormField } from './ox-form-field.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>upload</mwc-icon>\n\n      <span>drop files here!</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\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-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        align-items: center;\n        justify-content: center;\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n        --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: rgba(var(--primary-color-rgb), 0.1);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font: normal 14px var(--theme-font);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        margin: var(--file-uploader-li-icon-margin);\n        font-size: 1em;\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string = 'upload'\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string = 'drop files here!'\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <mwc-icon>${this.icon || 'upload'}</mwc-icon>\n\n      <span>${this.description || 'drop files here!'}</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\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-key-values.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import { OxFormField } from './ox-form-field';
+declare type KeyValues = {
+    [key: string]: any;
+};
+declare type ArrayedKeyValues = {
+    key: string;
+    value: any;
+};
+/**
+ input component for key-value map
+ 
+ Example:
+ 
+   <ox-input-key-values
+     value=${map}
+   </ox-input-key-values>
+ */
+export declare class OxInputKeyValues extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value: KeyValues;
+    options: {
+        display: string;
+        value: string;
+    }[];
+    private _changingNow;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onChange(e: Event): void;
+    _build(includeNewRecord?: boolean): void;
+    _toArray(map: KeyValues): ArrayedKeyValues[];
+    _add(): void;
+    _delete(e: MouseEvent): void;
+    records: NodeListOf<HTMLElement>;
+    _up(e: MouseEvent): void;
+    _down(e: MouseEvent): void;
+}
+export {};