@usecapsule/core-components 3.3.1-dev.0 → 3.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/p-0e6007ae.entry.js +20 -0
- package/dist/capsule/p-0e6007ae.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css +3 -0
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js +1 -1
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +2 -2
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/capsule/p-60508b1e.entry.js +0 -20
- package/dist/capsule/p-60508b1e.entry.js.map +0 -1
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
|
@@ -126,7 +126,7 @@ export class CpslAuthModal {
|
|
|
126
126
|
return this.footerEl.querySelectorAll('slot')[0];
|
|
127
127
|
}
|
|
128
128
|
get Modal() {
|
|
129
|
-
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" }))));
|
|
129
|
+
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, 'body': 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" }))));
|
|
130
130
|
}
|
|
131
131
|
render() {
|
|
132
132
|
if (this.noOverlay) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-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 { MOBILE_SIZE } from '../../constants';\n\nconst mm = gsap.matchMedia();\n@Component({\n tag: 'cpsl-auth-modal',\n styleUrl: 'cpsl-auth-modal.scss',\n shadow: true,\n})\nexport class CpslAuthModal {\n private hasAnimatedIn: boolean;\n\n @Element() el!: HTMLCpslAuthModalElement;\n\n @State() hasFooter: boolean;\n @State() isMobile: 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 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('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 gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n this.isMobile = false;\n });\n mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n this.isMobile = true;\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.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.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 get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\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 footerSlotEl() {\n return this.footerEl.querySelectorAll('slot')[0];\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 <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true }} part=\"modal-body-card\">\n <slot name=\"body\"></slot>\n {this.isMobile && (\n <div class=\"mobile-footer\">\n <slot name=\"footer\"></slot>\n </div>\n )}\n </cpsl-card>\n <cpsl-card\n id=\"modal-footer\"\n part=\"modal-footer\"\n class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n style={{ display: !this.isMobile ? 'block' : 'none' }}\n >\n <slot name=\"footer\"></slot>\n </cpsl-card>\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 style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\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"]}
|
|
1
|
+
{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-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 { MOBILE_SIZE } from '../../constants';\n\nconst mm = gsap.matchMedia();\n@Component({\n tag: 'cpsl-auth-modal',\n styleUrl: 'cpsl-auth-modal.scss',\n shadow: true,\n})\nexport class CpslAuthModal {\n private hasAnimatedIn: boolean;\n\n @Element() el!: HTMLCpslAuthModalElement;\n\n @State() hasFooter: boolean;\n @State() isMobile: 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 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('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 gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n this.isMobile = false;\n });\n mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n this.isMobile = true;\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.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.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 get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\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 footerSlotEl() {\n return this.footerEl.querySelectorAll('slot')[0];\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 <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true, 'body': true }} part=\"modal-body-card\">\n <slot name=\"body\"></slot>\n {this.isMobile && (\n <div class=\"mobile-footer\">\n <slot name=\"footer\"></slot>\n </div>\n )}\n </cpsl-card>\n <cpsl-card\n id=\"modal-footer\"\n part=\"modal-footer\"\n class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n style={{ display: !this.isMobile ? 'block' : 'none' }}\n >\n <slot name=\"footer\"></slot>\n </cpsl-card>\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 style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\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"]}
|
|
@@ -6097,7 +6097,7 @@ gsap.registerPlugin(CSSPlugin);
|
|
|
6097
6097
|
|
|
6098
6098
|
var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
|
|
6099
6099
|
|
|
6100
|
-
const cpslAuthModalCss = ":host{--container-width:560px;--container-gap:8px;display:block;z-index:10011;position:relative}:host cpsl-overlay{z-index:10011}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.include-mobile-styling) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}}:host(.no-overlay){z-index:0}:host(.no-overlay) .modal-body-card{--card-border-width:1px}.modal-wrapper{z-index:10011;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;width:var(--container-width);display:flex;flex-direction:column;gap:var(--container-gap);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-container.no-footer{gap:0px}.modal-body-card{--card-padding-top:16px;--card-padding-bottom:16px;--card-padding-start:16px;--card-padding-end:16px;--card-border-width:0px
|
|
6100
|
+
const cpslAuthModalCss = ":host{--container-width:560px;--container-gap:8px;display:block;z-index:10011;position:relative}:host cpsl-overlay{z-index:10011}@media (max-width: 480px){:host(.include-mobile-styling) .modal-wrapper{scale:none;top:100%;left:0;height:unset;opacity:1}:host(.include-mobile-styling) .modal-container{width:100%;max-width:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px}:host(.include-mobile-styling) .modal-body-card{--card-border-radius-bl:0px;--card-border-radius-br:0px}}:host(.no-overlay){z-index:0}:host(.no-overlay) .modal-body-card{--card-border-width:1px}.modal-wrapper{z-index:10011;position:fixed;top:0;left:0;display:none;height:100%;width:100%;justify-content:center;align-items:center;scale:0.8;opacity:0;transform:none}.modal-container{position:relative;overflow:hidden;width:var(--container-width);display:flex;flex-direction:column;gap:var(--container-gap);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-container.no-footer{gap:0px}.modal-body-card{--card-padding-top:16px;--card-padding-bottom:16px;--card-padding-start:16px;--card-padding-end:16px;--card-border-width:0px}.body::part(card-container){box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.08)}.no-opacity{opacity:0}.mobile-footer{margin-top:16px}.footer-hidden{height:0px;visibility:hidden;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:0px}";
|
|
6101
6101
|
const CpslAuthModalStyle0 = cpslAuthModalCss;
|
|
6102
6102
|
|
|
6103
6103
|
const mm = gsapWithCSS.matchMedia();
|
|
@@ -6231,7 +6231,7 @@ const CpslAuthModal = class {
|
|
|
6231
6231
|
return this.footerEl.querySelectorAll('slot')[0];
|
|
6232
6232
|
}
|
|
6233
6233
|
get Modal() {
|
|
6234
|
-
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" }))));
|
|
6234
|
+
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, 'body': 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" }))));
|
|
6235
6235
|
}
|
|
6236
6236
|
render() {
|
|
6237
6237
|
if (this.noOverlay) {
|