@operato/input 9.0.0-beta.55 → 9.0.0-beta.61

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-duration.stories.js","sourceRoot":"","sources":["../../stories/ox-input-duration.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,UAAU,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB7F,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,IAAI;CACZ,CAAA","sourcesContent":["import '../src/ox-input-duration.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-duration',\n  component: 'ox-input-duration',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\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  name?: string\n  value?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, 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    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-duration\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-duration>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'duration',\n  value: 3601\n}\n"]}

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

@@ -1,53 +0,0 @@
-import '../src/ox-input-file.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        name: {
-            control: string;
-        };
-        multiple: {
-            control: string;
-        };
-        accept: {
-            control: string;
-        };
-        icon: {
-            control: string;
-        };
-        label: {
-            control: string;
-        };
-        description: {
-            control: string;
-        };
-        hideFileList: {
-            control: string;
-        };
-        attachFileList: {
-            control: string;
-        };
-        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;
-    multiple?: boolean;
-    accept?: string;
-    icon?: string;
-    description?: string;
-    hideFileList?: boolean;
-    attachFileList?: boolean;
-    disabled?: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

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

@@ -1,80 +0,0 @@
-import '../src/ox-input-file.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-input-file',
-    component: 'ox-input-file',
-    argTypes: {
-        name: { control: 'text' },
-        multiple: { control: 'boolean' },
-        accept: { control: 'text' },
-        icon: { control: 'text' },
-        label: { control: 'text' },
-        description: { control: 'text' },
-        hideFileList: { control: 'boolean' },
-        attachFileList: { control: 'boolean' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false, 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-file
-      label=${label}
-      name=${name}
-      ?multiple=${multiple}
-      ?hide-filelist=${hideFileList}
-      ?attach-filelist=${attachFileList}
-      accept=${accept}
-      icon=${icon}
-      description=${description}
-      ?disabled=${disabled}
-    >
-    </ox-input-file>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    label: 'select files',
-    name: 'files',
-    multiple: true,
-    hideFileList: false,
-    attachFileList: false,
-    accept: '*.*',
-    icon: 'upload',
-    description: 'drop files here!'
-};
-//# sourceMappingURL=ox-input-file.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;cAgBjB,KAAK;aACN,IAAI;kBACC,QAAQ;uBACH,YAAY;yBACV,cAAc;eACxB,MAAM;aACR,IAAI;oBACG,WAAW;kBACb,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-file',\n  component: 'ox-input-file',\n  argTypes: {\n    name: { control: 'text' },\n    multiple: { control: 'boolean' },\n    accept: { control: 'text' },\n    icon: { control: 'text' },\n    label: { control: 'text' },\n    description: { control: 'text' },\n    hideFileList: { control: 'boolean' },\n    attachFileList: { control: 'boolean' },\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  multiple?: boolean\n  accept?: string\n  icon?: string\n  description?: string\n  hideFileList?: boolean\n  attachFileList?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'select files',\n  name = 'file',\n  multiple = true,\n  accept,\n  icon,\n  description,\n  hideFileList = false,\n  attachFileList = false,\n  disabled\n}: 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-file\n      label=${label}\n      name=${name}\n      ?multiple=${multiple}\n      ?hide-filelist=${hideFileList}\n      ?attach-filelist=${attachFileList}\n      accept=${accept}\n      icon=${icon}\n      description=${description}\n      ?disabled=${disabled}\n    >\n    </ox-input-file>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'select files',\n  name: 'files',\n  multiple: true,\n  hideFileList: false,\n  attachFileList: false,\n  accept: '*.*',\n  icon: 'upload',\n  description: 'drop files here!'\n}\n"]}

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

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

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

@@ -1,66 +0,0 @@
-import '../src/ox-input-hashtags.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-input-hashtags',
-    component: 'ox-input-hashtags',
-    argTypes: {
-        placeholder: { control: 'text' },
-        name: { control: 'text' },
-        value: { control: 'array' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    .container {
-      height: 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-hashtags
-      @change=${(e) => console.log('changed', e.target.value)}
-      name=${name}
-      placeholder=${placeholder}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-hashtags>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    placeholder: 'hashtag',
-    name: 'hashtag',
-    value: ['abc', 'def']
-};
-//# sourceMappingURL=ox-input-hashtags.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-hashtags.stories.js","sourceRoot":"","sources":["../../stories/ox-input-hashtags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBjH,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;aAC7E,IAAI;oBACG,WAAW;eAChB,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;CACtB,CAAA","sourcesContent":["import '../src/ox-input-hashtags.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-hashtags',\n  component: 'ox-input-hashtags',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'array' },\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  placeholder?: string\n  name?: string\n  value?: string[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 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-hashtags\n      @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n      name=${name}\n      placeholder=${placeholder}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-hashtags>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'hashtag',\n  name: 'hashtag',\n  value: ['abc', 'def']\n}\n"]}

package/dist/stories/ox-input-i18n-label.stories.d.ts

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

package/dist/stories/ox-input-i18n-label.stories.js

@@ -1,88 +0,0 @@
-import '../src/ox-input-i18n-label.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-input-i18n-label',
-    component: 'ox-input-i18n-label',
-    argTypes: {
-        name: { control: 'text' },
-        value: { control: 'object' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ name = 'values', value, disabled }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    .container {
-      height: 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-i18n-label
-      @change=${(e) => {
-    console.log(e.target.value);
-}}
-      name=${name}
-      .value=${value}
-      .languages=${[
-    {
-        code: 'ko',
-        display: '한글'
-    },
-    {
-        code: 'en',
-        display: 'English'
-    },
-    {
-        code: 'zh',
-        display: 'Chinese'
-    },
-    {
-        code: 'ja',
-        display: 'Japanese'
-    }
-]}
-      ?disabled=${disabled}
-    >
-    </ox-input-i18n-label>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    name: 'i18n labels',
-    value: {
-        ko: '한글 코드',
-        en: 'English code',
-        zh: 'Chinese code',
-        ja: 'Japan code'
-    }
-};
-//# sourceMappingURL=ox-input-i18n-label.stories.js.map

package/dist/stories/ox-input-i18n-label.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-i18n-label.stories.js","sourceRoot":"","sources":["../../stories/ox-input-i18n-label.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBpF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;mBACD;IACX;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,UAAU;KACpB;CACF;kBACW,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,YAAY;KACjB;CACF,CAAA","sourcesContent":["import '../src/ox-input-i18n-label.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-i18n-label',\n  component: 'ox-input-i18n-label',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\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  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'values', value, disabled }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 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-i18n-label\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      .languages=${[\n        {\n          code: 'ko',\n          display: '한글'\n        },\n        {\n          code: 'en',\n          display: 'English'\n        },\n        {\n          code: 'zh',\n          display: 'Chinese'\n        },\n        {\n          code: 'ja',\n          display: 'Japanese'\n        }\n      ]}\n      ?disabled=${disabled}\n    >\n    </ox-input-i18n-label>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'i18n labels',\n  value: {\n    ko: '한글 코드',\n    en: 'English code',\n    zh: 'Chinese code',\n    ja: 'Japan code'\n  }\n}\n"]}

package/dist/stories/ox-input-key-values.stories.d.ts

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

package/dist/stories/ox-input-key-values.stories.js

@@ -1,81 +0,0 @@
-import '../src/ox-input-key-values.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-input-key-values',
-    component: 'ox-input-key-values',
-    argTypes: {
-        name: { control: 'text' },
-        value: { control: 'object' },
-        options: { control: 'object' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ name = 'key-values', value = {}, options = [], 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-key-values
-      @change=${(e) => {
-    console.log(e.target.value);
-}}
-      name=${name}
-      .value=${value}
-      .options=${options}
-      ?disabled=${disabled}
-    >
-    </ox-input-key-values>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    name: 'key-values',
-    value: {
-        A: 'A',
-        B: 'B',
-        C: 'C'
-    },
-    options: [
-        {
-            display: '초기값',
-            value: 'ABC'
-        },
-        {
-            display: '후기값',
-            value: 'XYZ'
-        }
-    ]
-};
-//# sourceMappingURL=ox-input-key-values.stories.js.map

package/dist/stories/ox-input-key-values.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-key-values.stories.js","sourceRoot":"","sources":["../../stories/ox-input-key-values.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB3G,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;iBACH,OAAO;kBACN,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;IACD,OAAO,EAAE;QACP;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;QACD;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-key-values.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-key-values',\n  component: 'ox-input-key-values',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    options: { control: 'object' },\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  name?: string\n  value?: object\n  options?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], 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-key-values\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      .options=${options}\n      ?disabled=${disabled}\n    >\n    </ox-input-key-values>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'key-values',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  },\n  options: [\n    {\n      display: '초기값',\n      value: 'ABC'\n    },\n    {\n      display: '후기값',\n      value: 'XYZ'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-input-mass-fraction.stories.d.ts

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

package/dist/stories/ox-input-mass-fraction.stories.js

@@ -1,79 +0,0 @@
-import '../src/ox-input-mass-fraction.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-input-mass-fraction',
-    component: 'ox-input-mass-fraction',
-    argTypes: {
-        name: { control: 'text' },
-        value: { control: 'object' },
-        defaultValue: { control: 'object' },
-        composable: { control: 'boolean' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, composable = true, 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-mass-fraction
-      @change=${(e) => {
-    console.log(e.target.value);
-}}
-      name=${name}
-      .value=${value}
-      .defaultValue=${defaultValue}
-      ?composable=${composable}
-      ?disabled=${disabled}
-    >
-    </ox-input-mass-fraction>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    name: 'mass-fraction',
-    value: {
-        H2O: 0.8,
-        N2O: 0.1,
-        CO2: 0.1
-    },
-    composable: true,
-    defaultValue: {
-        H2O: 0.8,
-        N2O: 0.1,
-        CO2: 0.1
-    }
-};
-//# sourceMappingURL=ox-input-mass-fraction.stories.js.map

package/dist/stories/ox-input-mass-fraction.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-mass-fraction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-mass-fraction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAClC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,eAAe,EACtB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,UAAU,GAAG,IAAI,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;sBACE,YAAY;oBACd,UAAU;kBACZ,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE;QACL,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;IACD,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE;QACZ,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAA","sourcesContent":["import '../src/ox-input-mass-fraction.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-mass-fraction',\n  component: 'ox-input-mass-fraction',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    defaultValue: { control: 'object' },\n    composable: { control: 'boolean' },\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  name?: string\n  value?: object\n  defaultValue?: object\n  composable?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'mass-fraction',\n  value = {},\n  defaultValue = {},\n  composable = true,\n  disabled\n}: 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-mass-fraction\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      .defaultValue=${defaultValue}\n      ?composable=${composable}\n      ?disabled=${disabled}\n    >\n    </ox-input-mass-fraction>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'mass-fraction',\n  value: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  },\n  composable: true,\n  defaultValue: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  }\n}\n"]}