@operato/input 8.0.0-alpha.2 → 8.0.0-alpha.4
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 +20 -0
- package/dist/src/ox-input-file.js +3 -2
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-signature.d.ts +4 -5
- package/dist/src/ox-input-signature.js +31 -20
- package/dist/src/ox-input-signature.js.map +1 -1
- package/dist/stories/{ox-input-/bsignature.stories.js → ox-input-signature.stories.js} +1 -1
- package/dist/stories/ox-input-signature.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/ox-input-file.ts +3 -2
- package/src/ox-input-signature.ts +30 -21
- package/dist/stories/ox-input-/bsignature.stories.js.map +0 -1
- /package/dist/stories/{ox-input-/bsignature.stories.d.ts" → ox-input-signature.stories.d.ts} +0 -0
- /package/stories/{ox-input-/bsignature.stories.ts" → ox-input-signature.stories.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,26 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* dataset components & styles ([be44acd](https://github.com/hatiolab/operato/commit/be44acde8f25980e5b27afc481a2c149f8c23dbd))
|
|
12
|
+
* style for ox-data-sample-view ([8facbab](https://github.com/hatiolab/operato/commit/8facbaba683accc6e4cf2375902a0b25cde31c49))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## [8.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.2...v8.0.0-alpha.3) (2024-09-06)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### :bug: Bug Fix
|
|
20
|
+
|
|
21
|
+
* add ox-grist-editor/renderer-signature for dataset signature item ([b5dda5e](https://github.com/hatiolab/operato/commit/b5dda5ebe0afc8c9a3af73d9475bba160893155a))
|
|
22
|
+
* style for ox-data-sample-view ([f2a1266](https://github.com/hatiolab/operato/commit/f2a1266d9355b78a389e998129e16b8fba5ab480))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
## [8.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.1...v8.0.0-alpha.2) (2024-09-05)
|
|
7
27
|
|
|
8
28
|
|
|
@@ -81,12 +81,13 @@ let OxInputFile = class OxInputFile extends OxFormField {
|
|
|
81
81
|
border-bottom: var(--file-uploader-li-border-bottom);
|
|
82
82
|
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
83
83
|
color: var(--md-sys-color-on-primary-container);
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
84
86
|
}
|
|
85
87
|
li md-icon {
|
|
86
|
-
float: right;
|
|
87
88
|
cursor: pointer;
|
|
88
|
-
margin: var(--file-uploader-li-icon-margin);
|
|
89
89
|
font-size: var(--icon-size-small);
|
|
90
|
+
margin-left: auto;
|
|
90
91
|
}
|
|
91
92
|
li md-icon:hover,
|
|
92
93
|
li md-icon:active {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;
|
|
1
|
+
{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--md-sys-shape-corner-small);\n align-items: center;\n justify-content: center;\n padding: var(--padding-default, 9px);\n min-height: 100px;\n text-transform: capitalize;\n\n border: 1px dashed var(--md-sys-color-outline-variant);\n background-color: var(--md-sys-color-surface);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n }\n :host > span {\n color: var(--md-sys-color-primary);\n font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n :host > md-icon {\n color: var(--md-sys-color-primary);\n --md-icon-size: var(--file-uploader-icon-size, 36px);\n }\n\n :host(.candrop) {\n background-color: var(--md-sys-color-primary-fixed);\n border: 1px dashed var(--md-sys-color-primary-fixed-dim);\n }\n\n #input-file {\n display: none;\n }\n\n label {\n position: relative;\n width: auto;\n border: none;\n text-transform: capitalize;\n\n padding: var(--file-uploader-label-padding);\n border-radius: var(--file-uploader-label-border-radius);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n ul {\n max-width: 500px;\n width: 100%;\n list-style: none;\n margin: 5px 0 0 0;\n padding: 0;\n max-height: 46px;\n overflow: auto;\n background-color: var(--md-sys-color-on-primary);\n }\n li {\n text-align: left;\n\n padding: 3px 5px 2px 5px;\n border-bottom: var(--file-uploader-li-border-bottom);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n display: flex;\n align-items: center;\n }\n li md-icon {\n cursor: pointer;\n font-size: var(--icon-size-small);\n margin-left: auto;\n }\n li md-icon:hover,\n li md-icon:active {\n color: var(--md-sys-color-error);\n }\n `\n ]\n\n @property({ type: Boolean }) multiple?: boolean\n @property({ type: String }) accept?: string\n @property({ type: String }) icon?: string = 'upload'\n @property({ type: String }) label?: string\n @property({ type: String }) description?: string = 'drop files here!'\n @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n hideFileList: boolean = false\n @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n attachFileList: boolean = false\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n var files: File[] = this.value || []\n\n return html`\n <md-icon>${this.icon || 'upload'}</md-icon>\n\n <span>${this.description || 'drop files here!'}</span>\n\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n\n <label for=\"input-file\">${this.label || 'select files'}</label>\n\n ${!this.hideFileList && files?.length\n ? html` <ul>\n ${files.map(\n file => html`\n <li>\n - ${file.name}\n <md-icon\n @click=${(e: Event) => {\n if (this.disabled) {\n return\n }\n files.splice(files.indexOf(file), 1)\n this.value = [...files]\n this._notifyChange()\n }}\n >delete_outline</md-icon\n >\n </li>\n `\n )}\n </ul>`\n : html``}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && !(this.value instanceof Array)) {\n this.value = !this.value ? [] : [this.value]\n }\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n\n this.addEventListener('file-drop', (e: Event) => {\n if (this.disabled) {\n return\n }\n\n const detail = (e as CustomEvent).detail\n this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n this._notifyChange()\n })\n }\n\n get files() {\n return this.value\n }\n\n reset() {\n this.fileInput.value = ''\n this.value = []\n\n this._notifyChange()\n }\n\n _onChangeValue(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const files = this.value || []\n\n this.value = this.attachFileList\n ? [...files, ...Array.from(fileInput.files as FileList)]\n : [...Array.from(fileInput.files as FileList)]\n\n fileInput.files = null\n\n this._notifyChange()\n }\n\n _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -2,13 +2,12 @@ import '@material/web/icon/icon.js';
|
|
|
2
2
|
import { OxFormField } from './ox-form-field.js';
|
|
3
3
|
export declare class OxInputSignature extends OxFormField {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
|
-
isDrawing: boolean;
|
|
6
5
|
value: string | null;
|
|
7
|
-
private ctx;
|
|
8
|
-
private canvas;
|
|
9
|
-
private dialog;
|
|
10
6
|
private previewDiv;
|
|
11
|
-
private
|
|
7
|
+
private dialog;
|
|
8
|
+
private canvas;
|
|
9
|
+
private ctx;
|
|
10
|
+
private isDrawing;
|
|
12
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
13
12
|
firstUpdated(): void;
|
|
14
13
|
openDialog(): void;
|
|
@@ -1,38 +1,30 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html } from 'lit';
|
|
4
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
5
5
|
import { OxFormField } from './ox-form-field.js';
|
|
6
6
|
let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
|
-
this.isDrawing = false;
|
|
10
9
|
this.value = null;
|
|
10
|
+
this.isDrawing = false;
|
|
11
11
|
}
|
|
12
12
|
static { this.styles = [
|
|
13
13
|
css `
|
|
14
14
|
:host {
|
|
15
|
-
position: relative;
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
|
|
18
15
|
display: flex;
|
|
19
16
|
flex-direction: column;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
padding: var(--padding-default, 9px);
|
|
23
|
-
min-height: 100px;
|
|
24
|
-
text-transform: capitalize;
|
|
17
|
+
min-height: var(--signature-min-height, 80px);
|
|
18
|
+
min-width: var(--signature-min-width, 120px);
|
|
25
19
|
|
|
26
|
-
|
|
27
|
-
background-color: var(--md-sys-color-background);
|
|
28
|
-
font: var(--file-uploader-font) !important;
|
|
29
|
-
color: var(--file-uploader-color);
|
|
20
|
+
background-color: var(--signature-background-color, white);
|
|
30
21
|
|
|
31
22
|
overflow: hidden;
|
|
32
23
|
}
|
|
33
24
|
|
|
34
25
|
.signature-preview {
|
|
35
26
|
flex: 1;
|
|
27
|
+
align-self: stretch;
|
|
36
28
|
|
|
37
29
|
border: 1px solid var(--md-sys-color-outline);
|
|
38
30
|
background-size: contain;
|
|
@@ -48,6 +40,13 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
48
40
|
|
|
49
41
|
.controls {
|
|
50
42
|
margin-top: 10px;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: row;
|
|
45
|
+
gap: var(--spacing-medium);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.filler {
|
|
49
|
+
flex: 1;
|
|
51
50
|
}
|
|
52
51
|
`
|
|
53
52
|
]; }
|
|
@@ -69,6 +68,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
69
68
|
></canvas>
|
|
70
69
|
<div class="controls">
|
|
71
70
|
<button @click="${this.clearCanvas}">Clear</button>
|
|
71
|
+
<div class="filler"></div>
|
|
72
72
|
<button @click="${this.saveSignature}">Save</button>
|
|
73
73
|
<button @click="${this.closeDialog}">Close</button>
|
|
74
74
|
</div>
|
|
@@ -76,9 +76,6 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
76
76
|
`;
|
|
77
77
|
}
|
|
78
78
|
firstUpdated() {
|
|
79
|
-
this.previewDiv = this.shadowRoot.querySelector('.signature-preview');
|
|
80
|
-
this.dialog = this.shadowRoot.querySelector('dialog');
|
|
81
|
-
this.canvas = this.dialog.querySelector('canvas');
|
|
82
79
|
this.ctx = this.canvas.getContext('2d');
|
|
83
80
|
this.ctx.strokeStyle = '#000';
|
|
84
81
|
this.ctx.lineWidth = 2;
|
|
@@ -91,6 +88,14 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
91
88
|
if (this.disabled)
|
|
92
89
|
return;
|
|
93
90
|
this.dialog.showModal();
|
|
91
|
+
// 다이아로그가 열릴 때 현재 value를 캔버스에 그리기
|
|
92
|
+
if (this.value) {
|
|
93
|
+
const img = new Image();
|
|
94
|
+
img.onload = () => {
|
|
95
|
+
this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
|
|
96
|
+
};
|
|
97
|
+
img.src = this.value;
|
|
98
|
+
}
|
|
94
99
|
}
|
|
95
100
|
closeDialog() {
|
|
96
101
|
this.dialog.close();
|
|
@@ -145,12 +150,18 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
|
|
|
145
150
|
}));
|
|
146
151
|
}
|
|
147
152
|
};
|
|
148
|
-
__decorate([
|
|
149
|
-
property({ type: Boolean })
|
|
150
|
-
], OxInputSignature.prototype, "isDrawing", void 0);
|
|
151
153
|
__decorate([
|
|
152
154
|
property({ type: String })
|
|
153
155
|
], OxInputSignature.prototype, "value", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
query('.signature-preview')
|
|
158
|
+
], OxInputSignature.prototype, "previewDiv", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
query('dialog')
|
|
161
|
+
], OxInputSignature.prototype, "dialog", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
query('canvas')
|
|
164
|
+
], OxInputSignature.prototype, "canvas", void 0);
|
|
154
165
|
OxInputSignature = __decorate([
|
|
155
166
|
customElement('ox-input-signature')
|
|
156
167
|
], OxInputSignature);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAW,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-signature.js","sourceRoot":"","sources":["../../src/ox-input-signature.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-signature')\nexport class OxInputSignature extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: var(--signature-min-height, 80px);\n min-width: var(--signature-min-width, 120px);\n\n background-color: var(--signature-background-color, white);\n\n overflow: hidden;\n }\n\n .signature-preview {\n flex: 1;\n align-self: stretch;\n\n border: 1px solid var(--md-sys-color-outline);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n dialog canvas {\n width: 100%;\n height: 100%;\n border: 1px solid var(--md-sys-color-outline);\n }\n\n .controls {\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n gap: var(--spacing-medium);\n }\n\n .filler {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) value: string | null = null\n\n @query('.signature-preview')\n private previewDiv!: HTMLDivElement\n @query('dialog')\n private dialog!: HTMLDialogElement\n @query('canvas')\n private canvas!: HTMLCanvasElement\n\n private ctx!: CanvasRenderingContext2D\n private isDrawing = false\n\n render() {\n return html`\n <div class=\"signature-preview\" @click=${this.openDialog}></div>\n\n <dialog>\n <canvas\n width=\"800\"\n height=\"400\"\n @mousedown=${this.startDrawing}\n @mouseup=${this.stopDrawing}\n @mousemove=${this.draw}\n @mouseleave=${this.stopDrawing}\n @touchstart=${this.startDrawing}\n @touchend=${this.stopDrawing}\n @touchmove=${this.draw}\n ></canvas>\n <div class=\"controls\">\n <button @click=\"${this.clearCanvas}\">Clear</button>\n <div class=\"filler\"></div>\n <button @click=\"${this.saveSignature}\">Save</button>\n <button @click=\"${this.closeDialog}\">Close</button>\n </div>\n </dialog>\n `\n }\n\n firstUpdated() {\n this.ctx = this.canvas.getContext('2d')!\n this.ctx.strokeStyle = '#000'\n this.ctx.lineWidth = 2\n\n // 처음 로딩 시 서명 데이터를 미리보기 div에 표시\n if (this.value) {\n this.loadSignature(this.value)\n }\n }\n\n openDialog() {\n if (this.disabled) return\n this.dialog.showModal()\n\n // 다이아로그가 열릴 때 현재 value를 캔버스에 그리기\n if (this.value) {\n const img = new Image()\n img.onload = () => {\n this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)\n }\n img.src = this.value\n }\n }\n\n closeDialog() {\n this.dialog.close()\n }\n\n startDrawing(event: MouseEvent | TouchEvent) {\n if (this.disabled) {\n return\n }\n\n this.isDrawing = true\n this.ctx.beginPath()\n const position = this.getEventPosition(event)\n this.ctx.moveTo(position.x, position.y)\n }\n\n stopDrawing() {\n this.isDrawing = false\n }\n\n draw(event: MouseEvent | TouchEvent) {\n if (!this.isDrawing) return\n const position = this.getEventPosition(event)\n this.ctx.lineTo(position.x, position.y)\n this.ctx.stroke()\n }\n\n clearCanvas() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n }\n\n saveSignature() {\n this.value = this.canvas.toDataURL()\n this._notifyChange()\n this.previewDiv.style.backgroundImage = `url(${this.value})`\n this.closeDialog()\n }\n\n loadSignature(dataUrl: string) {\n this.previewDiv.style.backgroundImage = `url(${dataUrl})`\n }\n\n getEventPosition(event: MouseEvent | TouchEvent) {\n const rect = this.canvas.getBoundingClientRect()\n\n // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산\n const scaleX = this.canvas.width / rect.width\n const scaleY = this.canvas.height / rect.height\n\n // 실제 좌표 계산\n const isTouchEvent = event instanceof TouchEvent\n const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX\n const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY\n\n return { x, y }\n }\n\n _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -57,4 +57,4 @@ export const Regular = Template.bind({});
|
|
|
57
57
|
Regular.args = {
|
|
58
58
|
value: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAAAXNSR0IArs4c6QAAE0lJREFUeF7tnUuuNjcRhp0bQSAlSMkERlxmCJgxZMAS2AlLYQnsgCXAnAnKgFkETGCSSCQSiIQEkEN35NPpi10uV5ernyNFOf//+1J+3rLftru//l5J/EAAAhCAAAQEBF4R1KEKBCAAAQhAIGEgJAEEIAABCIgIYCAibFSCAAQgAAEMhByAAAQgAAERAQxEhI1KEIAABCCAgZADEIAABCAgIoCBiLBRCQIQgAAEMBByAAIQgAAERAQwEBE2KkEAAhCAAAZCDkAAAhCAgIgABiLCRiUIQAACEMBAyAEIQAACEBARwEBE2KgEAQhAAAIYCDkAAQhAAAIiAhiICBuVIAABCEAAAyEHIAABCEBARAADEWGjEgQgAAEIYCDkAAQgAAEIiAhgICJsVIIABCAAAQyEHIAABCAAAREBDESEjUoQgAAEIICBkAMQgAAEICAigIGIsFEJAhCAAAQwEHIAAhCAAAREBDAQETYqQQACEIAABkIOQAACEICAiAAGIsJGJQhAAAIQwEDIAQhAAAIQEBHAQETYqAQBCEAAAhgIOQABCEAAAiICGIgIG5UgAAEIQAADIQcgAAEIQEBEAAMRYaMSBCAAAQhgIOQABCAAAQiICGAgImxUggAEIAABDIQcgAAEIAABEQEMRISNShCAAAQggIHEzIH/LMN6NebwGBUEIOCBAAbiQQX9GP67NJn/j4no86VFCEAgpYSBxEuD1TzyyNA3nr6MCAJuCLDAuJFCLZDVQNBWDSkNQQACewRYZGLlBbuPWHoyGgi4JoCBuJanOTgMpBkZFSAAASkBDERKzmc9bp771CVHxZNxfrUhMiEBDEQIzmk17n/4FCabxzrXmHM+NSIqAQGSWQDNaRWOr5wKk1JCG7/aEFkHAQykA56zqixSzgQpwuFo0a82RNZBAAPpgOesKsdXzgRZwuH4yqcuRKVAAANRgOigCXYfDkQ4CAFt/GpDZJ0EMJBOgE6qs0g5EWInDI6v/GpDZJ0EMJBOgE6qs0g5EWITBsbuUxeiUiKAgSiBvLkZ7n/cLADHVz4FIKqxBDCQsXwtWucq14KyrA+MXcaNWpMQwEAmEeokTAzEp4ZP0CU/YcbXBfjMP5OoMBATzEM74Sp3KF5x45ENpHw0OQNiHRGnydwVEX5u/fiMgV/9ohp7aYwlfdYSv7k4LDJEH4bWpOHIV7kmAAd1ElGX7a5ji461ZFAyeW4W0T2rcx0bj+9eM7qjRCQD2TOO9auS2QHfkV2O+sRAHIkhCCXqMYkAhZsqURbVox3Hds0gB92knn0gGIg9c60eI13lajHx0M7sutQax8oaA/GQdTfFgIHcBF6h29kXKgUELpuYVZdW49gayHqs5VIUghpDAAMZw9WiVa78LCi39THj8ZXUODCQttwIWRoDmVPWGReqOUm3RT3T7qPXODCQttwIWRoDmVPWmRaqOQnLop5Fl73PckjXAp4ElOVKiFrSpAkx+IkHwaT1J94su8KtefSuAeSiv1w0i6g3ecwCpaMXBLj/4S8hvO8+tkdWWje9MRB/uWgWEQZihlqtI+8LldpAJ2vIsy7au45SGgxkskTVDBcD0aRp05bnhcqGgL9evB5f7d0o157zXsfuL0sCRqSdTAERuRsSx1fuJEkeTX2769A6strSx0D85aNZRBiIGWqVjpisKhjVG/FkIBa7ji1ALmrUU2qOBjGQOXRao/S0UM1Fbly0Xkz97KWH40b//5YxkNGEnbaPgTgV5iAsDMSfXh400fxch4QwN9Il1ALUwUDmEpErPX963WkgdxxX7SmAgfjLS5OIMBATzCqd3LlQqQwgYCN3Hl9Z3SSvkY3crKEUsAwGMo+oTFJ/Wt2hiZddR6nGnUbqLyseFBEGMo/YHF/508raQDztOjAQf/loHhEGYo5c1CFXeCJsQytZazLy0+QaoLjA0aA4WRsYyByCWV/pzkHl3iitNBn1DittetxI1yY6QXsYyAQiFc/Z52jRzIdmFgum1yOrPQWsd2Q+suDhUbAYzZEAVle7c9C4P8rReni8UV5D3cJUa+KgjBEBDMQIdGc3TMxOgMrVRxrITLuOLdaRXJQlpDkNAhiIBsXxbWAg4xm39DDqhrH3G+VXjDCQK0LB/h0DmUPQUQvWHKP3FeWIRXLWIyt2IONz85cppT8s3fxufHdtPWAgbbzuKo2B3EX+q/1qG8jMR1YYSHte/map8vOU0t8Pqr+9/P23Nv/ubr12F1C7HuFr8HSLL4k1zXz2IysMZD83S5N4aykiXWuzyeT//pxSyqbj6kc6KFeDCB6M9hVvcFxDh6epRTTzyOA1+QwVsrLx91JKHxVlf1r8/mZlG0cm+/HBDiSbxa+XSr8S9mFWDQMxQy3uKNqkFINwUFFDi1k+GCjBrcFH0m9rnWwM688Pl19ea23kpPzKIZvEb5dyv1Bs301TGIgbKQ4D0Twy8T9a3xH2ahHZPLzsQLbmoGkMnxTp+fudVP2Z7/TVjw4D0Weq3WLvoqUdz1Pb6726jnhktc2FXkZHufV+8Q/fW37XXLs+Tyn9sejjJ09N8tZxa4rQ2jflrwmMmpDXPVNCc3F8gnm07EBGG8KqHcYweB5jIIMBdzaPgXQCVKwu3Qk+xTz2DOSvC/9vD9DhT0Wb/0gpsWtQhFzbFAZSS+qecnwC/R7uWruP0jzy76/6GM6QKLJZSIxiZVQaQg7wB0OipFFVAhiIKk71xjAQdaSiBiU7wcjmITGLvy3kvyNSgEouCWAgLmX5MigMxIc+rcdXUcyj5wiKtcVH7g6NApGH4u1uHAPpRtjdQOvuY8Z7Hh8slN5ppLXdVbSyauyO4t4IYCDeFHkZDwZyvz4ti+L2cx7e5pfUKLIKNUdQrTu1+9Ulgi4C3hK8azABK2Mg94vasii2mM3IkfUYxYdLYO8KAmxhJWieKt4IYCDeFGEH4kmRFkNoKas1xruMYi9+XvqppepE7WAgvsViB3KvPrWmUFtOOhpPRnE0BgxEqu7E9TAQ3+JxJHCvPjX8NZ+4Wt/8ur4CvGX0PUdPLf1gIBq0grSBgfgVkiu6e7Wp2VVInrgqXw8+o1FgIPfmpaveMRBXcrwIpmYB8xv9/JFd8b964qpnN5Hp3b2jaFWQC55WYgHKYyB+RbxawPxGHiOyq+OrUp/8vQ+S3UQmlevmn/VrTGelR77OqlxH3BhIB7zBVa8WsMHdP7r57WLYu5uIYhJnSYGBPHDKYCA+RZceB2zP5PPo0LhN4/xm12+0Vfmy9BOM4ggNBiJMmpmrsbj4VK91Mm7P48tRofG5xtkw8k+raWSNIr9dt3Vm8Mh5K7EA5VlcfIpYayB7xpHrlrqi8UuNWwzjnymlby7VJU9c+cyuMVFx5DqGq+tWWVx8ylNjIHvmsep59YSQz1GPiarWMLJZlDuRcocBz3NtpEeuYxSnVTMCGIgZ6qaOrgxku6DtHaeUZZ503FJ7D2M1jHWHkQU64n6lR5O4AQvDJ6CoNUPCQGoo2Zc5m5AtV8NPmNg9hrFVdo/XExj2ZjiMeglOWh8D8SlczZVwjrxGv7WtbDyv+RxudVT/Wkq+WVGjvH9RUfyLIttzfBbGOnLc/6jjFK5UzQIUbtATDOjqSrjWPHK5z4unhWbTOxtGjVnkcUoMo0yFLfPyz086AmydHtL7H3uPnJ/1jQatyhiUn21BMUDiogvtxWyGK+mW3cUni0pfV1TrjDnz5Bh0a261GsdRzxiKYvJLm2JiSMmNrXc0yXr0ap3oY0eY0t2GUbv76GE+mqGH9mvzai+na8ykhn9NGQ+swsUAeJ+SjjCQz4p7IPlY63XDobeYRQ4r7zA0dxdXQ2X3cUXoegeyt5YcfcC1Z/dwZTqsaXItm2sCuxmZSYW9SaKhVe3VYu8gP10aeKOioRHHURXdvihS3gS2YtQao8fyR6xGGMfe+M/MRGO+eGTuKiYgu5Ljy2BGGUjuYNQCmU2j1jAsdxdXCo/Y7V31GeXfax72WHNu9Gtf0PGGrMJAboBe0eV2MmjqVB5l5VCkbdfsMv6dUspXo54MY4ufhaciIQ+KlDu37cVJT27JI3p5gVS2I83znljC1wWqT4lbPiwoGUFe2Mt7ILV5ULPLyG1/TRLUDXUwDzn0s/tGd5nH1cVBbZ7LqTysJkAfJngx3NIMjhb92l3GLIZxtcBYHbdEyLpZHjwYuZuPoGPXGDCQLnzTV947w462yzgSid1HX/qu/PL/y3XE45oy8p5iH8XJa3sUe3Kk04V/9VhkHtBMx1K1ArCo1JL6armjp6y8ryfsRuSa79b0LrjycGluMYMM4uxzINkw8s+sR1M1QmMgNZT2y+yx6/lshzyS9pqYSDuzwxoYiCJMx01tb5qfhfqEnMA8+pJ1dn6zx9+nnmLtJywWirimaWrdQdTuMmpuqE8z+IpAtwvILFfPFUMzKRJlAWY30pkuGEgnQEfVa3YZ+TMgRx/2KyeT9atELDFGWfwsmW37mvkI62osrIkNmQWsBljOimYzyD9n3/Gxlqn5hHhu6wkmwlVnfyJHMpBt3uc/sy5W5gigKkE5KFZjGDnMs11GzTD2Hu2tqTdLGQykX6loBrISiZ77/cpvWsBA1JGqNVhrGCPerBt1ImEeOukZ9TM0o98AoUPfUSsYiCMxlt3D1dfOZsPIPyNfx15+z3jvN/15IoyB9KuxvbiQfiNhfyRjWsBEGrhiIA2wBhUtv3J2rwsLw9jrN+IuJOKYBqXlYbPRDSQPnDypzCoMpBKUcrEa0xi5w6gdTqSJFGkstfqNKLdyLNeOvb8b0bdlm+RLBW0MpAKSUpEz08jb5vxzdXylFEp1M5GOslgQqmWv3n2sBSMaSLSjuX71d1rAQIZg/aLRo/cFrT16NY0tkSgLb8RFblz27rd8lAvr3+f/j/7iKMsxR8n9YcwwED20V4axmoq3XUYNgdkn0uzx12hkUeZpBlLO6WjmqJIvGEgfxhrTiJB4sx9lYSB9eb49qsp/3rsHEiHXt6Q4yjrJHQykbWKtx05n3CJOokxp1kV41rjbMtOm9NN2INujaNbLTZ4BpH7iHX14al1cI539HlGZcTGeMeb6rLQt+UQDKS+eol4cirMIA6lHV06e9fcnmEZJ6KOU0lvFX3jPH8yjPr9rSmIgsR4SqNH8tIz3BaB7gMoN5COsp5nGFmG5iHycUnpbmbFmcxiIJs3jY8yoT2Gt9LgPcpBHGIjuBHtKazMszNsjR3K9PzufugPBQDCQ/tlDCy8IeDcR7/HNmE5XBhLZpNexRx5jc04CoxkZFRYCnu+H8EK8MWm6ZyBPMWoMZCenMJAxE+0prZaLx4cppXedDPwpi5o17r2jnKewxkAwEOv59oj+PC4gHmOKkgzlDfPyAjT6xSgGgoFEmcPuxuFpwebm+dj02Ps81BM+H4GBYCBjZ9bDW/diIhjI2ETcM5Dou49MFAPBQMbOrIe3/kFK6Z2FwV33QzCP8UmIgYxnPE0PT7hymEaMAIHefVMdA7FJIi+7TZvRzvseuOF8MJDhiB/XwZ2LCwZik27rS0Vzb094M8OdOW2jqLAXDEQIjmqnBO6acHf1SzrEJkBeHeiLgcRO/DtHd8eku6PPOxnT93gC5NQJYwxkfAI+uQfrybcerTzhWOXJeWU1dt5ocEEaA7FKxef2U37wjIX9uXkw48itL4CmY4SBTCfZdAG/n1L6/hL1Ez5wNp1ABLxLAPOoSAwMpAISRboJlEcB+ffXulukAQiMI4B5VLLFQCpBUaybQGkin6eUXu9ukQYgoE+AR8EbmGIgDbAo2k3gs83uI//5je5WaQAC/QS2N8xzi6yPF1wB1J94tNBG4L2U0o+XKn9JKX23rTqlIaBKYO/VLJhHJWIMpBIUxSAAgVAE9nYceYA86NEgMwbSAIuiEIDA9AT2jAPTEMqKgQjBUQ0CEJiGwNFug6OqTgkxkE6AVIcABG4lkO+p/ai44b2uaWemwY5DSTIMRAkkzUAAArcQ2D7ZdxQEpjFAHgxkAFSahAAEzAhsdyDbjjGOgVJgIAPh0jQEIGBK4NPl+0nyO9d475oBegzEADJdQAACEIhIAAOJqCpjggAEIGBAAAMxgEwXEIAABCISwEAiqsqYIAABCBgQwEAMINMFBCAAgYgEMJCIqjImCEAAAgYEMBADyHQBAQhAICIBDCSiqowJAhCAgAEBDMQAMl1AAAIQiEgAA4moKmOCAAQgYEAAAzGATBcQgAAEIhLAQCKqypggAAEIGBDAQAwg0wUEIACBiAQwkIiqMiYIQAACBgQwEAPIdAEBCEAgIgEMJKKqjAkCEICAAQEMxAAyXUAAAhCISAADiagqY4IABCBgQAADMYBMFxCAAAQiEsBAIqrKmCAAAQgYEMBADCDTBQQgAIGIBDCQiKoyJghAAAIGBDAQA8h0AQEIQCAiAQwkoqqMCQIQgIABAQzEADJdQAACEIhIAAOJqCpjggAEIGBAAAMxgEwXEIAABCISwEAiqsqYIAABCBgQwEAMINMFBCAAgYgEMJCIqjImCEAAAgYEMBADyHQBAQhAICIBDCSiqowJAhCAgAEBDMQAMl1AAAIQiEjgf2ZBwOdRqQYvAAAAAElFTkSuQmCC'
|
|
59
59
|
};
|
|
60
|
-
//# sourceMappingURL=ox-input
|
|
60
|
+
//# sourceMappingURL=ox-input-signature.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-signature.stories.js","sourceRoot":"","sources":["../../stories/ox-input-signature.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;eAgBhB,KAAK,IAAI,EAAE;kBACR,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;;;CAInF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EACH,4iNAA4iN;CAC/iN,CAAA","sourcesContent":["import '../src/ox-input-signature.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-signature',\n component: 'ox-input-signature',\n argTypes: {\n disabled: { control: 'boolean' },\n value: { 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 value?: string\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 600px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-signature\n .value=${value || ''}\n ?disabled=${disabled}\n @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n >\n </ox-input-signature>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value:\n 'data:image/png;base64,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'\n}\n"]}
|