@usecapsule/core-components 3.0.1-dev.4 → 3.0.1-dev.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +10 -10
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/index.esm.js +1 -1
- package/dist/capsule/index.esm.js.map +1 -1
- package/dist/capsule/{p-a7db40a8.entry.js → p-d63ef54d.entry.js} +3 -3
- package/dist/capsule/p-d63ef54d.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -1
- package/dist/cjs/index.cjs.js +104 -107
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.css +1 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.css +4 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js.map +1 -1
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateBorderRadii.js +40 -43
- package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
- package/dist/collection/utils/theme/generateTheme.js +2 -2
- package/dist/collection/utils/theme/generateTheme.js.map +1 -1
- package/dist/collection/utils/theme/utils.js +1 -0
- package/dist/collection/utils/theme/utils.js.map +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +3 -3
- package/dist/esm/cpsl-alert_33.entry.js.map +1 -1
- package/dist/esm/index.js +104 -107
- package/dist/esm/index.js.map +1 -1
- package/dist/types/interface.d.ts +24 -1
- package/dist/types/utils/theme/generateBorderRadii.d.ts +1 -1
- package/dist/types/utils/theme/generateTheme.d.ts +1 -1
- package/dist/types/utils/theme/utils.d.ts +4 -1
- package/package.json +1 -1
- package/dist/capsule/p-a7db40a8.entry.js.map +0 -1
|
@@ -1,77 +1,74 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
let xSmallRadius, smallRadius, mediumRadius, largeRadius;
|
|
1
|
+
import { getCssBorderRadii } from "./utils";
|
|
2
|
+
export const generateBorderRadii = ({ borderRadius, customBorderRadii }) => {
|
|
3
|
+
let mediumRadius, largeRadius, checkboxRadius = 4;
|
|
6
4
|
const fullRadius = 1000;
|
|
7
5
|
let isFull = false;
|
|
8
6
|
let isNone = false;
|
|
9
7
|
switch (borderRadius) {
|
|
10
8
|
case 'none': {
|
|
11
9
|
isNone = true;
|
|
12
|
-
xSmallRadius = 0;
|
|
13
|
-
smallRadius = 0;
|
|
14
10
|
mediumRadius = 0;
|
|
15
11
|
largeRadius = 0;
|
|
12
|
+
checkboxRadius = 0;
|
|
16
13
|
break;
|
|
17
14
|
}
|
|
18
15
|
case 'xs': {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
largeRadius = 20;
|
|
16
|
+
mediumRadius = 2;
|
|
17
|
+
largeRadius = 4;
|
|
18
|
+
checkboxRadius = 2;
|
|
23
19
|
break;
|
|
24
20
|
}
|
|
25
21
|
case 'sm': {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
mediumRadius = 16;
|
|
29
|
-
largeRadius = 24;
|
|
22
|
+
mediumRadius = 4;
|
|
23
|
+
largeRadius = 8;
|
|
30
24
|
break;
|
|
31
25
|
}
|
|
32
|
-
case '
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
case 'md': {
|
|
27
|
+
mediumRadius = 8;
|
|
28
|
+
largeRadius = 16;
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
case 'xl': {
|
|
32
|
+
mediumRadius = 16;
|
|
36
33
|
largeRadius = 32;
|
|
37
34
|
break;
|
|
38
35
|
}
|
|
39
36
|
case 'full': {
|
|
40
|
-
xSmallRadius = 8;
|
|
41
|
-
smallRadius = 16;
|
|
42
37
|
mediumRadius = 24;
|
|
43
38
|
largeRadius = 32;
|
|
44
39
|
isFull = true;
|
|
45
40
|
break;
|
|
46
41
|
}
|
|
47
42
|
default:
|
|
48
|
-
case '
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
mediumRadius = 20;
|
|
52
|
-
largeRadius = 28;
|
|
43
|
+
case 'lg': {
|
|
44
|
+
mediumRadius = 12;
|
|
45
|
+
largeRadius = 24;
|
|
53
46
|
break;
|
|
54
47
|
}
|
|
55
48
|
}
|
|
56
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius :
|
|
57
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius :
|
|
58
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius :
|
|
59
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${
|
|
60
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius :
|
|
61
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius :
|
|
62
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius :
|
|
63
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius :
|
|
64
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${
|
|
65
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-
|
|
66
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-
|
|
67
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);
|
|
68
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);
|
|
49
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : mediumRadius}px`);
|
|
50
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : mediumRadius}px`);
|
|
51
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : mediumRadius}px`);
|
|
52
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${isFull ? fullRadius : mediumRadius}px`);
|
|
53
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : mediumRadius}px`);
|
|
54
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : mediumRadius}px`);
|
|
55
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : mediumRadius}px`);
|
|
56
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : mediumRadius}px`);
|
|
57
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${mediumRadius}px`);
|
|
58
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${mediumRadius}px`);
|
|
59
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${mediumRadius}px`);
|
|
69
60
|
document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);
|
|
61
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${mediumRadius}px`);
|
|
62
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${mediumRadius}px`);
|
|
63
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-card', `${largeRadius}px`);
|
|
64
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${largeRadius}px`);
|
|
65
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${checkboxRadius}px`);
|
|
70
66
|
document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);
|
|
71
|
-
document.documentElement.style.setProperty('--cpsl-border-radius-
|
|
67
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
|
|
72
68
|
document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
if (Boolean(customBorderRadii)) {
|
|
70
|
+
const cssBorderRadiiVars = getCssBorderRadii(customBorderRadii);
|
|
71
|
+
Object.entries(cssBorderRadiiVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
|
|
72
|
+
}
|
|
76
73
|
};
|
|
77
74
|
//# sourceMappingURL=generateBorderRadii.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../../interface';\nimport { getCssBorderRadii } from './utils';\n\nexport const generateBorderRadii = ({ borderRadius, customBorderRadii }: Pick<Theme, 'borderRadius' | 'customBorderRadii'>) => {\n let mediumRadius: number,\n largeRadius: number,\n checkboxRadius: number = 4;\n const fullRadius = 1000;\n let isFull = false;\n let isNone = false;\n\n switch (borderRadius) {\n case 'none': {\n isNone = true;\n mediumRadius = 0;\n largeRadius = 0;\n checkboxRadius = 0;\n break;\n }\n case 'xs': {\n mediumRadius = 2;\n largeRadius = 4;\n checkboxRadius = 2;\n break;\n }\n case 'sm': {\n mediumRadius = 4;\n largeRadius = 8;\n break;\n }\n case 'md': {\n mediumRadius = 8;\n largeRadius = 16;\n break;\n }\n case 'xl': {\n mediumRadius = 16;\n largeRadius = 32;\n break;\n }\n case 'full': {\n mediumRadius = 24;\n largeRadius = 32;\n isFull = true;\n break;\n }\n default:\n case 'lg': {\n mediumRadius = 12;\n largeRadius = 24;\n break;\n }\n }\n\n document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-card', `${largeRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${largeRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${checkboxRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);\n\n if (Boolean(customBorderRadii)) {\n const cssBorderRadiiVars = getCssBorderRadii(customBorderRadii);\n Object.entries(cssBorderRadiiVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n }\n};\n"]}
|
|
@@ -2,10 +2,10 @@ import { DEFAULT_THEME } from "../../constants";
|
|
|
2
2
|
import { generateBorderRadii } from "./generateBorderRadii";
|
|
3
3
|
import { generateFont } from "./generateFont";
|
|
4
4
|
import { generatePalette } from "./generatePalette";
|
|
5
|
-
export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, }) => {
|
|
5
|
+
export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }) => {
|
|
6
6
|
const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
|
|
7
7
|
generateFont({ font, customFontSizes });
|
|
8
|
-
generateBorderRadii({ borderRadius });
|
|
8
|
+
generateBorderRadii({ borderRadius, customBorderRadii });
|
|
9
9
|
return palette.isDarkBackground;
|
|
10
10
|
};
|
|
11
11
|
//# sourceMappingURL=generateTheme.js.map
|
|
@@ -1 +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,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,
|
|
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,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iBAAiB,GACX,EAAW,EAAE;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;IAExC,mBAAmB,CAAC,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC,CAAC;IAEzD,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,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 */\nexport const generateTheme = ({\n foregroundColor = DEFAULT_THEME.foregroundColor,\n backgroundColor = DEFAULT_THEME.backgroundColor,\n font,\n customPalette,\n borderRadius,\n customFontSizes,\n customBorderRadii,\n}: Theme): boolean => {\n const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n generateFont({ font, customFontSizes });\n\n generateBorderRadii({ borderRadius, customBorderRadii });\n\n return palette.isDarkBackground;\n};\n"]}
|
|
@@ -20,6 +20,7 @@ const buildVars = (prev, obj) => {
|
|
|
20
20
|
return resp;
|
|
21
21
|
};
|
|
22
22
|
export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
|
|
23
|
+
export const getCssBorderRadii = (customBorderRadii) => buildVars('--cpsl-border-radius', customBorderRadii);
|
|
23
24
|
export const overlayMix = (baseColor, overlayColor) => {
|
|
24
25
|
const baseRGBA = parseToRgba(baseColor);
|
|
25
26
|
const overlayRGBA = parseToRgba(overlayColor);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,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;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,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;AAChI,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,iBAAoC,EAA2B,EAAE,CAAC,SAAS,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AAEzJ,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAE;IACpE,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEtK,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { parseToRgba, rgba } from 'color2k';\nimport { CustomBorderRadii, CustomPalette } from '../../interface';\nimport { overlay } from 'color-blend';\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);\nexport const getCssBorderRadii = (customBorderRadii: CustomBorderRadii): { [k: string]: string } => buildVars('--cpsl-border-radius', customBorderRadii);\n\nexport const overlayMix = (baseColor: string, overlayColor: string) => {\n const baseRGBA = parseToRgba(baseColor);\n const overlayRGBA = parseToRgba(overlayColor);\n\n const finalRGBA = overlay({ r: baseRGBA[0], g: baseRGBA[1], b: baseRGBA[2], a: 0.1 }, { r: overlayRGBA[0], g: overlayRGBA[1], b: overlayRGBA[2], a: overlayRGBA[3] });\n\n return rgba(finalRGBA.r, finalRGBA.g, finalRGBA.b, finalRGBA.a);\n};\n"]}
|
|
@@ -5131,7 +5131,7 @@ const CpslDropdown = class {
|
|
|
5131
5131
|
};
|
|
5132
5132
|
CpslDropdown.style = CpslDropdownStyle0;
|
|
5133
5133
|
|
|
5134
|
-
const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
|
|
5134
|
+
const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center;text-align:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
|
|
5135
5135
|
const CpslFileUploadStyle0 = cpslFileUploadCss;
|
|
5136
5136
|
|
|
5137
5137
|
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
@@ -14891,7 +14891,7 @@ const CpslOverlay = class {
|
|
|
14891
14891
|
};
|
|
14892
14892
|
CpslOverlay.style = CpslOverlayStyle0;
|
|
14893
14893
|
|
|
14894
|
-
const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}";
|
|
14894
|
+
const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}.arrow-button{--button-secondary-icon-color:var(--cpsl-color-text-tertiary)}";
|
|
14895
14895
|
const CpslPaginationStyle0 = cpslPaginationCss;
|
|
14896
14896
|
|
|
14897
14897
|
const CpslPagination = class {
|
|
@@ -14968,7 +14968,7 @@ const CpslPagination = class {
|
|
|
14968
14968
|
filteredPages.push(this.totalPages - 1);
|
|
14969
14969
|
}
|
|
14970
14970
|
}
|
|
14971
|
-
return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '
|
|
14971
|
+
return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8c78bd8f77c65535ceb6fc414f019b1fa7f8d7e8', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: 'da4779051c45a41a7fcec1fbe04eebf75a417e01', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '63f71be7e364edd629077d71ad4c401445807704', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'd21bc4f342374d026816d6c091fef282a77320d8', class: "icon", icon: "arrowNarrow" })))));
|
|
14972
14972
|
}
|
|
14973
14973
|
static get watchers() { return {
|
|
14974
14974
|
"currentPage": ["watchChange"]
|