@usecapsule/core-components 3.5.0 → 3.5.1-dev.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +1 -1
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/{p-f0cd0482.entry.js → p-41bc3c58.entry.js} +2 -2
- package/dist/capsule/p-4da7328c.entry.js +20 -0
- package/dist/capsule/p-4da7328c.entry.js.map +1 -0
- package/dist/capsule/{p-c33942ad.entry.js → p-52bb30d8.entry.js} +2 -2
- package/dist/capsule/{p-5965b15e.entry.js → p-5cd62456.entry.js} +2 -2
- package/dist/capsule/{p-b96e357a.entry.js → p-7dff759e.entry.js} +2 -2
- package/dist/capsule/p-7dff759e.entry.js.map +1 -0
- package/dist/capsule/p-ab7b3141.entry.js +2 -0
- package/dist/capsule/{p-1bd11889.entry.js → p-c9e61114.entry.js} +2 -2
- package/dist/capsule/{p-9e64a60e.entry.js → p-d4bdb369.entry.js} +2 -2
- package/dist/capsule/{p-d165df27.entry.js → p-de2a16e4.entry.js} +2 -2
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +490 -53
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-grid.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-hero.cjs.entry.js +8 -4
- package/dist/cjs/cpsl-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-identicon.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-info-box.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-nav-button.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/icons/alert-triangle.svg +5 -0
- package/dist/collection/assets/icons/arrow-circle-down-filled.svg +5 -0
- package/dist/collection/assets/icons/chevron-down.svg +5 -0
- package/dist/collection/assets/icons/chevron-selector-vertical.svg +5 -0
- package/dist/collection/assets/icons/credit-card-02.svg +5 -0
- package/dist/collection/assets/icons/edit-02.svg +5 -0
- package/dist/collection/assets/icons/index.js +371 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/plus.svg +5 -0
- package/dist/collection/assets/icons/polygon.svg +5 -0
- package/dist/collection/assets/icons/star-04-filled.svg +3 -0
- package/dist/collection/assets/icons/user.svg +5 -0
- package/dist/collection/assets/images/index.js +5 -1
- package/dist/collection/assets/images/index.js.map +1 -1
- package/dist/collection/components/cpsl-alert/cpsl-alert.css +23 -2
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +21 -3
- package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +1 -1
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +3 -3
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css +3 -0
- package/dist/collection/components/cpsl-avatar/cpsl-avatar.js +1 -1
- package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
- package/dist/collection/components/cpsl-button-group/cpsl-button-group.js +1 -1
- package/dist/collection/components/cpsl-card/cpsl-card.js +1 -1
- package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +2 -2
- 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.js +2 -2
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js +20 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map +1 -1
- package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
- package/dist/collection/components/cpsl-hero/cpsl-hero.css +4 -4
- package/dist/collection/components/cpsl-hero/cpsl-hero.js +2 -2
- package/dist/collection/components/cpsl-hero/cpsl-hero.js.map +1 -1
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
- package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js +1 -1
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.js +1 -1
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.js +22 -2
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js +1 -1
- package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js +1 -1
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +1 -1
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +6 -3
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
- package/dist/collection/components/cpsl-radio/cpsl-radio.js +1 -1
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.css +1 -0
- package/dist/collection/components/cpsl-select/cpsl-select.js +45 -2
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.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.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.css +4 -4
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js +9 -8
- package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +490 -53
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/cpsl-col.entry.js +1 -1
- package/dist/esm/cpsl-grid.entry.js +2 -2
- package/dist/esm/cpsl-hero.entry.js +8 -4
- package/dist/esm/cpsl-hero.entry.js.map +1 -1
- package/dist/esm/cpsl-identicon.entry.js +1 -1
- package/dist/esm/cpsl-info-box.entry.js +1 -1
- package/dist/esm/cpsl-modal-v2.entry.js +1 -1
- package/dist/esm/cpsl-nav-button.entry.js +1 -1
- package/dist/esm/cpsl-row.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/scripts/buildAssets.js +9 -9
- package/dist/scripts/buildAssets.js.map +1 -1
- package/dist/types/assets/icons/index.d.ts +10 -0
- package/dist/types/components/cpsl-alert/cpsl-alert.d.ts +4 -0
- package/dist/types/components/cpsl-file-upload/cpsl-file-upload.d.ts +5 -0
- package/dist/types/components/cpsl-input/cpsl-input.d.ts +4 -0
- package/dist/types/components/cpsl-select/cpsl-select.d.ts +10 -0
- package/dist/types/components.d.ts +40 -0
- package/package.json +2 -3
- package/dist/capsule/p-b96e357a.entry.js.map +0 -1
- package/dist/capsule/p-cfc382c0.entry.js +0 -2
- package/dist/capsule/p-e3d856af.entry.js +0 -20
- package/dist/capsule/p-e3d856af.entry.js.map +0 -1
- /package/dist/capsule/{p-f0cd0482.entry.js.map → p-41bc3c58.entry.js.map} +0 -0
- /package/dist/capsule/{p-c33942ad.entry.js.map → p-52bb30d8.entry.js.map} +0 -0
- /package/dist/capsule/{p-5965b15e.entry.js.map → p-5cd62456.entry.js.map} +0 -0
- /package/dist/capsule/{p-cfc382c0.entry.js.map → p-ab7b3141.entry.js.map} +0 -0
- /package/dist/capsule/{p-1bd11889.entry.js.map → p-c9e61114.entry.js.map} +0 -0
- /package/dist/capsule/{p-9e64a60e.entry.js.map → p-d4bdb369.entry.js.map} +0 -0
- /package/dist/capsule/{p-d165df27.entry.js.map → p-de2a16e4.entry.js.map} +0 -0
- /package/dist/types/Users/{norwood/capsule-repos → taylorbosch/Documents/GitHub/Capsule}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
|
@@ -65,6 +65,11 @@
|
|
|
65
65
|
--container-background-color: var(--cpsl-color-background-0);
|
|
66
66
|
--container-color: var(--cpsl-color-text-primary);
|
|
67
67
|
--container-icon-color: var(--container-color);
|
|
68
|
+
--container-align-items: center;
|
|
69
|
+
--container-justify-content: center;
|
|
70
|
+
--title-container-gap: 8px;
|
|
71
|
+
--title-container-align-items: center;
|
|
72
|
+
--title-container-justify-content: center;
|
|
68
73
|
display: inline-block;
|
|
69
74
|
font-family: var(--cpsl-font-family, inherit);
|
|
70
75
|
}
|
|
@@ -72,14 +77,23 @@
|
|
|
72
77
|
:host(.error) {
|
|
73
78
|
--container-border-color: var(--cpsl-color-utility-red);
|
|
74
79
|
}
|
|
80
|
+
:host(.error):host(.filled) {
|
|
81
|
+
--container-background-color: var(--cpsl-color-utility-red-light);
|
|
82
|
+
}
|
|
75
83
|
|
|
76
84
|
:host(.warning) {
|
|
77
85
|
--container-border-color: var(--cpsl-color-utility-yellow);
|
|
78
86
|
}
|
|
87
|
+
:host(.warning):host(.filled) {
|
|
88
|
+
--container-background-color: var(--cpsl-color-utility-yellow-light);
|
|
89
|
+
}
|
|
79
90
|
|
|
80
91
|
:host(.success) {
|
|
81
92
|
--container-border-color: var(--cpsl-color-utility-green);
|
|
82
93
|
}
|
|
94
|
+
:host(.success):host(.filled) {
|
|
95
|
+
--container-background-color: var(--cpsl-color-utility-green-light);
|
|
96
|
+
}
|
|
83
97
|
|
|
84
98
|
:host cpsl-icon {
|
|
85
99
|
--icon-color: var(--container-icon-color);
|
|
@@ -97,12 +111,19 @@
|
|
|
97
111
|
padding-bottom: var(--container-padding-bottom);
|
|
98
112
|
font-size: var(--container-font-size);
|
|
99
113
|
display: flex;
|
|
100
|
-
align-items:
|
|
101
|
-
justify-content:
|
|
114
|
+
align-items: var(--container-align-items);
|
|
115
|
+
justify-content: var(--container-justify-content);
|
|
102
116
|
gap: var(--container-gap);
|
|
103
117
|
border-style: solid;
|
|
104
118
|
border-width: var(--container-border-width);
|
|
105
119
|
border-color: var(--container-border-color);
|
|
106
120
|
background-color: var(--container-background-color);
|
|
107
121
|
color: var(--container-color);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.title-container {
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: var(--title-container-align-items);
|
|
127
|
+
justify-content: var(--title-container-justify-content);
|
|
128
|
+
gap: var(--title-container-gap);
|
|
108
129
|
}
|
|
@@ -3,10 +3,11 @@ export class CpslAlert {
|
|
|
3
3
|
constructor() {
|
|
4
4
|
this.icon = undefined;
|
|
5
5
|
this.variant = 'error';
|
|
6
|
+
this.filled = undefined;
|
|
6
7
|
}
|
|
7
8
|
get iconType() {
|
|
8
9
|
if (this.icon) {
|
|
9
|
-
this.icon;
|
|
10
|
+
return this.icon;
|
|
10
11
|
}
|
|
11
12
|
switch (this.variant) {
|
|
12
13
|
case 'custom': {
|
|
@@ -25,7 +26,7 @@ export class CpslAlert {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: 'b3d99e91886b9f3c226c607a2755ec07eb490284', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success', filled: this.filled } }, h("div", { key: '18d3cdfce1717d8980133650e37350e299badb73', class: "alert-container" }, h("div", { key: 'a5974d2702eb9da75b7b09cc922d9beebbc0cef1', class: "title-container" }, this.iconType && h("cpsl-icon", { key: 'c700339138baadd297ba39f5f28a9d519d467988', icon: this.iconType }), h("slot", { key: 'f3f6d037235e72ecfd91a70bfef118bbebe9563a' })), h("slot", { key: '06bf3e5d838e39a4771aef6bbf343d55142f1a0f', name: "subtitle" }))));
|
|
29
30
|
}
|
|
30
31
|
static get is() { return "cpsl-alert"; }
|
|
31
32
|
static get encapsulation() { return "shadow"; }
|
|
@@ -46,7 +47,7 @@ export class CpslAlert {
|
|
|
46
47
|
"mutable": false,
|
|
47
48
|
"complexType": {
|
|
48
49
|
"original": "IconType",
|
|
49
|
-
"resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
|
|
50
|
+
"resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
|
|
50
51
|
"references": {
|
|
51
52
|
"IconType": {
|
|
52
53
|
"location": "import",
|
|
@@ -81,6 +82,23 @@ export class CpslAlert {
|
|
|
81
82
|
"attribute": "variant",
|
|
82
83
|
"reflect": false,
|
|
83
84
|
"defaultValue": "'error'"
|
|
85
|
+
},
|
|
86
|
+
"filled": {
|
|
87
|
+
"type": "boolean",
|
|
88
|
+
"mutable": false,
|
|
89
|
+
"complexType": {
|
|
90
|
+
"original": "boolean",
|
|
91
|
+
"resolved": "boolean",
|
|
92
|
+
"references": {}
|
|
93
|
+
},
|
|
94
|
+
"required": false,
|
|
95
|
+
"optional": true,
|
|
96
|
+
"docs": {
|
|
97
|
+
"tags": [],
|
|
98
|
+
"text": "Whether to show the alert with a filled background based on the variant"
|
|
99
|
+
},
|
|
100
|
+
"attribute": "filled",
|
|
101
|
+
"reflect": false
|
|
84
102
|
}
|
|
85
103
|
};
|
|
86
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO
|
|
1
|
+
{"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO;;;IAOtE,IAAY,QAAQ;QAClB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QAED,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,aAAa,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;YAC7I,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,QAAQ,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI;oBACpD,8DAAa,CACT;gBACN,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-alert',\n styleUrl: 'cpsl-alert.scss',\n shadow: true,\n})\nexport class CpslAlert {\n /**\n * The name of the icon to show.\n */\n @Prop() icon?: IconType;\n\n /**\n * The variant of alert.\n * Options are: `\"error\"` | `\"warning\"` | `\"success\"` | `\"custom\"`\n * Default is: `\"error\"`.\n */\n @Prop() variant?: 'error' | 'warning' | 'success' | 'custom' = 'error';\n\n /**\n * Whether to show the alert with a filled background based on the variant\n */\n @Prop() filled?: boolean;\n\n private get iconType(): IconType | undefined {\n if (this.icon) {\n return this.icon;\n }\n\n switch (this.variant) {\n case 'custom': {\n return undefined;\n }\n case 'success': {\n return 'checkCircle';\n }\n case 'warning': {\n return 'alertCircle';\n }\n case 'error':\n default: {\n return 'alertCircle';\n }\n }\n }\n\n render() {\n return (\n <Host class={{ error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success', filled: this.filled }}>\n <div class=\"alert-container\">\n <div class=\"title-container\">\n {this.iconType && <cpsl-icon icon={this.iconType} />}\n <slot></slot>\n </div>\n <slot name=\"subtitle\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -6,13 +6,13 @@ export class CpslAppBar {
|
|
|
6
6
|
this.zIndexOverride = undefined;
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: '281c1ebcc7ad61ccbd6878fb31d9b52a5860c273', style: Object.assign({
|
|
10
10
|
// position: this.position,
|
|
11
11
|
height: `${this.height}px`
|
|
12
|
-
}, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: '
|
|
12
|
+
}, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: '90fdd0e77212ac8a1c861e2402b34b15a9d26f7b', class: "container", part: "container", style: {
|
|
13
13
|
position: this.position,
|
|
14
14
|
height: `${this.height}px`,
|
|
15
|
-
} }, h("slot", { key: '
|
|
15
|
+
} }, h("slot", { key: '6aa42ab3e08a7d0629082a0bbba2831b1c9374f2' })), this.position === 'fixed' && (h("div", { key: '99169fc7212b22fcaa2e490ee2f6a7aad750e5a3', style: {
|
|
16
16
|
height: `${this.height}px`,
|
|
17
17
|
} }))));
|
|
18
18
|
}
|
|
@@ -7,7 +7,7 @@ export class CpslAvatar {
|
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
var _a;
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "cpsl-avatar"; }
|
|
13
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -10,7 +10,7 @@ export class CpslButton {
|
|
|
10
10
|
this.variant = 'primary';
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '7411754a763990dcbef83edbef353ebf3066f71d', class: {
|
|
14
14
|
// VARIANTS
|
|
15
15
|
'primary': this.variant === 'primary',
|
|
16
16
|
'secondary': this.variant === 'secondary',
|
|
@@ -23,7 +23,7 @@ export class CpslButton {
|
|
|
23
23
|
// SIZES
|
|
24
24
|
'small': this.size === 'small',
|
|
25
25
|
'medium': this.size === 'medium',
|
|
26
|
-
} }, h(this.as, { key: '
|
|
26
|
+
} }, h(this.as, { key: '1c49c08c3ea7a105ce6c69302e2adc2bc6a443eb', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '5ef09afd70e95c9c596c46d84a8d3410a8eba2a9', name: "start" }), h("slot", { key: 'f055ad44f74ca07a612c967432714c00e4b56ba9' }), h("slot", { key: '2a53e40d635b3de4441aed9005b4bb13d42e9d04', name: "end" }))));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "cpsl-button"; }
|
|
29
29
|
static get encapsulation() { return "shadow"; }
|
|
@@ -32,7 +32,7 @@ export class CpslButtonGroup {
|
|
|
32
32
|
return this.el.querySelectorAll('&> *:not(cpsl-button)');
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "cpsl-button-group"; }
|
|
38
38
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class CpslCard {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "cpsl-card"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ export class CpslCheckbox {
|
|
|
7
7
|
this.checked = undefined;
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "cpsl-checkbox"; }
|
|
13
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -93,10 +93,10 @@ export class CpslCodeInput {
|
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
95
|
var _a;
|
|
96
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: 'fd588544d9cdebaaeb1961f4ecb5c5630e8e4699' }, h("div", { key: 'b795c99f0df6fbf4ba9a7118f3f737dbf22c7ee9', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
|
|
97
97
|
var _a, _b;
|
|
98
98
|
return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
|
|
99
|
-
})), (this.errorText || this.helperText) && (h("div", { key: '
|
|
99
|
+
})), (this.errorText || this.helperText) && (h("div", { key: '9cff50eb172f38af5065ad79e3c767f2e8ec33c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c8d7dbbd0ec7a2015e2e8099d0448b847641b845', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '4ae4009a2fb4d8f6dc4c985ea8d39c136cb23780' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
|
100
100
|
}
|
|
101
101
|
static get is() { return "cpsl-code-input"; }
|
|
102
102
|
static get encapsulation() { return "shadow"; }
|
|
@@ -105,7 +105,7 @@ export class CpslCol {
|
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
107
|
const isRTL = document.dir === 'rtl';
|
|
108
|
-
return (h(Host, { key: '
|
|
108
|
+
return (h(Host, { key: 'febc737118ea526e5c53e8e59479a245ec1b5dd1', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '88e01f9f4ed95eedbfd0620398792d9d5d58633d' })));
|
|
109
109
|
}
|
|
110
110
|
static get is() { return "cpsl-col"; }
|
|
111
111
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class CpslDivider {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "cpsl-divider"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -33,12 +33,12 @@ export class CpslDrawer {
|
|
|
33
33
|
const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
|
|
34
34
|
const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
|
|
35
35
|
const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '81d454f0a4532e333880f4e37a79545ee5710536', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
|
|
37
37
|
top: this.anchor === 'top',
|
|
38
38
|
bottom: this.anchor === 'bottom',
|
|
39
39
|
left: this.anchor === 'left',
|
|
40
40
|
right: this.anchor === 'right',
|
|
41
|
-
} }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '
|
|
41
|
+
} }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '21fdc68cd01c652b7a9f8e1d624027f4051fdb47', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '085ba3bf2b57ceeb5615c42816e7a0f8758eeeb0', id: "container", class: "container", part: "container" }, h("slot", { key: 'bd8517779864cf35bc30b33597b27a43c749ba1f' }))));
|
|
42
42
|
}
|
|
43
43
|
static get is() { return "cpsl-drawer"; }
|
|
44
44
|
static get encapsulation() { return "shadow"; }
|
|
@@ -94,7 +94,7 @@ export class CpslDropdown {
|
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
96
|
var _a, _b, _c;
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
|
|
98
98
|
}
|
|
99
99
|
static get is() { return "cpsl-dropdown"; }
|
|
100
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -91,6 +91,7 @@ export class CpslFileUpload {
|
|
|
91
91
|
this.dragError = undefined;
|
|
92
92
|
this.isUploading = undefined;
|
|
93
93
|
this.uploadError = undefined;
|
|
94
|
+
this.disabled = false;
|
|
94
95
|
this.errorText = undefined;
|
|
95
96
|
this.externalFilename = undefined;
|
|
96
97
|
this.externalSrc = undefined;
|
|
@@ -115,7 +116,7 @@ export class CpslFileUpload {
|
|
|
115
116
|
}
|
|
116
117
|
render() {
|
|
117
118
|
var _a, _b, _c;
|
|
118
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: '521ca35901a009b303650d7446e1f148930d7fe3' }, this.label && (h("label", { key: '94c58691decea8455a254698ec8fd27baba260ca', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'cf7e80e4c4a1e48b4f4efddfe4e8eb0f4a31ed4b', name: "label" }), h("div", { key: '35f1707b3c8d1f1c939d9312b541f32edfc424d1', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '327f71aaaa7d4920a62118ea956c4c128907fae6', class: { 'label-container': true } }, h("slot", { key: '0c4891ffb0c9d49e2b5b09c3bdbc8d5b2ed3ff2d', name: "left-content" })), h("div", { key: '47dc7cc569d860dc07478c2782c62a0d25b3df07', class: { 'file-container': true } }, this.FileContent), h("input", { key: '809568bfed82463cda7851d3717187112cff708b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (h("div", { key: '6f06cba54f65d903b3d22e015e694a154b189df7', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2103ca2366b9a7827c42302cea3fa8d8c71bc50b' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
|
|
119
120
|
}
|
|
120
121
|
static get is() { return "cpsl-file-upload"; }
|
|
121
122
|
static get encapsulation() { return "shadow"; }
|
|
@@ -131,6 +132,24 @@ export class CpslFileUpload {
|
|
|
131
132
|
}
|
|
132
133
|
static get properties() {
|
|
133
134
|
return {
|
|
135
|
+
"disabled": {
|
|
136
|
+
"type": "boolean",
|
|
137
|
+
"mutable": false,
|
|
138
|
+
"complexType": {
|
|
139
|
+
"original": "boolean",
|
|
140
|
+
"resolved": "boolean",
|
|
141
|
+
"references": {}
|
|
142
|
+
},
|
|
143
|
+
"required": false,
|
|
144
|
+
"optional": true,
|
|
145
|
+
"docs": {
|
|
146
|
+
"tags": [],
|
|
147
|
+
"text": "If the input is disabled.\nDefault is: false."
|
|
148
|
+
},
|
|
149
|
+
"attribute": "disabled",
|
|
150
|
+
"reflect": true,
|
|
151
|
+
"defaultValue": "false"
|
|
152
|
+
},
|
|
134
153
|
"errorText": {
|
|
135
154
|
"type": "string",
|
|
136
155
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOxG,MAAM,OAAO,cAAc;;QAGjB,YAAO,GAAG,oBAAoB,QAAQ,EAAE,EAAE,CAAC;QA+E3C,eAAU,GAAG,CAAO,EAAa,EAAE,EAAE;;YAC3C,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,0CAAG,CAAC,CAAC,CAAC;YAEpD,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC9B,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;YAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC,CAAA,CAAC;QAEM,oBAAe,GAAG,CAAC,EAAa,EAAE,EAAE;;YAC1C,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YAErB,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,0CAAG,CAAC,CAAC,CAAC;YAEpD,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACxB,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,EAAa,EAAE,EAAE;YAC1C,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAO,EAAS,EAAE,EAAE;YAC9C,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;YAE3B,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACvB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAE5B,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBAChC,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC;QACH,CAAC,CAAA,CAAC;QAEM,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;;YACrC,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBACpE,OAAO,KAAK,CAAC;YACf,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QAEM,YAAO,GAAG,CAAO,IAAU,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC3E,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC3B,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACnB,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAA,CAAC;QAEM,eAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;YAC3B,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YAEjB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC;;;;;;;;;;;;wBA1HiB,KAAK;iCAKI,KAAK;;;IAuHjC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAqB,CAAC;IAC7E,CAAC;IAED,IAAI,WAAW;;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAE/B,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CACtB,EAAC,QAAQ;YACN,oBAAoB;YACrB,iBAAW,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,QAAQ,kBAEnC,CACH,CACZ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,eAAe,CACjC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CACV,eAAe,CAChB,CAAC,CAAC,CAAC,CACF,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAC/C,CAAC;QACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAC5B,iBAAW,IAAI,EAAC,OAAO,GAAG,CAC3B,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,uBAAgB,CACjB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CACV,iBAAW,IAAI,EAAC,OAAO,GAAG,CAC3B,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAC,cAAc,GAAG,CAClH,CAAC;QAEF,OAAO,CACL,EAAC,QAAQ;YACN,UAAU;YACX,YAAM,KAAK,EAAC,6BAA6B;gBACvC,iBAAW,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAC,QAAQ,IAClD,IAAI,CACK;gBACX,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,iBAAW,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,GAAI,CACrF,CACE,CACZ,CAAC;IACJ,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;gBACvC,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBACzB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,gBAAgB,iBAAkB,CAAC,CAAC,CAAC,EAAE,CACzF,CACT;YACD,6DAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;gBACtH,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE;oBACrC,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;gBACN,4DAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAG,IAAI,CAAC,WAAW,CAAO;gBAChE,8DACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,IAAI,CAAC,mCAAI,GAAG,EACzC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1C,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,CACE;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,4DAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,+DAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /**\n * Error text to show below the input. If this is provided the input will enter an error state.\n */\n @Prop() errorText?: string;\n\n /**\n * Filename for the external source of the selected file.\n */\n @Prop() externalFilename?: string;\n\n /**\n * External source for the selected file.\n */\n @Prop() externalSrc?: string;\n\n /**\n * Valid file types.\n */\n @Prop() fileTypes?: string[];\n\n /**\n * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n */\n @Prop() helperText?: string;\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * If `true`, the label will display an \"optional\" tag.\n */\n @Prop() showOptionalLabel = false;\n\n /**\n * Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n */\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /**\n * Emitted when the file is dropped in the input.\n */\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file drag enters the input.\n */\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file drag leaves the input.\n */\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file changes.\n */\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /**\n * Emitted when the file is removed.\n */\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (input.files.length) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (this.fileTypes?.length ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = this.uploadFile ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) || Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name || this.externalFilename || ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={this.file ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '*' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={this.file ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
|
|
1
|
+
{"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /**\n * If the input is disabled.\n * Default is: false.\n */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /**\n * Error text to show below the input. If this is provided the input will enter an error state.\n */\n @Prop() errorText?: string;\n\n /**\n * Filename for the external source of the selected file.\n */\n @Prop() externalFilename?: string;\n\n /**\n * External source for the selected file.\n */\n @Prop() externalSrc?: string;\n\n /**\n * Valid file types.\n */\n @Prop() fileTypes?: string[];\n\n /**\n * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n */\n @Prop() helperText?: string;\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * If `true`, the label will display an \"optional\" tag.\n */\n @Prop() showOptionalLabel = false;\n\n /**\n * Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n */\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /**\n * Emitted when the file is dropped in the input.\n */\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file drag enters the input.\n */\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file drag leaves the input.\n */\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /**\n * Emitted when the file changes.\n */\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /**\n * Emitted when the file is removed.\n */\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (input.files.length) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (this.fileTypes?.length ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = this.uploadFile ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) || Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name || this.externalFilename || ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={this.file ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '*' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={this.file ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n disabled={this.disabled}\n />\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
|
|
@@ -4,9 +4,9 @@ export class CpslGrid {
|
|
|
4
4
|
this.fixed = false;
|
|
5
5
|
}
|
|
6
6
|
render() {
|
|
7
|
-
return (h(Host, { key: '
|
|
7
|
+
return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
|
|
8
8
|
'grid-fixed': this.fixed,
|
|
9
|
-
} }, h("slot", { key: '
|
|
9
|
+
} }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "cpsl-grid"; }
|
|
12
12
|
static get encapsulation() { return "shadow"; }
|
|
@@ -113,15 +113,15 @@
|
|
|
113
113
|
|
|
114
114
|
:host(.connection) .ring1,
|
|
115
115
|
:host(.externalWalletConnection) > .backgroundContainer > .background .ring1 {
|
|
116
|
-
box-shadow: 0px 0px 20px
|
|
116
|
+
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
|
|
117
117
|
}
|
|
118
118
|
:host(.connection) .ring2,
|
|
119
119
|
:host(.externalWalletConnection) > .backgroundContainer > .background .ring2 {
|
|
120
|
-
box-shadow: 0px 0px 12px
|
|
120
|
+
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
|
|
121
121
|
}
|
|
122
122
|
:host(.connection) .ring3,
|
|
123
123
|
:host(.externalWalletConnection) > .backgroundContainer > .background .ring3 {
|
|
124
|
-
box-shadow: 0px 0px 12px
|
|
124
|
+
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
:host(.pending) > .backgroundContainer > .background .ring0 {
|
|
@@ -296,7 +296,7 @@
|
|
|
296
296
|
|
|
297
297
|
:host > .backgroundContainer > .background > .cover {
|
|
298
298
|
position: absolute;
|
|
299
|
-
height:
|
|
299
|
+
height: 100%;
|
|
300
300
|
top: 34%;
|
|
301
301
|
right: 0;
|
|
302
302
|
left: 0;
|
|
@@ -11,7 +11,7 @@ export class CpslHero {
|
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
13
|
var _a;
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'e57d19559f8d8c92c23dcf95ca88246529a4b46f', class: {
|
|
15
15
|
// VARIANTS
|
|
16
16
|
connection: this.variant === 'connection',
|
|
17
17
|
pending: this.variant === 'pending' || this.variant === 'customContent',
|
|
@@ -19,7 +19,7 @@ export class CpslHero {
|
|
|
19
19
|
add: this.variant === 'add',
|
|
20
20
|
failed: this.variant === 'failed',
|
|
21
21
|
externalWalletConnection: this.variant === 'externalWalletConnection',
|
|
22
|
-
} }, h("div", { key: '
|
|
22
|
+
} }, h("div", { key: '3341d0ad455074858c3b0a9b9fe7af291ad198eb', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '4835ffd38a99277e7178023188aae95dc6ba4ee5', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '565638be3e6c5d230a50329031ec47c87a0e8077', class: "ring ring3" }), h("div", { key: '483a3691798e33c8547543ef6a397bb8992f86e3', class: "ring ring2" }), h("div", { key: 'c0ca1841f37918e0e1a805b34f53e2f0b204bbda', class: "ring ring1" }), h("div", { key: 'ea3b347c265679d6acd1bdd8ed26a9761d649caa', class: "ring ring0" }), h("div", { key: '1be1e9e5ef42961d8daeb4997daefc118e50b349', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '137e8b9bfb53df3208104b77767cfab0f06a500a' }, h("img", { key: '519fa3982fdbc8cee57ba3c3d2a470039d6165e3', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '128cc3362b905a35ca781b4b0eab45912542e185', class: "connectDiagramContainer" }, h("slot", { key: 'bbac944d46752eb2a997c3751b7395d13c0f6ce5', name: "connectionLeft" }), h("slot", { key: '30fd8334daf3944c51ceb4ea9f42cd489125d85c', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: 'e332372db7e6651d1419d8ef83c60ed255ff1cd5', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '7674761e57156f14350082a5e9a95a423e5a916d' }, !this.withDefaultTheme && h("img", { key: 'fc1a5e6bcff525490e85e0ac84542ecc70c78d65', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'fd3341ee64f6f598a299deda12ad2fab633aaa1a', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '155fc4680ce6bedc930cc6b27eb676eb4b067acb' }, h("cpsl-icon", { key: 'ca4dac8a0b2e0dd4fb198195528209d648d71289', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: 'd6d1886df2a68eb365924788b4bb080281e31aac', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '783ec93baf3c3c79813a39c60c35b7a04b34d56c' }, h("cpsl-icon", { key: '56e792294a698f86591a7b5f1e25b08a0428c5b7', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '790af19407de8398e5ed3efe676edd856d7b222f', class: "connectDiagramContainer" }, h("slot", { key: 'fe702ae2f8f515dd3697684defd4cc6c06495283', name: "connectionLeft" }), h("slot", { key: 'db0670c2f4095a2e3cfd287e03ad6a429fe8caef', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '0e7a0ab404fdb0fbcc249dc3ec3537e2554a945a', class: "customImageContainer" }, h("slot", { key: 'fb0afeb690e5676007d0ccc1545f9ce9791af045', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '2fa75125453408d7fe3d7d3a6c1e9091c5042afe' }, h("div", { key: 'e9b06d0d820e8cc30d10147bcfcb55279d3977a0', class: "fadeOut" }), h("div", { key: '0018aa5158cd89c81184c50f3581e1bbecb961ee', class: "cover" }))))), h("cpsl-text", { key: 'b52135d714d10638dd03342bc4c1f374509d2bfd', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: '2c4dbbc33c7d3faaed5ef9e0d32d49f064667502', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "cpsl-hero"; }
|
|
25
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAO7C,MAAM,OAAO,QAAQ;;;;uBAkB0H,YAAY;;;;;IAYzJ,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe;gBACvE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,GAAG,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;gBAC3B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,0BAA0B;aACtE;YAED,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,GAAG,IAAI,EAAE;gBAC3E,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;oBACnE,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;wBAClE,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,EAAC,QAAQ;4BACP,4DAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACxD,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;wBACnF,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,EAAC,QAAQ;4BACN,CAAC,IAAI,CAAC,gBAAgB,IAAI,4DAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI;4BACjF,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,GAAI,CAC/F,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,GAAI,CACjG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,iBAAiB,GAAG;wBACpF,IAAI,CAAC,OAAO,KAAK,0BAA0B,IAAI,CAC9C,EAAC,QAAQ;4BACP,kEAAW,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,wBAAwB,GAAG;4BAC1E,4DAAK,KAAK,EAAC,yBAAyB;gCAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;gCAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACG,CACZ;wBACA,IAAI,CAAC,OAAO,KAAK,eAAe,IAAI,CACnC,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP,CACG;oBACL,CAAC,IAAI,CAAC,WAAW,IAAI,CACpB,EAAC,QAAQ;wBACP,4DAAK,KAAK,EAAC,SAAS,GAAG;wBACvB,4DAAK,KAAK,EAAC,OAAO,GAAG,CACZ,CACZ,CACG,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,
|
|
1
|
+
{"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /**\n * The height of the container.\n * Default is: 180.\n */\n @Prop() height?: number;\n\n /**\n * Hides the fade out components\n * Default is: `false`.\n */\n @Prop() hideFadeOut?: boolean;\n\n /**\n * The variant of the button.\n * Options are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\n * Default is: `\"connection\"`.\n */\n @Prop({ reflect: true }) variant?: 'customContent' | 'connection' | 'externalWalletConnection' | 'pending' | 'approved' | 'add' | 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n /**\n * Whether to use the Capsule custom theming or use the provided theme\n * Default is: `false`.\n */\n @Prop() withDefaultTheme?: boolean;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending' || this.variant === 'customContent',\n approved: this.variant === 'approved',\n add: this.variant === 'add',\n failed: this.variant === 'failed',\n externalWalletConnection: this.variant === 'externalWalletConnection',\n }}\n >\n <div class=\"backgroundContainer\" style={{ height: `${this.height ?? 180}px` }}>\n <div class={{ background: true, defaultTheme: this.withDefaultTheme }}>\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n <div class={{ ringCenter: true, defaultTheme: this.withDefaultTheme }}>\n {this.variant === 'connection' && (\n <Fragment>\n <img class=\"connectionImage\" src={Images.heroDefault} />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'pending' && <img class=\"pendingImage\" src={Images.heroPending} />}\n {this.variant === 'approved' && (\n <Fragment>\n {!this.withDefaultTheme && <img class=\"approvedImage\" src={Images.heroSuccess} />}\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule'} />\n </Fragment>\n )}\n {this.variant === 'add' && (\n <Fragment>\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule'} />\n </Fragment>\n )}\n {this.variant === 'failed' && <cpsl-icon class=\"centerIcon\" icon=\"heroAlertCircle\" />}\n {this.variant === 'externalWalletConnection' && (\n <Fragment>\n <cpsl-icon class=\"externalConnectionIcon\" icon=\"heroExternalConnection\" />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'customContent' && (\n <div class=\"customImageContainer\">\n <slot name=\"image\" />\n </div>\n )}\n </div>\n {!this.hideFadeOut && (\n <Fragment>\n <div class=\"fadeOut\" />\n <div class=\"cover\" />\n </Fragment>\n )}\n </div>\n </div>\n <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"semiBold\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"bodyS\" weight=\"medium\" color=\"secondary\">\n {this.subtitle}\n </cpsl-text>\n )}\n </Host>\n );\n }\n}\n"]}
|