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

@usecapsule/core-components 3.0.1 → 3.1.1

Files changed (210) hide show

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

@@ -1,21 +1,25 @@
 import { Host, h } from "@stencil/core";
 export class CpslButton {
     constructor() {
+        this.as = 'button';
         this.disabled = false;
         this.fullWidth = false;
+        this.href = undefined;
         this.size = 'medium';
+        this.target = undefined;
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
+        return (h(Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
-                'icon': this.variant === 'icon',
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
                 'disabled': this.disabled,
                 'full-width': this.fullWidth,
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', 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"; }
@@ -31,6 +35,24 @@ export class CpslButton {
     }
     static get properties() {
         return {
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'a'",
+                    "resolved": "\"a\" | \"button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The tag for the button.\nOptions are: `\"button\"`, `\"a\".\nDefault is: `\"button\"`."
+                },
+                "attribute": "as",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -67,6 +89,23 @@ export class CpslButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "href to use when using a link."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -85,22 +124,39 @@ export class CpslButton {
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "target to use when using a link."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'icon'",
-                    "resolved": "\"icon\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'primary'"
             }
         };

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;;~~wBAKyB~~,KAAK;yBAMrB,KAAK~~;oBAOC~~,QAAQ~~;uBAOS~~,SAAS;;~~IAE9D~~,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,~~MAAM~~,EAAE,IAAI,CAAC,OAAO,KAAK,~~MAAM~~;~~gBAE/B~~,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~~,+DAAQ~~,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;~~gBAChD~~,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,~~CACjB~~,~~CACJ~~,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 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 The size of the button.\n * Options are: `\"small\"`, `\"medium\".\n * Default is: `\"medium\"`.\n /\n @Prop() size?: 'small' \| 'medium' = 'medium';\n\n /\n The variant of the button.\n * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n * Default is: `\"primary\"`.\n */\n @Prop() variant?: 'primary' \| 'secondary' \| '~~icon~~' = 'primary';\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n 'primary': this.variant === 'primary',\n 'secondary': this.variant === 'secondary',\n '~~icon~~': this.variant === '~~icon~~',\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 <~~button~~ part=\"button-native\" class=\"button-native\">\n <slot name=\"start\"></slot>\n <slot></slot>\n <slot name=\"end\"></slot>\n </~~button~~>\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;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"]}

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

@@ -80,6 +80,7 @@
   --button-padding-end: 0px;
   --button-padding-top: 0px;
   --button-padding-bottom: 0px;
+  --button-border-radius: var(--cpsl-border-radius-button-group);
   height: var(--button-size);
   width: var(--button-size);
 }

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

@@ -77,5 +77,5 @@
   overflow: hidden;
   border: var(--card-border-width) solid var(--card-border-color);
   border-radius: var(--card-border-radius);
-  background-color: var(--card-background-color);
+  background: var(--card-background-color);
 }

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: '3f2a22aad0a9dde3c6819ec9746576691d2084e5', class: { card: true } }, h("slot", { key: 'c6f573694f67d2096cac429c27f87f3b04547d4b' }))));
+        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-card/cpsl-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-card.js","sourceRoot":"","sources":["../../../../src/components/cpsl-card/cpsl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;~~gBACxB~~,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-card',\n styleUrl: 'cpsl-card.scss',\n shadow: true,\n})\nexport class CpslCard {\n render() {\n return (\n <Host>\n <div class={{ card: true }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-card.js","sourceRoot":"","sources":["../../../../src/components/cpsl-card/cpsl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAC,gBAAgB;gBAC/C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-card',\n styleUrl: 'cpsl-card.scss',\n shadow: true,\n})\nexport class CpslCard {\n render() {\n return (\n <Host>\n <div class={{ card: true }} part=\"card-container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -90,7 +90,7 @@ span.container {
   height: 100%;
   border-radius: var(--container-border-radius);
   border: var(--container-border-width) solid;
-  background-color: var(--container-background-color-default);
+  background: var(--container-background-color-default);
   border-color: var(--container-border-color-default);
   transition: all 0.15s ease-in-out;
 }
@@ -102,7 +102,7 @@ span.container cpsl-icon {
   transition: all 0.15s ease-in-out;
 }
 span.container.checked {
-  background-color: var(--container-background-color-checked);
+  background: var(--container-background-color-checked);
   border-color: var(--container-border-color-checked);
 }
 span.container.checked cpsl-icon {

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

@@ -90,7 +90,7 @@
   color: var(--input-color);
   width: var(--input-width);
   height: var(--input-height);
-  background-color: var(--input-background-color);
+  background: var(--input-background-color);
   box-sizing: border-box;
   text-align: center;
   outline: none;

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

@@ -68,6 +68,6 @@
 :host div {
   flex: 1;
-  background-color: var(--divider-color);
+  background: var(--divider-color);
   height: var(--divider-height);
 }

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

@@ -2,27 +2,42 @@ import { Host, h } from "@stencil/core";
 import { DEFAULT_Z_INDICES } from "../../constants";
 export class CpslDrawer {
     constructor() {
+        this.closedAnchorPosition = undefined;
+        this.showTransition = undefined;
         this.anchor = undefined;
+        this.anchorPosition = undefined;
+        this.noOverlay = undefined;
         this.open = undefined;
         this.size = undefined;
         this.transitionDuration = 0.15;
         this.transitionFunction = 'ease-in-out';
         this.variant = 'temporary';
+        this.zIndexOverride = undefined;
+    }
+    componentDidLoad() {
+        this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
+        setTimeout(() => {
+            this.showTransition = true;
+        }, 100);
+    }
+    getContainerHeight() {
+        var _a;
+        return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    }
+    get containerEl() {
+        return this.el.shadowRoot.getElementById('container');
     }
     render() {
+        var _a;
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
-        return (h(Host, { key: '14b5f63f68d3e543b9b2b2f8e7fcbe24222ceb7a', style: {
-                width: setHeight ? '100vw' : `${this.size}px`,
-                height: setHeight ? `${this.size}px` : '100vh',
-                transitionDuration: `${this.transitionDuration}s`,
-                transitionTimingFunction: `${this.transitionFunction}`,
-                [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,
-            }, class: {
+        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: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '9877dd496d8a055a84ca81d7bf5b3a425b45e473', class: "container", part: "container" }, h("slot", { key: 'b02a97fc7f1fb6fe5f0a8fb45dbf7709977c2c3b' }))));
+            } }, 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"; }
@@ -55,6 +70,40 @@ export class CpslDrawer {
                 "attribute": "anchor",
                 "reflect": false
             },
+            "anchorPosition": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Starting anchor position."
+                },
+                "attribute": "anchor-position",
+                "reflect": false
+            },
+            "noOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the overlay for temporary drawers."
+                },
+                "attribute": "no-overlay",
+                "reflect": false
+            },
             "open": {
                 "type": "boolean",
                 "mutable": false,
@@ -73,11 +122,11 @@ export class CpslDrawer {
                 "reflect": false
             },
             "size": {
-                "type": "number",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | 'auto'",
+                    "resolved": "\"auto\" | number",
                     "references": {}
                 },
                 "required": false,
@@ -142,8 +191,32 @@ export class CpslDrawer {
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'temporary'"
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "closedAnchorPosition": {},
+            "showTransition": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=cpsl-drawer.js.map

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,CAAC,EAAE,MAAM,eAAe,CAAC;~~AACzD~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOpD,MAAM,OAAO,UAAU~~;;;;;kCAoBiB~~,IAAI;kCAMJ,aAAa;uBAOL,WAAW;;~~IAEzD~~,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;~~QAEpE~~,~~OAAO~~,~~CACL~~,~~EAAC~~,IAAI,~~qDACH~~,KAAK,~~EAAE~~;~~gBACL~~,~~KAAK~~,~~EAAE~~,~~SAAS~~,CAAC,CAAC,CAAC,~~OAAO~~,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI;~~gBAC7C~~,~~MAAM~~,EAAE,SAAS,CAAC,CAAC,CAAC,~~GAAG~~,~~IAAI~~,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO~~;gBAC9C~~,kBAAkB,EAAE,GAAG,IAAI,CAAC,kBAAkB,GAAG~~;gBACjD~~,wBAAwB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE~~;gBACtD~~,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,~~KAAK~~,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI~~;aACrF~~,~~EACD~~,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,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,GAAI;~~YAC/G~~,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;~~gBACrC~~,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Prop, h } 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 /*\n Side from which the drawer will enter from.\n /\n @Prop() anchor: 'top' \| 'bottom' \| 'left' \| 'right';\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;\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 render() {\n const setHeight = this.anchor === 'top' \|\| this.anchor === 'bottom';\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : ~~`${this.~~size~~}px`,\~~n height: setHeight ? ~~`${this.~~size~~}px`~~ : '100vh',\n transitionDuration: `${this.transitionDuration}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open \|\| this.variant === 'permanent' ? '~~0px~~' : ~~`-$~~{this.~~size~~}~~px`,\~~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' && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n <div 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":"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"]}

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: '65a2ad9d39aa2b234814128f565d1d0024f7b356', style: { width: this.width } }, h("button", { key: '15cf331bd42c8ef8812d699f43f01f234f24e6b4', 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: '1259100020d7726980b14ae655377fda6321de39', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '78fd5bece65d9264cb76bae4c1512489747dc2e1', 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: '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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAsB,KAAK,EAAE,MAAM,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACjI,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,YAAY;;QAuCf,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,IAA8B,EAAE,YAAqB,IAAI,EAAE,EAAE;YACjF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA8B,EAAE,EAAE,CAAC,GAAG,EAAE;YAClE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACtD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,~~CAC5C~~,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,~~CAClE~~,CAAC;~~QACJ~~,CAAC,CAAC;QAiDM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC3D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;~~qBA5GsB~~,MAAM;6BAKG,KAAK;sBAEX,KAAK;2BACD,EAAE;6BACyB,EAAE;qBAKX,EAAE;4BAKuB,IAAI;;IAQ9E,wBAAwB,CAAC,QAAyC;QAChE,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;~~IA2BD~~,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC;IACH,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QAC7F,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;QACjF,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;QAE1C,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,CAAC,IAAI,CAAC;YACjD,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE,CAAC;gBAC7B,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;gBACnC,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,~~CAAA~~;~~gBACnC~~,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;gBAC1C,OAAO;YACT,CAAC;YACD,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC;YAEpE,MAAM,eAAe,GAAG,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC;YAC3D,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,eAAe,GAAG,CAAC,IAAI,CAAC;QAC/D,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IAEO,0BAA0B;QAChC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAQD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI~~,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE~~;~~YAChC~~,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBACzD,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE;gBAC9F,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAI,CAChF;YACT,2DAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;gBACvF,IAAI,CAAC,aAAa,IAAI,CACrB,UAAI,KAAK,EAAC,YAAY;oBACpB,~~aACE~~,IAAI,EAAC,MAAM,~~EACX~~,WAAW,EAAC,WAAW,~~EACvB~~,KAAK,EAAE,IAAI,CAAC,WAAW,~~EACvB~~,OAAO,EAAE,IAAI,CAAC,uBAAuB,~~GACrC~~,~~CACC~~,CACN;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,~~CAC7B~~,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,~~CACE~~,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 ~~=>\n~~ item.label.toLowerCase().includes(this.searchQuery.toLowerCase())\n );\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 ~~style={{ width: this.width }}~~>\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\n type=\"text\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchQueryChange}\n />\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"]}