@operato/input 1.2.26 → 1.2.29
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 +19 -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 +7 -6
- 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
- package/src/ox-input-options.ts +8 -6
|
@@ -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 } 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 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 [placeholder='value'] {\n flex: 2;\n }\n `\n\n @property({ type: Object }) 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 />\n\n <select data-from-date .value=${String(item.fromDate || 0)}>\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 />\n\n <select data-to-date .value=${String(item.toDate || 0)}>\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 />\n\n <button class=\"record-action\" @click=${(e: Event) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n </div>\n `\n )}\n\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 <mwc-icon>add</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 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 } 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 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 [placeholder='value'] {\n flex: 2;\n }\n `\n\n @property({ type: Object }) 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 />\n\n <select data-from-date .value=${String(item.fromDate || 0)}>\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 />\n\n <select data-to-date .value=${String(item.toDate || 0)}>\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 />\n\n <button class=\"record-action\" @click=${(e: Event) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n </div>\n `\n )}\n\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 <mwc-icon>add</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 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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3D;AACH,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.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'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { detectOverflow } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\nfunction onmouseover(e: Event) {\n const element = e.target as HTMLSpanElement\n if (detectOverflow(element)) {\n element.setAttribute('data-tooltip', element.textContent!)\n }\n}\n\nfunction onmouseout(e: Event) {\n const element = e.target as HTMLSpanElement\n element.removeAttribute('data-tooltip')\n}\n\n@customElement('ox-select')\nexport class Select extends OxFormField {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: block;\n position: relative;\n border-bottom: var(--border-dark-color);\n }\n\n div {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n\n span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n mwc-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: 18px;\n color: var(--theme-primary-text-color, #3c3938);\n opacity: 0.7;\n }\n div:hover mwc-icon {\n color: var(--primary-color);\n }\n\n ::slotted(ox-popup-list) {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) name: string = ''\n @property({ type: String }) placeholder: string = ''\n\n @state() label: string | string[] = ''\n\n render() {\n const label =\n (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) || this.value || this.placeholder || ''\n\n return html`\n <div @click=${this.expand}>\n <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>\n <mwc-icon>expand_more</mwc-icon>\n </div>\n\n <slot></slot>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('select', (e: Event) => {\n this.value = (e as CustomEvent).detail\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n })\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n e.preventDefault()\n\n if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {\n this.expand()\n }\n })\n }\n\n async updated(changes: PropertyValues<this>) {\n // const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n if (changes.has('value')) {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n popupList.value = this.value\n\n await this.requestUpdate()\n\n this.label = popupList.getSelectedLabels()\n }\n }\n\n expand() {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n if (popupList) {\n popupList.style.width = `${this.offsetWidth}px`\n const align = popupList.hasAttribute('align-left') ? 'left' : 'right'\n\n const props = {\n top: this.offsetHeight,\n [align]: 0\n }\n\n popupList.open(props)\n }\n }\n}\n"]}
|