@usecapsule/core-components 3.0.1-dev.4 → 3.0.1-dev.6
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/capsule.esm.js.map +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-9fac8ae5.entry.js} +5 -5
- package/dist/capsule/p-9fac8ae5.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +44 -8
- 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/cjs/loader.cjs.js +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/components/cpsl-table/cpsl-table.css +23 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js +67 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +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/capsule.js +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +44 -8
- 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/esm/loader.js +1 -1
- package/dist/types/components/cpsl-table/cpsl-table.d.ts +8 -0
- package/dist/types/components.d.ts +8 -0
- 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
|
@@ -104,10 +104,32 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.content {
|
|
107
|
-
flex: 1;
|
|
108
107
|
overflow: auto;
|
|
109
108
|
}
|
|
110
109
|
|
|
110
|
+
.content-outer-container {
|
|
111
|
+
flex: 1;
|
|
112
|
+
position: relative;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.overlay {
|
|
116
|
+
position: absolute;
|
|
117
|
+
top: 0;
|
|
118
|
+
left: 0;
|
|
119
|
+
right: 0;
|
|
120
|
+
bottom: 0;
|
|
121
|
+
pointer-events: none;
|
|
122
|
+
}
|
|
123
|
+
.overlay.horizontal-scroll {
|
|
124
|
+
box-shadow: -24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset;
|
|
125
|
+
}
|
|
126
|
+
.overlay.vertical-scroll {
|
|
127
|
+
box-shadow: 0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 0px 24px 24px -24px rgba(0, 0, 0, 0.1) inset;
|
|
128
|
+
}
|
|
129
|
+
.overlay.horizontal-scroll.vertical-scroll {
|
|
130
|
+
box-shadow: -24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset, 24px 24px 24px -24px rgba(0, 0, 0, 0.1) inset;
|
|
131
|
+
}
|
|
132
|
+
|
|
111
133
|
.table-wrapper {
|
|
112
134
|
overflow: auto;
|
|
113
135
|
height: 100%;
|
|
@@ -1,13 +1,51 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class CpslTable {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.resizeOb = new ResizeObserver(entries => {
|
|
5
|
+
const rect = entries[0].contentRect;
|
|
6
|
+
const containerWidth = Math.round(rect.width);
|
|
7
|
+
const containerHeight = Math.round(rect.height);
|
|
8
|
+
const contentWidth = this.containerSlotEl.clientWidth;
|
|
9
|
+
const contentHeight = this.containerSlotEl.clientHeight;
|
|
10
|
+
if (contentWidth > containerWidth) {
|
|
11
|
+
this.hasHorizontalScroll = true;
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
this.hasHorizontalScroll = false;
|
|
15
|
+
}
|
|
16
|
+
if (contentHeight > containerHeight) {
|
|
17
|
+
this.hasVerticalScroll = true;
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
this.hasVerticalScroll = false;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
this.hasHorizontalScroll = false;
|
|
24
|
+
this.hasVerticalScroll = false;
|
|
25
|
+
this.tableHeadHeight = 0;
|
|
26
|
+
this.hasStickyHeader = undefined;
|
|
27
|
+
}
|
|
28
|
+
componentDidLoad() {
|
|
29
|
+
this.resizeOb.observe(this.contentContainerEl);
|
|
30
|
+
if (this.hasStickyHeader) {
|
|
31
|
+
const tableHead = this.containerSlotEl.querySelector('thead');
|
|
32
|
+
this.tableHeadHeight = tableHead.clientHeight;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
3
35
|
get containerHeaderEl() {
|
|
4
36
|
return this.el.querySelector('[slot="header"]');
|
|
5
37
|
}
|
|
6
38
|
get containerFooterEl() {
|
|
7
39
|
return this.el.querySelector('[slot="footer"]');
|
|
8
40
|
}
|
|
41
|
+
get contentContainerEl() {
|
|
42
|
+
return this.el.shadowRoot.getElementById('content-container');
|
|
43
|
+
}
|
|
44
|
+
get containerSlotEl() {
|
|
45
|
+
return this.el.querySelector('[slot="content"]');
|
|
46
|
+
}
|
|
9
47
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: '4a15f50ce49df01cb1529a08de57d99ea04c7d60' }, h("cpsl-card", { key: 'c515e9f590b83bb66c3cc5292c5fb16ac0151eab', part: "table-container" }, h("div", { key: '066b12c5f86d469d0dba78f6f20ed44b11071e8f', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: 'a60b0d77ad95dd7af2bed4067dd7698394d38ae8', name: "header" })), h("div", { key: '992edf72e2763e17c44df0a053fb4515c8280af4', class: "content-outer-container" }, h("div", { key: '532b66c470e40b2c52e0948a514e0bf2da01d4a2', id: "content-container", class: { content: true }, part: "content" }, h("slot", { key: '5aec71b9b8ef537ac5e1426ab7c181da930ff045', name: "content" })), h("div", { key: '3f7c38510f7766e3011de4685f6a060afdb2ec2d', style: { top: `${this.tableHeadHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '59cce454d848c1661b726287cbb8d6bb3d6f632b', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'ab559ea831cd9e5013e3cbd949779b19450466b8', name: "footer" })))));
|
|
11
49
|
}
|
|
12
50
|
static get is() { return "cpsl-table"; }
|
|
13
51
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,6 +59,34 @@ export class CpslTable {
|
|
|
21
59
|
"$": ["cpsl-table.css"]
|
|
22
60
|
};
|
|
23
61
|
}
|
|
62
|
+
static get properties() {
|
|
63
|
+
return {
|
|
64
|
+
"hasStickyHeader": {
|
|
65
|
+
"type": "boolean",
|
|
66
|
+
"mutable": false,
|
|
67
|
+
"complexType": {
|
|
68
|
+
"original": "boolean",
|
|
69
|
+
"resolved": "boolean",
|
|
70
|
+
"references": {}
|
|
71
|
+
},
|
|
72
|
+
"required": false,
|
|
73
|
+
"optional": true,
|
|
74
|
+
"docs": {
|
|
75
|
+
"tags": [],
|
|
76
|
+
"text": "Height of sticky header (if using) to offset the box shadow overlay."
|
|
77
|
+
},
|
|
78
|
+
"attribute": "has-sticky-header",
|
|
79
|
+
"reflect": false
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
static get states() {
|
|
84
|
+
return {
|
|
85
|
+
"hasHorizontalScroll": {},
|
|
86
|
+
"hasVerticalScroll": {},
|
|
87
|
+
"tableHeadHeight": {}
|
|
88
|
+
};
|
|
89
|
+
}
|
|
24
90
|
static get elementRef() { return "el"; }
|
|
25
91
|
}
|
|
26
92
|
//# sourceMappingURL=cpsl-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"cpsl-table.js","sourceRoot":"","sources":["../../../../src/components/cpsl-table/cpsl-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,SAAS;;QAqBZ,aAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAE9C,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;YAGpC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;YACtD,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;YAExD,IAAI,YAAY,GAAG,cAAc,EAAE,CAAC;gBAClC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACnC,CAAC;YACD,IAAI,aAAa,GAAG,eAAe,EAAE,CAAC;gBACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;mCAtCqC,KAAK;iCACP,KAAK;+BACR,CAAC;;;IAOpC,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE/C,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,YAAY,CAAC;QAChD,CAAC;IACH,CAAC;IAwBD,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAChE,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,kEAAW,IAAI,EAAC,iBAAiB;gBAC/B,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAC,SAAS;wBAClE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;oBACN,4DACE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,IAAI,EAAE,EAC3C,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GACpH,CACE;gBACN,4DAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE;oBAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, h, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-table',\n styleUrl: 'cpsl-table.scss',\n shadow: true,\n})\nexport class CpslTable {\n @Element() el!: HTMLCpslTableElement;\n\n @State() hasHorizontalScroll: boolean = false;\n @State() hasVerticalScroll: boolean = false;\n @State() tableHeadHeight: number = 0;\n\n /**\n * Height of sticky header (if using) to offset the box shadow overlay.\n */\n @Prop() hasStickyHeader?: boolean;\n\n componentDidLoad() {\n this.resizeOb.observe(this.contentContainerEl);\n\n if (this.hasStickyHeader) {\n const tableHead = this.containerSlotEl.querySelector('thead');\n this.tableHeadHeight = tableHead.clientHeight;\n }\n }\n\n private resizeOb = new ResizeObserver(entries => {\n // since we are observing only a single element, so we access the first element in entries array\n const rect = entries[0].contentRect;\n\n // current width & height\n const containerWidth = Math.round(rect.width);\n const containerHeight = Math.round(rect.height);\n const contentWidth = this.containerSlotEl.clientWidth;\n const contentHeight = this.containerSlotEl.clientHeight;\n\n if (contentWidth > containerWidth) {\n this.hasHorizontalScroll = true;\n } else {\n this.hasHorizontalScroll = false;\n }\n if (contentHeight > containerHeight) {\n this.hasVerticalScroll = true;\n } else {\n this.hasVerticalScroll = false;\n }\n });\n\n private get containerHeaderEl() {\n return this.el.querySelector('[slot=\"header\"]');\n }\n\n private get containerFooterEl() {\n return this.el.querySelector('[slot=\"footer\"]');\n }\n\n private get contentContainerEl() {\n return this.el.shadowRoot.getElementById('content-container');\n }\n\n private get containerSlotEl() {\n return this.el.querySelector('[slot=\"content\"]');\n }\n\n render() {\n return (\n <Host>\n <cpsl-card part=\"table-container\">\n <div class={{ 'container-header': true, 'shown': Boolean(this.containerHeaderEl) }}>\n <slot name=\"header\"></slot>\n </div>\n <div class=\"content-outer-container\">\n <div id=\"content-container\" class={{ content: true }} part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n <div\n style={{ top: `${this.tableHeadHeight}px` }}\n class={{ 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }}\n />\n </div>\n <div class={{ 'container-footer': true, 'shown': Boolean(this.containerFooterEl) }}>\n <slot name=\"footer\"></slot>\n </div>\n </cpsl-card>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -46,7 +46,7 @@ export class CpslTabs {
|
|
|
46
46
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
47
47
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
48
48
|
const selectedTabRect = this.selectedTabRect;
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: 'df9361608956f3f8e20b982120068b953a14bd1b', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'a9bbb9371172df07aa24c803435b1da21b49744a', class: "tabs-container" }, h("slot", { key: '9d8c82a3531388035ca5a41cbdcc72c5d936cc31' }), h("div", { key: '17271c16be157fbe1296a1a71d1523bd6e9d2c03', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "cpsl-tabs"; }
|
|
52
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,7 +31,7 @@ export class CpslText {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '1886bb20c0cedf9fe76d81bb423a8310d0adf46f', class: {
|
|
35
35
|
'primary': this.color === 'primary',
|
|
36
36
|
'secondary': this.color === 'secondary',
|
|
37
37
|
'tertiary': this.color === 'tertiary',
|
|
@@ -5,7 +5,7 @@ export class CpslTileButton {
|
|
|
5
5
|
this.icon = undefined;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '80829e65291aff559b7fc599c83924646b344242' }, h("button", { key: '5984d2e8439caa4da667691bfb2bedf0b45d499e', class: "button-native" }, h("cpsl-icon", { key: '98e1220e588a050d0daf89873e9c40f0155e1997', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '9b6b618fbbf527ab07955dde7a99ae27628e4c30' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "cpsl-tile-button"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n foregroundColor?: string;\n backgroundColor?: string;\n borderRadius?: BorderRadius;\n font?: string;\n customPalette?: CustomPalette;\n customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n body2XS?: string;\n bodyXS?: string;\n bodyS?: string;\n bodyM?: string;\n bodyL?: string;\n bodyXL?: string;\n headingXS?: string;\n headingS?: string;\n headingM?: string;\n headingL?: string;\n headingXL?: string;\n heading2XL?: string;\n}\n\nexport interface CustomPalette {\n text?: {\n primary?: string;\n secondary?: string;\n subtle?: string;\n inverted?: string;\n error?: string;\n };\n modal?: {\n surface?: {\n main?: string;\n footer?: string;\n };\n border?: string;\n };\n input?: {\n surface?: {\n disabled?: string;\n default?: string;\n hover?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n };\n select?: {\n surface?: {\n disabled?: string;\n default?: string;\n hover?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n dropdown?: {\n border?: string;\n };\n };\n file?: {\n surface?: {\n disabled?: string;\n default?: string;\n drag?: string;\n };\n border?: {\n placeholder?: string;\n error?: string;\n };\n };\n tileButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n };\n border?: string;\n };\n primaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n secondaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n destructiveButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n divider?: string;\n spinner?: {\n path?: string;\n circle?: string;\n };\n pill?: {\n text?: string;\n container?: {\n background?: string;\n border?: string;\n };\n };\n progressIndicator?: {\n active?: string;\n next?: string;\n previous?: string;\n };\n qr?: {\n fill?: string;\n background?: string;\n border?: string;\n };\n slideButton?: {\n slider?: {\n background?: string;\n border?: string;\n text?: string;\n container?: {\n start?: {\n background?: string;\n border?: string;\n };\n end?: {\n background?: string;\n border?: string;\n };\n };\n };\n start?: {\n text?: string;\n };\n end?: {\n text?: string;\n };\n };\n alert?: {\n surface?: {\n error?: string;\n };\n border?: {\n error?: string;\n };\n };\n switch?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n thumb?: {\n default?: string;\n checked?: string;\n };\n };\n checkbox?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n border?: {\n default?: string;\n checked?: string;\n };\n icon?: string;\n };\n radio?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n border?: {\n default?: string;\n checked?: string;\n };\n };\n card?: {\n surface?: string;\n border?: string;\n };\n}\n\nexport interface InteractionCallback {\n eventName: string;\n callback: (ev: any) => void;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n foregroundColor?: string;\n backgroundColor?: string;\n borderRadius?: BorderRadius;\n font?: string;\n customPalette?: CustomPalette;\n customFontSizes?: CustomFontSizes;\n customBorderRadii?: CustomBorderRadii;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\nexport interface CustomBorderRadii {\n input?: string;\n select?: string;\n fileSelect?: string;\n alert?: string;\n tabs?: string;\n primaryButton?: string;\n secondaryButton?: string;\n destructiveButton?: string;\n tileButton?: string;\n modal?: string;\n pill?: string;\n qrCode?: string;\n infoBox?: string;\n tableContainer?: string;\n switch?: string;\n checkbox?: string;\n radio?: string;\n avatar?: string;\n card?: string;\n buttonGroup?: string;\n}\nexport interface CustomFontSizes {\n body2XS?: string;\n bodyXS?: string;\n bodyS?: string;\n bodyM?: string;\n bodyL?: string;\n bodyXL?: string;\n headingXS?: string;\n headingS?: string;\n headingM?: string;\n headingL?: string;\n headingXL?: string;\n heading2XL?: string;\n}\n\nexport interface CustomPalette {\n text?: {\n primary?: string;\n secondary?: string;\n subtle?: string;\n inverted?: string;\n error?: string;\n };\n modal?: {\n surface?: {\n main?: string;\n footer?: string;\n };\n border?: string;\n };\n input?: {\n surface?: {\n disabled?: string;\n default?: string;\n hover?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n };\n select?: {\n surface?: {\n disabled?: string;\n default?: string;\n hover?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n dropdown?: {\n border?: string;\n };\n };\n file?: {\n surface?: {\n disabled?: string;\n default?: string;\n drag?: string;\n };\n border?: {\n placeholder?: string;\n error?: string;\n };\n };\n tileButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n };\n border?: string;\n };\n primaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n secondaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n destructiveButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n divider?: string;\n spinner?: {\n path?: string;\n circle?: string;\n };\n pill?: {\n text?: string;\n container?: {\n background?: string;\n border?: string;\n };\n };\n progressIndicator?: {\n active?: string;\n next?: string;\n previous?: string;\n };\n qr?: {\n fill?: string;\n background?: string;\n border?: string;\n };\n slideButton?: {\n slider?: {\n background?: string;\n border?: string;\n text?: string;\n container?: {\n start?: {\n background?: string;\n border?: string;\n };\n end?: {\n background?: string;\n border?: string;\n };\n };\n };\n start?: {\n text?: string;\n };\n end?: {\n text?: string;\n };\n };\n alert?: {\n surface?: {\n error?: string;\n };\n border?: {\n error?: string;\n };\n };\n switch?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n thumb?: {\n default?: string;\n checked?: string;\n };\n };\n checkbox?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n border?: {\n default?: string;\n checked?: string;\n };\n icon?: string;\n };\n radio?: {\n surface?: {\n default?: string;\n checked?: string;\n };\n border?: {\n default?: string;\n checked?: string;\n };\n };\n card?: {\n surface?: string;\n border?: string;\n };\n}\n\nexport interface InteractionCallback {\n eventName: string;\n callback: (ev: any) => void;\n}\n"]}
|
|
@@ -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":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAAE,iBAAiB,EAAqD,EAAE,EAAE;IAC5H,IAAI,YAAoB,EACtB,WAAmB,EACnB,cAAc,GAAW,CAAC,CAAC;IAC7B,MAAM,UAAU,GAAG,IAAI,CAAC;IACxB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,MAAM,GAAG,KAAK,CAAC;IAEnB,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,GAAG,IAAI,CAAC;YACd,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,cAAc,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,cAAc,GAAG,CAAC,CAAC;YACnB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM,GAAG,IAAI,CAAC;YACd,MAAM;QACR,CAAC;QACD,QAAQ;QACR,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACpH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACrH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACnH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACpH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACnH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IAC7H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,uCAAuC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IAC/H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,yCAAyC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;IACjI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACpG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAChG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACjG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,sCAAsC,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAC/F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACrG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC5F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC7F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,cAAc,IAAI,CAAC,CAAC;IACnG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IAC1G,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,UAAU,IAAI,CAAC,CAAC;IAE5F,IAAI,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC/B,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;QAChE,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3G,CAAC;AACH,CAAC,CAAC","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"]}
|
package/dist/esm/capsule.js
CHANGED
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["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_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[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],"zIndexOverride":[2,"z-index-override"],"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-table"],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["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_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[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],"zIndexOverride":[2,"z-index-override"],"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-table",{"hasStickyHeader":[4,"has-sticky-header"],"hasHorizontalScroll":[32],"hasVerticalScroll":[32],"tableHeadHeight":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[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],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[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-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[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-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=capsule.js.map
|