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

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,28 @@
+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 `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <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;;;;yBAIxF,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  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\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,32 @@
+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
+    @change=${(e) => console.log('changed', e.target.value)}
+    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;;;;;;;;;cAS9F,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;WAC7E,IAAI;eACA,KAAK;;;CAGnB,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\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    name=${name}\n    .checked=${value}\n  >\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,42 @@
+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 `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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,EAAE,IAAI,EAAkB,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;;;WAGT,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 { html, TemplateResult } 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  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\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>;

package/dist/stories/ox-input-work-shift.stories.js

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

package/dist/stories/ox-input-work-shift.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-work-shift.stories.js","sourceRoot":"","sources":["../../stories/ox-input-work-shift.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,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,YAAY,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAY3E,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,YAAY;IAClB,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-work-shift.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-work-shift',\n  component: 'ox-input-work-shift',\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 = 'work-shift', 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-work-shift\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-work-shift>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'work-shift',\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/ox-select.stories.d.ts

@@ -0,0 +1,30 @@
+import '../src/ox-select.js';
+import '../src/ox-checkbox.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        placeholder: {
+            control: string;
+        };
+        name: {
+            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?: object | string;
+    slot?: TemplateResult;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const MultipleSelect: Story<ArgTypes>;
+export declare const MultipleWithCheckbox: Story<ArgTypes>;

package/dist/stories/ox-select.stories.js

@@ -0,0 +1,83 @@
+import '../src/ox-select.js';
+import '../src/ox-checkbox.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-select',
+    component: 'ox-select',
+    argTypes: {
+        placeholder: { control: 'text' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <ox-select
+    name=${name}
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    placeholder=${placeholder}
+    .value=${value}
+  >
+    ${slot}
+  </ox-select>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    placeholder: 'single select',
+    name: 'label',
+    value: '',
+    slot: html `
+    <ox-popup-list align-left nowrap>
+      <div option value="A">LABEL-A</div>
+      <div option value="B">LABEL-B</div>
+      <div option value="C">LABEL-C</div>
+      <div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
+    </ox-popup-list>
+  `
+};
+export const MultipleSelect = Template.bind({});
+MultipleSelect.args = {
+    placeholder: 'multiple select',
+    name: 'multiple',
+    value: ['B', 'TOO LONG VALUE'],
+    slot: html `
+    <ox-popup-list multiple  with-search>
+      <div option value="A">A</div>
+      <div option value="B">B</div>
+      <div option value="C">C</div>
+      <div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
+    </ox-popup-list>
+  `
+};
+export const MultipleWithCheckbox = Template.bind({});
+MultipleWithCheckbox.args = {
+    placeholder: 'multiple with checkbox',
+    name: 'multiple',
+    value: ['B', 'C', 'F'],
+    slot: html `
+    <ox-popup-list attr-selected="checked" multiple with-search>
+      <ox-checkbox
+        option
+        @change=${(e) => {
+        const target = e.target;
+        const options = target.parentElement.querySelectorAll('[option]');
+        console.log(options);
+        options.forEach(option => (option.checked = target.checked));
+    }}
+        >set all</ox-checkbox
+      >
+      <ox-checkbox option value="A">LABEL-A</ox-checkbox>
+      <ox-checkbox option value="B">LABEL-B</ox-checkbox>
+      <ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
+      <ox-checkbox option value="D">LABEL-D</ox-checkbox>
+      <ox-checkbox option value="E">LABEL-E</ox-checkbox>
+      <ox-checkbox option value="F">LABEL-F</ox-checkbox>
+      <ox-checkbox option value="G">LABEL-G</ox-checkbox>
+      <ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
+    </ox-popup-list>
+  `
+};
+//# sourceMappingURL=ox-select.stories.js.map

package/dist/stories/ox-select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,UAAU,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;WAKzG,IAAI;cACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;kBACa,WAAW;aAChB,KAAK;;MAEZ,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,iBAAiB;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE,wBAAwB;IACrC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,IAAI,CAAA;;;;kBAIM,CAAC,CAAQ,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;QAClE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;IACpF,CAAC;;;;;;;;;;;;GAYN;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-select',\n  component: 'ox-select',\n  argTypes: {\n    placeholder: { 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  placeholder?: string\n  name?: string\n  value?: object | string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot }: 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\n  <ox-select\n    name=${name}\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    placeholder=${placeholder}\n    .value=${value}\n  >\n    ${slot}\n  </ox-select>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'single select',\n  name: 'label',\n  value: '',\n  slot: html`\n    <ox-popup-list align-left nowrap>\n      <div option value=\"A\">LABEL-A</div>\n      <div option value=\"B\">LABEL-B</div>\n      <div option value=\"C\">LABEL-C</div>\n      <div option value=\"TOO LONG VALUE\">LABEL-TOO LONG VALUE</div>\n    </ox-popup-list>\n  `\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n  placeholder: 'multiple select',\n  name: 'multiple',\n  value: ['B', 'TOO LONG VALUE'],\n  slot: html`\n    <ox-popup-list multiple  with-search>\n      <div option value=\"A\">A</div>\n      <div option value=\"B\">B</div>\n      <div option value=\"C\">C</div>\n      <div option value=\"TOO LONG VALUE\" />TOO LONG VALUE</div>\n    </ox-popup-list>\n  `\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n  placeholder: 'multiple with checkbox',\n  name: 'multiple',\n  value: ['B', 'C', 'F'],\n  slot: html`\n    <ox-popup-list attr-selected=\"checked\" multiple with-search>\n      <ox-checkbox\n        option\n        @change=${(e: Event) => {\n          const target = e.target as HTMLInputElement\n          const options = target.parentElement!.querySelectorAll('[option]')\n          console.log(options)\n          options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n        }}\n        >set all</ox-checkbox\n      >\n      <ox-checkbox option value=\"A\">LABEL-A</ox-checkbox>\n      <ox-checkbox option value=\"B\">LABEL-B</ox-checkbox>\n      <ox-checkbox option value=\"C\" checked>LABEL-C</ox-checkbox>\n      <ox-checkbox option value=\"D\">LABEL-D</ox-checkbox>\n      <ox-checkbox option value=\"E\">LABEL-E</ox-checkbox>\n      <ox-checkbox option value=\"F\">LABEL-F</ox-checkbox>\n      <ox-checkbox option value=\"G\">LABEL-G</ox-checkbox>\n      <ox-checkbox option value=\"TOO LONG VALUE\">TOO LONG VALUE</ox-checkbox>\n    </ox-popup-list>\n  `\n}\n"]}

package/dist/themes/common-grist-styles.d.ts

@@ -0,0 +1 @@
+export declare const CommonGristStyles: import("lit").CSSResult;

package/dist/themes/common-grist-styles.js

@@ -0,0 +1,110 @@
+import { css } from 'lit';
+export const CommonGristStyles = css `
+  :host {
+    display: flex;
+
+    width: 100%;
+  }
+
+  ox-grist {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  [slot='headroom'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--padding-default) var(--padding-wide);
+    border-top: 2px solid rgba(0, 0, 0, 0.2);
+    background-color: var(--theme-white-color);
+    box-shadow: var(--box-shadow);
+
+    --mdc-icon-size: 24px;
+  }
+  #sorters mwc-icon,
+  #modes mwc-icon {
+    --mdc-icon-size: 18px;
+  }
+  #sorters {
+    margin-left: auto;
+    margin-right: var(--margin-default);
+    padding-left: var(--padding-narrow);
+    border-bottom: var(--border-dark-color);
+    position: relative;
+    color: var(--secondary-color);
+    font-size: var(--fontsize-default);
+    user-select: none;
+  }
+
+  #sorters > * {
+    padding: var(--padding-narrow);
+    vertical-align: middle;
+  }
+
+  #modes > * {
+    padding: var(--padding-narrow);
+    opacity: 0.5;
+    color: var(--primary-text-color);
+    cursor: pointer;
+  }
+
+  #modes > mwc-icon[active] {
+    border-radius: 9px;
+    background-color: rgba(var(--primary-color-rgb), 0.05);
+    opacity: 1;
+    color: var(--secondary-text-color);
+    cursor: default;
+  }
+
+  #modes > mwc-icon:hover {
+    opacity: 1;
+    color: var(--secondary-text-color);
+  }
+
+  #add {
+    width: 50px;
+    text-align: right;
+  }
+
+  #add button {
+    background-color: var(--status-success-color);
+    border: 0;
+    border-radius: 50%;
+    padding: 5px;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+  }
+
+  #add button:hover {
+    background-color: var(--focus-background-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  #add button mwc-icon {
+    font-size: 2em;
+    color: var(--theme-white-color);
+  }
+
+  #filters {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #filters * {
+    margin-right: var(--margin-default);
+  }
+
+  @media only screen and (max-width: 460px) {
+    #filters {
+      flex-direction: column;
+    }
+
+    #modes {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=common-grist-styles.js.map

package/dist/themes/common-grist-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../themes/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonGristStyles = css`\n  :host {\n    display: flex;\n\n    width: 100%;\n  }\n\n  ox-grist {\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  [slot='headroom'] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--padding-default) var(--padding-wide);\n    border-top: 2px solid rgba(0, 0, 0, 0.2);\n    background-color: var(--theme-white-color);\n    box-shadow: var(--box-shadow);\n\n    --mdc-icon-size: 24px;\n  }\n  #sorters mwc-icon,\n  #modes mwc-icon {\n    --mdc-icon-size: 18px;\n  }\n  #sorters {\n    margin-left: auto;\n    margin-right: var(--margin-default);\n    padding-left: var(--padding-narrow);\n    border-bottom: var(--border-dark-color);\n    position: relative;\n    color: var(--secondary-color);\n    font-size: var(--fontsize-default);\n    user-select: none;\n  }\n\n  #sorters > * {\n    padding: var(--padding-narrow);\n    vertical-align: middle;\n  }\n\n  #modes > * {\n    padding: var(--padding-narrow);\n    opacity: 0.5;\n    color: var(--primary-text-color);\n    cursor: pointer;\n  }\n\n  #modes > mwc-icon[active] {\n    border-radius: 9px;\n    background-color: rgba(var(--primary-color-rgb), 0.05);\n    opacity: 1;\n    color: var(--secondary-text-color);\n    cursor: default;\n  }\n\n  #modes > mwc-icon:hover {\n    opacity: 1;\n    color: var(--secondary-text-color);\n  }\n\n  #add {\n    width: 50px;\n    text-align: right;\n  }\n\n  #add button {\n    background-color: var(--status-success-color);\n    border: 0;\n    border-radius: 50%;\n    padding: 5px;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n  }\n\n  #add button:hover {\n    background-color: var(--focus-background-color);\n    box-shadow: var(--box-shadow);\n  }\n\n  #add button mwc-icon {\n    font-size: 2em;\n    color: var(--theme-white-color);\n  }\n\n  #filters {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  #filters * {\n    margin-right: var(--margin-default);\n  }\n\n  @media only screen and (max-width: 460px) {\n    #filters {\n      flex-direction: column;\n    }\n\n    #modes {\n      display: none;\n    }\n  }\n`\n"]}