@operato/input 1.0.0-beta.2 → 1.0.0-beta.22

package/dist/stories/ox-input-3dish.stories.js

@@ -0,0 +1,59 @@
+import '../src/ox-input-3dish.js';
+import '../src/locale/locale-picker.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-3dish',
+    component: 'ox-input-3dish',
+    argTypes: {
+        value: { control: 'object' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = '3dish', 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>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-3dish
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-3dish>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: '3dish',
+    value: [
+        {
+            name: 'DAY',
+            fromDate: -1,
+            fromTime: '22:00',
+            toDate: 0,
+            toTime: '06:00'
+        },
+        {
+            name: 'SWING',
+            fromDate: 0,
+            fromTime: '06:00',
+            toDate: 0,
+            toTime: '14:00'
+        },
+        {
+            name: 'NIGHT',
+            fromDate: 0,
+            fromTime: '14:00',
+            toDate: 0,
+            toTime: '22:00'
+        }
+    ]
+};
+//# sourceMappingURL=ox-input-3dish.stories.js.map

package/dist/stories/ox-input-3dish.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-3dish.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3dish.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,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,OAAO,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYtE,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,OAAO;IACb,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-3dish.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-3dish',\n  component: 'ox-input-3dish',\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 = '3dish', 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  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-3dish\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-3dish>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: '3dish',\n  value: [\n    {\n      name: 'DAY',\n      fromDate: -1,\n      fromTime: '22:00',\n      toDate: 0,\n      toTime: '06:00'\n    },\n    {\n      name: 'SWING',\n      fromDate: 0,\n      fromTime: '06:00',\n      toDate: 0,\n      toTime: '14:00'\n    },\n    {\n      name: 'NIGHT',\n      fromDate: 0,\n      fromTime: '14:00',\n      toDate: 0,\n      toTime: '22:00'\n    }\n  ]\n}\n"]}

package/dist/stories/{index.stories.d.ts → ox-input-barcode.stories.d.ts}

@@ -1,16 +1,19 @@
-import '../src/input.js';
+import '../src/ox-input-barcode.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        title: {
+        name: {
             control: string;
         };
-        counter: {
+        value: {
             control: string;
         };
-        textColor: {
+        scannable: {
+            control: string;
+        };
+        withoutEnter: {
             control: string;
         };
     };
@@ -22,12 +25,9 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    title?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
+    name?: string;
+    value?: string;
+    scannable?: boolean;
+    withoutEnter?: boolean;
 }
 export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

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

@@ -0,0 +1,22 @@
+import '../src/ox-input-barcode.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-barcode',
+    component: 'ox-input-barcode',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'text' },
+        scannable: { control: 'boolean' },
+        withoutEnter: { control: 'boolean' }
+    }
+};
+const Template = ({ name = 'barcode', scannable = true, withoutEnter = true }) => html `
+  <ox-input-barcode name=${name} ?without-enter=${withoutEnter} ?scannable=${scannable}> </ox-input-barcode>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'barcode',
+    scannable: true,
+    withoutEnter: true
+};
+//# sourceMappingURL=ox-input-barcode.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.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,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,YAAY,GAAG,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;2BACtF,IAAI,mBAAmB,YAAY,eAAe,SAAS;CACrF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;CACnB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-barcode',\n  component: 'ox-input-barcode',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'text' },\n    scannable: { control: 'boolean' },\n    withoutEnter: { 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?: string\n  scannable?: boolean\n  withoutEnter?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'barcode', scannable = true, withoutEnter = true }: ArgTypes) => html`\n  <ox-input-barcode name=${name} ?without-enter=${withoutEnter} ?scannable=${scannable}> </ox-input-barcode>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'barcode',\n  scannable: true,\n  withoutEnter: true\n}\n"]}

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

@@ -0,0 +1,26 @@
+import '../src/ox-input-crontab.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?: string;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,37 @@
+import '../src/ox-input-crontab.js';
+import '../src/locale/locale-picker.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-crontab',
+    component: 'ox-input-crontab',
+    argTypes: {
+        value: { control: 'text' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'crontab', 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>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-crontab
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-crontab>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'crontab',
+    value: '* * * * * *'
+};
+//# sourceMappingURL=ox-input-conntab.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-conntab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-conntab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,gCAAgC,CAAA;AAEvC,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,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,aAAa,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYnF,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,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-crontab',\n  component: 'ox-input-crontab',\n  argTypes: {\n    value: { control: 'text' },\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?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'crontab', 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  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-crontab\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-crontab>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'crontab',\n  value: '* * * * * *'\n}\n"]}

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

@@ -0,0 +1,26 @@
+import '../src/ox-input-crontab.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?: string;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,37 @@
+import '../src/ox-input-crontab.js';
+import '../src/locale/locale-picker.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-crontab',
+    component: 'ox-input-crontab',
+    argTypes: {
+        value: { control: 'text' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'crontab', 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>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-crontab
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-crontab>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'crontab',
+    value: '* * * * * *'
+};
+//# sourceMappingURL=ox-input-crontab.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-crontab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-crontab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,gCAAgC,CAAA;AAEvC,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,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,aAAa,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYnF,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,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-crontab',\n  component: 'ox-input-crontab',\n  argTypes: {\n    value: { control: 'text' },\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?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'crontab', 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  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-crontab\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-crontab>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'crontab',\n  value: '* * * * * *'\n}\n"]}

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

@@ -0,0 +1,49 @@
+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;
+        };
+    };
+};
+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;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,48 @@
+import '../src/ox-input-file.js';
+import { html } from 'lit';
+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' }
+    }
+};
+const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false }) => 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-file
+    label=${label}
+    name=${name}
+    ?multiple=${multiple}
+    ?hide-filelist=${hideFileList}
+    ?attach-filelist=${attachFileList}
+    accept=${accept}
+    icon=${icon}
+    description=${description}
+  >
+  </ox-input-file>
+`;
+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

@@ -0,0 +1 @@
+{"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;AAE1C,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;KACvC;CACF,CAAA;AAmBD,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,EACb,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;YASR,KAAK;WACN,IAAI;gBACC,QAAQ;qBACH,YAAY;uBACV,cAAc;aACxB,MAAM;WACR,IAAI;kBACG,WAAW;;;CAG5B,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'\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  }\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}\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}: 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-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  >\n  </ox-input-file>\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-key-values.stories.d.ts

@@ -0,0 +1,29 @@
+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;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: object;
+    options?: object;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,49 @@
+import '../src/ox-input-key-values.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-key-values',
+    component: 'ox-input-key-values',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'object' },
+        options: { control: 'object' }
+    }
+};
+const Template = ({ name = 'key-values', value = {}, options = [] }) => 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-key-values
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+    .options=${options}
+  >
+  </ox-input-key-values>
+`;
+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

@@ -0,0 +1 @@
+{"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;AAE1C,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;KAC/B;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASzF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;eACH,OAAO;;;CAGrB,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'\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  }\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}\n\nconst Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [] }: 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-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  >\n  </ox-input-key-values>\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-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