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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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"; }