@operato/input 10.12.0 → 10.15.0
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 +9 -0
- package/coverage/lcov-report/index.html +96 -36
- package/coverage/lcov-report/webpack/bootstrap.html +1 -1
- package/coverage/lcov-report/webpack/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/define property getters.html +1 -1
- package/coverage/lcov-report/webpack/runtime/global.html +1 -1
- package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html +1 -1
- package/coverage/lcov-report/webpack/runtime/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/make namespace object.html +1 -1
- package/coverage/lcov.info +10566 -550
- package/dist/src/input-styles.js +0 -1
- package/dist/src/input-styles.js.map +1 -1
- package/dist/src/ox-buttons-radio.js +5 -4
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-input-3axis.js +2 -1
- package/dist/src/ox-input-3axis.js.map +1 -1
- package/dist/src/ox-input-3dish.js +2 -1
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-barcode.js +2 -1
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-crontab.js +3 -2
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-duration.js +3 -2
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-select-buttons.js +4 -3
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/test/form-element-height.test.d.ts +1 -0
- package/dist/test/form-element-height.test.js +37 -0
- package/dist/test/form-element-height.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/test/form-element-height.test.ts +43 -0
package/dist/src/input-styles.js
CHANGED
|
@@ -79,7 +79,6 @@ export const InputStyles = css `
|
|
|
79
79
|
*/
|
|
80
80
|
--ox-input-padding: calc(var(--ox-input-gap) / 2);
|
|
81
81
|
--ox-input-gap: 4px;
|
|
82
|
-
--ox-input-height: 30px;
|
|
83
82
|
|
|
84
83
|
/* ── 타이포 ─────────────────────────────────────────── */
|
|
85
84
|
--ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-styles.js","sourceRoot":"","sources":["../../src/input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"input-styles.js","sourceRoot":"","sources":["../../src/input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF7B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * 입력 컴포넌트 공통 스타일 계약 (L2).\n *\n * ## 왜 필요한가\n * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다\n * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).\n * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,\n * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.\n *\n * ## 계층\n * ```\n * L1 --md-sys-* Material 팔레트·shape (앱/프레임워크 테마 소유)\n * L2 --ox-input-* 입력 의미 계약 (이 패키지 소유 ← 여기)\n * L3 --ox-select-* 등 컴포넌트 미세 조정 (각 컴포넌트 소유)\n * ```\n *\n * ## 규칙\n * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두\n * 아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.\n * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.\n * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.\n * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.\n *\n * ## 사용법\n * ```ts\n * static styles = [InputStyles, css`...`] // 컴포넌트 styles 배열 맨 앞에\n * ```\n * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:\n * ```css\n * padding: var(--ox-input-padding);\n * border-radius: var(--ox-input-radius);\n * ```\n * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:\n * ```css\n * color: var(--ox-select-color, var(--ox-input-color));\n * ```\n */\nexport const InputStyles = css`\n :host {\n /* ── 색 ─────────────────────────────────────────────── */\n --ox-input-color: var(--md-sys-color-on-surface, #1a1b21);\n --ox-input-background: var(--md-sys-color-surface, #fff);\n --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));\n --ox-input-border: 1px solid var(--ox-input-border-color);\n /*\n * 쉬고 있는 밑줄 — 테두리 상자의 선보다 옅다.\n *\n * outline 은 상자를 두른 필드의 선이다. 밑줄만 있는 형태에 그것을 쓰면 필터 줄에서 옆의 필드보다\n * 진해 보인다. 이 패키지 안에서도 세 부품이 손으로 rgba(0, 0, 0, 0.15) 또는 #e0e0e0 을 박았고,\n * 그 값들이 모두 outline-variant(rgb 214 219 224)에 해당한다 — 손으로 도달한 값이 셋 다 같다는\n * 것이 의도의 증거다. 그 값을 계약으로 올린다.\n */\n --ox-input-underline-color: var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n --ox-input-underline: 1px solid var(--ox-input-underline-color);\n --ox-input-focus-color: var(--md-sys-color-primary, #495d92);\n --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);\n /* 상태 색 — 검증 실패 / 필수 표시 */\n --ox-input-invalid-color: var(--md-sys-color-error, #b3261e);\n --ox-input-required-color: var(--ox-input-invalid-color);\n /* readonly 는 흐리게 하지 않는다(값을 읽는 상태이므로). 배경으로만 구분한다. */\n --ox-input-readonly-background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));\n\n /* ── 형태 ───────────────────────────────────────────── */\n --ox-input-radius: var(--md-sys-shape-corner-small, 4px);\n /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */\n --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));\n /*\n * ── 밑줄만 있는 형태의 여백이다 ─────────────────────────────────────\n * 4px 9px 이었다. 그건 **테두리 상자가 있는 필드**의 값이다 — 이 필드들은 아래 밑줄만\n * 있으므로, 가로 9px 은 글자와 아이콘을 밑줄 끝에서 멀찍이 들여놓는다. 필터 줄처럼 촘촘한\n * 자리에서 그 헐렁함이 옆의 검색 입력과 어긋나 보인다.\n *\n * 실측(2026-09-03, 직원 목록 필터): 셀렉터 안쪽 padding 4px/9px · 높이 22px · 아이콘이 오른쪽\n * 끝에서 9px. 같은 줄의 검색 입력은 2px · 20px · 2px.\n *\n * **operato 안에서 이미 어긋나 있었다** — ox-input-search 는 --ox-input-gap 의 절반(2px)을\n * 쓴다. 그 값으로 모은다. 값을 베끼지 않고 같은 식에서 파생시켜 둘이 다시 갈라지지 않게 한다.\n */\n --ox-input-padding: calc(var(--ox-input-gap) / 2);\n --ox-input-gap: 4px;\n\n /* ── 타이포 ─────────────────────────────────────────── */\n --ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n /* 보조 텍스트(설명·단위·캡션). 기존에 10~13px 로 흩어져 있던 것을 한 단계로 수렴. */\n --ox-input-font-size-small: var(--md-sys-typescale-label-medium-size, 0.75rem);\n --ox-input-font-family: inherit;\n --ox-input-font: normal var(--ox-input-font-size) var(--ox-input-font-family);\n --ox-input-line-height: 1.4;\n\n /* ── 거동·깊이 ──────────────────────────────────────── */\n --ox-input-transition: all 0.2s ease;\n --ox-input-shadow: 0 4px 16px var(--md-sys-color-shadow-alpha, rgba(0, 0, 0, 0.2));\n /* 모달 뒤 배경(스크림) — 알파가 본질이라 토큰 파생이 아닌 반투명 값을 유지하되 조정 가능하게 */\n --ox-input-scrim: rgba(0, 0, 0, 0.5);\n --ox-input-disabled-opacity: 0.5;\n\n box-sizing: border-box;\n color: var(--ox-input-color);\n font: var(--ox-input-font);\n line-height: var(--ox-input-line-height);\n }\n\n /* disabled — 상호작용 불가 + 흐리게. 폼 데이터 제외는 OxFormField 가 처리. */\n :host([disabled]) {\n opacity: var(--ox-input-disabled-opacity);\n pointer-events: none;\n }\n\n /* readonly — 값을 읽고 선택·복사할 수 있어야 하므로 흐리게 하지 않고 배경으로만 구분.\n 실제 수정 차단은 각 컴포넌트가 입력 요소에 readonly 를 전달해 처리한다. */\n :host([readonly]) {\n --ox-input-background: var(--ox-input-readonly-background);\n cursor: default;\n }\n\n /* invalid — 테두리·포커스 색을 error 로 전환. 컴포넌트가 --ox-input-border 를 쓰면 자동 반영. */\n :host([invalid]) {\n --ox-input-border-color: var(--ox-input-invalid-color);\n --ox-input-focus-color: var(--ox-input-invalid-color);\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n`\n"]}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
7
8
|
import { OxFormField } from './ox-form-field.js';
|
|
8
9
|
import { InputStyles } from './input-styles.js';
|
|
9
10
|
/**
|
|
@@ -40,7 +41,7 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
|
|
|
40
41
|
|
|
41
42
|
--md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
42
43
|
--md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
43
|
-
--md-outlined-button-container-height:
|
|
44
|
+
--md-outlined-button-container-height: ${formElementHeight('--form-element-height-medium')};
|
|
44
45
|
--md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
|
|
45
46
|
--md-outlined-button-leading-space: calc(var(--ox-input-gap) * 3);
|
|
46
47
|
--md-outlined-button-trailing-space: calc(var(--ox-input-gap) * 3);
|
|
@@ -51,7 +52,7 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
|
|
|
51
52
|
--md-filled-button-container-color: var(--md-sys-color-primary);
|
|
52
53
|
--md-filled-button-label-text-color: var(--md-sys-color-primary-container);
|
|
53
54
|
--md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
54
|
-
--md-filled-button-container-height:
|
|
55
|
+
--md-filled-button-container-height: ${formElementHeight('--form-element-height-medium')};
|
|
55
56
|
--md-filled-button-container-shape: var(--md-sys-shape-corner-small);
|
|
56
57
|
--md-filled-button-leading-space: calc(var(--ox-input-gap) * 3);
|
|
57
58
|
--md-filled-button-trailing-space: calc(var(--ox-input-gap) * 3);
|
|
@@ -59,10 +60,10 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
|
|
|
59
60
|
--md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
|
|
60
61
|
--md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
|
|
61
62
|
|
|
62
|
-
--md-text-button-container-height:
|
|
63
|
+
--md-text-button-container-height: ${formElementHeight('--form-element-height-medium')};
|
|
63
64
|
--md-text-button-container-shape: var(--md-sys-shape-corner-small);
|
|
64
65
|
|
|
65
|
-
--md-elevated-button-container-height:
|
|
66
|
+
--md-elevated-button-container-height: ${formElementHeight('--form-element-height-medium')};
|
|
66
67
|
--md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
|
|
67
68
|
}
|
|
68
69
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n <ox-buttons-radio\n class=\"light\"\n @change=${(e: CustomEvent) => console.log(e.detail)}\n value=\"1\"\n >\n <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: inline-block;\n\n --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-outlined-button-container-height: ${formElementHeight('--form-element-height-medium')};\n --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n --md-outlined-button-leading-space: calc(var(--ox-input-gap) * 3);\n --md-outlined-button-trailing-space: calc(var(--ox-input-gap) * 3);\n --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n --md-filled-button-container-color: var(--md-sys-color-primary);\n --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-filled-button-container-height: ${formElementHeight('--form-element-height-medium')};\n --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n --md-filled-button-leading-space: calc(var(--ox-input-gap) * 3);\n --md-filled-button-trailing-space: calc(var(--ox-input-gap) * 3);\n --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n --md-text-button-container-height: ${formElementHeight('--form-element-height-medium')};\n --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n --md-elevated-button-container-height: ${formElementHeight('--form-element-height-medium')};\n --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n }\n `\n ]\n\n /**\n * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n */\n @property({ type: Object }) value: Object | null = null\n @property({ type: Boolean }) mandatory!: boolean\n\n @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n this._onChanged()\n })\n\n render() {\n return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this._slotObserver?.observe(this, { childList: true })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChanged()\n }\n\n get buttons() {\n return Array.from(this.querySelectorAll('*'))\n }\n\n _onChanged() {\n this.buttons.forEach(button => {\n if (this.value === button.getAttribute('data-value')) {\n button.setAttribute('active', '')\n } else {\n button.removeAttribute('active')\n }\n })\n }\n\n _onTapButton(e: Event) {\n var target = e.target as HTMLElement\n target = target.closest('[data-value]') as HTMLElement\n\n if (!target || target === this) {\n return\n }\n\n var old = this.value\n\n if (!this.mandatory) {\n if (!target.getAttribute('active')) {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n } else {\n this.value = null\n target.removeAttribute('active')\n }\n } else {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n }\n\n if (old !== this.value) {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
6
|
import { customElement } from 'lit/decorators.js';
|
|
7
7
|
import { localized } from '@lit/localize';
|
|
8
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
8
9
|
import { OxFormField } from './ox-form-field.js';
|
|
9
10
|
import { InputStyles } from './input-styles.js';
|
|
10
11
|
let OxInput3Axis = class OxInput3Axis extends OxFormField {
|
|
@@ -18,7 +19,7 @@ let OxInput3Axis = class OxInput3Axis extends OxFormField {
|
|
|
18
19
|
input {
|
|
19
20
|
box-sizing: border-box;
|
|
20
21
|
padding: 0 var(--ox-input-gap);
|
|
21
|
-
height:
|
|
22
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
22
23
|
border: 1px solid var(--md-sys-color-outline);
|
|
23
24
|
border-radius: var(--md-sys-shape-corner-small);
|
|
24
25
|
background-color: var(--md-sys-color-on-primary);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAIxC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,WAAW;QACX,GAAG,CAAA;;;;;;;;kBAQW,iBAAiB,CAAC,8BAA8B,CAAC;;;;;;;;;;;;;;;;KAgB9D;KACF,AA3BY,CA2BZ;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,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,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA/DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgExB","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 } from '@lit/localize'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: flex;\n }\n\n input {\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: ${formElementHeight('--form-element-height-medium')};\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:not(:last-child) {\n margin-right: var(--margin-default, 2px);\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id as 'x' | 'y' | 'z'\n var value = Number((element as HTMLInputElement).value)\n\n this.value = {\n ...this.value,\n [id]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n const { x, y, z } = this.value\n return html`\n <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n `\n }\n}\n"]}
|
|
@@ -6,6 +6,7 @@ import './ox-input-angle.js';
|
|
|
6
6
|
import { css, html } from 'lit';
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
8
|
import { localized, msg } from '@lit/localize';
|
|
9
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
9
10
|
import { OxFormField } from './ox-form-field.js';
|
|
10
11
|
import { InputStyles } from './input-styles.js';
|
|
11
12
|
let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
@@ -40,7 +41,7 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
40
41
|
grid-column: span 2;
|
|
41
42
|
box-sizing: border-box;
|
|
42
43
|
padding: 0 var(--ox-input-gap);
|
|
43
|
-
height:
|
|
44
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
44
45
|
border: 1px solid var(--md-sys-color-outline);
|
|
45
46
|
border-radius: var(--md-sys-shape-corner-small);
|
|
46
47
|
overflow: hidden;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-angle.js'\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'\nimport { InputStyles } from './input-styles.js'\nimport { OxInputAngle } from './ox-input-angle.js'\n\n@localized()\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(7, minmax(50px, 1fr));\n grid-gap: calc(var(--ox-input-gap) * 2);\n }\n\n label {\n text-align: right;\n align-self: center;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: var(--label-text-transform);\n grid-column: span 1;\n }\n\n span {\n grid-column: span 2;\n text-align: center;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-surface-tint);\n font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n input,\n ox-input-angle {\n grid-column: span 2;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n overflow: hidden;\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-input-angle {\n --input-border: 0;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n @property({ type: Object }) position?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.position = {\n ...this.position,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('position-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.position\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n position: this.position,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n return html`\n <label></label> <span>${msg('x-axes')}</span>\n <span>${msg('y-axes')}</span>\n <span>${msg('z-axes')}</span>\n\n <label>${msg('dimension')}</label>\n <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n <label>${msg('position')}</label>\n <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('scale')}</label>\n <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('rotate')}</label>\n <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-angle.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { OxInputAngle } from './ox-input-angle.js'\n\n@localized()\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(7, minmax(50px, 1fr));\n grid-gap: calc(var(--ox-input-gap) * 2);\n }\n\n label {\n text-align: right;\n align-self: center;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: var(--label-text-transform);\n grid-column: span 1;\n }\n\n span {\n grid-column: span 2;\n text-align: center;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-surface-tint);\n font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n input,\n ox-input-angle {\n grid-column: span 2;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: ${formElementHeight('--form-element-height-medium')};\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n overflow: hidden;\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-input-angle {\n --input-border: 0;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n @property({ type: Object }) position?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.position = {\n ...this.position,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('position-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.position\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n position: this.position,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n return html`\n <label></label> <span>${msg('x-axes')}</span>\n <span>${msg('y-axes')}</span>\n <span>${msg('z-axes')}</span>\n\n <label>${msg('dimension')}</label>\n <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n <label>${msg('position')}</label>\n <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('scale')}</label>\n <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('rotate')}</label>\n <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n `\n }\n}\n"]}
|
|
@@ -7,6 +7,7 @@ import { css, html } from 'lit';
|
|
|
7
7
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
8
8
|
import { scanImageData } from '@undecaf/zbar-wasm';
|
|
9
9
|
import { OxPopup } from '@operato/popup';
|
|
10
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
10
11
|
import { OxFormField } from './ox-form-field.js';
|
|
11
12
|
import { InputStyles } from './input-styles.js';
|
|
12
13
|
const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`;
|
|
@@ -50,7 +51,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
|
|
|
50
51
|
align-items: center;
|
|
51
52
|
border: none;
|
|
52
53
|
background-color: transparent;
|
|
53
|
-
height:
|
|
54
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
* {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { scanImageData } from '@undecaf/zbar-wasm'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n/**\n * Custom input component for barcode scanning.\n *\n * This component provides a text input field and a barcode scanning button. Users can input text\n * manually or scan barcodes using the device camera. Supported barcode formats include:\n *\n * - Code-39\n * - Code-93\n * - Code-128\n * - Codabar\n * - Databar/Expanded\n * - EAN/GTIN-5/8/13\n * - ISBN-10/13\n * - ISBN-13+2\n * - ISBN-13+5\n * - ITF (Interleaved 2 of 5)\n * - QR Code\n * - UPC-A/E\n *\n * @fires CustomEvent#change - Dispatched when the input value changes.\n * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).\n *\n * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.\n *\n * @customElement\n */\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n background-color: transparent;\n height: var(--ox-input-height, var(--form-element-height-medium));\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1;\n width: 10px; /* intentionally width set */\n border: var(--ox-input-border, 1px solid var(--md-sys-color-outline));\n border-radius: var(--ox-input-radius, var(--md-sys-shape-corner-small));\n background-color: var(--ox-input-background, var(--md-sys-color-on-primary));\n color: var(--ox-input-color, var(--md-sys-color-on-primary-container));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n\n box-sizing: border-box;\n padding-right: 35px;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n #scan-button {\n display: block;\n position: relative;\n margin-left: -35px;\n width: 35px;\n border: none;\n background: var(--barcodescan-input-button-icon) no-repeat center center;\n }\n\n #scan-button[hidden] {\n display: none;\n }\n `\n ]\n\n /**\n * Indicates whether barcode scanning is enabled.\n * @property {Boolean} scannable\n */\n @property({ type: Boolean, attribute: true }) scannable?: boolean\n\n /**\n * If true, the \"Enter\" key press event is not fired after scanning a barcode.\n * @property {Boolean} withoutEnter\n */\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n\n /**\n * The value of the input field.\n * @property {String} declare value\n */\n @property({ type: String }) declare value?: string\n\n /**\n * If true, only English characters are allowed in the input field.\n * @property {Boolean} englishOnly\n */\n @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n\n /**\n * If true, the input field is automatically selected after a change event.\n * @property {Boolean} selectAfterChange\n */\n @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n @state() stream?: MediaStream\n\n @query('input') input!: HTMLInputElement\n\n private popup: OxPopup | null = null\n private video: HTMLVideoElement | null = null\n\n connectedCallback() {\n super.connectedCallback()\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n this.scannable = false\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n } else {\n this.scannable = false\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 @change=${(e: Event) => this.onInputChange(e)}\n @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n ?disabled=${this.disabled}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ?disabled=${this.disabled}\n ></button>\n `\n }\n\n onInputChange(e: Event) {\n e.stopPropagation()\n\n if (this.englishOnly) {\n /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n } else {\n this.value = this.input.value\n }\n\n if (this.selectAfterChange) {\n requestAnimationFrame(() => {\n this.input.select()\n })\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value\n })\n )\n }\n\n onInputKeyDown(e: KeyboardEvent) {\n if (e.key === 'Enter' && !e.isComposing) {\n /* Even if the value has not changed, the enter key triggers a change event. */\n e.preventDefault() /* Prevent change event from occurring twice. */\n\n this.input.dispatchEvent(new CustomEvent('change'))\n } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n e.stopPropagation()\n e.preventDefault()\n\n /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n const value = this.input.value\n\n const start = this.input.selectionStart || 0\n const end = this.input.selectionEnd || start\n\n this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n this.input.setSelectionRange(start + 1, start + 1)\n }\n }\n\n async scan(e: MouseEvent) {\n try {\n if (this.popup) {\n this.stopScan()\n }\n\n this.popup = OxPopup.open({\n template: html`\n <video></video>\n <md-icon\n style=\"position: fixed; right: 0; top: 0; color: red; tabindex: 0\"\n @click=${() => {\n this.stopScan()\n }}\n >close</md-icon\n >\n `,\n width: '100vw',\n height: '100dvh'\n })\n\n this.video! = this.popup.querySelector('video') as HTMLVideoElement\n\n var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.video.srcObject = this.stream\n this.video.play()\n\n this.video.onloadedmetadata = async e => {\n var canvas = new OffscreenCanvas(\n this.video!.videoWidth || this.video!.width,\n this.video!.videoHeight || this.video!.height\n )\n\n var context = canvas.getContext('2d', {\n willReadFrequently: true\n })\n\n const detect = async () => {\n try {\n if (!this.stream?.active) {\n return\n }\n\n context!.drawImage(this.video!, 0, 0, canvas.width, canvas.height)\n const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)\n const symbols = await scanImageData(imageData)\n const result = symbols[0]?.decode()\n\n if (result) {\n this.stopScan()\n\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('keydown', { key: 'Enter' }))\n }\n } else {\n requestAnimationFrame(async () => await detect())\n }\n } catch (e) {\n console.warn(e)\n this.stopScan()\n }\n }\n\n await detect()\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 }\n }\n\n stopScan() {\n if (this.video) {\n this.video.pause()\n this.video.srcObject = null\n }\n\n if (this.popup) {\n this.popup.close()\n this.popup = null\n }\n\n this.stream?.getTracks().forEach(track => track.stop())\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,WAAW,GAAG,o6CAAo6C,CAAA;AAEx7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAuFG,UAAK,GAAmB,IAAI,CAAA;QAC5B,UAAK,GAA4B,IAAI,CAAA;IA2L/C,CAAC;aAlRQ,WAAM,GAAG;QACd,WAAW;QACX,GAAG,CAAA;;;;;;kBAMW,iBAAiB,CAAC,8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC9D;KACF,AAlDY,CAkDZ;IAuCD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,SAAS,CAAC,YAAY,EAAE,CAAC;YAC3B,CAAC;YAAA,CAAC,KAAK,IAAI,EAAE;gBACX,IAAI,CAAC;oBACH,IAAI,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAC,CAAA;oBAC9G,IAAI,MAAM,EAAE,CAAC;wBACX,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;wBACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;oBACvB,CAAC;gBACH,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;oBACtB,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;gBACpE,CAAC;YACH,CAAC,CAAC,EAAE,CAAA;QACN,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QACxB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,WAAW,GAAG,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK,IAAI,EAAE;kBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;mBAClC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAC3C,IAAI,CAAC,QAAQ;;;kBAGf,CAAC,IAAI,CAAC,SAAS;;iBAEhB,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,4CAA4C;YAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;QAChF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;QAC/B,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YACxC,+EAA+E;YAC/E,CAAC,CAAC,cAAc,EAAE,CAAA,CAAC,gDAAgD;YAEnE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;QACrD,CAAC;aAAM,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,2EAA2E;YAC3E,MAAM,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;YAE9B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC,CAAA;YAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,KAAK,CAAA;YAE5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAClF,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;QACpD,CAAC;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAa;QACtB,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,QAAQ,EAAE,CAAA;YACjB,CAAC;YAED,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;gBACxB,QAAQ,EAAE,IAAI,CAAA;;;;qBAID,GAAG,EAAE;oBACZ,IAAI,CAAC,QAAQ,EAAE,CAAA;gBACjB,CAAC;;;SAGJ;gBACD,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,QAAQ;aACjB,CAAC,CAAA;YAEF,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAA;YAEnE,IAAI,WAAW,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAA,CAAC,2BAA2B;YACpG,IAAI,CAAC,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;YAEpE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAA;YAClC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;YAEjB,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,KAAK,EAAC,CAAC,EAAC,EAAE;gBACtC,IAAI,MAAM,GAAG,IAAI,eAAe,CAC9B,IAAI,CAAC,KAAM,CAAC,UAAU,IAAI,IAAI,CAAC,KAAM,CAAC,KAAK,EAC3C,IAAI,CAAC,KAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAM,CAAC,MAAM,CAC9C,CAAA;gBAED,IAAI,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE;oBACpC,kBAAkB,EAAE,IAAI;iBACzB,CAAC,CAAA;gBAEF,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;oBACxB,IAAI,CAAC;wBACH,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;4BACzB,OAAM;wBACR,CAAC;wBAED,OAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,KAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;wBAClE,MAAM,SAAS,GAAG,OAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;wBAC1E,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,SAAS,CAAC,CAAA;wBAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAA;wBAEnC,IAAI,MAAM,EAAE,CAAC;4BACX,IAAI,CAAC,QAAQ,EAAE,CAAA;4BAEf,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;4BACtB,KAAK,CAAC,KAAK,EAAE,CAAA;4BACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;4BAEzC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gCACvB,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;4BACrE,CAAC;wBACH,CAAC;6BAAM,CAAC;4BACN,qBAAqB,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,MAAM,EAAE,CAAC,CAAA;wBACnD,CAAC;oBACH,CAAC;oBAAC,OAAO,CAAC,EAAE,CAAC;wBACX,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;wBACf,IAAI,CAAC,QAAQ,EAAE,CAAA;oBACjB,CAAC;gBACH,CAAC,CAAA;gBAED,MAAM,MAAM,EAAE,CAAA;YAChB,CAAC,CAAA;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb;;;eAGG;YACH,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;QAC7B,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;YAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;IACzD,CAAC;;AAzN6C;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDAAoB;AAMR;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AAM3C;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuB;AAMM;IAAvD,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAsB;AAMd;IAA9D,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAA4B;AAEjF;IAAR,KAAK,EAAE;8CAAqB;AAEb;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AArF7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAmR1B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { scanImageData } from '@undecaf/zbar-wasm'\n\nimport { OxPopup } from '@operato/popup'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n/**\n * Custom input component for barcode scanning.\n *\n * This component provides a text input field and a barcode scanning button. Users can input text\n * manually or scan barcodes using the device camera. Supported barcode formats include:\n *\n * - Code-39\n * - Code-93\n * - Code-128\n * - Codabar\n * - Databar/Expanded\n * - EAN/GTIN-5/8/13\n * - ISBN-10/13\n * - ISBN-13+2\n * - ISBN-13+5\n * - ITF (Interleaved 2 of 5)\n * - QR Code\n * - UPC-A/E\n *\n * @fires CustomEvent#change - Dispatched when the input value changes.\n * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).\n *\n * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.\n *\n * @customElement\n */\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n background-color: transparent;\n height: ${formElementHeight('--form-element-height-medium')};\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1;\n width: 10px; /* intentionally width set */\n border: var(--ox-input-border, 1px solid var(--md-sys-color-outline));\n border-radius: var(--ox-input-radius, var(--md-sys-shape-corner-small));\n background-color: var(--ox-input-background, var(--md-sys-color-on-primary));\n color: var(--ox-input-color, var(--md-sys-color-on-primary-container));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n\n box-sizing: border-box;\n padding-right: 35px;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n #scan-button {\n display: block;\n position: relative;\n margin-left: -35px;\n width: 35px;\n border: none;\n background: var(--barcodescan-input-button-icon) no-repeat center center;\n }\n\n #scan-button[hidden] {\n display: none;\n }\n `\n ]\n\n /**\n * Indicates whether barcode scanning is enabled.\n * @property {Boolean} scannable\n */\n @property({ type: Boolean, attribute: true }) scannable?: boolean\n\n /**\n * If true, the \"Enter\" key press event is not fired after scanning a barcode.\n * @property {Boolean} withoutEnter\n */\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n\n /**\n * The value of the input field.\n * @property {String} declare value\n */\n @property({ type: String }) declare value?: string\n\n /**\n * If true, only English characters are allowed in the input field.\n * @property {Boolean} englishOnly\n */\n @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n\n /**\n * If true, the input field is automatically selected after a change event.\n * @property {Boolean} selectAfterChange\n */\n @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n @state() stream?: MediaStream\n\n @query('input') input!: HTMLInputElement\n\n private popup: OxPopup | null = null\n private video: HTMLVideoElement | null = null\n\n connectedCallback() {\n super.connectedCallback()\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n this.scannable = false\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n } else {\n this.scannable = false\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 @change=${(e: Event) => this.onInputChange(e)}\n @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n ?disabled=${this.disabled}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ?disabled=${this.disabled}\n ></button>\n `\n }\n\n onInputChange(e: Event) {\n e.stopPropagation()\n\n if (this.englishOnly) {\n /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n } else {\n this.value = this.input.value\n }\n\n if (this.selectAfterChange) {\n requestAnimationFrame(() => {\n this.input.select()\n })\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value\n })\n )\n }\n\n onInputKeyDown(e: KeyboardEvent) {\n if (e.key === 'Enter' && !e.isComposing) {\n /* Even if the value has not changed, the enter key triggers a change event. */\n e.preventDefault() /* Prevent change event from occurring twice. */\n\n this.input.dispatchEvent(new CustomEvent('change'))\n } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n e.stopPropagation()\n e.preventDefault()\n\n /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n const value = this.input.value\n\n const start = this.input.selectionStart || 0\n const end = this.input.selectionEnd || start\n\n this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n this.input.setSelectionRange(start + 1, start + 1)\n }\n }\n\n async scan(e: MouseEvent) {\n try {\n if (this.popup) {\n this.stopScan()\n }\n\n this.popup = OxPopup.open({\n template: html`\n <video></video>\n <md-icon\n style=\"position: fixed; right: 0; top: 0; color: red; tabindex: 0\"\n @click=${() => {\n this.stopScan()\n }}\n >close</md-icon\n >\n `,\n width: '100vw',\n height: '100dvh'\n })\n\n this.video! = this.popup.querySelector('video') as HTMLVideoElement\n\n var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.video.srcObject = this.stream\n this.video.play()\n\n this.video.onloadedmetadata = async e => {\n var canvas = new OffscreenCanvas(\n this.video!.videoWidth || this.video!.width,\n this.video!.videoHeight || this.video!.height\n )\n\n var context = canvas.getContext('2d', {\n willReadFrequently: true\n })\n\n const detect = async () => {\n try {\n if (!this.stream?.active) {\n return\n }\n\n context!.drawImage(this.video!, 0, 0, canvas.width, canvas.height)\n const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)\n const symbols = await scanImageData(imageData)\n const result = symbols[0]?.decode()\n\n if (result) {\n this.stopScan()\n\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('keydown', { key: 'Enter' }))\n }\n } else {\n requestAnimationFrame(async () => await detect())\n }\n } catch (e) {\n console.warn(e)\n this.stopScan()\n }\n }\n\n await detect()\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 }\n }\n\n stopScan() {\n if (this.video) {\n this.video.pause()\n this.video.srcObject = null\n }\n\n if (this.popup) {\n this.popup.close()\n this.popup = null\n }\n\n this.stream?.getTracks().forEach(track => track.stop())\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
7
|
import { i18next } from '@operato/i18n';
|
|
8
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
8
9
|
import { OxFormField } from './ox-form-field.js';
|
|
9
10
|
import { InputStyles } from './input-styles.js';
|
|
10
11
|
import '@material/web/fab/fab.js';
|
|
@@ -120,7 +121,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
|
|
|
120
121
|
width: 100%;
|
|
121
122
|
box-sizing: border-box;
|
|
122
123
|
padding: 0 var(--ox-input-gap);
|
|
123
|
-
height:
|
|
124
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
124
125
|
border: 1px solid var(--md-sys-color-outline);
|
|
125
126
|
border-radius: var(--md-sys-shape-corner-small);
|
|
126
127
|
background-color: var(--md-sys-color-on-primary);
|
|
@@ -133,7 +134,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
|
|
|
133
134
|
width: 100%;
|
|
134
135
|
box-sizing: border-box;
|
|
135
136
|
padding: 0 var(--ox-input-gap);
|
|
136
|
-
height:
|
|
137
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
137
138
|
border: 1px solid var(--md-sys-color-outline);
|
|
138
139
|
border-radius: var(--md-sys-shape-corner-small);
|
|
139
140
|
background-color: var(--md-sys-color-on-primary);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\nimport '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n regexByField['month'] = '[1-9]|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-|/|,' +\n ('dayOfWeek' === field ? '|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L|W)?'\n regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n })\n\n var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n if (!type)\n return (\n '^\\\\s*($' +\n '|#' +\n '|\\\\w+\\\\s*=' +\n '|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host * {\n box-sizing: border-box;\n }\n :host *:focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n text-transform: capitalize;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input {\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n input:invalid {\n border-color: var(--md-sys-color-error);\n color: var(--md-sys-color-error);\n }\n\n label {\n width: 100%;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: var(--ox-input-gap);\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--md-sys-color-surface-tint);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: var (--md-sys-color-on-primary-container);\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n md-fab {\n margin: 0.25rem;\n position: absolute;\n bottom: 1rem;\n left: 1rem;\n color: var(--md-sys-color-on-primary);\n }\n\n md-icon {\n font-size: 24px;\n }\n `]\n\n @property({ type: String }) value?: string = undefined\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value || ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second || ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute || ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour || ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth || ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month || ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek || ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <div id=\"button-wrapper\">\n <md-fab\n title=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <md-icon slot=\"icon\">delete</md-icon>\n </md-fab>\n </div>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value || '').split(' ')\n\n if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\nimport '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\n\nfunction createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d|2[0-3]'\n regexByField['day'] = '0?[1-9]|[12]\\\\d|3[01]'\n regexByField['month'] = '[1-9]|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-|/|,' +\n ('dayOfWeek' === field ? '|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L|W)?'\n regexByField[field] = '\\\\?|\\\\*|' + range + '(?:,' + range + ')*'\n })\n\n var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '|\\\\?|\\\\*|' + monthRange + '(?:,' + monthRange + ')*'\n\n var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '|\\\\?|\\\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*'\n\n if (!type)\n return (\n '^\\\\s*($' +\n '|#' +\n '|\\\\w+\\\\s*=' +\n '|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host * {\n box-sizing: border-box;\n }\n :host *:focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: ${formElementHeight('--form-element-height-medium')};\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n text-transform: capitalize;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input {\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: ${formElementHeight('--form-element-height-medium')};\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n input:invalid {\n border-color: var(--md-sys-color-error);\n color: var(--md-sys-color-error);\n }\n\n label {\n width: 100%;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: var(--ox-input-gap);\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--md-sys-color-surface-tint);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: var (--md-sys-color-on-primary-container);\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n md-fab {\n margin: 0.25rem;\n position: absolute;\n bottom: 1rem;\n left: 1rem;\n color: var(--md-sys-color-on-primary);\n }\n\n md-icon {\n font-size: 24px;\n }\n `]\n\n @property({ type: String }) value?: string = undefined\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value || ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\"* * * * * *\">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * * *\">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * * *\">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * * *\">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * * *\">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * * *\">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * * *\">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * * *\">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * * *\">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * * *\">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * * *\">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * * *\">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * * *\">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * *\">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 * *\">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 *\">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 *\">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second || ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute || ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour || ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth || ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month || ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek || ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <div id=\"button-wrapper\">\n <md-fab\n title=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <md-icon slot=\"icon\">delete</md-icon>\n </md-fab>\n </div>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value || '').split(' ')\n\n if (values.length == 1) values = ['*', '*', '*', '*', '*', '*']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '*',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
6
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
7
7
|
import { i18next } from '@operato/i18n';
|
|
8
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
8
9
|
import { OxFormField } from './ox-form-field.js';
|
|
9
10
|
import { InputStyles } from './input-styles.js';
|
|
10
11
|
let OxInputDuration = class OxInputDuration extends OxFormField {
|
|
@@ -16,7 +17,7 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
|
|
|
16
17
|
:host {
|
|
17
18
|
text-align: center;
|
|
18
19
|
padding: 10px;
|
|
19
|
-
--md-filled-icon-button-container-height:
|
|
20
|
+
--md-filled-icon-button-container-height: ${formElementHeight('--form-element-height-medium')};
|
|
20
21
|
--md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -44,7 +45,7 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
|
|
|
44
45
|
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
45
46
|
box-sizing: border-box;
|
|
46
47
|
padding: 0 var(--ox-input-gap);
|
|
47
|
-
height:
|
|
48
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
48
49
|
border: 1px solid var(--md-sys-color-outline);
|
|
49
50
|
border-radius: var(--md-sys-shape-corner-small);
|
|
50
51
|
max-width: 70px;
|