@operato/input 10.0.0 → 10.2.0

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

@@ -7,13 +7,14 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { i18next } from '@operato/i18n';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     constructor() {
         super(...arguments);
         this.value = null;
         this.privileges = [];
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       text-align: center;
       padding: 10px;
@@ -35,8 +36,8 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     select {
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
+      padding: calc(var(--ox-input-gap) / 2);
+      font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);
 
       max-height: 35px;
@@ -67,10 +68,10 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     input {
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
+      padding: calc(var(--ox-input-gap) / 2);
       padding-right: 0;
       max-width: 70px;
-      font: var(--input-font);
+      font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);
       text-align: right;
     }
@@ -81,11 +82,11 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     }
 
     label {
-      margin-right: var(--spacing-medium);
-      font: normal 0.8em var(--theme-font);
+      margin-right: calc(var(--ox-input-gap) * 2);
+      font: normal 0.8em var(--ox-input-font-family);
       color: var(--md-sys-color-on-primary-container);
     }
-  `; }
+  `]; }
     render() {
         const { category, privilege, owner, super: superUser } = this.value || {};
         const privileges = this.privileges || [];

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\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    }\n\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: var(--spacing-medium);\n      font: normal 0.8em var(--theme-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null = null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)} ?disabled=${this.disabled}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      text-align: center;\n      padding: 10px;\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    }\n\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font: normal 0.8em var(--ox-input-font-family);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null = null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)} ?disabled=${this.disabled}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\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/src/ox-input-quantifier.d.ts

@@ -3,7 +3,7 @@
  */
 import { OxFormField } from './ox-form-field.js';
 export declare class OxInputQuantifier extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: number[];
     render(): import("lit-html").TemplateResult<1>;
     inputs?: HTMLInputElement[];

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

@@ -5,15 +5,16 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property, queryAll } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputQuantifier = class OxInputQuantifier extends OxFormField {
     constructor() {
         super(...arguments);
         this.value = [1, 1];
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       display: flex;
-      gap: var(--spacing-medium);
+      gap: calc(var(--ox-input-gap) * 2);
       align-items: center;
 
       width: 100%;
@@ -24,8 +25,8 @@ let OxInputQuantifier = class OxInputQuantifier extends OxFormField {
       width: 48px;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
+      padding: calc(var(--ox-input-gap) / 2);
+      font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);
     }
     input[type='number']:focus {
@@ -37,7 +38,7 @@ let OxInputQuantifier = class OxInputQuantifier extends OxFormField {
       outline: none;
       opacity: 1;
     }
-  `; }
+  `]; }
     render() {
         const [min = 1, max = 1] = this.value || [];
         return html `

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-quantifier.js","sourceRoot":"","sources":["../../src/ox-input-quantifier.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA8BsB,UAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAqBrD,CAAC;aAlDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BZ;IAID,MAAM;QACJ,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE3C,OAAO,IAAI,CAAA;;sCAEuB,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;sCAExE,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;KAEzG,CAAA;IACH,CAAC;IAID,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACtF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AApB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAchC;IAAlB,QAAQ,CAAC,OAAO,CAAC;iDAA4B;AA5CnC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmD7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-quantifier')\nexport class OxInputQuantifier extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--spacing-medium);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Array }) value: number[] = [1, 1]\n\n  render() {\n    const [min = 1, max = 1] = this.value || []\n\n    return html`\n      <span>\n        <input type=\"number\" .value=${min} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n        -\n        <input type=\"number\" .value=${max} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n      </span>\n    `\n  }\n\n  @queryAll('input') inputs?: HTMLInputElement[]\n\n  onChange(e: Event) {\n    e.stopPropagation()\n    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-quantifier.js","sourceRoot":"","sources":["../../src/ox-input-quantifier.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGxC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA8BsB,UAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAqBrD,CAAC;aAlDQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhC,CAAC,AA3BW,CA2BX;IAIF,MAAM;QACJ,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE3C,OAAO,IAAI,CAAA;;sCAEuB,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;sCAExE,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;KAEzG,CAAA;IACH,CAAC;IAID,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACtF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AApB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAchC;IAAlB,QAAQ,CAAC,OAAO,CAAC;iDAA4B;AA5CnC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmD7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-quantifier')\nexport class OxInputQuantifier extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `]\n\n  @property({ type: Array }) value: number[] = [1, 1]\n\n  render() {\n    const [min = 1, max = 1] = this.value || []\n\n    return html`\n      <span>\n        <input type=\"number\" .value=${min} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n        -\n        <input type=\"number\" .value=${max} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n      </span>\n    `\n  }\n\n  @queryAll('input') inputs?: HTMLInputElement[]\n\n  onChange(e: Event) {\n    e.stopPropagation()\n    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputRange = class OxInputRange extends OxFormField {
     constructor() {
         super(...arguments);
@@ -13,10 +14,10 @@ let OxInputRange = class OxInputRange extends OxFormField {
         this.min = -100;
         this.max = 100;
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       display: flex;
-      gap: var(--spacing-medium);
+      gap: calc(var(--ox-input-gap) * 2);
       align-items: center;
 
       width: 100%;
@@ -28,8 +29,8 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 100%;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
+      padding: calc(var(--ox-input-gap) / 2);
+      font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);
     }
 
@@ -52,7 +53,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 7px;
       background-color: rgba(0, 0, 0, 0.02);
       border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
+      border-radius: var(--ox-input-radius);
     }
     input[type='range']::-webkit-slider-thumb {
       -webkit-appearance: none;
@@ -73,7 +74,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 7px;
       background-color: rgba(0, 0, 0, 0.02);
       border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
+      border-radius: var(--ox-input-radius);
     }
     input[type='range']::-moz-range-thumb {
       border: none;
@@ -95,7 +96,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 7px;
       background-color: rgba(0, 0, 0, 0.02);
       border: 1px solid rgba(0, 0, 0, 0.05);
-      border-radius: 5px;
+      border-radius: var(--ox-input-radius);
     }
     input[type='range']::-ms-thumb {
       border: none;
@@ -111,7 +112,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       outline: none;
       opacity: 1;
     }
-  `; }
+  `]; }
     render() {
         return html `
       <input

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGlB,AAlGY,CAkGZ;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAxGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--spacing-medium);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      height: 100%;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxIQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGhC,CAAC,AAlGW,CAkGX;IAOF,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAxGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      height: 100%;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: var(--ox-input-radius);\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: var(--ox-input-radius);\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: var(--ox-input-radius);\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n}\n"]}

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

@@ -8,8 +8,10 @@ import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputSearch = class OxInputSearch extends OxFormField {
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: flex;
@@ -27,7 +29,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
         color: inherit;
         background-color: transparent;
         border: 0;
-        padding: var(--input-search-padding, var(--spacing-tiny));
+        padding: var(--input-search-padding, calc(var(--ox-input-gap) / 2));
         padding-left: 25px;
         overflow: hidden;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.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\n// import debounce from 'lodash-es/debounce.js'\nimport { css, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-search-padding, var(--spacing-tiny));\n        padding-left: 25px;\n        overflow: hidden;\n      }\n\n      [type='text']:focus {\n        outline: none;\n      }\n\n      md-icon {\n        position: absolute;\n      }\n\n      input {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n  @property({ type: Number, attribute: 'max-length' }) maxLength?: number\n\n  @query('input') input!: HTMLInputElement\n\n  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        maxlength=${ifDefined(this.maxLength)}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\n              /* Even if the value has not changed, the enter key triggers a change event. */\n              e.preventDefault() /* Prevent change event from occurring twice. */\n\n              this.input.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.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\n// import debounce from 'lodash-es/debounce.js'\nimport { css, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-search-padding, calc(var(--ox-input-gap) / 2));\n        padding-left: 25px;\n        overflow: hidden;\n      }\n\n      [type='text']:focus {\n        outline: none;\n      }\n\n      md-icon {\n        position: absolute;\n      }\n\n      input {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n  @property({ type: Number, attribute: 'max-length' }) maxLength?: number\n\n  @query('input') input!: HTMLInputElement\n\n  // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        maxlength=${ifDefined(this.maxLength)}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\n              /* Even if the value has not changed, the enter key triggers a change event. */\n              e.preventDefault() /* Prevent change event from occurring twice. */\n\n              this.input.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -7,8 +7,10 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputSecret = class OxInputSecret extends OxFormField {
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: flex;
@@ -34,7 +36,7 @@ let OxInputSecret = class OxInputSecret extends OxFormField {
         color: inherit;
         background-color: transparent;
         border: 0;
-        padding: var(--input-secret-padding, var(--spacing-tiny));
+        padding: var(--input-secret-padding, calc(var(--ox-input-gap) / 2));
         padding-right: 20px;
         overflow: hidden;
         text-overflow: ellipsis;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-secret.js","sourceRoot":"","sources":["../../src/ox-input-secret.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 } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-secret')\nexport class OxInputSecret extends OxFormField<string | undefined> {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-secret-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-secret-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      .secret-container {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n        width: 100%;\n      }\n\n      input {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-secret-padding, var(--spacing-tiny));\n        padding-right: 20px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-family: inherit;\n        font-size: inherit;\n        letter-spacing: 0.5px;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      input:focus {\n        outline: none;\n        border: none;\n        box-shadow: none;\n      }\n\n      .secret-toggle {\n        position: absolute;\n        right: 0px;\n        cursor: pointer;\n        font-size: 16px;\n        color: var(--md-sys-color-on-surface-variant);\n        user-select: none;\n        opacity: 0.7;\n        transition: opacity 0.2s;\n      }\n\n      .secret-toggle:hover {\n        opacity: 1;\n        color: var(--md-sys-color-primary);\n      }\n\n      .secret-container:hover .secret-toggle {\n        opacity: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n  @property({ type: String }) value?: string | undefined\n\n  @query('input') input!: HTMLInputElement\n\n  private togglePasswordVisibility() {\n    if (!this.input) return\n\n    if (this.input.type === 'password') {\n      this.input.type = 'text'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility'\n        icon.title = i18next.t('text.input-secret-hide')\n      }\n    } else {\n      this.input.type = 'password'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility_off'\n        icon.title = i18next.t('text.input-secret-show')\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"secret-container\">\n        <input\n          type=\"password\"\n          .value=${this.value || ''}\n          .placeholder=${this.placeholder || i18next.t('text.input-secret-placeholder')}\n          @change=${(e: Event) => {\n            e.stopPropagation()\n            this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          }}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              if ((e.target as HTMLInputElement).value == this.value) {\n                /* Even if the value has not changed, the enter key triggers a change event. */\n                e.preventDefault() /* Prevent change event from occurring twice. */\n\n                this.input.dispatchEvent(\n                  new CustomEvent('change', {\n                    detail: (e.target as HTMLInputElement).value\n                  })\n                )\n              }\n            }\n          }}\n          ?disabled=${this.disabled}\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          data-form-type=\"other\"\n        />\n        <md-icon\n          class=\"secret-toggle\"\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.togglePasswordVisibility()\n          }}\n          title=${i18next.t('text.input-secret-toggle')}\n        >\n          visibility_off\n        </md-icon>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-secret.js","sourceRoot":"","sources":["../../src/ox-input-secret.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 } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-secret')\nexport class OxInputSecret extends OxFormField<string | undefined> {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        color: var(--ox-input-secret-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-input-secret-background-color, var(--md-sys-color-surface-variant));\n\n        --md-icon-size: 20px;\n      }\n\n      .secret-container {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n        width: 100%;\n      }\n\n      input {\n        flex: 1;\n        color: inherit;\n        background-color: transparent;\n        border: 0;\n        padding: var(--input-secret-padding, calc(var(--ox-input-gap) / 2));\n        padding-right: 20px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-family: inherit;\n        font-size: inherit;\n        letter-spacing: 0.5px;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      input:focus {\n        outline: none;\n        border: none;\n        box-shadow: none;\n      }\n\n      .secret-toggle {\n        position: absolute;\n        right: 0px;\n        cursor: pointer;\n        font-size: 16px;\n        color: var(--md-sys-color-on-surface-variant);\n        user-select: none;\n        opacity: 0.7;\n        transition: opacity 0.2s;\n      }\n\n      .secret-toggle:hover {\n        opacity: 1;\n        color: var(--md-sys-color-primary);\n      }\n\n      .secret-container:hover .secret-toggle {\n        opacity: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n  @property({ type: String }) value?: string | undefined\n\n  @query('input') input!: HTMLInputElement\n\n  private togglePasswordVisibility() {\n    if (!this.input) return\n\n    if (this.input.type === 'password') {\n      this.input.type = 'text'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility'\n        icon.title = i18next.t('text.input-secret-hide')\n      }\n    } else {\n      this.input.type = 'password'\n      const icon = this.renderRoot.querySelector('.secret-toggle') as HTMLElement\n      if (icon) {\n        icon.textContent = 'visibility_off'\n        icon.title = i18next.t('text.input-secret-show')\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"secret-container\">\n        <input\n          type=\"password\"\n          .value=${this.value || ''}\n          .placeholder=${this.placeholder || i18next.t('text.input-secret-placeholder')}\n          @change=${(e: Event) => {\n            e.stopPropagation()\n            this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          }}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              if ((e.target as HTMLInputElement).value == this.value) {\n                /* Even if the value has not changed, the enter key triggers a change event. */\n                e.preventDefault() /* Prevent change event from occurring twice. */\n\n                this.input.dispatchEvent(\n                  new CustomEvent('change', {\n                    detail: (e.target as HTMLInputElement).value\n                  })\n                )\n              }\n            }\n          }}\n          ?disabled=${this.disabled}\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          data-form-type=\"other\"\n        />\n        <md-icon\n          class=\"secret-toggle\"\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.togglePasswordVisibility()\n          }}\n          title=${i18next.t('text.input-secret-toggle')}\n        >\n          visibility_off\n        </md-icon>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n}\n"]}

package/dist/src/ox-input-select-buttons.d.ts

@@ -9,7 +9,7 @@ type Option = {
     value: string;
 };
 export declare class OxInputSelectButtons extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: string[] | string | undefined;
     options: Option[];
     multiple: boolean;

package/dist/src/ox-input-select-buttons.js

@@ -7,6 +7,7 @@ import '@material/web/chips/chip-set.js';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
     constructor() {
         super(...arguments);
@@ -14,16 +15,16 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
         this.options = [];
         this.multiple = false;
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       display: flex;
       flex-flow: row;
       flex-wrap: wrap;
-      gap: var(--spacing-medium);
+      gap: calc(var(--ox-input-gap) * 2);
 
       text-transform: capitalize;
     }
-  `; }
+  `]; }
     render() {
         const options = this.options.filter(option => !!option.value);
         const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : [];

package/dist/src/ox-input-select-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: var(--spacing-medium);\n\n      text-transform: capitalize;\n    }\n  `\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              ?selected=${values.includes(value)}\n              @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onClick(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: calc(var(--ox-input-gap) * 2);\n\n      text-transform: capitalize;\n    }\n  `]\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              ?selected=${values.includes(value)}\n              @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onClick(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -3,6 +3,7 @@ import '@material/web/icon/icon.js';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputSignature = class OxInputSignature extends OxFormField {
     constructor() {
         super(...arguments);
@@ -10,6 +11,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         this.isDrawing = false;
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: flex;
@@ -40,7 +42,7 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         margin-top: 10px;
         display: flex;
         flex-direction: row;
-        gap: var(--spacing-medium);
+        gap: calc(var(--ox-input-gap) * 2);
       }
 
       .filler {
@@ -53,9 +55,9 @@ let OxInputSignature = class OxInputSignature extends OxFormField {
         color: var(--md-sys-color-on-primary);
         padding: 10px 20px;
         border: none;
-        border-radius: var(--spacing-small);
+        border-radius: var(--ox-input-gap);
         font-family: 'Roboto', sans-serif;
-        font-size: 14px;
+        font-size: var(--ox-input-font-size);
         cursor: pointer;
         transition: background-color 0.3s ease;
       }

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

@@ -1 +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, PropertyValues } from 'lit'\nimport { customElement, property, query } 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        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      button {\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        padding: 10px 20px;\n        border: none;\n        border-radius: var(--spacing-small);\n        font-family: 'Roboto', sans-serif;\n        font-size: 14px;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\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          @pointerdown=${this.startDrawing}\n          @pointerup=${this.stopDrawing}\n          @pointermove=${this.draw}\n          @pointerleave=${this.stopDrawing}\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  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  openDialog() {\n    if (this.disabled) {\n      return\n    }\n\n    this.dialog.showModal()\n\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    event.preventDefault()\n    event.stopPropagation()\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(event: MouseEvent | TouchEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isDrawing = false\n  }\n\n  draw(event: MouseEvent | TouchEvent) {\n    if (!this.isDrawing) {\n      return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n\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 | null) {\n    this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'\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"]}
+{"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, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-signature')\nexport class OxInputSignature extends OxFormField {\n  static styles = [\n    InputStyles,\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        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: calc(var(--ox-input-gap) * 2);\n      }\n\n      .filler {\n        flex: 1;\n      }\n\n      /* 버튼 스타일 */\n      button {\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        padding: 10px 20px;\n        border: none;\n        border-radius: var(--ox-input-gap);\n        font-family: 'Roboto', sans-serif;\n        font-size: var(--ox-input-font-size);\n        cursor: pointer;\n        transition: background-color 0.3s ease;\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          @pointerdown=${this.startDrawing}\n          @pointerup=${this.stopDrawing}\n          @pointermove=${this.draw}\n          @pointerleave=${this.stopDrawing}\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  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.loadSignature(this.value)\n    }\n  }\n\n  openDialog() {\n    if (this.disabled) {\n      return\n    }\n\n    this.dialog.showModal()\n\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    event.preventDefault()\n    event.stopPropagation()\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(event: MouseEvent | TouchEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isDrawing = false\n  }\n\n  draw(event: MouseEvent | TouchEvent) {\n    if (!this.isDrawing) {\n      return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n\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 | null) {\n    this.previewDiv.style.backgroundImage = dataUrl ? `url(${dataUrl})` : 'none'\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/src/ox-input-stack.js

@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputStack = class OxInputStack extends OxFormField {
     constructor() {
         super(...arguments);
@@ -14,6 +15,7 @@ let OxInputStack = class OxInputStack extends OxFormField {
         this.stack = [];
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: block;
@@ -23,7 +25,7 @@ let OxInputStack = class OxInputStack extends OxFormField {
         width: 100%;
         height: 20px;
         background-color: blue;
-        color: white;
+        color: var(--md-sys-color-on-primary);
       }
 
       div {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            floor\n            ?active=${item.active}\n            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name}\n            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            floor\n            ?active=${item.active}\n            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name}\n            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}

package/dist/src/ox-input-table-column-config.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 import '@material/web/icon/icon.js';
 let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormField {
     constructor() {
@@ -9,6 +10,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
         this.value = [];
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: block;
@@ -21,7 +23,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
       table {
         width: auto;
         border-collapse: collapse;
-        font-size: 12px;
+        font-size: var(--ox-input-font-size-small);
         border: 0;
       }
 
@@ -31,7 +33,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
 
       th,
       td {
-        padding: 0 var(--spacing-small, 2px);
+        padding: 0 var(--ox-input-gap);
         text-align: left;
       }
 
@@ -57,7 +59,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
       }
 
       input {
-        font-size: 12px;
+        font-size: var(--ox-input-font-size-small);
         padding: 0;
         margin: 0;
         border: none;