@operato/input 9.0.0-beta.7 → 9.0.0-beta.70
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/CHANGELOG.md +240 -0
- package/dist/src/index.d.ts +0 -3
- package/dist/src/index.js +0 -3
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-form-field.d.ts +2 -5
- package/dist/src/ox-form-field.js +2 -5
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-angle.js +1 -3
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-background-pattern.d.ts +36 -0
- package/dist/src/ox-input-background-pattern.js +114 -0
- package/dist/src/ox-input-background-pattern.js.map +1 -0
- package/dist/src/ox-input-color-gradient.d.ts +12 -10
- package/dist/src/ox-input-color-gradient.js +104 -222
- package/dist/src/ox-input-color-gradient.js.map +1 -1
- package/dist/src/ox-input-color-stops.d.ts +26 -22
- package/dist/src/ox-input-color-stops.js +122 -151
- package/dist/src/ox-input-color-stops.js.map +1 -1
- package/dist/src/ox-input-color.d.ts +13 -5
- package/dist/src/ox-input-color.js +169 -96
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-crontab.js +1 -0
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-direction.js +1 -0
- package/dist/src/ox-input-direction.js.map +1 -1
- package/dist/src/ox-input-duration.js +4 -0
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-fill-style.d.ts +48 -0
- package/dist/src/ox-input-fill-style.js +330 -0
- package/dist/src/ox-input-fill-style.js.map +1 -0
- package/dist/src/ox-input-multiple-colors.js +2 -2
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js +0 -1
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-privilege.js +1 -0
- package/dist/src/ox-input-privilege.js.map +1 -1
- package/dist/src/ox-input-range.js +2 -0
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-select-buttons.d.ts +1 -1
- package/dist/src/ox-input-select-buttons.js +2 -2
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-table.d.ts +20 -2
- package/dist/src/ox-input-table.js +67 -160
- package/dist/src/ox-input-table.js.map +1 -1
- package/dist/src/ox-input-value-map.js +7 -3
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-select-floor.js +1 -0
- package/dist/src/ox-select-floor.js.map +1 -1
- package/dist/src/ox-select.d.ts +3 -0
- package/dist/src/ox-select.js +19 -9
- package/dist/src/ox-select.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +31 -25
- package/tsconfig.tsbuildinfo +1 -0
- package/dist/stories/image-for-select-floor.d.ts +0 -1
- package/dist/stories/image-for-select-floor.js +0 -2
- package/dist/stories/image-for-select-floor.js.map +0 -1
- package/dist/stories/ox-buttons-radio.stories.d.ts +0 -26
- package/dist/stories/ox-buttons-radio.stories.js +0 -75
- package/dist/stories/ox-buttons-radio.stories.js.map +0 -1
- package/dist/stories/ox-checkbox.stories.d.ts +0 -44
- package/dist/stories/ox-checkbox.stories.js +0 -84
- package/dist/stories/ox-checkbox.stories.js.map +0 -1
- package/dist/stories/ox-input-3axis.stories.d.ts +0 -26
- package/dist/stories/ox-input-3axis.stories.js +0 -63
- package/dist/stories/ox-input-3axis.stories.js.map +0 -1
- package/dist/stories/ox-input-3dish.stories.d.ts +0 -30
- package/dist/stories/ox-input-3dish.stories.js +0 -91
- package/dist/stories/ox-input-3dish.stories.js.map +0 -1
- package/dist/stories/ox-input-angle.stories.d.ts +0 -30
- package/dist/stories/ox-input-angle.stories.js +0 -69
- package/dist/stories/ox-input-angle.stories.js.map +0 -1
- package/dist/stories/ox-input-barcode.stories.d.ts +0 -47
- package/dist/stories/ox-input-barcode.stories.js +0 -89
- package/dist/stories/ox-input-barcode.stories.js.map +0 -1
- package/dist/stories/ox-input-code.stories.d.ts +0 -38
- package/dist/stories/ox-input-code.stories.js +0 -76
- package/dist/stories/ox-input-code.stories.js.map +0 -1
- package/dist/stories/ox-input-crontab.stories.d.ts +0 -29
- package/dist/stories/ox-input-crontab.stories.js +0 -67
- package/dist/stories/ox-input-crontab.stories.js.map +0 -1
- package/dist/stories/ox-input-data.stories.d.ts +0 -29
- package/dist/stories/ox-input-data.stories.js +0 -67
- package/dist/stories/ox-input-data.stories.js.map +0 -1
- package/dist/stories/ox-input-direction.stories.d.ts +0 -29
- package/dist/stories/ox-input-direction.stories.js +0 -76
- package/dist/stories/ox-input-direction.stories.js.map +0 -1
- package/dist/stories/ox-input-duration.stories.d.ts +0 -30
- package/dist/stories/ox-input-duration.stories.js +0 -69
- package/dist/stories/ox-input-duration.stories.js.map +0 -1
- package/dist/stories/ox-input-file.stories.d.ts +0 -53
- package/dist/stories/ox-input-file.stories.js +0 -80
- package/dist/stories/ox-input-file.stories.js.map +0 -1
- package/dist/stories/ox-input-hashtags.stories.d.ts +0 -33
- package/dist/stories/ox-input-hashtags.stories.js +0 -66
- package/dist/stories/ox-input-hashtags.stories.js.map +0 -1
- package/dist/stories/ox-input-i18n-label.stories.d.ts +0 -29
- package/dist/stories/ox-input-i18n-label.stories.js +0 -88
- package/dist/stories/ox-input-i18n-label.stories.js.map +0 -1
- package/dist/stories/ox-input-key-values.stories.d.ts +0 -33
- package/dist/stories/ox-input-key-values.stories.js +0 -81
- package/dist/stories/ox-input-key-values.stories.js.map +0 -1
- package/dist/stories/ox-input-mass-fraction.stories.d.ts +0 -37
- package/dist/stories/ox-input-mass-fraction.stories.js +0 -79
- package/dist/stories/ox-input-mass-fraction.stories.js.map +0 -1
- package/dist/stories/ox-input-multiple-colors.stories.d.ts +0 -24
- package/dist/stories/ox-input-multiple-colors.stories.js +0 -59
- package/dist/stories/ox-input-multiple-colors.stories.js.map +0 -1
- package/dist/stories/ox-input-options.stories.d.ts +0 -29
- package/dist/stories/ox-input-options.stories.js +0 -65
- package/dist/stories/ox-input-options.stories.js.map +0 -1
- package/dist/stories/ox-input-partition-keys.stories.d.ts +0 -29
- package/dist/stories/ox-input-partition-keys.stories.js +0 -69
- package/dist/stories/ox-input-partition-keys.stories.js.map +0 -1
- package/dist/stories/ox-input-privilege.stories.d.ts +0 -40
- package/dist/stories/ox-input-privilege.stories.js +0 -87
- package/dist/stories/ox-input-privilege.stories.js.map +0 -1
- package/dist/stories/ox-input-quantifier.stories.d.ts +0 -29
- package/dist/stories/ox-input-quantifier.stories.js +0 -63
- package/dist/stories/ox-input-quantifier.stories.js.map +0 -1
- package/dist/stories/ox-input-range.stories.d.ts +0 -41
- package/dist/stories/ox-input-range.stories.js +0 -64
- package/dist/stories/ox-input-range.stories.js.map +0 -1
- package/dist/stories/ox-input-search.stories.d.ts +0 -36
- package/dist/stories/ox-input-search.stories.js +0 -68
- package/dist/stories/ox-input-search.stories.js.map +0 -1
- package/dist/stories/ox-input-select-buttons.stories.d.ts +0 -38
- package/dist/stories/ox-input-select-buttons.stories.js +0 -94
- package/dist/stories/ox-input-select-buttons.stories.js.map +0 -1
- package/dist/stories/ox-input-signature.stories.d.ts +0 -25
- package/dist/stories/ox-input-signature.stories.js +0 -60
- package/dist/stories/ox-input-signature.stories.js.map +0 -1
- package/dist/stories/ox-input-switch.stories.d.ts +0 -38
- package/dist/stories/ox-input-switch.stories.js +0 -68
- package/dist/stories/ox-input-switch.stories.js.map +0 -1
- package/dist/stories/ox-input-table-column-config.stories.d.ts +0 -29
- package/dist/stories/ox-input-table-column-config.stories.js +0 -94
- package/dist/stories/ox-input-table-column-config.stories.js.map +0 -1
- package/dist/stories/ox-input-unit.stories.d.ts +0 -42
- package/dist/stories/ox-input-unit.stories.js +0 -123
- package/dist/stories/ox-input-unit.stories.js.map +0 -1
- package/dist/stories/ox-input-value-map.stories.d.ts +0 -39
- package/dist/stories/ox-input-value-map.stories.js +0 -69
- package/dist/stories/ox-input-value-map.stories.js.map +0 -1
- package/dist/stories/ox-input-value-ranges.stories.d.ts +0 -39
- package/dist/stories/ox-input-value-ranges.stories.js +0 -69
- package/dist/stories/ox-input-value-ranges.stories.js.map +0 -1
- package/dist/stories/ox-input-work-shift.stories.d.ts +0 -30
- package/dist/stories/ox-input-work-shift.stories.js +0 -91
- package/dist/stories/ox-input-work-shift.stories.js.map +0 -1
- package/dist/stories/ox-select-floor.stories.d.ts +0 -45
- package/dist/stories/ox-select-floor.stories.js +0 -166
- package/dist/stories/ox-select-floor.stories.js.map +0 -1
- package/dist/stories/ox-select-set-options.stories.d.ts +0 -48
- package/dist/stories/ox-select-set-options.stories.js +0 -178
- package/dist/stories/ox-select-set-options.stories.js.map +0 -1
- package/dist/stories/ox-select.stories.d.ts +0 -34
- package/dist/stories/ox-select.stories.js +0 -151
- package/dist/stories/ox-select.stories.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;2BAeJ,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG,cAAc,QAAQ;;;CAGtG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;CACT,CAAA","sourcesContent":["import '../src/ox-input-range.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-input-range',\n component: 'ox-input-range',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'number' },\n step: { control: 'number' },\n min: { control: 'number' },\n max: { control: 'number' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: number\n step?: number\n min?: number\n max?: number\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'range',\n value = 0,\n step = 1,\n min = 0,\n max = 100,\n disabled\n}: ArgTypes) => html`\n <link href=\"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-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>\n </ox-input-range>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'range',\n value: 0,\n step: 1,\n min: 0,\n max: 100\n}\n"]}
|
@@ -1,36 +0,0 @@
|
|
1
|
-
import { TemplateResult } from 'lit';
|
2
|
-
declare const _default: {
|
3
|
-
title: string;
|
4
|
-
component: string;
|
5
|
-
argTypes: {
|
6
|
-
placeholder: {
|
7
|
-
control: string;
|
8
|
-
};
|
9
|
-
name: {
|
10
|
-
control: string;
|
11
|
-
};
|
12
|
-
value: {
|
13
|
-
control: string;
|
14
|
-
};
|
15
|
-
selectAfterChange: {
|
16
|
-
control: string;
|
17
|
-
};
|
18
|
-
disabled: {
|
19
|
-
control: string;
|
20
|
-
};
|
21
|
-
};
|
22
|
-
};
|
23
|
-
export default _default;
|
24
|
-
interface Story<T> {
|
25
|
-
(args: T): TemplateResult;
|
26
|
-
args?: Partial<T>;
|
27
|
-
argTypes?: Record<string, unknown>;
|
28
|
-
}
|
29
|
-
interface ArgTypes {
|
30
|
-
placeholder?: string;
|
31
|
-
name?: string;
|
32
|
-
value?: string;
|
33
|
-
selectAfterChange?: boolean;
|
34
|
-
disabled?: boolean;
|
35
|
-
}
|
36
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,68 +0,0 @@
|
|
1
|
-
/* 어디에서 임포트하는 지는 모르지만, 아래 코멘트를 풀면 중복 정의 오류가 발생한다. */
|
2
|
-
// import '../src/ox-input-search.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-search',
|
7
|
-
component: 'ox-input-search',
|
8
|
-
argTypes: {
|
9
|
-
placeholder: { control: 'text' },
|
10
|
-
name: { control: 'text' },
|
11
|
-
value: { control: 'text' },
|
12
|
-
selectAfterChange: { control: 'boolean' },
|
13
|
-
disabled: { control: 'boolean' }
|
14
|
-
}
|
15
|
-
};
|
16
|
-
const Template = ({ placeholder = 'Search', name = 'hello', value = '', selectAfterChange, disabled }) => html `
|
17
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
18
|
-
|
19
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
20
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
21
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
22
|
-
|
23
|
-
<link
|
24
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
25
|
-
rel="stylesheet"
|
26
|
-
/>
|
27
|
-
<link
|
28
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
29
|
-
rel="stylesheet"
|
30
|
-
/>
|
31
|
-
<link
|
32
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
33
|
-
rel="stylesheet"
|
34
|
-
/>
|
35
|
-
|
36
|
-
<style>
|
37
|
-
${MDTypeScaleStyles.cssText}
|
38
|
-
</style>
|
39
|
-
|
40
|
-
<style>
|
41
|
-
.container {
|
42
|
-
height: 500px;
|
43
|
-
text-align: center;
|
44
|
-
padding: 20px;
|
45
|
-
|
46
|
-
background-color: var(--md-sys-color-primary-container);
|
47
|
-
color: var(--md-sys-color-on-primary-container);
|
48
|
-
}
|
49
|
-
</style>
|
50
|
-
|
51
|
-
<div class="container md-typescale-body-large-prominent">
|
52
|
-
<ox-input-search
|
53
|
-
@change=${(e) => console.log('changed', e.target.value)}
|
54
|
-
?select-after-change=${selectAfterChange}
|
55
|
-
name=${name}
|
56
|
-
.checked=${value}
|
57
|
-
?disabled=${disabled}
|
58
|
-
>
|
59
|
-
</ox-input-search>
|
60
|
-
</div>
|
61
|
-
`;
|
62
|
-
export const Regular = Template.bind({});
|
63
|
-
Regular.args = {
|
64
|
-
placeholder: 'label',
|
65
|
-
name: 'label',
|
66
|
-
selectAfterChange: false
|
67
|
-
};
|
68
|
-
//# sourceMappingURL=ox-input-search.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-search.stories.js","sourceRoot":"","sources":["../../stories/ox-input-search.stories.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,qCAAqC;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,iBAAiB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,QAAQ,EACtB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,iBAAiB,EACjB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;6BAC7D,iBAAiB;aACjC,IAAI;iBACA,KAAK;kBACJ,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,OAAO;IACb,iBAAiB,EAAE,KAAK;CACzB,CAAA","sourcesContent":["/* 어디에서 임포트하는 지는 모르지만, 아래 코멘트를 풀면 중복 정의 오류가 발생한다. */\n// import '../src/ox-input-search.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-search',\n component: 'ox-input-search',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' },\n value: { control: 'text' },\n selectAfterChange: { control: 'boolean' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n placeholder?: string\n name?: string\n value?: string\n selectAfterChange?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n placeholder = 'Search',\n name = 'hello',\n value = '',\n selectAfterChange,\n disabled\n}: ArgTypes) => html`\n <link href=\"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-search\n @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n ?select-after-change=${selectAfterChange}\n name=${name}\n .checked=${value}\n ?disabled=${disabled}\n >\n </ox-input-search>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'label',\n name: 'label',\n selectAfterChange: false\n}\n"]}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import '../src/ox-input-select-buttons.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
|
-
options: {
|
11
|
-
control: string;
|
12
|
-
};
|
13
|
-
multiple: {
|
14
|
-
control: string;
|
15
|
-
};
|
16
|
-
name: {
|
17
|
-
control: string;
|
18
|
-
};
|
19
|
-
disabled: {
|
20
|
-
control: string;
|
21
|
-
};
|
22
|
-
};
|
23
|
-
};
|
24
|
-
export default _default;
|
25
|
-
interface Story<T> {
|
26
|
-
(args: T): TemplateResult;
|
27
|
-
args?: Partial<T>;
|
28
|
-
argTypes?: Record<string, unknown>;
|
29
|
-
}
|
30
|
-
interface ArgTypes {
|
31
|
-
name?: string;
|
32
|
-
value?: object | string;
|
33
|
-
options: object;
|
34
|
-
multiple?: boolean;
|
35
|
-
disabled?: boolean;
|
36
|
-
}
|
37
|
-
export declare const Regular: Story<ArgTypes>;
|
38
|
-
export declare const Multiple: Story<ArgTypes>;
|
@@ -1,94 +0,0 @@
|
|
1
|
-
import '../src/ox-input-select-buttons.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-select-buttons',
|
6
|
-
component: 'ox-input-select-buttons',
|
7
|
-
argTypes: {
|
8
|
-
value: { control: 'object' },
|
9
|
-
options: { control: 'object' },
|
10
|
-
multiple: { control: 'boolean' },
|
11
|
-
name: { control: 'text' },
|
12
|
-
disabled: { control: 'boolean' }
|
13
|
-
}
|
14
|
-
};
|
15
|
-
const Template = ({ name = 'options', value, multiple = false, options = [], 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
|
-
</style>
|
49
|
-
|
50
|
-
<div class="container">
|
51
|
-
<ox-input-select-buttons
|
52
|
-
@change=${(e) => {
|
53
|
-
console.log(e.target.value);
|
54
|
-
}}
|
55
|
-
name=${name}
|
56
|
-
.value=${value}
|
57
|
-
.options=${options}
|
58
|
-
?multiple=${multiple}
|
59
|
-
?disabled=${disabled}
|
60
|
-
>
|
61
|
-
</ox-input-select-buttons>
|
62
|
-
</div>
|
63
|
-
`;
|
64
|
-
export const Regular = Template.bind({});
|
65
|
-
Regular.args = {
|
66
|
-
name: 'options',
|
67
|
-
value: 'Clothes',
|
68
|
-
options: [
|
69
|
-
{ display: 'SHOOSE', value: 'Shoose' },
|
70
|
-
{ display: 'CHOTHES', value: 'Clothes' },
|
71
|
-
{ display: 'GLOVES', value: 'Gloves' }
|
72
|
-
]
|
73
|
-
};
|
74
|
-
export const Multiple = Template.bind({});
|
75
|
-
Multiple.args = {
|
76
|
-
name: 'options',
|
77
|
-
value: ['Clothes'],
|
78
|
-
multiple: true,
|
79
|
-
options: [
|
80
|
-
{ display: 'SHOOSE1', value: 'Shoose1' },
|
81
|
-
{ display: 'CHOTHES1', value: 'Clothes1' },
|
82
|
-
{ display: 'GLOVES1', value: 'Gloves1' },
|
83
|
-
{ display: 'SHOOSE2', value: 'Shoose2' },
|
84
|
-
{ display: 'CHOTHES2', value: 'Clothes2' },
|
85
|
-
{ display: 'GLOVES2', value: 'Gloves2' },
|
86
|
-
{ display: 'SHOOSE3', value: 'Shoose3' },
|
87
|
-
{ display: 'CHOTHES3', value: 'Clothes3' },
|
88
|
-
{ display: 'GLOVES3', value: 'Gloves3' },
|
89
|
-
{ display: 'SHOOSE4', value: 'Shoose4' },
|
90
|
-
{ display: 'CHOTHES4', value: 'Clothes4' },
|
91
|
-
{ display: 'GLOVES4', value: 'Gloves4' }
|
92
|
-
]
|
93
|
-
};
|
94
|
-
//# sourceMappingURL=ox-input-select-buttons.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-input-select-buttons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,EAAE,EACZ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,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;iBACH,OAAO;kBACN,QAAQ;kBACR,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,SAAS;IAChB,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,SAAS,CAAC;IAClB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACxC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QAC1C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACzC;CACF,CAAA","sourcesContent":["import '../src/ox-input-select-buttons.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-input-select-buttons',\n component: 'ox-input-select-buttons',\n argTypes: {\n value: { control: 'object' },\n options: { control: 'object' },\n multiple: { control: 'boolean' },\n name: { control: 'text' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: object | string\n options: object\n multiple?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n name = 'options',\n value,\n multiple = false,\n options = [],\n disabled\n}: ArgTypes) => html`\n <link href=\"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-select-buttons\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n .options=${options}\n ?multiple=${multiple}\n ?disabled=${disabled}\n >\n </ox-input-select-buttons>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'options',\n value: 'Clothes',\n options: [\n { display: 'SHOOSE', value: 'Shoose' },\n { display: 'CHOTHES', value: 'Clothes' },\n { display: 'GLOVES', value: 'Gloves' }\n ]\n}\n\nexport const Multiple = Template.bind({})\nMultiple.args = {\n name: 'options',\n value: ['Clothes'],\n multiple: true,\n options: [\n { display: 'SHOOSE1', value: 'Shoose1' },\n { display: 'CHOTHES1', value: 'Clothes1' },\n { display: 'GLOVES1', value: 'Gloves1' },\n { display: 'SHOOSE2', value: 'Shoose2' },\n { display: 'CHOTHES2', value: 'Clothes2' },\n { display: 'GLOVES2', value: 'Gloves2' },\n { display: 'SHOOSE3', value: 'Shoose3' },\n { display: 'CHOTHES3', value: 'Clothes3' },\n { display: 'GLOVES3', value: 'Gloves3' },\n { display: 'SHOOSE4', value: 'Shoose4' },\n { display: 'CHOTHES4', value: 'Clothes4' },\n { display: 'GLOVES4', value: 'Gloves4' }\n ]\n}\n"]}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import '../src/ox-input-signature.js';
|
2
|
-
import { TemplateResult } from 'lit';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: string;
|
6
|
-
argTypes: {
|
7
|
-
disabled: {
|
8
|
-
control: string;
|
9
|
-
};
|
10
|
-
value: {
|
11
|
-
control: string;
|
12
|
-
};
|
13
|
-
};
|
14
|
-
};
|
15
|
-
export default _default;
|
16
|
-
interface Story<T> {
|
17
|
-
(args: T): TemplateResult;
|
18
|
-
args?: Partial<T>;
|
19
|
-
argTypes?: Record<string, unknown>;
|
20
|
-
}
|
21
|
-
interface ArgTypes {
|
22
|
-
value?: string;
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import '../src/ox-input-signature.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-signature',
|
6
|
-
component: 'ox-input-signature',
|
7
|
-
argTypes: {
|
8
|
-
disabled: { control: 'boolean' },
|
9
|
-
value: { control: 'text' }
|
10
|
-
}
|
11
|
-
};
|
12
|
-
const Template = ({ value, disabled }) => html `
|
13
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
14
|
-
|
15
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
16
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
17
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
18
|
-
|
19
|
-
<link
|
20
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
21
|
-
rel="stylesheet"
|
22
|
-
/>
|
23
|
-
<link
|
24
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
25
|
-
rel="stylesheet"
|
26
|
-
/>
|
27
|
-
<link
|
28
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
29
|
-
rel="stylesheet"
|
30
|
-
/>
|
31
|
-
|
32
|
-
<style>
|
33
|
-
${MDTypeScaleStyles.cssText}
|
34
|
-
</style>
|
35
|
-
|
36
|
-
<style>
|
37
|
-
.container {
|
38
|
-
height: 600px;
|
39
|
-
text-align: center;
|
40
|
-
padding: 20px;
|
41
|
-
|
42
|
-
background-color: var(--md-sys-color-primary-container);
|
43
|
-
color: var(--md-sys-color-on-primary-container);
|
44
|
-
}
|
45
|
-
</style>
|
46
|
-
|
47
|
-
<div class="container md-typescale-body-large-prominent">
|
48
|
-
<ox-input-signature
|
49
|
-
.value=${value || ''}
|
50
|
-
?disabled=${disabled}
|
51
|
-
@change=${(e) => console.log(e.target.value)}
|
52
|
-
>
|
53
|
-
</ox-input-signature>
|
54
|
-
</div>
|
55
|
-
`;
|
56
|
-
export const Regular = Template.bind({});
|
57
|
-
Regular.args = {
|
58
|
-
value: 'data:image/png;base64,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'
|
59
|
-
};
|
60
|
-
//# sourceMappingURL=ox-input-signature.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-signature.stories.js","sourceRoot":"","sources":["../../stories/ox-input-signature.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,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;eAgBhB,KAAK,IAAI,EAAE;kBACR,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;;;CAInF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EACH,4iNAA4iN;CAC/iN,CAAA","sourcesContent":["import '../src/ox-input-signature.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-signature',\n component: 'ox-input-signature',\n argTypes: {\n disabled: { control: 'boolean' },\n value: { control: 'text' }\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: 600px;\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-signature\n .value=${value || ''}\n ?disabled=${disabled}\n @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n >\n </ox-input-signature>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value:\n 'data:image/png;base64,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'\n}\n"]}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import '../src/ox-input-switch.js';
|
3
|
-
import { TemplateResult } from 'lit';
|
4
|
-
declare const _default: {
|
5
|
-
title: string;
|
6
|
-
component: string;
|
7
|
-
argTypes: {
|
8
|
-
label: {
|
9
|
-
control: string;
|
10
|
-
};
|
11
|
-
name: {
|
12
|
-
control: string;
|
13
|
-
};
|
14
|
-
round: {
|
15
|
-
control: string;
|
16
|
-
};
|
17
|
-
value: {
|
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
|
-
label?: string;
|
33
|
-
name?: string;
|
34
|
-
round?: boolean;
|
35
|
-
value?: boolean;
|
36
|
-
disabled?: boolean;
|
37
|
-
}
|
38
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import '@material/web/all.js';
|
2
|
-
import '../src/ox-input-switch.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-switch',
|
7
|
-
component: 'ox-input-switch',
|
8
|
-
argTypes: {
|
9
|
-
label: { control: 'text' },
|
10
|
-
name: { control: 'text' },
|
11
|
-
round: { control: 'boolean' },
|
12
|
-
value: { control: 'boolean' },
|
13
|
-
disabled: { control: 'boolean' }
|
14
|
-
}
|
15
|
-
};
|
16
|
-
const Template = ({ label = 'Checkbox', name = 'hello', round = false, value = false, disabled }) => html `
|
17
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
18
|
-
|
19
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
20
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
21
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
22
|
-
|
23
|
-
<link
|
24
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
25
|
-
rel="stylesheet"
|
26
|
-
/>
|
27
|
-
<link
|
28
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
29
|
-
rel="stylesheet"
|
30
|
-
/>
|
31
|
-
<link
|
32
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
33
|
-
rel="stylesheet"
|
34
|
-
/>
|
35
|
-
|
36
|
-
<style>
|
37
|
-
${MDTypeScaleStyles.cssText}
|
38
|
-
</style>
|
39
|
-
|
40
|
-
<style>
|
41
|
-
.container {
|
42
|
-
height: 500px;
|
43
|
-
text-align: center;
|
44
|
-
padding: 20px;
|
45
|
-
background-color: var(--md-sys-color-primary-container);
|
46
|
-
color: var(--md-sys-color-on-primary-container);
|
47
|
-
padding: 20px;
|
48
|
-
}
|
49
|
-
|
50
|
-
ox-input-switch {
|
51
|
-
--ox-simple-switch-fullwidth: 120px;
|
52
|
-
--ox-simple-switch-fullheight: 40px;
|
53
|
-
--ox-simple-switch-thumbnail-size: 60px;
|
54
|
-
}
|
55
|
-
</style>
|
56
|
-
|
57
|
-
<div class="container md-typescale-body-large-prominent">
|
58
|
-
<ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>
|
59
|
-
</div>
|
60
|
-
`;
|
61
|
-
export const Regular = Template.bind({});
|
62
|
-
Regular.args = {
|
63
|
-
label: 'label',
|
64
|
-
name: 'label',
|
65
|
-
round: false,
|
66
|
-
value: false
|
67
|
-
};
|
68
|
-
//# sourceMappingURL=ox-input-switch.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-switch.stories.js","sourceRoot":"","sources":["../../stories/ox-input-switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,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,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;4BAqBH,IAAI,WAAW,KAAK,WAAW,KAAK,cAAc,QAAQ;;CAErF,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;IACZ,KAAK,EAAE,KAAK;CACb,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-input-switch.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-input-switch',\n component: 'ox-input-switch',\n argTypes: {\n label: { control: 'text' },\n name: { control: 'text' },\n round: { control: 'boolean' },\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 label?: string\n name?: string\n round?: boolean\n value?: boolean\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n label = 'Checkbox',\n name = 'hello',\n round = false,\n value = 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\n ox-input-switch {\n --ox-simple-switch-fullwidth: 120px;\n --ox-simple-switch-fullheight: 40px;\n --ox-simple-switch-thumbnail-size: 60px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'label',\n name: 'label',\n round: false,\n value: false\n}\n"]}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import '../src/ox-input-table-column-config.js';
|
2
|
-
import { TemplateResult } from 'lit';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: string;
|
6
|
-
argTypes: {
|
7
|
-
name: {
|
8
|
-
control: string;
|
9
|
-
};
|
10
|
-
value: {
|
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;
|
27
|
-
disabled?: boolean;
|
28
|
-
}
|
29
|
-
export declare const Regular: Story<ArgTypes>;
|
@@ -1,94 +0,0 @@
|
|
1
|
-
import '../src/ox-input-table-column-config.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-table-column-config',
|
6
|
-
component: 'ox-input-table-column-config',
|
7
|
-
argTypes: {
|
8
|
-
name: { control: 'text' },
|
9
|
-
value: { control: 'object' },
|
10
|
-
disabled: { control: 'boolean' }
|
11
|
-
}
|
12
|
-
};
|
13
|
-
const Template = ({ name = 'table-column-config', 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
|
-
<ox-input-table-column-config
|
50
|
-
@change=${(e) => {
|
51
|
-
console.log(e.target.value);
|
52
|
-
}}
|
53
|
-
name=${name}
|
54
|
-
.value=${value}
|
55
|
-
?disabled=${disabled}
|
56
|
-
>
|
57
|
-
</ox-input-table-column-config>
|
58
|
-
</div>
|
59
|
-
`;
|
60
|
-
export const Regular = Template.bind({});
|
61
|
-
Regular.args = {
|
62
|
-
name: 'table-column-config',
|
63
|
-
value: [
|
64
|
-
{
|
65
|
-
name: 'section',
|
66
|
-
label: 'Section',
|
67
|
-
visible: true,
|
68
|
-
width: 100,
|
69
|
-
order: 1
|
70
|
-
},
|
71
|
-
{
|
72
|
-
name: 'title',
|
73
|
-
label: 'Title',
|
74
|
-
visible: true,
|
75
|
-
width: 110,
|
76
|
-
order: 2
|
77
|
-
},
|
78
|
-
{
|
79
|
-
name: 'startDate',
|
80
|
-
label: 'Start Date',
|
81
|
-
visible: true,
|
82
|
-
width: 150,
|
83
|
-
order: 3
|
84
|
-
},
|
85
|
-
{
|
86
|
-
name: 'endDate',
|
87
|
-
label: 'End Date',
|
88
|
-
visible: true,
|
89
|
-
width: 200,
|
90
|
-
order: 4
|
91
|
-
}
|
92
|
-
]
|
93
|
-
};
|
94
|
-
//# sourceMappingURL=ox-input-table-column-config.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ox-input-table-column-config.stories.js","sourceRoot":"","sources":["../../stories/ox-input-table-column-config.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,8BAA8B;IACzC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,qBAAqB,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtG,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;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE;QACL;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-table-column-config.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-table-column-config',\n component: 'ox-input-table-column-config',\n argTypes: {\n name: { control: 'text' },\n value: { control: 'object' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: object\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'table-column-config', 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-table-column-config\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-table-column-config>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'table-column-config',\n value: [\n {\n name: 'section',\n label: 'Section',\n visible: true,\n width: 100,\n order: 1\n },\n {\n name: 'title',\n label: 'Title',\n visible: true,\n width: 110,\n order: 2\n },\n {\n name: 'startDate',\n label: 'Start Date',\n visible: true,\n width: 150,\n order: 3\n },\n {\n name: 'endDate',\n label: 'End Date',\n visible: true,\n width: 200,\n order: 4\n }\n ]\n}\n"]}
|