npm - @usecapsule/core-components - Versions diffs - 3.3.0-dev.0 → 3.3.0-dev.2 - Mend

@usecapsule/core-components 3.3.0-dev.0 → 3.3.0-dev.2

Files changed (190) hide show

package/dist/collection/components/{cpsl-auth-modal/cpsl-auth-modal.js → cpsl-modal/cpsl-modal.js} RENAMED Viewed

@@ -1,17 +1,26 @@
 import { Host, h } from "@stencil/core";
 import gsap from "gsap";
+import Draggable from "gsap/Draggable";
 import { MOBILE_SIZE } from "../../constants";
+gsap.registerPlugin(Draggable);
 const mm = gsap.matchMedia();
-export class CpslAuthModal {
+export class CpslModal {
     constructor() {
+        this.getDraggableHeight = () => {
+            return this.innerContainerEl.clientHeight;
+        };
         this.hasFooter = undefined;
-        this.isMobile = undefined;
         this.enterTransitionDuration = 0.15;
         this.exitTransitionDuration = 0.15;
+        this.footerExpanded = undefined;
+        this.footerTransitionDuration = 0.15;
         this.noOverlay = undefined;
         this.open = undefined;
         this.zIndexOverride = undefined;
     }
+    toggleHeight() {
+        this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
+    }
     toggleModal() {
         if (this.hasAnimatedIn) {
             this.handleAnimation();
@@ -21,12 +30,13 @@ export class CpslAuthModal {
         this.handleAnimation();
         this.hasAnimatedIn = true;
         mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
+            var _a;
+            (_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
             gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
-            this.isMobile = false;
         });
         mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
+            this.initDraggable();
             gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
-            this.isMobile = true;
         });
         this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
         this.footerSlotEl.addEventListener('slotchange', () => {
@@ -47,6 +57,7 @@ export class CpslAuthModal {
                         this.cpslModalEntering.emit();
                     },
                     onComplete: () => {
+                        this.addExpandAnim();
                         this.cpslModalEntered.emit();
                     },
                 })
@@ -64,6 +75,7 @@ export class CpslAuthModal {
                         this.cpslModalEntering.emit();
                     },
                     onComplete: () => {
+                        this.addExpandAnim();
                         this.cpslModalEntered.emit();
                     },
                 })
@@ -113,20 +125,89 @@ export class CpslAuthModal {
             }
         }
     }
+    addExpandAnim() {
+        setTimeout(() => {
+            this.expandFooterTl = gsap
+                .timeline({
+                reversed: true,
+                paused: true,
+                onReverseComplete: () => {
+                    this.contentEl.style.setProperty('height', 'auto');
+                },
+                defaults: {
+                    duration: this.footerTransitionDuration,
+                },
+            })
+                .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })
+                .set(this.headerExpandedEl, { display: 'block' })
+                .to(this.innerContainerEl, { paddingBottom: '8px' })
+                .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
+                .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')
+                .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')
+                .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');
+        }, 10);
+    }
+    initDraggable() {
+        this.draggable = Draggable.create(this.modalContainerEl, {
+            trigger: this.headerEl,
+            dragClickables: false,
+            type: 'y',
+            edgeResistance: 0.2,
+            liveSnap: {
+                y: function (y) {
+                    if (y < 0)
+                        return 0; // Restricts dragging to down
+                    return y;
+                },
+            },
+            onDrag: () => {
+                const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);
+                gsap.set(this.overlayEl, { opacity: y });
+            },
+            onDragEnd: () => {
+                if (this.draggable.y > 60) {
+                    this.cpslModalRequestClose.emit();
+                }
+                else {
+                    gsap.set(this.overlayEl, { opacity: 1 });
+                    gsap.set(this.modalWrapperEl, { yPercent: -100 });
+                    gsap.set(this.modalContainerEl, { y: 0 });
+                }
+            },
+        })[0];
+    }
     get footerEl() {
         return this.el.shadowRoot.getElementById('modal-footer');
     }
+    get footerExpandedEl() {
+        return this.el.shadowRoot.getElementById('modal-footer-expanded');
+    }
+    get headerExpandedEl() {
+        return this.el.shadowRoot.getElementById('modal-header-expanded');
+    }
+    get innerContainerEl() {
+        return this.el.shadowRoot.getElementById('modal-inner-container');
+    }
+    get contentEl() {
+        return this.el.shadowRoot.getElementById('modal-content');
+    }
     get modalWrapperEl() {
         return this.el.shadowRoot.getElementById('modal-wrapper');
     }
     get modalContainerEl() {
         return this.el.shadowRoot.getElementById('modal-container');
     }
+    get overlayEl() {
+        return this.el.shadowRoot.getElementById('overlay');
+    }
     get footerSlotEl() {
         return this.footerEl.querySelectorAll('slot')[0];
     }
+    get headerEl() {
+        return this.el.shadowRoot.getElementById('modal-header');
+    }
     get Modal() {
-        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("cpsl-card", { id: "modal-body-card", class: { 'modal-body-card': true }, part: "modal-body-card" }, h("slot", { name: "body" }), this.isMobile && (h("div", { class: "mobile-footer" }, h("slot", { name: "footer" })))), h("cpsl-card", { id: "modal-footer", part: "modal-footer", class: { 'footer-hidden': !this.hasFooter, 'modal-body-card': true }, style: { display: !this.isMobile ? 'block' : 'none' } }, h("slot", { name: "footer" }))));
+        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, h("slot", { name: "header" })), h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, h("slot", { name: "body" }))), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer", part: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, h("slot", { name: "footerExpandedFooter" }))));
     }
     render() {
         if (this.noOverlay) {
@@ -134,16 +215,16 @@ export class CpslAuthModal {
         }
         return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
     }
-    static get is() { return "cpsl-auth-modal"; }
+    static get is() { return "cpsl-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["cpsl-auth-modal.scss"]
+            "$": ["cpsl-modal.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["cpsl-auth-modal.css"]
+            "$": ["cpsl-modal.css"]
         };
     }
     static get properties() {
@@ -184,6 +265,41 @@ export class CpslAuthModal {
                 "reflect": false,
                 "defaultValue": "0.15"
             },
+            "footerExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots."
+                },
+                "attribute": "footer-expanded",
+                "reflect": false
+            },
+            "footerTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the footer expansion animation.\nDefault is 0.15."
+                },
+                "attribute": "footer-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
             "noOverlay": {
                 "type": "boolean",
                 "mutable": false,
@@ -239,8 +355,7 @@ export class CpslAuthModal {
     }
     static get states() {
         return {
-            "hasFooter": {},
-            "isMobile": {}
+            "hasFooter": {}
         };
     }
     static get events() {
@@ -324,9 +439,12 @@ export class CpslAuthModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "footerExpanded",
+                "methodName": "toggleHeight"
+            }, {
                 "propName": "open",
                 "methodName": "toggleModal"
             }];
     }
 }
-//# sourceMappingURL=cpsl-auth-modal.js.map
+//# sourceMappingURL=cpsl-modal.js.map

package/dist/collection/components/cpsl-modal/cpsl-modal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n tag: 'cpsl-modal',\n styleUrl: 'cpsl-modal.scss',\n shadow: true,\n})\nexport class CpslModal {\n private draggable: Draggable;\n private expandFooterTl: gsap.core.Timeline;\n private hasAnimatedIn: boolean;\n\n @Element() el!: HTMLCpslModalElement;\n\n @State() hasFooter: boolean;\n\n /**\n * Duration in seconds of the modal entering.\n * Default is .15.\n */\n @Prop() enterTransitionDuration?: number = 0.15;\n\n /**\n * Duration in seconds of the modal exiting.\n * Default is .15.\n */\n @Prop() exitTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n */\n @Prop() footerExpanded?: boolean;\n\n /**\n * Duration in seconds of the footer expansion animation.\n * Default is 0.15.\n */\n @Prop() footerTransitionDuration?: number = 0.15;\n\n /**\n * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n */\n @Prop() noOverlay?: boolean;\n\n /**\n * Whether or not to show the modal.\n */\n @Prop() open: boolean;\n\n /**\n * Emitted when enter animation starts.\n */\n @Event() cpslModalEntering!: EventEmitter<null>;\n\n /**\n * Emitted when enter animation finishes.\n */\n @Event() cpslModalEntered!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation starts.\n */\n @Event() cpslModalExiting!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalExited!: EventEmitter<null>;\n\n /**\n * Emitted when exit animation finishes.\n */\n @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n /**\n * Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n @Watch('footerExpanded')\n toggleHeight() {\n this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n }\n\n @Watch('open')\n toggleModal() {\n if (this.hasAnimatedIn) {\n this.handleAnimation();\n }\n }\n\n componentDidLoad() {\n this.handleAnimation();\n this.hasAnimatedIn = true;\n\n mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n this.draggable?.disable();\n gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n });\n mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n this.initDraggable();\n gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n });\n\n this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;\n this.footerSlotEl.addEventListener('slotchange', () => {\n if (this.footerSlotEl.assignedNodes().length >= 1) {\n this.hasFooter = true;\n } else {\n this.hasFooter = false;\n }\n });\n }\n\n private handleAnimation() {\n if (this.open) {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n .to(this.modalWrapperEl, {\n scale: 1,\n opacity: 1,\n duration: this.enterTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalEntering.emit();\n },\n onComplete: () => {\n this.addExpandAnim();\n this.cpslModalEntered.emit();\n },\n })\n .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n .to(this.modalWrapperEl, {\n yPercent: -100,\n duration: this.enterTransitionDuration,\n });\n }\n } else {\n if (window.innerWidth >= MOBILE_SIZE + 1) {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl?.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n scale: 0.8,\n opacity: 0,\n duration: this.exitTransitionDuration,\n });\n } else {\n gsap\n .timeline({\n onStart: () => {\n this.cpslModalExiting.emit();\n },\n onComplete: () => {\n this.cpslModalExited.emit();\n this.modalWrapperEl?.style.setProperty('display', 'none');\n },\n })\n .to(this.modalWrapperEl, {\n yPercent: 0,\n duration: this.exitTransitionDuration,\n })\n .set(this.modalContainerEl, { y: 0 });\n }\n }\n }\n\n private addExpandAnim() {\n setTimeout(() => {\n this.expandFooterTl = gsap\n .timeline({\n reversed: true,\n paused: true,\n onReverseComplete: () => {\n this.contentEl.style.setProperty('height', 'auto');\n },\n defaults: {\n duration: this.footerTransitionDuration,\n },\n })\n .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n .set(this.headerExpandedEl, { display: 'block' })\n .to(this.innerContainerEl, { paddingBottom: '8px' })\n .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n }, 10);\n }\n\n private getDraggableHeight = () => {\n return this.innerContainerEl.clientHeight;\n };\n\n private initDraggable() {\n this.draggable = Draggable.create(this.modalContainerEl, {\n trigger: this.headerEl,\n dragClickables: false,\n type: 'y',\n edgeResistance: 0.2,\n liveSnap: {\n y: function (y) {\n if (y < 0) return 0; // Restricts dragging to down\n return y;\n },\n },\n onDrag: () => {\n const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n gsap.set(this.overlayEl, { opacity: y });\n },\n onDragEnd: () => {\n if (this.draggable.y > 60) {\n this.cpslModalRequestClose.emit();\n } else {\n gsap.set(this.overlayEl, { opacity: 1 });\n gsap.set(this.modalWrapperEl, { yPercent: -100 });\n gsap.set(this.modalContainerEl, { y: 0 });\n }\n },\n })[0];\n }\n\n private get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\n }\n\n private get footerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-footer-expanded');\n }\n\n private get headerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-header-expanded');\n }\n\n private get innerContainerEl() {\n return this.el.shadowRoot.getElementById('modal-inner-container');\n }\n\n private get contentEl() {\n return this.el.shadowRoot.getElementById('modal-content');\n }\n\n private get modalWrapperEl() {\n return this.el.shadowRoot.getElementById('modal-wrapper');\n }\n\n private get modalContainerEl() {\n return this.el.shadowRoot.getElementById('modal-container');\n }\n\n private get overlayEl() {\n return this.el.shadowRoot.getElementById('overlay');\n }\n\n private get footerSlotEl() {\n return this.footerEl.querySelectorAll('slot')[0];\n }\n\n private get headerEl() {\n return this.el.shadowRoot.getElementById('modal-header');\n }\n\n private get Modal() {\n return (\n <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n <slot></slot>\n <div\n id=\"modal-inner-container\"\n class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }}\n part=\"modal-inner-container\"\n >\n <div id=\"modal-content\" part=\"modal-content\">\n <div id=\"modal-header\" class=\"modal-header\" part=\"modal-header\">\n <slot name=\"header\"></slot>\n </div>\n <div id=\"modal-body\" class=\"modal-body\" part=\"modal-body\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n <div\n id=\"modal-header-expanded\"\n class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }}\n part=\"modal-header-expanded\"\n >\n <slot name=\"footerExpandedHeader\"></slot>\n </div>\n </div>\n <div id=\"modal-footer\" part=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }} part=\"modal-footer-expanded\">\n <slot name=\"footerExpandedFooter\"></slot>\n </div>\n </div>\n );\n }\n\n render() {\n if (this.noOverlay) {\n return (\n <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n {this.Modal}\n </Host>\n );\n }\n\n return (\n <Host\n style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}}\n class={{ 'include-mobile-styling': true }}\n >\n <cpsl-overlay\n zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n id=\"overlay\"\n open={this.open}\n enterTransitionDuration={this.enterTransitionDuration}\n exitTransitionDuration={this.exitTransitionDuration}\n />\n <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n {this.Modal}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class CpslModalV2 {
         this.toggleHeight();
     }
     render() {
-        return (h(Host, { key: '2dca618fb17113f9c346e6e54684b50c5ac3f493', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { key: 'f43f994363f20b0f4b43cfc61753f41ad41ecb63', zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '02a53d032d3b95bd78843cf2d1d06a3cc11c4894', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '3c246e9fb544c6ddcd2cec53c2b5e4362dab0a6a' }))));
+        return (h(Host, { key: '0682407f6320fe77b42e4ceed6a9b7738a1b5541', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { key: '23a4453e4aef7ab92d281fd8c3cfe751e5a9a814', zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: 'a8703d0aa0144970928dab18b153ceb703292433', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '502bb4e11f0520dfeb027a06d7bbb21843cb579f' }))));
     }
     static get is() { return "cpsl-modal-v2"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-modal-v2.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,WAAW;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC7B,6CAA6C;YAC7C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;YACxF,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,qEACE,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACD,~~kEAAW~~,KAAK,EAAC,MAAM,~~EAAC~~,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE;~~gBACvI~~,8DAAa,CACH,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Watch, Element, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-modal-v2',\n styleUrl: 'cpsl-modal-v2.scss',\n shadow: true,\n})\nexport class CpslModalV2 {\n @Element() el!: HTMLCpslModalV2Element;\n\n /*\n Duration in seconds of the modal entering.\n * Default is .15.\n /\n @Prop() enterTransitionDuration?: number = 0.15;\n\n /\n Duration in seconds of the modal exiting.\n * Default is .15.\n /\n @Prop() exitTransitionDuration?: number = 0.15;\n\n /\n Whether or not to show the modal with a box shadow.\n /\n @Prop() elevated: boolean;\n\n /\n Whether or not to show the overlay.\n /\n @Prop() noOverlay: boolean;\n\n /\n Whether or not to show the modal.\n /\n @Prop() open: boolean;\n\n /\n Override z-index.\n /\n @Prop() zIndexOverride?: number;\n\n /\n Emitted when enter animation starts.\n /\n @Event() cpslModalEntering!: EventEmitter<null>;\n\n /\n Emitted when enter animation finishes.\n /\n @Event() cpslModalEntered!: EventEmitter<null>;\n\n /\n Emitted when exit animation starts.\n /\n @Event() cpslModalExiting!: EventEmitter<null>;\n\n /\n Emitted when exit animation finishes.\n /\n @Event() cpslModalExited!: EventEmitter<null>;\n\n @Watch('open')\n toggleHeight() {\n if (!this.open) {\n this.cpslModalExiting.emit();\n // Animate out before setting display to none\n setTimeout(() => {\n this.el.style.display = 'none';\n this.cpslModalExited.emit();\n }, this.exitTransitionDuration 1000);\n } else {\n this.cpslModalEntering.emit();\n this.el.style.display = 'flex';\n setTimeout(() => {\n this.cpslModalEntered.emit();\n }, this.enterTransitionDuration * 1000);\n }\n }\n\n componentDidLoad() {\n this.toggleHeight();\n }\n\n render() {\n return (\n <Host class={{ 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay }}>\n {!this.noOverlay && (\n <cpsl-overlay\n zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n id=\"overlay\"\n open={this.open}\n enterTransitionDuration={this.enterTransitionDuration}\n exitTransitionDuration={this.exitTransitionDuration}\n />\n )}\n <cpsl-card class=\"card\" style={{ transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` }}>\n <slot></slot>\n </cpsl-card>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-modal-v2.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,WAAW;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC7B,6CAA6C;YAC7C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;YACxF,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,qEACE,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACrE,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACD,kEACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE;gBAEjH,8DAAa,CACH,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Watch, Element, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-modal-v2',\n styleUrl: 'cpsl-modal-v2.scss',\n shadow: true,\n})\nexport class CpslModalV2 {\n @Element() el!: HTMLCpslModalV2Element;\n\n /*\n Duration in seconds of the modal entering.\n * Default is .15.\n /\n @Prop() enterTransitionDuration?: number = 0.15;\n\n /\n Duration in seconds of the modal exiting.\n * Default is .15.\n /\n @Prop() exitTransitionDuration?: number = 0.15;\n\n /\n Whether or not to show the modal with a box shadow.\n /\n @Prop() elevated: boolean;\n\n /\n Whether or not to show the overlay.\n /\n @Prop() noOverlay: boolean;\n\n /\n Whether or not to show the modal.\n /\n @Prop() open: boolean;\n\n /\n Override z-index.\n /\n @Prop() zIndexOverride?: number;\n\n /\n Emitted when enter animation starts.\n /\n @Event() cpslModalEntering!: EventEmitter<null>;\n\n /\n Emitted when enter animation finishes.\n /\n @Event() cpslModalEntered!: EventEmitter<null>;\n\n /\n Emitted when exit animation starts.\n /\n @Event() cpslModalExiting!: EventEmitter<null>;\n\n /\n Emitted when exit animation finishes.\n /\n @Event() cpslModalExited!: EventEmitter<null>;\n\n @Watch('open')\n toggleHeight() {\n if (!this.open) {\n this.cpslModalExiting.emit();\n // Animate out before setting display to none\n setTimeout(() => {\n this.el.style.display = 'none';\n this.cpslModalExited.emit();\n }, this.exitTransitionDuration 1000);\n } else {\n this.cpslModalEntering.emit();\n this.el.style.display = 'flex';\n setTimeout(() => {\n this.cpslModalEntered.emit();\n }, this.enterTransitionDuration * 1000);\n }\n }\n\n componentDidLoad() {\n this.toggleHeight();\n }\n\n render() {\n return (\n <Host class={{ 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay }}>\n {!this.noOverlay && (\n <cpsl-overlay\n zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n id=\"overlay\"\n open={this.open}\n enterTransitionDuration={this.enterTransitionDuration}\n exitTransitionDuration={this.exitTransitionDuration}\n />\n )}\n <cpsl-card\n class=\"card\"\n style={{ transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` }}\n >\n <slot></slot>\n </cpsl-card>\n </Host>\n );\n }\n}\n"]}

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

@@ -32,7 +32,7 @@ export class CpslNavButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: '9bd4edd8429e52b060d64fc5cf707c3ee3c26dd4' }, h("slot", { key: 'c035504b8795331c35de8bacab0b252ad4facc0d' })));
+        return (h(Host, { key: '067afdd4450da73433b1f3f2c1de751e79aadd70' }, h("slot", { key: '109be26467469f2120b756b10a233efe1cf2f77c' })));
     }
     static get is() { return "cpsl-nav-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class CpslOverlay {
         }
     }
     render() {
-        return (h(Host, { key: 'c3a05ed63108fbe8354b5cd3bb1c08d02cf39a60', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '6b57f3341e2f11611cbd1fe44fb3088c8e3a434a' })));
+        return (h(Host, { key: 'c82e1811eabb1c2796a77572cc73816187ca57cb', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: 'a601f5ef8c1042d83b38c74f10359591740fbc72' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class CpslPagination {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: '89d002fff30667f081dcb91e3380b3d452860bf9' }, h("cpsl-button-group", { key: '169546258dbb7bcf29f4914f77e677f1addcc400', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: 'fb523b4e254412493b0f7c86be13a05eed38efff', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: 'c455f7f3b349e6c43ec5f5da3a2b76630bb1c73f', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '52c54082f971199a7a5a231f11a2fb3f063c2b9e', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: '300954f69d40f4077bdc1e77f46d66c99f7c7ac0', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: 'eba12366b85a2dd993d0fd42818e0f554bf668a2' }, h("cpsl-button-group", { key: 'c3558fe7307148dc511d4e182a4acdc97505f097', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: 'da83c5c93894ba987db7223c474748b1f799739a', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '6584bf060a9b2c9c62877833852d7a2da4e3dd99', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: 'c39747f5464ca621788c075a8d75a8293c6889f1', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: '6cf1ab917fa25442534e105e27d9a883697d7a72', class: "icon", icon: "arrowNarrow" })))));
     }
     static get is() { return "cpsl-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: 'db0f2db5e1ae046fb4498c5fa2974f56d461ca46' }, h("div", { key: 'a1f1fb791f0b228073008c2f864574f5d4cb47db', class: "pill-container" }, h("span", { key: 'd64c09db81a3c7f4ded1559fbc8351204cd71bb5' }, this.text))));
+        return (h(Host, { key: '3ae506c7d53a529397d0b6e6c54c52501cff2561' }, h("div", { key: '0e3eebbb2a622e62c1bcd83c3d5fab24e31b9f3f', class: "pill-container" }, h("span", { key: 'e4277fc6af1abffa05e6037d68fa2ac8f998b51b' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,12 +66,10 @@
 .container {
   visibility: hidden;
-  height: 0px;
 }
 .open {
   visibility: visible;
-  height: auto;
   z-index: 10006;
 }

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

@@ -194,12 +194,10 @@ export class CpslPopover {
         if (this.open) {
             window.addEventListener('click', this.handleClickOutside);
             window.addEventListener('scroll', () => this.setPosition(), true);
-            window.addEventListener('resize', () => this.setPosition(), true);
         }
         else {
             window.removeEventListener('click', this.handleClickOutside);
-            window.removeEventListener('scroll', () => this.setPosition(), true);
-            window.removeEventListener('resize', () => this.setPosition(), true);
+            window.addEventListener('scroll', () => this.setPosition());
         }
     }
     componentDidLoad() {
@@ -211,7 +209,7 @@ export class CpslPopover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '338d4a705c7bcd6a5ac6e1db38d7c077b8125dcb', class: {
+        return (h(Host, { key: 'b902dfc80a1b92d70729feb0d69ffbd6a266a93c', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -219,7 +217,11 @@ export class CpslPopover {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: 'dcd6ed99f039f905fe72850ff7943a7d8afc8335', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '39e0e5f281f261e1828f82f30ead2728a10f92ac' }))));
+            }, style: {
+                top: `${this.positionY}px`,
+                left: `${this.positionX}px`,
+                width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
+            } }, h("div", { key: 'b0aa879a39c083ab238589bc7093680b1061ad56', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '69497b143a41e30a534e24a06d5306e69ac0d410' }))));
     }
     static get is() { return "cpsl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -453,8 +455,8 @@ export class CpslPopover {
                     "text": "Emitted when the popover opens."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }, {
@@ -468,8 +470,8 @@ export class CpslPopover {
                     "text": "Emitted when the popover closes."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement \| null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n private triggerClicked = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n /*\n ID for the element that the popover anchors to.\n /\n @Prop() anchorEl?: HTMLElement;\n\n /\n Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() anchorOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() anchorOriginVertical?: 'top' \| 'center' \| 'bottom' = 'bottom';\n\n /\n If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /\n Whether or not to disable to popover.\n /\n @Prop() disabled: boolean;\n\n /\n Used internally to prevent select from blurring unintentionally.\n /\n @Prop() preventBlur: boolean;\n\n /\n Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() transformOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() transformOriginVertical?: 'top' \| 'center' \| 'bottom' = 'top';\n\n /\n Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n /\n @Prop() triggerAction: 'click' \| 'hover' = 'click';\n\n /\n ID for the element that triggers the popover to open.\n /\n @Prop() trigger: string;\n\n /\n Padding from edge of window for the popover container.\n /\n @Prop() windowPadding?: number = 16;\n\n /\n Emitted when the popover opens.\n /\n @Event() cpslOpen!: EventEmitter<void>;\n\n /\n Emitted when the popover closes.\n /\n @Event() cpslClose!: EventEmitter<void>;\n\n /\n Call to close the popover manually.\n /\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /\n Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n this.triggerClicked = true;\n return;\n }\n if (this.open && !this.el.contains(event.target as Node)) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n this.setPosition();\n }\n };\n\n private close = () => {\n this.open = false;\n this.triggerClicked = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement \| null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n private triggerClicked = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n /*\n ID for the element that the popover anchors to.\n /\n @Prop() anchorEl?: HTMLElement;\n\n /\n Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() anchorOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() anchorOriginVertical?: 'top' \| 'center' \| 'bottom' = 'bottom';\n\n /\n If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /\n Whether or not to disable to popover.\n /\n @Prop() disabled: boolean;\n\n /\n Used internally to prevent select from blurring unintentionally.\n /\n @Prop() preventBlur: boolean;\n\n /\n Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n /\n @Prop() transformOriginHorizontal?: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n /\n @Prop() transformOriginVertical?: 'top' \| 'center' \| 'bottom' = 'top';\n\n /\n Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n /\n @Prop() triggerAction: 'click' \| 'hover' = 'click';\n\n /\n ID for the element that triggers the popover to open.\n /\n @Prop() trigger: string;\n\n /\n Padding from edge of window for the popover container.\n /\n @Prop() windowPadding?: number = 16;\n\n /\n Emitted when the popover opens.\n /\n @Event() cpslOpen!: EventEmitter;\n\n /\n Emitted when the popover closes.\n /\n @Event() cpslClose!: EventEmitter;\n\n /\n Call to close the popover manually.\n /\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n } else {\n window.removeEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition());\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!this.triggerEl) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /\n Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (anchorEl) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n this.triggerClicked = true;\n return;\n }\n if (this.open && !this.el.contains(event.target as Node)) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n this.setPosition();\n }\n };\n\n private close = () => {\n this.open = false;\n this.triggerClicked = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{\n top: `${this.positionY}px`,\n left: `${this.positionX}px`,\n width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -58,12 +58,8 @@
   --qr-background-color: var(--cpsl-color-qr-background);
   --qr-border-color: var(--cpsl-color-qr-border);
   --qr-border-radius: var(--cpsl-border-radius-qr-code);
-  --qr-border-width: 0px;
-  --qr-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
-  --qr-padding-top: 12px;
-  --qr-padding-end: 12px;
-  --qr-padding-bottom: 12px;
-  --qr-padding-start: 12px;
+  --qr-border-width: 1px;
+  --qr-box-shadow: 0px 1px 2px var(--cpsl-color-alpha-black-10);
   display: inline-block;
 }
@@ -74,7 +70,7 @@
   padding-inline-end: var(--qr-padding-end);
   padding-top: var(--qr-padding-top);
   padding-bottom: var(--qr-padding-bottom);
-  box-sizing: border-box;
+  display: flex;
   color: var(--qr-color);
   border-style: solid;
   border-width: var(--qr-border-width);
@@ -82,9 +78,4 @@
   border-radius: var(--qr-border-radius);
   background: var(--qr-background-color);
   box-shadow: var(--qr-box-shadow);
-}
-.qr-code {
-  width: 100%;
-  height: 100%;
 }

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

@@ -1,43 +1,38 @@
 import { Host, h } from "@stencil/core";
-import QrCodeWithLogo from "qrcode-with-logos";
+import QRCodeStyling from "qr-code-styling";
 export class CpslQrCode {
     constructor() {
         this.url = undefined;
         this.imageSrc = undefined;
-        this.size = 286;
+        this.size = 250;
     }
     componentDidLoad() {
-        new QrCodeWithLogo({
-            content: this.url,
-            width: 1000,
-            image: this.imgEl,
-            logo: this.imageSrc
-                ? {
-                    src: this.imageSrc,
-                    borderRadius: 16,
-                }
-                : '',
-            dotsOptions: {
-                type: 'dot',
+        const container = this.el.shadowRoot.getElementById('qr-container');
+        container.innerHTML = '';
+        const qrCode = new QRCodeStyling({
+            type: 'svg',
+            data: this.url,
+            image: this.imageSrc,
+            height: this.size,
+            width: this.size,
+            qrOptions: { errorCorrectionLevel: 'L' },
+            backgroundOptions: {
+                color: 'transparent',
             },
-            cornersOptions: {
-                type: 'rounded',
-                radius: {
-                    inner: 8,
-                    outer: 32,
-                },
+            dotsOptions: {
+                type: 'dots',
+                color: 'currentColor',
             },
-            nodeQrCodeOptions: {
-                margin: 0,
-                errorCorrectionLevel: 'M',
+            cornersSquareOptions: { type: 'extra-rounded' },
+            cornersDotOptions: { type: 'dot' },
+            imageOptions: {
+                crossOrigin: 'anonymous',
             },
         });
-    }
-    get imgEl() {
-        return this.el.shadowRoot.getElementById('qr-code');
+        qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '29a0c108792b0c2640c63846baa5ad20f4098a24' }, h("div", { key: 'e4568804cd28026a4c5507b85a0646327e8353b7', id: "qr-container", class: "qr-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("img", { key: 'eb86fd0c8262bfba16177c954c1725cdbab6e69d', id: "qr-code", class: "qr-code" }))));
+        return (h(Host, { key: '95d0a5a4e2cab2a3487895e16255c78a9df322c1' }, h("div", { key: 'd63c1985e90491be78e24945c6bdb9aae44c8f7d', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }
@@ -103,7 +98,7 @@ export class CpslQrCode {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "286"
+                "defaultValue": "250"
             }
         };
     }