@operato/input 1.0.0-alpha.45 → 1.0.0-alpha.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/demo/index-work-shift.html +59 -0
  3. package/demo/index.html +1 -0
  4. package/dist/src/ox-form-field.d.ts +2 -2
  5. package/dist/src/ox-form-field.js.map +1 -1
  6. package/dist/src/ox-input-barcode.d.ts +1 -1
  7. package/dist/src/ox-input-barcode.js +1 -1
  8. package/dist/src/ox-input-barcode.js.map +1 -1
  9. package/dist/src/ox-input-search.d.ts +1 -0
  10. package/dist/src/ox-input-search.js +7 -1
  11. package/dist/src/ox-input-search.js.map +1 -1
  12. package/dist/src/ox-input-work-shift.d.ts +33 -0
  13. package/dist/src/ox-input-work-shift.js +229 -0
  14. package/dist/src/ox-input-work-shift.js.map +1 -0
  15. package/dist/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +9 -8
  17. package/src/ox-form-field.ts +2 -2
  18. package/src/ox-input-barcode.ts +2 -3
  19. package/src/ox-input-search.ts +9 -1
  20. package/src/ox-input-work-shift.ts +251 -0
  21. package/dist/src/ox-input-id.d.ts +0 -11
  22. package/dist/src/ox-input-id.js +0 -68
  23. package/dist/src/ox-input-id.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,39 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.47...v1.0.0-alpha.48) (2022-04-03)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * event handling for clicking magnify icon in filters-form - fetch data forcely ([cc17a05](https://github.com/hatiolab/operato/commit/cc17a056807a6e5018ee89d1f6be91e463671bac))
12
+
13
+
14
+ ### :rocket: New Features
15
+
16
+ * support copy and paste in data-grid ([9dd686f](https://github.com/hatiolab/operato/commit/9dd686f6817500863a1c36140ef01b39fcafef9f))
17
+
18
+
19
+
20
+ ## [1.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.46...v1.0.0-alpha.47) (2022-04-02)
21
+
22
+
23
+ ### :bug: Bug Fix
24
+
25
+ * ox-input-work-shift bug ([0a7ae96](https://github.com/hatiolab/operato/commit/0a7ae96e404eb6c846291075e12ac7fcfb9f88f9))
26
+ * ox-input-work-shift header ([816dbd0](https://github.com/hatiolab/operato/commit/816dbd06e53a44a29413e7605431ad62f2090a43))
27
+
28
+
29
+
30
+ ## [1.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.45...v1.0.0-alpha.46) (2022-04-02)
31
+
32
+
33
+ ### :rocket: New Features
34
+
35
+ * add ox-input-work-shift ([f5c78e7](https://github.com/hatiolab/operato/commit/f5c78e7e9bfcbc456e9da269d069f843ee3e043c))
36
+
37
+
38
+
6
39
  ## [1.0.0-alpha.45](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.44...v1.0.0-alpha.45) (2022-03-31)
7
40
 
8
41
  **Note:** Version bump only for package @operato/input
package/demo/index-work-shift.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ </head>
11
+ <body>
12
+ <form id="demo"></form>
13
+
14
+ <script type="module">
15
+ import { html, render } from 'lit'
16
+ import '../dist/src/ox-input-work-shift.js'
17
+
18
+ const form = document.querySelector('#demo')
19
+
20
+ const value = [
21
+ {
22
+ name: 'DAY',
23
+ fromDate: -1,
24
+ fromTime: '22:00',
25
+ toDate: 0,
26
+ toTime: '06:00'
27
+ },
28
+ {
29
+ name: 'SWING',
30
+ fromDate: 0,
31
+ fromTime: '06:00',
32
+ toDate: 0,
33
+ toTime: '14:00'
34
+ },
35
+ {
36
+ name: 'NIGHT',
37
+ fromDate: 0,
38
+ fromTime: '14:00',
39
+ toDate: 0,
40
+ toTime: '22:00'
41
+ }
42
+ ]
43
+
44
+ render(
45
+ html`
46
+ <ox-input-work-shift
47
+ name="work-shift"
48
+ rangetype="number"
49
+ .value=${value}
50
+ @change=${e => {
51
+ console.log(e.target.value)
52
+ }}
53
+ ></ox-input-work-shift>
54
+ `,
55
+ form
56
+ )
57
+ </script>
58
+ </body>
59
+ </html>
package/demo/index.html CHANGED
@@ -34,5 +34,6 @@
34
34
  <a href="./index-value-ranges.html">value-ranges</a>
35
35
  <a href="./index-crontab.html">crontab</a>
36
36
  <a href="./index-partition-keys.html">partition-keys</a>
37
+ <a href="./index-work-shift.html">work-shift</a>
37
38
  </body>
38
39
  </html>
package/dist/src/ox-form-field.d.ts CHANGED
@@ -2,8 +2,8 @@ import { LitElement } from 'lit';
2
2
  export declare abstract class OxFormField extends LitElement {
3
3
  name?: string;
4
4
  value?: any;
5
- private _form;
6
- private _formdataEventHandler;
5
+ protected _form: HTMLFormElement | null;
6
+ protected _formdataEventHandler: EventListener | null;
7
7
  connectedCallback(): void;
8
8
  disconnectedCallback(): void;
9
9
  protected appendFormData({ formData }: FormDataEvent): void;
package/dist/src/ox-form-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIU,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC5D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE;YAC9B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SACtB;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA3C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC9C;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n @property({ type: String, attribute: true }) name?: string\n @property() value?: any\n\n private _form: HTMLFormElement | null = null\n private _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [this.value]\n }\n\n values.forEach((value: any) => {\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n })\n }\n}\n"]}
1
+ {"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE;YAC9B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SACtB;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA3C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC9C;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n @property({ type: String, attribute: true }) name?: string\n @property() value?: any\n\n protected _form: HTMLFormElement | null = null\n protected _formdataEventHandler: EventListener | null = null\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n if (this.name) {\n this._form = this.closest('form')\n if (this._form) {\n this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n this._form.addEventListener('formdata', this._formdataEventHandler)\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this._form) {\n this._form.removeEventListener('formdata', this._formdataEventHandler!)\n this._form = null\n this._formdataEventHandler = null\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [this.value]\n }\n\n values.forEach((value: any) => {\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n })\n }\n}\n"]}
package/dist/src/ox-input-barcode.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import '@operato/popup/ox-popup.js';
2
- import { OxPopup } from '@operato/popup';
3
2
  import { BrowserMultiFormatReader } from '@zxing/library';
4
3
  import { OxFormField } from './ox-form-field.js';
4
+ import { OxPopup } from '@operato/popup';
5
5
  export declare class OxInputBarcode extends OxFormField {
6
6
  static styles: import("lit").CSSResult[];
7
7
  scannable?: boolean;
package/dist/src/ox-input-barcode.js CHANGED
@@ -144,7 +144,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
144
144
  input.focus();
145
145
  this.value = input.value = String(result);
146
146
  if (!this.withoutEnter) {
147
- input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
147
+ input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }));
148
148
  input.dispatchEvent(new CustomEvent('change', {
149
149
  bubbles: true,
150
150
  composed: true,
package/dist/src/ox-input-barcode.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { BrowserMultiFormatReader } from '@zxing/library'\nimport { OxFormField } from './ox-form-field.js'\nimport { OxPopup } from '@operato/popup'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) declare value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
package/dist/src/ox-input-search.d.ts CHANGED
@@ -10,4 +10,5 @@ export declare class OxInputSearch extends OxFormField {
10
10
  render(): import("lit-html").TemplateResult<1>;
11
11
  firstUpdated(): void;
12
12
  _onChangeValue(e: Event): void;
13
+ _onClickSearch(e: Event): void;
13
14
  }
package/dist/src/ox-input-search.js CHANGED
@@ -37,7 +37,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
37
37
  ]; }
38
38
  render() {
39
39
  return html `
40
- <mwc-icon>search</mwc-icon>
40
+ <mwc-icon @click=${(e) => this._onClickSearch(e)}>search</mwc-icon>
41
41
  <input
42
42
  type="text"
43
43
  .value=${this.value || ''}
@@ -58,6 +58,12 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
58
58
  detail: this.value
59
59
  }));
60
60
  }
61
+ _onClickSearch(e) {
62
+ e.stopPropagation();
63
+ if (this._form) {
64
+ this._form.requestSubmit();
65
+ }
66
+ }
61
67
  };
62
68
  __decorate([
63
69
  property({ type: String })
package/dist/src/ox-input-search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;aACrC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;KACF,CAAA;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;uBACV,IAAI,CAAC,WAAW,IAAI,EAAE;kBAC3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;QAE7B,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;CACF,CAAA;AAhC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;4CAAyB;AAhC7B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA8DzB;SA9DY,aAAa","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n static styles = [\n css`\n :host {\n flex: 1;\n\n display: flex;\n position: relative;\n align-items: center;\n\n --mdc-icon-size: 20px;\n }\n\n [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n font-size: var(--fontsize-large);\n outline: none;\n }\n\n mwc-icon {\n position: absolute;\n color: var(--secondary-color);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <mwc-icon>search</mwc-icon>\n <input\n type=\"text\"\n .value=${this.value || ''}\n .placeholder=${this.placeholder || ''}\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChangeValue.bind(this))\n }\n\n _onChangeValue(e: Event) {\n e.stopPropagation()\n this.value = this.input.value\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-search.js","sourceRoot":"","sources":["../../src/ox-input-search.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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;aACrC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;KACF,CAAA;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;iBAG5C,IAAI,CAAC,KAAK,IAAI,EAAE;uBACV,IAAI,CAAC,WAAW,IAAI,EAAE;kBAC3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;QAE7B,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;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAA;SAC3B;IACH,CAAC;CACF,CAAA;AAxC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;4CAAyB;AAhC7B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAsEzB;SAtEY,aAAa","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n static styles = [\n css`\n :host {\n flex: 1;\n\n display: flex;\n position: relative;\n align-items: center;\n\n --mdc-icon-size: 20px;\n }\n\n [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n font-size: var(--fontsize-large);\n outline: none;\n }\n\n mwc-icon {\n position: absolute;\n color: var(--secondary-color);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <mwc-icon @click=${(e: Event) => this._onClickSearch(e)}>search</mwc-icon>\n <input\n type=\"text\"\n .value=${this.value || ''}\n .placeholder=${this.placeholder || ''}\n @change=${(e: Event) => this._onChangeValue(e)}\n />\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChangeValue.bind(this))\n }\n\n _onChangeValue(e: Event) {\n e.stopPropagation()\n this.value = this.input.value\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _onClickSearch(e: Event) {\n e.stopPropagation()\n\n if (this._form) {\n this._form.requestSubmit()\n }\n }\n}\n"]}
package/dist/src/ox-input-work-shift.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import './ox-input-color';
5
+ import { OxFormField } from './ox-form-field.js';
6
+ declare type WorkShift = {
7
+ name: string;
8
+ fromDate: number;
9
+ fromTime: string;
10
+ toDate: number;
11
+ toTime: string;
12
+ };
13
+ /**
14
+ work-shift array value editor element
15
+
16
+ Example:
17
+
18
+ <ox-input-work-shift
19
+ .value=${value}
20
+ </ox-input-work-shift>
21
+ */
22
+ export declare class OxInputWorkShift extends OxFormField {
23
+ static styles: import("lit").CSSResult;
24
+ value: WorkShift[];
25
+ private _changingNow;
26
+ firstUpdated(): void;
27
+ render(): import("lit-html").TemplateResult<1>;
28
+ _onChange(e: Event): void;
29
+ _build(includeNewRecord?: boolean): void;
30
+ _add(): void;
31
+ _delete(e: Event): void;
32
+ }
33
+ export {};
package/dist/src/ox-input-work-shift.js ADDED
@@ -0,0 +1,229 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { __decorate } from "tslib";
5
+ import './ox-input-color';
6
+ import { css, html } from 'lit';
7
+ import { customElement, property } from 'lit/decorators.js';
8
+ import { OxFormField } from './ox-form-field.js';
9
+ /**
10
+ work-shift array value editor element
11
+
12
+ Example:
13
+
14
+ <ox-input-work-shift
15
+ .value=${value}
16
+ </ox-input-work-shift>
17
+ */
18
+ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
19
+ constructor() {
20
+ super(...arguments);
21
+ this.value = [];
22
+ this._changingNow = false;
23
+ }
24
+ static { this.styles = css `
25
+ :host {
26
+ display: flex;
27
+ flex-direction: column;
28
+ align-content: center;
29
+
30
+ width: 100%;
31
+ overflow: hidden;
32
+ border: 1px solid #ccc;
33
+ }
34
+
35
+ div {
36
+ display: flex;
37
+ flex-flow: row nowrap;
38
+ align-items: center;
39
+
40
+ border-bottom: 1px solid #c0c0c0;
41
+ }
42
+
43
+ div:last-child {
44
+ border-bottom: none;
45
+ }
46
+
47
+ div > * {
48
+ min-width: 0px;
49
+ margin: 2px;
50
+ padding: 0;
51
+ }
52
+
53
+ button,
54
+ empty-element {
55
+ width: 20px;
56
+ text-align: center;
57
+ }
58
+
59
+ input,
60
+ select,
61
+ span {
62
+ flex: 1;
63
+ }
64
+
65
+ input:required:invalid {
66
+ border: 1px dashed red;
67
+ }
68
+
69
+ [placeholder='value'] {
70
+ flex: 2;
71
+ }
72
+
73
+ div {
74
+ border-bottom: 1px solid #c0c0c0;
75
+ }
76
+
77
+ div:last-child {
78
+ border-bottom: none;
79
+ }
80
+ `; }
81
+ firstUpdated() {
82
+ this.renderRoot.addEventListener('change', this._onChange.bind(this));
83
+ }
84
+ render() {
85
+ return html `
86
+ <div data-header>
87
+ <span>name</span>
88
+ <span>from date</span>
89
+ <span>from time</span>
90
+ <span>to date</span>
91
+ <span>to time</span>
92
+ <empty-element></empty-element>
93
+ </div>
94
+
95
+ ${this.value.map(item => html `
96
+ <div data-record>
97
+ <input type="text" data-name .value=${item.name} required />
98
+
99
+ <select data-from-date .value=${item.fromDate || 0}>
100
+ <option value="-1">The day before</option>
101
+ <option value="0">The day</option>
102
+ <option value="1">The day after</option>
103
+ </select>
104
+ <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
105
+
106
+ <select data-to-date .value=${item.toDate || 0}>
107
+ <option value="-1">The day before</option>
108
+ <option value="0">The day</option>
109
+ <option value="1">The day after</option>
110
+ </select>
111
+ <input type="time" data-to-time .value=${item.toTime} step="1800" required />
112
+
113
+ <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">-</button>
114
+ </div>
115
+ `)}
116
+
117
+ <div data-record-new>
118
+ <input type="text" data-name />
119
+
120
+ <select data-from-date>
121
+ <option value="-1">The day before</option>
122
+ <option value="0" selected>The day</option>
123
+ <option value="+1">The day after</option>
124
+ </select>
125
+ <input type="time" data-from-time step="1800" />
126
+
127
+ <select data-to-date>
128
+ <option value="-1">The day before</option>
129
+ <option value="0" selected>The day</option>
130
+ <option value="+1">The day after</option>
131
+ </select>
132
+ <input type="time" data-to-time step="1800" />
133
+
134
+ <button class="record-action" @click=${(e) => this._add()} tabindex="-1">+</button>
135
+ </div>
136
+ `;
137
+ }
138
+ _onChange(e) {
139
+ if (this._changingNow) {
140
+ return;
141
+ }
142
+ this._changingNow = true;
143
+ const input = e.target;
144
+ const div = input.parentElement;
145
+ if (div.hasAttribute('data-record')) {
146
+ this._build();
147
+ }
148
+ else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
149
+ this._add();
150
+ }
151
+ this._changingNow = false;
152
+ }
153
+ _build(includeNewRecord) {
154
+ if (includeNewRecord) {
155
+ var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
156
+ }
157
+ else {
158
+ var records = this.renderRoot.querySelectorAll('[data-record]');
159
+ }
160
+ var value = [];
161
+ for (var i = 0; i < records.length; i++) {
162
+ const record = records[i];
163
+ const name = record.querySelector('[data-name]').value;
164
+ const fromDate = record.querySelector('[data-from-date]').value;
165
+ const fromTime = record.querySelector('[data-from-time]').value;
166
+ const toDate = record.querySelector('[data-to-date]').value;
167
+ const toTime = record.querySelector('[data-to-time]').value;
168
+ if (!name) {
169
+ ;
170
+ record.querySelector('[data-name]').focus();
171
+ return;
172
+ }
173
+ if (!fromDate) {
174
+ ;
175
+ record.querySelector('[data-from-date]').focus();
176
+ return;
177
+ }
178
+ if (!fromTime) {
179
+ ;
180
+ record.querySelector('[data-from-time]').focus();
181
+ return;
182
+ }
183
+ if (!toDate) {
184
+ ;
185
+ record.querySelector('[data-to-date]').focus();
186
+ return;
187
+ }
188
+ if (!toTime) {
189
+ ;
190
+ record.querySelector('[data-to-time]').focus();
191
+ return;
192
+ }
193
+ if (name) {
194
+ value.push({
195
+ name,
196
+ fromDate: Number(fromDate),
197
+ fromTime,
198
+ toDate: Number(toDate),
199
+ toTime
200
+ });
201
+ }
202
+ }
203
+ this.value = value;
204
+ this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
205
+ }
206
+ _add() {
207
+ this._build(true);
208
+ const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])');
209
+ for (var i = 0; i < inputs.length; i++) {
210
+ let input = inputs[i];
211
+ input.value = '';
212
+ }
213
+ inputs[0].focus();
214
+ }
215
+ _delete(e) {
216
+ const record = e.target.parentElement;
217
+ const dataName = record.querySelector('[data-name]');
218
+ dataName.name = '';
219
+ this._build();
220
+ }
221
+ };
222
+ __decorate([
223
+ property({ type: Object })
224
+ ], OxInputWorkShift.prototype, "value", void 0);
225
+ OxInputWorkShift = __decorate([
226
+ customElement('ox-input-work-shift')
227
+ ], OxInputWorkShift);
228
+ export { OxInputWorkShift };
229
+ //# sourceMappingURL=ox-input-work-shift.js.map
package/dist/src/ox-input-work-shift.js.map ADDED
@@ -0,0 +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 './ox-input-color'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\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@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n\n width: 100%;\n overflow: hidden;\n border: 1px solid #ccc;\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n\n border-bottom: 1px solid #c0c0c0;\n }\n\n div:last-child {\n border-bottom: none;\n }\n\n div > * {\n min-width: 0px;\n margin: 2px;\n padding: 0;\n }\n\n button,\n empty-element {\n width: 20px;\n text-align: center;\n }\n\n input,\n select,\n span {\n flex: 1;\n }\n\n input:required:invalid {\n border: 1px dashed red;\n }\n\n [placeholder='value'] {\n flex: 2;\n }\n\n div {\n border-bottom: 1px solid #c0c0c0;\n }\n\n div:last-child {\n border-bottom: none;\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 return html`\n <div data-header>\n <span>name</span>\n <span>from date</span>\n <span>from time</span>\n <span>to date</span>\n <span>to time</span>\n <empty-element></empty-element>\n </div>\n\n ${this.value.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=${item.fromDate || 0}>\n <option value=\"-1\">The day before</option>\n <option value=\"0\">The day</option>\n <option value=\"1\">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=${item.toDate || 0}>\n <option value=\"-1\">The day before</option>\n <option value=\"0\">The day</option>\n <option value=\"1\">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\">-</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\">The day before</option>\n <option value=\"0\" selected>The day</option>\n <option value=\"+1\">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\">The day before</option>\n <option value=\"0\" selected>The day</option>\n <option value=\"+1\">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\">+</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"]}