@usecapsule/core-components 3.4.1 → 3.5.0
Sign up to get free protection for your applications and to get access to all the features.
- 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-286db996.js +2 -0
- package/dist/capsule/p-286db996.js.map +1 -0
- package/dist/capsule/p-c33942ad.entry.js +2 -0
- package/dist/capsule/p-c33942ad.entry.js.map +1 -0
- package/dist/capsule/p-e3d856af.entry.js +20 -0
- package/dist/capsule/p-e3d856af.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +67 -5
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-identicon.cjs.entry.js +76 -30
- package/dist/cjs/cpsl-identicon.cjs.entry.js.map +1 -1
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/prand-a35ea6b2.js +209 -0
- package/dist/cjs/prand-a35ea6b2.js.map +1 -0
- package/dist/collection/assets/icons/check-circle-filled.svg +5 -0
- package/dist/collection/assets/icons/cosmos.svg +12 -0
- package/dist/collection/assets/icons/ethereum.svg +4 -0
- package/dist/collection/assets/icons/index.js +5 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/solana.svg +19 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css +3 -1
- package/dist/collection/components/cpsl-button/cpsl-button.css +1 -1
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.css +17 -10
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.js +101 -36
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.js.map +1 -1
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js +1 -1
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js.map +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +2 -2
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +32 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js.map +1 -1
- package/dist/collection/components/cpsl-tab/tab-interface.js.map +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +16 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/collection/index.js +1 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/lib/prando.js +187 -0
- package/dist/collection/lib/prando.js.map +1 -0
- package/dist/collection/utils/prand.js +16 -0
- package/dist/collection/utils/prand.js.map +1 -0
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +67 -5
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/cpsl-identicon.entry.js +76 -30
- package/dist/esm/cpsl-identicon.entry.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/prand-c8323494.js +205 -0
- package/dist/esm/prand-c8323494.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +4 -0
- package/dist/types/components/cpsl-identicon/cpsl-identicon.d.ts +5 -4
- package/dist/types/components/cpsl-tab/cpsl-tab.d.ts +7 -1
- package/dist/types/components/cpsl-tab/tab-interface.d.ts +3 -0
- package/dist/types/components/cpsl-tabs/cpsl-tabs.d.ts +2 -0
- package/dist/types/components.d.ts +11 -8
- package/dist/types/index.d.ts +1 -0
- package/dist/types/lib/prando.d.ts +92 -0
- package/dist/types/utils/prand.d.ts +3 -0
- package/package.json +4 -4
- package/dist/capsule/p-5d62e610.entry.js +0 -2
- package/dist/capsule/p-5d62e610.entry.js.map +0 -1
- package/dist/capsule/p-afbb1e6f.entry.js +0 -20
- package/dist/capsule/p-afbb1e6f.entry.js.map +0 -1
|
@@ -44,7 +44,7 @@ export class CpslIcon {
|
|
|
44
44
|
"mutable": false,
|
|
45
45
|
"complexType": {
|
|
46
46
|
"original": "IconType",
|
|
47
|
-
"resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"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\" | \"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\"",
|
|
47
|
+
"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\"",
|
|
48
48
|
"references": {
|
|
49
49
|
"IconType": {
|
|
50
50
|
"location": "import",
|
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--identicon-background-red: linear-gradient(136deg, #
|
|
3
|
-
--identicon-background-orange: linear-gradient(136deg, #
|
|
4
|
-
--identicon-background-yellow: linear-gradient(136deg, #
|
|
5
|
-
--identicon-background-green: linear-gradient(136deg, #
|
|
6
|
-
--identicon-background-blue: linear-gradient(136deg, #
|
|
7
|
-
--identicon-background-purple: linear-gradient(136deg, #
|
|
2
|
+
--identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);
|
|
3
|
+
--identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);
|
|
4
|
+
--identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);
|
|
5
|
+
--identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);
|
|
6
|
+
--identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);
|
|
7
|
+
--identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);
|
|
8
|
+
--identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);
|
|
8
9
|
display: block;
|
|
9
|
-
width: 62px;
|
|
10
|
-
height: 62px;
|
|
11
10
|
aspect-ratio: 1;
|
|
12
|
-
border-radius:
|
|
11
|
+
border-radius: 25%;
|
|
13
12
|
position: relative;
|
|
14
13
|
border: 1px solid var(--cpsl-color-background-8);
|
|
15
14
|
}
|
|
16
15
|
:host > svg {
|
|
17
16
|
fill: rgba(255, 255, 255, 0.6);
|
|
18
17
|
position: absolute;
|
|
19
|
-
width:
|
|
18
|
+
width: 30%;
|
|
20
19
|
}
|
|
21
20
|
:host > svg.rotate90 {
|
|
22
21
|
transform: rotate(0.25turn);
|
|
@@ -66,4 +65,12 @@
|
|
|
66
65
|
|
|
67
66
|
:host(.purple) {
|
|
68
67
|
background: var(--identicon-background-purple);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host(.empty) {
|
|
71
|
+
background: var(--identicon-background-empty);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host(.avatar) {
|
|
75
|
+
border-radius: 1000px;
|
|
69
76
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
+
import Prando from "../../lib/prando";
|
|
3
|
+
import { COLORS } from "../../utils/prand";
|
|
2
4
|
const SingleArc = (rotation) => (h("svg", { class: {
|
|
3
5
|
rotate90: rotation === 1,
|
|
4
6
|
rotate180: rotation === 2,
|
|
@@ -9,35 +11,72 @@ const DoubleArc = (rotation) => (h("svg", { class: {
|
|
|
9
11
|
rotate180: rotation === 2,
|
|
10
12
|
rotate270: rotation === 3,
|
|
11
13
|
}, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
|
|
14
|
+
const BASE_PATTERNS = [
|
|
15
|
+
[
|
|
16
|
+
[0, 0, 0, 0],
|
|
17
|
+
[0, 1, 3, 2],
|
|
18
|
+
],
|
|
19
|
+
[
|
|
20
|
+
[1, 1, 0, 0],
|
|
21
|
+
[0, 1, 3, 2],
|
|
22
|
+
],
|
|
23
|
+
[
|
|
24
|
+
[0, 1, 0, 1],
|
|
25
|
+
[0, 1, 3, 2],
|
|
26
|
+
],
|
|
27
|
+
[
|
|
28
|
+
[0, 0, 1, 1],
|
|
29
|
+
[0, 1, 3, 2],
|
|
30
|
+
],
|
|
31
|
+
[
|
|
32
|
+
[1, 0, 1, 0],
|
|
33
|
+
[0, 1, 3, 2],
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
[1, 1, 1, 1],
|
|
37
|
+
[0, 1, 3, 2],
|
|
38
|
+
],
|
|
39
|
+
[
|
|
40
|
+
[0, 0, 0, 0],
|
|
41
|
+
[2, 3, 1, 0],
|
|
42
|
+
],
|
|
43
|
+
[
|
|
44
|
+
[1, 1, 1, 1],
|
|
45
|
+
[2, 3, 1, 0],
|
|
46
|
+
],
|
|
47
|
+
[
|
|
48
|
+
[1, 1, 1, 1],
|
|
49
|
+
[0, 1, 2, 3],
|
|
50
|
+
],
|
|
51
|
+
];
|
|
12
52
|
export class CpslIdenticon {
|
|
13
53
|
constructor() {
|
|
14
54
|
this.hash = undefined;
|
|
15
|
-
this.size =
|
|
55
|
+
this.size = '40px';
|
|
56
|
+
this.variant = 'default';
|
|
16
57
|
}
|
|
17
58
|
render() {
|
|
18
|
-
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
return isDouble ? DoubleArc(rotations[index]) : SingleArc(rotations[index]);
|
|
40
|
-
})));
|
|
59
|
+
let props;
|
|
60
|
+
const isEmpty = !this.hash;
|
|
61
|
+
if (!isEmpty)
|
|
62
|
+
props = getIdenticonProps(this.hash);
|
|
63
|
+
return (h(Host, { key: 'dca30d0d61d0e29f2ec3ad657225ac51db09940d', class: {
|
|
64
|
+
red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
|
|
65
|
+
orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
|
|
66
|
+
yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',
|
|
67
|
+
green: (props === null || props === void 0 ? void 0 : props.color) === 'green',
|
|
68
|
+
blue: (props === null || props === void 0 ? void 0 : props.color) === 'blue',
|
|
69
|
+
purple: (props === null || props === void 0 ? void 0 : props.color) === 'purple',
|
|
70
|
+
empty: !(props === null || props === void 0 ? void 0 : props.color) && !this.hash,
|
|
71
|
+
avatar: this.variant === 'avatar',
|
|
72
|
+
}, style: {
|
|
73
|
+
width: this.size,
|
|
74
|
+
height: this.size,
|
|
75
|
+
} }, (props === null || props === void 0 ? void 0 : props.shapes) &&
|
|
76
|
+
(props === null || props === void 0 ? void 0 : props.rotations) &&
|
|
77
|
+
props.shapes.map((isDouble, index) => {
|
|
78
|
+
return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);
|
|
79
|
+
})));
|
|
41
80
|
}
|
|
42
81
|
static get is() { return "cpsl-identicon"; }
|
|
43
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -57,12 +96,12 @@ export class CpslIdenticon {
|
|
|
57
96
|
"type": "string",
|
|
58
97
|
"mutable": false,
|
|
59
98
|
"complexType": {
|
|
60
|
-
"original": "string",
|
|
99
|
+
"original": "string | undefined",
|
|
61
100
|
"resolved": "string",
|
|
62
101
|
"references": {}
|
|
63
102
|
},
|
|
64
103
|
"required": false,
|
|
65
|
-
"optional":
|
|
104
|
+
"optional": true,
|
|
66
105
|
"docs": {
|
|
67
106
|
"tags": [],
|
|
68
107
|
"text": ""
|
|
@@ -71,30 +110,56 @@ export class CpslIdenticon {
|
|
|
71
110
|
"reflect": false
|
|
72
111
|
},
|
|
73
112
|
"size": {
|
|
74
|
-
"type": "
|
|
113
|
+
"type": "string",
|
|
75
114
|
"mutable": false,
|
|
76
115
|
"complexType": {
|
|
77
|
-
"original": "
|
|
78
|
-
"resolved": "
|
|
116
|
+
"original": "string",
|
|
117
|
+
"resolved": "string",
|
|
79
118
|
"references": {}
|
|
80
119
|
},
|
|
81
120
|
"required": false,
|
|
82
121
|
"optional": false,
|
|
83
122
|
"docs": {
|
|
84
123
|
"tags": [],
|
|
85
|
-
"text": "The
|
|
124
|
+
"text": "The CSS width and height of the identicon.\nDefault is: 40px."
|
|
86
125
|
},
|
|
87
126
|
"attribute": "size",
|
|
88
127
|
"reflect": false,
|
|
89
|
-
"defaultValue": "
|
|
128
|
+
"defaultValue": "'40px'"
|
|
129
|
+
},
|
|
130
|
+
"variant": {
|
|
131
|
+
"type": "string",
|
|
132
|
+
"mutable": false,
|
|
133
|
+
"complexType": {
|
|
134
|
+
"original": "'default' | 'avatar'",
|
|
135
|
+
"resolved": "\"avatar\" | \"default\"",
|
|
136
|
+
"references": {}
|
|
137
|
+
},
|
|
138
|
+
"required": false,
|
|
139
|
+
"optional": false,
|
|
140
|
+
"docs": {
|
|
141
|
+
"tags": [],
|
|
142
|
+
"text": ""
|
|
143
|
+
},
|
|
144
|
+
"attribute": "variant",
|
|
145
|
+
"reflect": false,
|
|
146
|
+
"defaultValue": "'default'"
|
|
90
147
|
}
|
|
91
148
|
};
|
|
92
149
|
}
|
|
93
150
|
}
|
|
94
|
-
const
|
|
95
|
-
function
|
|
96
|
-
const
|
|
97
|
-
const
|
|
98
|
-
|
|
151
|
+
const PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];
|
|
152
|
+
function getIdenticonProps(seed) {
|
|
153
|
+
const rng = new Prando(seed);
|
|
154
|
+
const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));
|
|
155
|
+
const deviationIndex = Math.floor(iDeviation / 4);
|
|
156
|
+
const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];
|
|
157
|
+
return {
|
|
158
|
+
color: COLORS[iColor],
|
|
159
|
+
shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {
|
|
160
|
+
return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;
|
|
161
|
+
}),
|
|
162
|
+
rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),
|
|
163
|
+
};
|
|
99
164
|
}
|
|
100
165
|
//# sourceMappingURL=cpsl-identicon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando';\nimport { Color, COLORS } from '../../utils/prand';\n\nconst SingleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_66)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_66\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_255)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_255\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst BASE_PATTERNS = [\n [\n [0, 0, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [0, 1, 0, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [1, 0, 1, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 0, 0],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 2, 3],\n ],\n];\n\n@Component({\n tag: 'cpsl-identicon',\n styleUrl: 'cpsl-identicon.scss',\n shadow: true,\n})\nexport class CpslIdenticon {\n @Prop() hash?: string | undefined;\n\n /**\n * The CSS width and height of the identicon.\n * Default is: 40px.\n */\n @Prop() size: string = '40px';\n\n @Prop() variant: 'default' | 'avatar' = 'default';\n\n render() {\n let props;\n const isEmpty = !this.hash;\n if (!isEmpty) props = getIdenticonProps(this.hash);\n\n return (\n <Host\n class={{\n red: props?.color === 'red',\n orange: props?.color === 'orange',\n yellow: props?.color === 'yellow',\n green: props?.color === 'green',\n blue: props?.color === 'blue',\n purple: props?.color === 'purple',\n empty: !props?.color && !this.hash,\n avatar: this.variant === 'avatar',\n }}\n style={{\n width: this.size,\n height: this.size,\n }}\n >\n {props?.shapes &&\n props?.rotations &&\n props.shapes.map((isDouble, index) => {\n return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n })}\n </Host>\n );\n }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n const rng = new Prando(seed);\n\n const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n const deviationIndex = Math.floor(iDeviation / 4);\n const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n return {\n color: COLORS[iColor],\n shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n }),\n rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n };\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const meta = {
|
|
2
2
|
title: 'Components/CpslIdenticon',
|
|
3
|
-
args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size:
|
|
3
|
+
args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },
|
|
4
4
|
argTypes: {
|
|
5
5
|
hash: { control: 'text' },
|
|
6
6
|
size: { control: 'number' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,MAAM,EAAE;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n title: 'Components/CpslIdenticon',\n args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },\n argTypes: {\n hash: { control: 'text' },\n size: { control: 'number' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}
|
|
@@ -675,7 +675,7 @@ export class CpslInput {
|
|
|
675
675
|
"mutable": false,
|
|
676
676
|
"complexType": {
|
|
677
677
|
"original": "IconType",
|
|
678
|
-
"resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"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\" | \"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\"",
|
|
678
|
+
"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\"",
|
|
679
679
|
"references": {
|
|
680
680
|
"IconType": {
|
|
681
681
|
"location": "import",
|
|
@@ -163,7 +163,7 @@ export class CpslSlideButton {
|
|
|
163
163
|
"mutable": false,
|
|
164
164
|
"complexType": {
|
|
165
165
|
"original": "IconType",
|
|
166
|
-
"resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"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\" | \"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\"",
|
|
166
|
+
"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\"",
|
|
167
167
|
"references": {
|
|
168
168
|
"IconType": {
|
|
169
169
|
"location": "import",
|
|
@@ -203,7 +203,7 @@ export class CpslSlideButton {
|
|
|
203
203
|
"mutable": false,
|
|
204
204
|
"complexType": {
|
|
205
205
|
"original": "IconType",
|
|
206
|
-
"resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"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\" | \"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\"",
|
|
206
|
+
"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\"",
|
|
207
207
|
"references": {
|
|
208
208
|
"IconType": {
|
|
209
209
|
"location": "import",
|
|
@@ -13,6 +13,13 @@ export class CpslTab {
|
|
|
13
13
|
onTabsInit(ev) {
|
|
14
14
|
this.setSelected(ev);
|
|
15
15
|
}
|
|
16
|
+
componentDidLoad() {
|
|
17
|
+
new MutationObserver(() => {
|
|
18
|
+
this.cpslTabButtonSizeChange.emit({ tab: this.tab });
|
|
19
|
+
}).observe(this.el, {
|
|
20
|
+
attributes: true,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
16
23
|
setSelected(ev) {
|
|
17
24
|
const dispatchedFrom = ev.target;
|
|
18
25
|
const parent = this.el.parentElement;
|
|
@@ -21,7 +28,7 @@ export class CpslTab {
|
|
|
21
28
|
}
|
|
22
29
|
}
|
|
23
30
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '0db72b4aafeb1dcb0f9eb79adfc05ed9d8cfceee', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: '62026b52a408de0eeea4b5bd93fa48d0e56b54e7', class: { 'tab-container': true } }, h("slot", { key: '2755cbce3b4911c7dd691f0e7bbbabe91d0314a1', name: "start" }), h("div", { key: '0a3533933c1f4b148f51c9a3ec16cc043b0626be', class: "content" }, h("slot", { key: 'a4952347ee3850ed6cf52917787b29e35fddabd5' })), h("slot", { key: 'a77a1b0b1f0ff5238d42d3b185f16799532508be', name: "end" }))));
|
|
25
32
|
}
|
|
26
33
|
static get is() { return "cpsl-tab"; }
|
|
27
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,6 +106,30 @@ export class CpslTab {
|
|
|
99
106
|
}
|
|
100
107
|
}
|
|
101
108
|
}
|
|
109
|
+
}, {
|
|
110
|
+
"method": "cpslTabButtonSizeChange",
|
|
111
|
+
"name": "cpslTabButtonSizeChange",
|
|
112
|
+
"bubbles": true,
|
|
113
|
+
"cancelable": true,
|
|
114
|
+
"composed": true,
|
|
115
|
+
"docs": {
|
|
116
|
+
"tags": [{
|
|
117
|
+
"name": "internal",
|
|
118
|
+
"text": undefined
|
|
119
|
+
}],
|
|
120
|
+
"text": "Emitted when tab size changes"
|
|
121
|
+
},
|
|
122
|
+
"complexType": {
|
|
123
|
+
"original": "TabSizeChangeEventDetail",
|
|
124
|
+
"resolved": "TabSizeChangeEventDetail",
|
|
125
|
+
"references": {
|
|
126
|
+
"TabSizeChangeEventDetail": {
|
|
127
|
+
"location": "import",
|
|
128
|
+
"path": "./tab-interface",
|
|
129
|
+
"id": "src/components/cpsl-tab/tab-interface.ts::TabSizeChangeEventDetail"
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
102
133
|
}];
|
|
103
134
|
}
|
|
104
135
|
static get elementRef() { return "el"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-tab.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/cpsl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,OAAO,OAAO;;
|
|
1
|
+
{"version":3,"file":"cpsl-tab.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/cpsl-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,OAAO,OAAO;;QAqDV,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;wBAjDiB,KAAK;;;IAqBxB,aAAa,CAAC,EAAuC;QACnD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAGD,UAAU,CAAC,EAAuC;QAChD,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAClB,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAuC;QACzD,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,EAAE,CAAC;YAC5E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY;YAClE,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;gBACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,4DAAK,KAAK,EAAC,SAAS;oBAClB,8DAAa,CACT;gBACN,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TabClickEventDetail, TabSizeChangeEventDetail } from './tab-interface';\nimport { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface';\n\n@Component({\n tag: 'cpsl-tab',\n styleUrl: 'cpsl-tab.scss',\n shadow: true,\n})\nexport class CpslTab {\n @Element() el!: HTMLCpslTabElement;\n\n /**\n * The selected tab component\n */\n @Prop() selected = false;\n\n /**\n * A tab id must be provided for each `cpsl-tab`. It's used internally to reference\n * the selected tab or by the router to switch between them.\n */\n @Prop() tab: string;\n\n /**\n * Emitted when tabs are clicked\n * @internal\n */\n @Event() cpslTabButtonClick!: EventEmitter<TabClickEventDetail>;\n\n /**\n * Emitted when tab size changes\n * @internal\n */\n @Event() cpslTabButtonSizeChange!: EventEmitter<TabSizeChangeEventDetail>;\n\n @Listen('cpslTabsChanged', { target: 'window' })\n onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>) {\n this.setSelected(ev);\n }\n\n @Listen('cpslTabsInit', { target: 'window' })\n onTabsInit(ev: CustomEvent<TabsChangedEventDetail>) {\n this.setSelected(ev);\n }\n\n componentDidLoad() {\n new MutationObserver(() => {\n this.cpslTabButtonSizeChange.emit({ tab: this.tab });\n }).observe(this.el, {\n attributes: true,\n });\n }\n\n private setSelected(ev: CustomEvent<TabsChangedEventDetail>) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if (ev.composedPath().includes(parent) || dispatchedFrom?.contains(this.el)) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private onTabClicked = () => {\n this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });\n };\n\n render() {\n return (\n <Host class={{ selected: this.selected }} onClick={this.onTabClicked}>\n <div class={{ 'tab-container': true }}>\n <slot name=\"start\"></slot>\n <div class=\"content\">\n <slot></slot>\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/tab-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabClickEventDetail {\n tab: string;\n selected: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tab/tab-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabClickEventDetail {\n tab: string;\n selected: boolean;\n}\n\nexport interface TabSizeChangeEventDetail {\n tab: string;\n}\n"]}
|
|
@@ -26,6 +26,12 @@ export class CpslTabs {
|
|
|
26
26
|
this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
+
onTabSizeChange(ev) {
|
|
30
|
+
const { tab } = ev.detail;
|
|
31
|
+
if (tab === this.selectedTab) {
|
|
32
|
+
this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
29
35
|
componentWillLoad() {
|
|
30
36
|
var _a, _b;
|
|
31
37
|
this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
|
|
@@ -49,7 +55,7 @@ export class CpslTabs {
|
|
|
49
55
|
// Get border width as a number
|
|
50
56
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
51
57
|
const selectedTabRect = this.selectedTabRect;
|
|
52
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: 'a7b201091e8e803fdb6179883382c951cc88a888', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '7370e97866ec851b2e26231e88db112fc41dd1fd', class: "tabs-container" }, h("slot", { key: 'd2638cefef452fb3da3e0b6f7a5b852506a8e213' }), h("div", { key: 'ff20d8ff3baeb36f69cbc4a88a91639129642889', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
|
|
53
59
|
}
|
|
54
60
|
static get is() { return "cpsl-tabs"; }
|
|
55
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -165,6 +171,15 @@ export class CpslTabs {
|
|
|
165
171
|
"methodName": "updateTab"
|
|
166
172
|
}];
|
|
167
173
|
}
|
|
174
|
+
static get listeners() {
|
|
175
|
+
return [{
|
|
176
|
+
"name": "cpslTabButtonSizeChange",
|
|
177
|
+
"method": "onTabSizeChange",
|
|
178
|
+
"target": "window",
|
|
179
|
+
"capture": false,
|
|
180
|
+
"passive": false
|
|
181
|
+
}];
|
|
182
|
+
}
|
|
168
183
|
}
|
|
169
184
|
const getTab = (tabs, tab) => {
|
|
170
185
|
const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
|