@alegendstale/holly-components 2.0.3 → 2.0.5

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 (136) hide show
  1. package/custom-elements.json +6366 -0
  2. package/dist/components/absolute-container/absolute-container.js +79 -113
  3. package/dist/components/absolute-container/absolute-container.styles.js +20 -17
  4. package/dist/components/bottom-sheet/bottom-sheet.js +189 -319
  5. package/dist/components/bottom-sheet/bottom-sheet.styles.js +117 -114
  6. package/dist/components/canvas/canvas-base.d.ts +4 -1
  7. package/dist/components/canvas/canvas-base.d.ts.map +1 -1
  8. package/dist/components/canvas/canvas-base.js +51 -67
  9. package/dist/components/canvas/canvas-gradient.js +44 -69
  10. package/dist/components/canvas/canvas-image.js +112 -177
  11. package/dist/components/canvas/canvas-image.styles.js +23 -20
  12. package/dist/components/carousel-scroller/carousel-scroller.js +63 -87
  13. package/dist/components/carousel-scroller/carousel-scroller.styles.js +68 -65
  14. package/dist/components/color-palette/color-palette-utils.js +55 -104
  15. package/dist/components/color-palette/color-palette.js +250 -384
  16. package/dist/components/color-palette/color-palette.styles.js +92 -89
  17. package/dist/components/color-palette/component/color-palette-component.js +134 -188
  18. package/dist/components/color-palette/component/color-palette-component.styles.js +12 -9
  19. package/dist/components/color-palette/editor/color-palette-editor.js +413 -539
  20. package/dist/components/color-palette/editor/color-palette-editor.styles.js +149 -146
  21. package/dist/components/color-palette/editor/settings-item.js +32 -40
  22. package/dist/components/color-palette/editor/settings-item.styles.js +36 -33
  23. package/dist/components/color-palette/item/color-palette-item-edit.js +50 -84
  24. package/dist/components/color-palette/item/color-palette-item-edit.styles.js +53 -50
  25. package/dist/components/color-palette/item/color-palette-item.js +72 -107
  26. package/dist/components/color-palette/item/color-palette-item.styles.js +85 -82
  27. package/dist/components/color-palette/menu/color-palette-menu.js +162 -200
  28. package/dist/components/color-palette/menu/color-palette-menu.styles.js +51 -48
  29. package/dist/components/color-palette/menu/color-palette-reorder.js +76 -95
  30. package/dist/components/color-palette/menu/color-palette-reorder.styles.js +33 -30
  31. package/dist/components/draw-svg/draw-svg.js +35 -52
  32. package/dist/components/draw-svg/draw-svg.styles.js +41 -38
  33. package/dist/components/responsive-svg/responsive-svg.js +122 -174
  34. package/dist/components/responsive-svg/responsive-svg.styles.js +48 -45
  35. package/dist/components/tool-tip/tool-tip.d.ts +5 -1
  36. package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
  37. package/dist/components/tool-tip/tool-tip.js +64 -100
  38. package/dist/components/tool-tip/tool-tip.styles.js +60 -57
  39. package/dist/decorators/condCustomElement.js +8 -11
  40. package/dist/utils/EventEmitter.js +23 -23
  41. package/dist/utils/ResponsiveController.js +15 -18
  42. package/dist/utils/basicUtils.js +98 -146
  43. package/dist/utils/colorsea-wrapper.js +162 -166
  44. package/dist/utils/dragDropUtils.js +75 -119
  45. package/dist/utils/generateUtils.js +39 -73
  46. package/package.json +43 -60
  47. package/dist/components/absolute-container/absolute-container.stories.d.ts +0 -11
  48. package/dist/components/absolute-container/absolute-container.stories.d.ts.map +0 -1
  49. package/dist/components/absolute-container/absolute-container.stories.js +0 -64
  50. package/dist/components/absolute-container/index.d.ts +0 -2
  51. package/dist/components/absolute-container/index.d.ts.map +0 -1
  52. package/dist/components/absolute-container/index.js +0 -1
  53. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts +0 -17
  54. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map +0 -1
  55. package/dist/components/bottom-sheet/bottom-sheet.stories.js +0 -67
  56. package/dist/components/bottom-sheet/index.d.ts +0 -2
  57. package/dist/components/bottom-sheet/index.d.ts.map +0 -1
  58. package/dist/components/bottom-sheet/index.js +0 -1
  59. package/dist/components/canvas/canvas-base.stories.d.ts +0 -7
  60. package/dist/components/canvas/canvas-base.stories.d.ts.map +0 -1
  61. package/dist/components/canvas/canvas-base.stories.js +0 -24
  62. package/dist/components/canvas/canvas-gradient.stories.d.ts +0 -14
  63. package/dist/components/canvas/canvas-gradient.stories.d.ts.map +0 -1
  64. package/dist/components/canvas/canvas-gradient.stories.js +0 -46
  65. package/dist/components/canvas/canvas-image.stories.d.ts +0 -13
  66. package/dist/components/canvas/canvas-image.stories.d.ts.map +0 -1
  67. package/dist/components/canvas/canvas-image.stories.js +0 -49
  68. package/dist/components/canvas/index.d.ts +0 -3
  69. package/dist/components/canvas/index.d.ts.map +0 -1
  70. package/dist/components/canvas/index.js +0 -2
  71. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts +0 -13
  72. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map +0 -1
  73. package/dist/components/carousel-scroller/carousel-scroller.stories.js +0 -56
  74. package/dist/components/carousel-scroller/index.d.ts +0 -2
  75. package/dist/components/carousel-scroller/index.d.ts.map +0 -1
  76. package/dist/components/carousel-scroller/index.js +0 -1
  77. package/dist/components/color-palette/component/color-palette-component.stories.d.ts +0 -13
  78. package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map +0 -1
  79. package/dist/components/color-palette/component/color-palette-component.stories.js +0 -75
  80. package/dist/components/color-palette/component/index.d.ts +0 -2
  81. package/dist/components/color-palette/component/index.d.ts.map +0 -1
  82. package/dist/components/color-palette/component/index.js +0 -1
  83. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts +0 -18
  84. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map +0 -1
  85. package/dist/components/color-palette/editor/color-palette-editor.stories.js +0 -67
  86. package/dist/components/color-palette/editor/index.d.ts +0 -2
  87. package/dist/components/color-palette/editor/index.d.ts.map +0 -1
  88. package/dist/components/color-palette/editor/index.js +0 -1
  89. package/dist/components/color-palette/index.d.ts +0 -6
  90. package/dist/components/color-palette/index.d.ts.map +0 -1
  91. package/dist/components/color-palette/index.js +0 -5
  92. package/dist/components/color-palette/item/index.d.ts +0 -3
  93. package/dist/components/color-palette/item/index.d.ts.map +0 -1
  94. package/dist/components/color-palette/item/index.js +0 -2
  95. package/dist/components/color-palette/menu/index.d.ts +0 -3
  96. package/dist/components/color-palette/menu/index.d.ts.map +0 -1
  97. package/dist/components/color-palette/menu/index.js +0 -2
  98. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts +0 -33
  99. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map +0 -1
  100. package/dist/components/color-palette/storybook/color-palette-invalid.stories.js +0 -62
  101. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts +0 -52
  102. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts.map +0 -1
  103. package/dist/components/color-palette/storybook/color-palette-valid.stories.js +0 -268
  104. package/dist/components/color-palette/storybook/color-palette.stories.d.ts +0 -27
  105. package/dist/components/color-palette/storybook/color-palette.stories.d.ts.map +0 -1
  106. package/dist/components/color-palette/storybook/color-palette.stories.js +0 -129
  107. package/dist/components/draw-svg/draw-svg.stories.d.ts +0 -7
  108. package/dist/components/draw-svg/draw-svg.stories.d.ts.map +0 -1
  109. package/dist/components/draw-svg/draw-svg.stories.js +0 -61
  110. package/dist/components/draw-svg/index.d.ts +0 -2
  111. package/dist/components/draw-svg/index.d.ts.map +0 -1
  112. package/dist/components/draw-svg/index.js +0 -1
  113. package/dist/components/responsive-svg/index.d.ts +0 -2
  114. package/dist/components/responsive-svg/index.d.ts.map +0 -1
  115. package/dist/components/responsive-svg/index.js +0 -1
  116. package/dist/components/responsive-svg/responsive-svg.stories.d.ts +0 -26
  117. package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +0 -1
  118. package/dist/components/responsive-svg/responsive-svg.stories.js +0 -194
  119. package/dist/components/tool-tip/index.d.ts +0 -2
  120. package/dist/components/tool-tip/index.d.ts.map +0 -1
  121. package/dist/components/tool-tip/index.js +0 -1
  122. package/dist/components/tool-tip/tool-tip.stories.d.ts +0 -16
  123. package/dist/components/tool-tip/tool-tip.stories.d.ts.map +0 -1
  124. package/dist/components/tool-tip/tool-tip.stories.js +0 -62
  125. package/dist/decorators/index.d.ts +0 -2
  126. package/dist/decorators/index.d.ts.map +0 -1
  127. package/dist/decorators/index.js +0 -1
  128. package/dist/index.d.ts +0 -11
  129. package/dist/index.d.ts.map +0 -1
  130. package/dist/index.js +0 -10
  131. package/dist/utils/index.d.ts +0 -5
  132. package/dist/utils/index.d.ts.map +0 -1
  133. package/dist/utils/index.js +0 -4
  134. package/dist/utils/types.d.ts +0 -5
  135. package/dist/utils/types.d.ts.map +0 -1
  136. package/dist/utils/types.js +0 -1
@@ -1,194 +0,0 @@
1
- import { html, svg } from 'lit';
2
- import { styleMap } from 'lit/directives/style-map.js';
3
- import ResponsiveSVGRaw from '../../assets/ResponsiveSVG.svg?raw';
4
- import ServicesBottomRaw from '../../assets/services-bottom.svg?raw';
5
- import GotLeakz from '../../assets/GotLeakz.svg?raw';
6
- import ComicBackground from '../../assets/comic-background.svg?raw';
7
- import { preserveAspectRatioOptions } from './responsive-svg.js';
8
- import { expect } from 'storybook/test';
9
- const argTypes = {
10
- fontSize: {
11
- control: {
12
- type: 'number',
13
- step: 8,
14
- },
15
- description: 'Set the font size in pixels the SVG will scale to (provided autofit is not being used)',
16
- table: {
17
- defaultValue: { summary: '128' },
18
- },
19
- },
20
- stroke: {
21
- control: {
22
- type: 'color',
23
- presetColors: ['rebeccapurple', 'black'],
24
- },
25
- description: 'Set the Path stroke color',
26
- table: {
27
- defaultValue: { summary: 'rebeccapurple' },
28
- },
29
- },
30
- fill: {
31
- control: {
32
- type: 'color',
33
- presetColors: ['rebeccapurple', 'black'],
34
- },
35
- description: 'Set the SVG and Path fill color',
36
- table: {
37
- defaultValue: { summary: 'black' },
38
- },
39
- },
40
- autofit: { control: 'boolean' },
41
- svgColors: { control: 'boolean' },
42
- preserveAspectRatio: {
43
- control: 'select',
44
- options: preserveAspectRatioOptions,
45
- },
46
- viewBox: { control: false },
47
- '--svg-height': {
48
- control: 'text',
49
- table: {
50
- defaultValue: { summary: '0em' },
51
- },
52
- },
53
- '--svg-width': {
54
- control: 'text',
55
- table: {
56
- defaultValue: { summary: '0em' },
57
- },
58
- },
59
- '--scale': {
60
- control: 'number',
61
- description: 'Scale of the SVG',
62
- table: {
63
- defaultValue: { summary: '1' },
64
- },
65
- },
66
- '--svg-height-fallback': { control: false },
67
- '--svg-width-fallback': { control: false },
68
- __svg: { control: false },
69
- __path: { control: false },
70
- };
71
- const meta = {
72
- title: 'SVG/Responsive SVG',
73
- tags: ['autodocs'],
74
- component: 'responsive-svg',
75
- argTypes,
76
- };
77
- export default meta;
78
- const template = {
79
- render: ({ fontSize, stroke, fill, autofit, svgColors, svg, preserveAspectRatio, "--svg-height": height = '0em', "--svg-width": width = '0em', "--scale": scale }) => {
80
- const styles = {
81
- 'font-size': `${fontSize}px`,
82
- stroke,
83
- fill,
84
- '--svg-height': height !== '0em' ? height : null,
85
- '--svg-width': width !== '0em' ? width : null,
86
- '--scale': scale
87
- };
88
- return html `
89
- <responsive-svg
90
- ?autofit=${autofit}
91
- ?svgColors=${svgColors}
92
- .preserveAspectRatio=${preserveAspectRatio}
93
- .svg=${svg}
94
- style=${styleMap(styles)}
95
- >
96
- </responsive-svg>
97
- `;
98
- },
99
- };
100
- export const SVG = {
101
- ...template,
102
- args: {
103
- fontSize: 128,
104
- stroke: 'rebeccapurple',
105
- fill: 'black',
106
- autofit: false,
107
- svgColors: false,
108
- svg: ResponsiveSVGRaw,
109
- "--scale": 1
110
- },
111
- };
112
- export const TemplateResult2 = {
113
- ...template,
114
- args: {
115
- fontSize: 128,
116
- stroke: 'rebeccapurple',
117
- fill: 'black',
118
- autofit: false,
119
- svgColors: false,
120
- svg: svg `<path d="M 30 50 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"/>`,
121
- "--svg-height": '120em',
122
- "--svg-width": '120em'
123
- }
124
- };
125
- export const ServicesBottom = {
126
- ...template,
127
- args: {
128
- fontSize: 128,
129
- stroke: 'rebeccapurple',
130
- fill: 'black',
131
- autofit: false,
132
- svgColors: false,
133
- svg: ServicesBottomRaw
134
- }
135
- };
136
- export const EmptyString = {
137
- ...template,
138
- args: {
139
- fontSize: 128,
140
- stroke: 'rebeccapurple',
141
- fill: 'black',
142
- autofit: false,
143
- svgColors: false,
144
- svg: ''
145
- },
146
- play: async ({ canvasElement }) => {
147
- const component = canvasElement.querySelector('responsive-svg');
148
- const svgElement = component?.querySelector('svg');
149
- // Check if element exists
150
- await expect(component).not.toBeNull();
151
- // Make sure element didn't render an SVG
152
- await expect(svgElement).toBeNull();
153
- }
154
- };
155
- export const Invalid = {
156
- ...template,
157
- args: {
158
- fontSize: 128,
159
- stroke: 'rebeccapurple',
160
- fill: 'black',
161
- autofit: false,
162
- svgColors: false,
163
- svg: 'test'
164
- },
165
- play: async ({ canvasElement }) => {
166
- const component = canvasElement.querySelector('responsive-svg');
167
- const svgElement = component?.querySelector('svg');
168
- // Check if element exists
169
- await expect(component).not.toBeNull();
170
- // Make sure element didn't render an SVG
171
- await expect(svgElement).toBeNull();
172
- }
173
- };
174
- export const SVGWithoutViewBox = {
175
- ...template,
176
- args: {
177
- fontSize: 128,
178
- stroke: 'rebeccapurple',
179
- fill: 'black',
180
- autofit: false,
181
- svgColors: false,
182
- svg: GotLeakz
183
- },
184
- };
185
- export const SVGWithoutWidthHeight = {
186
- ...template,
187
- args: {
188
- fontSize: 128,
189
- autofit: false,
190
- svgColors: true,
191
- svg: ComicBackground,
192
- preserveAspectRatio: 'none'
193
- },
194
- };
@@ -1,2 +0,0 @@
1
- export { ToolTip } from './tool-tip.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
@@ -1 +0,0 @@
1
- export { ToolTip } from './tool-tip.js';
@@ -1,16 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/web-components-vite';
2
- import { TriggerTypes } from './tool-tip.js';
3
- declare const meta: Meta;
4
- export default meta;
5
- type Props = {
6
- text: string;
7
- trigger: TriggerTypes;
8
- display: boolean;
9
- '--tooltip-x': string;
10
- '--tooltip-y': string;
11
- };
12
- type Story = StoryObj<Props>;
13
- export declare const Default: Story;
14
- export declare const Hover: Story;
15
- export declare const Click: Story;
16
- //# sourceMappingURL=tool-tip.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tool-tip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAgB,YAAY,EAAE,MAAM,eAAe,CAAC;AAc3D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAA;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAsB7B,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}
@@ -1,62 +0,0 @@
1
- import { html } from 'lit';
2
- import { triggerTypes } from './tool-tip.js';
3
- import { styleMap } from 'lit/directives/style-map.js';
4
- const argTypes = {
5
- text: { control: 'text' },
6
- trigger: {
7
- control: 'select',
8
- options: triggerTypes,
9
- },
10
- display: { control: 'boolean' },
11
- '--tooltip-x': { control: 'text' },
12
- '--tooltip-y': { control: 'text' }
13
- };
14
- const meta = {
15
- title: 'Tool Tip',
16
- tags: ['autodocs'],
17
- component: 'tool-tip',
18
- argTypes
19
- };
20
- export default meta;
21
- const template = {
22
- render: ({ text, trigger, display, "--tooltip-x": toolTipX, "--tooltip-y": toolTipY }) => {
23
- const styles = {
24
- '--tooltip-x': toolTipX,
25
- '--tooltip-y': toolTipY
26
- };
27
- return html `
28
- <tool-tip
29
- text=${text}
30
- trigger=${trigger}
31
- ?display=${display}
32
- style=${styleMap(styles)}
33
- >
34
- <button>${trigger} me</button>
35
- </tool-tip>
36
- `;
37
- },
38
- };
39
- export const Default = {
40
- ...template,
41
- args: {
42
- text: 'Default Story',
43
- trigger: 'manual',
44
- display: true
45
- }
46
- };
47
- export const Hover = {
48
- ...template,
49
- args: {
50
- text: 'hovered tooltip',
51
- trigger: 'hover',
52
- display: true
53
- }
54
- };
55
- export const Click = {
56
- ...template,
57
- args: {
58
- text: 'clicked tooltip',
59
- trigger: 'click',
60
- display: false
61
- }
62
- };
@@ -1,2 +0,0 @@
1
- export { condCustomElement } from './condCustomElement.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/decorators/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1 +0,0 @@
1
- export { condCustomElement } from './condCustomElement.js';
package/dist/index.d.ts DELETED
@@ -1,11 +0,0 @@
1
- export * from './components/absolute-container/index.js';
2
- export * from './components/bottom-sheet/index.js';
3
- export * from './components/canvas/index.js';
4
- export * from './components/carousel-scroller/index.js';
5
- export * from './components/color-palette/index.js';
6
- export * from './components/responsive-svg/index.js';
7
- export * from './components/draw-svg/index.js';
8
- export * from './components/tool-tip/index.js';
9
- export * from './utils/index.js';
10
- export * from './decorators/index.js';
11
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}
package/dist/index.js DELETED
@@ -1,10 +0,0 @@
1
- export * from './components/absolute-container/index.js';
2
- export * from './components/bottom-sheet/index.js';
3
- export * from './components/canvas/index.js';
4
- export * from './components/carousel-scroller/index.js';
5
- export * from './components/color-palette/index.js';
6
- export * from './components/responsive-svg/index.js';
7
- export * from './components/draw-svg/index.js';
8
- export * from './components/tool-tip/index.js';
9
- export * from './utils/index.js';
10
- export * from './decorators/index.js';
@@ -1,5 +0,0 @@
1
- export * from './basicUtils.js';
2
- export * from './EventEmitter.js';
3
- export * from './generateUtils.js';
4
- export { ResponsiveController } from './ResponsiveController.js';
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
@@ -1,4 +0,0 @@
1
- export * from './basicUtils.js';
2
- export * from './EventEmitter.js';
3
- export * from './generateUtils.js';
4
- export { ResponsiveController } from './ResponsiveController.js';
@@ -1,5 +0,0 @@
1
- export type client = {
2
- x: number;
3
- y: number;
4
- };
5
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACT,CAAA"}
@@ -1 +0,0 @@
1
- export {};