@operato/input 7.1.1 → 7.1.2

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.
 
+### [7.1.2](https://github.com/hatiolab/operato/compare/v7.1.1...v7.1.2) (2024-09-02)
+
+
+### :bug: Bug Fix
+
+* input signature ([aff132e](https://github.com/hatiolab/operato/commit/aff132e06f794c18430ec3cb31691f82e01e7f28))
+* support signature-input type for dataset ([f9e758e](https://github.com/hatiolab/operato/commit/f9e758eeb5efd6926af9d3526f0d7374e0c1b081))
+
+
+
 ### [7.1.1](https://github.com/hatiolab/operato/compare/v7.0.80...v7.1.1) (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,23 @@
+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;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): 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,144 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, nothing } 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;
+      }
+
+      canvas {
+        width: 100%;
+        border: 1px solid #000;
+      }
+
+      .controls {
+        margin-top: 10px;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <canvas
+        width="400"
+        height="200"
+        @mousedown=${this.startDrawing}
+        @mouseup=${this.stopDrawing}
+        @mousemove=${this.draw}
+        @mouseleave=${this.stopDrawing}
+        @touchstart=${this.startDrawing}
+        @touchend=${this.stopDrawing}
+        @touchmove=${this.draw}
+      ></canvas>
+
+      ${!this.disabled
+            ? html ` <div class="controls">
+            <button @click="${this.clearCanvas}">Clear</button>
+            <button @click="${this.saveSignature}">Save</button>
+          </div>`
+            : nothing}
+    `;
+    }
+    firstUpdated() {
+        this.canvas = this.shadowRoot.querySelector('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.strokeStyle = '#000';
+        this.ctx.lineWidth = 2;
+        // 처음 로딩 시 서명 데이터를 캔버스에 표시
+        if (this.value) {
+            this.loadSignature(this.value);
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value') && this.value) {
+            this.loadSignature(this.value);
+        }
+    }
+    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();
+    }
+    loadSignature(dataUrl) {
+        const image = new Image();
+        image.onload = () => {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 이전 내용을 지움
+            this.ctx.drawImage(image, 0, 0); // 이미지를 캔버스에 그림
+        };
+        image.src = 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      canvas {\n        width: 100%;\n        border: 1px solid #000;\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\n  render() {\n    return html`\n      <canvas\n        width=\"400\"\n        height=\"200\"\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\n      ${!this.disabled\n        ? html` <div class=\"controls\">\n            <button @click=\"${this.clearCanvas}\">Clear</button>\n            <button @click=\"${this.saveSignature}\">Save</button>\n          </div>`\n        : nothing}\n    `\n  }\n\n  firstUpdated() {\n    this.canvas = this.shadowRoot!.querySelector('canvas')!\n    this.ctx = this.canvas.getContext('2d')!\n    this.ctx.strokeStyle = '#000'\n    this.ctx.lineWidth = 2\n\n    // 처음 로딩 시 서명 데이터를 캔버스에 표시\n    if (this.value) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('value') && this.value) {\n      this.loadSignature(this.value)\n    }\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  }\n\n  loadSignature(dataUrl: string) {\n    const image = new Image()\n    image.onload = () => {\n      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 이전 내용을 지움\n      this.ctx.drawImage(image, 0, 0) // 이미지를 캔버스에 그림\n    }\n    image.src = 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,23 @@
+import '../src/ox-input-signature.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,56 @@
+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' }
+    }
+};
+const Template = ({ label = 'signature', name = 'signature', 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: 500px;
+      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
+      ?disabled=${disabled}
+      @change=${(e) => console.log(e.target.value)}
+    >
+    </ox-input-signature>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# 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;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,WAAW,EAAE,IAAI,GAAG,WAAW,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;kBAgBb,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,EAAE,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  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  name?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ label = 'signature', name = 'signature', 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: 500px;\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      ?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"]}