@operato/input 1.0.0-beta.11 → 1.0.0-beta.14

package/dist/stories/ox-input-multiple-colors.stories.d.ts

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

package/dist/stories/ox-input-multiple-colors.stories.js

@@ -0,0 +1,167 @@
+import '../src/ox-input-multiple-colors.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-multiple-colors',
+    component: 'ox-input-multiple-colors',
+    argTypes: {
+        value: { control: 'array' }
+    }
+};
+const Template = ({}) => html `
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <style>
+    body {
+      /* theme color */
+      --primary-color-rgb: 56, 162, 91;
+      --primary-color: rgb(var(--primary-color-rgb));
+      --secondary-color-rgb: 71, 97, 114;
+      --secondary-color: rgb(var(--secondary-color-rgb));
+      --focus-color: var(--theme-white-color);
+      --primary-background-color: var(--secondary-color);
+      --secondary-background-color: #183936;
+      --main-section-background-color: #f7f6f4;
+      --theme-white-color: #fff;
+      --theme-black-color: rgba(0, 0, 0, 0.9);
+
+      --focus-background-color: var(--primary-color);
+      --primary-text-color: var(--theme-black-color);
+      --secondary-text-color: #218f62;
+
+      --opacity-dark-color: rgba(0, 0, 0, 0.4);
+      --opacity-light-color: rgba(255, 255, 255, 0.8);
+
+      /* status color */
+      --status-success-color: #35a24a;
+      --status-warning-color: #ee8d03;
+      --status-danger-color: #d14946;
+      --status-info-color: #398ace;
+
+      /* common style */
+      --border-radius: 4px;
+      --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+      --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
+
+      --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
+
+      --theme-font: 'Noto', Helvetica;
+
+      --margin-default: 9px;
+      --margin-narrow: 4px;
+      --margin-wide: 15px;
+      --padding-default: var(--margin-default);
+      --padding-narrow: var(--margin-narrow);
+      --padding-wide: var(--margin-wide);
+
+      --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
+      --scrollbar-thumb-hover-color: var(--primary-color);
+
+      --fontsize-default: 14px;
+      --fontsize-small: 13px;
+      --fontsize-large: 16px;
+
+      /* app layout style */
+      --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
+
+      /* title & description style */
+      --title-margin: var(--margin-narrow) 0;
+      --title-font: bold 24px var(--theme-font);
+      --title-text-color: var(--secondary-color);
+      --title-font-mobile: bold 20px var(--theme-font);
+
+      --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
+      --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
+      --page-description-color: var(--secondary-text-color);
+
+      --subtitle-padding: 12px 5px 3px 5px;
+      --subtitle-font: bold 18px var(--theme-font);
+      --subtitle-text-color: var(--primary-color);
+      --subtitle-border-bottom: 1px solid var(--primary-color);
+
+      /* icon style */
+      --icon-tiny-size: 24px;
+      --icon-default-size: 36px;
+      --icon-big-size: 48px;
+      --icon-default-color: var(--theme-white-color);
+
+      /* material design component themes */
+      --mdc-theme-on-primary: var(--theme-white-color);
+      --mdc-theme-primary: var(--secondary-text-color);
+      --mdc-theme-on-secondary: var(--theme-white-color);
+      --mdc-theme-secondary: var(--primary-color);
+      --mdc-button-outline-color: var(--primary-color);
+      --mdc-danger-button-primary-color: var(--status-danger-color);
+      --mdc-danger-button-outline-color: var(--status-danger-color);
+      --mdc-button-outline-width: 1px;
+      --mdc-button-horizontal-padding: 16px;
+
+      /* button style */
+      --button-background-color: #fafbfc;
+      --button-background-focus-color: var(--primary-color);
+      --button-border: var(--border-dark-color);
+      --button-border-radius: var(--border-radius);
+      --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
+      --button-padding: var(--padding-default);
+      --button-color: var(--secondary-color);
+      --button-font: normal 15px var(--theme-font);
+      --button-text-transform: capitalize;
+      --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
+      --button-activ-border: 1px solid var(--primary-color);
+
+      --button-primary-background-color: var(--primary-color);
+      --button-primary-active-background-color: var(--status-success-color);
+      --button-primary-padding: var(--margin-default) var(--margin-wide);
+      --button-primary-color: var(--theme-white-color);
+      --button-primary-font: bold 16px var(--theme-font);
+
+      /* table style */
+      --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+      --th-border-top: 2px solid var(--secondary-color);
+      --th-text-transform: capitalize;
+      --th-font: bold var(--fontsize-small) var(--theme-font);
+      --th-color: rgba(var(--secondary-color-rgb), 0.8);
+
+      --tr-background-color: var(--theme-white-color);
+      --tr-background-odd-color: rgba(255, 255, 255, 0.4);
+      --tr-background-hover-color: #e1f5fe;
+      --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+      --td-padding: var(--padding-default);
+      --td-font: normal 13px var(--theme-font);
+      --td-color: var(--secondary-color);
+
+      /* form style */
+      --label-font: normal var(--fontsize-default) var(--theme-font);
+      --label-color: var(--secondary-color);
+      --label-text-transform: capitalize;
+      --input-margin: var(--margin-narrow) 0;
+      --input-padding: var(--padding-default);
+      --input-min-width: 200px;
+      --input-font: normal var(--fontsize-default) var(--theme-font);
+      --input-hint-font: normal var(--fontsize-small) var(--theme-font);
+      --input-hint-color: #666;
+      --input-container-max-width: 900px;
+      --fieldset-margin: var(--padding-wide) 0;
+      --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
+      --legend-padding: var(--padding-default) 0;
+      --legend-color: var(--secondary-text-color);
+      --legend-font: bold 16px var(--theme-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      body {
+        /* subtitle style */
+        --subtitle-margin: 0;
+      }
+    }
+  </style>
+
+  <ox-input-multiple-colors
+    .value=${['red', 'yellow']}
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+  >
+  </ox-input-multiple-colors>
+`;
+export const Regular = Template.bind({});
+//# sourceMappingURL=ox-input-multiple-colors.stories.js.map

package/dist/stories/ox-input-multiple-colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-multiple-colors.stories.js","sourceRoot":"","sources":["../../stories/ox-input-multiple-colors.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,0BAA0B;IACrC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAC5B;CACF,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqJ3C,CAAC,KAAK,EAAE,QAAQ,CAAC;cAChB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;;;CAGJ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-input-multiple-colors.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-multiple-colors',\n  component: 'ox-input-multiple-colors',\n  argTypes: {\n    value: { control: 'array' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n  <style>\n    body {\n      /* theme color */\n      --primary-color-rgb: 56, 162, 91;\n      --primary-color: rgb(var(--primary-color-rgb));\n      --secondary-color-rgb: 71, 97, 114;\n      --secondary-color: rgb(var(--secondary-color-rgb));\n      --focus-color: var(--theme-white-color);\n      --primary-background-color: var(--secondary-color);\n      --secondary-background-color: #183936;\n      --main-section-background-color: #f7f6f4;\n      --theme-white-color: #fff;\n      --theme-black-color: rgba(0, 0, 0, 0.9);\n\n      --focus-background-color: var(--primary-color);\n      --primary-text-color: var(--theme-black-color);\n      --secondary-text-color: #218f62;\n\n      --opacity-dark-color: rgba(0, 0, 0, 0.4);\n      --opacity-light-color: rgba(255, 255, 255, 0.8);\n\n      /* status color */\n      --status-success-color: #35a24a;\n      --status-warning-color: #ee8d03;\n      --status-danger-color: #d14946;\n      --status-info-color: #398ace;\n\n      /* common style */\n      --border-radius: 4px;\n      --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);\n      --border-light-color: 1px solid rgba(255, 255, 255, 0.3);\n\n      --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);\n\n      --theme-font: 'Noto', Helvetica;\n\n      --margin-default: 9px;\n      --margin-narrow: 4px;\n      --margin-wide: 15px;\n      --padding-default: var(--margin-default);\n      --padding-narrow: var(--margin-narrow);\n      --padding-wide: var(--margin-wide);\n\n      --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);\n      --scrollbar-thumb-hover-color: var(--primary-color);\n\n      --fontsize-default: 14px;\n      --fontsize-small: 13px;\n      --fontsize-large: 16px;\n\n      /* app layout style */\n      --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';\n\n      /* title & description style */\n      --title-margin: var(--margin-narrow) 0;\n      --title-font: bold 24px var(--theme-font);\n      --title-text-color: var(--secondary-color);\n      --title-font-mobile: bold 20px var(--theme-font);\n\n      --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;\n      --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);\n      --page-description-color: var(--secondary-text-color);\n\n      --subtitle-padding: 12px 5px 3px 5px;\n      --subtitle-font: bold 18px var(--theme-font);\n      --subtitle-text-color: var(--primary-color);\n      --subtitle-border-bottom: 1px solid var(--primary-color);\n\n      /* icon style */\n      --icon-tiny-size: 24px;\n      --icon-default-size: 36px;\n      --icon-big-size: 48px;\n      --icon-default-color: var(--theme-white-color);\n\n      /* material design component themes */\n      --mdc-theme-on-primary: var(--theme-white-color);\n      --mdc-theme-primary: var(--secondary-text-color);\n      --mdc-theme-on-secondary: var(--theme-white-color);\n      --mdc-theme-secondary: var(--primary-color);\n      --mdc-button-outline-color: var(--primary-color);\n      --mdc-danger-button-primary-color: var(--status-danger-color);\n      --mdc-danger-button-outline-color: var(--status-danger-color);\n      --mdc-button-outline-width: 1px;\n      --mdc-button-horizontal-padding: 16px;\n\n      /* button style */\n      --button-background-color: #fafbfc;\n      --button-background-focus-color: var(--primary-color);\n      --button-border: var(--border-dark-color);\n      --button-border-radius: var(--border-radius);\n      --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;\n      --button-padding: var(--padding-default);\n      --button-color: var(--secondary-color);\n      --button-font: normal 15px var(--theme-font);\n      --button-text-transform: capitalize;\n      --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n      --button-activ-border: 1px solid var(--primary-color);\n\n      --button-primary-background-color: var(--primary-color);\n      --button-primary-active-background-color: var(--status-success-color);\n      --button-primary-padding: var(--margin-default) var(--margin-wide);\n      --button-primary-color: var(--theme-white-color);\n      --button-primary-font: bold 16px var(--theme-font);\n\n      /* table style */\n      --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);\n      --th-border-top: 2px solid var(--secondary-color);\n      --th-text-transform: capitalize;\n      --th-font: bold var(--fontsize-small) var(--theme-font);\n      --th-color: rgba(var(--secondary-color-rgb), 0.8);\n\n      --tr-background-color: var(--theme-white-color);\n      --tr-background-odd-color: rgba(255, 255, 255, 0.4);\n      --tr-background-hover-color: #e1f5fe;\n      --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);\n      --td-padding: var(--padding-default);\n      --td-font: normal 13px var(--theme-font);\n      --td-color: var(--secondary-color);\n\n      /* form style */\n      --label-font: normal var(--fontsize-default) var(--theme-font);\n      --label-color: var(--secondary-color);\n      --label-text-transform: capitalize;\n      --input-margin: var(--margin-narrow) 0;\n      --input-padding: var(--padding-default);\n      --input-min-width: 200px;\n      --input-font: normal var(--fontsize-default) var(--theme-font);\n      --input-hint-font: normal var(--fontsize-small) var(--theme-font);\n      --input-hint-color: #666;\n      --input-container-max-width: 900px;\n      --fieldset-margin: var(--padding-wide) 0;\n      --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);\n      --legend-padding: var(--padding-default) 0;\n      --legend-color: var(--secondary-text-color);\n      --legend-font: bold 16px var(--theme-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      body {\n        /* subtitle style */\n        --subtitle-margin: 0;\n      }\n    }\n  </style>\n\n  <ox-input-multiple-colors\n    .value=${['red', 'yellow']}\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n  >\n  </ox-input-multiple-colors>\n`\n\nexport const Regular = Template.bind({})\n"]}

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

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

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

@@ -0,0 +1,33 @@
+import '../src/ox-input-options.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-options',
+    component: 'ox-input-options',
+    argTypes: {
+        value: { control: 'object' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'options', value = {} }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-options
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-options>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'options',
+    value: [{ text: 'SHOOSE', value: 'Shoose' }]
+};
+//# sourceMappingURL=ox-input-options.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-options.stories.js","sourceRoot":"","sources":["../../stories/ox-input-options.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASxE,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;CAC7C,CAAA","sourcesContent":["import '../src/ox-input-options.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-options',\n  component: 'ox-input-options',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value = {} }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-options\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-options>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: [{ text: 'SHOOSE', value: 'Shoose' }]\n}\n"]}

package/dist/stories/ox-input-partition-keys.stories.d.ts

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

package/dist/stories/ox-input-partition-keys.stories.js

@@ -0,0 +1,55 @@
+import '../src/ox-input-partition-keys.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-partition-keys',
+    component: 'ox-input-partition-keys',
+    argTypes: {
+        value: { control: 'object' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'partition-keys', value = {} }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-partition-keys
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-partition-keys>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'partition-keys',
+    value: {
+        A: 'A',
+        B: 'B',
+        C: 'C'
+    }
+};
+export const BooleanValues = Template.bind({});
+BooleanValues.args = {
+    name: 'partition-keys',
+    value: {
+        A: true,
+        B: false,
+        C: true
+    }
+};
+export const ColorValues = Template.bind({});
+ColorValues.args = {
+    name: 'partition-keys',
+    value: {
+        A: 'red',
+        B: 'yellow',
+        C: 'blue'
+    }
+};
+//# sourceMappingURL=ox-input-partition-keys.stories.js.map

package/dist/stories/ox-input-partition-keys.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-partition-keys.stories.js","sourceRoot":"","sources":["../../stories/ox-input-partition-keys.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,gBAAgB,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cAS/E,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;CACF,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,CAAC,EAAE,IAAI;QACP,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,IAAI;KACR;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,MAAM;KACV;CACF,CAAA","sourcesContent":["import '../src/ox-input-partition-keys.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-partition-keys',\n  component: 'ox-input-partition-keys',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {} }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-partition-keys\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-partition-keys>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'partition-keys',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  }\n}\n\nexport const BooleanValues = Template.bind({})\nBooleanValues.args = {\n  name: 'partition-keys',\n  value: {\n    A: true,\n    B: false,\n    C: true\n  }\n}\n\nexport const ColorValues = Template.bind({})\nColorValues.args = {\n  name: 'partition-keys',\n  value: {\n    A: 'red',\n    B: 'yellow',\n    C: 'blue'\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,25 @@
+import '../src/ox-input-range.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-range',
+    component: 'ox-input-range',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'number' },
+        step: { control: 'number' },
+        min: { control: 'number' },
+        max: { control: 'number' }
+    }
+};
+const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }) => html `
+  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max}> </ox-input-range>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'range',
+    value: 0,
+    step: 1,
+    min: 0,
+    max: 100
+};
+//# sourceMappingURL=ox-input-range.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC3B;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;yBACxF,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG;CAC9E,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;CACT,CAAA","sourcesContent":["import '../src/ox-input-range.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-range',\n  component: 'ox-input-range',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'number' },\n    step: { control: 'number' },\n    min: { control: 'number' },\n    max: { control: 'number' }\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  step?: number\n  min?: number\n  max?: number\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'range', value = 0, step = 1, min = 0, max = 100 }: ArgTypes) => html`\n  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max}> </ox-input-range>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'range',\n  value: 0,\n  step: 1,\n  min: 0,\n  max: 100\n}\n"]}

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

@@ -0,0 +1,29 @@
+import '../src/ox-input-search.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        placeholder: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        value: {
+            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;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,28 @@
+import '../src/ox-input-search.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-search',
+    component: 'ox-input-search',
+    argTypes: {
+        placeholder: { control: 'text' },
+        name: { control: 'text' },
+        value: { control: 'text' }
+    }
+};
+const Template = ({ placeholder = 'Search', name = 'hello', value = '' }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-search @click=${(e) => console.log('clicked')} name=${name} .checked=${value}>
+  </ox-input-search>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    placeholder: 'label',
+    name: 'label'
+};
+//# sourceMappingURL=ox-input-search.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-search.stories.js","sourceRoot":"","sources":["../../stories/ox-input-search.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;4BAQhF,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,IAAI,aAAa,KAAK;;CAEnG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,OAAO;CACd,CAAA","sourcesContent":["import '../src/ox-input-search.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-search',\n  component: 'ox-input-search',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: string\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'Search', name = 'hello', value = '' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-search @click=${(e: MouseEvent) => console.log('clicked')} name=${name} .checked=${value}>\n  </ox-input-search>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'label',\n  name: 'label'\n}\n"]}

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

@@ -0,0 +1,40 @@
+import '../src/ox-input-unit.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        placeholder: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        stdUnit: {
+            control: string;
+            options: string[];
+        };
+        userUnit: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    placeholder?: string;
+    name?: string;
+    value?: number;
+    stdUnit: string;
+    userUnit?: string;
+}
+export declare const Weight: Story<ArgTypes>;
+export declare const Angle: Story<ArgTypes>;

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

@@ -0,0 +1,41 @@
+import '../src/ox-input-unit.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-unit',
+    component: 'ox-input-unit',
+    argTypes: {
+        placeholder: { control: 'text' },
+        name: { control: 'text' },
+        value: { control: 'number' },
+        stdUnit: { control: 'select', options: ['kg', 'rad'] },
+        userUnit: { control: 'select', options: ['mg', 'g', 'ton', 'degree'] }
+    }
+};
+const Template = ({ placeholder = 'unit', name = 'hello', value = 0, stdUnit = 'kg', userUnit }) => html `
+  <ox-input-unit
+    name=${name}
+    placeholder=${placeholder}
+    .value=${value}
+    std-unit=${stdUnit}
+    user-unit=${userUnit}
+    @change=${(e) => console.log(e.detail)}
+  >
+  </ox-input-unit>
+`;
+export const Weight = Template.bind({});
+Weight.args = {
+    placeholder: 'weight',
+    name: 'weight',
+    value: 0,
+    stdUnit: 'kg',
+    userUnit: 'g'
+};
+export const Angle = Template.bind({});
+Angle.args = {
+    placeholder: 'angle',
+    name: 'angle',
+    value: 0,
+    stdUnit: 'rad',
+    userUnit: 'degree'
+};
+//# sourceMappingURL=ox-input-unit.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-unit.stories.js","sourceRoot":"","sources":["../../stories/ox-input-unit.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;QACtD,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,CAAC,EAAE;KACvE;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,IAAI,EACd,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;WAET,IAAI;kBACG,WAAW;aAChB,KAAK;eACH,OAAO;gBACN,QAAQ;cACV,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;CAGtD,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,MAAM,CAAC,IAAI,GAAG;IACZ,WAAW,EAAE,QAAQ;IACrB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,GAAG;CACd,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;IACX,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;CACnB,CAAA","sourcesContent":["import '../src/ox-input-unit.js'\n\nimport { TemplateResult, html } from 'lit'\n\nexport default {\n  title: 'ox-input-unit',\n  component: 'ox-input-unit',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'number' },\n    stdUnit: { control: 'select', options: ['kg', 'rad'] },\n    userUnit: { control: 'select', options: ['mg', 'g', 'ton', 'degree'] }\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?: number\n  stdUnit: string\n  userUnit?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'unit',\n  name = 'hello',\n  value = 0,\n  stdUnit = 'kg',\n  userUnit\n}: ArgTypes) => html`\n  <ox-input-unit\n    name=${name}\n    placeholder=${placeholder}\n    .value=${value}\n    std-unit=${stdUnit}\n    user-unit=${userUnit}\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n  >\n  </ox-input-unit>\n`\n\nexport const Weight = Template.bind({})\nWeight.args = {\n  placeholder: 'weight',\n  name: 'weight',\n  value: 0,\n  stdUnit: 'kg',\n  userUnit: 'g'\n}\n\nexport const Angle = Template.bind({})\nAngle.args = {\n  placeholder: 'angle',\n  name: 'angle',\n  value: 0,\n  stdUnit: 'rad',\n  userUnit: 'degree'\n}\n"]}

package/dist/stories/ox-input-work-shift.stories.d.ts

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