@operato/input 2.0.0-alpha.62 → 2.0.0-alpha.68
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/demo/index-multiple-colors.html +14 -2
- package/demo/index-partition-keys.html +13 -2
- package/demo/index-select.html +20 -9
- package/demo/index-table.html +13 -2
- package/demo/index.html +13 -2
- package/dist/src/ox-input-duration.js +10 -4
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-file.js +1 -0
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-key-values.js +2 -3
- package/dist/src/ox-input-key-values.js.map +1 -1
- package/dist/src/ox-input-mass-fraction.js +28 -19
- package/dist/src/ox-input-mass-fraction.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.js +3 -0
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js +2 -0
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.js +2 -0
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-privilege.js +15 -30
- package/dist/src/ox-input-privilege.js.map +1 -1
- package/dist/src/ox-input-unit-number.js +2 -1
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-input-value-map.js +2 -0
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.js +2 -0
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +2 -0
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/ox-input-duration.ts +10 -4
- package/src/ox-input-file.ts +1 -0
- package/src/ox-input-key-values.ts +2 -3
- package/src/ox-input-mass-fraction.ts +28 -19
- package/src/ox-input-multiple-colors.ts +3 -0
- package/src/ox-input-options.ts +2 -0
- package/src/ox-input-partition-keys.ts +2 -0
- package/src/ox-input-privilege.ts +15 -30
- package/src/ox-input-unit-number.ts +2 -1
- package/src/ox-input-value-map.ts +2 -0
- package/src/ox-input-value-ranges.ts +2 -0
- package/src/ox-input-work-shift.ts +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n <ox-input-work-shift\n .value=${value}\n </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n overflow: hidden;\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--margin-default);\n }\n\n empty-element {\n width: 34px;\n text-align: center;\n }\n\n input,\n select,\n span {\n flex: 1;\n }\n [data-header] {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n padding: var(--padding-narrow);\n }\n [data-header] span {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n text-align: center;\n }\n [data-record] {\n margin-bottom: var(--margin-narrow);\n }\n input,\n select {\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 max-height: 35px;\n }\n input:focus,\n select:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:required:invalid {\n border: 1px dashed red;\n }\n input[type='time'] {\n padding: 2px var(--padding-default);\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: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 [placeholder='value'] {\n flex: 2;\n }\n `\n\n @property({ type: Array }) value: WorkShift[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const workshifts = this.value || []\n\n return html`\n <div data-header>\n <span>${msg('name')}</span>\n <span>${msg('from date')}</span>\n <span>${msg('from time')}</span>\n <span>${msg('to date')}</span>\n <span>${msg('to time')}</span>\n <empty-element></empty-element>\n </div>\n\n ${workshifts.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <button\n class=\"record-action\"\n @click=${(e: Event) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n </div>\n `\n )}\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n <input type=\"text\" data-name />\n\n <select data-from-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time step=\"1800\" />\n\n <select data-to-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time step=\"1800\" />\n\n <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n `}\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 div = input.parentElement as HTMLDivElement\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.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]')\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]')\n }\n\n var value: WorkShift[] = []\n for (var i = 0; i < records.length; i++) {\n const record = records[i]\n\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n if (!name) {\n ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromDate) {\n ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromTime) {\n ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n return\n }\n\n if (!toDate) {\n ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!toTime) {\n ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n return\n }\n\n if (name) {\n value.push({\n name,\n fromDate: Number(fromDate),\n fromTime,\n toDate: Number(toDate),\n toTime\n })\n }\n }\n\n this.value = value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: Event) {\n const record = (e.target as Element).parentElement\n\n const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n dataName.name = ''\n\n this._build()\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n <ox-input-work-shift\n .value=${value}\n </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n overflow: hidden;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--margin-default);\n }\n\n empty-element {\n width: 34px;\n text-align: center;\n }\n\n input,\n select,\n span {\n flex: 1;\n }\n [data-header] {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n padding: var(--padding-narrow);\n }\n [data-header] span {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n text-align: center;\n }\n [data-record] {\n margin-bottom: var(--margin-narrow);\n }\n input,\n select {\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 max-height: 35px;\n }\n input:focus,\n select:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:required:invalid {\n border: 1px dashed red;\n }\n input[type='time'] {\n padding: 2px var(--padding-default);\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: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 [placeholder='value'] {\n flex: 2;\n }\n `\n\n @property({ type: Array }) value: WorkShift[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const workshifts = this.value || []\n\n return html`\n <div data-header>\n <span>${msg('name')}</span>\n <span>${msg('from date')}</span>\n <span>${msg('from time')}</span>\n <span>${msg('to date')}</span>\n <span>${msg('to time')}</span>\n <empty-element></empty-element>\n </div>\n\n ${workshifts.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <button\n class=\"record-action\"\n @click=${(e: Event) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n </div>\n `\n )}\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n <input type=\"text\" data-name />\n\n <select data-from-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time step=\"1800\" />\n\n <select data-to-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time step=\"1800\" />\n\n <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n `}\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 div = input.parentElement as HTMLDivElement\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.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]')\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]')\n }\n\n var value: WorkShift[] = []\n for (var i = 0; i < records.length; i++) {\n const record = records[i]\n\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n if (!name) {\n ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromDate) {\n ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromTime) {\n ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n return\n }\n\n if (!toDate) {\n ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!toTime) {\n ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n return\n }\n\n if (name) {\n value.push({\n name,\n fromDate: Number(fromDate),\n fromTime,\n toDate: Number(toDate),\n toTime\n })\n }\n }\n\n this.value = value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: Event) {\n const record = (e.target as Element).parentElement\n\n const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n dataName.name = ''\n\n this._build()\n }\n}\n"]}
|