@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.
Files changed (135) 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.js +122 -174
  33. package/dist/components/responsive-svg/responsive-svg.styles.js +48 -45
  34. package/dist/components/tool-tip/tool-tip.d.ts +5 -1
  35. package/dist/components/tool-tip/tool-tip.d.ts.map +1 -1
  36. package/dist/components/tool-tip/tool-tip.js +64 -100
  37. package/dist/components/tool-tip/tool-tip.styles.js +60 -57
  38. package/dist/decorators/condCustomElement.js +8 -11
  39. package/dist/utils/EventEmitter.js +23 -23
  40. package/dist/utils/ResponsiveController.js +15 -18
  41. package/dist/utils/basicUtils.js +98 -146
  42. package/dist/utils/colorsea-wrapper.js +162 -166
  43. package/dist/utils/dragDropUtils.js +75 -119
  44. package/dist/utils/generateUtils.js +39 -73
  45. package/package.json +29 -60
  46. package/dist/components/absolute-container/absolute-container.stories.d.ts +0 -11
  47. package/dist/components/absolute-container/absolute-container.stories.d.ts.map +0 -1
  48. package/dist/components/absolute-container/absolute-container.stories.js +0 -64
  49. package/dist/components/absolute-container/index.d.ts +0 -2
  50. package/dist/components/absolute-container/index.d.ts.map +0 -1
  51. package/dist/components/absolute-container/index.js +0 -1
  52. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts +0 -17
  53. package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map +0 -1
  54. package/dist/components/bottom-sheet/bottom-sheet.stories.js +0 -67
  55. package/dist/components/bottom-sheet/index.d.ts +0 -2
  56. package/dist/components/bottom-sheet/index.d.ts.map +0 -1
  57. package/dist/components/bottom-sheet/index.js +0 -1
  58. package/dist/components/canvas/canvas-base.stories.d.ts +0 -7
  59. package/dist/components/canvas/canvas-base.stories.d.ts.map +0 -1
  60. package/dist/components/canvas/canvas-base.stories.js +0 -24
  61. package/dist/components/canvas/canvas-gradient.stories.d.ts +0 -14
  62. package/dist/components/canvas/canvas-gradient.stories.d.ts.map +0 -1
  63. package/dist/components/canvas/canvas-gradient.stories.js +0 -46
  64. package/dist/components/canvas/canvas-image.stories.d.ts +0 -13
  65. package/dist/components/canvas/canvas-image.stories.d.ts.map +0 -1
  66. package/dist/components/canvas/canvas-image.stories.js +0 -49
  67. package/dist/components/canvas/index.d.ts +0 -3
  68. package/dist/components/canvas/index.d.ts.map +0 -1
  69. package/dist/components/canvas/index.js +0 -2
  70. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts +0 -13
  71. package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map +0 -1
  72. package/dist/components/carousel-scroller/carousel-scroller.stories.js +0 -56
  73. package/dist/components/carousel-scroller/index.d.ts +0 -2
  74. package/dist/components/carousel-scroller/index.d.ts.map +0 -1
  75. package/dist/components/carousel-scroller/index.js +0 -1
  76. package/dist/components/color-palette/component/color-palette-component.stories.d.ts +0 -13
  77. package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map +0 -1
  78. package/dist/components/color-palette/component/color-palette-component.stories.js +0 -75
  79. package/dist/components/color-palette/component/index.d.ts +0 -2
  80. package/dist/components/color-palette/component/index.d.ts.map +0 -1
  81. package/dist/components/color-palette/component/index.js +0 -1
  82. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts +0 -18
  83. package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map +0 -1
  84. package/dist/components/color-palette/editor/color-palette-editor.stories.js +0 -67
  85. package/dist/components/color-palette/editor/index.d.ts +0 -2
  86. package/dist/components/color-palette/editor/index.d.ts.map +0 -1
  87. package/dist/components/color-palette/editor/index.js +0 -1
  88. package/dist/components/color-palette/index.d.ts +0 -6
  89. package/dist/components/color-palette/index.d.ts.map +0 -1
  90. package/dist/components/color-palette/index.js +0 -5
  91. package/dist/components/color-palette/item/index.d.ts +0 -3
  92. package/dist/components/color-palette/item/index.d.ts.map +0 -1
  93. package/dist/components/color-palette/item/index.js +0 -2
  94. package/dist/components/color-palette/menu/index.d.ts +0 -3
  95. package/dist/components/color-palette/menu/index.d.ts.map +0 -1
  96. package/dist/components/color-palette/menu/index.js +0 -2
  97. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts +0 -33
  98. package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map +0 -1
  99. package/dist/components/color-palette/storybook/color-palette-invalid.stories.js +0 -62
  100. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts +0 -52
  101. package/dist/components/color-palette/storybook/color-palette-valid.stories.d.ts.map +0 -1
  102. package/dist/components/color-palette/storybook/color-palette-valid.stories.js +0 -268
  103. package/dist/components/color-palette/storybook/color-palette.stories.d.ts +0 -27
  104. package/dist/components/color-palette/storybook/color-palette.stories.d.ts.map +0 -1
  105. package/dist/components/color-palette/storybook/color-palette.stories.js +0 -129
  106. package/dist/components/draw-svg/draw-svg.stories.d.ts +0 -7
  107. package/dist/components/draw-svg/draw-svg.stories.d.ts.map +0 -1
  108. package/dist/components/draw-svg/draw-svg.stories.js +0 -61
  109. package/dist/components/draw-svg/index.d.ts +0 -2
  110. package/dist/components/draw-svg/index.d.ts.map +0 -1
  111. package/dist/components/draw-svg/index.js +0 -1
  112. package/dist/components/responsive-svg/index.d.ts +0 -2
  113. package/dist/components/responsive-svg/index.d.ts.map +0 -1
  114. package/dist/components/responsive-svg/index.js +0 -1
  115. package/dist/components/responsive-svg/responsive-svg.stories.d.ts +0 -26
  116. package/dist/components/responsive-svg/responsive-svg.stories.d.ts.map +0 -1
  117. package/dist/components/responsive-svg/responsive-svg.stories.js +0 -194
  118. package/dist/components/tool-tip/index.d.ts +0 -2
  119. package/dist/components/tool-tip/index.d.ts.map +0 -1
  120. package/dist/components/tool-tip/index.js +0 -1
  121. package/dist/components/tool-tip/tool-tip.stories.d.ts +0 -16
  122. package/dist/components/tool-tip/tool-tip.stories.d.ts.map +0 -1
  123. package/dist/components/tool-tip/tool-tip.stories.js +0 -62
  124. package/dist/decorators/index.d.ts +0 -2
  125. package/dist/decorators/index.d.ts.map +0 -1
  126. package/dist/decorators/index.js +0 -1
  127. package/dist/index.d.ts +0 -11
  128. package/dist/index.d.ts.map +0 -1
  129. package/dist/index.js +0 -10
  130. package/dist/utils/index.d.ts +0 -5
  131. package/dist/utils/index.d.ts.map +0 -1
  132. package/dist/utils/index.js +0 -4
  133. package/dist/utils/types.d.ts +0 -5
  134. package/dist/utils/types.d.ts.map +0 -1
  135. package/dist/utils/types.js +0 -1
@@ -1,121 +1,77 @@
1
- export class DragDrop {
2
- constructor(dropzones, draggables, onDrop) {
3
- this.dropzones = dropzones;
4
- this.draggables = draggables;
5
- this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
6
- this.onDrop = onDrop;
7
- this.load();
8
- }
9
- dragStart(draggable, e) {
10
- draggable.classList.toggle('is-dragging', true);
11
- }
12
- dragOver(dropzone, e) {
13
- if (e.dataTransfer) {
14
- const hasElement = Array.from(e.dataTransfer.items).some((item) => {
15
- return item.kind !== 'element';
16
- });
17
- // Return early if element being dragged is not an element
18
- if (hasElement)
19
- return;
20
- }
21
- e.preventDefault();
22
- this.result.beforeElement = this.getDragBeforeElement(e.clientX);
23
- this.result.insertedElement = this.getDraggingElement();
24
- this.result.afterElement = this.getDragAfterElement(e.clientX);
25
- const insertedIndex = this.draggables.indexOf(this.result.insertedElement);
26
- // If at the end of draggables
27
- if (this.result.afterElement === null) {
28
- // Append element
29
- dropzone.appendChild(this.result.insertedElement);
30
- // Remove element from order
31
- this.result.order.splice(insertedIndex, 1);
32
- // Add to end of order
33
- this.result.order.push(this.result.insertedElement);
34
- }
35
- else {
36
- // Place element between
37
- dropzone.insertBefore(this.result.insertedElement, this.result.afterElement);
38
- // Remove element from order
39
- this.result.order.splice(insertedIndex, 1);
40
- // Get the after index, post element removal
41
- const afterIndex = this.draggables.indexOf(this.result.afterElement);
42
- // Insert the element before the after index
43
- this.result.order.splice(afterIndex, 0, this.result.insertedElement);
44
- }
45
- }
46
- dragEnd(draggable, e) {
47
- draggable.classList.toggle('is-dragging', false);
48
- this.onDrop(e, this.result);
49
- this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
50
- }
51
- load() {
52
- for (let draggable of this.draggables) {
53
- // Important, so that all types of elements can be dragged, including divs & spans
54
- draggable.setAttribute('draggable', "true");
55
- draggable.addEventListener("dragstart", (e) => this.dragStart(draggable, e));
56
- draggable.addEventListener("dragend", (e) => this.dragEnd(draggable, e));
57
- }
58
- for (let dropzone of this.dropzones) {
59
- dropzone.addEventListener("dragover", (e) => this.dragOver(dropzone, e));
60
- }
61
- }
62
- unload() {
63
- for (let draggable of this.draggables) {
64
- draggable.removeEventListener('dragstart', (e) => this.dragStart(draggable, e));
65
- draggable.removeEventListener('dragend', (e) => this.dragEnd(draggable, e));
66
- }
67
- for (let dropzone of this.dropzones) {
68
- dropzone.removeEventListener('dragover', (e) => this.dragOver(dropzone, e));
69
- }
70
- }
71
- /**
72
- * @returns The element which is being dragged
73
- */
74
- getDraggingElement() {
75
- return this.draggables.filter((draggable) => draggable.classList.contains('is-dragging'))[0];
76
- }
77
- /**
78
- * @returns All draggable elements not being dragged
79
- */
80
- getDraggableElements() {
81
- return this.draggables.filter((draggable) => !draggable.classList.contains('is-dragging'));
82
- }
83
- /**
84
- * Gets the closest element before the dragged element
85
- */
86
- getDragBeforeElement(x) {
87
- return this.getDraggableElements().reduce((closest, child) => {
88
- const rect = child.getBoundingClientRect();
89
- const leftPosition = x - rect.left;
90
- const halfChildWidth = rect.width / 2;
91
- const offset = leftPosition - halfChildWidth;
92
- // Return the closest element to the right of the cursor
93
- if (offset > 0 && offset < closest.offset)
94
- return { offset, element: child };
95
- else
96
- return closest;
97
- },
98
- // Initial closest value
99
- { offset: Number.POSITIVE_INFINITY, element: null })
100
- .element;
101
- }
102
- /**
103
- * Gets the closest element after the dragged element
104
- */
105
- getDragAfterElement(x) {
106
- return this.getDraggableElements().reduce((closest, child) => {
107
- const rect = child.getBoundingClientRect();
108
- const leftPosition = x - rect.left;
109
- const halfChildWidth = rect.width / 2;
110
- const offset = leftPosition - halfChildWidth;
111
- // Return the closest element to the left of the cursor
112
- if (offset < 0 && offset > closest.offset)
113
- return { offset, element: child };
114
- else
115
- return closest;
116
- },
117
- // Initial closest value
118
- { offset: Number.NEGATIVE_INFINITY, element: null })
119
- .element;
1
+ class g {
2
+ constructor(e, t, r) {
3
+ this.dropzones = e, this.draggables = t, this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables }, this.onDrop = r, this.load();
4
+ }
5
+ dragStart(e, t) {
6
+ e.classList.toggle("is-dragging", !0);
7
+ }
8
+ dragOver(e, t) {
9
+ if (t.dataTransfer && Array.from(t.dataTransfer.items).some((l) => l.kind !== "element"))
10
+ return;
11
+ t.preventDefault(), this.result.beforeElement = this.getDragBeforeElement(t.clientX), this.result.insertedElement = this.getDraggingElement(), this.result.afterElement = this.getDragAfterElement(t.clientX);
12
+ const r = this.draggables.indexOf(this.result.insertedElement);
13
+ if (this.result.afterElement === null)
14
+ e.appendChild(this.result.insertedElement), this.result.order.splice(r, 1), this.result.order.push(this.result.insertedElement);
15
+ else {
16
+ e.insertBefore(this.result.insertedElement, this.result.afterElement), this.result.order.splice(r, 1);
17
+ const s = this.draggables.indexOf(this.result.afterElement);
18
+ this.result.order.splice(s, 0, this.result.insertedElement);
120
19
  }
20
+ }
21
+ dragEnd(e, t) {
22
+ e.classList.toggle("is-dragging", !1), this.onDrop(t, this.result), this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
23
+ }
24
+ load() {
25
+ for (let e of this.draggables)
26
+ e.setAttribute("draggable", "true"), e.addEventListener("dragstart", (t) => this.dragStart(e, t)), e.addEventListener("dragend", (t) => this.dragEnd(e, t));
27
+ for (let e of this.dropzones)
28
+ e.addEventListener("dragover", (t) => this.dragOver(e, t));
29
+ }
30
+ unload() {
31
+ for (let e of this.draggables)
32
+ e.removeEventListener("dragstart", (t) => this.dragStart(e, t)), e.removeEventListener("dragend", (t) => this.dragEnd(e, t));
33
+ for (let e of this.dropzones)
34
+ e.removeEventListener("dragover", (t) => this.dragOver(e, t));
35
+ }
36
+ /**
37
+ * @returns The element which is being dragged
38
+ */
39
+ getDraggingElement() {
40
+ return this.draggables.filter((e) => e.classList.contains("is-dragging"))[0];
41
+ }
42
+ /**
43
+ * @returns All draggable elements not being dragged
44
+ */
45
+ getDraggableElements() {
46
+ return this.draggables.filter((e) => !e.classList.contains("is-dragging"));
47
+ }
48
+ /**
49
+ * Gets the closest element before the dragged element
50
+ */
51
+ getDragBeforeElement(e) {
52
+ return this.getDraggableElements().reduce(
53
+ (t, r) => {
54
+ const s = r.getBoundingClientRect(), l = e - s.left, i = s.width / 2, n = l - i;
55
+ return n > 0 && n < t.offset ? { offset: n, element: r } : t;
56
+ },
57
+ // Initial closest value
58
+ { offset: Number.POSITIVE_INFINITY, element: null }
59
+ ).element;
60
+ }
61
+ /**
62
+ * Gets the closest element after the dragged element
63
+ */
64
+ getDragAfterElement(e) {
65
+ return this.getDraggableElements().reduce(
66
+ (t, r) => {
67
+ const s = r.getBoundingClientRect(), l = e - s.left, i = s.width / 2, n = l - i;
68
+ return n < 0 && n > t.offset ? { offset: n, element: r } : t;
69
+ },
70
+ // Initial closest value
71
+ { offset: Number.NEGATIVE_INFINITY, element: null }
72
+ ).element;
73
+ }
121
74
  }
75
+ export {
76
+ g as DragDrop
77
+ };
@@ -1,74 +1,40 @@
1
- import colorsea from '../utils/colorsea-wrapper.js';
2
- export var Combination;
3
- (function (Combination) {
4
- Combination["Complimentary"] = "Complimentary";
5
- Combination["Monochromatic"] = "Monochromatic";
6
- Combination["Analogous"] = "Analogous";
7
- Combination["Triadic"] = "Triadic";
8
- Combination["Tetradic"] = "Tetradic";
9
- Combination["Random"] = "Random";
10
- })(Combination || (Combination = {}));
11
- /**
12
- * Generate colors based on color theory
13
- * @param baseColor Initial color to generate the rest from
14
- * @param combination The type of color theory combination to use
15
- * @param settings The settings for the palette
16
- * @returns Generated colors & settings
17
- */
18
- export function generateColors(combination, optional = { baseColor: colorsea.random() }) {
19
- let { baseColor, settings } = optional;
20
- // Never called because baseColor is set by default in parameters
21
- if (!baseColor)
22
- baseColor = colorsea.random();
23
- let colors = [];
24
- switch (combination) {
25
- case Combination.Complimentary:
26
- colors = [baseColor.hex(), baseColor.complement().hex()];
27
- if (settings)
28
- settings.aliases = ['Base', 'Complimentary Color'];
29
- break;
30
- case Combination.Monochromatic:
31
- const lightest = baseColor.lighten(20);
32
- const lighter = baseColor.lighten(10);
33
- const darker = baseColor.darken(10);
34
- const darkest = baseColor.darken(20);
35
- colors = [lightest.hex(), lighter.hex(), baseColor.hex(), darker.hex(), darkest.hex()];
36
- if (settings)
37
- settings.aliases = ['Lightest', 'Lighter', 'Base', 'Darker', 'Darkest'];
38
- break;
39
- case Combination.Analogous:
40
- const east = baseColor.adjustHue(-25);
41
- const west = baseColor.adjustHue(25);
42
- colors = [east.hex(), baseColor.hex(), west.hex()];
43
- if (settings)
44
- settings.aliases = ['Analogous East', 'Base', 'Analogous West'];
45
- break;
46
- case Combination.Triadic:
47
- const hex120 = baseColor.spin(120);
48
- const hex240 = baseColor.spin(240);
49
- colors = [baseColor.hex(), hex120.hex(), hex240.hex()];
50
- if (settings)
51
- settings.aliases = ['Triadic First', 'Base', 'Triadic Third'];
52
- break;
53
- case Combination.Tetradic:
54
- const hex90 = baseColor.spin(90);
55
- const hex180 = baseColor.spin(180);
56
- const hex270 = baseColor.spin(270);
57
- colors = [baseColor.hex(), hex90.hex(), hex180.hex(), hex270.hex()];
58
- if (settings)
59
- settings.aliases = ['Base', 'Tetradic Second', 'Tetradic Third', 'Tetradic Fourth'];
60
- break;
61
- case Combination.Random:
62
- // Clamp to a minimum value of 2
63
- const randomNumber = Math.max(Math.round(Math.random() * 10), 2);
64
- let randomColors = [];
65
- for (let i = 0; i < randomNumber; i++) {
66
- randomColors.push(colorsea.random().hex());
67
- }
68
- colors = randomColors;
69
- if (settings)
70
- settings.aliases = [];
71
- break;
72
- }
73
- return { colors, settings };
1
+ import o from "./colorsea-wrapper.js";
2
+ var M = /* @__PURE__ */ ((s) => (s.Complimentary = "Complimentary", s.Monochromatic = "Monochromatic", s.Analogous = "Analogous", s.Triadic = "Triadic", s.Tetradic = "Tetradic", s.Random = "Random", s))(M || {});
3
+ function B(s, c = { baseColor: o.random() }) {
4
+ let { baseColor: e, settings: a } = c;
5
+ e || (e = o.random());
6
+ let r = [];
7
+ switch (s) {
8
+ case "Complimentary":
9
+ r = [e.hex(), e.complement().hex()], a && (a.aliases = ["Base", "Complimentary Color"]);
10
+ break;
11
+ case "Monochromatic":
12
+ const n = e.lighten(20), h = e.lighten(10), l = e.darken(10), d = e.darken(20);
13
+ r = [n.hex(), h.hex(), e.hex(), l.hex(), d.hex()], a && (a.aliases = ["Lightest", "Lighter", "Base", "Darker", "Darkest"]);
14
+ break;
15
+ case "Analogous":
16
+ const x = e.adjustHue(-25), m = e.adjustHue(25);
17
+ r = [x.hex(), e.hex(), m.hex()], a && (a.aliases = ["Analogous East", "Base", "Analogous West"]);
18
+ break;
19
+ case "Triadic":
20
+ const u = e.spin(120), g = e.spin(240);
21
+ r = [e.hex(), u.hex(), g.hex()], a && (a.aliases = ["Triadic First", "Base", "Triadic Third"]);
22
+ break;
23
+ case "Tetradic":
24
+ const p = e.spin(90), T = e.spin(180), k = e.spin(270);
25
+ r = [e.hex(), p.hex(), T.hex(), k.hex()], a && (a.aliases = ["Base", "Tetradic Second", "Tetradic Third", "Tetradic Fourth"]);
26
+ break;
27
+ case "Random":
28
+ const f = Math.max(Math.round(Math.random() * 10), 2);
29
+ let t = [];
30
+ for (let i = 0; i < f; i++)
31
+ t.push(o.random().hex());
32
+ r = t, a && (a.aliases = []);
33
+ break;
34
+ }
35
+ return { colors: r, settings: a };
74
36
  }
37
+ export {
38
+ M as Combination,
39
+ B as generateColors
40
+ };
package/package.json CHANGED
@@ -1,79 +1,47 @@
1
1
  {
2
2
  "private": false,
3
- "version": "2.0.3",
4
3
  "name": "@alegendstale/holly-components",
5
4
  "description": "Reusable UI components created using lit",
5
+ "version": "2.0.4",
6
+ "author": "ALegendsTale",
7
+ "license": "GPL-3.0",
8
+ "customElements": "custom-elements.json",
6
9
  "type": "module",
7
- "main": "./dist/index.js",
8
- "module": "./dist/index.js",
9
- "types": "./dist/index.d.ts",
10
10
  "exports": {
11
- "./color-palette/utils": {
12
- "import": "./dist/components/color-palette/color-palette-utils.js",
13
- "types": "./dist/components/color-palette/color-palette-utils.d.ts"
14
- },
15
- "./utils": {
16
- "import": "./dist/utils/index.js",
17
- "types": "./dist/utils/index.d.ts"
18
- },
19
- "./absolute-container": {
20
- "import": "./dist/components/absolute-container/index.js",
21
- "types": "./dist/components/absolute-container/index.d.ts"
22
- },
23
- "./bottom-sheet": {
24
- "import": "./dist/components/bottom-sheet/index.js",
25
- "types": "./dist/components/bottom-sheet/index.d.ts"
26
- },
27
- "./canvas": {
28
- "import": "./dist/components/canvas/index.js",
29
- "types": "./dist/components/canvas/index.d.ts"
30
- },
31
- "./carousel-scroller": {
32
- "import": "./dist/components/carousel-scroller/index.js",
33
- "types": "./dist/components/carousel-scroller/index.d.ts"
11
+ "./components/*.js": {
12
+ "types": "./dist/components/*.d.ts",
13
+ "import": "./dist/components/*.js"
34
14
  },
35
- "./color-palette": {
36
- "import": "./dist/components/color-palette/index.js",
37
- "types": "./dist/components/color-palette/index.d.ts"
15
+ "./decorators/*.js": {
16
+ "types": "./dist/decorators/*.d.ts",
17
+ "import": "./dist/decorators/*.js"
38
18
  },
39
- "./draw-svg": {
40
- "import": "./dist/components/draw-svg/index.js",
41
- "types": "./dist/components/draw-svg/index.d.ts"
19
+ "./utils/*.js": {
20
+ "types": "./dist/utils/*.d.ts",
21
+ "import": "./dist/utils/*.js"
42
22
  },
43
- "./responsive-svg": {
44
- "import": "./dist/components/responsive-svg/index.js",
45
- "types": "./dist/components/responsive-svg/index.d.ts"
46
- },
47
- "./tool-tip": {
48
- "import": "./dist/components/tool-tip/index.js",
49
- "types": "./dist/components/tool-tip/index.d.ts"
50
- },
51
- "./decorators/condCustomElement.ts": {
52
- "import": "./dist/decorators/condCustomElement.ts/index.js",
53
- "types": "./dist/decorators/condCustomElement.ts/index.d.ts"
54
- }
23
+ "./package.json": "./package.json",
24
+ "./custom-elements.json": "./custom-elements.json"
55
25
  },
56
26
  "files": [
57
27
  "dist",
58
- "types"
28
+ "README.md"
59
29
  ],
60
30
  "keywords": [
61
- "web",
62
- "component",
31
+ "web components",
32
+ "custom elements",
63
33
  "lit"
64
34
  ],
65
- "author": "ALegendsTale",
66
- "license": "GPL-3.0",
67
35
  "scripts": {
68
- "generate-exports": "tsx scripts/generate-exports.ts",
69
- "build": "npm run generate-exports && vite build && tsc && npm run cem",
70
- "dev": "vite",
71
- "preview": "vite preview",
72
- "storybook": "storybook dev -p 6006",
73
- "build-storybook": "storybook build",
36
+ "prebuild": "rimraf dist",
37
+ "build": "vite build && npm run build:types && npm run cem",
38
+ "build:types": "tsc -p tsconfig.prod.json",
74
39
  "cem": "cem analyze --litelement",
75
- "watch": "vite build --watch"
40
+ "storybook": "storybook dev -p 6006"
76
41
  },
42
+ "sideEffects": [
43
+ "dist/components/**/*.js"
44
+ ],
77
45
  "dependencies": {
78
46
  "colorsea": "^1.2.2",
79
47
  "lit": "^3.3.1",
@@ -94,12 +62,13 @@
94
62
  "@vitest/coverage-v8": "^4.0.15",
95
63
  "@wc-toolkit/cem-validator": "^1.0.3",
96
64
  "@wc-toolkit/storybook-helpers": "^10.0.0",
65
+ "glob": "^13.0.0",
97
66
  "playwright": "^1.57.0",
67
+ "rimraf": "^6.1.2",
98
68
  "storybook": "^10.1.6",
99
69
  "tsx": "^4.21.0",
100
70
  "typescript": "latest",
101
71
  "vite": "^7.2.7",
102
72
  "vitest": "^4.0.15"
103
- },
104
- "customElements": "custom-elements.json"
105
- }
73
+ }
74
+ }
@@ -1,11 +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
- open: boolean;
6
- disableContextEvent: boolean;
7
- };
8
- type Story = StoryObj<Props>;
9
- export declare const Example: Story;
10
- export declare const Toggle: Story;
11
- //# sourceMappingURL=absolute-container.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"absolute-container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAW/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,mBAAmB,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA0C7B,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA"}
@@ -1,64 +0,0 @@
1
- import { html } from 'lit';
2
- import { createRef, ref } from 'lit/directives/ref.js';
3
- const argTypes = {
4
- open: { control: 'boolean' },
5
- disableContextEvent: { control: 'boolean' },
6
- emitter: { control: false }
7
- };
8
- const meta = {
9
- title: 'Containers/Absolute Container',
10
- tags: ['autodocs'],
11
- component: 'absolute-container',
12
- argTypes
13
- };
14
- export default meta;
15
- const template = {
16
- render: ({ open, disableContextEvent }) => {
17
- return html `
18
- <absolute-container
19
- ?open=${open}
20
- ?disableContextEvent=${disableContextEvent}
21
- >
22
- Hello
23
- </absolute-container>
24
- `;
25
- },
26
- };
27
- const buttonTemplate = {
28
- render: ({ open, disableContextEvent }) => {
29
- let absoluteRef = createRef();
30
- return html `
31
- <button
32
- @click=${() => {
33
- if (absoluteRef.value) {
34
- let absolute = absoluteRef.value;
35
- absolute.toggle();
36
- }
37
- }}
38
- >
39
- Open Absolute Container
40
- </button>
41
- <absolute-container
42
- ?open=${open}
43
- ?disableContextEvent=${disableContextEvent}
44
- ${ref(absoluteRef)}
45
- >
46
- This absolute container can be toggled with a button.
47
- </absolute-container>
48
- `;
49
- },
50
- };
51
- export const Example = {
52
- ...template,
53
- args: {
54
- open: false,
55
- disableContextEvent: false
56
- },
57
- };
58
- export const Toggle = {
59
- ...buttonTemplate,
60
- args: {
61
- open: false,
62
- disableContextEvent: false
63
- }
64
- };
@@ -1,2 +0,0 @@
1
- export { AbsoluteContainer } from './absolute-container.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
@@ -1 +0,0 @@
1
- export { AbsoluteContainer } from './absolute-container.js';
@@ -1,17 +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
- open: boolean;
6
- snapPoints: number[];
7
- nonmodal: boolean;
8
- dragging: boolean;
9
- scrolling: boolean;
10
- defaultSnap: number;
11
- height: number;
12
- };
13
- type Story = StoryObj<Props>;
14
- export declare const Modal: Story;
15
- export declare const NonModal: Story;
16
- export declare const Thirds: Story;
17
- //# sourceMappingURL=bottom-sheet.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"bottom-sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAe/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC"}
@@ -1,67 +0,0 @@
1
- import { html } from 'lit';
2
- const argTypes = {
3
- open: { control: 'boolean' },
4
- snapPoints: { control: 'object' },
5
- nonmodal: { control: 'boolean' },
6
- dragging: { control: 'boolean' },
7
- scrolling: { control: 'boolean' },
8
- defaultSnap: { control: 'number' },
9
- height: { control: 'number' },
10
- emitter: { control: false },
11
- '--height': { control: false }
12
- };
13
- const meta = {
14
- title: 'Containers/Bottom Sheet',
15
- tags: ['autodocs'],
16
- component: 'bottom-sheet',
17
- argTypes
18
- };
19
- export default meta;
20
- const template = {
21
- render: ({ open, snapPoints, nonmodal, dragging, scrolling, defaultSnap, height }) => {
22
- return html `
23
- <bottom-sheet
24
- ?open=${open}
25
- .snapPoints=${snapPoints}
26
- ?nonmodal=${nonmodal}
27
- ?dragging=${dragging}
28
- ?scrolling=${scrolling}
29
- defaultSnap=${defaultSnap}
30
- height=${height}
31
- >
32
- <p>
33
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dui eros. Nunc vel magna pellentesque, euismod lacus eu, euismod ligula. Nulla porttitor ultrices enim, ac fermentum ligula bibendum nec. Maecenas et volutpat nulla. Donec sit amet dapibus est, ultricies accumsan nunc. Praesent vitae nulla metus. Aenean non posuere lorem, bibendum scelerisque mauris. Praesent arcu dolor, efficitur vel malesuada nec, rhoncus eget eros. Nullam facilisis, diam eu tristique euismod, neque dolor pellentesque purus, id tristique ex quam eget lacus. Pellentesque lacinia consequat ligula. Duis egestas ornare porttitor. Morbi tempus fermentum nulla. Sed eu turpis quis nunc aliquam cursus vitae nec arcu. Nulla nec leo et tellus condimentum commodo mollis in dolor. Vivamus tortor eros, dictum in nulla ac, ultricies posuere ligula. Maecenas elit sem, efficitur et risus sed, placerat imperdiet nisl. Donec nunc ipsum, molestie et elementum a, hendrerit in diam. Vestibulum
34
- ullamcorper eu dolor id maximus. Donec in nunc vel dolor vehicula mollis. Mauris elementum, massa vitae condimentum efficitur, nisi massa condimentum dolor, at ultricies nulla ante et tortor. Praesent vitae vestibulum urna. Nunc aliquam aliquam elementum. Nullam facilisis ut ligula in ultrices. Vestibulum et risus ut eros gravida malesuada varius euismod dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dui nisl, auctor quis laoreet fringilla, aliquam id risus. Pellentesque sit amet neque finibus, pharetra dolor eu, eleifend ante. Vestibulum condimentum urna urna, ut dignissim nibh posuere in. Proin nec tincidunt enim, vel vehicula nunc. In quis pellentesque urna. Curabitur egestas arcu non arcu ullamcorper, at pellentesque lacus varius. Maecenas ac molestie erat. Integer ornare dui vitae turpis porttitor, nec semper mauris ultrices. Quisque eu arcu ipsum. Morbi sed tristique urna. Pellentesque gravida, nisi elementum ultrices condimentum,
35
- ipsum nisl faucibus ex, eget imperdiet dolor sem sit amet dui. Aenean dictum nibh nulla, non lacinia arcu molestie tempus. Donec a ex sodales, posuere felis eget, vestibulum odio. Sed lectus sapien, lacinia in orci eu, molestie finibus ex. Pellentesque dictum, dolor nec interdum gravida, sapien velit venenatis libero, eu finibus elit purus et ipsum. Vivamus sed eros libero. Aenean a auctor quam. Vivamus blandit enim tellus, in posuere enim fermentum varius. Donec malesuada orci ac ex dapibus, nec condimentum metus hendrerit. Nam non efficitur sem, ac ornare sapien. In varius libero et malesuada gravida. Suspendisse sollicitudin euismod ante, quis tincidunt quam rhoncus ac. Proin in pulvinar tortor. Nullam condimentum vestibulum dignissim. In hac habitasse platea dictumst. Etiam laoreet volutpat urna, et euismod urna aliquet egestas. Nulla odio tellus, vestibulum sit amet auctor vitae, tristique ut turpis. Cras sed tellus accumsan, pellentesque urna eget,
36
- sollicitudin felis. In euismod ac arcu vitae suscipit. Curabitur non consequat nibh. In purus nulla, egestas in commodo in, fermentum sit amet massa. Nullam luctus velit vel arcu dictum, vel fermentum dolor convallis. Nulla interdum quam nibh, in egestas turpis vestibulum vel. Nulla placerat sapien sit amet pharetra porttitor.
37
- </p>
38
- </bottom-sheet>
39
- `;
40
- },
41
- };
42
- export const Modal = {
43
- ...template,
44
- args: {
45
- open: false,
46
- snapPoints: [0, 50, 100],
47
- nonmodal: false,
48
- dragging: true,
49
- scrolling: false,
50
- defaultSnap: 50,
51
- },
52
- };
53
- export const NonModal = {
54
- ...template,
55
- args: {
56
- open: false,
57
- nonmodal: true,
58
- snapPoints: [0, 50, 100],
59
- },
60
- };
61
- export const Thirds = {
62
- ...template,
63
- args: {
64
- open: false,
65
- snapPoints: [0, 33, 66],
66
- },
67
- };
@@ -1,2 +0,0 @@
1
- export { BottomSheet } from './bottom-sheet.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
@@ -1 +0,0 @@
1
- export { BottomSheet } from './bottom-sheet.js';
@@ -1,7 +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
- type Story = StoryObj<Props>;
6
- export declare const Example: Story;
7
- //# sourceMappingURL=canvas-base.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"canvas-base.stories.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAS/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG,EAAE,CAAC;AAEvB,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAU7B,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC"}