npm - @operato/input - Versions diffs - 9.0.0-beta.10 → 9.0.0-beta.14 - Mend

@operato/input 9.0.0-beta.10 → 9.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/CHANGELOG.md +18 -0
package/dist/src/index.d.ts +0 -3
package/dist/src/index.js +0 -3
package/dist/src/index.js.map +1 -1
package/dist/src/ox-buttons-radio.js +12 -10
package/dist/src/ox-buttons-radio.js.map +1 -1
package/dist/src/ox-checkbox.js +10 -7
package/dist/src/ox-checkbox.js.map +1 -1
package/dist/src/ox-form-field.js +5 -5
package/dist/src/ox-form-field.js.map +1 -1
package/dist/src/ox-input-3axis.js +2 -2
package/dist/src/ox-input-3axis.js.map +1 -1
package/dist/src/ox-input-3dish.js +2 -6
package/dist/src/ox-input-3dish.js.map +1 -1
package/dist/src/ox-input-angle.js +2 -4
package/dist/src/ox-input-angle.js.map +1 -1
package/dist/src/ox-input-background-pattern.d.ts +35 -0
package/dist/src/ox-input-background-pattern.js +111 -0
package/dist/src/ox-input-background-pattern.js.map +1 -0
package/dist/src/ox-input-barcode.js +7 -26
package/dist/src/ox-input-barcode.js.map +1 -1
package/dist/src/ox-input-code.js +13 -11
package/dist/src/ox-input-code.js.map +1 -1
package/dist/src/ox-input-color-gradient.d.ts +8 -9
package/dist/src/ox-input-color-gradient.js +92 -226
package/dist/src/ox-input-color-gradient.js.map +1 -1
package/dist/src/ox-input-color-stops.d.ts +2 -1
package/dist/src/ox-input-color-stops.js +114 -151
package/dist/src/ox-input-color-stops.js.map +1 -1
package/dist/src/ox-input-color.js +10 -8
package/dist/src/ox-input-color.js.map +1 -1
package/dist/src/ox-input-container.js +0 -1
package/dist/src/ox-input-container.js.map +1 -1
package/dist/src/ox-input-crontab.js +7 -10
package/dist/src/ox-input-crontab.js.map +1 -1
package/dist/src/ox-input-data.js +2 -2
package/dist/src/ox-input-data.js.map +1 -1
package/dist/src/ox-input-direction.js +7 -4
package/dist/src/ox-input-direction.js.map +1 -1
package/dist/src/ox-input-duration.js +6 -7
package/dist/src/ox-input-duration.js.map +1 -1
package/dist/src/ox-input-file.js +9 -10
package/dist/src/ox-input-file.js.map +1 -1
package/dist/src/ox-input-fill-style.d.ts +47 -0
package/dist/src/ox-input-fill-style.js +327 -0
package/dist/src/ox-input-fill-style.js.map +1 -0
package/dist/src/ox-input-hashtags.js +7 -6
package/dist/src/ox-input-hashtags.js.map +1 -1
package/dist/src/ox-input-i18n-label.js +8 -6
package/dist/src/ox-input-i18n-label.js.map +1 -1
package/dist/src/ox-input-image.js +2 -3
package/dist/src/ox-input-image.js.map +1 -1
package/dist/src/ox-input-key-values.js +8 -6
package/dist/src/ox-input-key-values.js.map +1 -1
package/dist/src/ox-input-layout/ox-input-card-layout.js +6 -4
package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -1
package/dist/src/ox-input-layout/ox-input-grid-layout.js +6 -4
package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -1
package/dist/src/ox-input-layout/ox-input-layout.js +6 -3
package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -1
package/dist/src/ox-input-mass-fraction.js +10 -8
package/dist/src/ox-input-mass-fraction.js.map +1 -1
package/dist/src/ox-input-multiple-colors.js +6 -5
package/dist/src/ox-input-multiple-colors.js.map +1 -1
package/dist/src/ox-input-options.js +7 -4
package/dist/src/ox-input-options.js.map +1 -1
package/dist/src/ox-input-partition-keys.js +7 -5
package/dist/src/ox-input-partition-keys.js.map +1 -1
package/dist/src/ox-input-privilege.js +7 -5
package/dist/src/ox-input-privilege.js.map +1 -1
package/dist/src/ox-input-quantifier.js +6 -4
package/dist/src/ox-input-quantifier.js.map +1 -1
package/dist/src/ox-input-range.js +9 -6
package/dist/src/ox-input-range.js.map +1 -1
package/dist/src/ox-input-scene-component-id.js +6 -4
package/dist/src/ox-input-scene-component-id.js.map +1 -1
package/dist/src/ox-input-search.js +2 -5
package/dist/src/ox-input-search.js.map +1 -1
package/dist/src/ox-input-select-buttons.js +8 -5
package/dist/src/ox-input-select-buttons.js.map +1 -1
package/dist/src/ox-input-signature.js +7 -8
package/dist/src/ox-input-signature.js.map +1 -1
package/dist/src/ox-input-stack.js +9 -6
package/dist/src/ox-input-stack.js.map +1 -1
package/dist/src/ox-input-switch.js +8 -5
package/dist/src/ox-input-switch.js.map +1 -1
package/dist/src/ox-input-table-column-config.js +6 -3
package/dist/src/ox-input-table-column-config.js.map +1 -1
package/dist/src/ox-input-table.d.ts +21 -0
package/dist/src/ox-input-table.js +65 -152
package/dist/src/ox-input-table.js.map +1 -1
package/dist/src/ox-input-textarea.js +6 -4
package/dist/src/ox-input-textarea.js.map +1 -1
package/dist/src/ox-input-unit-number.js +2 -7
package/dist/src/ox-input-unit-number.js.map +1 -1
package/dist/src/ox-input-value-map.js +9 -7
package/dist/src/ox-input-value-map.js.map +1 -1
package/dist/src/ox-input-value-ranges.js +9 -7
package/dist/src/ox-input-value-ranges.js.map +1 -1
package/dist/src/ox-input-work-shift.js +7 -4
package/dist/src/ox-input-work-shift.js.map +1 -1
package/dist/src/ox-select-floor.js +13 -11
package/dist/src/ox-select-floor.js.map +1 -1
package/dist/src/ox-select.d.ts +3 -0
package/dist/src/ox-select.js +29 -16
package/dist/src/ox-select.js.map +1 -1
package/dist/stories/ox-select-images.stories.d.ts +32 -0
package/dist/stories/ox-select-images.stories.js +120 -0
package/dist/stories/ox-select-images.stories.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +29 -20

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

	@@ -1 +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"]}
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"]}

package/dist/src/ox-input-data.js CHANGED Viewed

@@ -15,7 +15,7 @@ Example:
   </ox-input-data>
 */
 let OxInputData = class OxInputData extends OxFormField {
-    static styles = [
+    static { this.styles = [
         css `
       :host {
         display: flex;
@@ -50,7 +50,7 @@ let OxInputData = class OxInputData extends OxFormField {
         overflow: auto;
       }
     `
-    ];
+    ]; }
     render() {
         const valueType = typeof this.value;
         return html `

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,KAAK,CAAA;AAEZ;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;~~IAC1C~~,~~MAAM~~,~~CAAC,MAAM,~~GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCF;KACF,~~CAAA~~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","sourcesContent":["import './ox-input-code.js'\n\nimport { css, html } from 'lit'\nimport { customElement } 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 ]\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 ?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"]}
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 } 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 ]\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 ?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-direction.js CHANGED Viewed

@@ -7,7 +7,12 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
 let OxInputDirection = class OxInputDirection extends OxFormField {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+        this.inbound = false;
+    }
+    static { this.styles = css `
     :host {
       --md-icon-size: 1.4em;
     }
@@ -44,9 +49,7 @@ let OxInputDirection = class OxInputDirection extends OxFormField {
     md-icon[data-value='E'] {
       transform: rotate(90deg);
     }
-  `;
-    value = undefined;
-    inbound = false;
+  `; }
     render() {
         const value = this.value;
         return html `

package/dist/src/ox-input-direction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;~~IAC/C~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~GAAG,GAAG,~~CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,CAAA~~;~~IAE2B~~,~~KAAK~~,~~GAAY~~,~~SAAS~~,CAAA;~~IACzB~~,~~OAAO~~,~~GAAa~~,~~KAAK~~,CAAA;~~IAEtD~~,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;UACjC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;YACH,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;;KAER,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AACzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAzC3C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+E5B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n static styles = css`\n :host {\n --md-icon-size: 1.4em;\n }\n\n div {\n display: flex;\n justify-content: space-between;\n max-width: 140px;\n }\n\n md-icon {\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n }\n\n md-icon[selected] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n / 아이콘 회전 */\n md-icon[data-value='W'] {\n transform: rotate(-90deg);\n }\n\n md-icon[data-value='N'] {\n transform: rotate(0deg);\n }\n\n md-icon[data-value='S'] {\n transform: rotate(180deg);\n }\n\n md-icon[data-value='E'] {\n transform: rotate(90deg);\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Boolean }) inbound?: boolean = false\n\n render() {\n const value = this.value\n\n return html`\n <div @click=${this.onClick.bind(this)}>\n ${this.inbound\n ? html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_into</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_into</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_into</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_into</md-icon>\n `\n : html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_out</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_out</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_out</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_out</md-icon>\n `}\n </div>\n `\n }\n\n onClick(e: MouseEvent) {\n e.stopPropagation()\n\n if (this.disabled) {\n return\n }\n\n const target = e.target as Element\n const value = target.getAttribute('data-value') as string\n\n this.value = this.value === value ? undefined : value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAwCuB,UAAK,GAAY,SAAS,CAAA;QACzB,YAAO,GAAa,KAAK,CAAA;IAsCxD,CAAC;aA9EQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,AArCY,CAqCZ;IAKD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;UACjC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;YACH,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;;KAER,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AACzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAzC3C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+E5B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n static styles = css`\n :host {\n --md-icon-size: 1.4em;\n }\n\n div {\n display: flex;\n justify-content: space-between;\n max-width: 140px;\n }\n\n md-icon {\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n }\n\n md-icon[selected] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n / 아이콘 회전 */\n md-icon[data-value='W'] {\n transform: rotate(-90deg);\n }\n\n md-icon[data-value='N'] {\n transform: rotate(0deg);\n }\n\n md-icon[data-value='S'] {\n transform: rotate(180deg);\n }\n\n md-icon[data-value='E'] {\n transform: rotate(90deg);\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Boolean }) inbound?: boolean = false\n\n render() {\n const value = this.value\n\n return html`\n <div @click=${this.onClick.bind(this)}>\n ${this.inbound\n ? html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_into</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_into</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_into</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_into</md-icon>\n `\n : html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_out</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_out</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_out</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_out</md-icon>\n `}\n </div>\n `\n }\n\n onClick(e: MouseEvent) {\n e.stopPropagation()\n\n if (this.disabled) {\n return\n }\n\n const target = e.target as Element\n const value = target.getAttribute('data-value') as string\n\n this.value = this.value === value ? undefined : value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}

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

@@ -7,7 +7,11 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxFormField } from './ox-form-field.js';
 let OxInputDuration = class OxInputDuration extends OxFormField {
-    static styles = css `
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+    }
+    static { this.styles = css `
     :host {
       text-align: center;
       padding: 10px;
@@ -62,8 +66,7 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
       font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       color: var(--md-sys-color-on-primary-container);
     }
-  `;
-    value = undefined;
+  `; }
     render() {
         var d = Number(this.value || 0);
         const days = Math.floor(d / (3600 * 24));
@@ -129,10 +132,6 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
         ;
         this.renderRoot.querySelector('input').focus();
     }
-    days;
-    hours;
-    minutes;
-    seconds;
     onChange(e) {
         e.stopPropagation();
         var form = this.renderRoot.querySelector('form');

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

	@@ -1 +1 @@
1	- {"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;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;~~IAC9C~~,~~MAAM~~,CAAC,~~MAAM~~,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDlB,~~CAAA;IAE2B~~,~~KAAK,GAAY,SAAS,CAAA~~;~~IAEtD~~,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;~~IAEe~~,~~IAAI,CAAmB;IACtB,KAAK,CAAmB;IACtB,OAAO,CAAmB;IAC1B,OAAO,CAAmB;IAE7C,~~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'\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"]}
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"]}

package/dist/src/ox-input-file.js CHANGED Viewed

@@ -9,7 +9,14 @@ import { ScrollbarStyles } from '@operato/styles';
 import { FileDropHelper } from '@operato/utils';
 import { OxFormField } from './ox-form-field.js';
 let OxInputFile = class OxInputFile extends OxFormField {
-    static styles = [
+    constructor() {
+        super(...arguments);
+        this.icon = 'upload';
+        this.description = 'drop files here!';
+        this.hideFileList = false;
+        this.attachFileList = false;
+    }
+    static { this.styles = [
         ScrollbarStyles,
         css `
       :host {
@@ -87,15 +94,7 @@ let OxInputFile = class OxInputFile extends OxFormField {
         color: var(--md-sys-color-error);
       }
     `
-    ];
-    multiple;
-    accept;
-    icon = 'upload';
-    label;
-    description = 'drop files here!';
-    hideFileList = false;
-    attachFileList = false;
-    fileInput;
+    ]; }
     render() {
         var files = this.value || [];
         return html `

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

	@@ -1 +1 @@
1	- {"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;AAGzC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;~~IAC1C~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~GAAG~~;~~QACd~~,~~eAAe;QACf~~,~~GAAG~~,~~CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EF;KACF~~,CAAA;~~IAE4B~~,~~QAAQ~~,~~CAAU;IACnB~~,~~MAAM~~,~~CAAS~~;~~IACf~~,~~IAAI~~,GAAY,~~QAAQ~~,CAAA;~~IACxB~~,~~KAAK,CAAS~~;~~IACd~~,~~WAAW~~,~~GAAY,kBAAkB,CAAA~~;~~IAErE~~,~~YAAY,GAAY,KAAK,CAAA~~;~~IAE7B~~,~~cAAc~~,~~GAAY,KAAK,~~CAAA;~~IAET~~,~~SAAS~~,~~CAAmB~~;~~IAElD~~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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"]}
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"]}

package/dist/src/ox-input-fill-style.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-color.js';
+import './ox-input-color-stops.js';
+import './ox-input-color-gradient.js';
+import './ox-input-background-pattern.js';
+import { PropertyValues } from 'lit';
+import { OxFormField } from './ox-form-field.js';
+import { ColorStop } from './ox-input-color-stops.js';
+import { GradientOption } from './ox-input-color-gradient.js';
+import { BackgroundPatternOption } from './ox-input-background-pattern.js';
+export type FillStyle = {
+    type?: 'no' | 'solid' | 'gradient' | 'pattern';
+    gradientType?: 'linear' | 'radial';
+    colorStops?: ColorStop[];
+    rotation?: number;
+    center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
+    image?: HTMLImageElement | string;
+    offsetX?: number;
+    offsetY?: number;
+    width?: number;
+    height?: number;
+    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
+    fitPattern?: boolean;
+    noRepeat?: boolean;
+    color?: string;
+} | 'no' | string;
+export declare class OxInputColorStyle extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    value?: FillStyle;
+    fillType?: string;
+    solid?: string;
+    gradient?: GradientOption;
+    pattern?: BackgroundPatternOption;
+    colorOnly: boolean;
+    private _block_reset;
+    updated(changes: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onChangedValue(value: FillStyle): Promise<void>;
+    _onChangedFillType(e: Event): void;
+    _onChangedSolid(e: Event): void;
+    _onChandedGradient(e: Event): void;
+    _onChangedPattern(e: Event): void;
+}