npm - @usecapsule/core-components - Versions diffs - 3.1.0 → 3.1.1 - Mend

@usecapsule/core-components 3.1.0 → 3.1.1

Files changed (117) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-85125285.js');
+const index = require('./index-528f7428.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -42,8 +42,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.18.3",
-    "typescriptVersion": "5.4.5"
+    "version": "4.12.5",
+    "typescriptVersion": "5.3.3"
   },
   "collections": [],
   "bundles": []

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", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
+        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' }))));
     }
     static get is() { return "cpsl-alert"; }
     static get encapsulation() { return "shadow"; }

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,~~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 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,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"]}

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

@@ -41,7 +41,7 @@ export class CpslAnimation {
         return this.el.shadowRoot.getElementById('animation-container');
     }
     render() {
-        return (h(Host, { key: '5fab748126f7b18a9051aa89df1b8a78ef647648' }, h("div", { key: 'b9cac260ee00f54a56c7cd249850a8df5e84dc3b', part: "animation-container", id: "animation-container", class: "animation-container" })));
+        return (h(Host, { key: '7a121c6f09a28dcffdd54d837b75d442b27c48f0' }, h("div", { key: '15accd8138d211272bcdce917fbcb347f7ce4697', 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-app-bar/cpsl-app-bar.js CHANGED Viewed

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

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: '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' }))));
+        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' }))));
     }
     static get is() { return "cpsl-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
+        return (h(Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -19,7 +19,7 @@ export class CpslButton {
                 'full-width': this.fullWidth,
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, 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" }))));
+            } }, 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" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }

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: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
+        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
     }
     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: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
     }
     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: '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" }))));
+        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" }))));
     }
     static get is() { return "cpsl-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,10 +87,10 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', 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", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (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)))));
     }
     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,~~4DAAK~~,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,~~kEAAW~~,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,GAAI;gBAC3E~~,+DAAO~~,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 // 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"]}

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

@@ -89,7 +89,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'c8173c44fb66a24831c110618000da8edadbded8', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '04fa1eb6e5d9feaa28141c55cc0cd72a5e0e39a7' })));
+        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' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

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: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,12 +32,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: '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: {
+        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: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '744838970ee22c5bb1798702f6060b6d12f29eb9', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'b3e4d26c18e7d1e5442b941dd67085088d9c33a9', id: "container", class: "container", part: "container" }, h("slot", { key: '1951ec776043562fe15409ed4a19799c21f6e36d' }))));
+            } }, 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' }))));
     }
     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,~~qEAAc~~,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 && <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"]}

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

@@ -94,7 +94,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        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)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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~~2DAAI~~,KAAK,EAAC,YAAY;oBACpB,~~8DAAO~~,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC1G,CACN;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACtC,YAAM,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;oBACzC,IAAI,CAAC,KAAK;;oBAAE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACN,CAAC,CACC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js CHANGED Viewed

@@ -115,7 +115,7 @@ export class CpslFileUpload {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), h("input", { key: '3798b69f5670e18e9fa4dc34ae7ca661cd6f9294', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     static get is() { return "cpsl-file-upload"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /*\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: string[];\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (Boolean(input.files.length)) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (Boolean(this.fileTypes?.length) ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = Boolean(this.uploadFile) ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={Boolean(this.file) ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\n\n /*\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: string[];\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (Boolean(input.files.length)) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (Boolean(this.fileTypes?.length) ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = Boolean(this.uploadFile) ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={Boolean(this.file) ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

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

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
+        return (h(Host, { key: '1596fe7c785ab672325dde24686ec73f3acd1dc1', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
+            } }, h("slot", { key: 'a45bcf373f26f5b41484daec4bd6f39f8af1bd6f' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '06850dc9a6d40b95e8b92ea8722bedfa1dc7b36f', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '15b85f109d7e5371f6fa35f38dc35f86a061c46c' }, h("div", { key: '39eae7146dfa17771e1d68045255c9b0db5d0a0c', class: "info-box-container" }, h("slot", { key: '008e3552b563dd2f3b6d10bc7afe59b0f2a2ba3a' }))));
+        return (h(Host, { key: '60852c54e233d29363761d07715aab5b7d86e4b0' }, h("div", { key: '970d11a996e58604455833c5a31a9ae26abadb95', class: "info-box-container" }, h("slot", { key: '4f2f3a5da31d262544f848b06498af7da5b2cbd1' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,7 +131,7 @@ export class CpslInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9e8eece493074613305b6303e9c095b89ee08eb0', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { key: '97ee8423a02cd2547b764609751fbd301e21ccc9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '933c4863226a6de14910cfe14b5e48015e6a04fd', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'a69f5c53c2fabc038aca226fb4a3965c1516fe53', name: "start" }), h("input", { key: 'f4a7e5234fe5d6b32e14bc226791d5aea9df151d', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '6c74cecde29d9f1f9bf00a05e53197324f83f2bf', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '245c0413133d70b909415f10cdbfbd21ed03da61', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'a96f3e844d74ba481418e375ccaeab85cfb92836' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: '28937d4a0e8c5a4e7b7a00e610013e52fa171f3a', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '8a2c5e7d32c93af2b0d463563c48e8104c639604', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'd24440dff32cd3837638565764d2683bf16414ca', name: "start" }), h("input", { key: 'a3df402a5fd5f9a9d2483a1f0b65f9061468df15', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'f7472b02d119b4a458252128da5e61ebbfbdee56', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-input"; }
     static get encapsulation() { return "shadow"; }