@operato/input 1.0.0-beta.30 → 1.0.0-beta.31

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-beta.31](https://github.com/hatiolab/operato/compare/v1.0.0-beta.30...v1.0.0-beta.31) (2022-06-15)
+
+
+### :rocket: New Features
+
+* add ox-input-duration ([34e727f](https://github.com/hatiolab/operato/commit/34e727fff77c5a6764b5fba63c56564919766373))
+* ox-input-barcode english-only ([c062ab9](https://github.com/hatiolab/operato/commit/c062ab99be827e8d5e4f55a6f95a0df7c2dd10d8))
+
+
+
 ## [1.0.0-beta.30](https://github.com/hatiolab/operato/compare/v1.0.0-beta.29...v1.0.0-beta.30) (2022-06-13)
 
 

package/dist/src/index.d.ts

@@ -17,5 +17,6 @@ export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
 export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
-export * from './ox-input-crontab';
-export * from './ox-input-partition-keys';
+export * from './ox-input-crontab.js';
+export * from './ox-input-partition-keys.js';
+export * from './ox-input-duration.js';

package/dist/src/index.js

@@ -17,6 +17,7 @@ export * from './ox-input-value-ranges.js';
 export * from './ox-input-value-map.js';
 export * from './ox-input-table.js';
 export * from './ox-input-scene-component-id.js';
-export * from './ox-input-crontab';
-export * from './ox-input-partition-keys';
+export * from './ox-input-crontab.js';
+export * from './ox-input-partition-keys.js';
+export * from './ox-input-duration.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\nexport * from './ox-input-partition-keys'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\n"]}

package/dist/src/ox-input-barcode.d.ts

@@ -7,6 +7,7 @@ export declare class OxInputBarcode extends OxFormField {
     scannable?: boolean;
     withoutEnter?: boolean;
     value?: string;
+    englishOnly?: boolean;
     stream?: MediaStream;
     reader?: BrowserMultiFormatReader;
     input: HTMLInputElement;
@@ -15,7 +16,8 @@ export declare class OxInputBarcode extends OxFormField {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    onChange(e: Event): void;
+    onInputChange(e: Event): void;
+    onInputKeyDown(e: KeyboardEvent): void;
     scan(e: MouseEvent): Promise<void>;
     stopScan(): void;
 }

package/dist/src/ox-input-barcode.js

@@ -103,9 +103,8 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
       <input
         type="text"
         .value=${this.value || ''}
-        maxlength="50"
-        @change=${(e) => this.onChange(e)}
-        @keypress=${(e) => this.onChange(e)}
+        @change=${(e) => this.onInputChange(e)}
+        @keydown=${(e) => this.onInputKeyDown(e)}
       />
       <button
         ?hidden=${!this.scannable}
@@ -124,12 +123,40 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
       </ox-popup>
     `;
     }
-    onChange(e) {
+    onInputChange(e) {
         e.stopPropagation();
-        this.value = e.target?.value;
+        if (this.englishOnly) {
+            /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */
+            this.value = this.input.value = this.input.value?.replace(/[^\x00-\x7F]/g, '');
+        }
+        else {
+            this.value = this.input.value;
+        }
         //@ts-ignore
         this.dispatchEvent(new e.constructor(e.type, e));
     }
+    onInputKeyDown(e) {
+        if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^(Digit|Key)/.test(e.code)) {
+            e.stopPropagation();
+            e.preventDefault();
+            /* englishOnly 인 경우에 문자와 숫자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳과 숫자 키보드의 자모음을 조합하므로, ... */
+            switch (true) {
+                case /^Key/.test(e.code):
+                    var key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase();
+                    break;
+                case /^Digit/.test(e.code):
+                    var key = e.code.charAt(5);
+                    break;
+                default:
+                    var key = '';
+            }
+            const value = this.input.value;
+            const start = this.input.selectionStart || 0;
+            const end = this.input.selectionEnd || 0;
+            this.input.value = [value.substring(0, start), key, value.substring(end)].join('');
+            this.input.selectionEnd = this.input.selectionStart = start + 1;
+        }
+    }
     async scan(e) {
         try {
             this.popup.open({});
@@ -186,6 +213,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxInputBarcode.prototype, "value", void 0);
+__decorate([
+    property({ attribute: 'english-only', type: Boolean })
+], OxInputBarcode.prototype, "englishOnly", void 0);
 __decorate([
     state()
 ], OxInputBarcode.prototype, "stream", void 0);

package/dist/src/ox-input-barcode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":";AAAA,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;AAGzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,WAAW,GAAG,o6CAAo6C,CAAA;AAGx7C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,WAAW;aACtC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,CAAA;IAaD,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,GAAI,CAAC,CAAC,MAA2B,EAAE,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,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACnF,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;AA5H8B;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;6CAAuB;AAEzC;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;AAhF7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAmM1B;SAnMY,cAAc","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n        overflow: hidden;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\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      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) declare value?: string\n\n  @state() stream?: MediaStream\n  @state() reader?: BrowserMultiFormatReader\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        maxlength=\"50\"\n        @change=${(e: Event) => this.onChange(e)}\n        @keypress=${(e: Event) => this.onChange(e)}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n    this.value = (e.target as HTMLInputElement)?.value\n    //@ts-ignore\n    this.dispatchEvent(new e.constructor(e.type, e))\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        this.value = input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))\n          input.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video.pause()\n\n    this.stream && this.stream.getTracks().forEach(track => track.stop())\n    this.reader && this.reader.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}
+{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n        overflow: hidden;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\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      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) declare value?: string\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\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        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(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  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    //@ts-ignore\n    this.dispatchEvent(new e.constructor(e.type, e))\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^(Digit|Key)/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자와 숫자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳과 숫자 키보드의 자모음을 조합하므로, ... */\n      switch (true) {\n        case /^Key/.test(e.code):\n          var key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n          break\n        case /^Digit/.test(e.code):\n          var key = e.code.charAt(5)\n          break\n        default:\n          var key = ''\n      }\n\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || 0\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n\n      this.input.selectionEnd = this.input.selectionStart = start + 1\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        this.value = input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d, key: 'Enter' }))\n          input.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video.pause()\n\n    this.stream && this.stream.getTracks().forEach(track => track.stop())\n    this.reader && this.reader.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}

package/dist/src/ox-input-duration.d.ts

@@ -0,0 +1,13 @@
+import '@material/mwc-button';
+import { OxFormField } from './ox-form-field';
+export declare class OxInputDuration extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    days: HTMLInputElement;
+    hours: HTMLInputElement;
+    minutes: HTMLInputElement;
+    seconds: HTMLInputElement;
+    onChange(e: Event): void;
+}

package/dist/src/ox-input-duration.js

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import '@material/mwc-button';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { OxFormField } from './ox-form-field';
+let OxInputDuration = class OxInputDuration extends OxFormField {
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host *:focus {
+      outline: none;
+    }
+
+    form {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+    }
+
+    input {
+      margin-top: var(--margin-default);
+      padding: 5px;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input:invalid {
+      border-bottom: 1px solid var(--status-danger-color);
+      color: var(--status-danger-color);
+    }
+
+    label {
+      width: 100%;
+      font: normal 0.8em var(--theme-font);
+      color: var(--primary-color);
+    }
+  `; }
+    render() {
+        var d = Number(this.value || 0);
+        const days = Math.floor(d / (3600 * 24));
+        d -= days * 24 * 3600;
+        const hours = Math.floor(d / 3600);
+        d -= hours * 3600;
+        const minutes = Math.floor(d / 60);
+        const seconds = d - minutes * 60;
+        return html `
+      <form @change=${this.onChange.bind(this)}>
+        <input id="days" type="number" .value=${days} pattern="\\d*" />
+        <label for="days">${i18next.t('label.days')}</label>
+
+        <input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
+        <label for="hour">${i18next.t('label.hours')}</label>
+
+        <input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
+        <label for="minute">${i18next.t('label.minutes')}</label>
+
+        <input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
+        <label for="second">${i18next.t('label.seconds')}</label>
+
+        <button
+          type="button"
+          @click=${(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.value = 0;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        }}
+        >
+          Clear
+        </button>
+      </form>
+    `;
+    }
+    firstUpdated() {
+        ;
+        this.renderRoot.querySelector('input').focus();
+    }
+    onChange(e) {
+        e.stopPropagation();
+        var form = this.renderRoot.querySelector('form');
+        var valid = form.checkValidity();
+        if (!valid) {
+            form.reportValidity();
+            return;
+        }
+        const days = Number(this.days.value);
+        const hours = Number(this.hours.value);
+        const minutes = Number(this.minutes.value);
+        const seconds = Number(this.seconds.value);
+        this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    property({ type: Number })
+], OxInputDuration.prototype, "value", void 0);
+__decorate([
+    query('#days')
+], OxInputDuration.prototype, "days", void 0);
+__decorate([
+    query('#hours')
+], OxInputDuration.prototype, "hours", void 0);
+__decorate([
+    query('#minutes')
+], OxInputDuration.prototype, "minutes", void 0);
+__decorate([
+    query('#seconds')
+], OxInputDuration.prototype, "seconds", void 0);
+OxInputDuration = __decorate([
+    customElement('ox-input-duration')
+], OxInputDuration);
+export { OxInputDuration };
+//# sourceMappingURL=ox-input-duration.js.map

package/dist/src/ox-input-duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n      justify-content: center;\n    }\n\n    input {\n      margin-top: var(--margin-default);\n      padding: 5px;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      width: 100%;\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n  `\n\n  @property({ type: Number }) declare value?: number\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <input id=\"days\" type=\"number\" .value=${days} pattern=\"\\\\d*\" />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input id=\"hours\" type=\"number\" .value=${hours} pattern=\"[01]?\\\\d|2[0-3]\" />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input id=\"minutes\" type=\"number\" .value=${minutes} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input id=\"seconds\" type=\"number\" .value=${seconds} pattern=\"[0-5]?\\\\d\" />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n        >\n          Clear\n        </button>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\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    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/stories/ox-input-barcode.stories.d.ts

@@ -16,6 +16,9 @@ declare const _default: {
         withoutEnter: {
             control: string;
         };
+        englishOnly: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -29,5 +32,7 @@ interface ArgTypes {
     value?: string;
     scannable?: boolean;
     withoutEnter?: boolean;
+    englishOnly?: boolean;
 }
 export declare const Regular: Story<ArgTypes>;
+export declare const EnglishOnly: Story<ArgTypes>;

package/dist/stories/ox-input-barcode.stories.js

@@ -7,18 +7,34 @@ export default {
         name: { control: 'text' },
         value: { control: 'text' },
         scannable: { control: 'boolean' },
-        withoutEnter: { control: 'boolean' }
+        withoutEnter: { control: 'boolean' },
+        englishOnly: { control: 'boolean' }
     }
 };
-const Template = ({ name = 'barcode', scannable = true, withoutEnter = true }) => html `
+const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, englishOnly = false }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-  <ox-input-barcode name=${name} ?without-enter=${withoutEnter} ?scannable=${scannable}> </ox-input-barcode>
+  <ox-input-barcode
+    name=${name}
+    ?without-enter=${withoutEnter}
+    ?scannable=${scannable}
+    ?english-only=${englishOnly}
+    @change=${(e) => console.log(e.detail)}
+  >
+  </ox-input-barcode>
 `;
 export const Regular = Template.bind({});
 Regular.args = {
     name: 'barcode',
     scannable: true,
-    withoutEnter: true
+    withoutEnter: true,
+    englishOnly: false
+};
+export const EnglishOnly = Template.bind({});
+EnglishOnly.args = {
+    name: 'barcode',
+    scannable: true,
+    withoutEnter: true,
+    englishOnly: true
 };
 //# sourceMappingURL=ox-input-barcode.stories.js.map

package/dist/stories/ox-input-barcode.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,YAAY,GAAG,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGtF,IAAI,mBAAmB,YAAY,eAAe,SAAS;CACrF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;CACnB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-barcode',\n  component: 'ox-input-barcode',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'text' },\n    scannable: { control: 'boolean' },\n    withoutEnter: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n  scannable?: boolean\n  withoutEnter?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'barcode', scannable = true, withoutEnter = true }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <ox-input-barcode name=${name} ?without-enter=${withoutEnter} ?scannable=${scannable}> </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true\n}\n"]}
+{"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACpC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACV,EAAE,EAAE,CAAC,IAAI,CAAA;;;;WAIT,IAAI;qBACM,YAAY;iBAChB,SAAS;oBACN,WAAW;cACjB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;CAGtD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;CAClB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-barcode',\n  component: 'ox-input-barcode',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'text' },\n    scannable: { control: 'boolean' },\n    withoutEnter: { control: 'boolean' },\n    englishOnly: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n  scannable?: boolean\n  withoutEnter?: boolean\n  englishOnly?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'barcode',\n  scannable = true,\n  withoutEnter = true,\n  englishOnly = false\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <ox-input-barcode\n    name=${name}\n    ?without-enter=${withoutEnter}\n    ?scannable=${scannable}\n    ?english-only=${englishOnly}\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n  >\n  </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true,\n  englishOnly: true\n}\n"]}

package/dist/stories/ox-input-duration.stories.d.ts

@@ -0,0 +1,26 @@
+import '../src/ox-input-duration.js';
+import '../src/locale/locale-picker.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: number;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-duration.stories.js

@@ -0,0 +1,37 @@
+import '../src/ox-input-duration.js';
+import '../src/locale/locale-picker.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-duration',
+    component: 'ox-input-duration',
+    argTypes: {
+        value: { control: 'number' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'duration', value = 3601 }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-duration
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-duration>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'duration',
+    value: 3601
+};
+//# sourceMappingURL=ox-input-duration.stories.js.map

package/dist/stories/ox-input-duration.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-duration.stories.js","sourceRoot":"","sources":["../../stories/ox-input-duration.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,UAAU,EAAE,KAAK,GAAG,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAY3E,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,IAAI;CACZ,CAAA","sourcesContent":["import '../src/ox-input-duration.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-duration',\n  component: 'ox-input-duration',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'duration', value = 3601 }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-duration\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-duration>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'duration',\n  value: 3601\n}\n"]}