@alegendstale/holly-components 2.0.2 → 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.d.ts +2 -2
- package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -1
- 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 +34 -64
- 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,24 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
const argTypes = {
|
|
3
|
-
canvas: { control: false },
|
|
4
|
-
context: { control: false },
|
|
5
|
-
emitter: { control: false }
|
|
6
|
-
};
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Canvas/Base',
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
component: 'canvas-base',
|
|
11
|
-
argTypes,
|
|
12
|
-
};
|
|
13
|
-
export default meta;
|
|
14
|
-
const template = {
|
|
15
|
-
render: ({}) => {
|
|
16
|
-
return html `
|
|
17
|
-
<canvas-base></canvas-base>
|
|
18
|
-
`;
|
|
19
|
-
},
|
|
20
|
-
};
|
|
21
|
-
export const Example = {
|
|
22
|
-
...template,
|
|
23
|
-
args: {},
|
|
24
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { Direction } from '../color-palette/color-palette-utils.js';
|
|
3
|
-
type DirectionType = `${Direction}`;
|
|
4
|
-
declare const meta: Meta;
|
|
5
|
-
export default meta;
|
|
6
|
-
export type Props = {
|
|
7
|
-
colors: string[];
|
|
8
|
-
height: number;
|
|
9
|
-
width: number;
|
|
10
|
-
direction: DirectionType;
|
|
11
|
-
};
|
|
12
|
-
type Story = StoryObj<Props>;
|
|
13
|
-
export declare const Example: Story;
|
|
14
|
-
//# sourceMappingURL=canvas-gradient.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"canvas-gradient.stories.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-gradient.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG/E,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGpE,KAAK,aAAa,GAAG,GAAG,SAAS,EAAE,CAAC;AAapC,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,aAAa,CAAA;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgB7B,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import CanvasBaseStory from './canvas-base.stories.js';
|
|
3
|
-
import { Direction } from '../color-palette/color-palette-utils.js';
|
|
4
|
-
const direction = Object.values(Direction);
|
|
5
|
-
const argTypes = {
|
|
6
|
-
...CanvasBaseStory.argTypes,
|
|
7
|
-
colors: { control: 'object' },
|
|
8
|
-
height: { control: 'number' },
|
|
9
|
-
width: { control: 'number' },
|
|
10
|
-
direction: {
|
|
11
|
-
control: 'select',
|
|
12
|
-
options: direction,
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const meta = {
|
|
16
|
-
title: 'Canvas/Gradient',
|
|
17
|
-
tags: ['autodocs'],
|
|
18
|
-
component: 'canvas-gradient',
|
|
19
|
-
argTypes,
|
|
20
|
-
};
|
|
21
|
-
export default meta;
|
|
22
|
-
const template = {
|
|
23
|
-
render: ({ colors, height, width, direction }) => {
|
|
24
|
-
return html `
|
|
25
|
-
<canvas-gradient
|
|
26
|
-
.colors=${colors}
|
|
27
|
-
height=${height}
|
|
28
|
-
width=${width}
|
|
29
|
-
direction=${direction}
|
|
30
|
-
>
|
|
31
|
-
</canvas-gradient>
|
|
32
|
-
`;
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
export const Example = {
|
|
36
|
-
...template,
|
|
37
|
-
args: {
|
|
38
|
-
colors: [
|
|
39
|
-
'#fff',
|
|
40
|
-
'#000'
|
|
41
|
-
],
|
|
42
|
-
height: 250,
|
|
43
|
-
width: 500,
|
|
44
|
-
direction: 'row'
|
|
45
|
-
},
|
|
46
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
export type Props = {
|
|
5
|
-
imageURL: string;
|
|
6
|
-
smoothing: boolean;
|
|
7
|
-
width: number;
|
|
8
|
-
height: number;
|
|
9
|
-
};
|
|
10
|
-
type Story = StoryObj<Props>;
|
|
11
|
-
export declare const Example: Story;
|
|
12
|
-
export declare const Error: Story;
|
|
13
|
-
//# sourceMappingURL=canvas-image.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"canvas-image.stories.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAc/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgB7B,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import CanvasBaseStory from './canvas-base.stories.js';
|
|
3
|
-
const argTypes = {
|
|
4
|
-
...CanvasBaseStory.argTypes,
|
|
5
|
-
image: { control: false },
|
|
6
|
-
imageURL: { control: 'text' },
|
|
7
|
-
smoothing: { control: 'boolean' },
|
|
8
|
-
width: { control: 'number' },
|
|
9
|
-
height: { control: 'number' },
|
|
10
|
-
'data-status': { control: false }
|
|
11
|
-
};
|
|
12
|
-
const meta = {
|
|
13
|
-
title: 'Canvas/Image',
|
|
14
|
-
tags: ['autodocs'],
|
|
15
|
-
component: 'canvas-image',
|
|
16
|
-
argTypes,
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
const template = {
|
|
20
|
-
render: ({ imageURL, smoothing, width, height }) => {
|
|
21
|
-
return html `
|
|
22
|
-
<canvas-image
|
|
23
|
-
imageURL=${imageURL}
|
|
24
|
-
?smoothing=${smoothing}
|
|
25
|
-
width=${width}
|
|
26
|
-
height=${height}
|
|
27
|
-
>
|
|
28
|
-
</canvas-image>
|
|
29
|
-
`;
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
export const Example = {
|
|
33
|
-
...template,
|
|
34
|
-
args: {
|
|
35
|
-
imageURL: 'https://jollybandit.com/GreekzCaricature-md.webp',
|
|
36
|
-
smoothing: false,
|
|
37
|
-
width: 500,
|
|
38
|
-
height: 500
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
export const Error = {
|
|
42
|
-
...template,
|
|
43
|
-
args: {
|
|
44
|
-
imageURL: 'hello',
|
|
45
|
-
smoothing: false,
|
|
46
|
-
width: 500,
|
|
47
|
-
height: 500
|
|
48
|
-
},
|
|
49
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
type Props = {
|
|
5
|
-
items: string[];
|
|
6
|
-
'--padding': string;
|
|
7
|
-
'--margin': string;
|
|
8
|
-
};
|
|
9
|
-
type Story = StoryObj<Props>;
|
|
10
|
-
export declare const Empty: Story;
|
|
11
|
-
export declare const OneItem: Story;
|
|
12
|
-
export declare const ManyItems: Story;
|
|
13
|
-
//# sourceMappingURL=carousel-scroller.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"carousel-scroller.stories.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/carousel-scroller.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAc/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { repeat } from 'lit/directives/repeat.js';
|
|
3
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
4
|
-
const argTypes = {
|
|
5
|
-
items: { control: 'object' },
|
|
6
|
-
slotEl: { control: false },
|
|
7
|
-
slotChildren: { control: false },
|
|
8
|
-
emitter: { control: false },
|
|
9
|
-
'--padding': { control: 'text' },
|
|
10
|
-
'--margin': { control: 'text' }
|
|
11
|
-
};
|
|
12
|
-
const meta = {
|
|
13
|
-
title: 'Carousel Scroller',
|
|
14
|
-
tags: ['autodocs'],
|
|
15
|
-
component: 'carousel-scroller',
|
|
16
|
-
argTypes
|
|
17
|
-
};
|
|
18
|
-
export default meta;
|
|
19
|
-
const template = {
|
|
20
|
-
render: ({ items, '--padding': padding, '--margin': margin }) => {
|
|
21
|
-
const styles = {
|
|
22
|
-
'--padding': padding,
|
|
23
|
-
'--margin': margin
|
|
24
|
-
};
|
|
25
|
-
return html `
|
|
26
|
-
<carousel-scroller
|
|
27
|
-
style=${styleMap(styles)}
|
|
28
|
-
>
|
|
29
|
-
${repeat(items, (item) => html `<div>${item}</div>`)}
|
|
30
|
-
</carousel-scroller>
|
|
31
|
-
`;
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
const items = [
|
|
35
|
-
'one',
|
|
36
|
-
'two',
|
|
37
|
-
'three'
|
|
38
|
-
];
|
|
39
|
-
export const Empty = {
|
|
40
|
-
...template,
|
|
41
|
-
args: {
|
|
42
|
-
items: [],
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
export const OneItem = {
|
|
46
|
-
...template,
|
|
47
|
-
args: {
|
|
48
|
-
items: [items[0]],
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
export const ManyItems = {
|
|
52
|
-
...template,
|
|
53
|
-
args: {
|
|
54
|
-
items,
|
|
55
|
-
},
|
|
56
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { CarouselScroller } from "./carousel-scroller.js";
|
|
@@ -1,13 +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 = {
|
|
6
|
-
colors: string[];
|
|
7
|
-
settings: PaletteSettings;
|
|
8
|
-
editMode: boolean;
|
|
9
|
-
};
|
|
10
|
-
type Story = StoryObj<Props>;
|
|
11
|
-
export declare const ManyItems: Story;
|
|
12
|
-
export declare const Gradient: Story;
|
|
13
|
-
//# sourceMappingURL=color-palette-component.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-component.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAa,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAWvE,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAA;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAuB7B,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { Direction } from '../color-palette-utils.js';
|
|
3
|
-
const argTypes = {
|
|
4
|
-
palette: { control: false },
|
|
5
|
-
absolute: { control: false },
|
|
6
|
-
isMobile: { control: false },
|
|
7
|
-
colors: { control: 'object' },
|
|
8
|
-
settings: { control: 'object' },
|
|
9
|
-
editMode: { control: 'boolean' }
|
|
10
|
-
};
|
|
11
|
-
const meta = {
|
|
12
|
-
title: 'Color Palette/Component',
|
|
13
|
-
tags: ['autodocs'],
|
|
14
|
-
component: 'color-palette-component',
|
|
15
|
-
subcomponents: {
|
|
16
|
-
ColorPalette: 'color-palette',
|
|
17
|
-
ColorPaletteMenu: 'color-palette-menu',
|
|
18
|
-
ColorPaletteEditor: 'color-palette-editor'
|
|
19
|
-
},
|
|
20
|
-
argTypes
|
|
21
|
-
};
|
|
22
|
-
export default meta;
|
|
23
|
-
const colors = [
|
|
24
|
-
'#E6C47D',
|
|
25
|
-
'#DEB052',
|
|
26
|
-
'#D59C28',
|
|
27
|
-
'#AA7D20',
|
|
28
|
-
'#7F5D18'
|
|
29
|
-
];
|
|
30
|
-
const ColorPaletteTemplate = {
|
|
31
|
-
render: ({ colors, settings, editMode }) => {
|
|
32
|
-
return html `
|
|
33
|
-
<color-palette-component
|
|
34
|
-
.colors=${colors}
|
|
35
|
-
.settings=${settings}
|
|
36
|
-
?editMode=${editMode}
|
|
37
|
-
>
|
|
38
|
-
</color-palette-component>
|
|
39
|
-
`;
|
|
40
|
-
},
|
|
41
|
-
};
|
|
42
|
-
export const ManyItems = {
|
|
43
|
-
...ColorPaletteTemplate,
|
|
44
|
-
args: {
|
|
45
|
-
colors,
|
|
46
|
-
settings: {
|
|
47
|
-
height: 150,
|
|
48
|
-
width: 700,
|
|
49
|
-
direction: Direction.Column,
|
|
50
|
-
gradient: false,
|
|
51
|
-
preventHover: false,
|
|
52
|
-
hideText: false,
|
|
53
|
-
override: false,
|
|
54
|
-
aliases: ['', '', 'test', '', '']
|
|
55
|
-
},
|
|
56
|
-
editMode: false
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
export const Gradient = {
|
|
60
|
-
...ColorPaletteTemplate,
|
|
61
|
-
args: {
|
|
62
|
-
colors,
|
|
63
|
-
settings: {
|
|
64
|
-
height: 150,
|
|
65
|
-
width: 700,
|
|
66
|
-
direction: Direction.Column,
|
|
67
|
-
gradient: true,
|
|
68
|
-
preventHover: false,
|
|
69
|
-
hideText: false,
|
|
70
|
-
override: false,
|
|
71
|
-
aliases: ['', '', 'test', '', '']
|
|
72
|
-
},
|
|
73
|
-
editMode: false
|
|
74
|
-
},
|
|
75
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ColorPaletteComponent } from './color-palette-component.js';
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { Combination } from '../../../utils/generateUtils.js';
|
|
3
|
-
import { SelectedInput } from './color-palette-editor.js';
|
|
4
|
-
import { PaletteSettings } from '../color-palette-utils.js';
|
|
5
|
-
import colorsea from '../../../utils/colorsea-wrapper.js';
|
|
6
|
-
declare const meta: Meta;
|
|
7
|
-
export default meta;
|
|
8
|
-
type Props = {
|
|
9
|
-
colors: string[];
|
|
10
|
-
settings: PaletteSettings;
|
|
11
|
-
selectedInput: SelectedInput;
|
|
12
|
-
combination: Combination;
|
|
13
|
-
baseColor: ReturnType<typeof colorsea>;
|
|
14
|
-
'--cta-background': string;
|
|
15
|
-
};
|
|
16
|
-
type Story = StoryObj<Props>;
|
|
17
|
-
export declare const Example: Story;
|
|
18
|
-
//# sourceMappingURL=color-palette-editor.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-editor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAkB,MAAM,iCAAiC,CAAC;AAE9E,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAkB1D,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAA;CAC1B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA4B7B,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { Combination, generateColors } from '../../../utils/generateUtils.js';
|
|
3
|
-
import { ref } from 'lit/directives/ref.js';
|
|
4
|
-
import { ColorPaletteEditor, SelectedInput } from './color-palette-editor.js';
|
|
5
|
-
import { defaultSettings } from '../color-palette-utils.js';
|
|
6
|
-
import { pluginToPaletteSettings } from '../../../utils/basicUtils.js';
|
|
7
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
8
|
-
const argTypes = {
|
|
9
|
-
colors: { control: 'object' },
|
|
10
|
-
settings: { control: 'object' },
|
|
11
|
-
selectedInput: {
|
|
12
|
-
control: 'select',
|
|
13
|
-
options: Object.values(SelectedInput),
|
|
14
|
-
},
|
|
15
|
-
combination: {
|
|
16
|
-
control: 'select',
|
|
17
|
-
options: Object.values(Combination)
|
|
18
|
-
},
|
|
19
|
-
baseColor: { control: 'object' },
|
|
20
|
-
'--cta-background': { control: 'text' }
|
|
21
|
-
};
|
|
22
|
-
const meta = {
|
|
23
|
-
title: 'Color Palette/Palette Editor',
|
|
24
|
-
tags: ['autodocs'],
|
|
25
|
-
component: 'color-palette-editor',
|
|
26
|
-
subcomponents: {
|
|
27
|
-
ColorPalette: 'color-palette',
|
|
28
|
-
CanvasImage: 'canvas-image',
|
|
29
|
-
SettingItem: 'setting-item'
|
|
30
|
-
},
|
|
31
|
-
argTypes
|
|
32
|
-
};
|
|
33
|
-
export default meta;
|
|
34
|
-
function setEditorEvents(editor) {
|
|
35
|
-
if (!(editor instanceof ColorPaletteEditor))
|
|
36
|
-
return;
|
|
37
|
-
editor.emitter.clear();
|
|
38
|
-
editor.emitter.on('submit', (colors, settings) => {
|
|
39
|
-
alert(`colors ${colors} settings ${JSON.stringify(settings)}`);
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
const Template = {
|
|
43
|
-
render: ({ colors, settings, selectedInput, combination, baseColor, "--cta-background": ctaBackground }) => {
|
|
44
|
-
return html `
|
|
45
|
-
<color-palette-editor
|
|
46
|
-
.colors=${colors}
|
|
47
|
-
.settings=${settings}
|
|
48
|
-
selectedInput=${selectedInput}
|
|
49
|
-
combination=${combination}
|
|
50
|
-
.baseColor=${baseColor}
|
|
51
|
-
style=${styleMap({ '--cta-background': ctaBackground })}
|
|
52
|
-
${ref(setEditorEvents)}
|
|
53
|
-
>
|
|
54
|
-
</color-palette-editor>
|
|
55
|
-
`;
|
|
56
|
-
},
|
|
57
|
-
};
|
|
58
|
-
export const Example = {
|
|
59
|
-
...Template,
|
|
60
|
-
args: {
|
|
61
|
-
colors: generateColors(Combination.Random).colors,
|
|
62
|
-
settings: pluginToPaletteSettings(defaultSettings),
|
|
63
|
-
selectedInput: SelectedInput.Color_Picker,
|
|
64
|
-
combination: Combination.Random,
|
|
65
|
-
"--cta-background": '#abcdef'
|
|
66
|
-
}
|
|
67
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ColorPaletteEditor } from './color-palette-editor.js';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { ColorPalette } from './color-palette.js';
|
|
2
|
-
export { ColorPaletteItem, ColorPaletteItemEdit } from './item/index.js';
|
|
3
|
-
export { ColorPaletteMenu, ColorPaletteReorder } from './menu/index.js';
|
|
4
|
-
export { ColorPaletteComponent } from './component/index.js';
|
|
5
|
-
export { ColorPaletteEditor } from './editor/index.js';
|
|
6
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { ColorPalette } from './color-palette.js';
|
|
2
|
-
export { ColorPaletteItem, ColorPaletteItemEdit } from './item/index.js';
|
|
3
|
-
export { ColorPaletteMenu, ColorPaletteReorder } from './menu/index.js';
|
|
4
|
-
export { ColorPaletteComponent } from './component/index.js';
|
|
5
|
-
export { ColorPaletteEditor } from './editor/index.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -1,33 +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 InvalidColors: Story;
|
|
28
|
-
export declare const OneColorGradient: Story;
|
|
29
|
-
export declare const NonOverriddenPalette: Story;
|
|
30
|
-
export declare const InvalidSettings: Story;
|
|
31
|
-
export declare const InvalidColorsSettings: Story;
|
|
32
|
-
export declare const InvalidDirections: Story;
|
|
33
|
-
//# sourceMappingURL=color-palette-invalid.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-invalid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-invalid.stories.ts"],"names":[],"mappings":"AACA,OAA0B,EAAE,KAAK,EAAgB,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEpF,wBAIgB;AAEhB,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAA"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import ColorPaletteStory, { htmlTemplate } from './color-palette.stories.js';
|
|
2
|
-
export default {
|
|
3
|
-
...ColorPaletteStory,
|
|
4
|
-
title: 'Color Palette/Palette/Invalid',
|
|
5
|
-
tags: ['autodocs']
|
|
6
|
-
};
|
|
7
|
-
export const InvalidColors = {
|
|
8
|
-
...htmlTemplate,
|
|
9
|
-
args: {
|
|
10
|
-
colors: [
|
|
11
|
-
'#444;',
|
|
12
|
-
'5'
|
|
13
|
-
],
|
|
14
|
-
},
|
|
15
|
-
};
|
|
16
|
-
export const OneColorGradient = {
|
|
17
|
-
...htmlTemplate,
|
|
18
|
-
args: {
|
|
19
|
-
colors: [
|
|
20
|
-
'#444'
|
|
21
|
-
],
|
|
22
|
-
gradient: true
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
export const NonOverriddenPalette = {
|
|
26
|
-
...htmlTemplate,
|
|
27
|
-
args: {
|
|
28
|
-
colors: [
|
|
29
|
-
'rgb(var(--ctp-peach))'
|
|
30
|
-
],
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
export const InvalidSettings = {
|
|
34
|
-
...htmlTemplate,
|
|
35
|
-
args: {
|
|
36
|
-
colors: [
|
|
37
|
-
'#555'
|
|
38
|
-
],
|
|
39
|
-
// @ts-expect-error
|
|
40
|
-
aliases: {}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
export const InvalidColorsSettings = {
|
|
44
|
-
...htmlTemplate,
|
|
45
|
-
args: {
|
|
46
|
-
colors: [
|
|
47
|
-
'#5'
|
|
48
|
-
],
|
|
49
|
-
// @ts-expect-error
|
|
50
|
-
aliases: {}
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
export const InvalidDirections = {
|
|
54
|
-
...htmlTemplate,
|
|
55
|
-
args: {
|
|
56
|
-
colors: [
|
|
57
|
-
'#555'
|
|
58
|
-
],
|
|
59
|
-
// @ts-expect-error
|
|
60
|
-
direction: 'hello'
|
|
61
|
-
}
|
|
62
|
-
};
|