@operato/input 7.0.0-rc.9 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. package/.storybook/preview.js +52 -0
  2. package/CHANGELOG.md +36 -0
  3. package/dist/src/ox-input-crontab.js +1 -1
  4. package/dist/src/ox-input-crontab.js.map +1 -1
  5. package/dist/src/ox-input-duration.js +2 -2
  6. package/dist/src/ox-input-duration.js.map +1 -1
  7. package/dist/src/ox-input-hashtags.js +2 -2
  8. package/dist/src/ox-input-hashtags.js.map +1 -1
  9. package/dist/src/ox-input-key-values.js +3 -3
  10. package/dist/src/ox-input-key-values.js.map +1 -1
  11. package/dist/src/ox-input-mass-fraction.js +2 -2
  12. package/dist/src/ox-input-mass-fraction.js.map +1 -1
  13. package/dist/src/ox-input-options.js +2 -2
  14. package/dist/src/ox-input-options.js.map +1 -1
  15. package/dist/src/ox-input-partition-keys.js +3 -3
  16. package/dist/src/ox-input-partition-keys.js.map +1 -1
  17. package/dist/src/ox-input-unit-number.js +1 -1
  18. package/dist/src/ox-input-unit-number.js.map +1 -1
  19. package/dist/src/ox-input-value-map.js +3 -3
  20. package/dist/src/ox-input-value-map.js.map +1 -1
  21. package/dist/src/ox-input-value-ranges.js +3 -3
  22. package/dist/src/ox-input-value-ranges.js.map +1 -1
  23. package/dist/src/ox-input-work-shift.js +3 -3
  24. package/dist/src/ox-input-work-shift.js.map +1 -1
  25. package/dist/stories/ox-buttons-radio.stories.d.ts +0 -5
  26. package/dist/stories/ox-buttons-radio.stories.js +3 -9
  27. package/dist/stories/ox-buttons-radio.stories.js.map +1 -1
  28. package/dist/stories/ox-checkbox.stories.d.ts +0 -5
  29. package/dist/stories/ox-checkbox.stories.js +3 -9
  30. package/dist/stories/ox-checkbox.stories.js.map +1 -1
  31. package/dist/stories/ox-input-3axis.stories.d.ts +0 -5
  32. package/dist/stories/ox-input-3axis.stories.js +2 -7
  33. package/dist/stories/ox-input-3axis.stories.js.map +1 -1
  34. package/dist/stories/ox-input-3dish.stories.d.ts +0 -5
  35. package/dist/stories/ox-input-3dish.stories.js +2 -7
  36. package/dist/stories/ox-input-3dish.stories.js.map +1 -1
  37. package/dist/stories/ox-input-angle.stories.d.ts +0 -5
  38. package/dist/stories/ox-input-angle.stories.js +2 -7
  39. package/dist/stories/ox-input-angle.stories.js.map +1 -1
  40. package/dist/stories/ox-input-barcode.stories.d.ts +0 -5
  41. package/dist/stories/ox-input-barcode.stories.js +2 -7
  42. package/dist/stories/ox-input-barcode.stories.js.map +1 -1
  43. package/dist/stories/ox-input-code.stories.d.ts +0 -5
  44. package/dist/stories/ox-input-code.stories.js +2 -7
  45. package/dist/stories/ox-input-code.stories.js.map +1 -1
  46. package/dist/stories/ox-input-crontab.stories.d.ts +0 -5
  47. package/dist/stories/ox-input-crontab.stories.js +2 -7
  48. package/dist/stories/ox-input-crontab.stories.js.map +1 -1
  49. package/dist/stories/ox-input-data.stories.d.ts +0 -5
  50. package/dist/stories/ox-input-data.stories.js +2 -8
  51. package/dist/stories/ox-input-data.stories.js.map +1 -1
  52. package/dist/stories/ox-input-direction.stories.d.ts +0 -5
  53. package/dist/stories/ox-input-direction.stories.js +2 -7
  54. package/dist/stories/ox-input-direction.stories.js.map +1 -1
  55. package/dist/stories/ox-input-duration.stories.d.ts +0 -5
  56. package/dist/stories/ox-input-duration.stories.js +2 -7
  57. package/dist/stories/ox-input-duration.stories.js.map +1 -1
  58. package/dist/stories/ox-input-file.stories.d.ts +0 -5
  59. package/dist/stories/ox-input-file.stories.js +2 -7
  60. package/dist/stories/ox-input-file.stories.js.map +1 -1
  61. package/dist/stories/ox-input-hashtags.stories.d.ts +0 -5
  62. package/dist/stories/ox-input-hashtags.stories.js +2 -7
  63. package/dist/stories/ox-input-hashtags.stories.js.map +1 -1
  64. package/dist/stories/ox-input-i18n-label.stories.d.ts +0 -5
  65. package/dist/stories/ox-input-i18n-label.stories.js +2 -7
  66. package/dist/stories/ox-input-i18n-label.stories.js.map +1 -1
  67. package/dist/stories/ox-input-key-values.stories.d.ts +0 -5
  68. package/dist/stories/ox-input-key-values.stories.js +2 -7
  69. package/dist/stories/ox-input-key-values.stories.js.map +1 -1
  70. package/dist/stories/ox-input-mass-fraction.stories.d.ts +0 -5
  71. package/dist/stories/ox-input-mass-fraction.stories.js +2 -7
  72. package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
  73. package/dist/stories/ox-input-multiple-colors.stories.d.ts +0 -5
  74. package/dist/stories/ox-input-multiple-colors.stories.js +2 -7
  75. package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
  76. package/dist/stories/ox-input-options.stories.d.ts +0 -5
  77. package/dist/stories/ox-input-options.stories.js +2 -7
  78. package/dist/stories/ox-input-options.stories.js.map +1 -1
  79. package/dist/stories/ox-input-partition-keys.stories.d.ts +0 -5
  80. package/dist/stories/ox-input-partition-keys.stories.js +2 -7
  81. package/dist/stories/ox-input-partition-keys.stories.js.map +1 -1
  82. package/dist/stories/ox-input-privilege.stories.d.ts +0 -5
  83. package/dist/stories/ox-input-privilege.stories.js +2 -7
  84. package/dist/stories/ox-input-privilege.stories.js.map +1 -1
  85. package/dist/stories/ox-input-quantifier.stories.d.ts +0 -5
  86. package/dist/stories/ox-input-quantifier.stories.js +2 -7
  87. package/dist/stories/ox-input-quantifier.stories.js.map +1 -1
  88. package/dist/stories/ox-input-range.stories.d.ts +0 -5
  89. package/dist/stories/ox-input-range.stories.js +2 -7
  90. package/dist/stories/ox-input-range.stories.js.map +1 -1
  91. package/dist/stories/ox-input-search.stories.d.ts +0 -5
  92. package/dist/stories/ox-input-search.stories.js +2 -7
  93. package/dist/stories/ox-input-search.stories.js.map +1 -1
  94. package/dist/stories/ox-input-select-buttons.stories.d.ts +0 -5
  95. package/dist/stories/ox-input-select-buttons.stories.js +2 -7
  96. package/dist/stories/ox-input-select-buttons.stories.js.map +1 -1
  97. package/dist/stories/ox-input-table-column-config.stories.d.ts +0 -5
  98. package/dist/stories/ox-input-table-column-config.stories.js +2 -7
  99. package/dist/stories/ox-input-table-column-config.stories.js.map +1 -1
  100. package/dist/stories/ox-input-unit.stories.d.ts +0 -5
  101. package/dist/stories/ox-input-unit.stories.js +2 -7
  102. package/dist/stories/ox-input-unit.stories.js.map +1 -1
  103. package/dist/stories/ox-input-value-map.stories.d.ts +0 -5
  104. package/dist/stories/ox-input-value-map.stories.js +2 -7
  105. package/dist/stories/ox-input-value-map.stories.js.map +1 -1
  106. package/dist/stories/ox-input-value-ranges.stories.d.ts +0 -5
  107. package/dist/stories/ox-input-value-ranges.stories.js +2 -7
  108. package/dist/stories/ox-input-value-ranges.stories.js.map +1 -1
  109. package/dist/stories/ox-input-work-shift.stories.d.ts +0 -5
  110. package/dist/stories/ox-input-work-shift.stories.js +2 -7
  111. package/dist/stories/ox-input-work-shift.stories.js.map +1 -1
  112. package/dist/stories/ox-select-set-options.stories.d.ts +0 -5
  113. package/dist/stories/ox-select-set-options.stories.js +2 -7
  114. package/dist/stories/ox-select-set-options.stories.js.map +1 -1
  115. package/dist/stories/ox-select.stories.d.ts +0 -5
  116. package/dist/stories/ox-select.stories.js +2 -7
  117. package/dist/stories/ox-select.stories.js.map +1 -1
  118. package/dist/tsconfig.tsbuildinfo +1 -1
  119. package/package.json +7 -7
  120. package/src/ox-input-crontab.ts +1 -1
  121. package/src/ox-input-duration.ts +2 -2
  122. package/src/ox-input-hashtags.ts +2 -2
  123. package/src/ox-input-key-values.ts +3 -3
  124. package/src/ox-input-mass-fraction.ts +2 -2
  125. package/src/ox-input-options.ts +2 -2
  126. package/src/ox-input-partition-keys.ts +3 -3
  127. package/src/ox-input-unit-number.ts +1 -1
  128. package/src/ox-input-value-map.ts +3 -3
  129. package/src/ox-input-value-ranges.ts +3 -3
  130. package/src/ox-input-work-shift.ts +3 -3
  131. package/stories/ox-buttons-radio.stories.ts +3 -10
  132. package/stories/ox-checkbox.stories.ts +3 -12
  133. package/stories/ox-input-3axis.stories.ts +2 -8
  134. package/stories/ox-input-3dish.stories.ts +2 -8
  135. package/stories/ox-input-angle.stories.ts +2 -8
  136. package/stories/ox-input-barcode.stories.ts +2 -9
  137. package/stories/ox-input-code.stories.ts +2 -9
  138. package/stories/ox-input-crontab.stories.ts +2 -13
  139. package/stories/ox-input-data.stories.ts +2 -9
  140. package/stories/ox-input-direction.stories.ts +2 -8
  141. package/stories/ox-input-duration.stories.ts +2 -8
  142. package/stories/ox-input-file.stories.ts +2 -9
  143. package/stories/ox-input-hashtags.stories.ts +2 -14
  144. package/stories/ox-input-i18n-label.stories.ts +2 -8
  145. package/stories/ox-input-key-values.stories.ts +2 -14
  146. package/stories/ox-input-mass-fraction.stories.ts +2 -9
  147. package/stories/ox-input-multiple-colors.stories.ts +2 -8
  148. package/stories/ox-input-options.stories.ts +2 -8
  149. package/stories/ox-input-partition-keys.stories.ts +2 -13
  150. package/stories/ox-input-privilege.stories.ts +2 -14
  151. package/stories/ox-input-quantifier.stories.ts +2 -8
  152. package/stories/ox-input-range.stories.ts +2 -9
  153. package/stories/ox-input-search.stories.ts +2 -9
  154. package/stories/ox-input-select-buttons.stories.ts +2 -9
  155. package/stories/ox-input-table-column-config.stories.ts +2 -13
  156. package/stories/ox-input-unit.stories.ts +2 -9
  157. package/stories/ox-input-value-map.stories.ts +2 -9
  158. package/stories/ox-input-value-ranges.stories.ts +2 -9
  159. package/stories/ox-input-work-shift.stories.ts +2 -8
  160. package/stories/ox-select-set-options.stories.ts +2 -9
  161. package/stories/ox-select.stories.ts +2 -9
  162. package/themes/app-theme.css +138 -0
  163. package/themes/calendar-theme.css +59 -0
  164. package/themes/dark.css +0 -100
  165. package/themes/grist-theme.css +44 -40
  166. package/themes/layout-theme.css +94 -0
  167. package/themes/light.css +3 -103
  168. package/themes/material-theme.css +23 -0
  169. package/themes/oops-theme.css +22 -0
  170. package/themes/report-theme.css +47 -0
  171. package/themes/spacing.css +7 -27
  172. package/themes/state-color.css +1 -1
  173. package/themes/tooltip-theme.css +11 -0
  174. package/themes/dark-hc.css +0 -151
  175. package/themes/dark-mc.css +0 -151
  176. package/themes/light-hc.css +0 -151
  177. package/themes/light-mc.css +0 -151
@@ -8,11 +8,10 @@ export default {
8
8
  component: 'ox-buttons-radio',
9
9
  argTypes: {
10
10
  value: { control: 'boolean' },
11
- disabled: { control: 'boolean' },
12
- theme: { control: 'select', options: ['light', 'dark'] }
11
+ disabled: { control: 'boolean' }
13
12
  }
14
13
  };
15
- const Template = ({ value, disabled, theme = 'light' }) => html `
14
+ const Template = ({ value, disabled }) => html `
16
15
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
17
16
 
18
17
  <link href="/themes/light.css" rel="stylesheet" />
@@ -52,10 +51,6 @@ const Template = ({ value, disabled, theme = 'light' }) => html `
52
51
  }
53
52
  </style>
54
53
 
55
- <script>
56
- document.body.classList.add('${theme}')
57
- </script>
58
-
59
54
  <div class="container md-typescale-body-large-prominent">
60
55
  <ox-buttons-radio
61
56
  @change=${(e) => {
@@ -75,7 +70,6 @@ const Template = ({ value, disabled, theme = 'light' }) => html `
75
70
  export const Regular = Template.bind({});
76
71
  Regular.args = {
77
72
  value: '',
78
- disabled: false,
79
- theme: 'light'
73
+ disabled: false
80
74
  };
81
75
  //# sourceMappingURL=ox-buttons-radio.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ox-buttons-radio.stories.js","sourceRoot":"","sources":["../../stories/ox-buttons-radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBpF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;mCAoBI,KAAK;;;;;gBAKxB,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAClC,CAAC;cACO,SAAS,CAAC,KAAK,CAAC;kBACZ,QAAQ;;;;;;;;;CASzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,OAAO;CACf,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-buttons-radio.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-buttons-radio',\n component: 'ox-buttons-radio',\n argTypes: {\n value: { control: 'boolean' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: string\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n padding: 20px;\n }\n\n ox-buttons-radio {\n padding: 20px;\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-buttons-radio\n @change=${(e: CustomEvent) => {\n console.log('changed', e.detail)\n }}\n value=${ifDefined(value)}\n ?disabled=${disabled}\n >\n <md-filled-button data-value=\"1\">Option 1</md-filled-button>\n <md-filled-button data-value=\"2\">Option 2</md-filled-button>\n <md-outlined-button data-value=\"3\">Option 3</md-outlined-button>\n <md-text-button trailing-icon>Open<md-icon slot=\"icon\">upload</md-icon></md-text-button>\n <md-elevated-button>Elevated</md-elevated-button>\n </ox-buttons-radio>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: '',\n disabled: false,\n theme: 'light'\n}\n"]}
1
+ {"version":3,"file":"ox-buttons-radio.stories.js","sourceRoot":"","sources":["../../stories/ox-buttons-radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;gBAqBf,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAClC,CAAC;cACO,SAAS,CAAC,KAAK,CAAC;kBACZ,QAAQ;;;;;;;;;CASzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;CAChB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-buttons-radio.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-buttons-radio',\n component: 'ox-buttons-radio',\n argTypes: {\n value: { 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 value?: string\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n padding: 20px;\n }\n\n ox-buttons-radio {\n padding: 20px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-buttons-radio\n @change=${(e: CustomEvent) => {\n console.log('changed', e.detail)\n }}\n value=${ifDefined(value)}\n ?disabled=${disabled}\n >\n <md-filled-button data-value=\"1\">Option 1</md-filled-button>\n <md-filled-button data-value=\"2\">Option 2</md-filled-button>\n <md-outlined-button data-value=\"3\">Option 3</md-outlined-button>\n <md-text-button trailing-icon>Open<md-icon slot=\"icon\">upload</md-icon></md-text-button>\n <md-elevated-button>Elevated</md-elevated-button>\n </ox-buttons-radio>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: '',\n disabled: false\n}\n"]}
@@ -23,10 +23,6 @@ declare const _default: {
23
23
  disabled: {
24
24
  control: string;
25
25
  };
26
- theme: {
27
- control: string;
28
- options: string[];
29
- };
30
26
  };
31
27
  };
32
28
  export default _default;
@@ -42,7 +38,6 @@ interface ArgTypes {
42
38
  indeterminatable?: boolean;
43
39
  indeterminate?: boolean;
44
40
  disabled?: boolean;
45
- theme?: string;
46
41
  }
47
42
  export declare const Regular: Story<ArgTypes>;
48
43
  export declare const CustomActivated: Story<ArgTypes>;
@@ -11,11 +11,10 @@ export default {
11
11
  value: { control: 'boolean' },
12
12
  indeterminatable: { control: 'boolean' },
13
13
  indeterminate: { control: 'boolean' },
14
- disabled: { control: 'boolean' },
15
- theme: { control: 'select', options: ['light', 'dark'] }
14
+ disabled: { control: 'boolean' }
16
15
  }
17
16
  };
18
- const Template = ({ label = 'Checkbox', name = 'hello', value, indeterminatable = false, indeterminate = false, disabled, theme = 'light' }) => html `
17
+ const Template = ({ label = 'Checkbox', name = 'hello', value, indeterminatable = false, indeterminate = false, disabled }) => html `
19
18
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
20
19
 
21
20
  <link href="/themes/light.css" rel="stylesheet" />
@@ -50,10 +49,6 @@ const Template = ({ label = 'Checkbox', name = 'hello', value, indeterminatable
50
49
  }
51
50
  </style>
52
51
 
53
- <script>
54
- document.body.classList.add('${theme}')
55
- </script>
56
-
57
52
  <div class="container md-typescale-body-large-prominent">
58
53
  <ox-checkbox
59
54
  @click=${(e) => console.log('clicked')}
@@ -84,7 +79,6 @@ export const CustomIndeterminated = Template.bind({});
84
79
  CustomIndeterminated.args = {
85
80
  label: 'Indeterminated',
86
81
  indeterminatable: true,
87
- indeterminate: true,
88
- theme: 'light'
82
+ indeterminate: true
89
83
  };
90
84
  //# sourceMappingURL=ox-checkbox.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ox-checkbox.stories.js","sourceRoot":"","sources":["../../stories/ox-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;eAKzB,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;aAC3C,IAAI;iBACA,KAAK;0BACI,gBAAgB;uBACnB,aAAa;kBAClB,QAAQ;;QAElB,KAAK;;;CAGZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,WAAW;IACjB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;IACnB,KAAK,EAAE,OAAO;CACf,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-checkbox.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-checkbox',\n component: 'ox-checkbox',\n argTypes: {\n label: { control: 'text' },\n name: { control: 'text' },\n value: { control: 'boolean' },\n indeterminatable: { control: 'boolean' },\n indeterminate: { control: 'boolean' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\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 value?: boolean\n indeterminatable?: boolean\n indeterminate?: boolean\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n label = 'Checkbox',\n name = 'hello',\n value,\n indeterminatable = false,\n indeterminate = false,\n disabled,\n theme = 'light'\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n padding: 20px;\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-checkbox\n @click=${(e: MouseEvent) => console.log('clicked')}\n name=${name}\n .checked=${value}\n ?indeterminatable=${indeterminatable}\n ?indeterminate=${indeterminate}\n ?disabled=${disabled}\n >\n ${label}\n </ox-checkbox>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'label',\n name: 'label',\n value: false\n}\n\nexport const CustomActivated = Template.bind({})\nCustomActivated.args = {\n label: 'Activated',\n name: 'activated',\n indeterminate: false,\n value: true\n}\n\nexport const CustomIndeterminated = Template.bind({})\nCustomIndeterminated.args = {\n label: 'Indeterminated',\n indeterminatable: true,\n indeterminate: true,\n theme: 'light'\n}\n"]}
1
+ {"version":3,"file":"ox-checkbox.stories.js","sourceRoot":"","sources":["../../stories/ox-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;eAgBhB,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;aAC3C,IAAI;iBACA,KAAK;0BACI,gBAAgB;uBACnB,aAAa;kBAClB,QAAQ;;QAElB,KAAK;;;CAGZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,WAAW;IACjB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;CACpB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-checkbox.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-checkbox',\n component: 'ox-checkbox',\n argTypes: {\n label: { control: 'text' },\n name: { control: 'text' },\n value: { control: 'boolean' },\n indeterminatable: { control: 'boolean' },\n indeterminate: { 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 value?: boolean\n indeterminatable?: boolean\n indeterminate?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n label = 'Checkbox',\n name = 'hello',\n value,\n indeterminatable = false,\n indeterminate = false,\n disabled\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n padding: 20px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-checkbox\n @click=${(e: MouseEvent) => console.log('clicked')}\n name=${name}\n .checked=${value}\n ?indeterminatable=${indeterminatable}\n ?indeterminate=${indeterminate}\n ?disabled=${disabled}\n >\n ${label}\n </ox-checkbox>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'label',\n name: 'label',\n value: false\n}\n\nexport const CustomActivated = Template.bind({})\nCustomActivated.args = {\n label: 'Activated',\n name: 'activated',\n indeterminate: false,\n value: true\n}\n\nexport const CustomIndeterminated = Template.bind({})\nCustomIndeterminated.args = {\n label: 'Indeterminated',\n indeterminatable: true,\n indeterminate: true\n}\n"]}
@@ -11,10 +11,6 @@ declare const _default: {
11
11
  disabled: {
12
12
  control: string;
13
13
  };
14
- theme: {
15
- control: string;
16
- options: string[];
17
- };
18
14
  };
19
15
  };
20
16
  export default _default;
@@ -26,6 +22,5 @@ interface Story<T> {
26
22
  interface ArgTypes {
27
23
  value?: object;
28
24
  disabled?: boolean;
29
- theme?: string;
30
25
  }
31
26
  export declare const Regular: Story<ArgTypes>;
@@ -7,11 +7,10 @@ export default {
7
7
  component: 'ox-input-3axis',
8
8
  argTypes: {
9
9
  value: { control: 'object' },
10
- disabled: { control: 'boolean' },
11
- theme: { control: 'select', options: ['light', 'dark'] }
10
+ disabled: { control: 'boolean' }
12
11
  }
13
12
  };
14
- const Template = ({ value = {}, disabled, theme = 'light' }) => html `
13
+ const Template = ({ value = {}, disabled }) => html `
15
14
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
16
15
 
17
16
  <link href="/themes/light.css" rel="stylesheet" />
@@ -46,10 +45,6 @@ const Template = ({ value = {}, disabled, theme = 'light' }) => html `
46
45
  }
47
46
  </style>
48
47
 
49
- <script>
50
- document.body.classList.add('${theme}')
51
- </script>
52
-
53
48
  <div class="container md-typescale-body-large-prominent">
54
49
  <ox-input-3axis
55
50
  @change=${(e) => {
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-3axis.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3axis.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBzF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;eACQ,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;CAClC,CAAA","sourcesContent":["import '../src/ox-input-3axis.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-3axis',\n component: 'ox-input-3axis',\n argTypes: {\n value: { control: 'object' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: object\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-3axis\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-3axis>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: { x: 100, y: 120, z: 130 }\n}\n"]}
1
+ {"version":3,"file":"ox-input-3axis.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3axis.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;eACQ,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;CAClC,CAAA","sourcesContent":["import '../src/ox-input-3axis.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-3axis',\n component: 'ox-input-3axis',\n argTypes: {\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 value?: object\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-3axis\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-3axis>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: { x: 100, y: 120, z: 130 }\n}\n"]}
@@ -14,10 +14,6 @@ declare const _default: {
14
14
  disabled: {
15
15
  control: string;
16
16
  };
17
- theme: {
18
- control: string;
19
- options: string[];
20
- };
21
17
  };
22
18
  };
23
19
  export default _default;
@@ -30,6 +26,5 @@ interface ArgTypes {
30
26
  name?: string;
31
27
  value?: object;
32
28
  disabled?: boolean;
33
- theme?: string;
34
29
  }
35
30
  export declare const Regular: Story<ArgTypes>;
@@ -8,11 +8,10 @@ export default {
8
8
  argTypes: {
9
9
  value: { control: 'object' },
10
10
  name: { control: 'text' },
11
- disabled: { control: 'boolean' },
12
- theme: { control: 'select', options: ['light', 'dark'] }
11
+ disabled: { control: 'boolean' }
13
12
  }
14
13
  };
15
- const Template = ({ name = '3dish', value = [], disabled, theme = 'light' }) => html `
14
+ const Template = ({ name = '3dish', value = [], disabled }) => html `
16
15
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
17
16
 
18
17
  <link href="/themes/light.css" rel="stylesheet" />
@@ -47,10 +46,6 @@ const Template = ({ name = '3dish', value = [], disabled, theme = 'light' }) =>
47
46
  }
48
47
  </style>
49
48
 
50
- <script>
51
- document.body.classList.add('${theme}')
52
- </script>
53
-
54
49
  <div class="container md-typescale-body-large-prominent">
55
50
  <locale-picker></locale-picker>
56
51
  <br /><br />
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-3dish.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3dish.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBzG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;;;;gBAQxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-3dish.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-3dish',\n component: 'ox-input-3dish',\n argTypes: {\n value: { control: 'object' },\n name: { control: 'text' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\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 theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-3dish\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-3dish>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: '3dish',\n value: [\n {\n name: 'DAY',\n fromDate: -1,\n fromTime: '22:00',\n toDate: 0,\n toTime: '06:00'\n },\n {\n name: 'SWING',\n fromDate: 0,\n fromTime: '06:00',\n toDate: 0,\n toTime: '14:00'\n },\n {\n name: 'NIGHT',\n fromDate: 0,\n fromTime: '14:00',\n toDate: 0,\n toTime: '22:00'\n }\n ]\n}\n"]}
1
+ {"version":3,"file":"ox-input-3dish.stories.js","sourceRoot":"","sources":["../../stories/ox-input-3dish.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-3dish.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-3dish',\n component: 'ox-input-3dish',\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 = '3dish', value = [], disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-3dish\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-3dish>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: '3dish',\n value: [\n {\n name: 'DAY',\n fromDate: -1,\n fromTime: '22:00',\n toDate: 0,\n toTime: '06:00'\n },\n {\n name: 'SWING',\n fromDate: 0,\n fromTime: '06:00',\n toDate: 0,\n toTime: '14:00'\n },\n {\n name: 'NIGHT',\n fromDate: 0,\n fromTime: '14:00',\n toDate: 0,\n toTime: '22:00'\n }\n ]\n}\n"]}
@@ -14,10 +14,6 @@ declare const _default: {
14
14
  disabled: {
15
15
  control: string;
16
16
  };
17
- theme: {
18
- control: string;
19
- options: string[];
20
- };
21
17
  };
22
18
  };
23
19
  export default _default;
@@ -30,6 +26,5 @@ interface ArgTypes {
30
26
  name?: string;
31
27
  value?: number;
32
28
  disabled?: boolean;
33
- theme?: string;
34
29
  }
35
30
  export declare const Regular: Story<ArgTypes>;
@@ -8,11 +8,10 @@ export default {
8
8
  argTypes: {
9
9
  value: { control: 'number' },
10
10
  name: { control: 'text' },
11
- disabled: { control: 'boolean' },
12
- theme: { control: 'select', options: ['light', 'dark'] }
11
+ disabled: { control: 'boolean' }
13
12
  }
14
13
  };
15
- const Template = ({ name = '3dish', value = 0, disabled, theme = 'light' }) => html `
14
+ const Template = ({ name = '3dish', value = 0, disabled }) => html `
16
15
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
17
16
 
18
17
  <link href="/themes/light.css" rel="stylesheet" />
@@ -47,10 +46,6 @@ const Template = ({ name = '3dish', value = 0, disabled, theme = 'light' }) => h
47
46
  }
48
47
  </style>
49
48
 
50
- <script>
51
- document.body.classList.add('${theme}')
52
- </script>
53
-
54
49
  <div class="container md-typescale-body-large-prominent">
55
50
  <locale-picker></locale-picker>
56
51
  <br /><br />
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-angle.stories.js","sourceRoot":"","sources":["../../stories/ox-input-angle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;;;;gBAQxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,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;CACT,CAAA","sourcesContent":["import '../src/ox-input-angle.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-angle',\n component: 'ox-input-angle',\n argTypes: {\n value: { control: 'number' },\n name: { control: 'text' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\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 theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-angle\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-angle>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'angle',\n value: 0\n}\n"]}
1
+ {"version":3,"file":"ox-input-angle.stories.js","sourceRoot":"","sources":["../../stories/ox-input-angle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,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;CACT,CAAA","sourcesContent":["import '../src/ox-input-angle.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-angle',\n component: 'ox-input-angle',\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 value?: number\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-angle\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-angle>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'angle',\n value: 0\n}\n"]}
@@ -25,10 +25,6 @@ declare const _default: {
25
25
  disabled: {
26
26
  control: string;
27
27
  };
28
- theme: {
29
- control: string;
30
- options: string[];
31
- };
32
28
  };
33
29
  };
34
30
  export default _default;
@@ -45,7 +41,6 @@ interface ArgTypes {
45
41
  englishOnly?: boolean;
46
42
  selectAfterChange?: boolean;
47
43
  disabled?: boolean;
48
- theme?: string;
49
44
  }
50
45
  export declare const Regular: Story<ArgTypes>;
51
46
  export declare const EnglishOnly: Story<ArgTypes>;
@@ -11,11 +11,10 @@ export default {
11
11
  withoutEnter: { control: 'boolean' },
12
12
  englishOnly: { control: 'boolean' },
13
13
  selectAfterChange: { control: 'boolean' },
14
- disabled: { control: 'boolean' },
15
- theme: { control: 'select', options: ['light', 'dark'] }
14
+ disabled: { control: 'boolean' }
16
15
  }
17
16
  };
18
- const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, englishOnly = false, selectAfterChange = false, disabled, theme = 'light' }) => html `
17
+ const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, englishOnly = false, selectAfterChange = false, disabled }) => html `
19
18
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
20
19
 
21
20
  <link href="/themes/light.css" rel="stylesheet" />
@@ -50,10 +49,6 @@ const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, eng
50
49
  }
51
50
  </style>
52
51
 
53
- <script>
54
- document.body.classList.add('${theme}')
55
- </script>
56
-
57
52
  <div class="container md-typescale-body-large-prominent">
58
53
  <ox-input-barcode
59
54
  name=${name}
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAmBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;aAK3B,IAAI;uBACM,YAAY;mBAChB,SAAS;sBACN,WAAW;6BACJ,iBAAiB;gBAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;kBACnE,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-barcode',\n component: 'ox-input-barcode',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'text' },\n scannable: { control: 'boolean' },\n withoutEnter: { control: 'boolean' },\n englishOnly: { control: 'boolean' },\n selectAfterChange: { control: 'boolean' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string\n scannable?: boolean\n withoutEnter?: boolean\n englishOnly?: boolean\n selectAfterChange?: boolean\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'barcode',\n scannable = true,\n withoutEnter = true,\n englishOnly = false,\n selectAfterChange = false,\n disabled,\n theme = 'light'\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-barcode\n name=${name}\n ?without-enter=${withoutEnter}\n ?scannable=${scannable}\n ?english-only=${englishOnly}\n ?select-after-change=${selectAfterChange}\n @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n ?disabled=${disabled}\n >\n </ox-input-barcode>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: false,\n selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: true\n}\n"]}
1
+ {"version":3,"file":"ox-input-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-input-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACnC,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,KAAK,EACnB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;aAgBlB,IAAI;uBACM,YAAY;mBAChB,SAAS;sBACN,WAAW;6BACJ,iBAAiB;gBAC9B,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;kBACnE,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,iBAAiB,EAAE,IAAI;CACxB,CAAA","sourcesContent":["import '../src/ox-input-barcode.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-barcode',\n component: 'ox-input-barcode',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'text' },\n scannable: { control: 'boolean' },\n withoutEnter: { control: 'boolean' },\n englishOnly: { control: 'boolean' },\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 name?: string\n value?: string\n scannable?: boolean\n withoutEnter?: boolean\n englishOnly?: boolean\n selectAfterChange?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'barcode',\n scannable = true,\n withoutEnter = true,\n englishOnly = false,\n selectAfterChange = false,\n disabled\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-barcode\n name=${name}\n ?without-enter=${withoutEnter}\n ?scannable=${scannable}\n ?english-only=${englishOnly}\n ?select-after-change=${selectAfterChange}\n @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}\n ?disabled=${disabled}\n >\n </ox-input-barcode>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: false,\n selectAfterChange: false\n}\n\nexport const EnglishOnly = Template.bind({})\nEnglishOnly.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: false\n}\n\nexport const selectAfterChange = Template.bind({})\nselectAfterChange.args = {\n name: 'barcode',\n scannable: true,\n withoutEnter: true,\n englishOnly: true,\n selectAfterChange: true\n}\n"]}
@@ -20,10 +20,6 @@ declare const _default: {
20
20
  disabled: {
21
21
  control: string;
22
22
  };
23
- theme: {
24
- control: string;
25
- options: string[];
26
- };
27
23
  };
28
24
  };
29
25
  export default _default;
@@ -38,6 +34,5 @@ interface ArgTypes {
38
34
  language: 'javascript' | 'sql' | 'json';
39
35
  showLineNumbers?: boolean;
40
36
  disabled?: boolean;
41
- theme?: string;
42
37
  }
43
38
  export declare const Regular: Story<ArgTypes>;
@@ -9,11 +9,10 @@ export default {
9
9
  name: { control: 'text' },
10
10
  language: { control: 'select', options: ['javascript', 'sql', 'json'] },
11
11
  showLineNumbers: { control: 'boolean' },
12
- disabled: { control: 'boolean' },
13
- theme: { control: 'select', options: ['light', 'dark'] }
12
+ disabled: { control: 'boolean' }
14
13
  }
15
14
  };
16
- const Template = ({ name = 'code', language = 'javascript', value = '', showLineNumbers, disabled, theme = 'light' }) => html `
15
+ const Template = ({ name = 'code', language = 'javascript', value = '', showLineNumbers, disabled }) => html `
17
16
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
18
17
 
19
18
  <link href="/themes/light.css" rel="stylesheet" />
@@ -53,10 +52,6 @@ const Template = ({ name = 'code', language = 'javascript', value = '', showLine
53
52
  }
54
53
  </style>
55
54
 
56
- <script>
57
- document.body.classList.add('${theme}')
58
- </script>
59
-
60
55
  <div class="container md-typescale-body-large-prominent">
61
56
  <ox-input-code
62
57
  @change=${(e) => {
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-code.stories.js","sourceRoot":"","sources":["../../stories/ox-input-code.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE;QACvE,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,YAAY,EACvB,KAAK,GAAG,EAAE,EACV,eAAe,EACf,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;mCAoBI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;iBACA,QAAQ;eACV,KAAK;2BACO,eAAe;kBACxB,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,YAAY;IACtB,eAAe,EAAE,IAAI;CACtB,CAAA","sourcesContent":["import '../src/ox-input-code.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-code',\n component: 'ox-input-code',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n language: { control: 'select', options: ['javascript', 'sql', 'json'] },\n showLineNumbers: { control: 'boolean' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string\n language: 'javascript' | 'sql' | 'json'\n showLineNumbers?: boolean\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'code',\n language = 'javascript',\n value = '',\n showLineNumbers,\n disabled,\n theme = 'light'\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-input-code {\n height: 300px;\n text-align: start;\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-code\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n language=${language}\n .value=${value}\n ?show-line-numbers=${showLineNumbers}\n ?disabled=${disabled}\n >\n </ox-input-code>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'code',\n value: '',\n language: 'javascript',\n showLineNumbers: true\n}\n"]}
1
+ {"version":3,"file":"ox-input-code.stories.js","sourceRoot":"","sources":["../../stories/ox-input-code.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE;QACvE,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,YAAY,EACvB,KAAK,GAAG,EAAE,EACV,eAAe,EACf,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;gBAqBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;iBACA,QAAQ;eACV,KAAK;2BACO,eAAe;kBACxB,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,YAAY;IACtB,eAAe,EAAE,IAAI;CACtB,CAAA","sourcesContent":["import '../src/ox-input-code.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-code',\n component: 'ox-input-code',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n language: { control: 'select', options: ['javascript', 'sql', 'json'] },\n showLineNumbers: { 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?: string\n language: 'javascript' | 'sql' | 'json'\n showLineNumbers?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'code',\n language = 'javascript',\n value = '',\n showLineNumbers,\n disabled\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-input-code {\n height: 300px;\n text-align: start;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-code\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n language=${language}\n .value=${value}\n ?show-line-numbers=${showLineNumbers}\n ?disabled=${disabled}\n >\n </ox-input-code>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'code',\n value: '',\n language: 'javascript',\n showLineNumbers: true\n}\n"]}
@@ -13,10 +13,6 @@ declare const _default: {
13
13
  disabled: {
14
14
  control: string;
15
15
  };
16
- theme: {
17
- control: string;
18
- options: string[];
19
- };
20
16
  };
21
17
  };
22
18
  export default _default;
@@ -29,6 +25,5 @@ interface ArgTypes {
29
25
  name?: string;
30
26
  value?: string;
31
27
  disabled?: boolean;
32
- theme?: string;
33
28
  }
34
29
  export declare const Regular: Story<ArgTypes>;
@@ -7,11 +7,10 @@ export default {
7
7
  argTypes: {
8
8
  value: { control: 'text' },
9
9
  name: { control: 'text' },
10
- disabled: { control: 'boolean' },
11
- theme: { control: 'select', options: ['light', 'dark'] }
10
+ disabled: { control: 'boolean' }
12
11
  }
13
12
  };
14
- const Template = ({ name = 'crontab', value = '* * * * * *', disabled, theme = 'light' }) => html `
13
+ const Template = ({ name = 'crontab', value = '* * * * * *', disabled }) => html `
15
14
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
16
15
 
17
16
  <link href="/themes/light.css" rel="stylesheet" />
@@ -46,10 +45,6 @@ const Template = ({ name = 'crontab', value = '* * * * * *', disabled, theme = '
46
45
  }
47
46
  </style>
48
47
 
49
- <script>
50
- document.body.classList.add('${theme}')
51
- </script>
52
-
53
48
  <div class="container md-typescale-body-large-prominent">
54
49
  <br /><br />
55
50
 
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-crontab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-crontab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,aAAa,EACrB,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;;;gBAOxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-crontab',\n component: 'ox-input-crontab',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'crontab',\n value = '* * * * * *',\n disabled,\n theme = 'light'\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <br /><br />\n\n <ox-input-crontab\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-crontab>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'crontab',\n value: '* * * * * *'\n}\n"]}
1
+ {"version":3,"file":"ox-input-crontab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-crontab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,aAAa,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;gBAkBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-crontab',\n component: 'ox-input-crontab',\n argTypes: {\n value: { 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 name?: string\n value?: string\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <br /><br />\n\n <ox-input-crontab\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-crontab>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'crontab',\n value: '* * * * * *'\n}\n"]}
@@ -13,10 +13,6 @@ declare const _default: {
13
13
  disabled: {
14
14
  control: string;
15
15
  };
16
- theme: {
17
- control: string;
18
- options: string[];
19
- };
20
16
  };
21
17
  };
22
18
  export default _default;
@@ -29,6 +25,5 @@ interface ArgTypes {
29
25
  name?: string;
30
26
  value?: string | number | object;
31
27
  disabled?: boolean;
32
- theme?: string;
33
28
  }
34
29
  export declare const Regular: Story<ArgTypes>;
@@ -7,11 +7,10 @@ export default {
7
7
  argTypes: {
8
8
  value: { control: 'text' },
9
9
  name: { control: 'text' },
10
- disabled: { control: 'boolean' },
11
- theme: { control: 'select', options: ['light', 'dark'] }
10
+ disabled: { control: 'boolean' }
12
11
  }
13
12
  };
14
- const Template = ({ name = 'code', value = '', disabled, theme = 'light' }) => html `
13
+ const Template = ({ name = 'code', value = '', disabled }) => html `
15
14
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
16
15
 
17
16
  <link href="/themes/light.css" rel="stylesheet" />
@@ -40,7 +39,6 @@ const Template = ({ name = 'code', value = '', disabled, theme = 'light' }) => h
40
39
  height: 500px;
41
40
  text-align: center;
42
41
  padding: 20px;
43
-
44
42
  }
45
43
 
46
44
  ox-input-data {
@@ -49,10 +47,6 @@ const Template = ({ name = 'code', value = '', disabled, theme = 'light' }) => h
49
47
  }
50
48
  </style>
51
49
 
52
- <script>
53
- document.body.classList.add('${theme}')
54
- </script>
55
-
56
50
  <div class="container md-typescale-body-large-prominent">
57
51
  <ox-input-data
58
52
  @change=${(e) => {
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;mCAkBI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;CACb,CAAA","sourcesContent":["import '../src/ox-input-data.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-data',\n component: 'ox-input-data',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n disabled: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string | number | object\n disabled?: boolean\n theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n }\n\n ox-input-data {\n height: 300px;\n text-align: start;\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-data\n @change=${(e: Event) => {\n const value = (e.target as HTMLInputElement).value\n console.log('value : ', value, typeof value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-data>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'data'\n}\n"]}
1
+ {"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,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,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;gBAkBf,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;CACb,CAAA","sourcesContent":["import '../src/ox-input-data.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-data',\n component: 'ox-input-data',\n argTypes: {\n value: { 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 name?: string\n value?: string | number | object\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.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 <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n }\n\n ox-input-data {\n height: 300px;\n text-align: start;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-data\n @change=${(e: Event) => {\n const value = (e.target as HTMLInputElement).value\n console.log('value : ', value, typeof value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-data>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'data'\n}\n"]}