@operato/input 10.0.0 → 10.1.0

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 { 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.js'\n\nimport '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\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      position: relative;\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-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-transform: capitalize;\n    }\n\n    #example {\n      grid-column: 4 / span 3;\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0 var(--spacing-small);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      background-color: var(--md-sys-color-on-primary);\n      text-transform: capitalize;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0 var(--spacing-small);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      background-color: var(--md-sys-color-on-primary);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-color: var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\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: var(--spacing-small);\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: var(--md-sys-color-on-surface-variant) 1px dashed;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    #tooltip > .crontab-value {\n      text-align: right;\n      color: var(--md-sys-color-surface-tint);\n    }\n\n    #tooltip > .crontab-description {\n      text-align: left;\n      color: var (--md-sys-color-on-primary-container);\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    md-fab {\n      margin: 0.25rem;\n      position: absolute;\n      bottom: 1rem;\n      left: 1rem;\n      color: var(--md-sys-color-on-primary);\n    }\n\n    md-icon {\n      font-size: 24px;\n    }\n  `\n\n  @property({ type: String }) value?: string = undefined\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        <div id=\"button-wrapper\">\n          <md-fab\n            title=\"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            <md-icon slot=\"icon\">delete</md-icon>\n          </md-fab>\n        </div>\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"]}
+{"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.js'\nimport { InputStyles } from './input-styles.js'\n\nimport '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\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 = [InputStyles, css`\n    :host {\n      position: relative;\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-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-transform: capitalize;\n    }\n\n    #example {\n      grid-column: 4 / span 3;\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0 var(--ox-input-gap);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      background-color: var(--md-sys-color-on-primary);\n      text-transform: capitalize;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0 var(--ox-input-gap);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      background-color: var(--md-sys-color-on-primary);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-color: var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\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: var(--ox-input-gap);\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: var(--md-sys-color-on-surface-variant) 1px dashed;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    #tooltip > .crontab-value {\n      text-align: right;\n      color: var(--md-sys-color-surface-tint);\n    }\n\n    #tooltip > .crontab-description {\n      text-align: left;\n      color: var (--md-sys-color-on-primary-container);\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    md-fab {\n      margin: 0.25rem;\n      position: absolute;\n      bottom: 1rem;\n      left: 1rem;\n      color: var(--md-sys-color-on-primary);\n    }\n\n    md-icon {\n      font-size: 24px;\n    }\n  `]\n\n  @property({ type: String }) value?: string = undefined\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        <div id=\"button-wrapper\">\n          <md-fab\n            title=\"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            <md-icon slot=\"icon\">delete</md-icon>\n          </md-fab>\n        </div>\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.js

@@ -4,6 +4,7 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 import { isEqual } from 'lodash-es';
 import 'ses';
 /**
@@ -20,6 +21,7 @@ let OxInputData = class OxInputData extends OxFormField {
         this.fullWidth = false;
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: flex;
@@ -30,8 +32,8 @@ let OxInputData = class OxInputData extends OxFormField {
       div.datatype {
         display: flex;
         align-items: center;
-        margin-bottom: var(--spacing-small);
-        padding: var(--spacing-small);
+        margin-bottom: var(--ox-input-gap);
+        padding: var(--ox-input-gap);
         background-color: var(--md-sys-color-primary-container);
         border: 1px solid var(--md-sys-color-primary-fixed-dim);
         border-radius: var(--md-sys-shape-corner-small);
@@ -45,7 +47,7 @@ let OxInputData = class OxInputData extends OxFormField {
         cursor: pointer;
       }
       div.datatype label {
-        margin-right: var(--spacing-small);
+        margin-right: var(--ox-input-gap);
       }
 
       ox-input-code {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-input-code.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\nimport 'ses'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div.datatype {\n        display: flex;\n        align-items: center;\n        margin-bottom: var(--spacing-small);\n        padding: var(--spacing-small);\n        background-color: var(--md-sys-color-primary-container);\n        border: 1px solid var(--md-sys-color-primary-fixed-dim);\n        border-radius: var(--md-sys-shape-corner-small);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      div.datatype md-icon {\n        margin-left: auto;\n        color: var(--md-sys-color-primary);\n        cursor: pointer;\n      }\n      div.datatype label {\n        margin-right: var(--spacing-small);\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n\n      ox-input-code[full-width] {\n        max-width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'full-width' }) fullWidth: boolean = false\n\n  render() {\n    const valueType = typeof this.value\n\n    return html`\n      <div class=\"datatype\">\n        <input\n          id=\"string\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${live(valueType == 'string')}\n          @click=${() => this._setDataType('string')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"string\">string</label>\n\n        <input\n          id=\"number\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${live(valueType == 'number')}\n          @click=${() => this._setDataType('number')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"number\">number</label>\n\n        <input\n          id=\"object\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${live(valueType == 'object')}\n          @click=${() => this._setDataType('object')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"object\">object</label>\n\n        <md-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</md-icon>\n      </div>\n\n      <ox-input-code\n        .value=${this._getStringData(this.value)}\n        language=\"text\"\n        editor\n        ?full-width=${this.fullWidth}\n        ?disabled=${this.disabled}\n        @change=${(e: CustomEvent) => {\n          e.stopPropagation()\n          this._setDataTypeAndValue(valueType, (e.target as any).value)\n        }}\n      >\n      </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        if (this.value === undefined && target.value == '') {\n          return\n        }\n        this.value = target.value\n      }\n    })\n  }\n\n  _setDataTypeAndValue(type: string | undefined | null, value: any) {\n    /* value must be a string */\n    try {\n      switch (type) {\n        case 'number':\n          if (!isNaN(Number(value))) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          const compartment = new Compartment()\n          value = compartment.evaluate(`(${value})`)\n          break\n      }\n    } catch (e) {\n      console.error('Error parsing value:', e)\n    }\n\n    if (isEqual(this.value, value)) {\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value == type) {\n      return\n    }\n\n    var value = this.value\n\n    try {\n      switch (type) {\n        case 'string':\n          value = this._getStringData(value)\n          break\n        case 'number':\n          if (!isNaN(value)) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          const compartment = new Compartment()\n          value = compartment.evaluate(`(${value})`)\n          break\n      }\n    } catch (e) {\n      console.error('Error setting data type:', e)\n    }\n\n    if (isEqual(this.value, value)) {\n      this.requestUpdate()\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getStringData(data: any) {\n    const type = typeof data\n\n    switch (type) {\n      case 'object':\n        return JSON.stringify(data, null, 1)\n      case 'undefined':\n        return ''\n      default:\n        return String(data) || ''\n    }\n  }\n\n  async _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-input-code.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\nimport 'ses'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n  <ox-input-data value=${text}>\n  </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      div.datatype {\n        display: flex;\n        align-items: center;\n        margin-bottom: var(--ox-input-gap);\n        padding: var(--ox-input-gap);\n        background-color: var(--md-sys-color-primary-container);\n        border: 1px solid var(--md-sys-color-primary-fixed-dim);\n        border-radius: var(--md-sys-shape-corner-small);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      div.datatype md-icon {\n        margin-left: auto;\n        color: var(--md-sys-color-primary);\n        cursor: pointer;\n      }\n      div.datatype label {\n        margin-right: var(--ox-input-gap);\n      }\n\n      ox-input-code {\n        flex: 1;\n        max-width: 260px;\n        overflow: auto;\n      }\n\n      ox-input-code[full-width] {\n        max-width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'full-width' }) fullWidth: boolean = false\n\n  render() {\n    const valueType = typeof this.value\n\n    return html`\n      <div class=\"datatype\">\n        <input\n          id=\"string\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"string\"\n          .checked=${live(valueType == 'string')}\n          @click=${() => this._setDataType('string')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"string\">string</label>\n\n        <input\n          id=\"number\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"number\"\n          .checked=${live(valueType == 'number')}\n          @click=${() => this._setDataType('number')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"number\">number</label>\n\n        <input\n          id=\"object\"\n          type=\"radio\"\n          name=\"data-type\"\n          data-value=\"object\"\n          .checked=${live(valueType == 'object')}\n          @click=${() => this._setDataType('object')}\n          ?disabled=${this.disabled}\n        />\n        <label for=\"object\">object</label>\n\n        <md-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</md-icon>\n      </div>\n\n      <ox-input-code\n        .value=${this._getStringData(this.value)}\n        language=\"text\"\n        editor\n        ?full-width=${this.fullWidth}\n        ?disabled=${this.disabled}\n        @change=${(e: CustomEvent) => {\n          e.stopPropagation()\n          this._setDataTypeAndValue(valueType, (e.target as any).value)\n        }}\n      >\n      </ox-input-code>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => {\n      e.stopPropagation()\n\n      const target = e.target as OxInputCode\n      if (target.hasAttribute('editor')) {\n        if (this.value === undefined && target.value == '') {\n          return\n        }\n        this.value = target.value\n      }\n    })\n  }\n\n  _setDataTypeAndValue(type: string | undefined | null, value: any) {\n    /* value must be a string */\n    try {\n      switch (type) {\n        case 'number':\n          if (!isNaN(Number(value))) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          const compartment = new Compartment()\n          value = compartment.evaluate(`(${value})`)\n          break\n      }\n    } catch (e) {\n      console.error('Error parsing value:', e)\n    }\n\n    if (isEqual(this.value, value)) {\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _setDataType(type: string | undefined | null) {\n    if (typeof this.value == type) {\n      return\n    }\n\n    var value = this.value\n\n    try {\n      switch (type) {\n        case 'string':\n          value = this._getStringData(value)\n          break\n        case 'number':\n          if (!isNaN(value)) {\n            value = Number(value)\n          }\n          break\n        case 'object':\n          const compartment = new Compartment()\n          value = compartment.evaluate(`(${value})`)\n          break\n      }\n    } catch (e) {\n      console.error('Error setting data type:', e)\n    }\n\n    if (isEqual(this.value, value)) {\n      this.requestUpdate()\n      return\n    }\n\n    this.value = value\n\n    this.requestUpdate()\n    this._onAfterValueChange()\n  }\n\n  _clearData() {\n    this.value = undefined\n    this._onAfterValueChange()\n  }\n\n  _getStringData(data: any) {\n    const type = typeof data\n\n    switch (type) {\n      case 'object':\n        return JSON.stringify(data, null, 1)\n      case 'undefined':\n        return ''\n      default:\n        return String(data) || ''\n    }\n  }\n\n  async _onAfterValueChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
  */
 import { OxFormField } from './ox-form-field.js';
 export declare class OxInputDuration extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value?: number;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;

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

@@ -6,12 +6,13 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputDuration = class OxInputDuration extends OxFormField {
     constructor() {
         super(...arguments);
         this.value = undefined;
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       text-align: center;
       padding: 10px;
@@ -40,7 +41,7 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
 
     input {
       box-sizing: border-box;
-      padding: 0 var(--spacing-small);
+      padding: 0 var(--ox-input-gap);
       height: var(--form-element-height-medium);
       border: 1px solid var(--md-sys-color-outline);
       border-radius: var(--md-sys-shape-corner-small);
@@ -62,11 +63,11 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
 
     label {
       width: 100%;
-      margin-right: var(--spacing-medium);
+      margin-right: calc(var(--ox-input-gap) * 2);
       font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       color: var(--md-sys-color-on-primary-container);
     }
-  `; }
+  `]; }
     render() {
         var d = Number(this.value || 0);
         const days = Math.floor(d / (3600 * 24));

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\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.js'\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      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      box-sizing: border-box;\n      padding: 0 var(--spacing-small);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: var(--spacing-medium);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Number }) value?: number = undefined\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        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-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          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\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"]}
+{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,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,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGxC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QA0DuB,UAAK,GAAY,SAAS,CAAA;IAwGxD,CAAC;aAjKQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDhC,CAAC,AAvDW,CAuDX;IAIF,MAAM;QACJ,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAA;QAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;QACxC,CAAC,IAAI,IAAI,GAAG,EAAE,GAAG,IAAI,CAAA;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;QAClC,CAAC,IAAI,KAAK,GAAG,IAAI,CAAA;QACjB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAA;QAClC,MAAM,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;sBACO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;gDAEE,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,6BAA6B,IAAI,CAAC,QAAQ;4BAC/E,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;;;;mBAKhC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC;;sBAEf,IAAI,CAAC,QAAQ;;4BAEP,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;mBAKjC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC;;sBAEjB,IAAI,CAAC,QAAQ;;8BAEL,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;;;;mBAKrC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC;;sBAEjB,IAAI,CAAC,QAAQ;;8BAEL,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;;;mBAIrC,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;YAEd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC;sBACW,IAAI,CAAC,QAAQ;;;;;;KAM9B,CAAA;IACH,CAAC;IAED,YAAY;QACV,CAAC;QAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAsB,CAAC,KAAK,EAAE,CAAA;IACvE,CAAC;IAOD,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,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,CAAC;YACX,IAAI,CAAC,cAAc,EAAE,CAAA;YACrB,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAE1C,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;QAEvG,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;;AAvG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA2B;AA0EtC;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAwB;AACtB;IAAhB,KAAK,CAAC,QAAQ,CAAC;8CAAyB;AACtB;IAAlB,KAAK,CAAC,UAAU,CAAC;gDAA2B;AAC1B;IAAlB,KAAK,CAAC,UAAU,CAAC;gDAA2B;AAvIlC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkK3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\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.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      text-align: center;\n      padding: 10px;\n      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      box-sizing: border-box;\n      padding: 0 var(--ox-input-gap);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Number }) value?: number = undefined\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        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-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          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\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

@@ -8,6 +8,7 @@ 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 { InputStyles } from './input-styles.js';
 let OxInputFile = class OxInputFile extends OxFormField {
     constructor() {
         super(...arguments);
@@ -17,6 +18,7 @@ let OxInputFile = class OxInputFile extends OxFormField {
         this.attachFileList = false;
     }
     static { this.styles = [
+        InputStyles,
         ScrollbarStyles,
         css `
       :host {
@@ -25,7 +27,7 @@ let OxInputFile = class OxInputFile extends OxFormField {
         border-radius: var(--md-sys-shape-corner-small);
         align-items: center;
         justify-content: center;
-        padding: var(--padding-default, 9px);
+        padding: calc(var(--ox-input-gap) * 2);
         min-height: 100px;
         text-transform: capitalize;
 

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":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\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(--md-sys-shape-corner-small);\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: 1px dashed var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n      :host > span {\n        color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      :host > md-icon {\n        color: var(--md-sys-color-primary);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--md-sys-color-primary-fixed);\n        border: 1px dashed var(--md-sys-color-primary-fixed-dim);\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        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-surface-variant);\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: var(--md-sys-color-on-primary);\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-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        display: flex;\n        align-items: center;\n      }\n      li md-icon {\n        cursor: pointer;\n        font-size: var(--icon-size-small);\n        margin-left: auto;\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--md-sys-color-error);\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      <md-icon>${this.icon || 'upload'}</md-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        ?disabled=${this.disabled}\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                  <md-icon\n                    @click=${(e: Event) => {\n                      if (this.disabled) {\n                        return\n                      }\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</md-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      if (this.disabled) {\n        return\n      }\n\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":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAoFuB,SAAI,GAAY,QAAQ,CAAA;QAExB,gBAAW,GAAY,kBAAkB,CAAA;QAErE,iBAAY,GAAY,KAAK,CAAA;QAE7B,mBAAc,GAAY,KAAK,CAAA;IAwGjC,CAAC;aAjMQ,WAAM,GAAG;QACd,WAAW;QACX,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;KACF,AA/EY,CA+EZ;IAcD,MAAM;QACJ,IAAI,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,IAAI,QAAQ;;cAExB,IAAI,CAAC,WAAW,IAAI,kBAAkB;;;;;iBAKnC,IAAI,CAAC,MAAM;oBACR,IAAI,CAAC,QAAQ;;;kBAGf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;;gCAGD,IAAI,CAAC,KAAK,IAAI,cAAc;;QAEpD,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,EAAE,MAAM;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;sBAEJ,IAAI,CAAC,IAAI;;6BAEF,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAM;gBACR,CAAC;gBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;gBACpC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;gBACvB,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;;;;eAIN,CACF;gBACG;YACR,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3D,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAM;YACR,CAAC;YAED,MAAM,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YAElE,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QAEf,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc;YAC9B,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAA;QAEhD,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;QAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,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;;AA/G4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA0C;AAErE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAC1C;AAE7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mDAC1C;AAET;IAArB,KAAK,CAAC,aAAa,CAAC;8CAA6B;AA5FvC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkMvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\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'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--md-sys-shape-corner-small);\n        align-items: center;\n        justify-content: center;\n        padding: calc(var(--ox-input-gap) * 2);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: 1px dashed var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n      :host > span {\n        color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      :host > md-icon {\n        color: var(--md-sys-color-primary);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--md-sys-color-primary-fixed);\n        border: 1px dashed var(--md-sys-color-primary-fixed-dim);\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        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-surface-variant);\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: var(--md-sys-color-on-primary);\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-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        display: flex;\n        align-items: center;\n      }\n      li md-icon {\n        cursor: pointer;\n        font-size: var(--icon-size-small);\n        margin-left: auto;\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--md-sys-color-error);\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      <md-icon>${this.icon || 'upload'}</md-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        ?disabled=${this.disabled}\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                  <md-icon\n                    @click=${(e: Event) => {\n                      if (this.disabled) {\n                        return\n                      }\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</md-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      if (this.disabled) {\n        return\n      }\n\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-formula-help-popup.js

@@ -1,10 +1,12 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
+import { InputStyles } from './input-styles.js';
 import { customElement, property } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
     static { this.styles = [
+        InputStyles,
         ScrollbarStyles,
         css `
       :host {
@@ -15,8 +17,8 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
         max-width: 500px;
         max-height: 400px;
         overflow-y: auto;
-        background: white;
-        border-radius: 8px;
+        background: var(--ox-input-background);
+        border-radius: var(--ox-input-radius);
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
       }
 
@@ -24,9 +26,9 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 16px;
-        color: #1976d2;
+        color: var(--ox-input-focus-color);
         padding: 20px 20px 16px 20px;
-        background: #f8f9fa;
+        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border-bottom: 1px solid #e0e0e0;
         border-radius: 8px 8px 0 0;
       }
@@ -42,49 +44,49 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
       .help-section-title {
         font-weight: 600;
         margin-bottom: 8px;
-        color: #333;
-        font-size: 14px;
+        color: var(--ox-input-color);
+        font-size: var(--ox-input-font-size);
         border-bottom: 1px solid #e0e0e0;
         padding-bottom: 4px;
       }
 
       .help-section-content {
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         line-height: 1.6;
-        color: #555;
+        color: var(--ox-input-placeholder-color);
         padding: 4px 0;
       }
 
       .help-code {
-        background: #f5f5f5;
+        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border: 1px solid #e0e0e0;
-        border-radius: 4px;
+        border-radius: var(--ox-input-radius);
         padding: 12px;
         font-family: 'Courier New', monospace;
-        font-size: 13px;
-        color: #333;
+        font-size: var(--ox-input-font-size-small);
+        color: var(--ox-input-color);
         margin: 8px 0;
       }
 
       .help-example {
-        background: #f0f8ff;
+        background: var(--md-sys-color-secondary-container);
         border: 1px solid #c8e6c9;
-        border-radius: 4px;
+        border-radius: var(--ox-input-radius);
         padding: 12px;
         font-family: 'Courier New', monospace;
-        font-size: 13px;
-        color: #2e7d32;
+        font-size: var(--ox-input-font-size-small);
+        color: var(--md-sys-color-on-tertiary-container);
         margin: 8px 0;
       }
 
       .help-parameter {
-        background: #f8f9fa;
+        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border-left: 3px solid #1976d2;
-        border-radius: 4px;
+        border-radius: var(--ox-input-radius);
         padding: 8px 12px;
         margin-bottom: 4px;
-        font-size: 13px;
-        color: #555;
+        font-size: var(--ox-input-font-size-small);
+        color: var(--ox-input-placeholder-color);
       }
 
       .help-footer {
@@ -92,25 +94,25 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
         justify-content: flex-end;
         padding: 16px 20px;
         border-top: 1px solid #e0e0e0;
-        background: #f8f9fa;
+        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
         border-radius: 0 0 8px 8px;
       }
 
       .close-btn {
         padding: 8px 16px;
         border: 1px solid #1976d2;
-        border-radius: 4px;
-        background-color: #1976d2;
-        color: white;
+        border-radius: var(--ox-input-radius);
+        background-color: var(--ox-input-focus-color);
+        color: var(--md-sys-color-on-primary);
         cursor: pointer;
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         font-weight: 500;
-        transition: all 0.2s ease;
+        transition: var(--ox-input-transition);
       }
 
       .close-btn:hover {
-        background-color: #1565c0;
-        border-color: #1565c0;
+        background-color: var(--ox-input-focus-color);
+        border-color: var(--ox-input-focus-color);
       }
     `
     ]; }

package/dist/src/ox-input-formula-help-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-formula-help-popup.js","sourceRoot":"","sources":["../../src/ox-input-formula-help-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAY1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;aAC9C,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;KACF,AA7GY,CA6GZ;IAKD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;kCAEmB,IAAI,CAAC,OAAO,CAAC,KAAK;;;YAGxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;kDAEuB,OAAO,CAAC,KAAK;kBAC7C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;aAExC,CACF;;;;6CAIkC,IAAI,CAAC,QAAQ;;;KAGrD,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,OAAY;QACxC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,0BAA0B,OAAO,CAAC,OAAO,QAAQ,CAAA;YAC9D,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACnE,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA,6BAA6B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACjE;gBACE,OAAO,IAAI,CAAA,qCAAqC,OAAO,CAAC,OAAO,QAAQ,CAAA;QAC3E,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;IAClB,CAAC;;AA7C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqB;AAjHrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA8JnC","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport type HelpContent = {\n  title: string\n  sections: Array<{\n    title: string\n    content: string\n    type?: 'text' | 'code' | 'parameter' | 'example'\n  }>\n}\n\n@customElement('ox-input-formula-help-popup')\nexport class OxInputFormulaHelpPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .help-popup {\n        max-width: 500px;\n        max-height: 400px;\n        overflow-y: auto;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .help-title {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: #1976d2;\n        padding: 20px 20px 16px 20px;\n        background: #f8f9fa;\n        border-bottom: 1px solid #e0e0e0;\n        border-radius: 8px 8px 0 0;\n      }\n\n      .help-content {\n        padding: 0 20px;\n      }\n\n      .help-section {\n        margin-bottom: 16px;\n      }\n\n      .help-section-title {\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: #333;\n        font-size: 14px;\n        border-bottom: 1px solid #e0e0e0;\n        padding-bottom: 4px;\n      }\n\n      .help-section-content {\n        font-size: 14px;\n        line-height: 1.6;\n        color: #555;\n        padding: 4px 0;\n      }\n\n      .help-code {\n        background: #f5f5f5;\n        border: 1px solid #e0e0e0;\n        border-radius: 4px;\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        color: #333;\n        margin: 8px 0;\n      }\n\n      .help-example {\n        background: #f0f8ff;\n        border: 1px solid #c8e6c9;\n        border-radius: 4px;\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        color: #2e7d32;\n        margin: 8px 0;\n      }\n\n      .help-parameter {\n        background: #f8f9fa;\n        border-left: 3px solid #1976d2;\n        border-radius: 4px;\n        padding: 8px 12px;\n        margin-bottom: 4px;\n        font-size: 13px;\n        color: #555;\n      }\n\n      .help-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 16px 20px;\n        border-top: 1px solid #e0e0e0;\n        background: #f8f9fa;\n        border-radius: 0 0 8px 8px;\n      }\n\n      .close-btn {\n        padding: 8px 16px;\n        border: 1px solid #1976d2;\n        border-radius: 4px;\n        background-color: #1976d2;\n        color: white;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 500;\n        transition: all 0.2s ease;\n      }\n\n      .close-btn:hover {\n        background-color: #1565c0;\n        border-color: #1565c0;\n      }\n    `\n  ]\n\n  @property({ type: Object }) content?: HelpContent\n  @property({ type: Object }) onClose?: () => void\n\n  render() {\n    if (!this.content) {\n      return html``\n    }\n\n    return html`\n      <div class=\"help-popup\">\n        <div class=\"help-title\">${this.content.title}</div>\n\n        <div class=\"help-content\">\n          ${this.content.sections.map(\n            section => html`\n              <div class=\"help-section\">\n                <div class=\"help-section-title\">${section.title}</div>\n                ${this._renderSectionContent(section)}\n              </div>\n            `\n          )}\n        </div>\n\n        <div class=\"help-footer\">\n          <button class=\"close-btn\" @click=${this._onClose}>닫기</button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderSectionContent(section: any) {\n    switch (section.type) {\n      case 'code':\n        return html`<div class=\"help-code\">${section.content}</div>`\n      case 'parameter':\n        return html`<div class=\"help-parameter\">${section.content}</div>`\n      case 'example':\n        return html`<div class=\"help-example\">${section.content}</div>`\n      default:\n        return html`<div class=\"help-section-content\">${section.content}</div>`\n    }\n  }\n\n  private _onClose() {\n    this.onClose?.()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-formula-help-popup.js","sourceRoot":"","sources":["../../src/ox-input-formula-help-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAY1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;aAC9C,WAAM,GAAG;QACd,WAAW;QACX,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;KACF,AA9GY,CA8GZ;IAKD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;kCAEmB,IAAI,CAAC,OAAO,CAAC,KAAK;;;YAGxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;kDAEuB,OAAO,CAAC,KAAK;kBAC7C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;aAExC,CACF;;;;6CAIkC,IAAI,CAAC,QAAQ;;;KAGrD,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,OAAY;QACxC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,0BAA0B,OAAO,CAAC,OAAO,QAAQ,CAAA;YAC9D,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACnE,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA,6BAA6B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACjE;gBACE,OAAO,IAAI,CAAA,qCAAqC,OAAO,CAAC,OAAO,QAAQ,CAAA;QAC3E,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;IAClB,CAAC;;AA7C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqB;AAlHrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA+JnC","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { InputStyles } from './input-styles.js'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport type HelpContent = {\n  title: string\n  sections: Array<{\n    title: string\n    content: string\n    type?: 'text' | 'code' | 'parameter' | 'example'\n  }>\n}\n\n@customElement('ox-input-formula-help-popup')\nexport class OxInputFormulaHelpPopup extends LitElement {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .help-popup {\n        max-width: 500px;\n        max-height: 400px;\n        overflow-y: auto;\n        background: var(--ox-input-background);\n        border-radius: var(--ox-input-radius);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .help-title {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: var(--ox-input-focus-color);\n        padding: 20px 20px 16px 20px;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-bottom: 1px solid #e0e0e0;\n        border-radius: 8px 8px 0 0;\n      }\n\n      .help-content {\n        padding: 0 20px;\n      }\n\n      .help-section {\n        margin-bottom: 16px;\n      }\n\n      .help-section-title {\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: var(--ox-input-color);\n        font-size: var(--ox-input-font-size);\n        border-bottom: 1px solid #e0e0e0;\n        padding-bottom: 4px;\n      }\n\n      .help-section-content {\n        font-size: var(--ox-input-font-size);\n        line-height: 1.6;\n        color: var(--ox-input-placeholder-color);\n        padding: 4px 0;\n      }\n\n      .help-code {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border: 1px solid #e0e0e0;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-color);\n        margin: 8px 0;\n      }\n\n      .help-example {\n        background: var(--md-sys-color-secondary-container);\n        border: 1px solid #c8e6c9;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--md-sys-color-on-tertiary-container);\n        margin: 8px 0;\n      }\n\n      .help-parameter {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-left: 3px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        padding: 8px 12px;\n        margin-bottom: 4px;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-placeholder-color);\n      }\n\n      .help-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 16px 20px;\n        border-top: 1px solid #e0e0e0;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-radius: 0 0 8px 8px;\n      }\n\n      .close-btn {\n        padding: 8px 16px;\n        border: 1px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        background-color: var(--ox-input-focus-color);\n        color: var(--md-sys-color-on-primary);\n        cursor: pointer;\n        font-size: var(--ox-input-font-size);\n        font-weight: 500;\n        transition: var(--ox-input-transition);\n      }\n\n      .close-btn:hover {\n        background-color: var(--ox-input-focus-color);\n        border-color: var(--ox-input-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) content?: HelpContent\n  @property({ type: Object }) onClose?: () => void\n\n  render() {\n    if (!this.content) {\n      return html``\n    }\n\n    return html`\n      <div class=\"help-popup\">\n        <div class=\"help-title\">${this.content.title}</div>\n\n        <div class=\"help-content\">\n          ${this.content.sections.map(\n            section => html`\n              <div class=\"help-section\">\n                <div class=\"help-section-title\">${section.title}</div>\n                ${this._renderSectionContent(section)}\n              </div>\n            `\n          )}\n        </div>\n\n        <div class=\"help-footer\">\n          <button class=\"close-btn\" @click=${this._onClose}>닫기</button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderSectionContent(section: any) {\n    switch (section.type) {\n      case 'code':\n        return html`<div class=\"help-code\">${section.content}</div>`\n      case 'parameter':\n        return html`<div class=\"help-parameter\">${section.content}</div>`\n      case 'example':\n        return html`<div class=\"help-example\">${section.content}</div>`\n      default:\n        return html`<div class=\"help-section-content\">${section.content}</div>`\n    }\n  }\n\n  private _onClose() {\n    this.onClose?.()\n  }\n}\n"]}