@usecapsule/core-components 3.6.0 → 3.8.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/p-acf73691.entry.js +28 -0
- package/dist/capsule/p-acf73691.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +4011 -2482
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/icons/arbitrum-brand.svg +38 -0
- package/dist/collection/assets/icons/base-brand.svg +3 -0
- package/dist/collection/assets/icons/celo-brand.svg +13 -0
- package/dist/collection/assets/icons/currency-dollar.svg +3 -0
- package/dist/collection/assets/icons/dots.svg +65 -0
- package/dist/collection/assets/icons/empty-circle.svg +4 -0
- package/dist/collection/assets/icons/index.js +24 -0
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/optimism-brand.svg +11 -0
- package/dist/collection/assets/icons/polygon-brand.svg +16 -0
- package/dist/collection/assets/icons/sliders.svg +3 -0
- package/dist/collection/assets/icons/tether-brand.svg +7 -0
- package/dist/collection/assets/icons/trash.svg +3 -0
- package/dist/collection/assets/icons/usdc-brand.svg +5 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.css +1 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-button/cpsl-button.css +2 -2
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +5 -0
- package/dist/collection/components/cpsl-input/cpsl-input.js +58 -32
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.css +7 -6
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +29 -8
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +4 -7
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +2 -2
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +1 -0
- package/dist/collection/components/cpsl-text/cpsl-text.css +16 -7
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +4011 -2482
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/assets/icons/index.d.ts +12 -0
- package/dist/types/components/cpsl-input/cpsl-input.d.ts +10 -3
- package/dist/types/components/cpsl-popover/cpsl-popover.d.ts +3 -1
- package/dist/types/components.d.ts +16 -0
- package/package.json +3 -3
- package/dist/capsule/p-023a0300.entry.js +0 -20
- package/dist/capsule/p-023a0300.entry.js.map +0 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
2
|
+
<path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
|
|
2
|
+
<path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
|
|
3
|
+
<path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
|
|
4
|
+
<path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
|
|
5
|
+
</svg>
|
|
@@ -111,6 +111,7 @@
|
|
|
111
111
|
padding-bottom: var(--container-padding-bottom);
|
|
112
112
|
font-size: var(--container-font-size);
|
|
113
113
|
display: flex;
|
|
114
|
+
flex-direction: column;
|
|
114
115
|
align-items: var(--container-align-items);
|
|
115
116
|
justify-content: var(--container-justify-content);
|
|
116
117
|
gap: var(--container-gap);
|
|
@@ -47,7 +47,7 @@ export class CpslAlert {
|
|
|
47
47
|
"mutable": false,
|
|
48
48
|
"complexType": {
|
|
49
49
|
"original": "IconType",
|
|
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\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"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
|
+
"resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"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\" | \"optimismBrand\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"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\"",
|
|
51
51
|
"references": {
|
|
52
52
|
"IconType": {
|
|
53
53
|
"location": "import",
|
|
@@ -458,8 +458,8 @@
|
|
|
458
458
|
}
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
:host ::slotted(cpsl-text)
|
|
462
|
-
color: var(--button-color);
|
|
461
|
+
:host ::slotted(cpsl-text) {
|
|
462
|
+
--color-override: var(--button-color);
|
|
463
463
|
}
|
|
464
464
|
:host ::slotted(cpsl-icon-group) {
|
|
465
465
|
--container-border-color: var(--button-background-color);
|
|
@@ -44,7 +44,7 @@ export class CpslIcon {
|
|
|
44
44
|
"mutable": false,
|
|
45
45
|
"complexType": {
|
|
46
46
|
"original": "IconType",
|
|
47
|
-
"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\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"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\"",
|
|
47
|
+
"resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"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\" | \"optimismBrand\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"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\"",
|
|
48
48
|
"references": {
|
|
49
49
|
"IconType": {
|
|
50
50
|
"location": "import",
|
|
@@ -133,6 +133,10 @@
|
|
|
133
133
|
background: var(--container-background-color);
|
|
134
134
|
box-shadow: var(--container-box-shadow);
|
|
135
135
|
}
|
|
136
|
+
.input-container.textarea {
|
|
137
|
+
height: auto;
|
|
138
|
+
min-height: var(--container-height);
|
|
139
|
+
}
|
|
136
140
|
|
|
137
141
|
.error-container {
|
|
138
142
|
border-color: var(--container-border-error-color);
|
|
@@ -148,6 +152,7 @@
|
|
|
148
152
|
font-weight: var(--input-font-weight);
|
|
149
153
|
color: var(--input-color);
|
|
150
154
|
background: var(--input-background-color);
|
|
155
|
+
resize: none;
|
|
151
156
|
font-family: var(--cpsl-font-family, inherit);
|
|
152
157
|
}
|
|
153
158
|
.native-input:focus, .native-input:focus-visible {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
-
import
|
|
3
|
-
import "imask/esm/masked/pattern";
|
|
2
|
+
import Inputmask from "inputmask";
|
|
4
3
|
export class CpslInput {
|
|
5
4
|
constructor() {
|
|
6
5
|
this.inputId = `cpsl-input-${inputIds++}`;
|
|
7
6
|
this.onInput = (ev) => {
|
|
8
|
-
var _a, _b, _c;
|
|
9
7
|
const input = ev.target;
|
|
10
|
-
|
|
8
|
+
let _value = input.value || '';
|
|
9
|
+
if (input.inputmask)
|
|
10
|
+
_value = input.inputmask.unmaskedvalue();
|
|
11
11
|
if (Boolean(input)) {
|
|
12
|
-
this.value =
|
|
12
|
+
this.value = _value;
|
|
13
13
|
input.value === '' ? this.disableSlots() : this.enableSlots();
|
|
14
14
|
}
|
|
15
15
|
this.emitInputChange(ev);
|
|
@@ -35,7 +35,7 @@ export class CpslInput {
|
|
|
35
35
|
this.cpslFocus.emit(ev);
|
|
36
36
|
};
|
|
37
37
|
this.onPaste = (ev) => {
|
|
38
|
-
var _a
|
|
38
|
+
var _a;
|
|
39
39
|
ev.stopPropagation();
|
|
40
40
|
ev.preventDefault();
|
|
41
41
|
const input = ev.target;
|
|
@@ -46,8 +46,10 @@ export class CpslInput {
|
|
|
46
46
|
input.value = newVal;
|
|
47
47
|
// this.value = newVal;
|
|
48
48
|
input.selectionEnd = initialSelectionStart + pasteData.length;
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
let _value = input.value || '';
|
|
50
|
+
if (input.inputmask)
|
|
51
|
+
_value = input.inputmask.unmaskedvalue();
|
|
52
|
+
this.value = _value;
|
|
51
53
|
this.value === '' ? this.disableSlots() : this.enableSlots();
|
|
52
54
|
// Emit the cpslPaste event
|
|
53
55
|
this.cpslPaste.emit(ev);
|
|
@@ -58,7 +60,7 @@ export class CpslInput {
|
|
|
58
60
|
this.nativeInput.focus();
|
|
59
61
|
};
|
|
60
62
|
this.hasFocus = false;
|
|
61
|
-
this.
|
|
63
|
+
this.as = 'input';
|
|
62
64
|
this.autocapitalize = 'off';
|
|
63
65
|
this.autocomplete = 'off';
|
|
64
66
|
this.autocorrect = 'off';
|
|
@@ -83,6 +85,7 @@ export class CpslInput {
|
|
|
83
85
|
this.placeholder = undefined;
|
|
84
86
|
this.readonly = false;
|
|
85
87
|
this.required = false;
|
|
88
|
+
this.rows = 5;
|
|
86
89
|
this.showOptionalLabel = false;
|
|
87
90
|
this.spellcheck = false;
|
|
88
91
|
this.startIconSrc = undefined;
|
|
@@ -100,29 +103,17 @@ export class CpslInput {
|
|
|
100
103
|
}
|
|
101
104
|
}
|
|
102
105
|
handleSetupMask() {
|
|
103
|
-
var _a
|
|
106
|
+
var _a;
|
|
104
107
|
if (this.nativeInput) {
|
|
105
108
|
if (this.mask) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
mask: this.mask,
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
else {
|
|
112
|
-
this.maskedInput = IMask(this.nativeInput, {
|
|
113
|
-
mask: this.mask,
|
|
114
|
-
definitions: {
|
|
115
|
-
// <any single char>: <same type as mask (RegExp, Function, etc.)>
|
|
116
|
-
// defaults are '0', 'a', '*'
|
|
117
|
-
'#': /[\d]/,
|
|
118
|
-
},
|
|
119
|
-
});
|
|
120
|
-
}
|
|
109
|
+
Inputmask({ mask: this.mask, showMaskOnHover: false }).mask(this.nativeInput);
|
|
110
|
+
this.nativeInput.inputmask.shadowRoot = this.el.shadowRoot;
|
|
121
111
|
}
|
|
122
112
|
else {
|
|
123
|
-
(
|
|
124
|
-
|
|
125
|
-
|
|
113
|
+
if (this.nativeInput.inputmask) {
|
|
114
|
+
this.nativeInput.inputmask.remove();
|
|
115
|
+
}
|
|
116
|
+
this.nativeInput.value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
126
117
|
}
|
|
127
118
|
}
|
|
128
119
|
}
|
|
@@ -197,7 +188,7 @@ export class CpslInput {
|
|
|
197
188
|
}
|
|
198
189
|
render() {
|
|
199
190
|
var _a, _b;
|
|
200
|
-
return (h(Host, { key: '
|
|
191
|
+
return (h(Host, { key: 'c929f507e3a77bb9ea1b93d87c6e63e09c32a5d3', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (h("label", { key: 'c00459c97f97f89d0ce7138c01addcf49084c12e', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'b042e9447768246a393d6481e840c9067174915a', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, h("slot", { key: 'f1442ac52b54d664c1031d95b867f0d2ddebce67', name: "start" }), h(this.as, { key: '47d382513922209465f686c7e14fd23f711132cd', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '5edb466ccd708ea2fc5c0a3c9633ac8f7154588e', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '328654693d70173a047953dc9648c282ed70fb4e', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'ff9888ffce76a3396b0b2509fa7dbe5025a12e29' }, (_b = this.errorText) !== null && _b !== void 0 ? _b : this.helperText)))));
|
|
201
192
|
}
|
|
202
193
|
static get is() { return "cpsl-input"; }
|
|
203
194
|
static get encapsulation() { return "shadow"; }
|
|
@@ -213,6 +204,24 @@ export class CpslInput {
|
|
|
213
204
|
}
|
|
214
205
|
static get properties() {
|
|
215
206
|
return {
|
|
207
|
+
"as": {
|
|
208
|
+
"type": "string",
|
|
209
|
+
"mutable": false,
|
|
210
|
+
"complexType": {
|
|
211
|
+
"original": "'input' | 'textarea'",
|
|
212
|
+
"resolved": "\"input\" | \"textarea\"",
|
|
213
|
+
"references": {}
|
|
214
|
+
},
|
|
215
|
+
"required": false,
|
|
216
|
+
"optional": true,
|
|
217
|
+
"docs": {
|
|
218
|
+
"tags": [],
|
|
219
|
+
"text": "The tag for the input.\nOptions are: `\"input\"`, `\"textarea\".\nDefault is: `\"input\"`."
|
|
220
|
+
},
|
|
221
|
+
"attribute": "as",
|
|
222
|
+
"reflect": false,
|
|
223
|
+
"defaultValue": "'input'"
|
|
224
|
+
},
|
|
216
225
|
"autocapitalize": {
|
|
217
226
|
"type": "string",
|
|
218
227
|
"mutable": false,
|
|
@@ -637,6 +646,24 @@ export class CpslInput {
|
|
|
637
646
|
"reflect": false,
|
|
638
647
|
"defaultValue": "false"
|
|
639
648
|
},
|
|
649
|
+
"rows": {
|
|
650
|
+
"type": "number",
|
|
651
|
+
"mutable": false,
|
|
652
|
+
"complexType": {
|
|
653
|
+
"original": "number",
|
|
654
|
+
"resolved": "number",
|
|
655
|
+
"references": {}
|
|
656
|
+
},
|
|
657
|
+
"required": false,
|
|
658
|
+
"optional": false,
|
|
659
|
+
"docs": {
|
|
660
|
+
"tags": [],
|
|
661
|
+
"text": "Number of rows for the textarea"
|
|
662
|
+
},
|
|
663
|
+
"attribute": "rows",
|
|
664
|
+
"reflect": false,
|
|
665
|
+
"defaultValue": "5"
|
|
666
|
+
},
|
|
640
667
|
"showOptionalLabel": {
|
|
641
668
|
"type": "boolean",
|
|
642
669
|
"mutable": false,
|
|
@@ -695,7 +722,7 @@ export class CpslInput {
|
|
|
695
722
|
"mutable": false,
|
|
696
723
|
"complexType": {
|
|
697
724
|
"original": "IconType",
|
|
698
|
-
"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\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"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\"",
|
|
725
|
+
"resolved": "\"search\" | \"alertCircle\" | \"alertTriangle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"check\" | \"chevronDown\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"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\" | \"optimismBrand\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"star04Filled\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"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\"",
|
|
699
726
|
"references": {
|
|
700
727
|
"IconType": {
|
|
701
728
|
"location": "import",
|
|
@@ -775,8 +802,7 @@ export class CpslInput {
|
|
|
775
802
|
}
|
|
776
803
|
static get states() {
|
|
777
804
|
return {
|
|
778
|
-
"hasFocus": {}
|
|
779
|
-
"maskedInput": {}
|
|
805
|
+
"hasFocus": {}
|
|
780
806
|
};
|
|
781
807
|
}
|
|
782
808
|
static get events() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-input/cpsl-input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { AutocompleteTypes, IconType, TextFieldTypes } from '../../interface';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport IMask from 'imask/esm/imask';\nimport InputMask from 'imask/esm/controls/input';\nimport 'imask/esm/masked/pattern';\n\n@Component({\n tag: 'cpsl-input',\n styleUrl: 'cpsl-input.scss',\n shadow: true,\n})\nexport class CpslInput {\n private nativeInput?: HTMLInputElement;\n @Element() el!: HTMLCpslInputElement;\n\n private inputId = `cpsl-input-${inputIds++}`;\n /**\n * The value of the input when the input is focused.\n */\n private focusedValue?: string | number | null;\n\n @State() hasFocus = false;\n @State() maskedInput?: InputMask;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n */\n\n @Prop() autocapitalize = 'off';\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /**\n * Whether to disable auto disabling of the slotted components.\n */\n @Prop() noAutoDisable: boolean;\n\n /**\n * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n *\n * This may not be sufficient for the element to be focused on page load.\n */\n\n @Prop() autofocus = false;\n\n /**\n * If `true`, the input's entire contents will be selected on focus.\n */\n @Prop() autoselect = false;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * If `true`, the input primary color will use the contrast value, not the primary text value.\n */\n @Prop() contrastText = false;\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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 * Mask string to apply to the input.\n */\n @Prop() mask?: 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 * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: string | number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min?: string | number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n */\n @Prop() pattern?: string;\n\n /**\n * Instructional text that shows before the input has a value.\n * This property applies only when the `type` property is set to `\"email\"`,\n * `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n */\n @Prop() placeholder?: string;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly = false;\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 * If `true`, the element will have its spelling and grammar checked.\n */\n\n @Prop() spellcheck = false;\n\n /**\n * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n */\n @Prop() startIconSrc?: string;\n\n /**\n * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n */\n @Prop() startIcon?: IconType;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The type of control to display. The default type is `text`.\n */\n @Prop() type: TextFieldTypes = 'text';\n\n /**\n * The value of the controlled input.\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The `cpslInput` event is fired each time the user modifies the input's value.\n * Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration\n * to the input's value. This typically happens for each keystroke as the user types.\n *\n * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n */\n @Event() cpslInput!: EventEmitter<InputInputEventDetail>;\n\n /**\n * The `cpslChange` event is fired when the user modifies the input's value.\n * Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes\n * are committed, not as the user types.\n *\n * Depending on the way the users interacts with the element, the `cpslChange`\n * event fires at a different moment:\n * - When the element loses focus after its value has changed: for elements\n * where the user's interaction is typing.\n */\n @Event() cpslChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when something has been paste into the input.\n */\n @Event() cpslPaste!: EventEmitter<ClipboardEvent>;\n\n @Watch('disabled')\n handleDisable() {\n if (this.disabled) {\n this.disableSlots();\n } else {\n this.enableSlots();\n }\n }\n\n @Watch('mask')\n handleSetupMask() {\n if (this.nativeInput) {\n if (this.mask) {\n if (this.maskedInput) {\n this.maskedInput.updateOptions({\n mask: this.mask as any,\n });\n } else {\n this.maskedInput = IMask(this.nativeInput, {\n mask: this.mask,\n definitions: {\n // <any single char>: <same type as mask (RegExp, Function, etc.)>\n // defaults are '0', 'a', '*'\n '#': /[\\d]/,\n },\n });\n }\n } else {\n this.maskedInput?.destroy();\n this.nativeInput.value = this.value ?? '';\n this.maskedInput = undefined;\n }\n }\n }\n\n @Watch('value')\n handleValueChange() {\n if (!this.value) {\n this.nativeInput.value = this.value ?? '';\n }\n }\n\n componentDidLoad() {\n this.initButtons();\n if (this.value) {\n this.enableSlots();\n } else {\n this.disableSlots();\n }\n\n this.handleSetupMask();\n }\n\n private disableSlots() {\n if (!this.noAutoDisable) {\n this.endEl?.setAttribute('disabled', 'true');\n this.startEl?.setAttribute('disabled', 'true');\n }\n }\n\n private enableSlots() {\n this.endEl?.setAttribute('disabled', 'false');\n this.startEl?.setAttribute('disabled', 'false');\n }\n\n private initButtons() {\n if (this.endEl?.tagName === 'CPSL-BUTTON') {\n this.endEl.setAttribute('full-width', 'true');\n this.endEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n if (this.startEl?.tagName === 'CPSL-BUTTON') {\n this.startEl.setAttribute('full-width', 'true');\n this.startEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n }\n\n /**\n * Emits a `cpslInput` event.\n */\n private emitInputChange(event?: Event) {\n this.cpslInput.emit({ value: this.value || '', event });\n }\n\n /**\n * Emits a `cpslChange` event.\n *\n * This API should be called for user committed changes.\n * This API should not be used for external value changes.\n */\n private emitValueChange(event?: Event) {\n const { value } = this;\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n // Emitting a value change should update the internal state for tracking the focused value\n this.focusedValue = newValue;\n this.cpslChange.emit({ value: newValue, event });\n }\n\n private onInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n\n this.maskedInput?._onInput(ev);\n\n if (Boolean(input)) {\n this.value = this.maskedInput?.unmaskedValue ?? (input.value || '');\n input.value === '' ? this.disableSlots() : this.enableSlots();\n }\n\n this.emitInputChange(ev);\n };\n\n private onChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /**\n * Emits the `cpslChange` event when the input value\n * is different than the value when the input was focused.\n */\n this.emitValueChange(ev);\n }\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.autoselect && (ev.target as HTMLInputElement).select();\n\n this.cpslFocus.emit(ev);\n };\n\n private onPaste = (ev: ClipboardEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n const input = ev.target as HTMLInputElement;\n const pasteData = ev.clipboardData?.getData('text') || '';\n\n // Manually set the value & cursor position\n const initialSelectionStart = input.selectionStart;\n const newVal = `${input.value.slice(0, input.selectionStart)}${pasteData}${input.value.slice(input.selectionEnd, input.value.length)}`;\n input.value = newVal;\n\n // this.value = newVal;\n input.selectionEnd = initialSelectionStart + pasteData.length;\n\n this.maskedInput?._onInput({ ...(ev as any), target: input });\n this.value = this.maskedInput?.unmaskedValue ?? (input.value || '');\n\n this.value === '' ? this.disableSlots() : this.enableSlots();\n\n // Emit the cpslPaste event\n this.cpslPaste.emit(ev);\n\n // Emit the cpslChange event since the value was modified by paste\n this.emitInputChange(ev);\n };\n\n private focusInput = () => {\n this.nativeInput.focus();\n };\n\n private get startEl() {\n return this.el.querySelector('[slot=\"start\"]');\n }\n\n private get endEl() {\n return this.el.querySelector('[slot=\"end\"]');\n }\n\n render() {\n return (\n <Host class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText }}>\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 <div class={{ 'input-container': true, 'error-container': Boolean(this.errorText) }}>\n <slot name=\"start\"></slot>\n <input\n class=\"native-input\"\n part=\"native-input\"\n ref={input => (this.nativeInput = input)}\n id={this.inputId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder || ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n type={this.type}\n value={this.value ?? ''}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.focusInput}\n onPaste={this.onPaste}\n />\n <slot name=\"end\"></slot>\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-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-input/cpsl-input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { AutocompleteTypes, IconType, TextFieldTypes } from '../../interface';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport Inputmask from 'inputmask';\n\n@Component({\n tag: 'cpsl-input',\n styleUrl: 'cpsl-input.scss',\n shadow: true,\n})\nexport class CpslInput {\n private nativeInput?: HTMLInputElement;\n @Element() el!: HTMLCpslInputElement;\n\n private inputId = `cpsl-input-${inputIds++}`;\n /**\n * The value of the input when the input is focused.\n */\n private focusedValue?: string | number | null;\n\n @State() hasFocus = false;\n\n /**\n * The tag for the input.\n * Options are: `\"input\"`, `\"textarea\".\n * Default is: `\"input\"`.\n */\n @Prop() as?: 'input' | 'textarea' = 'input';\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n */\n\n @Prop() autocapitalize = 'off';\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /**\n * Whether to disable auto disabling of the slotted components.\n */\n @Prop() noAutoDisable: boolean;\n\n /**\n * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n *\n * This may not be sufficient for the element to be focused on page load.\n */\n\n @Prop() autofocus = false;\n\n /**\n * If `true`, the input's entire contents will be selected on focus.\n */\n @Prop() autoselect = false;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * If `true`, the input primary color will use the contrast value, not the primary text value.\n */\n @Prop() contrastText = false;\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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 * Mask string to apply to the input.\n */\n @Prop() mask?: 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 * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: string | number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min?: string | number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n */\n @Prop() pattern?: string;\n\n /**\n * Instructional text that shows before the input has a value.\n * This property applies only when the `type` property is set to `\"email\"`,\n * `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n */\n @Prop() placeholder?: string;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * Number of rows for the textarea\n */\n @Prop() rows: number = 5;\n\n /**\n * If `true`, the label will display an \"optional\" tag.\n */\n @Prop() showOptionalLabel = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n\n @Prop() spellcheck = false;\n\n /**\n * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n */\n @Prop() startIconSrc?: string;\n\n /**\n * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n */\n @Prop() startIcon?: IconType;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The type of control to display. The default type is `text`.\n */\n @Prop() type: TextFieldTypes = 'text';\n\n /**\n * The value of the controlled input.\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The `cpslInput` event is fired each time the user modifies the input's value.\n * Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration\n * to the input's value. This typically happens for each keystroke as the user types.\n *\n * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n */\n @Event() cpslInput!: EventEmitter<InputInputEventDetail>;\n\n /**\n * The `cpslChange` event is fired when the user modifies the input's value.\n * Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes\n * are committed, not as the user types.\n *\n * Depending on the way the users interacts with the element, the `cpslChange`\n * event fires at a different moment:\n * - When the element loses focus after its value has changed: for elements\n * where the user's interaction is typing.\n */\n @Event() cpslChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when something has been paste into the input.\n */\n @Event() cpslPaste!: EventEmitter<ClipboardEvent>;\n\n @Watch('disabled')\n handleDisable() {\n if (this.disabled) {\n this.disableSlots();\n } else {\n this.enableSlots();\n }\n }\n\n @Watch('mask')\n handleSetupMask() {\n if (this.nativeInput) {\n if (this.mask) {\n Inputmask({ mask: this.mask, showMaskOnHover: false }).mask(this.nativeInput);\n (this.nativeInput as any).inputmask.shadowRoot = this.el.shadowRoot;\n } else {\n if ((this.nativeInput as any).inputmask) {\n (this.nativeInput as any).inputmask.remove();\n }\n this.nativeInput.value = this.value ?? '';\n }\n }\n }\n\n @Watch('value')\n handleValueChange() {\n if (!this.value) {\n this.nativeInput.value = this.value ?? '';\n }\n }\n\n componentDidLoad() {\n this.initButtons();\n if (this.value) {\n this.enableSlots();\n } else {\n this.disableSlots();\n }\n\n this.handleSetupMask();\n }\n\n private disableSlots() {\n if (!this.noAutoDisable) {\n this.endEl?.setAttribute('disabled', 'true');\n this.startEl?.setAttribute('disabled', 'true');\n }\n }\n\n private enableSlots() {\n this.endEl?.setAttribute('disabled', 'false');\n this.startEl?.setAttribute('disabled', 'false');\n }\n\n private initButtons() {\n if (this.endEl?.tagName === 'CPSL-BUTTON') {\n this.endEl.setAttribute('full-width', 'true');\n this.endEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n if (this.startEl?.tagName === 'CPSL-BUTTON') {\n this.startEl.setAttribute('full-width', 'true');\n this.startEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n }\n\n /**\n * Emits a `cpslInput` event.\n */\n private emitInputChange(event?: Event) {\n this.cpslInput.emit({ value: this.value || '', event });\n }\n\n /**\n * Emits a `cpslChange` event.\n *\n * This API should be called for user committed changes.\n * This API should not be used for external value changes.\n */\n private emitValueChange(event?: Event) {\n const { value } = this;\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n // Emitting a value change should update the internal state for tracking the focused value\n this.focusedValue = newValue;\n this.cpslChange.emit({ value: newValue, event });\n }\n\n private onInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement | null;\n\n let _value = input.value || '';\n if ((input as any).inputmask) _value = (input as any).inputmask.unmaskedvalue();\n\n if (Boolean(input)) {\n this.value = _value;\n input.value === '' ? this.disableSlots() : this.enableSlots();\n }\n\n this.emitInputChange(ev);\n };\n\n private onChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /**\n * Emits the `cpslChange` event when the input value\n * is different than the value when the input was focused.\n */\n this.emitValueChange(ev);\n }\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.autoselect && (ev.target as HTMLInputElement).select();\n\n this.cpslFocus.emit(ev);\n };\n\n private onPaste = (ev: ClipboardEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n const input = ev.target as HTMLInputElement;\n const pasteData = ev.clipboardData?.getData('text') || '';\n\n // Manually set the value & cursor position\n const initialSelectionStart = input.selectionStart;\n const newVal = `${input.value.slice(0, input.selectionStart)}${pasteData}${input.value.slice(input.selectionEnd, input.value.length)}`;\n input.value = newVal;\n\n // this.value = newVal;\n input.selectionEnd = initialSelectionStart + pasteData.length;\n\n let _value = input.value || '';\n if ((input as any).inputmask) _value = (input as any).inputmask.unmaskedvalue();\n\n this.value = _value;\n\n this.value === '' ? this.disableSlots() : this.enableSlots();\n\n // Emit the cpslPaste event\n this.cpslPaste.emit(ev);\n\n // Emit the cpslChange event since the value was modified by paste\n this.emitInputChange(ev);\n };\n\n private focusInput = () => {\n this.nativeInput.focus();\n };\n\n private get startEl() {\n return this.el.querySelector('[slot=\"start\"]');\n }\n\n private get endEl() {\n return this.el.querySelector('[slot=\"end\"]');\n }\n\n render() {\n return (\n <Host class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText }}>\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 <div class={{ 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' }}>\n <slot name=\"start\"></slot>\n <this.as\n part=\"native-input\"\n class={{ 'native-input': true }}\n ref={input => (this.nativeInput = input)}\n id={this.inputId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder || ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n type={this.type}\n value={this.value ?? ''}\n rows={this.rows}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.focusInput}\n onPaste={this.onPaste}\n />\n <slot name=\"end\"></slot>\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"]}
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
display: block;
|
|
59
59
|
z-index: -1;
|
|
60
60
|
overflow: auto;
|
|
61
|
+
transform: var(--th, ) var(--tv, );
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
:host(.open) {
|
|
@@ -76,25 +77,25 @@
|
|
|
76
77
|
}
|
|
77
78
|
|
|
78
79
|
:host(.transform-h-left) {
|
|
79
|
-
|
|
80
|
+
--th: translateX(0);
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
:host(.transform-h-center) {
|
|
83
|
-
|
|
84
|
+
--th: translateX(-50%);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
:host(.transform-h-right) {
|
|
87
|
-
|
|
88
|
+
--th: translateX(-100%);
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
:host(.transform-v-top) {
|
|
91
|
-
|
|
92
|
+
--tv: translateY(0);
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
:host(.transform-v-center) {
|
|
95
|
-
|
|
96
|
+
--tv: translateY(-50%);
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
:host(.transform-v-bottom) {
|
|
99
|
-
|
|
100
|
+
--tv: translateY(-100%);
|
|
100
101
|
}
|
|
@@ -20,7 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
20
20
|
import { Host, h } from "@stencil/core";
|
|
21
21
|
export class CpslPopover {
|
|
22
22
|
constructor() {
|
|
23
|
-
this.
|
|
23
|
+
this.startedInside = false;
|
|
24
|
+
this.startedWhenMounted = false;
|
|
24
25
|
this.configureTriggerInteraction = () => {
|
|
25
26
|
const { trigger, triggerAction, destroyTriggerInteraction } = this;
|
|
26
27
|
if (destroyTriggerInteraction) {
|
|
@@ -80,6 +81,15 @@ export class CpslPopover {
|
|
|
80
81
|
this.present();
|
|
81
82
|
},
|
|
82
83
|
},
|
|
84
|
+
{
|
|
85
|
+
eventName: 'touchstart',
|
|
86
|
+
callback: e => {
|
|
87
|
+
if (this.preventBlur) {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
}
|
|
90
|
+
this.present();
|
|
91
|
+
},
|
|
92
|
+
},
|
|
83
93
|
];
|
|
84
94
|
break;
|
|
85
95
|
}
|
|
@@ -139,12 +149,19 @@ export class CpslPopover {
|
|
|
139
149
|
}
|
|
140
150
|
}
|
|
141
151
|
};
|
|
152
|
+
this.validateEventStart = event => {
|
|
153
|
+
this.startedWhenMounted = !!this.triggerEl;
|
|
154
|
+
this.startedInside = this.triggerEl.contains(event.target);
|
|
155
|
+
this.present();
|
|
156
|
+
};
|
|
142
157
|
this.handleClickOutside = (event) => {
|
|
143
|
-
if
|
|
144
|
-
|
|
158
|
+
// Do nothing if `mousedown` or `touchstart` started inside ref element
|
|
159
|
+
if (this.startedInside || !this.startedWhenMounted)
|
|
145
160
|
return;
|
|
146
|
-
|
|
147
|
-
if (this.
|
|
161
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
162
|
+
if (!this.triggerEl || this.triggerEl.contains(event.target))
|
|
163
|
+
return;
|
|
164
|
+
if (this.open) {
|
|
148
165
|
event.preventDefault();
|
|
149
166
|
this.close();
|
|
150
167
|
}
|
|
@@ -161,7 +178,7 @@ export class CpslPopover {
|
|
|
161
178
|
};
|
|
162
179
|
this.close = () => {
|
|
163
180
|
this.open = false;
|
|
164
|
-
this.
|
|
181
|
+
this.startedInside = false;
|
|
165
182
|
this.cpslClose.emit();
|
|
166
183
|
};
|
|
167
184
|
this.open = false;
|
|
@@ -195,11 +212,15 @@ export class CpslPopover {
|
|
|
195
212
|
}
|
|
196
213
|
onOpenChange() {
|
|
197
214
|
if (this.open) {
|
|
215
|
+
window.addEventListener('mousedown', this.validateEventStart);
|
|
216
|
+
window.addEventListener('touchstart', this.validateEventStart);
|
|
198
217
|
window.addEventListener('click', this.handleClickOutside);
|
|
199
218
|
window.addEventListener('scroll', () => this.setPosition(), true);
|
|
200
219
|
window.addEventListener('resize', () => this.setPosition(), true);
|
|
201
220
|
}
|
|
202
221
|
else {
|
|
222
|
+
window.removeEventListener('mousedown', this.validateEventStart);
|
|
223
|
+
window.removeEventListener('touchstart', this.validateEventStart);
|
|
203
224
|
window.removeEventListener('click', this.handleClickOutside);
|
|
204
225
|
window.removeEventListener('scroll', () => this.setPosition(), true);
|
|
205
226
|
window.removeEventListener('resize', () => this.setPosition(), true);
|
|
@@ -214,7 +235,7 @@ export class CpslPopover {
|
|
|
214
235
|
}
|
|
215
236
|
render() {
|
|
216
237
|
var _a;
|
|
217
|
-
return (h(Host, { key: '
|
|
238
|
+
return (h(Host, { key: '18d133c7b3b9130f4119aa1502fc22a0edba0adf', class: {
|
|
218
239
|
'open': this.open,
|
|
219
240
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
220
241
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -222,7 +243,7 @@ export class CpslPopover {
|
|
|
222
243
|
'transform-v-top': this.transformOriginVertical === 'top',
|
|
223
244
|
'transform-v-center': this.transformOriginVertical === 'center',
|
|
224
245
|
'transform-v-bottom': this.transformOriginVertical === 'bottom',
|
|
225
|
-
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '
|
|
246
|
+
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '0c86d612a066ac39a37c0291ab96e518f6e2cd32', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '616112bb261563452b94256d3f7a8ed563e1cf65' }))));
|
|
226
247
|
}
|
|
227
248
|
static get is() { return "cpsl-popover"; }
|
|
228
249
|
static get encapsulation() { return "shadow"; }
|