@usecapsule/core-components 1.0.11 → 1.0.13-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (161) hide show
  1. package/css/capsule-core.css +74 -41
  2. package/css/capsule-core.css.map +1 -1
  3. package/dist/capsule/capsule.esm.js +1 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/index.esm.js +1 -1
  6. package/dist/capsule/index.esm.js.map +1 -1
  7. package/dist/capsule/p-0462f723.js +2 -0
  8. package/dist/capsule/p-0462f723.js.map +1 -0
  9. package/dist/capsule/p-202a85c9.entry.js +29 -0
  10. package/dist/capsule/p-202a85c9.entry.js.map +1 -0
  11. package/dist/capsule/p-68c73705.entry.js +2 -0
  12. package/dist/capsule/{p-1dc07cd7.entry.js.map → p-68c73705.entry.js.map} +1 -1
  13. package/dist/capsule/p-6fb7c4d1.js +3 -0
  14. package/dist/capsule/p-6fb7c4d1.js.map +1 -0
  15. package/dist/capsule/{p-11048392.entry.js → p-91412151.entry.js} +2 -2
  16. package/dist/capsule/{p-62e7869a.entry.js → p-a95ec4df.entry.js} +2 -2
  17. package/dist/capsule/p-c2bf050b.js +2 -0
  18. package/dist/capsule/p-c2bf050b.js.map +1 -0
  19. package/dist/capsule/p-d7be092d.entry.js +10 -0
  20. package/dist/capsule/p-d7be092d.entry.js.map +1 -0
  21. package/dist/capsule/p-f604b591.entry.js +2 -0
  22. package/dist/cjs/_commonjsHelpers-b3309d7b.js +12 -0
  23. package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +1 -0
  24. package/dist/cjs/capsule.cjs.js +2 -2
  25. package/dist/cjs/constants-4bb85cc5.js +12 -0
  26. package/dist/cjs/constants-4bb85cc5.js.map +1 -0
  27. package/dist/cjs/cpsl-alert_17.cjs.entry.js +3783 -559
  28. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
  29. package/dist/cjs/cpsl-animation.cjs.entry.js +20129 -0
  30. package/dist/cjs/cpsl-animation.cjs.entry.js.map +1 -0
  31. package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
  32. package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
  33. package/dist/cjs/cpsl-info-box.cjs.entry.js +3 -3
  34. package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
  35. package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
  36. package/dist/cjs/{index-2a026742.js → index-3fccb5b4.js} +22 -1
  37. package/dist/cjs/index-3fccb5b4.js.map +1 -0
  38. package/dist/cjs/index.cjs.js +338 -0
  39. package/dist/cjs/index.cjs.js.map +1 -1
  40. package/dist/cjs/loader.cjs.js +2 -2
  41. package/dist/collection/assets/icons/capsule-rings-dark.svg +34 -0
  42. package/dist/collection/assets/icons/capsule.svg +4 -4
  43. package/dist/collection/assets/icons/hero-email.svg +8 -30
  44. package/dist/collection/assets/icons/hero-lock.svg +4 -34
  45. package/dist/collection/assets/icons/hero-passkey.svg +9 -17
  46. package/dist/collection/assets/icons/hero-phone.svg +4 -15
  47. package/dist/collection/assets/icons/hero-wallet.svg +5 -44
  48. package/dist/collection/assets/icons/index.js +4 -2
  49. package/dist/collection/assets/icons/index.js.map +1 -1
  50. package/dist/collection/assets/icons/more-login-options.svg +10 -10
  51. package/dist/collection/assets/icons/plus-circle.svg +5 -0
  52. package/dist/collection/assets/icons/wallet.svg +5 -0
  53. package/dist/collection/collection-manifest.json +1 -0
  54. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  55. package/dist/collection/components/cpsl-animation/cpsl-animation.css +17 -0
  56. package/dist/collection/components/cpsl-animation/cpsl-animation.js +102 -0
  57. package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +1 -0
  58. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js +29 -0
  59. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js.map +1 -0
  60. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js +37 -0
  61. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js.map +1 -0
  62. package/dist/collection/components/cpsl-button/cpsl-button.css +3 -0
  63. package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
  64. package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
  65. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +2 -2
  66. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
  67. package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
  68. package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
  69. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  70. package/dist/collection/components/cpsl-icon/cpsl-icon.css +14 -0
  71. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -3
  72. package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +1 -1
  73. package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -1
  74. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  75. package/dist/collection/components/cpsl-input/cpsl-input.css +9 -4
  76. package/dist/collection/components/cpsl-input/cpsl-input.js +8 -6
  77. package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
  78. package/dist/collection/components/cpsl-modal/cpsl-modal.css +56 -4
  79. package/dist/collection/components/cpsl-modal/cpsl-modal.js +341 -24
  80. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  81. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +30 -13
  82. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
  83. package/dist/collection/components/cpsl-pill/cpsl-pill.css +3 -3
  84. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  85. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +3 -3
  86. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +3 -3
  87. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  88. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  89. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +19 -10
  90. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +54 -7
  91. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
  92. package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +2 -2
  93. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  94. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  95. package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +17 -16
  96. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +2 -2
  97. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
  98. package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
  99. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +3 -0
  100. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  101. package/dist/collection/constants.js +6 -0
  102. package/dist/collection/constants.js.map +1 -0
  103. package/dist/collection/index.js +1 -0
  104. package/dist/collection/index.js.map +1 -1
  105. package/dist/collection/interface.js.map +1 -1
  106. package/dist/collection/utils/theme/generateBorderRadii.js +56 -0
  107. package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -0
  108. package/dist/collection/utils/theme/generateFont.js +7 -0
  109. package/dist/collection/utils/theme/generateFont.js.map +1 -0
  110. package/dist/collection/utils/theme/generatePalette.js +46 -0
  111. package/dist/collection/utils/theme/generatePalette.js.map +1 -0
  112. package/dist/collection/utils/theme/generateTheme.js +12 -0
  113. package/dist/collection/utils/theme/generateTheme.js.map +1 -0
  114. package/dist/collection/utils/theme/utils.js +21 -0
  115. package/dist/collection/utils/theme/utils.js.map +1 -0
  116. package/dist/esm/_commonjsHelpers-1789f0cf.js +9 -0
  117. package/dist/esm/_commonjsHelpers-1789f0cf.js.map +1 -0
  118. package/dist/esm/capsule.js +3 -3
  119. package/dist/esm/constants-7b49abd5.js +9 -0
  120. package/dist/esm/constants-7b49abd5.js.map +1 -0
  121. package/dist/esm/cpsl-alert_17.entry.js +3782 -558
  122. package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
  123. package/dist/esm/cpsl-animation.entry.js +20125 -0
  124. package/dist/esm/cpsl-animation.entry.js.map +1 -0
  125. package/dist/esm/cpsl-col.entry.js +2 -2
  126. package/dist/esm/cpsl-grid.entry.js +3 -3
  127. package/dist/esm/cpsl-info-box.entry.js +3 -3
  128. package/dist/esm/cpsl-info-box.entry.js.map +1 -1
  129. package/dist/esm/cpsl-row.entry.js +2 -2
  130. package/dist/esm/{index-7c2f5cb9.js → index-f00e090c.js} +22 -1
  131. package/dist/esm/index-f00e090c.js.map +1 -0
  132. package/dist/esm/index.js +335 -0
  133. package/dist/esm/index.js.map +1 -1
  134. package/dist/esm/loader.js +3 -3
  135. package/dist/types/assets/icons/index.d.ts +3 -1
  136. package/dist/types/components/cpsl-animation/cpsl-animation.d.ts +9 -0
  137. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +26 -5
  138. package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -2
  139. package/dist/types/components/cpsl-slide-button/cpsl-slide-button.d.ts +1 -0
  140. package/dist/types/components.d.ts +125 -13
  141. package/dist/types/constants.d.ts +3 -0
  142. package/dist/types/index.d.ts +2 -0
  143. package/dist/types/interface.d.ts +122 -0
  144. package/dist/types/utils/theme/generateBorderRadii.d.ts +2 -0
  145. package/dist/types/utils/theme/generateFont.d.ts +2 -0
  146. package/dist/types/utils/theme/generatePalette.d.ts +7 -0
  147. package/dist/types/utils/theme/generateTheme.d.ts +3 -0
  148. package/dist/types/utils/theme/utils.d.ts +5 -0
  149. package/package.json +5 -3
  150. package/dist/capsule/p-1dc07cd7.entry.js +0 -2
  151. package/dist/capsule/p-5c020abe.entry.js +0 -2
  152. package/dist/capsule/p-9647dd63.js +0 -3
  153. package/dist/capsule/p-9647dd63.js.map +0 -1
  154. package/dist/capsule/p-bbbfec72.entry.js +0 -20
  155. package/dist/capsule/p-bbbfec72.entry.js.map +0 -1
  156. package/dist/cjs/index-2a026742.js.map +0 -1
  157. package/dist/collection/assets/icons/more-login-options-dark.svg +0 -13
  158. package/dist/esm/index-7c2f5cb9.js.map +0 -1
  159. /package/dist/capsule/{p-11048392.entry.js.map → p-91412151.entry.js.map} +0 -0
  160. /package/dist/capsule/{p-62e7869a.entry.js.map → p-a95ec4df.entry.js.map} +0 -0
  161. /package/dist/capsule/{p-5c020abe.entry.js.map → p-f604b591.entry.js.map} +0 -0
@@ -0,0 +1,46 @@
1
+ import { mix, readableColorIsBlack } from "color2k";
2
+ import { getCssColors, isColor } from "./utils";
3
+ import { DEFAULT_THEME } from "../../constants";
4
+ const MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];
5
+ export const generatePalette = ({ foregroundColor, backgroundColor, customPalette }) => {
6
+ if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {
7
+ foregroundColor = DEFAULT_THEME.foregroundColor;
8
+ }
9
+ if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {
10
+ backgroundColor = DEFAULT_THEME.backgroundColor;
11
+ }
12
+ const isDarkBackground = !readableColorIsBlack(backgroundColor);
13
+ const palette = {
14
+ foregroundColors: [],
15
+ backgroundColors: [],
16
+ isDarkBackground,
17
+ };
18
+ const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';
19
+ const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';
20
+ MIXES.forEach(value => {
21
+ palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));
22
+ palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));
23
+ });
24
+ document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);
25
+ document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);
26
+ document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);
27
+ document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);
28
+ document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);
29
+ document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);
30
+ document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);
31
+ document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);
32
+ document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);
33
+ document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);
34
+ document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);
35
+ document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);
36
+ document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);
37
+ document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);
38
+ document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);
39
+ document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);
40
+ if (Boolean(customPalette)) {
41
+ const cssColorVars = getCssColors(customPalette);
42
+ Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
43
+ }
44
+ return palette;
45
+ };
46
+ //# sourceMappingURL=generatePalette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor } from './utils';\nimport { DEFAULT_THEME } from '../../constants';\n\nexport type Palette = {\n foregroundColors: string[];\n backgroundColors: string[];\n isDarkBackground: boolean;\n};\n\nconst MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n foregroundColor = DEFAULT_THEME.foregroundColor;\n }\n if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n backgroundColor = DEFAULT_THEME.backgroundColor;\n }\n\n const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n const palette: Palette = {\n foregroundColors: [],\n backgroundColors: [],\n isDarkBackground,\n };\n\n const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n MIXES.forEach(value => {\n palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n });\n\n // BACKGROUND\n document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);\n\n // FOREGROUND\n document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);\n\n if (Boolean(customPalette)) {\n const cssColorVars = getCssColors(customPalette);\n Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n }\n\n return palette;\n};\n"]}
@@ -0,0 +1,12 @@
1
+ import { DEFAULT_THEME } from "../../constants";
2
+ import { generateBorderRadii } from "./generateBorderRadii";
3
+ import { generateFont } from "./generateFont";
4
+ import { generatePalette } from "./generatePalette";
5
+ const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }) => {
6
+ const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
7
+ generateFont({ font });
8
+ generateBorderRadii({ borderRadius });
9
+ return palette.isDarkBackground;
10
+ };
11
+ export default generateTheme;
12
+ //# sourceMappingURL=generateTheme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,aAAa,GAAG,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAS,EAAW,EAAE;IAChL,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvB,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nconst generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }: Theme): boolean => {\n const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n generateFont({ font });\n\n generateBorderRadii({ borderRadius });\n\n return palette.isDarkBackground;\n};\n\nexport default generateTheme;\n"]}
@@ -0,0 +1,21 @@
1
+ export const isColor = strColor => {
2
+ const s = new Option().style;
3
+ s.color = strColor;
4
+ return s.color !== '';
5
+ };
6
+ const toKebabCase = (pascal) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();
7
+ const buildVars = (prev, obj) => {
8
+ let resp = {};
9
+ for (const k in obj) {
10
+ const name = `${prev}-${toKebabCase(k)}`;
11
+ if (typeof obj[k] === 'object' && obj[k] !== null) {
12
+ resp = Object.assign(Object.assign({}, resp), buildVars(name, obj[k]));
13
+ }
14
+ else {
15
+ resp[name] = obj[k];
16
+ }
17
+ }
18
+ return resp;
19
+ };
20
+ export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
21
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { CustomPalette } from '../../interface';\n\nexport const isColor = strColor => {\n const s = new Option().style;\n s.color = strColor;\n return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n let resp = {};\n\n for (const k in obj) {\n const name = `${prev}-${toKebabCase(k)}`;\n if (typeof obj[k] === 'object' && obj[k] !== null) {\n resp = { ...resp, ...buildVars(name, obj[k]) };\n } else {\n resp[name] = obj[k];\n }\n }\n\n return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\n"]}
@@ -0,0 +1,9 @@
1
+ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
2
+
3
+ function getDefaultExportFromCjs (x) {
4
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5
+ }
6
+
7
+ export { commonjsGlobal as c, getDefaultExportFromCjs as g };
8
+
9
+ //# sourceMappingURL=_commonjsHelpers-1789f0cf.js.map
@@ -0,0 +1 @@
1
+ {"file":"_commonjsHelpers-1789f0cf.js","mappings":";;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1,5 +1,5 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-7c2f5cb9.js';
2
- export { s as setNonce } from './index-7c2f5cb9.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-f00e090c.js';
2
+ export { s as setNonce } from './index-f00e090c.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  /*
@@ -16,7 +16,7 @@ const patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
19
+ return bootstrapLazy([["cpsl-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
20
20
  });
21
21
 
22
22
  //# sourceMappingURL=capsule.js.map
@@ -0,0 +1,9 @@
1
+ const MOBILE_SIZE = 480;
2
+ const DEFAULT_THEME = {
3
+ foregroundColor: '#121212',
4
+ backgroundColor: '#FAFAFA',
5
+ };
6
+
7
+ export { DEFAULT_THEME as D, MOBILE_SIZE as M };
8
+
9
+ //# sourceMappingURL=constants-7b49abd5.js.map
@@ -0,0 +1 @@
1
+ {"file":"constants-7b49abd5.js","mappings":"MAEa,WAAW,GAAG,IAAI;MAElB,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;;;;;","names":[],"sources":["src/constants.ts"],"sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n foregroundColor: '#121212',\n backgroundColor: '#FAFAFA',\n};\n"],"version":3}