@usecapsule/core-components 2.0.9 → 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +54 -19
- package/css/capsule-core.css.map +1 -1
- 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-415384b7.entry.js → p-0d0a0037.entry.js} +2 -2
- package/dist/capsule/p-4d8e4d86.entry.js +29 -0
- package/dist/capsule/p-4d8e4d86.entry.js.map +1 -0
- package/dist/capsule/p-86e48e61.js +3 -0
- package/dist/capsule/p-86e48e61.js.map +1 -0
- package/dist/capsule/p-ad14a817.entry.js +2 -0
- package/dist/capsule/p-b6b38e73.js +2 -0
- package/dist/capsule/p-b6b38e73.js.map +1 -0
- package/dist/capsule/p-d28b96ba.entry.js +10 -0
- package/dist/capsule/{p-b76350fd.entry.js.map → p-d28b96ba.entry.js.map} +1 -1
- package/dist/capsule/{p-4d957466.entry.js → p-fa078837.entry.js} +2 -2
- package/dist/capsule/{p-fa4e3c14.entry.js → p-fcead80b.entry.js} +2 -2
- package/dist/cjs/capsule.cjs.js +2 -2
- package/dist/cjs/constants-0869a780.js +29 -0
- package/dist/cjs/constants-0869a780.js.map +1 -0
- package/dist/cjs/{cpsl-alert_18.cjs.entry.js → cpsl-alert_29.cjs.entry.js} +598 -185
- package/dist/cjs/cpsl-alert_29.cjs.entry.js.map +1 -0
- package/dist/cjs/cpsl-animation.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-info-box.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
- package/dist/cjs/{index-87ba56f9.js → index-5733071e.js} +6 -3
- package/dist/cjs/index-5733071e.js.map +1 -0
- package/dist/cjs/index.cjs.js +53 -24
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/icons/check-circle.svg +3 -0
- package/dist/collection/assets/icons/home.svg +3 -0
- package/dist/collection/assets/icons/index.js +4 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/settings.svg +4 -0
- package/dist/collection/collection-manifest.json +11 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.css +21 -11
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +34 -26
- package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +1 -1
- package/dist/collection/components/cpsl-animation/cpsl-animation.js +1 -1
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.css +67 -0
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +69 -0
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map +1 -0
- package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.e2e.js +29 -0
- package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js +37 -0
- package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js.map +1 -0
- package/dist/collection/components/cpsl-avatar/cpsl-avatar.css +31 -0
- package/dist/collection/components/cpsl-avatar/cpsl-avatar.js +81 -0
- package/dist/collection/components/cpsl-avatar/cpsl-avatar.js.map +1 -0
- package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js +29 -0
- package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js +37 -0
- package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js.map +1 -0
- package/dist/collection/components/cpsl-button/cpsl-button.css +175 -51
- package/dist/collection/components/cpsl-button/cpsl-button.js +46 -5
- package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
- package/dist/collection/components/cpsl-button-group/cpsl-button-group.css +88 -0
- package/dist/collection/components/cpsl-button-group/cpsl-button-group.js +78 -0
- package/dist/collection/components/cpsl-button-group/cpsl-button-group.js.map +1 -0
- package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.e2e.js +29 -0
- package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.spec.js +37 -0
- package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.spec.js.map +1 -0
- package/dist/collection/components/cpsl-card/cpsl-card.css +81 -0
- package/dist/collection/components/cpsl-card/cpsl-card.js +19 -0
- package/dist/collection/components/cpsl-card/cpsl-card.js.map +1 -0
- package/dist/collection/components/cpsl-card/test/cpsl-card.e2e.js +29 -0
- package/dist/collection/components/cpsl-card/test/cpsl-card.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-card/test/cpsl-card.spec.js +37 -0
- package/dist/collection/components/cpsl-card/test/cpsl-card.spec.js.map +1 -0
- package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.css +110 -0
- package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js +64 -0
- package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js.map +1 -0
- package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.e2e.js +29 -0
- package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.spec.js +37 -0
- package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.spec.js.map +1 -0
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
- package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
- package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.css +90 -0
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +149 -0
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map +1 -0
- package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.e2e.js +29 -0
- package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.spec.js +37 -0
- package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.spec.js.map +1 -0
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
- package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +35 -19
- package/dist/collection/components/cpsl-input/cpsl-input.js +47 -6
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.css +12 -2
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +20 -2
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.css +50 -0
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +78 -0
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js.map +1 -0
- package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.e2e.js +29 -0
- package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.spec.js +37 -0
- package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.spec.js.map +1 -0
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.css +61 -3
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +35 -17
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.css +67 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +174 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js.map +1 -0
- package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.e2e.js +29 -0
- package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.spec.js +37 -0
- package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.spec.js.map +1 -0
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
- package/dist/collection/components/cpsl-radio/cpsl-radio.css +97 -0
- package/dist/collection/components/cpsl-radio/cpsl-radio.js +66 -0
- package/dist/collection/components/cpsl-radio/cpsl-radio.js.map +1 -0
- package/dist/collection/components/cpsl-radio/test/cpsl-radio.e2e.js +29 -0
- package/dist/collection/components/cpsl-radio/test/cpsl-radio.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-radio/test/cpsl-radio.spec.js +37 -0
- package/dist/collection/components/cpsl-radio/test/cpsl-radio.spec.js.map +1 -0
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-switch/cpsl-switch.css +115 -0
- package/dist/collection/components/cpsl-switch/cpsl-switch.js +64 -0
- package/dist/collection/components/cpsl-switch/cpsl-switch.js.map +1 -0
- package/dist/collection/components/cpsl-switch/test/cpsl-switch.e2e.js +29 -0
- package/dist/collection/components/cpsl-switch/test/cpsl-switch.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-switch/test/cpsl-switch.spec.js +37 -0
- package/dist/collection/components/cpsl-switch/test/cpsl-switch.spec.js.map +1 -0
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.css +179 -0
- package/dist/collection/components/cpsl-table/cpsl-table.js +88 -0
- package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -0
- package/dist/collection/components/cpsl-table/table-interface.js +2 -0
- package/dist/collection/components/cpsl-table/table-interface.js.map +1 -0
- package/dist/collection/components/cpsl-table/test/cpsl-table.e2e.js +29 -0
- package/dist/collection/components/cpsl-table/test/cpsl-table.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-table/test/cpsl-table.spec.js +37 -0
- package/dist/collection/components/cpsl-table/test/cpsl-table.spec.js.map +1 -0
- 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 +2 -2
- package/dist/collection/constants.js +14 -0
- package/dist/collection/constants.js.map +1 -1
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateBorderRadii.js +24 -7
- package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
- package/dist/collection/utils/theme/generatePalette.js +22 -18
- package/dist/collection/utils/theme/generatePalette.js.map +1 -1
- package/dist/collection/utils/theme/utils.js +8 -0
- package/dist/collection/utils/theme/utils.js.map +1 -1
- package/dist/esm/capsule.js +3 -3
- package/dist/esm/constants-6acf4ea8.js +23 -0
- package/dist/esm/constants-6acf4ea8.js.map +1 -0
- package/dist/esm/{cpsl-alert_18.entry.js → cpsl-alert_29.entry.js} +588 -186
- package/dist/esm/cpsl-alert_29.entry.js.map +1 -0
- package/dist/esm/cpsl-animation.entry.js +2 -2
- package/dist/esm/cpsl-col.entry.js +2 -2
- package/dist/esm/cpsl-grid.entry.js +3 -3
- package/dist/esm/cpsl-info-box.entry.js +2 -2
- package/dist/esm/cpsl-row.entry.js +2 -2
- package/dist/esm/{index-fd970ca2.js → index-8fe9f35e.js} +6 -3
- package/dist/esm/index-8fe9f35e.js.map +1 -0
- package/dist/esm/index.js +53 -24
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/assets/icons/index.d.ts +3 -0
- package/dist/types/components/cpsl-alert/cpsl-alert.d.ts +2 -2
- package/dist/types/components/cpsl-app-bar/cpsl-app-bar.d.ts +5 -0
- package/dist/types/components/cpsl-avatar/cpsl-avatar.d.ts +6 -0
- package/dist/types/components/cpsl-button/cpsl-button.d.ts +2 -0
- package/dist/types/components/cpsl-button-group/cpsl-button-group.d.ts +9 -0
- package/dist/types/components/cpsl-card/cpsl-card.d.ts +3 -0
- package/dist/types/components/cpsl-checkbox/cpsl-checkbox.d.ts +7 -0
- package/dist/types/components/cpsl-drawer/cpsl-drawer.d.ts +9 -0
- package/dist/types/components/cpsl-input/cpsl-input.d.ts +4 -0
- package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +1 -0
- package/dist/types/components/cpsl-nav-button-group/cpsl-nav-button-group.d.ts +9 -0
- package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -1
- package/dist/types/components/cpsl-pagination/cpsl-pagination.d.ts +14 -0
- package/dist/types/components/cpsl-radio/cpsl-radio.d.ts +7 -0
- package/dist/types/components/cpsl-switch/cpsl-switch.d.ts +7 -0
- package/dist/types/components/cpsl-table/cpsl-table.d.ts +9 -0
- package/dist/types/components/cpsl-table/table-interface.d.ts +19 -0
- package/dist/types/components.d.ts +435 -6
- package/dist/types/constants.d.ts +14 -0
- package/dist/types/interface.d.ts +35 -0
- package/dist/types/utils/theme/utils.d.ts +1 -0
- package/package.json +3 -2
- package/dist/capsule/p-2ce99420.entry.js +0 -29
- package/dist/capsule/p-2ce99420.entry.js.map +0 -1
- package/dist/capsule/p-6b02ea8d.entry.js +0 -2
- package/dist/capsule/p-b2997f3c.js +0 -3
- package/dist/capsule/p-b2997f3c.js.map +0 -1
- package/dist/capsule/p-b76350fd.entry.js +0 -10
- package/dist/capsule/p-c2bf050b.js +0 -2
- package/dist/capsule/p-c2bf050b.js.map +0 -1
- package/dist/cjs/constants-4bb85cc5.js +0 -12
- package/dist/cjs/constants-4bb85cc5.js.map +0 -1
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +0 -1
- package/dist/cjs/index-87ba56f9.js.map +0 -1
- package/dist/esm/constants-7b49abd5.js +0 -9
- package/dist/esm/constants-7b49abd5.js.map +0 -1
- package/dist/esm/cpsl-alert_18.entry.js.map +0 -1
- package/dist/esm/index-fd970ca2.js.map +0 -1
- /package/dist/capsule/{p-415384b7.entry.js.map → p-0d0a0037.entry.js.map} +0 -0
- /package/dist/capsule/{p-6b02ea8d.entry.js.map → p-ad14a817.entry.js.map} +0 -0
- /package/dist/capsule/{p-4d957466.entry.js.map → p-fa078837.entry.js.map} +0 -0
- /package/dist/capsule/{p-fa4e3c14.entry.js.map → p-fcead80b.entry.js.map} +0 -0
- /package/dist/types/Users/{vinay → taylorbosch}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -0,0 +1,31 @@
|
|
1
|
+
:host {
|
2
|
+
--container-border-color: var(--cpsl-color-avatar-border);
|
3
|
+
--container-border-width: 1px;
|
4
|
+
--container-border-radius: var(--cpsl-border-radius-avatar);
|
5
|
+
--container-background-color: var(--cpsl-color-avatar-surface);
|
6
|
+
--container-padding: 4px;
|
7
|
+
--container-height: 40px;
|
8
|
+
--container-width: 40px;
|
9
|
+
display: block;
|
10
|
+
height: 100%;
|
11
|
+
width: 100%;
|
12
|
+
}
|
13
|
+
|
14
|
+
span {
|
15
|
+
display: inline-block;
|
16
|
+
height: var(--container-height);
|
17
|
+
width: var(--container-width);
|
18
|
+
border: var(--container-border-width) solid var(--container-border-color);
|
19
|
+
border-radius: var(--container-border-radius);
|
20
|
+
padding: var(--container-padding);
|
21
|
+
background-color: var(--container-background-color);
|
22
|
+
}
|
23
|
+
span.round {
|
24
|
+
border-radius: 1000px;
|
25
|
+
}
|
26
|
+
|
27
|
+
img {
|
28
|
+
width: 100%;
|
29
|
+
height: 100%;
|
30
|
+
object-fit: contain;
|
31
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
2
|
+
export class CpslAvatar {
|
3
|
+
constructor() {
|
4
|
+
this.alt = undefined;
|
5
|
+
this.src = undefined;
|
6
|
+
this.variant = 'square';
|
7
|
+
}
|
8
|
+
render() {
|
9
|
+
var _a;
|
10
|
+
return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
|
11
|
+
}
|
12
|
+
static get is() { return "cpsl-avatar"; }
|
13
|
+
static get encapsulation() { return "shadow"; }
|
14
|
+
static get originalStyleUrls() {
|
15
|
+
return {
|
16
|
+
"$": ["cpsl-avatar.scss"]
|
17
|
+
};
|
18
|
+
}
|
19
|
+
static get styleUrls() {
|
20
|
+
return {
|
21
|
+
"$": ["cpsl-avatar.css"]
|
22
|
+
};
|
23
|
+
}
|
24
|
+
static get properties() {
|
25
|
+
return {
|
26
|
+
"alt": {
|
27
|
+
"type": "string",
|
28
|
+
"mutable": false,
|
29
|
+
"complexType": {
|
30
|
+
"original": "string",
|
31
|
+
"resolved": "string",
|
32
|
+
"references": {}
|
33
|
+
},
|
34
|
+
"required": false,
|
35
|
+
"optional": true,
|
36
|
+
"docs": {
|
37
|
+
"tags": [],
|
38
|
+
"text": "The alternate text for the avatar image."
|
39
|
+
},
|
40
|
+
"attribute": "alt",
|
41
|
+
"reflect": false
|
42
|
+
},
|
43
|
+
"src": {
|
44
|
+
"type": "string",
|
45
|
+
"mutable": false,
|
46
|
+
"complexType": {
|
47
|
+
"original": "string",
|
48
|
+
"resolved": "string",
|
49
|
+
"references": {}
|
50
|
+
},
|
51
|
+
"required": false,
|
52
|
+
"optional": false,
|
53
|
+
"docs": {
|
54
|
+
"tags": [],
|
55
|
+
"text": "The source of the avatar image."
|
56
|
+
},
|
57
|
+
"attribute": "src",
|
58
|
+
"reflect": false
|
59
|
+
},
|
60
|
+
"variant": {
|
61
|
+
"type": "string",
|
62
|
+
"mutable": false,
|
63
|
+
"complexType": {
|
64
|
+
"original": "'round' | 'square'",
|
65
|
+
"resolved": "\"round\" | \"square\"",
|
66
|
+
"references": {}
|
67
|
+
},
|
68
|
+
"required": false,
|
69
|
+
"optional": true,
|
70
|
+
"docs": {
|
71
|
+
"tags": [],
|
72
|
+
"text": "The variant of the avatar.\nOptions are: `\"round\"`, `\"square\".\nDefault is: `\"square\"`."
|
73
|
+
},
|
74
|
+
"attribute": "variant",
|
75
|
+
"reflect": false,
|
76
|
+
"defaultValue": "'square'"
|
77
|
+
}
|
78
|
+
};
|
79
|
+
}
|
80
|
+
}
|
81
|
+
//# sourceMappingURL=cpsl-avatar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"cpsl-avatar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-avatar/cpsl-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;uBAgBkB,QAAQ;;IAE/C,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;gBAC9C,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,QAAQ,GAAI,CAC5C,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-avatar',\n styleUrl: 'cpsl-avatar.scss',\n shadow: true,\n})\nexport class CpslAvatar {\n /**\n * The alternate text for the avatar image.\n */\n @Prop() alt?: string;\n\n /**\n * The source of the avatar image.\n */\n @Prop() src: string;\n\n /**\n * The variant of the avatar.\n * Options are: `\"round\"`, `\"square\".\n * Default is: `\"square\"`.\n */\n @Prop() variant?: 'round' | 'square' = 'square';\n\n render() {\n return (\n <Host>\n <span class={{ round: this.variant === 'round' }}>\n <img src={this.src} alt={this.alt ?? 'avatar'} />\n </span>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try {
|
5
|
+
step(generator.next(value));
|
6
|
+
}
|
7
|
+
catch (e) {
|
8
|
+
reject(e);
|
9
|
+
} }
|
10
|
+
function rejected(value) { try {
|
11
|
+
step(generator["throw"](value));
|
12
|
+
}
|
13
|
+
catch (e) {
|
14
|
+
reject(e);
|
15
|
+
} }
|
16
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
17
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
18
|
+
});
|
19
|
+
};
|
20
|
+
import { newE2EPage } from "@stencil/core/testing";
|
21
|
+
describe('cpsl-avatar', () => {
|
22
|
+
it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
|
23
|
+
const page = yield newE2EPage();
|
24
|
+
yield page.setContent('<cpsl-avatar></cpsl-avatar>');
|
25
|
+
const element = yield page.find('cpsl-avatar');
|
26
|
+
expect(element).toHaveClass('hydrated');
|
27
|
+
}));
|
28
|
+
});
|
29
|
+
//# sourceMappingURL=cpsl-avatar.e2e.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"cpsl-avatar.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-avatar/test/cpsl-avatar.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;QAErD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-avatar', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<cpsl-avatar></cpsl-avatar>');\n\n const element = await page.find('cpsl-avatar');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try {
|
5
|
+
step(generator.next(value));
|
6
|
+
}
|
7
|
+
catch (e) {
|
8
|
+
reject(e);
|
9
|
+
} }
|
10
|
+
function rejected(value) { try {
|
11
|
+
step(generator["throw"](value));
|
12
|
+
}
|
13
|
+
catch (e) {
|
14
|
+
reject(e);
|
15
|
+
} }
|
16
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
17
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
18
|
+
});
|
19
|
+
};
|
20
|
+
import { newSpecPage } from "@stencil/core/testing";
|
21
|
+
import { CpslAvatar } from "../cpsl-avatar";
|
22
|
+
describe('cpsl-avatar', () => {
|
23
|
+
it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
|
24
|
+
const page = yield newSpecPage({
|
25
|
+
components: [CpslAvatar],
|
26
|
+
html: `<cpsl-avatar></cpsl-avatar>`,
|
27
|
+
});
|
28
|
+
expect(page.root).toEqualHtml(`
|
29
|
+
<cpsl-avatar>
|
30
|
+
<mock:shadow-root>
|
31
|
+
<slot></slot>
|
32
|
+
</mock:shadow-root>
|
33
|
+
</cpsl-avatar>
|
34
|
+
`);
|
35
|
+
}));
|
36
|
+
});
|
37
|
+
//# sourceMappingURL=cpsl-avatar.spec.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"cpsl-avatar.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-avatar/test/cpsl-avatar.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslAvatar } from '../cpsl-avatar';\n\ndescribe('cpsl-avatar', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [CpslAvatar],\n html: `<cpsl-avatar></cpsl-avatar>`,\n });\n expect(page.root).toEqualHtml(`\n <cpsl-avatar>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </cpsl-avatar>\n `);\n });\n});\n"]}
|
@@ -54,109 +54,233 @@
|
|
54
54
|
* }
|
55
55
|
*/
|
56
56
|
:host {
|
57
|
-
--button-border-radius: var(--cpsl-border-radius-primary-button);
|
58
57
|
--button-border-width: 1px;
|
59
|
-
--button-
|
60
|
-
--button-
|
61
|
-
--button-
|
62
|
-
--button-
|
58
|
+
--button-border-width-start: var(--button-border-width);
|
59
|
+
--button-border-width-end: var(--button-border-width);
|
60
|
+
--button-border-width-top: var(--button-border-width);
|
61
|
+
--button-border-width-bottom: var(--button-border-width);
|
62
|
+
--button-gap: 8px;
|
63
|
+
--button-justify-content: center;
|
64
|
+
--button-border-radius-top-start: var(--button-border-radius);
|
65
|
+
--button-border-radius-top-end: var(--button-border-radius);
|
66
|
+
--button-border-radius-bottom-end: var(--button-border-radius);
|
67
|
+
--button-border-radius-bottom-start: var(--button-border-radius);
|
63
68
|
--button-padding-start: 16px;
|
64
69
|
--button-padding-end: 16px;
|
65
|
-
--button-
|
70
|
+
--button-icon-size: var(--cpls-font-size-body-l);
|
71
|
+
--button-primary-color: var(--cpsl-color-primary-button-text);
|
72
|
+
--button-primary-background-color: var(--cpsl-color-primary-button-surface-default);
|
73
|
+
--button-primary-border-color: var(--cpsl-color-primary-button-border-default);
|
74
|
+
--button-primary-icon-color: var(--cpsl-color-primary-button-text);
|
75
|
+
--button-primary-disabled-color: var(--cpsl-color-primary-button-text);
|
76
|
+
--button-primary-disabled-background-color: var(--cpsl-color-primary-button-surface-disabled);
|
77
|
+
--button-primary-disabled-border-color: var(--cpsl-color-primary-button-border-disabled);
|
78
|
+
--button-primary-disabled-icon-color: var(--cpsl-color-primary-button-text);
|
79
|
+
--button-primary-hover-color: var(--cpsl-color-primary-button-text);
|
80
|
+
--button-primary-hover-background-color: var(--cpsl-color-primary-button-surface-hover);
|
81
|
+
--button-primary-hover-border-color: var(--cpsl-color-primary-button-surface-hover);
|
82
|
+
--button-primary-hover-icon-color: var(--cpsl-color-primary-button-text);
|
83
|
+
--button-primary-active-color: var(--cpsl-color-primary-button-text);
|
84
|
+
--button-primary-active-background-color: var(--cpsl-color-primary-button-surface-pressed);
|
85
|
+
--button-primary-active-border-color: var(--cpsl-color-primary-button-surface-pressed);
|
86
|
+
--button-primary-active-icon-color: var(--cpsl-color-primary-button-text);
|
87
|
+
--button-secondary-color: var(--cpsl-color-secondary-button-text);
|
88
|
+
--button-secondary-background-color: var(--cpsl-color-secondary-button-surface-default);
|
89
|
+
--button-secondary-border-color: var(--cpsl-color-secondary-button-border-default);
|
90
|
+
--button-secondary-icon-color: var(--cpsl-color-secondary-button-text);
|
91
|
+
--button-secondary-disabled-color: var(--cpsl-color-secondary-button-text);
|
92
|
+
--button-secondary-disabled-background-color: var(--cpsl-color-secondary-button-surface-disabled);
|
93
|
+
--button-secondary-disabled-border-color: var(--cpsl-color-secondary-button-border-disabled);
|
94
|
+
--button-secondary-disabled-icon-color: var(--cpsl-color-secondary-button-text);
|
95
|
+
--button-secondary-hover-color: var(--cpsl-color-secondary-button-text);
|
96
|
+
--button-secondary-hover-background-color: var(--cpsl-color-secondary-button-surface-hover);
|
97
|
+
--button-secondary-hover-border-color: var(--cpsl-color-secondary-button-border-default);
|
98
|
+
--button-secondary-hover-icon-color: var(--cpsl-color-secondary-button-text);
|
99
|
+
--button-secondary-active-color: var(--cpsl-color-secondary-button-text);
|
100
|
+
--button-secondary-active-background-color: var(--cpsl-color-secondary-button-surface-pressed);
|
101
|
+
--button-secondary-active-border-color: var(--cpsl-color-secondary-button-border-default);
|
102
|
+
--button-secondary-active-icon-color: var(--cpsl-color-secondary-button-text);
|
103
|
+
--button-icon-color: var(--cpsl-color-icon-button-default);
|
104
|
+
--button-icon-disabled-color: var(--cpsl-color-icon-button-disabled);
|
105
|
+
--button-icon-hover-color: var(--cpsl-color-icon-button-hover);
|
66
106
|
height: 100%;
|
67
|
-
|
107
|
+
display: inline-block;
|
68
108
|
font-family: var(--cpsl-font-family, inherit);
|
69
109
|
}
|
70
110
|
|
71
|
-
:host(.
|
111
|
+
:host(.full-width) {
|
112
|
+
width: 100%;
|
113
|
+
display: block;
|
114
|
+
}
|
115
|
+
:host(.full-width) .button-native {
|
116
|
+
width: 100%;
|
117
|
+
}
|
118
|
+
|
119
|
+
:host(.small) {
|
120
|
+
--button-font-size: var(--cpsl-font-size-body-s);
|
121
|
+
--button-padding-top: 12px;
|
122
|
+
--button-padding-bottom: 12px;
|
123
|
+
--button-icon-size: var(--cpsl-font-size-body-m);
|
124
|
+
}
|
125
|
+
|
126
|
+
:host(.medium) {
|
127
|
+
--button-font-size: var(--cpsl-font-size-body-m);
|
128
|
+
--button-padding-top: 14px;
|
129
|
+
--button-padding-bottom: 14px;
|
130
|
+
--button-icon-size: var(--cpsl-font-size-body-l);
|
131
|
+
}
|
132
|
+
|
133
|
+
:host(.disabled) {
|
72
134
|
cursor: default;
|
73
135
|
pointer-events: none;
|
74
136
|
}
|
75
137
|
|
138
|
+
:host ::slotted(cpsl-icon) {
|
139
|
+
--height: var(--button-icon-size);
|
140
|
+
--width: var(--button-icon-size);
|
141
|
+
}
|
142
|
+
|
76
143
|
:host(.primary) {
|
77
|
-
--button-
|
78
|
-
--button-
|
79
|
-
--button-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
--
|
84
|
-
|
144
|
+
--button-border-radius: var(--cpsl-border-radius-primary-button);
|
145
|
+
--button-color: var(--button-primary-color);
|
146
|
+
--button-background-color: var(--button-primary-background-color);
|
147
|
+
--button-border-color: var(--button-primary-border-color);
|
148
|
+
}
|
149
|
+
:host(.primary) ::slotted(cpsl-icon) {
|
150
|
+
--icon-color: var(--button-primary-icon-color);
|
151
|
+
}
|
152
|
+
:host(.primary):host(.disabled) {
|
153
|
+
--button-color: var(--button-primary-disabled-color);
|
154
|
+
--button-background-color: var(--button-primary-disabled-background-color);
|
155
|
+
--button-border-color: var(--button-primary-disabled-border-color);
|
85
156
|
--button-outline-color: transparent;
|
86
157
|
}
|
87
|
-
:host(.primary)
|
88
|
-
--
|
158
|
+
:host(.primary):host(.disabled) ::slotted(cpsl-icon) {
|
159
|
+
--icon-color: var(--button-primary-disabled-icon-color);
|
89
160
|
}
|
90
|
-
:host(.primary) :not(.
|
91
|
-
--button-
|
161
|
+
:host(.primary) :not(.disabled):hover {
|
162
|
+
--button-color: var(--button-primary-hover-color);
|
163
|
+
--button-background-color: var(--button-primary-hover-background-color);
|
164
|
+
--button-border-color: var(--button-primary-hover-border-color);
|
92
165
|
}
|
93
|
-
:host(.primary) :not(.
|
94
|
-
--
|
166
|
+
:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon) {
|
167
|
+
--icon-color: var(--button-primary-hover-icon-color);
|
95
168
|
}
|
96
|
-
:host(.primary)
|
97
|
-
--
|
169
|
+
:host(.primary) :not(.disabled):active {
|
170
|
+
--button-color: var(--button-primary-active-color);
|
171
|
+
--button-background-color: var(--button-primary-active-background-color);
|
172
|
+
--button-border-color: var(--button-primary-active-border-color);
|
173
|
+
}
|
174
|
+
:host(.primary) :not(.disabled):active ::slotted(cpsl-icon) {
|
175
|
+
--icon-color: var(--button-primary-active-icon-color);
|
176
|
+
}
|
177
|
+
:host(.primary) :not(.disabled):focus-visible {
|
178
|
+
--button-outline-color: var(--cpsl-color-primary-button-outline);
|
98
179
|
}
|
99
180
|
|
100
181
|
:host(.secondary) {
|
101
|
-
--button-
|
102
|
-
--button-
|
103
|
-
--button-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
--
|
108
|
-
|
182
|
+
--button-border-radius: var(--cpsl-border-radius-secondary-button);
|
183
|
+
--button-color: var(--button-secondary-color);
|
184
|
+
--button-background-color: var(--button-primary-secondary-color);
|
185
|
+
--button-border-color: var(--button-secondary-border-color);
|
186
|
+
}
|
187
|
+
:host(.secondary) ::slotted(cpsl-icon) {
|
188
|
+
--icon-color: var(--button-secondary-icon-color);
|
189
|
+
}
|
190
|
+
:host(.secondary):host(.disabled) {
|
191
|
+
--button-color: var(--button-secondary-disabled-color);
|
192
|
+
--button-background-color: var(--button-secondary-disabled-background-color);
|
193
|
+
--button-border-color: var(--button-secondary-disabled-border-color);
|
109
194
|
--button-outline-color: transparent;
|
110
195
|
}
|
111
|
-
:host(.secondary)
|
112
|
-
--
|
196
|
+
:host(.secondary):host(.disabled) ::slotted(cpsl-icon) {
|
197
|
+
--icon-color: var(--button-secondary-disabled-icon-color);
|
113
198
|
}
|
114
|
-
:host(.secondary) :not(.
|
115
|
-
--button-
|
199
|
+
:host(.secondary) :not(.disabled):hover {
|
200
|
+
--button-color: var(--button-secondary-hover-color);
|
201
|
+
--button-border-color: var(--button-secondary-hover-border-color);
|
202
|
+
--button-background-color: var(--button-secondary-hover-background-color);
|
116
203
|
}
|
117
|
-
:host(.secondary) :not(.
|
118
|
-
--
|
204
|
+
:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon) {
|
205
|
+
--icon-color: var(--button-secondary-hover-icon-color);
|
119
206
|
}
|
120
|
-
:host(.secondary)
|
121
|
-
--
|
207
|
+
:host(.secondary) :not(.disabled):active {
|
208
|
+
--button-color: var(--button-secondary-active-color);
|
209
|
+
--button-border-color: var(--button-secondary-active-border-color);
|
210
|
+
--button-background-color: var(--button-secondary-active-background-color);
|
211
|
+
}
|
212
|
+
:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon) {
|
213
|
+
--icon-color: var(--button-secondary-active-icon-color);
|
214
|
+
}
|
215
|
+
:host(.secondary) :not(.disabled):focus-visible {
|
216
|
+
--button-outline-color: var(--cpsl-color-secondary-button-outline);
|
122
217
|
}
|
123
218
|
|
124
219
|
:host(.icon) {
|
125
220
|
--button-color: transparent;
|
126
221
|
--button-background-color: transparent;
|
127
222
|
--button-border-color: transparent;
|
128
|
-
--button-box-shadow: none;
|
129
223
|
--button-outline-color: transparent;
|
130
224
|
}
|
131
225
|
:host(.icon) ::slotted(cpsl-icon) {
|
132
|
-
--icon-color: var(--
|
226
|
+
--icon-color: var(--button-icon-color);
|
133
227
|
}
|
134
|
-
:host(.icon)
|
135
|
-
--icon-color: var(--
|
228
|
+
:host(.icon):host(.disabled) ::slotted(cpsl-icon) {
|
229
|
+
--icon-color: var(--button-icon-disabled-color);
|
230
|
+
}
|
231
|
+
:host(.icon) :not(.disabled):hover ::slotted(cpsl-icon) {
|
232
|
+
--icon-color: var(--button-icon-hover-color);
|
136
233
|
}
|
137
234
|
|
138
235
|
.button-native {
|
139
|
-
border-radius: var(--button-border-radius);
|
236
|
+
border-top-left-radius: var(--button-border-radius-top-start);
|
237
|
+
border-top-right-radius: var(--button-border-radius-top-end);
|
238
|
+
border-bottom-right-radius: var(--button-border-radius-bottom-end);
|
239
|
+
border-bottom-left-radius: var(--button-border-radius-bottom-start);
|
140
240
|
-webkit-padding-start: var(--button-padding-start);
|
141
241
|
padding-inline-start: var(--button-padding-start);
|
142
242
|
-webkit-padding-end: var(--button-padding-end);
|
143
243
|
padding-inline-end: var(--button-padding-end);
|
144
244
|
padding-top: var(--button-padding-top);
|
145
245
|
padding-bottom: var(--button-padding-bottom);
|
146
|
-
font-size: var(--
|
147
|
-
|
148
|
-
border: var(--button-border-width)
|
246
|
+
font-size: var(--button-font-size);
|
247
|
+
border: 0px solid transparent;
|
248
|
+
border-width: var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);
|
149
249
|
cursor: pointer;
|
150
250
|
color: var(--button-color);
|
151
251
|
background-color: var(--button-background-color);
|
152
252
|
border-color: var(--button-border-color);
|
153
253
|
display: flex;
|
154
|
-
justify-content:
|
254
|
+
justify-content: var(--button-justify-content);
|
155
255
|
align-items: center;
|
156
256
|
height: 100%;
|
157
|
-
width: 100%;
|
158
|
-
box-shadow: var(--button-box-shadow);
|
159
257
|
gap: var(--button-gap);
|
160
258
|
word-break: break-all;
|
161
259
|
outline-color: var(--button-outline-color);
|
260
|
+
}
|
261
|
+
:host-context([dir=rtl]) .button-native {
|
262
|
+
border-top-left-radius: var(--button-border-radius-top-end);
|
263
|
+
border-top-right-radius: var(--button-border-radius-top-start);
|
264
|
+
border-bottom-right-radius: var(--button-border-radius-bottom-start);
|
265
|
+
border-bottom-left-radius: var(--button-border-radius-bottom-end);
|
266
|
+
}
|
267
|
+
|
268
|
+
[dir=rtl] .button-native {
|
269
|
+
border-top-left-radius: var(--button-border-radius-top-end);
|
270
|
+
border-top-right-radius: var(--button-border-radius-top-start);
|
271
|
+
border-bottom-right-radius: var(--button-border-radius-bottom-start);
|
272
|
+
border-bottom-left-radius: var(--button-border-radius-bottom-end);
|
273
|
+
}
|
274
|
+
|
275
|
+
@supports selector(:dir(rtl)) {
|
276
|
+
.button-native:dir(rtl) {
|
277
|
+
border-top-left-radius: var(--button-border-radius-top-end);
|
278
|
+
border-top-right-radius: var(--button-border-radius-top-start);
|
279
|
+
border-bottom-right-radius: var(--button-border-radius-bottom-start);
|
280
|
+
border-bottom-left-radius: var(--button-border-radius-bottom-end);
|
281
|
+
}
|
282
|
+
}
|
283
|
+
|
284
|
+
:host ::slotted(cpsl-text) {
|
285
|
+
color: var(--button-color);
|
162
286
|
}
|
@@ -2,15 +2,20 @@ import { Host, h } from "@stencil/core";
|
|
2
2
|
export class CpslButton {
|
3
3
|
constructor() {
|
4
4
|
this.disabled = false;
|
5
|
+
this.fullWidth = false;
|
6
|
+
this.size = 'medium';
|
5
7
|
this.variant = 'primary';
|
6
8
|
}
|
7
9
|
render() {
|
8
|
-
return (h(Host, { key: '
|
10
|
+
return (h(Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
|
9
11
|
'primary': this.variant === 'primary',
|
10
12
|
'secondary': this.variant === 'secondary',
|
11
13
|
'icon': this.variant === 'icon',
|
12
|
-
'
|
13
|
-
|
14
|
+
'disabled': this.disabled,
|
15
|
+
'full-width': this.fullWidth,
|
16
|
+
'small': this.size === 'small',
|
17
|
+
'medium': this.size === 'medium',
|
18
|
+
} }, h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', name: "end" }))));
|
14
19
|
}
|
15
20
|
static get is() { return "cpsl-button"; }
|
16
21
|
static get encapsulation() { return "shadow"; }
|
@@ -44,6 +49,42 @@ export class CpslButton {
|
|
44
49
|
"reflect": true,
|
45
50
|
"defaultValue": "false"
|
46
51
|
},
|
52
|
+
"fullWidth": {
|
53
|
+
"type": "boolean",
|
54
|
+
"mutable": false,
|
55
|
+
"complexType": {
|
56
|
+
"original": "boolean",
|
57
|
+
"resolved": "boolean",
|
58
|
+
"references": {}
|
59
|
+
},
|
60
|
+
"required": false,
|
61
|
+
"optional": true,
|
62
|
+
"docs": {
|
63
|
+
"tags": [],
|
64
|
+
"text": "Whether the button takes the full width of it's container.\nDefault is: false."
|
65
|
+
},
|
66
|
+
"attribute": "full-width",
|
67
|
+
"reflect": false,
|
68
|
+
"defaultValue": "false"
|
69
|
+
},
|
70
|
+
"size": {
|
71
|
+
"type": "string",
|
72
|
+
"mutable": false,
|
73
|
+
"complexType": {
|
74
|
+
"original": "'small' | 'medium'",
|
75
|
+
"resolved": "\"medium\" | \"small\"",
|
76
|
+
"references": {}
|
77
|
+
},
|
78
|
+
"required": false,
|
79
|
+
"optional": true,
|
80
|
+
"docs": {
|
81
|
+
"tags": [],
|
82
|
+
"text": "The size of the button.\nOptions are: `\"small\"`, `\"medium\".\nDefault is: `\"medium\"`."
|
83
|
+
},
|
84
|
+
"attribute": "size",
|
85
|
+
"reflect": false,
|
86
|
+
"defaultValue": "'medium'"
|
87
|
+
},
|
47
88
|
"variant": {
|
48
89
|
"type": "string",
|
49
90
|
"mutable": false,
|
@@ -56,10 +97,10 @@ export class CpslButton {
|
|
56
97
|
"optional": true,
|
57
98
|
"docs": {
|
58
99
|
"tags": [],
|
59
|
-
"text": "The variant of button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
|
100
|
+
"text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
|
60
101
|
},
|
61
102
|
"attribute": "variant",
|
62
|
-
"reflect":
|
103
|
+
"reflect": false,
|
63
104
|
"defaultValue": "'primary'"
|
64
105
|
}
|
65
106
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;
|
1
|
+
{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;yBAMrB,KAAK;oBAOC,QAAQ;uBAOS,SAAS;;IAE9D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAE/B,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAE5B,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,+DAAQ,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBAChD,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACjB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-button',\n styleUrl: 'cpsl-button.scss',\n shadow: true,\n})\nexport class CpslButton {\n /**\n * If the button is disabled.\n * Default is: false.\n */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /**\n * Whether the button takes the full width of it's container.\n * Default is: false.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The size of the button.\n * Options are: `\"small\"`, `\"medium\".\n * Default is: `\"medium\"`.\n */\n @Prop() size?: 'small' | 'medium' = 'medium';\n\n /**\n * The variant of the button.\n * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n * Default is: `\"primary\"`.\n */\n @Prop() variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n 'icon': this.variant === 'icon',\n // STATE\n 'disabled': this.disabled,\n 'full-width': this.fullWidth,\n // SIZES\n 'small': this.size === 'small',\n 'medium': this.size === 'medium',\n }}\n >\n <button part=\"button-native\" class=\"button-native\">\n <slot name=\"start\"></slot>\n <slot></slot>\n <slot name=\"end\"></slot>\n </button>\n </Host>\n );\n }\n}\n"]}
|