@operato/input 8.0.0-alpha.0 → 8.0.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.1...v8.0.0-alpha.2) (2024-09-05)
+
+
+### :bug: Bug Fix
+
+* use dialog in ox-input-signature ([103cee4](https://github.com/hatiolab/operato/commit/103cee48ac07217d83e2629416cf336238a9dc4a))
+* use dialog in ox-input-signature ([b7304b8](https://github.com/hatiolab/operato/commit/b7304b8364a4f75a28106c1ef2de1be7a5d1b9ef))
+
+
+
+## [8.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.0...v8.0.0-alpha.1) (2024-09-04)
+
+
+### :bug: Bug Fix
+
+* input signature ([7ff5330](https://github.com/hatiolab/operato/commit/7ff53307b2f0b5ffb41027dd1066fefbc341e628))
+* support signature-input type for dataset ([613de5d](https://github.com/hatiolab/operato/commit/613de5dc5c14cc8288d2d19431dda5475c4b3303))
+
+
+
 ## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
 
 **Note:** Version bump only for package @operato/input

package/dist/src/index.d.ts

@@ -30,3 +30,4 @@ export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
 export * from './ox-input-table-column-config.js';
 export * from './ox-input-search.js';
+export * from './ox-input-signature.js';

package/dist/src/index.js

@@ -30,4 +30,5 @@ export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
 export * from './ox-input-table-column-config.js';
 export * from './ox-input-search.js';
+export * from './ox-input-signature.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;;GAEG;AAEH,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,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;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * 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-3axis.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'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,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,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;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * 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-3axis.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'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-signature.js'\n"]}

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

@@ -0,0 +1,27 @@
+import '@material/web/icon/icon.js';
+import { OxFormField } from './ox-form-field.js';
+export declare class OxInputSignature extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    isDrawing: boolean;
+    value: string | null;
+    private ctx;
+    private canvas;
+    private dialog;
+    private previewDiv;
+    private previewCtx;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    openDialog(): void;
+    closeDialog(): void;
+    startDrawing(event: MouseEvent | TouchEvent): void;
+    stopDrawing(): void;
+    draw(event: MouseEvent | TouchEvent): void;
+    clearCanvas(): void;
+    saveSignature(): void;
+    loadSignature(dataUrl: string): void;
+    getEventPosition(event: MouseEvent | TouchEvent): {
+        x: number;
+        y: number;
+    };
+    _notifyChange(): void;
+}

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

@@ -0,0 +1,158 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field.js';
+let OxInputSignature = class OxInputSignature extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.isDrawing = false;
+        this.value = null;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        position: relative;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        border-radius: var(--border-radius);
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--md-sys-color-background);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+
+        overflow: hidden;
+      }
+
+      .signature-preview {
+        flex: 1;
+
+        border: 1px solid var(--md-sys-color-outline);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      dialog canvas {
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--md-sys-color-outline);
+      }
+
+      .controls {
+        margin-top: 10px;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div class="signature-preview" @click=${this.openDialog}></div>
+
+      <dialog>
+        <canvas
+          width="800"
+          height="400"
+          @mousedown=${this.startDrawing}
+          @mouseup=${this.stopDrawing}
+          @mousemove=${this.draw}
+          @mouseleave=${this.stopDrawing}
+          @touchstart=${this.startDrawing}
+          @touchend=${this.stopDrawing}
+          @touchmove=${this.draw}
+        ></canvas>
+        <div class="controls">
+          <button @click="${this.clearCanvas}">Clear</button>
+          <button @click="${this.saveSignature}">Save</button>
+          <button @click="${this.closeDialog}">Close</button>
+        </div>
+      </dialog>
+    `;
+    }
+    firstUpdated() {
+        this.previewDiv = this.shadowRoot.querySelector('.signature-preview');
+        this.dialog = this.shadowRoot.querySelector('dialog');
+        this.canvas = this.dialog.querySelector('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.strokeStyle = '#000';
+        this.ctx.lineWidth = 2;
+        // 처음 로딩 시 서명 데이터를 미리보기 div에 표시
+        if (this.value) {
+            this.loadSignature(this.value);
+        }
+    }
+    openDialog() {
+        if (this.disabled)
+            return;
+        this.dialog.showModal();
+    }
+    closeDialog() {
+        this.dialog.close();
+    }
+    startDrawing(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.isDrawing = true;
+        this.ctx.beginPath();
+        const position = this.getEventPosition(event);
+        this.ctx.moveTo(position.x, position.y);
+    }
+    stopDrawing() {
+        this.isDrawing = false;
+    }
+    draw(event) {
+        if (!this.isDrawing)
+            return;
+        const position = this.getEventPosition(event);
+        this.ctx.lineTo(position.x, position.y);
+        this.ctx.stroke();
+    }
+    clearCanvas() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    saveSignature() {
+        this.value = this.canvas.toDataURL();
+        this._notifyChange();
+        this.previewDiv.style.backgroundImage = `url(${this.value})`;
+        this.closeDialog();
+    }
+    loadSignature(dataUrl) {
+        this.previewDiv.style.backgroundImage = `url(${dataUrl})`;
+    }
+    getEventPosition(event) {
+        const rect = this.canvas.getBoundingClientRect();
+        // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        // 실제 좌표 계산
+        const isTouchEvent = event instanceof TouchEvent;
+        const x = (isTouchEvent ? event.touches[0].clientX - rect.left : event.clientX - rect.left) * scaleX;
+        const y = (isTouchEvent ? event.touches[0].clientY - rect.top : event.clientY - rect.top) * scaleY;
+        return { x, y };
+    }
+    _notifyChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], OxInputSignature.prototype, "isDrawing", void 0);
+__decorate([
+    property({ type: String })
+], OxInputSignature.prototype, "value", void 0);
+OxInputSignature = __decorate([
+    customElement('ox-input-signature')
+], OxInputSignature);
+export { OxInputSignature };
+//# sourceMappingURL=ox-input-signature.js.map

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

@@ -0,0 +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 } 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        position: relative;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        place-content: center;\n        border-radius: var(--border-radius);\n        padding: var(--padding-default, 9px);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n\n        overflow: hidden;\n      }\n\n      .signature-preview {\n        flex: 1;\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      }\n    `\n  ]\n\n  @property({ type: Boolean }) isDrawing = false\n  @property({ type: String }) value: string | null = null\n\n  private ctx!: CanvasRenderingContext2D\n  private canvas!: HTMLCanvasElement\n  private dialog!: HTMLDialogElement\n  private previewDiv!: HTMLDivElement\n  private previewCtx!: CanvasRenderingContext2D\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          <button @click=\"${this.saveSignature}\">Save</button>\n          <button @click=\"${this.closeDialog}\">Close</button>\n        </div>\n      </dialog>\n    `\n  }\n\n  firstUpdated() {\n    this.previewDiv = this.shadowRoot!.querySelector('.signature-preview')!\n    this.dialog = this.shadowRoot!.querySelector('dialog')!\n    this.canvas = this.dialog.querySelector('canvas')!\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\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"]}

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

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

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

@@ -0,0 +1,60 @@
+import '../src/ox-input-signature.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+export default {
+    title: 'ox-input-signature',
+    component: 'ox-input-signature',
+    argTypes: {
+        disabled: { control: 'boolean' },
+        value: { control: 'text' }
+    }
+};
+const Template = ({ value, disabled }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 600px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-signature
+      .value=${value || ''}
+      ?disabled=${disabled}
+      @change=${(e) => console.log(e.target.value)}
+    >
+    </ox-input-signature>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    value: 'data:image/png;base64,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'
+};
+//# sourceMappingURL=ox-input-%08signature.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-\bsignature.stories.js","sourceRoot":"","sources":["../../stories/ox-input-\bsignature.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"]}