@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.
- package/.storybook/preview.js +52 -0
- package/CHANGELOG.md +36 -0
- package/dist/src/ox-input-crontab.js +1 -1
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-duration.js +2 -2
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-hashtags.js +2 -2
- package/dist/src/ox-input-hashtags.js.map +1 -1
- package/dist/src/ox-input-key-values.js +3 -3
- package/dist/src/ox-input-key-values.js.map +1 -1
- package/dist/src/ox-input-mass-fraction.js +2 -2
- package/dist/src/ox-input-mass-fraction.js.map +1 -1
- package/dist/src/ox-input-options.js +2 -2
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.js +3 -3
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-unit-number.js +1 -1
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-input-value-map.js +3 -3
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.js +3 -3
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +3 -3
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/stories/ox-buttons-radio.stories.d.ts +0 -5
- package/dist/stories/ox-buttons-radio.stories.js +3 -9
- package/dist/stories/ox-buttons-radio.stories.js.map +1 -1
- package/dist/stories/ox-checkbox.stories.d.ts +0 -5
- package/dist/stories/ox-checkbox.stories.js +3 -9
- package/dist/stories/ox-checkbox.stories.js.map +1 -1
- package/dist/stories/ox-input-3axis.stories.d.ts +0 -5
- package/dist/stories/ox-input-3axis.stories.js +2 -7
- package/dist/stories/ox-input-3axis.stories.js.map +1 -1
- package/dist/stories/ox-input-3dish.stories.d.ts +0 -5
- package/dist/stories/ox-input-3dish.stories.js +2 -7
- package/dist/stories/ox-input-3dish.stories.js.map +1 -1
- package/dist/stories/ox-input-angle.stories.d.ts +0 -5
- package/dist/stories/ox-input-angle.stories.js +2 -7
- package/dist/stories/ox-input-angle.stories.js.map +1 -1
- package/dist/stories/ox-input-barcode.stories.d.ts +0 -5
- package/dist/stories/ox-input-barcode.stories.js +2 -7
- package/dist/stories/ox-input-barcode.stories.js.map +1 -1
- package/dist/stories/ox-input-code.stories.d.ts +0 -5
- package/dist/stories/ox-input-code.stories.js +2 -7
- package/dist/stories/ox-input-code.stories.js.map +1 -1
- package/dist/stories/ox-input-crontab.stories.d.ts +0 -5
- package/dist/stories/ox-input-crontab.stories.js +2 -7
- package/dist/stories/ox-input-crontab.stories.js.map +1 -1
- package/dist/stories/ox-input-data.stories.d.ts +0 -5
- package/dist/stories/ox-input-data.stories.js +2 -8
- package/dist/stories/ox-input-data.stories.js.map +1 -1
- package/dist/stories/ox-input-direction.stories.d.ts +0 -5
- package/dist/stories/ox-input-direction.stories.js +2 -7
- package/dist/stories/ox-input-direction.stories.js.map +1 -1
- package/dist/stories/ox-input-duration.stories.d.ts +0 -5
- package/dist/stories/ox-input-duration.stories.js +2 -7
- package/dist/stories/ox-input-duration.stories.js.map +1 -1
- package/dist/stories/ox-input-file.stories.d.ts +0 -5
- package/dist/stories/ox-input-file.stories.js +2 -7
- package/dist/stories/ox-input-file.stories.js.map +1 -1
- package/dist/stories/ox-input-hashtags.stories.d.ts +0 -5
- package/dist/stories/ox-input-hashtags.stories.js +2 -7
- package/dist/stories/ox-input-hashtags.stories.js.map +1 -1
- package/dist/stories/ox-input-i18n-label.stories.d.ts +0 -5
- package/dist/stories/ox-input-i18n-label.stories.js +2 -7
- package/dist/stories/ox-input-i18n-label.stories.js.map +1 -1
- package/dist/stories/ox-input-key-values.stories.d.ts +0 -5
- package/dist/stories/ox-input-key-values.stories.js +2 -7
- package/dist/stories/ox-input-key-values.stories.js.map +1 -1
- package/dist/stories/ox-input-mass-fraction.stories.d.ts +0 -5
- package/dist/stories/ox-input-mass-fraction.stories.js +2 -7
- package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
- package/dist/stories/ox-input-multiple-colors.stories.d.ts +0 -5
- package/dist/stories/ox-input-multiple-colors.stories.js +2 -7
- package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
- package/dist/stories/ox-input-options.stories.d.ts +0 -5
- package/dist/stories/ox-input-options.stories.js +2 -7
- package/dist/stories/ox-input-options.stories.js.map +1 -1
- package/dist/stories/ox-input-partition-keys.stories.d.ts +0 -5
- package/dist/stories/ox-input-partition-keys.stories.js +2 -7
- package/dist/stories/ox-input-partition-keys.stories.js.map +1 -1
- package/dist/stories/ox-input-privilege.stories.d.ts +0 -5
- package/dist/stories/ox-input-privilege.stories.js +2 -7
- package/dist/stories/ox-input-privilege.stories.js.map +1 -1
- package/dist/stories/ox-input-quantifier.stories.d.ts +0 -5
- package/dist/stories/ox-input-quantifier.stories.js +2 -7
- package/dist/stories/ox-input-quantifier.stories.js.map +1 -1
- package/dist/stories/ox-input-range.stories.d.ts +0 -5
- package/dist/stories/ox-input-range.stories.js +2 -7
- package/dist/stories/ox-input-range.stories.js.map +1 -1
- package/dist/stories/ox-input-search.stories.d.ts +0 -5
- package/dist/stories/ox-input-search.stories.js +2 -7
- package/dist/stories/ox-input-search.stories.js.map +1 -1
- package/dist/stories/ox-input-select-buttons.stories.d.ts +0 -5
- package/dist/stories/ox-input-select-buttons.stories.js +2 -7
- package/dist/stories/ox-input-select-buttons.stories.js.map +1 -1
- package/dist/stories/ox-input-table-column-config.stories.d.ts +0 -5
- package/dist/stories/ox-input-table-column-config.stories.js +2 -7
- package/dist/stories/ox-input-table-column-config.stories.js.map +1 -1
- package/dist/stories/ox-input-unit.stories.d.ts +0 -5
- package/dist/stories/ox-input-unit.stories.js +2 -7
- package/dist/stories/ox-input-unit.stories.js.map +1 -1
- package/dist/stories/ox-input-value-map.stories.d.ts +0 -5
- package/dist/stories/ox-input-value-map.stories.js +2 -7
- package/dist/stories/ox-input-value-map.stories.js.map +1 -1
- package/dist/stories/ox-input-value-ranges.stories.d.ts +0 -5
- package/dist/stories/ox-input-value-ranges.stories.js +2 -7
- package/dist/stories/ox-input-value-ranges.stories.js.map +1 -1
- package/dist/stories/ox-input-work-shift.stories.d.ts +0 -5
- package/dist/stories/ox-input-work-shift.stories.js +2 -7
- package/dist/stories/ox-input-work-shift.stories.js.map +1 -1
- package/dist/stories/ox-select-set-options.stories.d.ts +0 -5
- package/dist/stories/ox-select-set-options.stories.js +2 -7
- package/dist/stories/ox-select-set-options.stories.js.map +1 -1
- package/dist/stories/ox-select.stories.d.ts +0 -5
- package/dist/stories/ox-select.stories.js +2 -7
- package/dist/stories/ox-select.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/ox-input-crontab.ts +1 -1
- package/src/ox-input-duration.ts +2 -2
- package/src/ox-input-hashtags.ts +2 -2
- package/src/ox-input-key-values.ts +3 -3
- package/src/ox-input-mass-fraction.ts +2 -2
- package/src/ox-input-options.ts +2 -2
- package/src/ox-input-partition-keys.ts +3 -3
- package/src/ox-input-unit-number.ts +1 -1
- package/src/ox-input-value-map.ts +3 -3
- package/src/ox-input-value-ranges.ts +3 -3
- package/src/ox-input-work-shift.ts +3 -3
- package/stories/ox-buttons-radio.stories.ts +3 -10
- package/stories/ox-checkbox.stories.ts +3 -12
- package/stories/ox-input-3axis.stories.ts +2 -8
- package/stories/ox-input-3dish.stories.ts +2 -8
- package/stories/ox-input-angle.stories.ts +2 -8
- package/stories/ox-input-barcode.stories.ts +2 -9
- package/stories/ox-input-code.stories.ts +2 -9
- package/stories/ox-input-crontab.stories.ts +2 -13
- package/stories/ox-input-data.stories.ts +2 -9
- package/stories/ox-input-direction.stories.ts +2 -8
- package/stories/ox-input-duration.stories.ts +2 -8
- package/stories/ox-input-file.stories.ts +2 -9
- package/stories/ox-input-hashtags.stories.ts +2 -14
- package/stories/ox-input-i18n-label.stories.ts +2 -8
- package/stories/ox-input-key-values.stories.ts +2 -14
- package/stories/ox-input-mass-fraction.stories.ts +2 -9
- package/stories/ox-input-multiple-colors.stories.ts +2 -8
- package/stories/ox-input-options.stories.ts +2 -8
- package/stories/ox-input-partition-keys.stories.ts +2 -13
- package/stories/ox-input-privilege.stories.ts +2 -14
- package/stories/ox-input-quantifier.stories.ts +2 -8
- package/stories/ox-input-range.stories.ts +2 -9
- package/stories/ox-input-search.stories.ts +2 -9
- package/stories/ox-input-select-buttons.stories.ts +2 -9
- package/stories/ox-input-table-column-config.stories.ts +2 -13
- package/stories/ox-input-unit.stories.ts +2 -9
- package/stories/ox-input-value-map.stories.ts +2 -9
- package/stories/ox-input-value-ranges.stories.ts +2 -9
- package/stories/ox-input-work-shift.stories.ts +2 -8
- package/stories/ox-select-set-options.stories.ts +2 -9
- package/stories/ox-select.stories.ts +2 -9
- package/themes/app-theme.css +138 -0
- package/themes/calendar-theme.css +59 -0
- package/themes/dark.css +0 -100
- package/themes/grist-theme.css +44 -40
- package/themes/layout-theme.css +94 -0
- package/themes/light.css +3 -103
- package/themes/material-theme.css +23 -0
- package/themes/oops-theme.css +22 -0
- package/themes/report-theme.css +47 -0
- package/themes/spacing.css +7 -27
- package/themes/state-color.css +1 -1
- package/themes/tooltip-theme.css +11 -0
- package/themes/dark-hc.css +0 -151
- package/themes/dark-mc.css +0 -151
- package/themes/light-hc.css +0 -151
- 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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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
|
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;
|
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"]}
|