@operato/input 2.0.0-alpha.0 → 2.0.0-alpha.102

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

@@ -17,7 +17,19 @@ export default {
 };
 const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false, 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-file.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;YASR,KAAK;WACN,IAAI;gBACC,QAAQ;qBACH,YAAY;uBACV,cAAc;aACxB,MAAM;WACR,IAAI;kBACG,WAAW;gBACb,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-file',\n  component: 'ox-input-file',\n  argTypes: {\n    name: { control: 'text' },\n    multiple: { control: 'boolean' },\n    accept: { control: 'text' },\n    icon: { control: 'text' },\n    label: { control: 'text' },\n    description: { control: 'text' },\n    hideFileList: { control: 'boolean' },\n    attachFileList: { control: 'boolean' },\n    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  label?: string\n  name?: string\n  multiple?: boolean\n  accept?: string\n  icon?: string\n  description?: string\n  hideFileList?: boolean\n  attachFileList?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'select files',\n  name = 'file',\n  multiple = true,\n  accept,\n  icon,\n  description,\n  hideFileList = false,\n  attachFileList = false,\n  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-file\n    label=${label}\n    name=${name}\n    ?multiple=${multiple}\n    ?hide-filelist=${hideFileList}\n    ?attach-filelist=${attachFileList}\n    accept=${accept}\n    icon=${icon}\n    description=${description}\n    ?disabled=${disabled}\n  >\n  </ox-input-file>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'select files',\n  name: 'files',\n  multiple: true,\n  hideFileList: false,\n  attachFileList: false,\n  accept: '*.*',\n  icon: 'upload',\n  description: 'drop files here!'\n}\n"]}
+{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;YAqBR,KAAK;WACN,IAAI;gBACC,QAAQ;qBACH,YAAY;uBACV,cAAc;aACxB,MAAM;WACR,IAAI;kBACG,WAAW;gBACb,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-file',\n  component: 'ox-input-file',\n  argTypes: {\n    name: { control: 'text' },\n    multiple: { control: 'boolean' },\n    accept: { control: 'text' },\n    icon: { control: 'text' },\n    label: { control: 'text' },\n    description: { control: 'text' },\n    hideFileList: { control: 'boolean' },\n    attachFileList: { control: 'boolean' },\n    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  label?: string\n  name?: string\n  multiple?: boolean\n  accept?: string\n  icon?: string\n  description?: string\n  hideFileList?: boolean\n  attachFileList?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'select files',\n  name = 'file',\n  multiple = true,\n  accept,\n  icon,\n  description,\n  hideFileList = false,\n  attachFileList = false,\n  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-file\n    label=${label}\n    name=${name}\n    ?multiple=${multiple}\n    ?hide-filelist=${hideFileList}\n    ?attach-filelist=${attachFileList}\n    accept=${accept}\n    icon=${icon}\n    description=${description}\n    ?disabled=${disabled}\n  >\n  </ox-input-file>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'select files',\n  name: 'files',\n  multiple: true,\n  hideFileList: false,\n  attachFileList: false,\n  accept: '*.*',\n  icon: 'upload',\n  description: 'drop files here!'\n}\n"]}

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

@@ -12,7 +12,19 @@ export default {
 };
 const Template = ({ placeholder = 'hashtag', name = 'hello', 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-hashtags.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-hashtags.stories.js","sourceRoot":"","sources":["../../stories/ox-input-hashtags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,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;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASzG,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;WAC7E,IAAI;kBACG,WAAW;aAChB,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;CACtB,CAAA","sourcesContent":["import '../src/ox-input-hashtags.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-hashtags',\n  component: 'ox-input-hashtags',\n  argTypes: {\n    placeholder: { control: 'text' },\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  placeholder?: string\n  name?: string\n  value?: string[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', 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-hashtags\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    name=${name}\n    placeholder=${placeholder}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-hashtags>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'hashtag',\n  name: 'hashtag',\n  value: ['abc', 'def']\n}\n"]}
+{"version":3,"file":"ox-input-hashtags.stories.js","sourceRoot":"","sources":["../../stories/ox-input-hashtags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,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;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBzG,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;WAC7E,IAAI;kBACG,WAAW;aAChB,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;CACtB,CAAA","sourcesContent":["import '../src/ox-input-hashtags.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-hashtags',\n  component: 'ox-input-hashtags',\n  argTypes: {\n    placeholder: { control: 'text' },\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  placeholder?: string\n  name?: string\n  value?: string[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', 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-hashtags\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    name=${name}\n    placeholder=${placeholder}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-hashtags>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'hashtag',\n  name: 'hashtag',\n  value: ['abc', 'def']\n}\n"]}

package/dist/stories/ox-input-i18n-label.stories.d.ts

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

package/dist/stories/ox-input-i18n-label.stories.js

@@ -0,0 +1,70 @@
+import '../src/ox-input-i18n-label.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-i18n-label',
+    component: 'ox-input-i18n-label',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'object' },
+        disabled: { control: 'boolean' }
+    }
+};
+const Template = ({ name = 'values', value, disabled }) => html `
+  <link href="/themes/app-theme.css" 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 {
+    }
+  </style>
+
+  <ox-input-i18n-label
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+    .languages=${[
+    {
+        code: 'ko',
+        display: '한글'
+    },
+    {
+        code: 'en',
+        display: 'English'
+    },
+    {
+        code: 'zh',
+        display: 'Chinese'
+    },
+    {
+        code: 'ja',
+        display: 'Japanese'
+    }
+]}
+    ?disabled=${disabled}
+  >
+  </ox-input-i18n-label>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'i18n labels',
+    value: {
+        ko: '한글 코드',
+        en: 'English code',
+        zh: 'Chinese code',
+        ja: 'Japan code'
+    }
+};
+//# sourceMappingURL=ox-input-i18n-label.stories.js.map

package/dist/stories/ox-input-i18n-label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-i18n-label.stories.js","sourceRoot":"","sources":["../../stories/ox-input-i18n-label.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqB5E,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;iBACD;IACX;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,UAAU;KACpB;CACF;gBACW,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,YAAY;KACjB;CACF,CAAA","sourcesContent":["import '../src/ox-input-i18n-label.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-i18n-label',\n  component: 'ox-input-i18n-label',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\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 = 'values', 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-i18n-label\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .languages=${[\n      {\n        code: 'ko',\n        display: '한글'\n      },\n      {\n        code: 'en',\n        display: 'English'\n      },\n      {\n        code: 'zh',\n        display: 'Chinese'\n      },\n      {\n        code: 'ja',\n        display: 'Japanese'\n      }\n    ]}\n    ?disabled=${disabled}\n  >\n  </ox-input-i18n-label>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'i18n labels',\n  value: {\n    ko: '한글 코드',\n    en: 'English code',\n    zh: 'Chinese code',\n    ja: 'Japan code'\n  }\n}\n"]}

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

@@ -12,7 +12,19 @@ export default {
 };
 const Template = ({ name = 'key-values', value = {}, 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>
     body {
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-key-values.stories.js","sourceRoot":"","sources":["../../stories/ox-input-key-values.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASnG,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;;;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,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;IACD,OAAO,EAAE;QACP;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;QACD;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-key-values.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-key-values',\n  component: 'ox-input-key-values',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    options: { control: 'object' },\n    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  options?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], 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-key-values\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .options=${options}\n    ?disabled=${disabled}\n  >\n  </ox-input-key-values>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'key-values',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  },\n  options: [\n    {\n      display: '초기값',\n      value: 'ABC'\n    },\n    {\n      display: '후기값',\n      value: 'XYZ'\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-input-key-values.stories.js","sourceRoot":"","sources":["../../stories/ox-input-key-values.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBnG,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;;;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,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;IACD,OAAO,EAAE;QACP;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;QACD;YACE,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;SACb;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-key-values.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-key-values',\n  component: 'ox-input-key-values',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    options: { control: 'object' },\n    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  options?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], 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-key-values\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .options=${options}\n    ?disabled=${disabled}\n  >\n  </ox-input-key-values>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'key-values',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  },\n  options: [\n    {\n      display: '초기값',\n      value: 'ABC'\n    },\n    {\n      display: '후기값',\n      value: 'XYZ'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-input-mass-fraction.stories.d.ts

@@ -13,6 +13,9 @@ declare const _default: {
         defaultValue: {
             control: string;
         };
+        composable: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
@@ -28,6 +31,7 @@ interface ArgTypes {
     name?: string;
     value?: object;
     defaultValue?: object;
+    composable?: boolean;
     disabled?: boolean;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-mass-fraction.stories.js

@@ -7,12 +7,25 @@ export default {
         name: { control: 'text' },
         value: { control: 'object' },
         defaultValue: { control: 'object' },
+        composable: { control: 'boolean' },
         disabled: { control: 'boolean' }
     }
 };
-const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disabled }) => html `
+const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, composable = true, 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 {
     }
@@ -25,6 +38,7 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
     name=${name}
     .value=${value}
     .defaultValue=${defaultValue}
+    ?composable=${composable}
     ?disabled=${disabled}
   >
   </ox-input-mass-fraction>
@@ -32,7 +46,12 @@ const Template = ({ name = 'mass-fraction', value = {}, defaultValue = {}, disab
 export const Regular = Template.bind({});
 Regular.args = {
     name: 'mass-fraction',
-    value: {},
+    value: {
+        H2O: 0.8,
+        N2O: 0.1,
+        CO2: 0.1
+    },
+    composable: true,
     defaultValue: {
         H2O: 0.8,
         N2O: 0.1,

package/dist/stories/ox-input-mass-fraction.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-mass-fraction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-mass-fraction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,eAAe,EACtB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,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;oBACE,YAAY;gBAChB,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,EAAE;IACT,YAAY,EAAE;QACZ,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAA","sourcesContent":["import '../src/ox-input-mass-fraction.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-mass-fraction',\n  component: 'ox-input-mass-fraction',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    defaultValue: { control: 'object' },\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  defaultValue?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'mass-fraction',\n  value = {},\n  defaultValue = {},\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-mass-fraction\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .defaultValue=${defaultValue}\n    ?disabled=${disabled}\n  >\n  </ox-input-mass-fraction>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'mass-fraction',\n  value: {},\n  defaultValue: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  }\n}\n"]}
+{"version":3,"file":"ox-input-mass-fraction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-mass-fraction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACnC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAClC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,eAAe,EACtB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,UAAU,GAAG,IAAI,EACjB,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;oBACE,YAAY;kBACd,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,eAAe;IACrB,KAAK,EAAE;QACL,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;IACD,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE;QACZ,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,GAAG;KACT;CACF,CAAA","sourcesContent":["import '../src/ox-input-mass-fraction.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-mass-fraction',\n  component: 'ox-input-mass-fraction',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    defaultValue: { control: 'object' },\n    composable: { 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  name?: string\n  value?: object\n  defaultValue?: object\n  composable?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'mass-fraction',\n  value = {},\n  defaultValue = {},\n  composable = true,\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-mass-fraction\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .defaultValue=${defaultValue}\n    ?composable=${composable}\n    ?disabled=${disabled}\n  >\n  </ox-input-mass-fraction>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'mass-fraction',\n  value: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  },\n  composable: true,\n  defaultValue: {\n    H2O: 0.8,\n    N2O: 0.1,\n    CO2: 0.1\n  }\n}\n"]}

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

@@ -9,7 +9,18 @@ export default {
     }
 };
 const Template = ({ disabled }) => html `
-  <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 {
@@ -86,15 +97,14 @@ const Template = ({ disabled }) => html `
       --icon-default-color: var(--theme-white-color);
 
       /* material design component themes */
-      --mdc-theme-on-primary: var(--theme-white-color);
-      --mdc-theme-primary: var(--secondary-text-color);
-      --mdc-theme-on-secondary: var(--theme-white-color);
-      --mdc-theme-secondary: var(--primary-color);
-      --mdc-button-outline-color: var(--primary-color);
-      --mdc-danger-button-primary-color: var(--status-danger-color);
-      --mdc-danger-button-outline-color: var(--status-danger-color);
-      --mdc-button-outline-width: 1px;
-      --mdc-button-horizontal-padding: 16px;
+      --md-theme-on-primary: var(--theme-white-color);
+      --md-theme-primary: var(--secondary-text-color);
+      --md-theme-on-secondary: var(--theme-white-color);
+      --md-theme-secondary: var(--primary-color);
+      --md-button-outline-color: var(--primary-color);
+      --md-danger-button-primary-color: var(--status-danger-color);
+      --md-danger-button-outline-color: var(--status-danger-color);
+      --md-button-outline-width: 1px;
 
       /* button style */
       --button-background-color: #fafbfc;
@@ -138,7 +148,7 @@ const Template = ({ disabled }) => html `
       --label-color: var(--secondary-color);
       --label-text-transform: capitalize;
       --input-margin: var(--margin-narrow) 0;
-      --input-padding: var(--padding-default);
+      --input-padding: 6px 2px;
       --input-min-width: 200px;
       --input-font: normal var(--fontsize-default) var(--theme-font);
       --input-hint-font: normal var(--fontsize-small) var(--theme-font);

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

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

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

@@ -11,7 +11,19 @@ export default {
 };
 const Template = ({ name = 'options', 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-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"]}