@operato/input 1.2.25 → 1.2.28
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.
- package/CHANGELOG.md +18 -0
- package/dist/src/locale/locale-picker.js.map +1 -1
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color-gradient.js.map +1 -1
- package/dist/src/ox-input-color-stops.js.map +1 -1
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-container.js.map +1 -1
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-hashtags.js.map +1 -1
- package/dist/src/ox-input-image.js.map +1 -1
- package/dist/src/ox-input-key-values.js.map +1 -1
- 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.map +1 -1
- package/dist/src/ox-input-mass-fraction.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-quantifier.js.map +1 -1
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-scene-component-id.js.map +1 -1
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +19 -21
|
@@ -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 '@material/mwc-button'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n regexByField['month'] = '[1-9]|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-|/|,' +\n ('dayOfWeek' === field ? '|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L|W)?'\n regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n })\n\n var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n if (!type)\n return (\n '^\\\\s*($' +\n '|#' +\n '|\\\\w+\\\\s*=' +\n '|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host * {\n box-sizing: border-box;\n }\n :host *:focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font: normal 1em var(--theme-font);\n color: var(--secondary-color);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n height: 100%;\n padding: var(--input-padding);\n border: 0;\n border-bottom: var(--border-dark-color);\n text-transform: capitalize;\n font: var(--label-font);\n color: var(--label-color);\n }\n\n input {\n width: 100%;\n margin-top: var(--margin-default);\n padding: 5px;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--status-danger-color);\n color: var(--status-danger-color);\n }\n\n label {\n width: 100%;\n font: normal 0.8em var(--theme-font);\n color: var(--primary-color);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: 0.5rem;\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: #ccc 1px dashed;\n font: normal 0.9em var(--theme-font);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--secondary-color);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: #585858;\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n mwc-button {\n background-color: var(--secondary-color);\n border-radius: var(--button-border-radius);\n --mdc-theme-primary: #fff;\n margin: 0.25rem;\n }\n mwc-button:hover,\n mwc-button:active {\n background-color: var(--primary-color);\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value || ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday(2)')}</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second || ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute || ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour || ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth || ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month || ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek || ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <button\n id=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n Clear\n </button>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value || '').split(' ')\n\n if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,SAAS,eAAe,CAAC,IAA4D;IACnF,yDAAyD;IACzD,IAAI,YAAY,GAAG,EAAS,CAAA;IAC5B,YAAY,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA;IACjC,YAAY,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA;IACjC,YAAY,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACxC,YAAY,CAAC,KAAK,CAAC,GAAG,uBAAuB,CAAA;IAC7C,YAAY,CAAC,OAAO,CAAC,GAAG,cAAc,CAAA;IACtC,YAAY,CAAC,WAAW,CAAC,GAAG,OAAO,CAAA;IAEnC,IAAI,aAAa,GAAG,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,CAAC,IAAI;QAAE,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAA;IAE9E,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC5B,IAAI,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;QAChC,IAAI,KAAK,GACP,KAAK;YACL,MAAM;YACN,GAAG;YACH,KAAK;YACL,UAAU;YACV,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACnC,GAAG;YACH,KAAK;YACL,MAAM;YACN,GAAG;YACH,IAAI,CAAA;QACN,IAAI,KAAK,KAAK,WAAW;YAAE,KAAK,IAAI,QAAQ,CAAA;QAC5C,IAAI,KAAK,KAAK,OAAO;YAAE,KAAK,IAAI,UAAU,CAAA;QAC1C,YAAY,CAAC,KAAK,CAAC,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAA;IAClE,CAAC,CAAC,CAAA;IAEF,IAAI,WAAW,GAAG,iDAAiD,CAAA;IACnE,IAAI,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,cAAc,GAAG,WAAW,GAAG,KAAK,CAAA;IAC3E,YAAY,CAAC,OAAO,CAAC,IAAI,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAA;IAE9E,IAAI,eAAe,GAAG,6BAA6B,CAAA;IACnD,IAAI,cAAc,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,GAAG,KAAK,CAAA;IACvF,YAAY,CAAC,WAAW,CAAC,IAAI,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAA;IAE1F,IAAI,CAAC,IAAI;QACP,OAAO,CACL,SAAS;YACT,IAAI;YACJ,YAAY;YACZ,GAAG;YACH,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,MAAM,CAAC;YACpB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,KAAK,CAAC;YACnB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,OAAO,CAAC;YACrB,OAAO;YACP,GAAG;YACH,YAAY,CAAC,WAAW,CAAC;YACzB,UAAU;YACV,IAAI,CACL,CAAA;;QACE,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAA;AACvC,CAAC;AAGD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;IAA/C;;QAsJW,YAAO,GAA6C,EAAE,CAAA;IA+VjE,CAAC;aApfQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2IlB,AA3IY,CA2IZ;IAYD,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;oBAGtC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;mBACzE,IAAI,CAAC,KAAK,IAAI,EAAE;;oCAEC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;0CAC7B,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;4CAC5B,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;6CAChC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;6CAClC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;oCAE3C,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;0CAC7B,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;4CAC5B,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;6CAChC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;6CAClC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;oCAE1C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;0CACnB,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;4CAC1B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;6CAC9B,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;8CAC/B,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC;;oCAE1D,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;0CAClB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;oCAEjC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;4CACjB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;0CAChC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;4CAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;oCAEvC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;0CACpB,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC;4CAC5C,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;;oCAE/C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;0CACnB,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;4CAC3C,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;;;;;;;;uBAStD,IAAI,CAAC,MAAM,IAAI,EAAE;uBACjB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACzE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;uDAGS,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;;;uBAOzD,IAAI,CAAC,MAAM,IAAI,EAAE;uBACjB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACzE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;uDAGS,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;;;uBAOzD,IAAI,CAAC,IAAI,IAAI,EAAE;uBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACvE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAC1B,CAAC;wBACS,eAAe,CAAC,MAAM,CAAC;;;mDAGI,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;;;;;;uBAOnD,IAAI,CAAC,UAAU,IAAI,EAAE;uBACrB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBAC7E,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAA;QAChC,CAAC;wBACS,eAAe,CAAC,KAAK,CAAC;;;mEAGqB,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;;;;;;uBAO3E,IAAI,CAAC,KAAK,IAAI,EAAE;uBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBACxE,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC;wBACS,eAAe,CAAC,OAAO,CAAC;;;qDAGK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;;;uBAOtD,IAAI,CAAC,SAAS,IAAI,EAAE;uBACpB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,aAAkC,CAAC,KAAK,CAAC;uBAC5E,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QAC/B,CAAC;wBACS,eAAe,CAAC,WAAW,CAAC;;;iEAGa,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;YAInF,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;2CACoB,GAAG,CAAC,KAAK;iDACH,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,WAAW,EAAE,CAAC;aACxE,CACF;;;;mBAIQ,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;YACf,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;;;;;KAKN,CAAA;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,CAAC;QAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAsB,CAAC,KAAK,EAAE,CAAA;QACrE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE1C,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;iBAC1D,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAE1D,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACvB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;SAC3B;IACH,CAAC;IAED,WAAW,CAAC,IAAyE;QACnF,QAAQ,IAAI,EAAE;YACZ,KAAK,QAAQ,CAAC;YACd,KAAK,QAAQ;gBACX,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YACP,KAAK,MAAM;gBACT,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,YAAY;gBACf,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,OAAO;gBACV,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,gBAAgB;qBAC9B;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,2BAA2B;qBACzC;iBACF,CAAA;gBACD,MAAK;YAEP,KAAK,WAAW;gBACd,IAAI,CAAC,OAAO,GAAG;oBACb;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,WAAW;qBACzB;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,iBAAiB;qBAC/B;oBACD;wBACE,KAAK,EAAE,GAAG;wBACV,WAAW,EAAE,aAAa;qBAC3B;oBACD;wBACE,KAAK,EAAE,KAAK;wBACZ,WAAW,EAAE,gBAAgB;qBAC9B;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,2BAA2B;qBACzC;iBACF,CAAA;gBACD,MAAK;YAEP;gBACE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBACjB,MAAK;SACR;IACH,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACnE,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QAChC,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,cAAc,EAAE,CAAA;YACrB,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,CAAA;QAE5G,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AAtW2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAErC;IAAR,KAAK,EAAE;+CAAuD;AAtJpD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqf1B;SArfY,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n regexByField['month'] = '[1-9]|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-|/|,' +\n ('dayOfWeek' === field ? '|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L|W)?'\n regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n })\n\n var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n if (!type)\n return (\n '^\\\\s*($' +\n '|#' +\n '|\\\\w+\\\\s*=' +\n '|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host * {\n box-sizing: border-box;\n }\n :host *:focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font: normal 1em var(--theme-font);\n color: var(--secondary-color);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n height: 100%;\n padding: var(--input-padding);\n border: 0;\n border-bottom: var(--border-dark-color);\n text-transform: capitalize;\n font: var(--label-font);\n color: var(--label-color);\n }\n\n input {\n width: 100%;\n margin-top: var(--margin-default);\n padding: 5px;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--status-danger-color);\n color: var(--status-danger-color);\n }\n\n label {\n width: 100%;\n font: normal 0.8em var(--theme-font);\n color: var(--primary-color);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: 0.5rem;\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: #ccc 1px dashed;\n font: normal 0.9em var(--theme-font);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--secondary-color);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: #585858;\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n mwc-button {\n background-color: var(--secondary-color);\n border-radius: var(--button-border-radius);\n --mdc-theme-primary: #fff;\n margin: 0.25rem;\n }\n mwc-button:hover,\n mwc-button:active {\n background-color: var(--primary-color);\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value || ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday(2)')}</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second || ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute || ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour || ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth || ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month || ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek || ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <button\n id=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n Clear\n </button>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value || '').split(' ')\n\n if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;EAOE;
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\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 padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n />object\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n this.value = target.value\n }\n\n const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n this._setDataType(type)\n })\n }\n\n udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\n }\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value !== type) {\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n this.value = String(value || '')\n break\n case 'number':\n if (!isNaN(value)) {\n this.value = Number(value)\n }\n break\n case 'object':\n this.value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getData(data: any) {\n return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n }\n\n _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAE7B,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,iBAAiB,CAAA;
|
|
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 '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n static styles = css`\n :host {\n text-align: center;\n padding: 10px;\n }\n\n :host * {\n box-sizing: border-box;\n }\n\n :host *:focus {\n outline: none;\n }\n\n form {\n width: 100%;\n height: 100%;\n justify-content: center;\n }\n\n input {\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n padding-right: 0;\n max-width: 70px;\n font: var(--input-font);\n color: var(--primary-text-color);\n text-align: right;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--status-danger-color);\n color: var(--status-danger-color);\n }\n\n label {\n width: 100%;\n margin-right: var(--margin-default);\n font: normal 0.8em var(--theme-font);\n color: var(--primary-color);\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n min-height: 35px;\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button + button {\n margin-left: -5px;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n `\n\n @property({ type: Number }) declare value?: number\n\n render() {\n var d = Number(this.value || 0)\n\n const days = Math.floor(d / (3600 * 24))\n d -= days * 24 * 3600\n const hours = Math.floor(d / 3600)\n d -= hours * 3600\n const minutes = Math.floor(d / 60)\n const seconds = d - minutes * 60\n\n return html`\n <form @change=${this.onChange.bind(this)}>\n <input id=\"days\" type=\"number\" .value=${days} pattern=\"\\\\d*\" />\n <label for=\"days\">${i18next.t('label.days')}</label>\n\n <input id=\"hours\" type=\"number\" .value=${hours} pattern=\"[01]?\\\\d|2[0-3]\" />\n <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n <input id=\"minutes\" type=\"number\" .value=${minutes} pattern=\"[0-5]?\\\\d\" />\n <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n <input id=\"seconds\" type=\"number\" .value=${seconds} pattern=\"[0-5]?\\\\d\" />\n <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n <button\n type=\"button\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.value = 0\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <mwc-icon>backspace</mwc-icon>\n </button>\n </form>\n `\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n }\n\n @query('#days') days!: HTMLInputElement\n @query('#hours') hours!: HTMLInputElement\n @query('#minutes') minutes!: HTMLInputElement\n @query('#seconds') seconds!: HTMLInputElement\n\n onChange(e: Event) {\n e.stopPropagation()\n\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n const days = Number(this.days.value)\n const hours = Number(this.hours.value)\n const minutes = Number(this.minutes.value)\n const seconds = Number(this.seconds.value)\n\n this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,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;
|
|
1
|
+
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,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;AAGhD,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,WAAW;IAA5C;;QA6E8B,SAAI,GAAY,QAAQ,CAAA;QAExB,gBAAW,GAAY,kBAAkB,CAAA;QAErE,iBAAY,GAAY,KAAK,CAAA;QAE7B,mBAAc,GAAY,KAAK,CAAA;IAgGjC,CAAC;aAlLQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqEF;KACF,AAxEY,CAwEZ;IAcD,MAAM;QACJ,IAAI,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;kBACG,IAAI,CAAC,IAAI,IAAI,QAAQ;;cAEzB,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;;;gCAGtB,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,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;YAC1D,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SAC7C;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,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;;AAvG4B;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;AArFvC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAmLvB;SAnLY,WAAW","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--border-radius);\n align-items: center;\n justify-content: center;\n padding: var(--padding-default, 9px);\n min-height: 100px;\n text-transform: capitalize;\n\n border: var(--file-uploader-border);\n background-color: var(--main-section-background-color);\n font: var(--file-uploader-font) !important;\n color: var(--file-uploader-color);\n }\n :host > mwc-icon {\n color: var(--file-uploader-icon-color);\n --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n }\n\n :host(.candrop) {\n background-color: var(--file-uploader-candrop-background-color);\n }\n\n #input-file {\n display: none;\n }\n\n label {\n position: relative;\n width: auto;\n border: none;\n text-transform: capitalize;\n\n padding: var(--file-uploader-label-padding);\n border-radius: var(--file-uploader-label-border-radius);\n background-color: var(--file-uploader-label-background-color);\n color: var(--file-uploader-label-color);\n font: var(--file-uploader-label-font) !important;\n }\n\n ul {\n max-width: 500px;\n width: 100%;\n list-style: none;\n margin: 5px 0 0 0;\n padding: 0;\n max-height: 46px;\n overflow: auto;\n background-color: rgba(var(--primary-color-rgb), 0.1);\n }\n li {\n text-align: left;\n\n padding: 3px 5px 2px 5px;\n border-bottom: var(--file-uploader-li-border-bottom);\n font: normal 14px var(--theme-font);\n }\n li mwc-icon {\n float: right;\n cursor: pointer;\n margin: var(--file-uploader-li-icon-margin);\n font-size: 1em;\n }\n li mwc-icon:hover,\n li mwc-icon:active {\n color: var(--file-uploader-li-icon-focus-color);\n }\n `\n ]\n\n @property({ type: Boolean }) multiple?: boolean\n @property({ type: String }) accept?: string\n @property({ type: String }) icon?: string = 'upload'\n @property({ type: String }) label?: string\n @property({ type: String }) description?: string = 'drop files here!'\n @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n hideFileList: boolean = false\n @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n attachFileList: boolean = false\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n var files: File[] = this.value || []\n\n return html`\n <mwc-icon>${this.icon || 'upload'}</mwc-icon>\n\n <span>${this.description || 'drop files here!'}</span>\n\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n\n <label for=\"input-file\">${this.label || 'select files'}</label>\n\n ${!this.hideFileList && files?.length\n ? html` <ul>\n ${files.map(\n file => html`\n <li>\n - ${file.name}\n <mwc-icon\n @click=${(e: Event) => {\n files.splice(files.indexOf(file), 1)\n this.value = [...files]\n this._notifyChange()\n }}\n >delete_outline</mwc-icon\n >\n </li>\n `\n )}\n </ul>`\n : html``}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && !(this.value instanceof Array)) {\n this.value = !this.value ? [] : [this.value]\n }\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n\n this.addEventListener('file-drop', (e: Event) => {\n const detail = (e as CustomEvent).detail\n this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n this._notifyChange()\n })\n }\n\n get files() {\n return this.value\n }\n\n reset() {\n this.fileInput.value = ''\n this.value = []\n\n this._notifyChange()\n }\n\n _onChangeValue(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const files = this.value || []\n\n this.value = this.attachFileList\n ? [...files, ...Array.from(fileInput.files as FileList)]\n : [...Array.from(fileInput.files as FileList)]\n\n fileInput.files = null\n\n this._notifyChange()\n }\n\n _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.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, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n static styles = css`\n #editor {\n display: block;\n box-sizing: border-box;\n --hashtag-padding : 2px 4px;\n --hashtag-background : rgba(var(--primary-color-rgb),.15);\n --hashtag-background-hover : rgba(var(--primary-color-rgb),1);\n --hashtag-closer-padding:0 2px 0 4px;\n --hashtag-input-padding : 2px;\n }\n\n .tags {\n display: inline-block;\n }\n\n .tag {\n border-radius: var(--border-radius);\n background-color: var(--hashtag-background);\n padding:var(--hashtag-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n cursor:pointer;\n }\n\n .tag:hover {\n background-color: var(--hashtag-background-hover);\n color: var(--theme-white-color) !important;\n }\n \n .closer {\n opacity:.3;\n padding:var(--hashtag-closer-padding);\n text-transform:uppercase;\n color: var(--primary-text-color);\n }\n .tag:hover .closer{\n opacity:.9;\n color: var(--theme-white-color);\n }\n\n .input {\n display: inline-block;\n color: var(--primary-text-color);\n }\n\n .input::before {\n display: inline;\n position: relative;\n opacity:.5;\n top: -1px;\n content: '#';\n vertical-align: middle;\n }\n\n input {\n vertical-align: middle;\n -webkit-appearance: none;\n -webkit-text-size-adjust: none;\n padding: var(--hashtag-input-padding);\n border: 0;\n border-bottom: var(--border-dark-color);\n outline: none;\n font-weight:bold;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n .error {\n margin:var(--margin-narrow);\n color: var(--status-danger-color);\n font: var(--input-font);\n text-align: left;\n }\n `\n\n @property({ type: Array }) value: string[] = []\n @property({ type: String }) placeholder: string = 'tag'\n @query('input') input!: HTMLInputElement\n\n @state() errors?: string | null\n\n render() {\n return html`\n <div id=\"editor\" @click=${this.setHashtags}>\n <div class=\"tags\">\n ${repeat(\n this.value,\n tag => tag,\n (tag, index) =>\n html`\n <span class=\"tag\">#${tag} <span @click=${() => this.removeHashtag(index)} class=\"closer\">x</span></span>\n `\n )}\n </div>\n\n <div class=\"input\">\n <input type=\"text\" @keyup=${this.onInputKeyup} placeholder=\"태그입력\" />\n </div>\n </div>\n\n ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n `\n }\n\n private onInputKeyup(e: KeyboardEvent) {\n e.stopPropagation()\n\n const tag = this.input.value.trim()\n\n switch (e.key) {\n case 'Enter':\n case 'Spacebar':\n this.addHashtag(tag)\n break\n default:\n this.errors = this.validate(tag)\n }\n }\n\n async setHashtags() {\n this.input.focus()\n }\n\n initErrors() {\n this.errors = null\n }\n\n validate(newtag: string) {\n if (this.value.some(tag => tag === newtag)) {\n return msg('tag duplicated')\n }\n\n const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n if (regex.test(newtag)) {\n return msg('special characters not allowed')\n }\n }\n\n async addHashtag(tag: string) {\n if (!tag) {\n this.initErrors()\n this.input.focus()\n return\n }\n\n this.errors = this.validate(tag)\n if (this.errors) {\n this.input.focus()\n return\n }\n\n this.value = [...this.value, tag]\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n this.errors = null\n this.input.value = ''\n this.input.focus()\n }\n\n removeHashtag(idx: number) {\n this.value.splice(idx, 1)\n this.value = [...this.value]\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-image.js","sourceRoot":"","sources":["../../src/ox-input-image.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,kCAAkC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-image.js","sourceRoot":"","sources":["../../src/ox-input-image.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,kCAAkC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAGxF,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEF;KACF,AAnEY,CAmEZ;IAID,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACtB,IAAI,GAAW,CAAA;QAEf,IAAI,CAAC,KAAK,EAAE;YACV,GAAG,GAAG,cAAc,CAAA;SACrB;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YACpC,GAAG,GAAG,KAAK,CAAA;SACZ;aAAM;YACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;YAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;SACtD;QAED,OAAO,IAAI,CAAA;;cAED,GAAG;;iCAEgB,cAAc,qBAAqB,cAAc;;;;;;;;;;;sBAW5D,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;;;KAKrD,CAAA;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACxC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,IAAI;QACN,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;QAErD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5D,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;;AA9EqB;IAArB,KAAK,CAAC,aAAa,CAAC;+CAA6B;AAtEvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAqJxB;SArJY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, 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\nconst IMAGE_FALLBACK = new URL('../../assets/images/no-image.png', import.meta.url).href\n\n@customElement('ox-input-image')\nexport class OxInputImage extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n position: relative;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n place-content: center;\n border-radius: var(--border-radius);\n padding: var(--padding-default, 9px);\n min-height: 100px;\n text-transform: capitalize;\n\n border: var(--file-uploader-border);\n background-color: var(--main-section-background-color);\n font: var(--file-uploader-font) !important;\n color: var(--file-uploader-color);\n\n overflow: hidden;\n }\n\n :host(.candrop) {\n background-color: var(--file-uploader-candrop-background-color);\n }\n\n img {\n min-height: 100%;\n margin: auto;\n }\n\n [overlay] {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0%;\n background-color: white;\n\n display: flex;\n place-content: center;\n }\n\n [overlay]:hover {\n opacity: 50%;\n }\n\n #input-file {\n display: none;\n }\n\n label {\n border: none;\n flex: 1;\n display: flex;\n place-content: center;\n }\n\n mwc-icon {\n align-self: center;\n\n color: var(--file-uploader-icon-color, black);\n --mdc-icon-size: var(--file-uploader-icon-size, 36px);\n }\n `\n ]\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n var value = this.value\n var src: string\n\n if (!value) {\n src = IMAGE_FALLBACK\n } else if (typeof value === 'string') {\n src = value\n } else {\n src = URL.createObjectURL(value)\n requestAnimationFrame(() => URL.revokeObjectURL(src))\n }\n\n return html`\n <img\n src=${src}\n style=\"max-width: 100%;\"\n onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\n />\n\n <div overlay>\n <label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=\"image/*\"\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n <mwc-icon>upload</mwc-icon>\n </label>\n </div>\n `\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n\n this.addEventListener('file-drop', (e: Event) => {\n const detail = (e as CustomEvent).detail\n this.value = detail[0]\n\n this._notifyChange()\n })\n }\n\n get file() {\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\n this.value = [...Array.from(fileInput.files as FileList)][0]\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-key-values.js","sourceRoot":"","sources":["../../src/ox-input-key-values.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype KeyValues = { [key: string]: any }\ntype ArrayedKeyValues = { key: string; value: any }\n\n/**\n input component for key-value map\n \n Example:\n \n <ox-input-key-values \n value=${map}\n </ox-input-key-values>\n */\n@customElement('ox-input-key-values')\nexport class OxInputKeyValues extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n margin-bottom: var(--margin-wide);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--margin-default);\n margin-bottom: var(--margin-narrow);\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button + button {\n margin-left: -5px;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input {\n flex: 1;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n `\n\n @property({ type: Object }) value: KeyValues = {}\n @property({ type: Object }) options: { display: string; value: string }[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const options = this.options || []\n\n return html`\n ${this._toArray(value).map(\n item => html`\n <div data-record>\n <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} />\n <input type=\"text\" data-value placeholder=\"value\" .value=${item.value} list=\"value-template\" />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )}\n\n <div data-record-new>\n <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n <input type=\"text\" data-value placeholder=\"value\" value=\"\" list=\"value-template\" />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n </div>\n\n <datalist id=\"value-template\">\n ${options.map(({ display, value }) => html` <option value=\"${value}\">${display}</option> `)}\n </datalist>\n `\n }\n\n _onChange(e: Event) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: KeyValues = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = value || ''\n }\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: KeyValues) {\n var array: ArrayedKeyValues[] = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = value\n return sum\n }, {} as { [key: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = value\n return sum\n }, {} as { [key: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-key-values.js","sourceRoot":"","sources":["../../src/ox-input-key-values.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype KeyValues = { [key: string]: any }\ntype ArrayedKeyValues = { key: string; value: any }\n\n/**\n input component for key-value map\n \n Example:\n \n <ox-input-key-values \n value=${map}\n </ox-input-key-values>\n */\n@customElement('ox-input-key-values')\nexport class OxInputKeyValues extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n margin-bottom: var(--margin-wide);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--margin-default);\n margin-bottom: var(--margin-narrow);\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button + button {\n margin-left: -5px;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input {\n flex: 1;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n `\n\n @property({ type: Object }) value: KeyValues = {}\n @property({ type: Object }) options: { display: string; value: string }[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const options = this.options || []\n\n return html`\n ${this._toArray(value).map(\n item => html`\n <div data-record>\n <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} />\n <input type=\"text\" data-value placeholder=\"value\" .value=${item.value} list=\"value-template\" />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )}\n\n <div data-record-new>\n <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n <input type=\"text\" data-value placeholder=\"value\" value=\"\" list=\"value-template\" />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n </div>\n\n <datalist id=\"value-template\">\n ${options.map(({ display, value }) => html` <option value=\"${value}\">${display}</option> `)}\n </datalist>\n `\n }\n\n _onChange(e: Event) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: KeyValues = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = value || ''\n }\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: KeyValues) {\n var array: ArrayedKeyValues[] = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = value\n return sum\n }, {} as { [key: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = value\n return sum\n }, {} as { [key: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-card-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-card-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,CAAC;CACf,CAAA;AAGD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,gBAAW,GAAW,CAAC,CAAA;IAqCrD,CAAC;aA5CQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,
|
|
1
|
+
{"version":3,"file":"ox-input-card-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-card-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,CAAC;CACf,CAAA;AAGD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,gBAAW,GAAW,CAAC,CAAA;IAqCrD,CAAC;aA5CQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;IAKD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,CAAA;YAE3C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;SAC/B;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4DAE6C,IAAI,CAAC,WAAW;KACvE,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAkB,CAAA;QAE5D,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAEjC,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AArC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAR/C,iBAAiB;IADtB,aAAa,CAAC,sBAAsB,CAAC;GAChC,iBAAiB,CA6CtB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nconst DEFAULT = {\n activeIndex: 0\n}\n\n@customElement('ox-input-card-layout')\nclass OxInputCardLayout extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n }\n `\n\n @property({ type: Object }) value: any\n @property({ type: Number }) activeIndex: number = 0\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n let { activeIndex } = this.value || DEFAULT\n\n this.activeIndex = activeIndex\n }\n }\n\n render() {\n return html`\n <label>active index</label>\n <input type=\"number\" value-key=\"activeIndex\" .value=${this.activeIndex} />\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key') as 'activeIndex'\n\n if (!key) {\n return\n }\n\n this[key] = Number(element.value)\n\n this.value = {\n activeIndex: this.activeIndex\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-grid-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-grid-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAGlE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,cAAS,GAAqB,KAAK,CAAA;IA+CjE,CAAC;aAtDQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,
|
|
1
|
+
{"version":3,"file":"ox-input-grid-layout.js","sourceRoot":"","sources":["../../../src/ox-input-layout/ox-input-grid-layout.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAGlE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAQ8B,cAAS,GAAqB,KAAK,CAAA;IA+CjE,CAAC;aAtDQ,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;IAKD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YAE5C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;SAC3B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;SACzB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;6CAE8B,IAAI,CAAC,SAAS;;;;KAItD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA2B,CAAA;QAC3C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,QAAQ,GAAG,EAAE;YACX,KAAK,WAAW;gBACd,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAyB,CAAA;YACpD,QAAQ;SACT;QAED,IAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA/C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAoC;AAR3D,iBAAiB;IADtB,aAAa,CAAC,sBAAsB,CAAC;GAChC,iBAAiB,CAuDtB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('ox-input-grid-layout')\nclass OxInputGridLayout extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n }\n `\n\n @property({ type: Object }) value: any\n @property({ type: String }) direction: 'row' | 'column' = 'row'\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n let { direction = 'row' } = this.value || {}\n\n this.direction = direction\n }\n\n if (changes.has('value')) {\n }\n }\n\n render() {\n return html`\n <label>direction</label>\n <select value-key=\"direction\" .value=${this.direction}>\n <option value=\"row\" selected>row</option>\n <option value=\"column\">column</option>\n </select>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLSelectElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n switch (key) {\n case 'direction':\n this.direction = element.value as 'row' | 'column'\n default:\n }\n\n this.value = {\n direction: this.direction\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-mass-fraction.js","sourceRoot":"","sources":["../../src/ox-input-mass-fraction.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-select.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\n\ntype ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]\n ? ElementType\n : never\n\ntype FLUID = ArrayElement<typeof FLUIDS>\n\ntype MassFraction = { [key: FLUID]: number }\ntype ArrayedMassFraction = { key: FLUID; value: number }[]\n\n/**\n input component for mass-fraction map\n \n Example:\n \n <ox-input-mass-fraction \n value=${map}\n </ox-input-mass-fraction>\n */\n@customElement('ox-input-mass-fraction')\nexport class OxInputMassFraction extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n [records] {\n flex: 1;\n\n overflow: overlay;\n }\n\n [records] > div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin-bottom: var(--margin-narrow);\n }\n\n [data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin: var(--margin-narrow) 0;\n }\n\n button {\n display: inherit;\n align-self: center;\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);\n color: var(--button-color);\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-active-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input,\n ox-select {\n border: 0;\n border-bottom: var(--border-dark-color);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n\n input {\n padding: var(--input-padding);\n }\n\n ox-select {\n padding: 0;\n }\n\n [data-key] {\n flex: 2;\n }\n\n [data-value] {\n flex: 1;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n left: 0;\n }\n\n [records] > [nofraction] {\n display: block;\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) defaultValue: MassFraction = {}\n @property({ type: Object }) value: MassFraction = {}\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)\n private changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const arrayed = this._toArray(value)\n\n return html`\n <div records>\n ${arrayed.length\n ? arrayed.map(\n (item, idx) => html`\n <div data-record>\n <input type=\"text\" data-key .value=${item.key} disabled />\n <input\n type=\"number\"\n data-value\n placeholder=\"fraction\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n .value=${String(item.value)}\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._up(e)}\n tabindex=\"-1\"\n ?disabled=${idx === 0}\n >\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._down(e)}\n tabindex=\"-1\"\n ?disabled=${idx === arrayed.length - 1}\n >\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )\n : html`<div nofraction>No Fractions</div>`}\n </div>\n\n <div data-record-new>\n <ox-select\n data-key\n placeholder=\"Fluid\"\n .value=${live('')}\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n <ox-popup-list with-search> ${this.options} </ox-popup-list>\n </ox-select>\n\n <input\n type=\"number\"\n data-value\n placeholder=\"proportion\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"\"\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button\n title=\"fill with the values suggested\"\n @click=${() => {\n this.value = { ...this.defaultValue }\n this.dispatchChangeEvent()\n }}\n >\n <mwc-icon>settings_suggest</mwc-icon>\n </button>\n <button\n title=\"normalize fraction\"\n @click=${() => {\n this._normalize()\n }}\n >\n <mwc-icon>repartition</mwc-icon>\n </button>\n </div>\n `\n }\n\n _onChange(e: Event) {\n if (this.changingNow) {\n return\n }\n\n this.changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this.changingNow = false\n }\n\n _normalize() {\n const fraction: MassFraction = this.value || {}\n const sum = Object.values(fraction).reduce((a, b) => a + b, 0)\n this.value = Object.keys(fraction).reduce((newvalue, key) => {\n newvalue[key] = fraction[key] / sum\n return newvalue\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: MassFraction = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = Number(value) || 0\n }\n }\n\n this.value = newmap\n\n this.dispatchChangeEvent()\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: MassFraction) {\n var array: ArrayedMassFraction = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n dispatchChangeEvent() {\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-mass-fraction.js","sourceRoot":"","sources":["../../src/ox-input-mass-fraction.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-select.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { OxFormField } from './ox-form-field'\n\nconst FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']\n\ntype ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]\n ? ElementType\n : never\n\ntype FLUID = ArrayElement<typeof FLUIDS>\n\ntype MassFraction = { [key: FLUID]: number }\ntype ArrayedMassFraction = { key: FLUID; value: number }[]\n\n/**\n input component for mass-fraction map\n \n Example:\n \n <ox-input-mass-fraction \n value=${map}\n </ox-input-mass-fraction>\n */\n@customElement('ox-input-mass-fraction')\nexport class OxInputMassFraction extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n [records] {\n flex: 1;\n\n overflow: overlay;\n }\n\n [records] > div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin-bottom: var(--margin-narrow);\n }\n\n [data-record-new] {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--mass-fraction-gap, 3px);\n margin: var(--margin-narrow) 0;\n }\n\n button {\n display: inherit;\n align-self: center;\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);\n color: var(--button-color);\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-active-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input,\n ox-select {\n border: 0;\n border-bottom: var(--border-dark-color);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n\n input {\n padding: var(--input-padding);\n }\n\n ox-select {\n padding: 0;\n }\n\n [data-key] {\n flex: 2;\n }\n\n [data-value] {\n flex: 1;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n ox-popup-list {\n max-height: 300px;\n overflow: auto;\n left: 0;\n }\n\n [records] > [nofraction] {\n display: block;\n text-align: center;\n }\n `\n ]\n\n @property({ type: Object }) defaultValue: MassFraction = {}\n @property({ type: Object }) value: MassFraction = {}\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)\n private changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n const arrayed = this._toArray(value)\n\n return html`\n <div records>\n ${arrayed.length\n ? arrayed.map(\n (item, idx) => html`\n <div data-record>\n <input type=\"text\" data-key .value=${item.key} disabled />\n <input\n type=\"number\"\n data-value\n placeholder=\"fraction\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n .value=${String(item.value)}\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._up(e)}\n tabindex=\"-1\"\n ?disabled=${idx === 0}\n >\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button\n class=\"record-action\"\n @click=${(e: MouseEvent) => this._down(e)}\n tabindex=\"-1\"\n ?disabled=${idx === arrayed.length - 1}\n >\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )\n : html`<div nofraction>No Fractions</div>`}\n </div>\n\n <div data-record-new>\n <ox-select\n data-key\n placeholder=\"Fluid\"\n .value=${live('')}\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n <ox-popup-list with-search> ${this.options} </ox-popup-list>\n </ox-select>\n\n <input\n type=\"number\"\n data-value\n placeholder=\"proportion\"\n min=\"0\"\n max=\"1\"\n step=\"0.01\"\n value=\"\"\n list=\"value-template\"\n />\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button\n title=\"fill with the values suggested\"\n @click=${() => {\n this.value = { ...this.defaultValue }\n this.dispatchChangeEvent()\n }}\n >\n <mwc-icon>settings_suggest</mwc-icon>\n </button>\n <button\n title=\"normalize fraction\"\n @click=${() => {\n this._normalize()\n }}\n >\n <mwc-icon>repartition</mwc-icon>\n </button>\n </div>\n `\n }\n\n _onChange(e: Event) {\n if (this.changingNow) {\n return\n }\n\n this.changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this.changingNow = false\n }\n\n _normalize() {\n const fraction: MassFraction = this.value || {}\n const sum = Object.values(fraction).reduce((a, b) => a + b, 0)\n this.value = Object.keys(fraction).reduce((newvalue, key) => {\n newvalue[key] = fraction[key] / sum\n return newvalue\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: MassFraction = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-value]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (key) {\n newmap[key] = Number(value) || 0\n }\n }\n\n this.value = newmap\n\n this.dispatchChangeEvent()\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: MassFraction) {\n var array: ArrayedMassFraction = []\n\n for (var key in map) {\n array.push({\n key: key,\n value: map[key]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n if (input.type == 'checkbox') input.checked = false\n else input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n sum[key] = Number(value) || 0\n return sum\n }, {} as MassFraction)\n\n this.dispatchChangeEvent()\n }\n\n dispatchChangeEvent() {\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;
|
|
1
|
+
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGF,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,WAAW;IAAtD;;QAwC6B,UAAK,GAAa,EAAE,CAAA;IAsDjD,CAAC;aA7FQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,AArCY,CAqCZ;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+BAEA,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,KAAK;;;uCAG3C,IAAI;;gBAE3B,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;qCACe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe,KAAK;;;mBAG9E;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAErC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;gBAAE,SAAQ;;gBAC7D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;SAChC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AArD0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AA3ClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA8FjC;SA9FY,qBAAqB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n }\n #colors-container > div {\n display: grid;\n grid-template-columns: 34px 1fr 34px;\n grid-gap: var(--margin-default);\n align-items: center;\n justify-content: left;\n margin-bottom: var(--margin-narrow);\n }\n\n ox-input-color {\n width: 100%;\n }\n\n button {\n height: 100%;\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <button @click=${() => this._appendEditorColor()} data-index=${index}>\n <mwc-icon>add</mwc-icon>\n </button>\n <ox-input-color .value=${item}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <button @click=${(e: Event) => this._removeEditorColor(e)} data-index=${index}>\n <mwc-icon>remove</mwc-icon>\n </button>\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor() {\n this.value = [...this.value, 'black']\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).dataset.index)) continue\n else values.push(this.value[i])\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|