@operato/input 0.2.36 → 0.2.43
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 +38 -0
- package/demo/index-barcode.html +66 -0
- package/demo/index-checkbox.html +1 -4
- package/demo/index-select.html +118 -0
- package/demo/index.html +30 -84
- package/dist/src/index.d.ts +4 -1
- package/dist/src/index.js +4 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-buttons-radio.js +5 -1
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.js +5 -8
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-3dish.js +1 -3
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.js +5 -1
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.d.ts +22 -0
- package/dist/src/ox-input-barcode.js +212 -0
- package/dist/src/ox-input-barcode.js.map +1 -0
- package/dist/src/ox-input-stack.js +5 -1
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/index.ts +4 -1
- package/src/ox-buttons-radio.ts +8 -2
- package/src/ox-checkbox.ts +5 -8
- package/src/ox-input-3dish.ts +2 -4
- package/src/ox-input-angle.ts +7 -1
- package/src/ox-input-barcode.ts +209 -0
- package/src/ox-input-stack.ts +7 -1
- package/src/ox-select.ts +3 -2
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import '@operato/popup';
|
|
2
|
+
import { BrowserMultiFormatReader } from '@zxing/library';
|
|
3
|
+
import { OxFormField } from './ox-formfield';
|
|
4
|
+
import { OxPopup } from '@operato/popup';
|
|
5
|
+
export declare class OxInputBarcode extends OxFormField {
|
|
6
|
+
static styles: import("lit").CSSResult[];
|
|
7
|
+
name?: string;
|
|
8
|
+
scannable?: boolean;
|
|
9
|
+
withoutEnter?: boolean;
|
|
10
|
+
value?: string;
|
|
11
|
+
stream?: MediaStream;
|
|
12
|
+
reader?: BrowserMultiFormatReader;
|
|
13
|
+
input: HTMLInputElement;
|
|
14
|
+
popup: OxPopup;
|
|
15
|
+
video: HTMLVideoElement;
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
disconnectedCallback(): void;
|
|
18
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
19
|
+
onChange(e: Event): void;
|
|
20
|
+
scan(e: MouseEvent): Promise<void>;
|
|
21
|
+
stopScan(): void;
|
|
22
|
+
}
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/popup';
|
|
3
|
+
import { css, html } from 'lit';
|
|
4
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
5
|
+
import { BrowserMultiFormatReader } from '@zxing/library';
|
|
6
|
+
import { OxFormField } from './ox-formfield';
|
|
7
|
+
const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`;
|
|
8
|
+
let OxInputBarcode = class OxInputBarcode extends OxFormField {
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
super.connectedCallback();
|
|
11
|
+
this.scannable = false;
|
|
12
|
+
if (navigator.mediaDevices) {
|
|
13
|
+
;
|
|
14
|
+
(async () => {
|
|
15
|
+
try {
|
|
16
|
+
var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
|
|
17
|
+
if (stream) {
|
|
18
|
+
stream.getTracks().forEach(track => track.stop());
|
|
19
|
+
this.scannable = true;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
catch (e) {
|
|
23
|
+
console.warn('this device not support camera for barcode scan', e);
|
|
24
|
+
}
|
|
25
|
+
})();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
disconnectedCallback() {
|
|
29
|
+
this.stopScan();
|
|
30
|
+
}
|
|
31
|
+
render() {
|
|
32
|
+
this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`);
|
|
33
|
+
return html `
|
|
34
|
+
<input
|
|
35
|
+
type="text"
|
|
36
|
+
.value=${this.value || ''}
|
|
37
|
+
maxlength="50"
|
|
38
|
+
@change=${(e) => this.onChange(e)}
|
|
39
|
+
@keypress=${(e) => this.onChange(e)}
|
|
40
|
+
/>
|
|
41
|
+
<button
|
|
42
|
+
?hidden=${!this.scannable}
|
|
43
|
+
id="scan-button"
|
|
44
|
+
@click=${(e) => {
|
|
45
|
+
this.scan(e);
|
|
46
|
+
}}
|
|
47
|
+
></button>
|
|
48
|
+
|
|
49
|
+
<ox-popup
|
|
50
|
+
@focusout=${() => {
|
|
51
|
+
this.stopScan();
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
<video></video>
|
|
55
|
+
</ox-popup>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
onChange(e) {
|
|
59
|
+
var _a;
|
|
60
|
+
e.stopPropagation();
|
|
61
|
+
this.value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
62
|
+
//@ts-ignore
|
|
63
|
+
this.dispatchEvent(new e.constructor(e.type, e));
|
|
64
|
+
}
|
|
65
|
+
async scan(e) {
|
|
66
|
+
try {
|
|
67
|
+
this.popup.open({});
|
|
68
|
+
/* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
|
|
69
|
+
await this.updateComplete;
|
|
70
|
+
var constraints = { video: { facingMode: 'environment' } }; /* backside camera first */
|
|
71
|
+
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
72
|
+
this.reader = new BrowserMultiFormatReader();
|
|
73
|
+
if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {
|
|
74
|
+
var result = await this.reader.decodeOnceFromStream(this.stream, this.video);
|
|
75
|
+
var input = this.input;
|
|
76
|
+
input.focus();
|
|
77
|
+
this.value = input.value = String(result);
|
|
78
|
+
if (!this.withoutEnter) {
|
|
79
|
+
input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
|
|
80
|
+
input.dispatchEvent(new CustomEvent('change', {
|
|
81
|
+
bubbles: true,
|
|
82
|
+
composed: true,
|
|
83
|
+
detail: this.value
|
|
84
|
+
}));
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
/* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
|
|
89
|
+
this.stopScan();
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
catch (err) {
|
|
93
|
+
/*
|
|
94
|
+
* 1. stream device 문제로 예외 발생한 경우.
|
|
95
|
+
* 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
|
|
96
|
+
*/
|
|
97
|
+
console.warn(err);
|
|
98
|
+
}
|
|
99
|
+
finally {
|
|
100
|
+
this.popup.close();
|
|
101
|
+
this.stopScan();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
stopScan() {
|
|
105
|
+
this.video.pause();
|
|
106
|
+
this.stream && this.stream.getTracks().forEach(track => track.stop());
|
|
107
|
+
this.reader && this.reader.reset();
|
|
108
|
+
delete this.stream;
|
|
109
|
+
delete this.reader;
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
OxInputBarcode.styles = [
|
|
113
|
+
css `
|
|
114
|
+
:host {
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
border: none;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
background-color: #fff;
|
|
120
|
+
|
|
121
|
+
padding: var(--custom-input-barcode-field-padding) !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
* {
|
|
125
|
+
align-self: stretch;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
*:focus {
|
|
129
|
+
outline: none;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
input {
|
|
133
|
+
flex: 1 !important;
|
|
134
|
+
border: none;
|
|
135
|
+
font: var(--custom-input-barcode-field-font);
|
|
136
|
+
width: 10px;
|
|
137
|
+
flex-grow: 1;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
#scan-button {
|
|
141
|
+
display: block;
|
|
142
|
+
width: 30px;
|
|
143
|
+
height: 100%;
|
|
144
|
+
min-height: 24px;
|
|
145
|
+
border: none;
|
|
146
|
+
background-color: transparent;
|
|
147
|
+
background-repeat: no-repeat;
|
|
148
|
+
background-position: center;
|
|
149
|
+
background-image: var(--barcodescan-input-button-icon);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
#scan-button[hidden] {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
ox-popup {
|
|
157
|
+
position: fixed;
|
|
158
|
+
|
|
159
|
+
width: 80vw;
|
|
160
|
+
height: 80vh;
|
|
161
|
+
transform: translate(10%, 10%);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
video {
|
|
165
|
+
width: 100%;
|
|
166
|
+
height: 100%;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@media screen and (max-width: 460px) {
|
|
170
|
+
ox-popup {
|
|
171
|
+
position: fixed;
|
|
172
|
+
left: 0;
|
|
173
|
+
top: 0;
|
|
174
|
+
width: 100vw;
|
|
175
|
+
height: 100vh;
|
|
176
|
+
transform: translate(0%, 0%);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
`
|
|
180
|
+
];
|
|
181
|
+
__decorate([
|
|
182
|
+
property({ type: String, attribute: true })
|
|
183
|
+
], OxInputBarcode.prototype, "name", void 0);
|
|
184
|
+
__decorate([
|
|
185
|
+
property({ type: Boolean })
|
|
186
|
+
], OxInputBarcode.prototype, "scannable", void 0);
|
|
187
|
+
__decorate([
|
|
188
|
+
property({ attribute: 'without-enter', type: Boolean })
|
|
189
|
+
], OxInputBarcode.prototype, "withoutEnter", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
property({ type: String })
|
|
192
|
+
], OxInputBarcode.prototype, "value", void 0);
|
|
193
|
+
__decorate([
|
|
194
|
+
state()
|
|
195
|
+
], OxInputBarcode.prototype, "stream", void 0);
|
|
196
|
+
__decorate([
|
|
197
|
+
state()
|
|
198
|
+
], OxInputBarcode.prototype, "reader", void 0);
|
|
199
|
+
__decorate([
|
|
200
|
+
query('input')
|
|
201
|
+
], OxInputBarcode.prototype, "input", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
query('ox-popup')
|
|
204
|
+
], OxInputBarcode.prototype, "popup", void 0);
|
|
205
|
+
__decorate([
|
|
206
|
+
query('video')
|
|
207
|
+
], OxInputBarcode.prototype, "video", void 0);
|
|
208
|
+
OxInputBarcode = __decorate([
|
|
209
|
+
customElement('ox-input-barcode')
|
|
210
|
+
], OxInputBarcode);
|
|
211
|
+
export { OxInputBarcode };
|
|
212
|
+
//# sourceMappingURL=ox-input-barcode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,WAAW,GAAG,o6CAAo6C,CAAA;AAGx7C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;IAmF7C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QAEtB,IAAI,SAAS,CAAC,YAAY,EAAE;YAC1B,CAAC;YAAA,CAAC,KAAK,IAAI,EAAE;gBACX,IAAI;oBACF,IAAI,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAC,CAAA;oBAChG,IAAI,MAAM,EAAE;wBACV,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;wBACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;qBACtB;iBACF;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;iBACnE;YACH,CAAC,CAAC,EAAE,CAAA;SACL;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;;kBAEf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;oBAC5B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;;kBAGhC,CAAC,IAAI,CAAC,SAAS;;iBAEhB,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;;;;oBAIW,GAAG,EAAE;YACf,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;;;;KAIJ,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,MAAC,CAAC,CAAC,MAA2B,0CAAE,KAAK,CAAA;QAClD,YAAY;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,CAAa;QACtB,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAEnB,uDAAuD;YACvD,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,WAAW,GAAG,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,CAAA,CAAC,2BAA2B;YACtF,IAAI,CAAC,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;YAEpE,IAAI,CAAC,MAAM,GAAG,IAAI,wBAAwB,EAAE,CAAA;YAC5C,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,sBAAsB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACzF,IAAI,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC5E,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBACtB,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBAEzC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;oBACtB,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;oBACrE,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,IAAI,CAAC,KAAK;qBACnB,CAAC,CACH,CAAA;iBACF;aACF;iBAAM;gBACL,4EAA4E;gBAC5E,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;SACF;QAAC,OAAO,GAAG,EAAE;YACZ;;;eAGG;YACH,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;SAClB;gBAAS;YACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;YAElB,IAAI,CAAC,QAAQ,EAAE,CAAA;SAChB;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAElB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;QACrE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;QAElC,OAAO,IAAI,CAAC,MAAM,CAAA;QAClB,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;CACF,CAAA;AAnMQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;CACF,CAAA;AAE4C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAc;AAC7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AACS;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEjC;IAAR,KAAK,EAAE;8CAAqB;AACpB;IAAR,KAAK,EAAE;8CAAkC;AAE1B;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AACrB;IAAlB,KAAK,CAAC,UAAU,CAAC;6CAAgB;AAClB;IAAf,KAAK,CAAC,OAAO,CAAC;6CAAyB;AAjF7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAoM1B;SApMY,cAAc","sourcesContent":["import '@operato/popup'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { BrowserMultiFormatReader } from '@zxing/library'\nimport { OxFormField } from './ox-formfield'\nimport { OxPopup } from '@operato/popup'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n border: none;\n overflow: hidden;\n background-color: #fff;\n\n padding: var(--custom-input-barcode-field-padding) !important;\n }\n\n * {\n align-self: stretch;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n flex: 1 !important;\n border: none;\n font: var(--custom-input-barcode-field-font);\n width: 10px;\n flex-grow: 1;\n }\n\n #scan-button {\n display: block;\n width: 30px;\n height: 100%;\n min-height: 24px;\n border: none;\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n background-image: var(--barcodescan-input-button-icon);\n }\n\n #scan-button[hidden] {\n display: none;\n }\n\n ox-popup {\n position: fixed;\n\n width: 80vw;\n height: 80vh;\n transform: translate(10%, 10%);\n }\n\n video {\n width: 100%;\n height: 100%;\n }\n\n @media screen and (max-width: 460px) {\n ox-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n transform: translate(0%, 0%);\n }\n }\n `\n ]\n\n @property({ type: String, attribute: true }) name?: string\n @property({ type: Boolean }) scannable?: boolean\n @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n @property({ type: String }) value?: string\n\n @state() stream?: MediaStream\n @state() reader?: BrowserMultiFormatReader\n\n @query('input') input!: HTMLInputElement\n @query('ox-popup') popup!: OxPopup\n @query('video') video!: HTMLVideoElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this.scannable = false\n\n if (navigator.mediaDevices) {\n ;(async () => {\n try {\n var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n if (stream) {\n stream.getTracks().forEach(track => track.stop())\n this.scannable = true\n }\n } catch (e) {\n console.warn('this device not support camera for barcode scan', e)\n }\n })()\n }\n }\n\n disconnectedCallback() {\n this.stopScan()\n }\n\n render() {\n this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n return html`\n <input\n type=\"text\"\n .value=${this.value || ''}\n maxlength=\"50\"\n @change=${(e: Event) => this.onChange(e)}\n @keypress=${(e: Event) => this.onChange(e)}\n />\n <button\n ?hidden=${!this.scannable}\n id=\"scan-button\"\n @click=${(e: MouseEvent) => {\n this.scan(e)\n }}\n ></button>\n\n <ox-popup\n @focusout=${() => {\n this.stopScan()\n }}\n >\n <video></video>\n </ox-popup>\n `\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement)?.value\n //@ts-ignore\n this.dispatchEvent(new e.constructor(e.type, e))\n }\n\n async scan(e: MouseEvent) {\n try {\n this.popup.open({})\n\n /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n await this.updateComplete\n\n var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n this.reader = new BrowserMultiFormatReader()\n if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n var input = this.input\n input.focus()\n this.value = input.value = String(result)\n\n if (!this.withoutEnter) {\n input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))\n input.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n } else {\n /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n this.stopScan()\n }\n } catch (err) {\n /*\n * 1. stream device 문제로 예외 발생한 경우.\n * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n */\n console.warn(err)\n } finally {\n this.popup.close()\n\n this.stopScan()\n }\n }\n\n stopScan() {\n this.video.pause()\n\n this.stream && this.stream.getTracks().forEach(track => track.stop())\n this.reader && this.reader.reset()\n\n delete this.stream\n delete this.reader\n }\n}\n"]}
|
|
@@ -32,7 +32,11 @@ let OxInputStack = class OxInputStack extends OxFormField {
|
|
|
32
32
|
}
|
|
33
33
|
_notifyChange() {
|
|
34
34
|
this.value = this.stack;
|
|
35
|
-
this.dispatchEvent(new CustomEvent('change', {
|
|
35
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
36
|
+
detail: this.value,
|
|
37
|
+
bubbles: true,
|
|
38
|
+
composed: true
|
|
39
|
+
}));
|
|
36
40
|
}
|
|
37
41
|
_onClickAddFloor(e) {
|
|
38
42
|
this.stack.push({ name: String(this.stack.length + 1) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,WAAW;IAArD;;QAkCE;;WAEG;QACwB,UAAK,GAAyC,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,WAAW;IAArD;;QAkCE;;WAEG;QACwB,UAAK,GAAyC,EAAE,CAAA;IAsF7E,CAAC;IApFC;;OAEG;IACH,sDAAsD;IAEtD,MAAM;QACJ,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,CAAA;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;QAE3B,OAAO,IAAI,CAAA;sCACuB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;;QAEpE,KAAK,CAAC,GAAG,CACT,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;+BACE,IAAI,CAAC,MAAM,WAAW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,MAAM,GAAG,KAAK,GAAG,CAAC;cACvG,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;;SAE1E,CACF;KACF,CAAA;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;QACxD,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,MAAM,KAAK,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QAE1D,IAAI,CAAC,KAAK,EAAE;YACV,OAAM;SACP;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;QACrD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3C,OAAO,WAAW,KAAK,KAAK;gBAC1B,CAAC,CAAC;oBACE,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,MAAM,EAAE,IAAI;iBACb;gBACH,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,mBAAmB,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QAE1D,IAAI,CAAC,KAAK,EAAE;YACV,OAAM;SACP;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;QAE7C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QAEzB,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACrE,CAAC;CACF,CAAA;AA1HQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;CACF,CAAA;AAK0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAiD;AArCxD,YAAY;IADhC,aAAa,CAAC,gBAAgB,CAAC;GACX,YAAY,CA2HhC;eA3HoB,YAAY","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 { OxFormField } from './ox-formfield'\n\n@customElement('ox-input-stack')\nexport default class OxInputStack extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n #add-floor {\n width: 100%;\n height: 20px;\n background-color: blue;\n color: white;\n }\n\n div {\n background-color: blue;\n width: calc(100% - 40px);\n width: -webkit-calc(100% - 40px);\n min-height: 20px;\n }\n\n div[active] {\n background-color: red;\n }\n\n div button {\n position: absolute;\n right: 10px;\n width: 30px;\n min-height: 20px;\n }\n `\n ]\n\n /**\n * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n */\n @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n /**\n * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n */\n // @property({ type: Number }) activeIndex: number = 0\n\n render() {\n const stack = [...this.stack].reverse()\n const length = stack.length\n\n return html`\n <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n ${stack.map(\n (item, index) => html`\n <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>\n ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n </div>\n `\n )}\n `\n }\n\n _notifyChange() {\n this.value = this.stack\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n }\n\n _onClickAddFloor(e: Event) {\n this.stack.push({ name: String(this.stack.length + 1) })\n this.requestUpdate()\n\n this._notifyChange()\n }\n\n _onClickToActive(e: Event) {\n const floor = (e.target as HTMLElement).closest('[floor]')\n\n if (!floor) {\n return\n }\n\n e.stopPropagation()\n\n const activeIndex = Number(floor.getAttribute('idx'))\n this.stack = this.stack.map((floor, index) => {\n return activeIndex === index\n ? {\n name: floor.name,\n active: true\n }\n : { name: floor.name }\n })\n\n this._notifyChange()\n }\n\n _onClickRemoveFloor(e: Event) {\n const floor = (e.target as HTMLElement).closest('[floor]')\n\n if (!floor) {\n return\n }\n\n e.stopPropagation()\n\n const idx = Number(floor.getAttribute('idx'))\n\n this.stack.splice(idx, 1)\n\n this.requestUpdate()\n\n this._notifyChange()\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,WAAW;IAAvC;;QAsC8B,SAAI,GAAW,EAAE,CAAA;QACjB,gBAAW,GAAW,EAAE,CAAA;IAyDtD,CAAC;IAvDC,MAAM;QACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAE1G,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,MAAM;gBACf,KAAK;;;;;KAKhB,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAElC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAI,CAAiB,CAAC,MAAM,CAAA;YAEtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACpD,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,EAAE;gBAChE,IAAI,CAAC,MAAM,EAAE,CAAA;aACd;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QAEpE,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAA;YAE/C,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,IAAI,CAAC,YAAY;gBACtB,IAAI,EAAE,CAAC;aACR,CAAC,CAAA;SACH;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACrE,CAAC;CACF,CAAA;AA/FQ,aAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAvCzC,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CAgGlB;SAhGY,MAAM","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-select')\nexport class Select extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n }\n\n div {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n mwc-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: 18px;\n color: var(--theme-primary-text-color, #3c3938);\n opacity: 0.7;\n }\n\n ::slotted(ox-popup-list) {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) name: string = ''\n @property({ type: String }) placeholder: string = ''\n\n render() {\n const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''\n\n return html`\n <div @click=${this.expand}>\n <span>${label}</span>\n <mwc-icon>expand_more</mwc-icon>\n </div>\n\n <slot></slot>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('select', (e: Event) => {\n this.value = (e as CustomEvent).detail\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n })\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {\n this.expand()\n }\n })\n }\n\n expand() {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n if (popupList) {\n popupList.style.width = `${this.offsetWidth}px`\n\n popupList.open({\n top: this.offsetHeight,\n left: 0\n })\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && formData.append(this.name, JSON.stringify(this.value))\n }\n}\n"]}
|