@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.
Files changed (137) hide show
  1. package/dist/components/absolute-container/absolute-container.js +79 -113
  2. package/dist/components/absolute-container/absolute-container.styles.js +20 -17
  3. package/dist/components/bottom-sheet/bottom-sheet.js +189 -319
  4. package/dist/components/bottom-sheet/bottom-sheet.styles.js +117 -114
  5. package/dist/components/canvas/canvas-base.d.ts +4 -1
  6. package/dist/components/canvas/canvas-base.d.ts.map +1 -1
  7. package/dist/components/canvas/canvas-base.js +51 -67
  8. package/dist/components/canvas/canvas-gradient.js +44 -69
  9. package/dist/components/canvas/canvas-image.js +112 -177
  10. package/dist/components/canvas/canvas-image.styles.js +23 -20
  11. package/dist/components/carousel-scroller/carousel-scroller.js +63 -87
  12. package/dist/components/carousel-scroller/carousel-scroller.styles.js +68 -65
  13. package/dist/components/color-palette/color-palette-utils.js +55 -104
  14. package/dist/components/color-palette/color-palette.js +250 -384
  15. package/dist/components/color-palette/color-palette.styles.js +92 -89
  16. package/dist/components/color-palette/component/color-palette-component.js +134 -188
  17. package/dist/components/color-palette/component/color-palette-component.styles.js +12 -9
  18. package/dist/components/color-palette/editor/color-palette-editor.js +413 -539
  19. package/dist/components/color-palette/editor/color-palette-editor.styles.js +149 -146
  20. package/dist/components/color-palette/editor/settings-item.js +32 -40
  21. package/dist/components/color-palette/editor/settings-item.styles.js +36 -33
  22. package/dist/components/color-palette/item/color-palette-item-edit.js +50 -84
  23. package/dist/components/color-palette/item/color-palette-item-edit.styles.js +53 -50
  24. package/dist/components/color-palette/item/color-palette-item.js +72 -107
  25. package/dist/components/color-palette/item/color-palette-item.styles.js +85 -82
  26. package/dist/components/color-palette/menu/color-palette-menu.js +162 -200
  27. package/dist/components/color-palette/menu/color-palette-menu.styles.js +51 -48
  28. package/dist/components/color-palette/menu/color-palette-reorder.js +76 -95
  29. package/dist/components/color-palette/menu/color-palette-reorder.styles.js +33 -30
  30. package/dist/components/draw-svg/draw-svg.js +35 -52
  31. package/dist/components/draw-svg/draw-svg.styles.js +41 -38
  32. package/dist/components/responsive-svg/responsive-svg.d.ts +2 -2
  33. package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -1
  34. package/dist/components/responsive-svg/responsive-svg.js +122 -174
  35. package/dist/components/responsive-svg/responsive-svg.styles.js +48 -45
  36. package/dist/components/tool-tip/tool-tip.d.ts +5 -1
  37. package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
  38. package/dist/components/tool-tip/tool-tip.js +64 -100
  39. package/dist/components/tool-tip/tool-tip.styles.js +60 -57
  40. package/dist/decorators/condCustomElement.js +8 -11
  41. package/dist/utils/EventEmitter.js +23 -23
  42. package/dist/utils/ResponsiveController.js +15 -18
  43. package/dist/utils/basicUtils.js +98 -146
  44. package/dist/utils/colorsea-wrapper.js +162 -166
  45. package/dist/utils/dragDropUtils.js +75 -119
  46. package/dist/utils/generateUtils.js +39 -73
  47. package/package.json +34 -64
  48. package/dist/components/absolute-container/absolute-container.stories.d.ts +0 -11
  49. package/dist/components/absolute-container/absolute-container.stories.d.ts.map +0 -1
  50. package/dist/components/absolute-container/absolute-container.stories.js +0 -64
  51. package/dist/components/absolute-container/index.d.ts +0 -2
  52. package/dist/components/absolute-container/index.d.ts.map +0 -1
  53. package/dist/components/absolute-container/index.js +0 -1
  54. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts +0 -17
  55. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map +0 -1
  56. package/dist/components/bottom-sheet/bottom-sheet.stories.js +0 -67
  57. package/dist/components/bottom-sheet/index.d.ts +0 -2
  58. package/dist/components/bottom-sheet/index.d.ts.map +0 -1
  59. package/dist/components/bottom-sheet/index.js +0 -1
  60. package/dist/components/canvas/canvas-base.stories.d.ts +0 -7
  61. package/dist/components/canvas/canvas-base.stories.d.ts.map +0 -1
  62. package/dist/components/canvas/canvas-base.stories.js +0 -24
  63. package/dist/components/canvas/canvas-gradient.stories.d.ts +0 -14
  64. package/dist/components/canvas/canvas-gradient.stories.d.ts.map +0 -1
  65. package/dist/components/canvas/canvas-gradient.stories.js +0 -46
  66. package/dist/components/canvas/canvas-image.stories.d.ts +0 -13
  67. package/dist/components/canvas/canvas-image.stories.d.ts.map +0 -1
  68. package/dist/components/canvas/canvas-image.stories.js +0 -49
  69. package/dist/components/canvas/index.d.ts +0 -3
  70. package/dist/components/canvas/index.d.ts.map +0 -1
  71. package/dist/components/canvas/index.js +0 -2
  72. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts +0 -13
  73. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map +0 -1
  74. package/dist/components/carousel-scroller/carousel-scroller.stories.js +0 -56
  75. package/dist/components/carousel-scroller/index.d.ts +0 -2
  76. package/dist/components/carousel-scroller/index.d.ts.map +0 -1
  77. package/dist/components/carousel-scroller/index.js +0 -1
  78. package/dist/components/color-palette/component/color-palette-component.stories.d.ts +0 -13
  79. package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map +0 -1
  80. package/dist/components/color-palette/component/color-palette-component.stories.js +0 -75
  81. package/dist/components/color-palette/component/index.d.ts +0 -2
  82. package/dist/components/color-palette/component/index.d.ts.map +0 -1
  83. package/dist/components/color-palette/component/index.js +0 -1
  84. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts +0 -18
  85. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map +0 -1
  86. package/dist/components/color-palette/editor/color-palette-editor.stories.js +0 -67
  87. package/dist/components/color-palette/editor/index.d.ts +0 -2
  88. package/dist/components/color-palette/editor/index.d.ts.map +0 -1
  89. package/dist/components/color-palette/editor/index.js +0 -1
  90. package/dist/components/color-palette/index.d.ts +0 -6
  91. package/dist/components/color-palette/index.d.ts.map +0 -1
  92. package/dist/components/color-palette/index.js +0 -5
  93. package/dist/components/color-palette/item/index.d.ts +0 -3
  94. package/dist/components/color-palette/item/index.d.ts.map +0 -1
  95. package/dist/components/color-palette/item/index.js +0 -2
  96. package/dist/components/color-palette/menu/index.d.ts +0 -3
  97. package/dist/components/color-palette/menu/index.d.ts.map +0 -1
  98. package/dist/components/color-palette/menu/index.js +0 -2
  99. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts +0 -33
  100. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map +0 -1
  101. package/dist/components/color-palette/storybook/color-palette-invalid.stories.js +0 -62
  102. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts +0 -52
  103. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts.map +0 -1
  104. package/dist/components/color-palette/storybook/color-palette-valid.stories.js +0 -268
  105. package/dist/components/color-palette/storybook/color-palette.stories.d.ts +0 -27
  106. package/dist/components/color-palette/storybook/color-palette.stories.d.ts.map +0 -1
  107. package/dist/components/color-palette/storybook/color-palette.stories.js +0 -129
  108. package/dist/components/draw-svg/draw-svg.stories.d.ts +0 -7
  109. package/dist/components/draw-svg/draw-svg.stories.d.ts.map +0 -1
  110. package/dist/components/draw-svg/draw-svg.stories.js +0 -61
  111. package/dist/components/draw-svg/index.d.ts +0 -2
  112. package/dist/components/draw-svg/index.d.ts.map +0 -1
  113. package/dist/components/draw-svg/index.js +0 -1
  114. package/dist/components/responsive-svg/index.d.ts +0 -2
  115. package/dist/components/responsive-svg/index.d.ts.map +0 -1
  116. package/dist/components/responsive-svg/index.js +0 -1
  117. package/dist/components/responsive-svg/responsive-svg.stories.d.ts +0 -26
  118. package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +0 -1
  119. package/dist/components/responsive-svg/responsive-svg.stories.js +0 -194
  120. package/dist/components/tool-tip/index.d.ts +0 -2
  121. package/dist/components/tool-tip/index.d.ts.map +0 -1
  122. package/dist/components/tool-tip/index.js +0 -1
  123. package/dist/components/tool-tip/tool-tip.stories.d.ts +0 -16
  124. package/dist/components/tool-tip/tool-tip.stories.d.ts.map +0 -1
  125. package/dist/components/tool-tip/tool-tip.stories.js +0 -62
  126. package/dist/decorators/index.d.ts +0 -2
  127. package/dist/decorators/index.d.ts.map +0 -1
  128. package/dist/decorators/index.js +0 -1
  129. package/dist/index.d.ts +0 -11
  130. package/dist/index.d.ts.map +0 -1
  131. package/dist/index.js +0 -10
  132. package/dist/utils/index.d.ts +0 -5
  133. package/dist/utils/index.d.ts.map +0 -1
  134. package/dist/utils/index.js +0 -4
  135. package/dist/utils/types.d.ts +0 -5
  136. package/dist/utils/types.d.ts.map +0 -1
  137. 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,3 +0,0 @@
1
- export { CanvasGradient } from './canvas-gradient.js';
2
- export { CanvasImage } from './canvas-image.js';
3
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export { CanvasGradient } from './canvas-gradient.js';
2
- export { CanvasImage } from './canvas-image.js';
@@ -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,2 +0,0 @@
1
- export { CarouselScroller } from "./carousel-scroller.js";
2
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export { ColorPaletteComponent } from './color-palette-component.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export { ColorPaletteEditor } from './color-palette-editor.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -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,3 +0,0 @@
1
- export { ColorPaletteItem } from './color-palette-item.js';
2
- export { ColorPaletteItemEdit } from './color-palette-item-edit.js';
3
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export { ColorPaletteItem } from './color-palette-item.js';
2
- export { ColorPaletteItemEdit } from './color-palette-item-edit.js';
@@ -1,3 +0,0 @@
1
- export { ColorPaletteMenu } from './color-palette-menu.js';
2
- export { ColorPaletteReorder } from './color-palette-reorder.js';
3
- //# sourceMappingURL=index.d.ts.map
@@ -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,2 +0,0 @@
1
- export { ColorPaletteMenu } from './color-palette-menu.js';
2
- export { ColorPaletteReorder } from './color-palette-reorder.js';
@@ -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
- };