@operato/input 1.0.0-beta.12 → 1.0.0-beta.13

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,82 @@
+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="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;;;;WAIzG,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=\"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"]}