@alegendstale/holly-components 2.0.3 → 2.0.4
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/dist/components/absolute-container/absolute-container.js +79 -113
- package/dist/components/absolute-container/absolute-container.styles.js +20 -17
- package/dist/components/bottom-sheet/bottom-sheet.js +189 -319
- package/dist/components/bottom-sheet/bottom-sheet.styles.js +117 -114
- package/dist/components/canvas/canvas-base.d.ts +4 -1
- package/dist/components/canvas/canvas-base.d.ts.map +1 -1
- package/dist/components/canvas/canvas-base.js +51 -67
- package/dist/components/canvas/canvas-gradient.js +44 -69
- package/dist/components/canvas/canvas-image.js +112 -177
- package/dist/components/canvas/canvas-image.styles.js +23 -20
- package/dist/components/carousel-scroller/carousel-scroller.js +63 -87
- package/dist/components/carousel-scroller/carousel-scroller.styles.js +68 -65
- package/dist/components/color-palette/color-palette-utils.js +55 -104
- package/dist/components/color-palette/color-palette.js +250 -384
- package/dist/components/color-palette/color-palette.styles.js +92 -89
- package/dist/components/color-palette/component/color-palette-component.js +134 -188
- package/dist/components/color-palette/component/color-palette-component.styles.js +12 -9
- package/dist/components/color-palette/editor/color-palette-editor.js +413 -539
- package/dist/components/color-palette/editor/color-palette-editor.styles.js +149 -146
- package/dist/components/color-palette/editor/settings-item.js +32 -40
- package/dist/components/color-palette/editor/settings-item.styles.js +36 -33
- package/dist/components/color-palette/item/color-palette-item-edit.js +50 -84
- package/dist/components/color-palette/item/color-palette-item-edit.styles.js +53 -50
- package/dist/components/color-palette/item/color-palette-item.js +72 -107
- package/dist/components/color-palette/item/color-palette-item.styles.js +85 -82
- package/dist/components/color-palette/menu/color-palette-menu.js +162 -200
- package/dist/components/color-palette/menu/color-palette-menu.styles.js +51 -48
- package/dist/components/color-palette/menu/color-palette-reorder.js +76 -95
- package/dist/components/color-palette/menu/color-palette-reorder.styles.js +33 -30
- package/dist/components/draw-svg/draw-svg.js +35 -52
- package/dist/components/draw-svg/draw-svg.styles.js +41 -38
- package/dist/components/responsive-svg/responsive-svg.js +122 -174
- package/dist/components/responsive-svg/responsive-svg.styles.js +48 -45
- package/dist/components/tool-tip/tool-tip.d.ts +5 -1
- package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
- package/dist/components/tool-tip/tool-tip.js +64 -100
- package/dist/components/tool-tip/tool-tip.styles.js +60 -57
- package/dist/decorators/condCustomElement.js +8 -11
- package/dist/utils/EventEmitter.js +23 -23
- package/dist/utils/ResponsiveController.js +15 -18
- package/dist/utils/basicUtils.js +98 -146
- package/dist/utils/colorsea-wrapper.js +162 -166
- package/dist/utils/dragDropUtils.js +75 -119
- package/dist/utils/generateUtils.js +39 -73
- package/package.json +29 -60
- package/dist/components/absolute-container/absolute-container.stories.d.ts +0 -11
- package/dist/components/absolute-container/absolute-container.stories.d.ts.map +0 -1
- package/dist/components/absolute-container/absolute-container.stories.js +0 -64
- package/dist/components/absolute-container/index.d.ts +0 -2
- package/dist/components/absolute-container/index.d.ts.map +0 -1
- package/dist/components/absolute-container/index.js +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts +0 -17
- package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map +0 -1
- package/dist/components/bottom-sheet/bottom-sheet.stories.js +0 -67
- package/dist/components/bottom-sheet/index.d.ts +0 -2
- package/dist/components/bottom-sheet/index.d.ts.map +0 -1
- package/dist/components/bottom-sheet/index.js +0 -1
- package/dist/components/canvas/canvas-base.stories.d.ts +0 -7
- package/dist/components/canvas/canvas-base.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-base.stories.js +0 -24
- package/dist/components/canvas/canvas-gradient.stories.d.ts +0 -14
- package/dist/components/canvas/canvas-gradient.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-gradient.stories.js +0 -46
- package/dist/components/canvas/canvas-image.stories.d.ts +0 -13
- package/dist/components/canvas/canvas-image.stories.d.ts.map +0 -1
- package/dist/components/canvas/canvas-image.stories.js +0 -49
- package/dist/components/canvas/index.d.ts +0 -3
- package/dist/components/canvas/index.d.ts.map +0 -1
- package/dist/components/canvas/index.js +0 -2
- package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts +0 -13
- package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map +0 -1
- package/dist/components/carousel-scroller/carousel-scroller.stories.js +0 -56
- package/dist/components/carousel-scroller/index.d.ts +0 -2
- package/dist/components/carousel-scroller/index.d.ts.map +0 -1
- package/dist/components/carousel-scroller/index.js +0 -1
- package/dist/components/color-palette/component/color-palette-component.stories.d.ts +0 -13
- package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map +0 -1
- package/dist/components/color-palette/component/color-palette-component.stories.js +0 -75
- package/dist/components/color-palette/component/index.d.ts +0 -2
- package/dist/components/color-palette/component/index.d.ts.map +0 -1
- package/dist/components/color-palette/component/index.js +0 -1
- package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts +0 -18
- package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map +0 -1
- package/dist/components/color-palette/editor/color-palette-editor.stories.js +0 -67
- package/dist/components/color-palette/editor/index.d.ts +0 -2
- package/dist/components/color-palette/editor/index.d.ts.map +0 -1
- package/dist/components/color-palette/editor/index.js +0 -1
- package/dist/components/color-palette/index.d.ts +0 -6
- package/dist/components/color-palette/index.d.ts.map +0 -1
- package/dist/components/color-palette/index.js +0 -5
- package/dist/components/color-palette/item/index.d.ts +0 -3
- package/dist/components/color-palette/item/index.d.ts.map +0 -1
- package/dist/components/color-palette/item/index.js +0 -2
- package/dist/components/color-palette/menu/index.d.ts +0 -3
- package/dist/components/color-palette/menu/index.d.ts.map +0 -1
- package/dist/components/color-palette/menu/index.js +0 -2
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts +0 -33
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette-invalid.stories.js +0 -62
- package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts +0 -52
- package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette-valid.stories.js +0 -268
- package/dist/components/color-palette/storybook/color-palette.stories.d.ts +0 -27
- package/dist/components/color-palette/storybook/color-palette.stories.d.ts.map +0 -1
- package/dist/components/color-palette/storybook/color-palette.stories.js +0 -129
- package/dist/components/draw-svg/draw-svg.stories.d.ts +0 -7
- package/dist/components/draw-svg/draw-svg.stories.d.ts.map +0 -1
- package/dist/components/draw-svg/draw-svg.stories.js +0 -61
- package/dist/components/draw-svg/index.d.ts +0 -2
- package/dist/components/draw-svg/index.d.ts.map +0 -1
- package/dist/components/draw-svg/index.js +0 -1
- package/dist/components/responsive-svg/index.d.ts +0 -2
- package/dist/components/responsive-svg/index.d.ts.map +0 -1
- package/dist/components/responsive-svg/index.js +0 -1
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts +0 -26
- package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +0 -1
- package/dist/components/responsive-svg/responsive-svg.stories.js +0 -194
- package/dist/components/tool-tip/index.d.ts +0 -2
- package/dist/components/tool-tip/index.d.ts.map +0 -1
- package/dist/components/tool-tip/index.js +0 -1
- package/dist/components/tool-tip/tool-tip.stories.d.ts +0 -16
- package/dist/components/tool-tip/tool-tip.stories.d.ts.map +0 -1
- package/dist/components/tool-tip/tool-tip.stories.js +0 -62
- package/dist/decorators/index.d.ts +0 -2
- package/dist/decorators/index.d.ts.map +0 -1
- package/dist/decorators/index.js +0 -1
- package/dist/index.d.ts +0 -11
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -10
- package/dist/utils/index.d.ts +0 -5
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/index.js +0 -4
- package/dist/utils/types.d.ts +0 -5
- package/dist/utils/types.d.ts.map +0 -1
- package/dist/utils/types.js +0 -1
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Story } from './color-palette.stories.js';
|
|
2
|
-
declare const _default: {
|
|
3
|
-
title: string;
|
|
4
|
-
tags: string[];
|
|
5
|
-
id?: import("storybook/internal/csf").ComponentId;
|
|
6
|
-
includeStories?: RegExp | string[];
|
|
7
|
-
excludeStories?: RegExp | string[];
|
|
8
|
-
component?: string | undefined;
|
|
9
|
-
subcomponents?: Record<string, string> | undefined;
|
|
10
|
-
play?: import("storybook/internal/csf").PlayFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | undefined;
|
|
11
|
-
globals?: import("storybook/internal/csf").Globals | undefined;
|
|
12
|
-
decorators?: import("storybook/internal/csf").DecoratorFunction<import("@storybook/web-components").WebComponentsRenderer, {
|
|
13
|
-
[x: string]: any;
|
|
14
|
-
}> | import("storybook/internal/csf").DecoratorFunction<import("@storybook/web-components").WebComponentsRenderer, {
|
|
15
|
-
[x: string]: any;
|
|
16
|
-
}>[] | undefined;
|
|
17
|
-
parameters?: import("@storybook/web-components-vite").Parameters | undefined;
|
|
18
|
-
args?: Partial<import("@storybook/web-components-vite").Args> | undefined;
|
|
19
|
-
argTypes?: Partial<import("@storybook/web-components-vite").ArgTypes<import("@storybook/web-components-vite").Args>> | undefined;
|
|
20
|
-
loaders?: import("storybook/internal/csf").LoaderFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").LoaderFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
|
|
21
|
-
beforeEach?: import("storybook/internal/csf").BeforeEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").BeforeEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
|
|
22
|
-
afterEach?: import("storybook/internal/csf").AfterEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").AfterEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
|
|
23
|
-
render?: import("storybook/internal/csf").ArgsStoryFn<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | undefined;
|
|
24
|
-
mount?: ((context: import("storybook/internal/csf").StoryContext<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>) => () => Promise<import("storybook/internal/csf").Canvas>) | undefined;
|
|
25
|
-
};
|
|
26
|
-
export default _default;
|
|
27
|
-
export declare const Hex: Story;
|
|
28
|
-
export declare const HSL: Story;
|
|
29
|
-
export declare const RGB: Story;
|
|
30
|
-
export declare const NamedColors: Story;
|
|
31
|
-
export declare const URLWithSettings: Story;
|
|
32
|
-
export declare const HexHorizontalWithSettings: Story;
|
|
33
|
-
export declare const Semicolon: Story;
|
|
34
|
-
export declare const EightCharacterHex: Story;
|
|
35
|
-
export declare const Black: Story;
|
|
36
|
-
export declare const Hex_RGB_HSL: Story;
|
|
37
|
-
export declare const HeightDirection: Story;
|
|
38
|
-
export declare const HorizontalGradient: Story;
|
|
39
|
-
export declare const VerticalGradient: Story;
|
|
40
|
-
export declare const Aliases: Story;
|
|
41
|
-
export declare const AliasesSkipColor: Story;
|
|
42
|
-
export declare const Width: Story;
|
|
43
|
-
export declare const PreventHover: Story;
|
|
44
|
-
export declare const Override: Story;
|
|
45
|
-
export declare const RGBA_CSS_Variable: Story;
|
|
46
|
-
export declare const RGBSettings: Story;
|
|
47
|
-
export declare const Others: Story;
|
|
48
|
-
export declare const WhiteBlue: Story;
|
|
49
|
-
export declare const OrangeBlue: Story;
|
|
50
|
-
export declare const GreyGradient: Story;
|
|
51
|
-
export declare const URL: Story;
|
|
52
|
-
//# sourceMappingURL=color-palette-valid.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-valid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-valid.stories.ts"],"names":[],"mappings":"AAEA,OAA0B,EAAE,KAAK,EAAgB,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEpF,wBAIgB;AAEhB,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AACD,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KASpB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAA"}
|
|
@@ -1,268 +0,0 @@
|
|
|
1
|
-
import { Direction } from '../color-palette-utils.js';
|
|
2
|
-
import ColorPaletteStory, { htmlTemplate } from './color-palette.stories.js';
|
|
3
|
-
export default {
|
|
4
|
-
...ColorPaletteStory,
|
|
5
|
-
title: 'Color Palette/Palette/Valid',
|
|
6
|
-
tags: ['autodocs']
|
|
7
|
-
};
|
|
8
|
-
export const Hex = {
|
|
9
|
-
...htmlTemplate,
|
|
10
|
-
args: {
|
|
11
|
-
colors: [
|
|
12
|
-
'#434',
|
|
13
|
-
'#F6F7D7'
|
|
14
|
-
],
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
export const HSL = {
|
|
18
|
-
...htmlTemplate,
|
|
19
|
-
args: {
|
|
20
|
-
colors: [
|
|
21
|
-
'hsl(5, 20%, 70%);',
|
|
22
|
-
'hsl(5, 70%, 70%);'
|
|
23
|
-
],
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
export const RGB = {
|
|
27
|
-
...htmlTemplate,
|
|
28
|
-
args: {
|
|
29
|
-
colors: [
|
|
30
|
-
'rgb(123, 555, 777);',
|
|
31
|
-
'rgb(122, 222, 772);'
|
|
32
|
-
],
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
export const NamedColors = {
|
|
36
|
-
...htmlTemplate,
|
|
37
|
-
args: {
|
|
38
|
-
colors: [
|
|
39
|
-
'grey',
|
|
40
|
-
'pink'
|
|
41
|
-
],
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
export const URLWithSettings = {
|
|
45
|
-
...htmlTemplate,
|
|
46
|
-
args: {
|
|
47
|
-
colors: [
|
|
48
|
-
'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
|
|
49
|
-
],
|
|
50
|
-
gradient: true
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
export const HexHorizontalWithSettings = {
|
|
54
|
-
...htmlTemplate,
|
|
55
|
-
args: {
|
|
56
|
-
colors: [
|
|
57
|
-
'#434',
|
|
58
|
-
'#f6f7d7',
|
|
59
|
-
'#3EC1D3',
|
|
60
|
-
'#FF165D',
|
|
61
|
-
'#FF9A00',
|
|
62
|
-
'#f6f7d7'
|
|
63
|
-
],
|
|
64
|
-
gradient: true
|
|
65
|
-
},
|
|
66
|
-
};
|
|
67
|
-
export const Semicolon = {
|
|
68
|
-
...htmlTemplate,
|
|
69
|
-
args: {
|
|
70
|
-
colors: [
|
|
71
|
-
'#111;',
|
|
72
|
-
'#555;',
|
|
73
|
-
],
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
export const EightCharacterHex = {
|
|
77
|
-
...htmlTemplate,
|
|
78
|
-
args: {
|
|
79
|
-
colors: [
|
|
80
|
-
'#00444555',
|
|
81
|
-
],
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
export const Black = {
|
|
85
|
-
...htmlTemplate,
|
|
86
|
-
args: {
|
|
87
|
-
colors: [
|
|
88
|
-
'#000',
|
|
89
|
-
],
|
|
90
|
-
},
|
|
91
|
-
};
|
|
92
|
-
export const Hex_RGB_HSL = {
|
|
93
|
-
...htmlTemplate,
|
|
94
|
-
args: {
|
|
95
|
-
colors: [
|
|
96
|
-
'#667',
|
|
97
|
-
'rgb(200, 200, 100)',
|
|
98
|
-
'hsl(12, 66%, 99%)'
|
|
99
|
-
],
|
|
100
|
-
},
|
|
101
|
-
};
|
|
102
|
-
export const HeightDirection = {
|
|
103
|
-
...htmlTemplate,
|
|
104
|
-
args: {
|
|
105
|
-
colors: [
|
|
106
|
-
'#434',
|
|
107
|
-
'#f6f7d7',
|
|
108
|
-
'#3EC1D3',
|
|
109
|
-
'#FF165D',
|
|
110
|
-
'#FF9A00',
|
|
111
|
-
'#f6f7d7'
|
|
112
|
-
],
|
|
113
|
-
height: 300,
|
|
114
|
-
direction: Direction.Row
|
|
115
|
-
},
|
|
116
|
-
};
|
|
117
|
-
export const HorizontalGradient = {
|
|
118
|
-
...htmlTemplate,
|
|
119
|
-
args: {
|
|
120
|
-
colors: [
|
|
121
|
-
'#444',
|
|
122
|
-
'#545',
|
|
123
|
-
],
|
|
124
|
-
gradient: true
|
|
125
|
-
},
|
|
126
|
-
};
|
|
127
|
-
export const VerticalGradient = {
|
|
128
|
-
...htmlTemplate,
|
|
129
|
-
args: {
|
|
130
|
-
colors: [
|
|
131
|
-
'#afc',
|
|
132
|
-
'#b31',
|
|
133
|
-
],
|
|
134
|
-
gradient: true,
|
|
135
|
-
height: 300,
|
|
136
|
-
direction: Direction.Row
|
|
137
|
-
},
|
|
138
|
-
};
|
|
139
|
-
export const Aliases = {
|
|
140
|
-
...htmlTemplate,
|
|
141
|
-
args: {
|
|
142
|
-
colors: [
|
|
143
|
-
'#444',
|
|
144
|
-
'#222',
|
|
145
|
-
'#322'
|
|
146
|
-
],
|
|
147
|
-
direction: Direction.Row,
|
|
148
|
-
aliases: [
|
|
149
|
-
'grey',
|
|
150
|
-
'black',
|
|
151
|
-
'brown'
|
|
152
|
-
]
|
|
153
|
-
},
|
|
154
|
-
};
|
|
155
|
-
export const AliasesSkipColor = {
|
|
156
|
-
...htmlTemplate,
|
|
157
|
-
args: {
|
|
158
|
-
colors: [
|
|
159
|
-
'https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25',
|
|
160
|
-
],
|
|
161
|
-
aliases: [
|
|
162
|
-
'',
|
|
163
|
-
'light green',
|
|
164
|
-
]
|
|
165
|
-
},
|
|
166
|
-
};
|
|
167
|
-
export const Width = {
|
|
168
|
-
...htmlTemplate,
|
|
169
|
-
args: {
|
|
170
|
-
colors: [
|
|
171
|
-
'#999',
|
|
172
|
-
'#222'
|
|
173
|
-
],
|
|
174
|
-
gradient: true,
|
|
175
|
-
height: 200,
|
|
176
|
-
direction: Direction.Column,
|
|
177
|
-
width: 400
|
|
178
|
-
},
|
|
179
|
-
};
|
|
180
|
-
export const PreventHover = {
|
|
181
|
-
...htmlTemplate,
|
|
182
|
-
args: {
|
|
183
|
-
colors: [
|
|
184
|
-
'#8ec178',
|
|
185
|
-
'#25136d'
|
|
186
|
-
],
|
|
187
|
-
gradient: false,
|
|
188
|
-
direction: Direction.Column,
|
|
189
|
-
preventHover: true,
|
|
190
|
-
},
|
|
191
|
-
};
|
|
192
|
-
export const Override = {
|
|
193
|
-
...htmlTemplate,
|
|
194
|
-
args: {
|
|
195
|
-
colors: [
|
|
196
|
-
'var(--color-orange)',
|
|
197
|
-
],
|
|
198
|
-
override: true,
|
|
199
|
-
},
|
|
200
|
-
};
|
|
201
|
-
export const RGBA_CSS_Variable = {
|
|
202
|
-
...htmlTemplate,
|
|
203
|
-
args: {
|
|
204
|
-
colors: [
|
|
205
|
-
'rgba(var(--color-green-rgb), .5)',
|
|
206
|
-
],
|
|
207
|
-
override: true,
|
|
208
|
-
},
|
|
209
|
-
};
|
|
210
|
-
export const RGBSettings = {
|
|
211
|
-
...htmlTemplate,
|
|
212
|
-
args: {
|
|
213
|
-
colors: [
|
|
214
|
-
'rgb(123, 555, 777);',
|
|
215
|
-
'rgb(122, 222, 772);'
|
|
216
|
-
],
|
|
217
|
-
gradient: true,
|
|
218
|
-
},
|
|
219
|
-
};
|
|
220
|
-
export const Others = {
|
|
221
|
-
...htmlTemplate,
|
|
222
|
-
args: {
|
|
223
|
-
colors: [
|
|
224
|
-
'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
|
|
225
|
-
],
|
|
226
|
-
gradient: true,
|
|
227
|
-
direction: Direction.Column
|
|
228
|
-
},
|
|
229
|
-
};
|
|
230
|
-
export const WhiteBlue = {
|
|
231
|
-
...htmlTemplate,
|
|
232
|
-
args: {
|
|
233
|
-
colors: [
|
|
234
|
-
'#fff',
|
|
235
|
-
'#000fff00'
|
|
236
|
-
],
|
|
237
|
-
gradient: true,
|
|
238
|
-
},
|
|
239
|
-
};
|
|
240
|
-
export const OrangeBlue = {
|
|
241
|
-
...htmlTemplate,
|
|
242
|
-
args: {
|
|
243
|
-
colors: [
|
|
244
|
-
'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
|
|
245
|
-
],
|
|
246
|
-
gradient: true,
|
|
247
|
-
},
|
|
248
|
-
};
|
|
249
|
-
export const GreyGradient = {
|
|
250
|
-
...htmlTemplate,
|
|
251
|
-
args: {
|
|
252
|
-
colors: [
|
|
253
|
-
'#444',
|
|
254
|
-
'#555',
|
|
255
|
-
'#666',
|
|
256
|
-
'#777'
|
|
257
|
-
],
|
|
258
|
-
gradient: true,
|
|
259
|
-
},
|
|
260
|
-
};
|
|
261
|
-
export const URL = {
|
|
262
|
-
...htmlTemplate,
|
|
263
|
-
args: {
|
|
264
|
-
colors: [
|
|
265
|
-
'https://coolors.co/2c2423-1e5f7b-839199-64abbb-88cc67-a0713e-dc6bad-bd93f9-f2647c-edcb79'
|
|
266
|
-
],
|
|
267
|
-
}
|
|
268
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { PaletteSettings } from '../color-palette-utils.js';
|
|
3
|
-
declare const meta: Meta;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Props = PaletteSettings & {
|
|
6
|
-
colors: string[];
|
|
7
|
-
editMode: boolean;
|
|
8
|
-
maxWidth: number;
|
|
9
|
-
'--palette-height': string;
|
|
10
|
-
'--palette-width': string;
|
|
11
|
-
'--palette-background-color': string;
|
|
12
|
-
'--palette-color': string;
|
|
13
|
-
'--palette-column-flex-basis': string;
|
|
14
|
-
'--palette-corners': string;
|
|
15
|
-
};
|
|
16
|
-
export type Story = StoryObj<Props>;
|
|
17
|
-
export declare const htmlTemplate: {
|
|
18
|
-
render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }: Props) => import("lit-html").TemplateResult<1>;
|
|
19
|
-
};
|
|
20
|
-
export declare const tsTemplate: {
|
|
21
|
-
render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }: Props) => import("lit-html").TemplateResult<1>;
|
|
22
|
-
};
|
|
23
|
-
export declare const Empty: Story;
|
|
24
|
-
export declare const OneItem: Story;
|
|
25
|
-
export declare const ManyItems: Story;
|
|
26
|
-
export declare const Gradient: Story;
|
|
27
|
-
//# sourceMappingURL=color-palette.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA8BxF,QAAA,MAAM,IAAI,EAAE,IAOX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,eAAe,GAAG;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6BAA6B,EAAE,MAAM,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAA;CAC3B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAYpC,eAAO,MAAM,YAAY;mRACsP,KAAK;CAyBnR,CAAC;AAEF,eAAO,MAAM,UAAU;mRACwP,KAAK;CAanR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC"}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { defaultSettings, Direction } from '../color-palette-utils.js';
|
|
3
|
-
import { pluginToPaletteSettings } from '../../../utils/basicUtils.js';
|
|
4
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
5
|
-
const argTypes = {
|
|
6
|
-
colors: { control: 'object' },
|
|
7
|
-
height: { control: 'number' },
|
|
8
|
-
width: { control: 'number' },
|
|
9
|
-
direction: {
|
|
10
|
-
control: { type: 'select' },
|
|
11
|
-
options: Object.values(Direction),
|
|
12
|
-
},
|
|
13
|
-
preventHover: { control: 'boolean' },
|
|
14
|
-
hideText: { control: 'boolean' },
|
|
15
|
-
override: { control: 'boolean' },
|
|
16
|
-
aliases: { control: 'object' },
|
|
17
|
-
editMode: { control: 'boolean' },
|
|
18
|
-
maxWidth: { control: 'number' },
|
|
19
|
-
pluginSettings: { control: false },
|
|
20
|
-
settings: { control: false },
|
|
21
|
-
status: { control: false },
|
|
22
|
-
emitter: { control: false },
|
|
23
|
-
'--palette-height': { control: false },
|
|
24
|
-
'--palette-width': { control: false },
|
|
25
|
-
'--palette-background-color': { control: 'color' },
|
|
26
|
-
'--palette-color': { control: 'color' },
|
|
27
|
-
'--palette-column-flex-basis': { control: 'text' },
|
|
28
|
-
'--palette-corners': { control: 'text' }
|
|
29
|
-
};
|
|
30
|
-
const meta = {
|
|
31
|
-
title: 'Color Palette/Palette',
|
|
32
|
-
tags: ['autodocs'],
|
|
33
|
-
component: 'color-palette',
|
|
34
|
-
subcomponents: { ColorPaletteItem: 'color-palette-item' },
|
|
35
|
-
excludeStories: ['htmlTemplate', 'tsTemplate'],
|
|
36
|
-
argTypes
|
|
37
|
-
};
|
|
38
|
-
export default meta;
|
|
39
|
-
const colors = [
|
|
40
|
-
'#E6C47D',
|
|
41
|
-
'#DEB052',
|
|
42
|
-
'#D59C28',
|
|
43
|
-
'#AA7D20',
|
|
44
|
-
'#7F5D18'
|
|
45
|
-
];
|
|
46
|
-
const settings = { ...pluginToPaletteSettings(defaultSettings), aliases: ['', '', 'test', '', ''] };
|
|
47
|
-
export const htmlTemplate = {
|
|
48
|
-
render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }) => {
|
|
49
|
-
const styles = {
|
|
50
|
-
"--palette-background-color": backgroundColor,
|
|
51
|
-
"--palette-color": color,
|
|
52
|
-
"--palette-column-flex-basis": columnFlexBasis,
|
|
53
|
-
"--palette-corner": corners
|
|
54
|
-
};
|
|
55
|
-
return html `
|
|
56
|
-
<color-palette
|
|
57
|
-
.colors=${colors}
|
|
58
|
-
height=${height || defaultSettings.height}
|
|
59
|
-
width=${width || defaultSettings.width}
|
|
60
|
-
direction=${direction || defaultSettings.direction}
|
|
61
|
-
?gradient=${gradient || defaultSettings.gradient}
|
|
62
|
-
?preventHover=${preventHover || defaultSettings.preventHover}
|
|
63
|
-
?hideText=${hideText || defaultSettings.hideText}
|
|
64
|
-
?override=${override || defaultSettings.override}
|
|
65
|
-
.aliases=${aliases}
|
|
66
|
-
?editMode=${editMode}
|
|
67
|
-
style=${styleMap(styles)}
|
|
68
|
-
>
|
|
69
|
-
</color-palette>
|
|
70
|
-
`;
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
export const tsTemplate = {
|
|
74
|
-
render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }) => {
|
|
75
|
-
const palette = document.createElement('color-palette');
|
|
76
|
-
palette.colors = colors;
|
|
77
|
-
palette.settings = { height, width, direction, gradient, preventHover, hideText, override, aliases };
|
|
78
|
-
palette.editMode = editMode;
|
|
79
|
-
palette.style.setProperty('--palette-background-color', backgroundColor);
|
|
80
|
-
palette.style.setProperty('--palette-color', color);
|
|
81
|
-
palette.style.setProperty('--palette-column-flex-basis', columnFlexBasis);
|
|
82
|
-
palette.style.setProperty('--palette-corner', corners);
|
|
83
|
-
return html `
|
|
84
|
-
${palette}
|
|
85
|
-
`;
|
|
86
|
-
},
|
|
87
|
-
};
|
|
88
|
-
export const Empty = {
|
|
89
|
-
...htmlTemplate,
|
|
90
|
-
args: {
|
|
91
|
-
colors: [],
|
|
92
|
-
...settings
|
|
93
|
-
},
|
|
94
|
-
};
|
|
95
|
-
export const OneItem = {
|
|
96
|
-
...htmlTemplate,
|
|
97
|
-
args: {
|
|
98
|
-
colors: [colors[0]],
|
|
99
|
-
...settings
|
|
100
|
-
},
|
|
101
|
-
};
|
|
102
|
-
export const ManyItems = {
|
|
103
|
-
...htmlTemplate,
|
|
104
|
-
args: {
|
|
105
|
-
colors,
|
|
106
|
-
height: 150,
|
|
107
|
-
width: 700,
|
|
108
|
-
direction: Direction.Column,
|
|
109
|
-
gradient: false,
|
|
110
|
-
preventHover: false,
|
|
111
|
-
hideText: false,
|
|
112
|
-
override: false,
|
|
113
|
-
aliases: ['', '', 'test', '', '']
|
|
114
|
-
},
|
|
115
|
-
};
|
|
116
|
-
export const Gradient = {
|
|
117
|
-
...htmlTemplate,
|
|
118
|
-
args: {
|
|
119
|
-
colors,
|
|
120
|
-
height: 150,
|
|
121
|
-
width: 700,
|
|
122
|
-
direction: Direction.Column,
|
|
123
|
-
gradient: true,
|
|
124
|
-
preventHover: false,
|
|
125
|
-
hideText: false,
|
|
126
|
-
override: false,
|
|
127
|
-
aliases: ['', '', 'test', '', '']
|
|
128
|
-
},
|
|
129
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { Props } from '../responsive-svg/responsive-svg.stories.js';
|
|
3
|
-
declare const meta: Meta;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<Props>;
|
|
6
|
-
export declare const DrawSVG: Story;
|
|
7
|
-
//# sourceMappingURL=draw-svg.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"draw-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/E,OAA2B,EAAE,KAAK,EAAE,MAAM,6CAA6C,CAAC;AAQxF,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgC7B,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
3
|
-
import DrawSVGRaw from '../../assets/DrawSVG.svg?raw';
|
|
4
|
-
import { expect } from 'storybook/test';
|
|
5
|
-
import ResponsiveSVGStory from '../responsive-svg/responsive-svg.stories.js';
|
|
6
|
-
const argTypes = {
|
|
7
|
-
...ResponsiveSVGStory.argTypes,
|
|
8
|
-
isIntersecting: { control: false },
|
|
9
|
-
emitter: { control: false }
|
|
10
|
-
};
|
|
11
|
-
const meta = {
|
|
12
|
-
title: 'SVG/Draw SVG',
|
|
13
|
-
tags: ['autodocs'],
|
|
14
|
-
component: 'draw-svg',
|
|
15
|
-
argTypes
|
|
16
|
-
};
|
|
17
|
-
export default meta;
|
|
18
|
-
const template = {
|
|
19
|
-
render: ({ fontSize, stroke, fill, autofit, svgColors, svg, preserveAspectRatio, "--svg-height": height, "--svg-width": width, "--scale": scale }) => {
|
|
20
|
-
const styles = {
|
|
21
|
-
'font-size': `${fontSize}px`,
|
|
22
|
-
stroke,
|
|
23
|
-
fill,
|
|
24
|
-
'--svg-height': height !== '0em' ? height : null,
|
|
25
|
-
'--svg-width': width !== '0em' ? width : null,
|
|
26
|
-
'--scale': scale
|
|
27
|
-
};
|
|
28
|
-
return html `
|
|
29
|
-
<style>
|
|
30
|
-
draw-svg::part(__path) {
|
|
31
|
-
animation-iteration-count: infinite;
|
|
32
|
-
}
|
|
33
|
-
</style>
|
|
34
|
-
|
|
35
|
-
<draw-svg
|
|
36
|
-
?autofit=${autofit}
|
|
37
|
-
?svgColors=${svgColors}
|
|
38
|
-
.preserveAspectRatio=${preserveAspectRatio}
|
|
39
|
-
.svg=${svg}
|
|
40
|
-
style=${styleMap(styles)}
|
|
41
|
-
>
|
|
42
|
-
</draw-svg>
|
|
43
|
-
`;
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
export const DrawSVG = {
|
|
47
|
-
...template,
|
|
48
|
-
args: {
|
|
49
|
-
fontSize: 128,
|
|
50
|
-
stroke: 'red',
|
|
51
|
-
fill: 'black',
|
|
52
|
-
autofit: false,
|
|
53
|
-
svgColors: false,
|
|
54
|
-
svg: DrawSVGRaw,
|
|
55
|
-
preserveAspectRatio: 'xMidYMid meet'
|
|
56
|
-
},
|
|
57
|
-
play: async ({ canvasElement }) => {
|
|
58
|
-
const component = canvasElement.querySelector('draw-svg');
|
|
59
|
-
expect(component);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DrawSvg } from "./draw-svg.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ResponsiveSvg } from "./responsive-svg.js";
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { TemplateResult } from 'lit';
|
|
3
|
-
import { PreserveAspectRatio } from './responsive-svg.js';
|
|
4
|
-
declare const meta: Meta;
|
|
5
|
-
export default meta;
|
|
6
|
-
export type Props = {
|
|
7
|
-
fontSize: number;
|
|
8
|
-
stroke: string;
|
|
9
|
-
fill: string;
|
|
10
|
-
autofit: boolean;
|
|
11
|
-
svgColors: boolean;
|
|
12
|
-
svg: SVGElement | TemplateResult<2> | string;
|
|
13
|
-
preserveAspectRatio: PreserveAspectRatio;
|
|
14
|
-
'--svg-height': string;
|
|
15
|
-
'--svg-width': string;
|
|
16
|
-
'--scale': number;
|
|
17
|
-
};
|
|
18
|
-
type Story = StoryObj<Props>;
|
|
19
|
-
export declare const SVG: Story;
|
|
20
|
-
export declare const TemplateResult2: Story;
|
|
21
|
-
export declare const ServicesBottom: Story;
|
|
22
|
-
export declare const EmptyString: Story;
|
|
23
|
-
export declare const Invalid: Story;
|
|
24
|
-
export declare const SVGWithoutViewBox: Story;
|
|
25
|
-
export declare const SVGWithoutWidthHeight: Story;
|
|
26
|
-
//# sourceMappingURL=responsive-svg.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"responsive-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,mBAAmB,EAA8B,MAAM,qBAAqB,CAAC;AAkEtF,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;IAC7C,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAA;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA0B7B,eAAO,MAAM,GAAG,EAAE,KAWjB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}
|