@operato/input 2.0.0-alpha.9 → 2.0.0-alpha.90

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

@@ -1 +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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASlF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: 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    ?disabled=${disabled}\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"]}
+{"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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBlF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <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    ?disabled=${disabled}\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.js

@@ -11,7 +11,19 @@ export default {
 };
 const Template = ({ name = 'partition-keys', value = {}, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

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

@@ -1 +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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,gBAAgB,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,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;gBACF,QAAQ;;;CAGvB,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","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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: 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    ?disabled=${disabled}\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"]}
+{"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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,gBAAgB,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBzF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,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","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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <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    ?disabled=${disabled}\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"]}

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

@@ -12,7 +12,19 @@ export default {
 };
 const Template = ({ name = 'privilege', value = null, privileges, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-privilege.stories.js","sourceRoot":"","sources":["../../stories/ox-input-privilege.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,WAAW,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;cAiBlG,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;kBACA,UAAU;gBACZ,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAA","sourcesContent":["import '../src/ox-input-privilege.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-privilege',\n  component: 'ox-input-privilege',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  privileges: { name: string; category: string; description: string }[]\n  value?: {\n    privilege: string\n    category: string\n    owner: boolean\n    super: boolean\n  } | null\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: 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\n    ox-input-privilege {\n      width: 100%;\n      min-height: 500px;\n    }\n  </style>\n\n  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-privilege\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .privileges=${privileges}\n    ?disabled=${disabled}\n  >\n  </ox-input-privilege>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'privilege',\n  privileges: [\n    {\n      name: 'query',\n      category: 'aaa',\n      description: 'readable aaa'\n    },\n    {\n      name: 'mutation',\n      category: 'aaa',\n      description: 'writable aaa'\n    }\n  ],\n  value: {\n    privilege: 'mutation',\n    category: 'aaa',\n    owner: true,\n    super: true\n  }\n}\n"]}
+{"version":3,"file":"ox-input-privilege.stories.js","sourceRoot":"","sources":["../../stories/ox-input-privilege.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,WAAW,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BlG,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;kBACA,UAAU;gBACZ,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAA","sourcesContent":["import '../src/ox-input-privilege.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-privilege',\n  component: 'ox-input-privilege',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  privileges: { name: string; category: string; description: string }[]\n  value?: {\n    privilege: string\n    category: string\n    owner: boolean\n    super: boolean\n  } | null\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n\n    ox-input-privilege {\n      width: 100%;\n      min-height: 500px;\n    }\n  </style>\n\n  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-privilege\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .privileges=${privileges}\n    ?disabled=${disabled}\n  >\n  </ox-input-privilege>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'privilege',\n  privileges: [\n    {\n      name: 'query',\n      category: 'aaa',\n      description: 'readable aaa'\n    },\n    {\n      name: 'mutation',\n      category: 'aaa',\n      description: 'writable aaa'\n    }\n  ],\n  value: {\n    privilege: 'mutation',\n    category: 'aaa',\n    owner: true,\n    super: true\n  }\n}\n"]}

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

@@ -11,7 +11,19 @@ export default {
 };
 const Template = ({ name = 'quantifier', value, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <ox-input-quantifier
     name=${name}

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-quantifier.stories.js","sourceRoot":"","sources":["../../stories/ox-input-quantifier.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAI1C,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,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;WAKnF,IAAI;aACF,KAAK;cACJ,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;gBAC9D,QAAQ;;;CAGvB,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,CAAC,EAAE,EAAE,GAAG,CAAC;CACjB,CAAA","sourcesContent":["import '../src/ox-input-quantifier.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxInputQuantifier } from '../src/ox-input-quantifier.js'\n\nexport default {\n  title: 'ox-input-quantifier',\n  component: 'ox-input-quantifier',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'array' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: 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-quantifier\n    name=${name}\n    .value=${value}\n    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}\n    ?disabled=${disabled}\n  >\n  </ox-input-quantifier>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'quantifier',\n  value: [10, 100]\n}\n"]}
+{"version":3,"file":"ox-input-quantifier.stories.js","sourceRoot":"","sources":["../../stories/ox-input-quantifier.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAI1C,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,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;WAiBnF,IAAI;aACF,KAAK;cACJ,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;gBAC9D,QAAQ;;;CAGvB,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,CAAC,EAAE,EAAE,GAAG,CAAC;CACjB,CAAA","sourcesContent":["import '../src/ox-input-quantifier.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxInputQuantifier } from '../src/ox-input-quantifier.js'\n\nexport default {\n  title: 'ox-input-quantifier',\n  component: 'ox-input-quantifier',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'array' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <ox-input-quantifier\n    name=${name}\n    .value=${value}\n    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}\n    ?disabled=${disabled}\n  >\n  </ox-input-quantifier>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'quantifier',\n  value: [10, 100]\n}\n"]}

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

@@ -14,7 +14,19 @@ export default {
 };
 const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
   </ox-input-range>

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

@@ -1 +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;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;yBAIK,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG,cAAc,QAAQ;;CAEpG,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  step?: number\n  min?: number\n  max?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'range',\n  value = 0,\n  step = 1,\n  min = 0,\n  max = 100,\n  disabled\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\n  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>\n  </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"]}
+{"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;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;yBAgBK,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG,cAAc,QAAQ;;CAEpG,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  step?: number\n  min?: number\n  max?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'range',\n  value = 0,\n  step = 1,\n  min = 0,\n  max = 100,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>\n  </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.js

@@ -13,7 +13,19 @@ export default {
 };
 const Template = ({ placeholder = 'Search', name = 'hello', value = '', selectAfterChange, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

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

@@ -1 +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;QAC1B,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,QAAQ,EACtB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,iBAAiB,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASN,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;2BAC7D,iBAAiB;WACjC,IAAI;eACA,KAAK;gBACJ,QAAQ;;;CAGvB,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;IACb,iBAAiB,EAAE,KAAK;CACzB,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    selectAfterChange: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: string\n  selectAfterChange?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Search',\n  name = 'hello',\n  value = '',\n  selectAfterChange,\n  disabled\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-search\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    ?select-after-change=${selectAfterChange}\n    name=${name}\n    .checked=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-search>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'label',\n  name: 'label',\n  selectAfterChange: false\n}\n"]}
+{"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;QAC1B,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,QAAQ,EACtB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,iBAAiB,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBN,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;2BAC7D,iBAAiB;WACjC,IAAI;eACA,KAAK;gBACJ,QAAQ;;;CAGvB,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;IACb,iBAAiB,EAAE,KAAK;CACzB,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    selectAfterChange: { control: 'boolean' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: string\n  selectAfterChange?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Search',\n  name = 'hello',\n  value = '',\n  selectAfterChange,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-search\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    ?select-after-change=${selectAfterChange}\n    name=${name}\n    .checked=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-search>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'label',\n  name: 'label',\n  selectAfterChange: false\n}\n"]}

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

@@ -13,7 +13,19 @@ export default {
 };
 const Template = ({ name = 'options', value, multiple = false, options = [], disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     ox-input-select-buttons {
       max-width: 400px;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-input-select-buttons.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,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,EAAE,EACZ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;cAUN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;eACH,OAAO;gBACN,QAAQ;gBACR,QAAQ;;;CAGvB,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,SAAS;IAChB,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,SAAS,CAAC;IAClB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACzC;CACF,CAAA","sourcesContent":["import '../src/ox-input-select-buttons.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-select-buttons',\n  component: 'ox-input-select-buttons',\n  argTypes: {\n    value: { control: 'object' },\n    options: { control: 'object' },\n    multiple: { control: 'boolean' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object | string\n  options: object\n  multiple?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'options',\n  value,\n  multiple = false,\n  options = [],\n  disabled\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    ox-input-select-buttons {\n      max-width: 400px;\n    }\n  </style>\n\n  <ox-input-select-buttons\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .options=${options}\n    ?multiple=${multiple}\n    ?disabled=${disabled}\n  >\n  </ox-input-select-buttons>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: 'Clothes',\n  options: [\n    { display: 'SHOOSE', value: 'Shoose' },\n    { display: 'CHOTHES', value: 'Clothes' },\n    { display: 'GLOVES', value: 'Gloves' }\n  ]\n}\n\nexport const Multiple = Template.bind({})\nMultiple.args = {\n  name: 'options',\n  value: ['Clothes'],\n  multiple: true,\n  options: [\n    { display: 'SHOOSE1', value: 'Shoose1' },\n    { display: 'CHOTHES1', value: 'Clothes1' },\n    { display: 'GLOVES1', value: 'Gloves1' },\n    { display: 'SHOOSE2', value: 'Shoose2' },\n    { display: 'CHOTHES2', value: 'Clothes2' },\n    { display: 'GLOVES2', value: 'Gloves2' },\n    { display: 'SHOOSE3', value: 'Shoose3' },\n    { display: 'CHOTHES3', value: 'Clothes3' },\n    { display: 'GLOVES3', value: 'Gloves3' },\n    { display: 'SHOOSE4', value: 'Shoose4' },\n    { display: 'CHOTHES4', value: 'Clothes4' },\n    { display: 'GLOVES4', value: 'Gloves4' }\n  ]\n}\n"]}
+{"version":3,"file":"ox-input-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-input-select-buttons.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,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,EAAE,EACZ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;cAsBN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;eACH,OAAO;gBACN,QAAQ;gBACR,QAAQ;;;CAGvB,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,SAAS;IAChB,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,SAAS,CAAC;IAClB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACzC;CACF,CAAA","sourcesContent":["import '../src/ox-input-select-buttons.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-select-buttons',\n  component: 'ox-input-select-buttons',\n  argTypes: {\n    value: { control: 'object' },\n    options: { control: 'object' },\n    multiple: { control: 'boolean' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object | string\n  options: object\n  multiple?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'options',\n  value,\n  multiple = false,\n  options = [],\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    ox-input-select-buttons {\n      max-width: 400px;\n    }\n  </style>\n\n  <ox-input-select-buttons\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .options=${options}\n    ?multiple=${multiple}\n    ?disabled=${disabled}\n  >\n  </ox-input-select-buttons>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: 'Clothes',\n  options: [\n    { display: 'SHOOSE', value: 'Shoose' },\n    { display: 'CHOTHES', value: 'Clothes' },\n    { display: 'GLOVES', value: 'Gloves' }\n  ]\n}\n\nexport const Multiple = Template.bind({})\nMultiple.args = {\n  name: 'options',\n  value: ['Clothes'],\n  multiple: true,\n  options: [\n    { display: 'SHOOSE1', value: 'Shoose1' },\n    { display: 'CHOTHES1', value: 'Clothes1' },\n    { display: 'GLOVES1', value: 'Gloves1' },\n    { display: 'SHOOSE2', value: 'Shoose2' },\n    { display: 'CHOTHES2', value: 'Clothes2' },\n    { display: 'GLOVES2', value: 'Gloves2' },\n    { display: 'SHOOSE3', value: 'Shoose3' },\n    { display: 'CHOTHES3', value: 'Clothes3' },\n    { display: 'GLOVES3', value: 'Gloves3' },\n    { display: 'SHOOSE4', value: 'Shoose4' },\n    { display: 'CHOTHES4', value: 'Clothes4' },\n    { display: 'GLOVES4', value: 'Gloves4' }\n  ]\n}\n"]}

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

@@ -43,8 +43,21 @@ export default {
     }
 };
 const Template = ({ placeholder = 'unit', name = 'hello', value = 0, stdUnit = 'kg', userUnit, disabled }) => html `
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <link href="/themes/app-theme.css" rel="stylesheet" />
+
   <ox-input-unit-number
     name=${name}
     placeholder=${placeholder}

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-unit.stories.js","sourceRoot":"","sources":["../../stories/ox-input-unit.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,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;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,KAAK;gBACL,GAAG;gBACH,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,OAAO;gBACP,GAAG;gBACH,IAAI;gBACJ,QAAQ;gBACR,WAAW;gBACX,SAAS;gBACT,YAAY;gBACZ,SAAS;gBACT,SAAS;gBACT,GAAG;gBACH,GAAG;gBACH,MAAM;gBACN,MAAM;gBACN,QAAQ;gBACR,OAAO;gBACP,QAAQ;gBACR,UAAU;gBACV,SAAS;gBACT,GAAG;gBACH,GAAG;aACJ;SACF;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;WAIT,IAAI;kBACG,WAAW;aAChB,KAAK;eACH,OAAO;gBACN,QAAQ;cACV,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;gBACvC,QAAQ;;;CAGvB,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;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;CACf,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG;IAChB,WAAW,EAAE,YAAY;IACzB,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,GAAG;CACb,CAAA","sourcesContent":["import '../src/ox-input-unit-number.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-unit-number',\n  component: 'ox-input-unit-number',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'number' },\n    stdUnit: {\n      control: 'select',\n      options: [\n        'kg',\n        'rad',\n        'm',\n        'g/mol',\n        'm2',\n        'm3',\n        'kg/m3',\n        'm/sec',\n        'N',\n        'Pa',\n        'kg/sec',\n        'kg/m2/sec',\n        'mol/sec',\n        'mol/m2/sec',\n        'Sm3/sec',\n        'Nm3/sec',\n        'J',\n        'W',\n        'W/m2',\n        'J/kg',\n        'J/kg/K',\n        'W/m/K',\n        'W/m2/K',\n        'N sec/m2',\n        'm2 oC/W',\n        '%',\n        'K'\n      ]\n    },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: number\n  stdUnit: string\n  userUnit: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'unit',\n  name = 'hello',\n  value = 0,\n  stdUnit = 'kg',\n  userUnit,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons\" rel=\"stylesheet\" />\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <ox-input-unit-number\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    ?disabled=${disabled}\n  >\n  </ox-input-unit-number>\n`\n\nexport const Weight = Template.bind({})\nWeight.args = {\n  placeholder: 'weight',\n  name: 'weight',\n  value: 0,\n  stdUnit: 'kg'\n}\n\nexport const Angle = Template.bind({})\nAngle.args = {\n  placeholder: 'angle',\n  name: 'angle',\n  value: 0,\n  stdUnit: 'rad'\n}\n\nexport const Temperature = Template.bind({})\nTemperature.args = {\n  placeholder: 'temperature',\n  name: 'temperature',\n  value: 0,\n  stdUnit: 'K',\n  userUnit: '°C'\n}\n\nexport const Percentage = Template.bind({})\nPercentage.args = {\n  placeholder: 'percentage',\n  name: 'percentage',\n  value: 0,\n  stdUnit: '%'\n}\n"]}
+{"version":3,"file":"ox-input-unit.stories.js","sourceRoot":"","sources":["../../stories/ox-input-unit.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,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;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,KAAK;gBACL,GAAG;gBACH,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,OAAO;gBACP,GAAG;gBACH,IAAI;gBACJ,QAAQ;gBACR,WAAW;gBACX,SAAS;gBACT,YAAY;gBACZ,SAAS;gBACT,SAAS;gBACT,GAAG;gBACH,GAAG;gBACH,MAAM;gBACN,MAAM;gBACN,QAAQ;gBACR,OAAO;gBACP,QAAQ;gBACR,UAAU;gBACV,SAAS;gBACT,GAAG;gBACH,GAAG;aACJ;SACF;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;WAiBT,IAAI;kBACG,WAAW;aAChB,KAAK;eACH,OAAO;gBACN,QAAQ;cACV,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;gBACvC,QAAQ;;;CAGvB,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;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;CACf,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG;IAChB,WAAW,EAAE,YAAY;IACzB,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,GAAG;CACb,CAAA","sourcesContent":["import '../src/ox-input-unit-number.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-unit-number',\n  component: 'ox-input-unit-number',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    value: { control: 'number' },\n    stdUnit: {\n      control: 'select',\n      options: [\n        'kg',\n        'rad',\n        'm',\n        'g/mol',\n        'm2',\n        'm3',\n        'kg/m3',\n        'm/sec',\n        'N',\n        'Pa',\n        'kg/sec',\n        'kg/m2/sec',\n        'mol/sec',\n        'mol/m2/sec',\n        'Sm3/sec',\n        'Nm3/sec',\n        'J',\n        'W',\n        'W/m2',\n        'J/kg',\n        'J/kg/K',\n        'W/m/K',\n        'W/m2/K',\n        'N sec/m2',\n        'm2 oC/W',\n        '%',\n        'K'\n      ]\n    },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: number\n  stdUnit: string\n  userUnit: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'unit',\n  name = 'hello',\n  value = 0,\n  stdUnit = 'kg',\n  userUnit,\n  disabled\n}: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <ox-input-unit-number\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    ?disabled=${disabled}\n  >\n  </ox-input-unit-number>\n`\n\nexport const Weight = Template.bind({})\nWeight.args = {\n  placeholder: 'weight',\n  name: 'weight',\n  value: 0,\n  stdUnit: 'kg'\n}\n\nexport const Angle = Template.bind({})\nAngle.args = {\n  placeholder: 'angle',\n  name: 'angle',\n  value: 0,\n  stdUnit: 'rad'\n}\n\nexport const Temperature = Template.bind({})\nTemperature.args = {\n  placeholder: 'temperature',\n  name: 'temperature',\n  value: 0,\n  stdUnit: 'K',\n  userUnit: '°C'\n}\n\nexport const Percentage = Template.bind({})\nPercentage.args = {\n  placeholder: 'percentage',\n  name: 'percentage',\n  value: 0,\n  stdUnit: '%'\n}\n"]}

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

@@ -13,7 +13,19 @@ export default {
 };
 const Template = ({ name = 'values', value = {}, keytype = 'string', valuetype = 'string', disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-value-map.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-map.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,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,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;cACJ,OAAO;gBACL,SAAS;gBACT,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-map.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-value-map',\n  component: 'ox-input-value-map',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\n  disabled\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-value-map\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    keytype=${keytype}\n    valuetype=${valuetype}\n    ?disabled=${disabled}\n  >\n  </ox-input-value-map>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}
+{"version":3,"file":"ox-input-value-map.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-map.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,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,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;cACJ,OAAO;gBACL,SAAS;gBACT,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-map.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-value-map',\n  component: 'ox-input-value-map',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-value-map\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    keytype=${keytype}\n    valuetype=${valuetype}\n    ?disabled=${disabled}\n  >\n  </ox-input-value-map>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}

package/dist/stories/ox-input-value-ranges.stories.js

@@ -13,7 +13,19 @@ export default {
 };
 const Template = ({ name = 'values', value = {}, keytype = 'string', valuetype = 'string', disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/dist/stories/ox-input-value-ranges.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-value-ranges.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-ranges.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,uBAAuB;IAClC,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,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;cACJ,OAAO;gBACL,SAAS;gBACT,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-ranges.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-value-ranges',\n  component: 'ox-input-value-ranges',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\n  disabled\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-value-ranges\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    keytype=${keytype}\n    valuetype=${valuetype}\n    ?disabled=${disabled}\n  >\n  </ox-input-value-ranges>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}
+{"version":3,"file":"ox-input-value-ranges.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-ranges.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,uBAAuB;IAClC,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,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBN,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;cACJ,OAAO;gBACL,SAAS;gBACT,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-ranges.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-value-ranges',\n  component: 'ox-input-value-ranges',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-value-ranges\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    keytype=${keytype}\n    valuetype=${valuetype}\n    ?disabled=${disabled}\n  >\n  </ox-input-value-ranges>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}

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

@@ -12,7 +12,19 @@ export default {
 };
 const Template = ({ name = 'work-shift', value = [], disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

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

@@ -1 +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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYrF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }: 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    ?disabled=${disabled}\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"]}
+{"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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;cAwBrF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <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    ?disabled=${disabled}\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.js

@@ -12,7 +12,19 @@ export default {
 };
 const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot, disabled }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <div style="height: 300px">
     <ox-select

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

@@ -1 +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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;aAMP,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: object | string\n  slot?: TemplateResult\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  slot,\n  disabled\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\n  <div style=\"height: 300px\">\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      ?disabled=${disabled}\n    >\n      ${slot}\n    </ox-select>\n  </div>\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=\"D\">D</div>\n      <div option value=\"E\">E</div>\n      <div option value=\"F\">F</div>\n      <div option value=\"G\">G</div>\n      <div option value=\"H\">H</div>\n      <div option value=\"I\">I</div>\n      <div option value=\"J\">J</div>\n      <div option value=\"K\">K</div>\n      <div option value=\"L\">L</div>\n      <div option value=\"M\">M</div>\n      <div option value=\"O\">O</div>\n      <div option value=\"P\">P</div>\n      <div option value=\"Q\">Q</div>\n      <div option value=\"R\">R</div>\n      <div option value=\"S\">S</div>\n      <div option value=\"T\">T</div>\n      <div option value=\"U\">U</div>\n      <div option value=\"V\">V</div>\n      <div option value=\"W\">W</div>\n      <div option value=\"X\">X</div>\n      <div option value=\"Y\">Y</div>\n      <div option value=\"Z\">Z</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"]}
+{"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;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;aAkBP,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;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    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  placeholder?: string\n  name?: string\n  value?: object | string\n  slot?: TemplateResult\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  slot,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <div style=\"height: 300px\">\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      ?disabled=${disabled}\n    >\n      ${slot}\n    </ox-select>\n  </div>\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=\"D\">D</div>\n      <div option value=\"E\">E</div>\n      <div option value=\"F\">F</div>\n      <div option value=\"G\">G</div>\n      <div option value=\"H\">H</div>\n      <div option value=\"I\">I</div>\n      <div option value=\"J\">J</div>\n      <div option value=\"K\">K</div>\n      <div option value=\"L\">L</div>\n      <div option value=\"M\">M</div>\n      <div option value=\"O\">O</div>\n      <div option value=\"P\">P</div>\n      <div option value=\"Q\">Q</div>\n      <div option value=\"R\">R</div>\n      <div option value=\"S\">S</div>\n      <div option value=\"T\">T</div>\n      <div option value=\"U\">U</div>\n      <div option value=\"V\">V</div>\n      <div option value=\"W\">W</div>\n      <div option value=\"X\">X</div>\n      <div option value=\"Y\">Y</div>\n      <div option value=\"Z\">Z</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"]}