npm - @usecapsule/core-components - Versions diffs - 3.2.0-dev.1 → 3.3.0 - Mend

@usecapsule/core-components 3.2.0-dev.1 → 3.3.0

Files changed (384) hide show

package/dist/collection/components/cpsl-alert/cpsl-alert.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class CpslAlert {
         }
     }
     render() {
-        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { icon: this.iconType }), h("slot", { key: '8a2ed501e583e444203fa6168c7eb10011ec57fe' }))));
+        return (h(Host, { key: '9ea40cedf2f696f578a0bd7ff88a788d4136379e', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: '49eab47245a0bb04dd2f7aa2c6ecae541f3714f6', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: '965814c71b595fb51813fd81ba2e91d1c6ffa541', icon: this.iconType }), h("slot", { key: '38e31fab2bf261206b5d4debaff18ae7c09fca90' }))));
     }
     static get is() { return "cpsl-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class CpslAlert {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"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\"",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-alert/cpsl-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO;;IAEtE,IAAY,QAAQ;QAClB,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC;QACZ,CAAC;QAED,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,aAAa,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,~~qDAAC~~,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;~~YACxH~~,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,QAAQ,IAAI,~~iBAAW~~,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-alert',\n styleUrl: 'cpsl-alert.scss',\n shadow: true,\n})\nexport class CpslAlert {\n /*\n The name of the icon to show.\n /\n @Prop() icon?: IconType;\n\n /\n The variant of alert.\n * Options are: `\"error\"` \| `\"warning\"` \| `\"success\"` \| `\"custom\"`\n * Default is: `\"error\"`.\n */\n @Prop() variant?: 'error' \| 'warning' \| 'success' \| 'custom' = 'error';\n\n private get iconType(): IconType \| undefined {\n if (Boolean(this.icon)) {\n this.icon;\n }\n\n switch (this.variant) {\n case 'custom': {\n return undefined;\n }\n case 'success': {\n return 'checkCircle';\n }\n case 'warning': {\n return 'alertCircle';\n }\n case 'error':\n default: {\n return 'alertCircle';\n }\n }\n }\n\n render() {\n return (\n <Host class={{ error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' }}>\n <div class=\"alert-container\">\n {this.iconType && <cpsl-icon icon={this.iconType} />}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-alert.js","sourceRoot":"","sources":["../../../../src/components/cpsl-alert/cpsl-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,SAAS;;;uBAW2C,OAAO;;IAEtE,IAAY,QAAQ;QAClB,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC;QACZ,CAAC;QAED,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,OAAO,aAAa,CAAC;YACvB,CAAC;YACD,KAAK,OAAO,CAAC;YACb,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,aAAa,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YAEpH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,QAAQ,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n tag: 'cpsl-alert',\n styleUrl: 'cpsl-alert.scss',\n shadow: true,\n})\nexport class CpslAlert {\n /*\n The name of the icon to show.\n /\n @Prop() icon?: IconType;\n\n /\n The variant of alert.\n * Options are: `\"error\"` \| `\"warning\"` \| `\"success\"` \| `\"custom\"`\n * Default is: `\"error\"`.\n */\n @Prop() variant?: 'error' \| 'warning' \| 'success' \| 'custom' = 'error';\n\n private get iconType(): IconType \| undefined {\n if (Boolean(this.icon)) {\n this.icon;\n }\n\n switch (this.variant) {\n case 'custom': {\n return undefined;\n }\n case 'success': {\n return 'checkCircle';\n }\n case 'warning': {\n return 'alertCircle';\n }\n case 'error':\n default: {\n return 'alertCircle';\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{ error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' }}\n >\n <div class=\"alert-container\">\n {this.iconType && <cpsl-icon icon={this.iconType} />}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-animation/cpsl-animation.js CHANGED Viewed

@@ -23,6 +23,9 @@ export class CpslAnimation {
     constructor() {
         this.src = undefined;
     }
+    /**
+     * Will replay the animation
+     */
     replayAnimation() {
         return __awaiter(this, void 0, void 0, function* () {
             this.animation.play();
@@ -41,7 +44,7 @@ export class CpslAnimation {
         return this.el.shadowRoot.getElementById('animation-container');
     }
     render() {
-        return (h(Host, { key: '7a121c6f09a28dcffdd54d837b75d442b27c48f0' }, h("div", { key: '15accd8138d211272bcdce917fbcb347f7ce4697', part: "animation-container", id: "animation-container", class: "animation-container" })));
+        return (h(Host, { key: '5fab748126f7b18a9051aa89df1b8a78ef647648' }, h("div", { key: 'b9cac260ee00f54a56c7cd249850a8df5e84dc3b', part: "animation-container", id: "animation-container", class: "animation-container" })));
     }
     static get is() { return "cpsl-animation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-animation/cpsl-animation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-animation.js","sourceRoot":"","sources":["../../../../src/components/cpsl-animation/cpsl-animation.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,MAAyB,MAAM,YAAY,CAAC;AAOnD,MAAM,OAAO,aAAa;;;;~~IAclB~~,eAAe;;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;KAAA;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;YACpC,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,IAAI,CAAC,oBAAoB;YACpC,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,GAAG;SACf,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,qBAAqB,EAAC,EAAE,EAAC,qBAAqB,EAAC,KAAK,EAAC,qBAAqB,GAAG,CAClF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Method, Prop } from '@stencil/core';\nimport lottie, { AnimationItem } from 'lottie-web';\n\n@Component({\n tag: 'cpsl-animation',\n styleUrl: 'cpsl-animation.scss',\n shadow: true,\n})\nexport class CpslAnimation {\n private animation: AnimationItem;\n\n @Element() el!: HTMLCpslAnimationElement;\n\n /*\n Source of the Lottie animation file.\n /\n @Prop() src: string;\n\n /\n Will replay the animation\n */\n @Method()\n async replayAnimation() {\n this.animation.play();\n }\n\n componentDidLoad() {\n this.animation = lottie.loadAnimation({\n loop: false,\n container: this.animationContainerEl,\n renderer: 'svg',\n path: this.src,\n });\n\n this.animation.play();\n }\n\n private get animationContainerEl() {\n return this.el.shadowRoot.getElementById('animation-container');\n }\n\n render() {\n return (\n <Host>\n <div part=\"animation-container\" id=\"animation-container\" class=\"animation-container\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-animation.js","sourceRoot":"","sources":["../../../../src/components/cpsl-animation/cpsl-animation.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,MAAyB,MAAM,YAAY,CAAC;AAOnD,MAAM,OAAO,aAAa;;;;IAUxB;;OAEG;IAEG,eAAe;;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;KAAA;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;YACpC,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,IAAI,CAAC,oBAAoB;YACpC,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,GAAG;SACf,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,qBAAqB,EAAC,EAAE,EAAC,qBAAqB,EAAC,KAAK,EAAC,qBAAqB,GAAG,CAClF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Method, Prop } from '@stencil/core';\nimport lottie, { AnimationItem } from 'lottie-web';\n\n@Component({\n tag: 'cpsl-animation',\n styleUrl: 'cpsl-animation.scss',\n shadow: true,\n})\nexport class CpslAnimation {\n private animation: AnimationItem;\n\n @Element() el!: HTMLCpslAnimationElement;\n\n /*\n Source of the Lottie animation file.\n /\n @Prop() src: string;\n\n /\n Will replay the animation\n */\n @Method()\n async replayAnimation() {\n this.animation.play();\n }\n\n componentDidLoad() {\n this.animation = lottie.loadAnimation({\n loop: false,\n container: this.animationContainerEl,\n renderer: 'svg',\n path: this.src,\n });\n\n this.animation.play();\n }\n\n private get animationContainerEl() {\n return this.el.shadowRoot.getElementById('animation-container');\n }\n\n render() {\n return (\n <Host>\n <div part=\"animation-container\" id=\"animation-container\" class=\"animation-container\" />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js CHANGED Viewed

@@ -6,10 +6,13 @@ export class CpslAppBar {
         this.zIndexOverride = undefined;
     }
     render() {
-        return (h(Host, { key: '045bc58e1719b02dea67276200abb0cd05d6f717', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'e29aa3326057f15b83e4ca9e2718074fda98e177', class: "container", part: "container", style: {
+        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({
+                // position: this.position,
+                height: `${this.height}px`
+            }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
                 position: this.position,
                 height: `${this.height}px`,
-            } }, h("slot", { key: '566c990b33134045c54195b7c762f07049a6bd22' })), this.position === 'fixed' && (h("div", { style: {
+            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
                 height: `${this.height}px`,
             } }))));
     }

package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,~~kBAEH~~,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAG/E,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,~~WACE~~,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-app-bar',\n styleUrl: 'cpsl-app-bar.scss',\n shadow: true,\n})\nexport class CpslAppBar {\n /*\n Height of the app bar.\n /\n @Prop() height: number;\n\n /\n The position of the drawer.\n * Default is `fixed`.\n /\n @Prop() position?: 'fixed' \| 'static' = 'fixed';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n render() {\n return (\n <Host\n style={{\n // position: this.position,\n height: `${this.height}px`,\n ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n >\n <div\n class=\"container\"\n part=\"container\"\n style={{\n position: this.position,\n height: `${this.height}px`,\n }}\n >\n <slot></slot>\n </div>\n {this.position === 'fixed' && (\n <div\n style={{\n height: `${this.height}px`,\n }}\n />\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-app-bar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-app-bar/cpsl-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;wBAUmB,OAAO;;;IAO/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK;gBACH,2BAA2B;gBAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IACvB,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAG/E,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBAED,8DAAa,CACT;YACL,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,CAC5B,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B,GACD,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-app-bar',\n styleUrl: 'cpsl-app-bar.scss',\n shadow: true,\n})\nexport class CpslAppBar {\n /*\n Height of the app bar.\n /\n @Prop() height: number;\n\n /\n The position of the drawer.\n * Default is `fixed`.\n /\n @Prop() position?: 'fixed' \| 'static' = 'fixed';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n render() {\n return (\n <Host\n style={{\n // position: this.position,\n height: `${this.height}px`,\n ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n >\n <div\n class=\"container\"\n part=\"container\"\n style={{\n position: this.position,\n height: `${this.height}px`,\n }}\n >\n <slot></slot>\n </div>\n {this.position === 'fixed' && (\n <div\n style={{\n height: `${this.height}px`,\n }}\n />\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-avatar/cpsl-avatar.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class CpslAvatar {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
     }
     static get is() { return "cpsl-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-button/cpsl-button.js CHANGED Viewed

@@ -10,16 +10,19 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
+        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
+                // VARIANTS
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
                 'destructive': this.variant === 'destructive',
+                // STATE
                 'disabled': this.disabled,
                 'full-width': this.fullWidth,
+                // SIZES
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h(this.as, { key: '9ba756220f648f1d4123bd42df8d4db311800705', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '7156e673a1a43ea808aeca1574b5f251c38bdc22', name: "start" }), h("slot", { key: 'a74790e4d6deb92b6e0380f6ca8551aacf5c3b8f' }), h("slot", { key: '73219152509968a55aeff2cdc56beefa9b9e5995', name: "end" }))));
+            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-button/cpsl-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYC,QAAQ;;uBAY2C,SAAS;;IAEhG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;~~gBAEL~~,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;~~gBAE7C~~,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;~~gBAE5B~~,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBACvF,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-button',\n styleUrl: 'cpsl-button.scss',\n shadow: true,\n})\nexport class CpslButton {\n /*\n The tag for the button.\n * Options are: `\"button\"`, `\"a\".\n * Default is: `\"button\"`.\n /\n @Prop() as?: 'button' \| 'a' = 'button';\n\n /\n If the button is disabled.\n * Default is: false.\n /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /\n Whether the button takes the full width of it's container.\n * Default is: false.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n href to use when using a link.\n /\n @Prop() href?: string;\n\n /\n The size of the button.\n * Options are: `\"small\"`, `\"medium\".\n * Default is: `\"medium\"`.\n /\n @Prop() size?: 'small' \| 'medium' = 'medium';\n\n /\n target to use when using a link.\n /\n @Prop() target?: string;\n\n /\n The variant of the button.\n * Options are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\n * Default is: `\"primary\"`.\n */\n @Prop({ reflect: true }) variant?: 'primary' \| 'secondary' \| 'ghost' \| 'destructive' = 'primary';\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n 'ghost': this.variant === 'ghost',\n 'destructive': this.variant === 'destructive',\n // STATE\n 'disabled': this.disabled,\n 'full-width': this.fullWidth,\n // SIZES\n 'small': this.size === 'small',\n 'medium': this.size === 'medium',\n }}\n >\n <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\">\n <slot name=\"start\"></slot>\n <slot></slot>\n <slot name=\"end\"></slot>\n </this.as>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYC,QAAQ;;uBAY2C,SAAS;;IAEhG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBACvF,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-button',\n styleUrl: 'cpsl-button.scss',\n shadow: true,\n})\nexport class CpslButton {\n /*\n The tag for the button.\n * Options are: `\"button\"`, `\"a\".\n * Default is: `\"button\"`.\n /\n @Prop() as?: 'button' \| 'a' = 'button';\n\n /\n If the button is disabled.\n * Default is: false.\n /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /\n Whether the button takes the full width of it's container.\n * Default is: false.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n href to use when using a link.\n /\n @Prop() href?: string;\n\n /\n The size of the button.\n * Options are: `\"small\"`, `\"medium\".\n * Default is: `\"medium\"`.\n /\n @Prop() size?: 'small' \| 'medium' = 'medium';\n\n /\n target to use when using a link.\n /\n @Prop() target?: string;\n\n /\n The variant of the button.\n * Options are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\n * Default is: `\"primary\"`.\n */\n @Prop({ reflect: true }) variant?: 'primary' \| 'secondary' \| 'ghost' \| 'destructive' = 'primary';\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n 'ghost': this.variant === 'ghost',\n 'destructive': this.variant === 'destructive',\n // STATE\n 'disabled': this.disabled,\n 'full-width': this.fullWidth,\n // SIZES\n 'small': this.size === 'small',\n 'medium': this.size === 'medium',\n }}\n >\n <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\">\n <slot name=\"start\"></slot>\n <slot></slot>\n <slot name=\"end\"></slot>\n </this.as>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-button/cpsl-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-button.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7D,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC;SAC1D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAC3H,MAAM,gBAAgB,GAAU,IAAI,CAAC,EAAE,~~CAAC~~,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,qDAAqD,IAAI,CAAC,OAAO,gBAAgB,CAAC;~~AAEnL~~,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,mBAAmB;CAC7B,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslButton } from './cpsl-button';\n\nconst meta: Meta<CpslButton & { content?: string }> = {\n title: 'Components/CpslButton',\n args: { variant: 'primary', size: 'medium', content: 'Test' },\n argTypes: {\n variant: {\n control: {\n type: 'select',\n },\n options: ['primary', 'secondary', 'ghost', 'destructive'],\n },\n size: {\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslButton & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\">${args.content}</cpsl-button>`;\nconst TemplateWithIcon: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\"><cpsl-icon icon=\"home\" slot=\"start\"></cpsl-icon>${args.content}</cpsl-button>`;\n\nexport const Primary: Story = Template.bind({});\nPrimary.args = {\n content: 'Primary',\n};\n\nexport const Secondary: Story = Template.bind({});\nSecondary.args = {\n content: 'Secondary',\n variant: 'secondary',\n};\n\nexport const Ghost: Story = Template.bind({});\nGhost.args = {\n content: 'Ghost',\n variant: 'ghost',\n};\n\nexport const Destructive: Story = Template.bind({});\nDestructive.args = {\n content: 'Destructive',\n variant: 'destructive',\n};\n\nexport const Icon: Story = TemplateWithIcon.bind({});\nIcon.args = {\n content: '',\n variant: 'ghost',\n};\n\nexport const PrimaryWithIcon: Story = TemplateWithIcon.bind({});\nPrimaryWithIcon.args = {\n content: 'Primary With Icon',\n};\n"]}
1	+ {"version":3,"file":"cpsl-button.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7D,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC;SAC1D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAC3H,MAAM,gBAAgB,GAAU,IAAI,CAAC,EAAE,CACrC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,qDAAqD,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAE7I,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,mBAAmB;CAC7B,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslButton } from './cpsl-button';\n\nconst meta: Meta<CpslButton & { content?: string }> = {\n title: 'Components/CpslButton',\n args: { variant: 'primary', size: 'medium', content: 'Test' },\n argTypes: {\n variant: {\n control: {\n type: 'select',\n },\n options: ['primary', 'secondary', 'ghost', 'destructive'],\n },\n size: {\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslButton & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\">${args.content}</cpsl-button>`;\nconst TemplateWithIcon: Story = args =>\n `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\"><cpsl-icon icon=\"home\" slot=\"start\"></cpsl-icon>${args.content}</cpsl-button>`;\n\nexport const Primary: Story = Template.bind({});\nPrimary.args = {\n content: 'Primary',\n};\n\nexport const Secondary: Story = Template.bind({});\nSecondary.args = {\n content: 'Secondary',\n variant: 'secondary',\n};\n\nexport const Ghost: Story = Template.bind({});\nGhost.args = {\n content: 'Ghost',\n variant: 'ghost',\n};\n\nexport const Destructive: Story = Template.bind({});\nDestructive.args = {\n content: 'Destructive',\n variant: 'destructive',\n};\n\nexport const Icon: Story = TemplateWithIcon.bind({});\nIcon.args = {\n content: '',\n variant: 'ghost',\n};\n\nexport const PrimaryWithIcon: Story = TemplateWithIcon.bind({});\nPrimaryWithIcon.args = {\n content: 'Primary With Icon',\n};\n"]}

package/dist/collection/components/cpsl-button-group/cpsl-button-group.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class CpslButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
+        return (h(Host, { key: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
     }
     static get is() { return "cpsl-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-card/cpsl-card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslCard {
     render() {
-        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
+        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
     }
     static get is() { return "cpsl-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class CpslCheckbox {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
+        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
     }
     static get is() { return "cpsl-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class CpslCodeInput {
         this.handleInput = (ind, ev) => {
             var _a;
             const inputElements = this.inputs;
-            if (ev.inputType == 'insertText') {
+            if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
                     inputElements[ind].value = '';
                     return;
@@ -59,10 +59,12 @@ export class CpslCodeInput {
                 inputElements[ind].setSelectionRange(1, 1);
             }, 0);
         };
+        // TODO: figure out why pasting a string populates the first input
         this.handlePaste = (e) => {
             const inputElements = this.inputs;
             const pastedCode = e.clipboardData.getData('text');
             if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
+                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
                 setTimeout(() => {
                     inputElements[0].value = '';
                 }, 0);
@@ -87,10 +89,10 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: 'a75b04b3cf649df494520712a822f450e44f106f' }, h("div", { key: 'c38ae9fab904d38cd3a3154e2aa4bcdef1e1562b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: '96041359166b5a633d4e4598d22523553592ed4e', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '32dd48613df030cc809331567df2972eb987701d', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: 'ddba19144be6675259254e698de8668ee4662324' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,aAAa;;~~QAmChB~~,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAc,EAAE,EAAE;;YACpD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAClC,IAAI,EAAE,CAAC,SAAS,~~IAAI~~,YAAY,EAAE,CAAC;~~gBACjC~~,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;oBACvD,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC9B,OAAO;gBACT,CAAC;gBACD,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAE1D,MAAM,OAAO,GAAG,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;gBAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAiB,EAAE,EAAE;YACzD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,IAAI,OAAO,CAAC;oBACZ,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC9B,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;wBAC/C,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC5C,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC;oBAC5C,CAAC;yBAAM,CAAC;wBACN,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;oBACxC,CAAC;oBACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;oBACpB,MAAM;gBACR,CAAC;gBACD,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC3C,CAAC,EAAE,CAAC,CAAC,CAAC;oBACN,MAAM;gBACR,CAAC;gBACD,OAAO,CAAC,CAAC,CAAC;oBACR,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAE;YACpC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;qBAAM,IAAI,KAAK,CAAC,EAAE,KAAK,cAAc,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC;oBACxD,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;YACH,CAAC;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC7C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;~~QAGM~~,gBAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YAC1C,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAClC,MAAM,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC;~~gBAE1D~~,UAAU,CAAC,GAAG,EAAE;oBACd,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC9B,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;YACH,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,CAAC,CAAC;;;;;oBAzFmC,QAAQ;;IA2F7C,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;gBAAC,OAAA,CAC5C,aACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAC/D,EAAE,EAAE,cAAc,CAAC,EAAE,EACrB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1C,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GACtD,CACH,CAAA;aAAA,CAAC,CACE;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,~~WAAK~~,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,~~iBAAW~~,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,GAAI;gBAC3E,~~gBAAO,~~MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /*\n Value of the code.\n /\n ~~// eslint-disable-next-line~~ @~~stencil-community/strict-mutable\n @~~Prop({ mutable: true }) code: string;\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 Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n Length of the code.\n /\n @Prop() length: number;\n\n /\n Type of characters to accept in the code.\n * Defaults to number.\n /\n @Prop() type?: 'number' \| 'string' = 'number';\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n if (ev.inputType == 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n const newCode = `${this.code ?? ''}${ev.data}`;\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n // TODO: figure out why pasting a string populates the first input\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[this.length - 1].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n id={`code-input-${i}`}\n maxLength={1}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n inputMode={this.type === 'number' ? 'numeric' : 'text'}\n />\n ))}\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /*\n Value of the code.\n /\n @Prop({ mutable: true }) code: string;\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 Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n Length of the code.\n /\n @Prop() length: number;\n\n /\n Type of characters to accept in the code.\n * Defaults to number.\n /\n @Prop() type?: 'number' \| 'string' = 'number';\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n if (ev.inputType === 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n const newCode = `${this.code ?? ''}${ev.data}`;\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n // TODO: figure out why pasting a string populates the first input\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[this.length - 1].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n id={`code-input-${i}`}\n maxLength={1}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n inputMode={this.type === 'number' ? 'numeric' : 'text'}\n />\n ))}\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-col/cpsl-col.js CHANGED Viewed

@@ -33,28 +33,40 @@ export class CpslCol {
     onResize() {
         forceUpdate(this);
     }
+    // Loop through all of the breakpoints to see if the media query
+    // matches and grab the column value from the relevant prop if so
     getColumns(property) {
         let matched;
         for (const breakpoint of BREAKPOINTS) {
             const matches = matchBreakpoint(breakpoint);
+            // Grab the value of the property, if it exists and our
+            // media query matches we return the value
             const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
             if (matches && columns !== undefined) {
                 matched = columns;
             }
         }
+        // Return the last matched columns since the breakpoints
+        // increase in size and we want to return the largest match
         return matched;
     }
     calculateSize() {
         const columns = this.getColumns('size');
+        // If size wasn't set for any breakpoint
+        // or if the user set the size without a value
+        // it means we need to stick with the default and return
+        // e.g. <ion-col size-md>
         if (!columns || columns === '') {
             return;
         }
+        // If the size is set to auto then don't calculate a size
         const colSize = columns === 'auto'
             ? 'auto'
-            :
+            : // If CSS supports variables we should use the grid columns var
                 SUPPORTS_VARS
                     ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-                    :
+                    : // Convert the columns to a percentage by dividing by the total number
+                        // of columns (12) and then multiplying by 100
                         (columns / 12) * 100 + '%';
         return {
             'flex': `0 0 ${colSize}`,
@@ -62,15 +74,19 @@ export class CpslCol {
             'max-width': `${colSize}`,
         };
     }
+    // Called by push, pull, and offset since they use the same calculations
     calculatePosition(property, modifier) {
         const columns = this.getColumns(property);
         if (!columns) {
             return;
         }
+        // If the number of columns passed are greater than 0 and less than
+        // 12 we can position the column, else default to auto
         const amount = SUPPORTS_VARS
-            ?
+            ? // If CSS supports variables we should use the grid columns var
                 `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-            :
+            : // Convert the columns to a percentage by dividing by the total number
+                // of columns (12) and then multiplying by 100
                 columns > 0 && columns < 12
                     ? (columns / 12) * 100 + '%'
                     : 'auto';
@@ -89,7 +105,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'e883138d5be5bfcffaa61fc3f440cfaf3c2c567d', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '51c74a5a0895f34074b65441be91f02c3243ba8c' })));
+        return (h(Host, { key: 'febc737118ea526e5c53e8e59479a245ec1b5dd1', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '88e01f9f4ed95eedbfd0620398792d9d5d58633d' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-col/cpsl-col.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-divider/cpsl-divider.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslDivider {
     render() {
-        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
+        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js CHANGED Viewed

@@ -16,6 +16,7 @@ export class CpslDrawer {
     }
     componentDidLoad() {
         this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
+        // Show transition after initial render
         setTimeout(() => {
             this.showTransition = true;
         }, 100);
@@ -32,12 +33,12 @@ export class CpslDrawer {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (h(Host, { key: 'c8f7717bd060bdd83edec49865d99d2bc885aace', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (h(Host, { key: '9568be6ee1897a96bbdb18dabfd32d40ba6a6fa5', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'f63a22d66da7ed0b7cb2bd0f9b68dbf7e7c4f985', id: "container", class: "container", part: "container" }, h("slot", { key: 'c5d208e37ea87f4ae95c5d9064218f1d1edbc304' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && (h("cpsl-overlay", { key: '6ef14dc2350c5c37d58eb86e9d8fafd8ffd1c56b', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 })), h("div", { key: '317ce432fcd3865ac162b5a25a5511a15caeab40', id: "container", class: "container", part: "container" }, h("slot", { key: '9c547c861b9146ec5aea40004895e0d5d45138aa' }))));
     }
     static get is() { return "cpsl-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOpD,MAAM,OAAO,UAAU;;;;;;;;;kCAmCiB,IAAI;kCAMJ,aAAa;uBAOL,WAAW;;;IAOzD,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;~~QAE9D~~,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,kBAAkB;;QACxB,OAAO,MAAA,IAAI,CAAC,WAAW,0CAAE,YAAY,CAAC;IACxC,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QACpE,MAAM,cAAc,GAAG,MAAA,GAAG,IAAI,CAAC,cAAc,IAAI,mCAAI,KAAK,CAAC;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAE9D,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kBACH,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACjC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAClC,kBAAkB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG,EAC3E,wBAAwB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EACtD,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EACrG,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IACzD,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAE/E,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,KAAK;gBAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAChC,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;aAC/B;YAEA,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,~~oBAAc~~,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,GAAI;~~YAClI~~,4DAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, h, State } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants';\n\n@Component({\n tag: 'cpsl-drawer',\n styleUrl: 'cpsl-drawer.scss',\n shadow: true,\n})\nexport class CpslDrawer {\n @Element() el!: HTMLCpslDrawerElement;\n\n @State() closedAnchorPosition?: string;\n @State() showTransition: boolean;\n\n /*\n Side from which the drawer will enter from.\n /\n @Prop() anchor: 'top' \| 'bottom' \| 'left' \| 'right';\n\n /\n Starting anchor position.\n /\n @Prop() anchorPosition?: number;\n\n /\n Hides the overlay for temporary drawers.\n /\n @Prop() noOverlay?: boolean;\n\n /\n Whether the drawer is open or not.\n /\n @Prop() open: boolean;\n\n /\n Size (height or width) of the drawer.\n /\n @Prop() size: number \| 'auto';\n\n /\n Duration in seconds of the open/close animation.\n * Default is 0.15.\n /\n @Prop() transitionDuration?: number = 0.15;\n\n /\n Transition timing function to use.\n * Default is ease-in-out.\n /\n @Prop() transitionFunction?: string = 'ease-in-out';\n\n /\n The variant of the drawer.\n * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n * Default is `temporary`.\n /\n @Prop() variant?: 'temporary' \| 'permanent' = 'temporary';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n componentDidLoad() {\n this.closedAnchorPosition = `-${this.getContainerHeight()}px`;\n // Show transition after initial render\n setTimeout(() => {\n this.showTransition = true;\n }, 100);\n }\n\n private getContainerHeight() {\n return this.containerEl?.clientHeight;\n }\n\n private get containerEl() {\n return this.el.shadowRoot.getElementById('container');\n }\n\n render() {\n const setHeight = this.anchor === 'top' \|\| this.anchor === 'bottom';\n const startingAnchor = `${this.anchorPosition}px` ?? '0px';\n const size = this.size === 'auto' ? 'auto' : `${this.size}px`;\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : size,\n height: setHeight ? size : '100vh',\n transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open \|\| this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition,\n opacity: this.closedAnchorPosition === undefined ? '0' : '1',\n ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n class={{\n top: this.anchor === 'top',\n bottom: this.anchor === 'bottom',\n left: this.anchor === 'left',\n right: this.anchor === 'right',\n }}\n >\n {this.variant === 'temporary' && !this.noOverlay && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n <div id=\"container\" class=\"container\" part=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Element, h, State } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants';\n\n@Component({\n tag: 'cpsl-drawer',\n styleUrl: 'cpsl-drawer.scss',\n shadow: true,\n})\nexport class CpslDrawer {\n @Element() el!: HTMLCpslDrawerElement;\n\n @State() closedAnchorPosition?: string;\n @State() showTransition: boolean;\n\n /*\n Side from which the drawer will enter from.\n /\n @Prop() anchor: 'top' \| 'bottom' \| 'left' \| 'right';\n\n /\n Starting anchor position.\n /\n @Prop() anchorPosition?: number;\n\n /\n Hides the overlay for temporary drawers.\n /\n @Prop() noOverlay?: boolean;\n\n /\n Whether the drawer is open or not.\n /\n @Prop() open: boolean;\n\n /\n Size (height or width) of the drawer.\n /\n @Prop() size: number \| 'auto';\n\n /\n Duration in seconds of the open/close animation.\n * Default is 0.15.\n /\n @Prop() transitionDuration?: number = 0.15;\n\n /\n Transition timing function to use.\n * Default is ease-in-out.\n /\n @Prop() transitionFunction?: string = 'ease-in-out';\n\n /\n The variant of the drawer.\n * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n * Default is `temporary`.\n /\n @Prop() variant?: 'temporary' \| 'permanent' = 'temporary';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n componentDidLoad() {\n this.closedAnchorPosition = `-${this.getContainerHeight()}px`;\n // Show transition after initial render\n setTimeout(() => {\n this.showTransition = true;\n }, 100);\n }\n\n private getContainerHeight() {\n return this.containerEl?.clientHeight;\n }\n\n private get containerEl() {\n return this.el.shadowRoot.getElementById('container');\n }\n\n render() {\n const setHeight = this.anchor === 'top' \|\| this.anchor === 'bottom';\n const startingAnchor = `${this.anchorPosition}px` ?? '0px';\n const size = this.size === 'auto' ? 'auto' : `${this.size}px`;\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : size,\n height: setHeight ? size : '100vh',\n transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open \|\| this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition,\n opacity: this.closedAnchorPosition === undefined ? '0' : '1',\n ...(Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n class={{\n top: this.anchor === 'top',\n bottom: this.anchor === 'bottom',\n left: this.anchor === 'left',\n right: this.anchor === 'right',\n }}\n >\n {this.variant === 'temporary' && !this.noOverlay && (\n <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />\n )}\n <div id=\"container\" class=\"container\" part=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Icons } from "../../assets/icons";
 export class CpslDropdown {
     constructor() {
@@ -94,7 +94,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '121a65b9e15c7fb81a1ecd98c30f2d3d47a0af2c' }, h("button", { key: 'bdea591df3159d30de22a3615362abcd3f222c65', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '778a3ea1cc1d6c7df3b961acb2b687aefcce38b3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '490af95f8b21a330a7432e10b0591b4ed81aa1b7', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: 'a34526653b775141129622b3b2c4f394fe2cd7a3' }, h("button", { key: '5925ed5bfddd0f956cd5f834dc18c4f7434c9cc2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '74bb9192ad7740af23db871d80492796a4158eee', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '981160bd591ee5a41a1e94ad0d4c9ae705381468', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: 'a15daf3ad8ba55d81020c3b07b4c5dedc6119ca7', class: "search-bar" }, h("input", { key: 'fa9e3a1a9bb404de23474a641949c06e8cc11b50', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }