@operato/input 9.0.0-beta.7 → 9.0.0-beta.85

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 (160) hide show
  1. package/CHANGELOG.md +249 -0
  2. package/dist/src/index.d.ts +0 -3
  3. package/dist/src/index.js +0 -3
  4. package/dist/src/index.js.map +1 -1
  5. package/dist/src/ox-form-field.d.ts +2 -5
  6. package/dist/src/ox-form-field.js +2 -5
  7. package/dist/src/ox-form-field.js.map +1 -1
  8. package/dist/src/ox-input-angle.js +1 -3
  9. package/dist/src/ox-input-angle.js.map +1 -1
  10. package/dist/src/ox-input-background-pattern.d.ts +36 -0
  11. package/dist/src/ox-input-background-pattern.js +114 -0
  12. package/dist/src/ox-input-background-pattern.js.map +1 -0
  13. package/dist/src/ox-input-color-gradient.d.ts +12 -10
  14. package/dist/src/ox-input-color-gradient.js +104 -222
  15. package/dist/src/ox-input-color-gradient.js.map +1 -1
  16. package/dist/src/ox-input-color-stops.d.ts +26 -22
  17. package/dist/src/ox-input-color-stops.js +122 -151
  18. package/dist/src/ox-input-color-stops.js.map +1 -1
  19. package/dist/src/ox-input-color.d.ts +13 -5
  20. package/dist/src/ox-input-color.js +169 -96
  21. package/dist/src/ox-input-color.js.map +1 -1
  22. package/dist/src/ox-input-crontab.js +1 -0
  23. package/dist/src/ox-input-crontab.js.map +1 -1
  24. package/dist/src/ox-input-direction.js +1 -0
  25. package/dist/src/ox-input-direction.js.map +1 -1
  26. package/dist/src/ox-input-duration.js +4 -0
  27. package/dist/src/ox-input-duration.js.map +1 -1
  28. package/dist/src/ox-input-fill-style.d.ts +48 -0
  29. package/dist/src/ox-input-fill-style.js +330 -0
  30. package/dist/src/ox-input-fill-style.js.map +1 -0
  31. package/dist/src/ox-input-multiple-colors.js +2 -2
  32. package/dist/src/ox-input-multiple-colors.js.map +1 -1
  33. package/dist/src/ox-input-options.js +0 -1
  34. package/dist/src/ox-input-options.js.map +1 -1
  35. package/dist/src/ox-input-privilege.js +1 -0
  36. package/dist/src/ox-input-privilege.js.map +1 -1
  37. package/dist/src/ox-input-range.js +2 -0
  38. package/dist/src/ox-input-range.js.map +1 -1
  39. package/dist/src/ox-input-select-buttons.d.ts +1 -1
  40. package/dist/src/ox-input-select-buttons.js +2 -2
  41. package/dist/src/ox-input-select-buttons.js.map +1 -1
  42. package/dist/src/ox-input-table.d.ts +20 -2
  43. package/dist/src/ox-input-table.js +67 -160
  44. package/dist/src/ox-input-table.js.map +1 -1
  45. package/dist/src/ox-input-unit-number.js +2 -1
  46. package/dist/src/ox-input-unit-number.js.map +1 -1
  47. package/dist/src/ox-input-value-map.js +7 -3
  48. package/dist/src/ox-input-value-map.js.map +1 -1
  49. package/dist/src/ox-select-floor.js +1 -0
  50. package/dist/src/ox-select-floor.js.map +1 -1
  51. package/dist/src/ox-select.d.ts +3 -0
  52. package/dist/src/ox-select.js +19 -9
  53. package/dist/src/ox-select.js.map +1 -1
  54. package/dist/tsconfig.tsbuildinfo +1 -1
  55. package/package.json +31 -25
  56. package/dist/stories/image-for-select-floor.d.ts +0 -1
  57. package/dist/stories/image-for-select-floor.js +0 -2
  58. package/dist/stories/image-for-select-floor.js.map +0 -1
  59. package/dist/stories/ox-buttons-radio.stories.d.ts +0 -26
  60. package/dist/stories/ox-buttons-radio.stories.js +0 -75
  61. package/dist/stories/ox-buttons-radio.stories.js.map +0 -1
  62. package/dist/stories/ox-checkbox.stories.d.ts +0 -44
  63. package/dist/stories/ox-checkbox.stories.js +0 -84
  64. package/dist/stories/ox-checkbox.stories.js.map +0 -1
  65. package/dist/stories/ox-input-3axis.stories.d.ts +0 -26
  66. package/dist/stories/ox-input-3axis.stories.js +0 -63
  67. package/dist/stories/ox-input-3axis.stories.js.map +0 -1
  68. package/dist/stories/ox-input-3dish.stories.d.ts +0 -30
  69. package/dist/stories/ox-input-3dish.stories.js +0 -91
  70. package/dist/stories/ox-input-3dish.stories.js.map +0 -1
  71. package/dist/stories/ox-input-angle.stories.d.ts +0 -30
  72. package/dist/stories/ox-input-angle.stories.js +0 -69
  73. package/dist/stories/ox-input-angle.stories.js.map +0 -1
  74. package/dist/stories/ox-input-barcode.stories.d.ts +0 -47
  75. package/dist/stories/ox-input-barcode.stories.js +0 -89
  76. package/dist/stories/ox-input-barcode.stories.js.map +0 -1
  77. package/dist/stories/ox-input-code.stories.d.ts +0 -38
  78. package/dist/stories/ox-input-code.stories.js +0 -76
  79. package/dist/stories/ox-input-code.stories.js.map +0 -1
  80. package/dist/stories/ox-input-crontab.stories.d.ts +0 -29
  81. package/dist/stories/ox-input-crontab.stories.js +0 -67
  82. package/dist/stories/ox-input-crontab.stories.js.map +0 -1
  83. package/dist/stories/ox-input-data.stories.d.ts +0 -29
  84. package/dist/stories/ox-input-data.stories.js +0 -67
  85. package/dist/stories/ox-input-data.stories.js.map +0 -1
  86. package/dist/stories/ox-input-direction.stories.d.ts +0 -29
  87. package/dist/stories/ox-input-direction.stories.js +0 -76
  88. package/dist/stories/ox-input-direction.stories.js.map +0 -1
  89. package/dist/stories/ox-input-duration.stories.d.ts +0 -30
  90. package/dist/stories/ox-input-duration.stories.js +0 -69
  91. package/dist/stories/ox-input-duration.stories.js.map +0 -1
  92. package/dist/stories/ox-input-file.stories.d.ts +0 -53
  93. package/dist/stories/ox-input-file.stories.js +0 -80
  94. package/dist/stories/ox-input-file.stories.js.map +0 -1
  95. package/dist/stories/ox-input-hashtags.stories.d.ts +0 -33
  96. package/dist/stories/ox-input-hashtags.stories.js +0 -66
  97. package/dist/stories/ox-input-hashtags.stories.js.map +0 -1
  98. package/dist/stories/ox-input-i18n-label.stories.d.ts +0 -29
  99. package/dist/stories/ox-input-i18n-label.stories.js +0 -88
  100. package/dist/stories/ox-input-i18n-label.stories.js.map +0 -1
  101. package/dist/stories/ox-input-key-values.stories.d.ts +0 -33
  102. package/dist/stories/ox-input-key-values.stories.js +0 -81
  103. package/dist/stories/ox-input-key-values.stories.js.map +0 -1
  104. package/dist/stories/ox-input-mass-fraction.stories.d.ts +0 -37
  105. package/dist/stories/ox-input-mass-fraction.stories.js +0 -79
  106. package/dist/stories/ox-input-mass-fraction.stories.js.map +0 -1
  107. package/dist/stories/ox-input-multiple-colors.stories.d.ts +0 -24
  108. package/dist/stories/ox-input-multiple-colors.stories.js +0 -59
  109. package/dist/stories/ox-input-multiple-colors.stories.js.map +0 -1
  110. package/dist/stories/ox-input-options.stories.d.ts +0 -29
  111. package/dist/stories/ox-input-options.stories.js +0 -65
  112. package/dist/stories/ox-input-options.stories.js.map +0 -1
  113. package/dist/stories/ox-input-partition-keys.stories.d.ts +0 -29
  114. package/dist/stories/ox-input-partition-keys.stories.js +0 -69
  115. package/dist/stories/ox-input-partition-keys.stories.js.map +0 -1
  116. package/dist/stories/ox-input-privilege.stories.d.ts +0 -40
  117. package/dist/stories/ox-input-privilege.stories.js +0 -87
  118. package/dist/stories/ox-input-privilege.stories.js.map +0 -1
  119. package/dist/stories/ox-input-quantifier.stories.d.ts +0 -29
  120. package/dist/stories/ox-input-quantifier.stories.js +0 -63
  121. package/dist/stories/ox-input-quantifier.stories.js.map +0 -1
  122. package/dist/stories/ox-input-range.stories.d.ts +0 -41
  123. package/dist/stories/ox-input-range.stories.js +0 -64
  124. package/dist/stories/ox-input-range.stories.js.map +0 -1
  125. package/dist/stories/ox-input-search.stories.d.ts +0 -36
  126. package/dist/stories/ox-input-search.stories.js +0 -68
  127. package/dist/stories/ox-input-search.stories.js.map +0 -1
  128. package/dist/stories/ox-input-select-buttons.stories.d.ts +0 -38
  129. package/dist/stories/ox-input-select-buttons.stories.js +0 -94
  130. package/dist/stories/ox-input-select-buttons.stories.js.map +0 -1
  131. package/dist/stories/ox-input-signature.stories.d.ts +0 -25
  132. package/dist/stories/ox-input-signature.stories.js +0 -60
  133. package/dist/stories/ox-input-signature.stories.js.map +0 -1
  134. package/dist/stories/ox-input-switch.stories.d.ts +0 -38
  135. package/dist/stories/ox-input-switch.stories.js +0 -68
  136. package/dist/stories/ox-input-switch.stories.js.map +0 -1
  137. package/dist/stories/ox-input-table-column-config.stories.d.ts +0 -29
  138. package/dist/stories/ox-input-table-column-config.stories.js +0 -94
  139. package/dist/stories/ox-input-table-column-config.stories.js.map +0 -1
  140. package/dist/stories/ox-input-unit.stories.d.ts +0 -42
  141. package/dist/stories/ox-input-unit.stories.js +0 -123
  142. package/dist/stories/ox-input-unit.stories.js.map +0 -1
  143. package/dist/stories/ox-input-value-map.stories.d.ts +0 -39
  144. package/dist/stories/ox-input-value-map.stories.js +0 -69
  145. package/dist/stories/ox-input-value-map.stories.js.map +0 -1
  146. package/dist/stories/ox-input-value-ranges.stories.d.ts +0 -39
  147. package/dist/stories/ox-input-value-ranges.stories.js +0 -69
  148. package/dist/stories/ox-input-value-ranges.stories.js.map +0 -1
  149. package/dist/stories/ox-input-work-shift.stories.d.ts +0 -30
  150. package/dist/stories/ox-input-work-shift.stories.js +0 -91
  151. package/dist/stories/ox-input-work-shift.stories.js.map +0 -1
  152. package/dist/stories/ox-select-floor.stories.d.ts +0 -45
  153. package/dist/stories/ox-select-floor.stories.js +0 -166
  154. package/dist/stories/ox-select-floor.stories.js.map +0 -1
  155. package/dist/stories/ox-select-set-options.stories.d.ts +0 -48
  156. package/dist/stories/ox-select-set-options.stories.js +0 -178
  157. package/dist/stories/ox-select-set-options.stories.js.map +0 -1
  158. package/dist/stories/ox-select.stories.d.ts +0 -34
  159. package/dist/stories/ox-select.stories.js +0 -151
  160. package/dist/stories/ox-select.stories.js.map +0 -1
@@ -1,89 +0,0 @@
1
- import '../src/ox-input-barcode.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-input-barcode',
6
- component: 'ox-input-barcode',
7
- argTypes: {
8
- name: { control: 'text' },
9
- value: { control: 'text' },
10
- scannable: { control: 'boolean' },
11
- withoutEnter: { control: 'boolean' },
12
- englishOnly: { control: 'boolean' },
13
- selectAfterChange: { control: 'boolean' },
14
- disabled: { control: 'boolean' }
15
- }
16
- };
17
- const Template = ({ name = 'barcode', scannable = true, withoutEnter = true, englishOnly = false, selectAfterChange = false, disabled }) => html `
18
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
19
-
20
- <link href="/themes/light.css" rel="stylesheet" />
21
- <link href="/themes/dark.css" rel="stylesheet" />
22
- <link href="/themes/spacing.css" rel="stylesheet" />
23
-
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
- <link
33
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
34
- rel="stylesheet"
35
- />
36
-
37
- <style>
38
- ${MDTypeScaleStyles.cssText}
39
- </style>
40
-
41
- <style>
42
- .container {
43
- height: 500px;
44
- text-align: center;
45
- padding: 20px;
46
-
47
- background-color: var(--md-sys-color-primary-container);
48
- color: var(--md-sys-color-on-primary-container);
49
- }
50
- </style>
51
-
52
- <div class="container md-typescale-body-large-prominent">
53
- <ox-input-barcode
54
- name=${name}
55
- ?without-enter=${withoutEnter}
56
- ?scannable=${scannable}
57
- ?english-only=${englishOnly}
58
- ?select-after-change=${selectAfterChange}
59
- @change=${(e) => console.log(e.target.value)}
60
- ?disabled=${disabled}
61
- >
62
- </ox-input-barcode>
63
- </div>
64
- `;
65
- export const Regular = Template.bind({});
66
- Regular.args = {
67
- name: 'barcode',
68
- scannable: true,
69
- withoutEnter: true,
70
- englishOnly: false,
71
- selectAfterChange: false
72
- };
73
- export const EnglishOnly = Template.bind({});
74
- EnglishOnly.args = {
75
- name: 'barcode',
76
- scannable: true,
77
- withoutEnter: true,
78
- englishOnly: true,
79
- selectAfterChange: false
80
- };
81
- export const selectAfterChange = Template.bind({});
82
- selectAfterChange.args = {
83
- name: 'barcode',
84
- scannable: true,
85
- withoutEnter: true,
86
- englishOnly: true,
87
- selectAfterChange: true
88
- };
89
- //# sourceMappingURL=ox-input-barcode.stories.js.map
@@ -1 +0,0 @@
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,iDAAiD,CAAA;AAE7F,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.js'\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"]}
@@ -1,38 +0,0 @@
1
- import '../src/ox-input-code.js';
2
- import { TemplateResult } from 'lit';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- argTypes: {
7
- value: {
8
- control: string;
9
- };
10
- name: {
11
- control: string;
12
- };
13
- language: {
14
- control: string;
15
- options: string[];
16
- };
17
- showLineNumbers: {
18
- control: string;
19
- };
20
- disabled: {
21
- control: string;
22
- };
23
- };
24
- };
25
- export default _default;
26
- interface Story<T> {
27
- (args: T): TemplateResult;
28
- args?: Partial<T>;
29
- argTypes?: Record<string, unknown>;
30
- }
31
- interface ArgTypes {
32
- name?: string;
33
- value?: string;
34
- language: 'javascript' | 'sql' | 'json';
35
- showLineNumbers?: boolean;
36
- disabled?: boolean;
37
- }
38
- export declare const Regular: Story<ArgTypes>;
@@ -1,76 +0,0 @@
1
- import '../src/ox-input-code.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-input-code',
6
- component: 'ox-input-code',
7
- argTypes: {
8
- value: { control: 'text' },
9
- name: { control: 'text' },
10
- language: { control: 'select', options: ['javascript', 'sql', 'json'] },
11
- showLineNumbers: { control: 'boolean' },
12
- disabled: { control: 'boolean' }
13
- }
14
- };
15
- const Template = ({ name = 'code', language = 'javascript', value = '', showLineNumbers, disabled }) => html `
16
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
17
-
18
- <link href="/themes/light.css" rel="stylesheet" />
19
- <link href="/themes/dark.css" rel="stylesheet" />
20
- <link href="/themes/spacing.css" rel="stylesheet" />
21
-
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
- <link
27
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
28
- rel="stylesheet"
29
- />
30
- <link
31
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
32
- rel="stylesheet"
33
- />
34
-
35
- <style>
36
- ${MDTypeScaleStyles.cssText}
37
- </style>
38
-
39
- <style>
40
- .container {
41
- height: 500px;
42
- text-align: center;
43
- padding: 20px;
44
-
45
- background-color: var(--md-sys-color-primary-container);
46
- color: var(--md-sys-color-on-primary-container);
47
- }
48
-
49
- ox-input-code {
50
- height: 300px;
51
- text-align: start;
52
- }
53
- </style>
54
-
55
- <div class="container md-typescale-body-large-prominent">
56
- <ox-input-code
57
- @change=${(e) => {
58
- console.log(e.target.value);
59
- }}
60
- name=${name}
61
- language=${language}
62
- .value=${value}
63
- ?show-line-numbers=${showLineNumbers}
64
- ?disabled=${disabled}
65
- >
66
- </ox-input-code>
67
- </div>
68
- `;
69
- export const Regular = Template.bind({});
70
- Regular.args = {
71
- name: 'code',
72
- value: '',
73
- language: 'javascript',
74
- showLineNumbers: true
75
- };
76
- //# sourceMappingURL=ox-input-code.stories.js.map
@@ -1 +0,0 @@
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,iDAAiD,CAAA;AAE7F,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.js'\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"]}
@@ -1,29 +0,0 @@
1
- import '../src/ox-input-crontab.js';
2
- import { TemplateResult } from 'lit';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- argTypes: {
7
- value: {
8
- control: string;
9
- };
10
- name: {
11
- control: string;
12
- };
13
- disabled: {
14
- control: string;
15
- };
16
- };
17
- };
18
- export default _default;
19
- interface Story<T> {
20
- (args: T): TemplateResult;
21
- args?: Partial<T>;
22
- argTypes?: Record<string, unknown>;
23
- }
24
- interface ArgTypes {
25
- name?: string;
26
- value?: string;
27
- disabled?: boolean;
28
- }
29
- export declare const Regular: Story<ArgTypes>;
@@ -1,67 +0,0 @@
1
- import '../src/ox-input-crontab.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-input-crontab',
6
- component: 'ox-input-crontab',
7
- argTypes: {
8
- value: { control: 'text' },
9
- name: { control: 'text' },
10
- disabled: { control: 'boolean' }
11
- }
12
- };
13
- const Template = ({ name = 'crontab', value = '* * * * * *', disabled }) => html `
14
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
15
-
16
- <link href="/themes/light.css" rel="stylesheet" />
17
- <link href="/themes/dark.css" rel="stylesheet" />
18
- <link href="/themes/spacing.css" rel="stylesheet" />
19
-
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
22
- rel="stylesheet"
23
- />
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
-
33
- <style>
34
- ${MDTypeScaleStyles.cssText}
35
- </style>
36
-
37
- <style>
38
- .container {
39
- height: 500px;
40
- text-align: center;
41
- padding: 20px;
42
-
43
- background-color: var(--md-sys-color-primary-container);
44
- color: var(--md-sys-color-on-primary-container);
45
- }
46
- </style>
47
-
48
- <div class="container md-typescale-body-large-prominent">
49
- <br /><br />
50
-
51
- <ox-input-crontab
52
- @change=${(e) => {
53
- console.log(e.target.value);
54
- }}
55
- name=${name}
56
- .value=${value}
57
- ?disabled=${disabled}
58
- >
59
- </ox-input-crontab>
60
- </div>
61
- `;
62
- export const Regular = Template.bind({});
63
- Regular.args = {
64
- name: 'crontab',
65
- value: '* * * * * *'
66
- };
67
- //# sourceMappingURL=ox-input-crontab.stories.js.map
@@ -1 +0,0 @@
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,iDAAiD,CAAA;AAE7F,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.js'\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"]}
@@ -1,29 +0,0 @@
1
- import '../src/ox-input-data.js';
2
- import { TemplateResult } from 'lit';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- argTypes: {
7
- value: {
8
- control: string;
9
- };
10
- name: {
11
- control: string;
12
- };
13
- disabled: {
14
- control: string;
15
- };
16
- };
17
- };
18
- export default _default;
19
- interface Story<T> {
20
- (args: T): TemplateResult;
21
- args?: Partial<T>;
22
- argTypes?: Record<string, unknown>;
23
- }
24
- interface ArgTypes {
25
- name?: string;
26
- value?: string | number | object;
27
- disabled?: boolean;
28
- }
29
- export declare const Regular: Story<ArgTypes>;
@@ -1,67 +0,0 @@
1
- import '../src/ox-input-data.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-input-data',
6
- component: 'ox-input-data',
7
- argTypes: {
8
- value: { control: 'text' },
9
- name: { control: 'text' },
10
- disabled: { control: 'boolean' }
11
- }
12
- };
13
- const Template = ({ name = 'code', value = '', disabled }) => html `
14
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
15
-
16
- <link href="/themes/light.css" rel="stylesheet" />
17
- <link href="/themes/dark.css" rel="stylesheet" />
18
- <link href="/themes/spacing.css" rel="stylesheet" />
19
-
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
22
- rel="stylesheet"
23
- />
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
-
33
- <style>
34
- ${MDTypeScaleStyles.cssText}
35
- </style>
36
-
37
- <style>
38
- .container {
39
- height: 500px;
40
- text-align: center;
41
- padding: 20px;
42
- }
43
-
44
- ox-input-data {
45
- height: 300px;
46
- text-align: start;
47
- }
48
- </style>
49
-
50
- <div class="container md-typescale-body-large-prominent">
51
- <ox-input-data
52
- @change=${(e) => {
53
- const value = e.target.value;
54
- console.log('value : ', value, typeof value);
55
- }}
56
- name=${name}
57
- .value=${value}
58
- ?disabled=${disabled}
59
- >
60
- </ox-input-data>
61
- </div>
62
- `;
63
- export const Regular = Template.bind({});
64
- Regular.args = {
65
- name: 'data'
66
- };
67
- //# sourceMappingURL=ox-input-data.stories.js.map
@@ -1 +0,0 @@
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,iDAAiD,CAAA;AAE7F,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.js'\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"]}
@@ -1,29 +0,0 @@
1
- import '../src/ox-input-direction.js';
2
- import { TemplateResult } from 'lit';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- argTypes: {
7
- value: {
8
- control: string;
9
- };
10
- name: {
11
- control: string;
12
- };
13
- disabled: {
14
- control: string;
15
- };
16
- };
17
- };
18
- export default _default;
19
- interface Story<T> {
20
- (args: T): TemplateResult;
21
- args?: Partial<T>;
22
- argTypes?: Record<string, unknown>;
23
- }
24
- interface ArgTypes {
25
- name?: string;
26
- value?: object | string;
27
- disabled?: boolean;
28
- }
29
- export declare const Regular: Story<ArgTypes>;
@@ -1,76 +0,0 @@
1
- import '../src/ox-input-direction.js';
2
- import { html } from 'lit';
3
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
4
- export default {
5
- title: 'ox-input-direction',
6
- component: 'ox-input-direction',
7
- argTypes: {
8
- value: { control: 'object' },
9
- name: { control: 'text' },
10
- disabled: { control: 'boolean' }
11
- }
12
- };
13
- const Template = ({ name = 'options', value, disabled }) => html `
14
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
15
-
16
- <link href="/themes/light.css" rel="stylesheet" />
17
- <link href="/themes/dark.css" rel="stylesheet" />
18
- <link href="/themes/spacing.css" rel="stylesheet" />
19
-
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
22
- rel="stylesheet"
23
- />
24
- <link
25
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
26
- rel="stylesheet"
27
- />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
-
33
- <style>
34
- ${MDTypeScaleStyles.cssText}
35
- </style>
36
-
37
- <style>
38
- .container {
39
- height: 500px;
40
- text-align: center;
41
- padding: 20px;
42
-
43
- background-color: var(--md-sys-color-primary-container);
44
- color: var(--md-sys-color-on-primary-container);
45
- }
46
- </style>
47
-
48
- <div class="container">
49
- <ox-input-direction
50
- @change=${(e) => {
51
- console.log(e.target.value);
52
- }}
53
- name=${name}
54
- .value=${value}
55
- ?disabled=${disabled}
56
- >
57
- </ox-input-direction>
58
- <br />
59
- <ox-input-direction
60
- @change=${(e) => {
61
- console.log(e.target.value);
62
- }}
63
- name=${name}
64
- .value=${value}
65
- ?disabled=${disabled}
66
- inbound
67
- >
68
- </ox-input-direction>
69
- </div>
70
- `;
71
- export const Regular = Template.bind({});
72
- Regular.args = {
73
- name: 'options',
74
- value: ''
75
- };
76
- //# sourceMappingURL=ox-input-direction.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-input-direction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-direction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,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;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;;gBAKV,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;;CAKzB,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,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-direction.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-input-direction',\n component: 'ox-input-direction',\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 | string\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', 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\">\n <ox-input-direction\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-direction>\n <br />\n <ox-input-direction\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n inbound\n >\n </ox-input-direction>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'options',\n value: ''\n}\n"]}
@@ -1,30 +0,0 @@
1
- import '../src/ox-input-duration.js';
2
- import '../src/locale/locale-picker.js';
3
- import { TemplateResult } from 'lit';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- value: {
9
- control: string;
10
- };
11
- name: {
12
- control: string;
13
- };
14
- disabled: {
15
- control: string;
16
- };
17
- };
18
- };
19
- export default _default;
20
- interface Story<T> {
21
- (args: T): TemplateResult;
22
- args?: Partial<T>;
23
- argTypes?: Record<string, unknown>;
24
- }
25
- interface ArgTypes {
26
- name?: string;
27
- value?: number;
28
- disabled?: boolean;
29
- }
30
- export declare const Regular: Story<ArgTypes>;
@@ -1,69 +0,0 @@
1
- import '../src/ox-input-duration.js';
2
- import '../src/locale/locale-picker.js';
3
- import { html } from 'lit';
4
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
5
- export default {
6
- title: 'ox-input-duration',
7
- component: 'ox-input-duration',
8
- argTypes: {
9
- value: { control: 'number' },
10
- name: { control: 'text' },
11
- disabled: { control: 'boolean' }
12
- }
13
- };
14
- const Template = ({ name = 'duration', value = 3601, disabled }) => html `
15
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
16
-
17
- <link href="/themes/light.css" rel="stylesheet" />
18
- <link href="/themes/dark.css" rel="stylesheet" />
19
- <link href="/themes/spacing.css" rel="stylesheet" />
20
-
21
- <link
22
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
23
- rel="stylesheet"
24
- />
25
- <link
26
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
27
- rel="stylesheet"
28
- />
29
- <link
30
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
31
- rel="stylesheet"
32
- />
33
-
34
- <style>
35
- ${MDTypeScaleStyles.cssText}
36
- </style>
37
-
38
- <style>
39
- .container {
40
- height: 500px;
41
- text-align: center;
42
- padding: 20px;
43
-
44
- background-color: var(--md-sys-color-primary-container);
45
- color: var(--md-sys-color-on-primary-container);
46
- }
47
- </style>
48
-
49
- <div class="container md-typescale-body-large-prominent">
50
- <locale-picker></locale-picker>
51
- <br /><br />
52
-
53
- <ox-input-duration
54
- @change=${(e) => {
55
- console.log(e.target.value);
56
- }}
57
- name=${name}
58
- .value=${value}
59
- ?disabled=${disabled}
60
- >
61
- </ox-input-duration>
62
- </div>
63
- `;
64
- export const Regular = Template.bind({});
65
- Regular.args = {
66
- name: 'duration',
67
- value: 3601
68
- };
69
- //# sourceMappingURL=ox-input-duration.stories.js.map