@paperless/core 2.0.1-beta.172 → 2.0.1-beta.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/build/p-00e39694.entry.js.map +1 -1
- package/dist/build/p-274e9c49.entry.js +2 -0
- package/dist/build/p-274e9c49.entry.js.map +1 -0
- package/dist/build/{p-9c33c50d.js → p-353b338a.js} +1 -1
- package/dist/build/p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.esm.js.map +1 -1
- package/dist/build/p-modal.entry.esm.js.map +1 -1
- package/dist/build/paperless.esm.js +1 -1
- package/dist/cjs/p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.cjs.js.map +1 -1
- package/dist/cjs/p-modal-body_4.cjs.entry.js +4 -3
- package/dist/cjs/p-modal-body_4.cjs.entry.js.map +1 -1
- package/dist/cjs/p-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/p-modal.entry.cjs.js.map +1 -1
- package/dist/collection/components/atoms/modal/container/modal-container.component.css +1 -1
- package/dist/collection/components/atoms/modal/container/modal-container.component.js +5 -4
- package/dist/collection/components/atoms/modal/container/modal-container.component.js.map +1 -1
- package/dist/collection/components/organisms/modal/modal.component.js +2 -2
- package/dist/collection/components/organisms/modal/modal.component.js.map +1 -1
- package/dist/components/{p-vxD7JU3i.js → p-BPBe7SuA.js} +6 -5
- package/dist/components/p-BPBe7SuA.js.map +1 -0
- package/dist/components/p-modal-container.js +1 -1
- package/dist/components/p-modal.js +1 -1
- package/dist/components/p-modal.js.map +1 -1
- package/dist/esm/p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js.map +1 -1
- package/dist/esm/p-modal-body_4.entry.js +4 -3
- package/dist/esm/p-modal-body_4.entry.js.map +1 -1
- package/dist/esm/p-modal.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-00e39694.entry.js.map +1 -1
- package/dist/paperless/p-274e9c49.entry.js +2 -0
- package/dist/paperless/p-274e9c49.entry.js.map +1 -0
- package/dist/paperless/p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.esm.js.map +1 -1
- package/dist/paperless/p-modal.entry.esm.js.map +1 -1
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/types/components/atoms/modal/container/modal-container.component.d.ts +1 -1
- package/dist/types/components/organisms/modal/modal.component.d.ts +1 -1
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/build/p-d18ee52f.entry.js +0 -2
- package/dist/build/p-d18ee52f.entry.js.map +0 -1
- package/dist/components/p-vxD7JU3i.js.map +0 -1
- package/dist/paperless/p-d18ee52f.entry.js +0 -2
- package/dist/paperless/p-d18ee52f.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-modal.entry.cjs.js","mappings":";;;;MAea,KAAK,GAAA,MAAA;;;;;;AACjB;;AAEG;IACK,IAAI,
|
|
1
|
+
{"file":"p-modal.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-modal.entry.cjs.js","sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"names":["h"],"mappings":";;;;MAea,KAAK,GAAA,MAAA;;;;;;AACjB;;AAEG;IACK,IAAI,
|
|
1
|
+
{"version":3,"file":"p-modal.entry.cjs.js","sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"names":["h"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\[calc\(100dvh-4rem\)\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\:max-w-\[35rem\]{max-width:35rem!important}.tablet\:max-w-\[40rem\]{max-width:40rem!important}.tablet\:max-w-\[45rem\]{max-width:45rem!important}.tablet\:max-w-\[65rem\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}
|
|
1
|
+
.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\[calc\(100dvh-4rem\)\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\:max-w-\[20rem\]{max-width:20rem!important}.tablet\:max-w-\[35rem\]{max-width:35rem!important}.tablet\:max-w-\[40rem\]{max-width:40rem!important}.tablet\:max-w-\[45rem\]{max-width:45rem!important}.tablet\:max-w-\[65rem\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}
|
|
@@ -10,6 +10,7 @@ const container = cva([
|
|
|
10
10
|
], {
|
|
11
11
|
variants: {
|
|
12
12
|
size: {
|
|
13
|
+
xs: 'tablet:max-w-[20rem]',
|
|
13
14
|
base: 'tablet:max-w-[35rem]',
|
|
14
15
|
lg: 'tablet:max-w-[40rem]',
|
|
15
16
|
xl: 'tablet:max-w-[45rem]',
|
|
@@ -31,10 +32,10 @@ export class ModalContainer {
|
|
|
31
32
|
*/
|
|
32
33
|
closing = false;
|
|
33
34
|
render() {
|
|
34
|
-
return (h("div", { key: '
|
|
35
|
+
return (h("div", { key: 'c970cf83e0f3d86a92394f86960e534d8cfb614e', class: container({
|
|
35
36
|
size: this.size,
|
|
36
37
|
closing: asBoolean(this.closing),
|
|
37
|
-
}) }, h("slot", { key: '
|
|
38
|
+
}) }, h("slot", { key: '36444a771755de0317e12212baaa9593c3633374' })));
|
|
38
39
|
}
|
|
39
40
|
static get is() { return "p-modal-container"; }
|
|
40
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -55,8 +56,8 @@ export class ModalContainer {
|
|
|
55
56
|
"attribute": "size",
|
|
56
57
|
"mutable": false,
|
|
57
58
|
"complexType": {
|
|
58
|
-
"original": "'base' | 'lg' | 'xl' | '2xl'",
|
|
59
|
-
"resolved": "\"2xl\" | \"base\" | \"lg\" | \"xl\"",
|
|
59
|
+
"original": "'xs' | 'base' | 'lg' | 'xl' | '2xl'",
|
|
60
|
+
"resolved": "\"2xl\" | \"base\" | \"lg\" | \"xl\" | \"xs\"",
|
|
60
61
|
"references": {}
|
|
61
62
|
},
|
|
62
63
|
"required": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-container.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/modal/container/modal-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,SAAS,GAAG,GAAG,CACpB;IACC,uBAAuB;IAEvB,uBAAuB;IACvB,uDAAuD;IAEvD,2BAA2B;IAE3B,cAAc;CACd,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,IAAI,EAAE,sBAAsB;YAC5B,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,sBAAsB;YAC1B,KAAK,EAAE,sBAAsB;SAC7B;QACD,OAAO,EAAE;YACR,KAAK,EACJ,kEAAkE;YACnE,IAAI,EAAE,wFAAwF;SAC9F;KACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,cAAc;IAC1B;;OAEG;IACK,IAAI,
|
|
1
|
+
{"version":3,"file":"modal-container.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/modal/container/modal-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,SAAS,GAAG,GAAG,CACpB;IACC,uBAAuB;IAEvB,uBAAuB;IACvB,uDAAuD;IAEvD,2BAA2B;IAE3B,cAAc;CACd,EACD;IACC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,EAAE,EAAE,sBAAsB;YAC1B,IAAI,EAAE,sBAAsB;YAC5B,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,sBAAsB;YAC1B,KAAK,EAAE,sBAAsB;SAC7B;QACD,OAAO,EAAE;YACR,KAAK,EACJ,kEAAkE;YACnE,IAAI,EAAE,wFAAwF;SAC9F;KACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,cAAc;IAC1B;;OAEG;IACK,IAAI,GAAwC,MAAM,CAAC;IAE3D;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC,MAAM;QACL,OAAO,CACN,4DACC,KAAK,EAAE,SAAS,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;aAChC,CAAC;YAEF,8DAAQ,CACH,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'tablet:max-w-[20rem]',\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -103,8 +103,8 @@ export class Modal {
|
|
|
103
103
|
"attribute": "size",
|
|
104
104
|
"mutable": false,
|
|
105
105
|
"complexType": {
|
|
106
|
-
"original": "'base' | 'lg' | 'xl' | '2xl'",
|
|
107
|
-
"resolved": "\"2xl\" | \"base\" | \"lg\" | \"xl\"",
|
|
106
|
+
"original": "'xs' | 'base' | 'lg' | 'xl' | '2xl'",
|
|
107
|
+
"resolved": "\"2xl\" | \"base\" | \"lg\" | \"xl\" | \"xs\"",
|
|
108
108
|
"references": {}
|
|
109
109
|
},
|
|
110
110
|
"required": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/modal/modal.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AAMvB,MAAM,OAAO,KAAK;IACjB;;OAEG;IACK,IAAI,
|
|
1
|
+
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../src/components/organisms/modal/modal.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-tdjn65Lz.js';
|
|
|
2
2
|
import { c as cva } from './p-CBWjHURv.js';
|
|
3
3
|
import { a as asBoolean } from './p-C5CTp9IA.js';
|
|
4
4
|
|
|
5
|
-
const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\\:max-w-\\[35rem\\]{max-width:35rem!important}.tablet\\:max-w-\\[40rem\\]{max-width:40rem!important}.tablet\\:max-w-\\[45rem\\]{max-width:45rem!important}.tablet\\:max-w-\\[65rem\\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";
|
|
5
|
+
const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\\:max-w-\\[20rem\\]{max-width:20rem!important}.tablet\\:max-w-\\[35rem\\]{max-width:35rem!important}.tablet\\:max-w-\\[40rem\\]{max-width:40rem!important}.tablet\\:max-w-\\[45rem\\]{max-width:45rem!important}.tablet\\:max-w-\\[65rem\\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";
|
|
6
6
|
|
|
7
7
|
const container = cva([
|
|
8
8
|
'flex-1 min-w-0 w-full',
|
|
@@ -13,6 +13,7 @@ const container = cva([
|
|
|
13
13
|
], {
|
|
14
14
|
variants: {
|
|
15
15
|
size: {
|
|
16
|
+
xs: 'tablet:max-w-[20rem]',
|
|
16
17
|
base: 'tablet:max-w-[35rem]',
|
|
17
18
|
lg: 'tablet:max-w-[40rem]',
|
|
18
19
|
xl: 'tablet:max-w-[45rem]',
|
|
@@ -39,10 +40,10 @@ const ModalContainer = /*@__PURE__*/ proxyCustomElement(class ModalContainer ext
|
|
|
39
40
|
*/
|
|
40
41
|
closing = false;
|
|
41
42
|
render() {
|
|
42
|
-
return (h("div", { key: '
|
|
43
|
+
return (h("div", { key: 'c970cf83e0f3d86a92394f86960e534d8cfb614e', class: container({
|
|
43
44
|
size: this.size,
|
|
44
45
|
closing: asBoolean(this.closing),
|
|
45
|
-
}) }, h("slot", { key: '
|
|
46
|
+
}) }, h("slot", { key: '36444a771755de0317e12212baaa9593c3633374' })));
|
|
46
47
|
}
|
|
47
48
|
static get style() { return modalContainerComponentCss; }
|
|
48
49
|
}, [1, "p-modal-container", {
|
|
@@ -65,6 +66,6 @@ function defineCustomElement() {
|
|
|
65
66
|
defineCustomElement();
|
|
66
67
|
|
|
67
68
|
export { ModalContainer as M, defineCustomElement as d };
|
|
68
|
-
//# sourceMappingURL=p-
|
|
69
|
+
//# sourceMappingURL=p-BPBe7SuA.js.map
|
|
69
70
|
|
|
70
|
-
//# sourceMappingURL=p-
|
|
71
|
+
//# sourceMappingURL=p-BPBe7SuA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-BPBe7SuA.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,yiGAAyiG;;ACI5kG,MAAM,SAAS,GAAG,GAAG,CACpB;IACC,uBAAuB;IAEvB,uBAAuB;IACvB,uDAAuD;IAEvD,2BAA2B;IAE3B,cAAc;CACd,EACD;AACC,IAAA,QAAQ,EAAE;AACT,QAAA,IAAI,EAAE;AACL,YAAA,EAAE,EAAE,sBAAsB;AAC1B,YAAA,IAAI,EAAE,sBAAsB;AAC5B,YAAA,EAAE,EAAE,sBAAsB;AAC1B,YAAA,EAAE,EAAE,sBAAsB;AAC1B,YAAA,KAAK,EAAE,sBAAsB;AAC7B,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,KAAK,EACJ,kEAAkE;AACnE,YAAA,IAAI,EAAE,wFAAwF;AAC9F,SAAA;AACD,KAAA;AACD,CAAA,CACD;MAOY,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AAC1B;;AAEG;IACK,IAAI,GAAwC,MAAM;AAE1D;;AAEG;IACK,OAAO,GAAY,KAAK;IAEhC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,SAAS,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;AAChC,aAAA,CAAC,EAAA,EAEF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/modal/container/modal-container.component.css?tag=p-modal-container&encapsulation=shadow","src/components/atoms/modal/container/modal-container.component.tsx"],"sourcesContent":[":host {\n\t@apply flex w-full justify-center desktop-xs:m-auto;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'tablet:max-w-[20rem]',\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$9 } from './p-C1Fsnz5F.js';
|
|
|
5
5
|
import { d as defineCustomElement$8 } from './p-ZOW6vT-R.js';
|
|
6
6
|
import { d as defineCustomElement$7 } from './p-C-1aZ7t0.js';
|
|
7
7
|
import { d as defineCustomElement$6 } from './p-CMY9PhJV.js';
|
|
8
|
-
import { d as defineCustomElement$5 } from './p-
|
|
8
|
+
import { d as defineCustomElement$5 } from './p-BPBe7SuA.js';
|
|
9
9
|
import { d as defineCustomElement$4 } from './p-D6wtaEjL.js';
|
|
10
10
|
import { d as defineCustomElement$3 } from './p-DRvSVIFO.js';
|
|
11
11
|
import { d as defineCustomElement$2 } from './p-AY1-M254.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-modal.js","mappings":";;;;;;;;;;;;MAea,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;AACjB;;AAEG;IACK,IAAI,
|
|
1
|
+
{"file":"p-modal.js","mappings":";;;;;;;;;;;;MAea,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;AACjB;;AAEG;IACK,IAAI,GAAwC,MAAM;AAE1D;;AAEG;AACK,IAAA,MAAM;AAEd;;AAEG;IACK,IAAI,GAAY,KAAK;AAE7B;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACK,SAAS,GAAG,IAAI;AAExB;;AAEG;IACK,gBAAgB,GAAG,KAAK;AAEhC;;AAEG;IACK,kBAAkB,GAAG,IAAI;AAEjC;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;AAIH,IAAA,YAAY;AAEZ;;AAEG;AAIH,IAAA,MAAM;;IAOE,cAAc,GAAG,KAAK;IACtB,cAAc,GAAG,KAAK;IAEb,QAAQ,GAAG,KAAK;IAEjC,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,0BAA0B,CAAC;AAC1E,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,0BAA0B,CAAC;;IAG3E,MAAM,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACf;;AAGD,QAAA,MAAM,aAAa,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,GAAG;AAC5C,QAAA,MAAM,WAAW,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,GAAG;AAC3C,QAAA,MAAM,aAAa,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,GAAG;AAE5C,QAAA,QACC,CAAA,CAAA,YAAA,EAAA,EACC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EAC/C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAE3B,CACC,CAAA,mBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAA,EAErB,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,cAAc,MAC3C,CACC,CAAA,gBAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,EAAA,EAE7C,IAAI,CAAC,cAAc,GAAG,aAAa,GAAG,IAAI,CAAC,MAAM,CAClC,CACjB,EACD,CACC,CAAA,cAAA,EAAA,EAAA,aAAa,EAAE,CAAC,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAEvD,EAAA,WAAW,CACE,EACd,IAAI,CAAC,cAAc,KACnB,CAAA,CAAA,gBAAA,EAAA,IAAA,EAAiB,aAAa,CAAkB,CAChD,CACkB,CACR;;AAIP,IAAA,cAAc,CAAC,EAAc,EAAA;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC7B;;QAGD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,MAAqB,CAAC;QACvD,IAAI,KAAK,EAAE;YACV;;AAGD,QAAA,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC;;AAGnB,IAAA,UAAU,CAAC,EAAsB,EAAA;QACxC,IAAI,CAAC,EAAE,EAAE;AACR,YAAA,OAAO,IAAI;;QAGZ,IAAI,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,mBAAmB,EAAE;AACtD,YAAA,OAAO,EAAE;;QAGV,IAAI,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE;AACjD,YAAA,OAAO,IAAI;;QAGZ,OAAO,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,aAAa,CAAC;;IAGnC,KAAK,CAAC,MAAc,EAAE,EAAe,EAAA;AAC3C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AAE1B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QAEpB,UAAU,CAAC,MAAK;AACf,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AAErB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;SACxB,EAAE,GAAG,CAAC;;IAIR,gBAAgB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","sources":["src/components/atoms/modal/body/modal-body.component.css?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal/body/modal-body.component.tsx","src/components/atoms/modal/container/modal-container.component.css?tag=p-modal-container&encapsulation=shadow","src/components/atoms/modal/container/modal-container.component.tsx","src/components/atoms/modal/footer/modal-footer.component.css?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal/footer/modal-footer.component.tsx","src/components/atoms/modal/header/modal-header.component.css?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal/header/modal-header.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst body = cva('bg-white p-4', {\n\tvariants: {\n\t\troundedBottom: {\n\t\t\ttrue: 'rounded-b-none desktop-xs:rounded-b-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t\troundedTop: {\n\t\t\ttrue: 'rounded-t-lg desktop-xs:rounded-t-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.css',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={body({\n\t\t\t\t\troundedBottom: this.roundedBottom,\n\t\t\t\t\troundedTop: this.roundedTop,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex w-full justify-center desktop-xs:m-auto;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.css',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<div class='flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl'>\n\t\t\t\t<p-divider class='mb-4 hidden desktop-xs:inline-block' />\n\n\t\t\t\t<div class='flex flex-col gap-4 px-4 tablet:flex-row'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst header = cva([\n\t'w-full flex-col bg-white relative rounded-t-2xl overflow-hidden z-[1]',\n\t'inline-flex aspect-[7/1]',\n]);\n\nconst content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);\n\nconst title = cva([\n\t'flex-1 text-center',\n\t'w-[calc(100%-7rem)]',\n\t'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',\n\t'black-teal-500 text-2xl text-ambit font-bold',\n]);\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.css',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={header()}>\n\t\t\t\t<div class={content()}>\n\t\t\t\t\t<div class={title()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.showClose && (\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t></p-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<p-smile />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,qpBAAqpB;;ACGnrB,MAAM,IAAI,GAAG,GAAG,CAAC,cAAc,EAAE;AAChC,IAAA,QAAQ,EAAE;AACT,QAAA,aAAa,EAAE;AACd,YAAA,IAAI,EAAE,yCAAyC;AAC/C,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,QAAA,UAAU,EAAE;AACX,YAAA,IAAI,EAAE,uCAAuC;AAC7C,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,KAAA;AACD,CAAA,CAAC;MAOW,SAAS,GAAA,MAAA;;;;AACrB;;AAEG;IACK,aAAa,GAAY,KAAK;AAEtC;;AAEG;IACK,UAAU,GAAY,KAAK;IAEnC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC;gBACX,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,aAAA,CAAC,EAAA,EAEF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;ACzCT,MAAM,0BAA0B,GAAG,
|
|
1
|
+
{"version":3,"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","sources":["src/components/atoms/modal/body/modal-body.component.css?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal/body/modal-body.component.tsx","src/components/atoms/modal/container/modal-container.component.css?tag=p-modal-container&encapsulation=shadow","src/components/atoms/modal/container/modal-container.component.tsx","src/components/atoms/modal/footer/modal-footer.component.css?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal/footer/modal-footer.component.tsx","src/components/atoms/modal/header/modal-header.component.css?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal/header/modal-header.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst body = cva('bg-white p-4', {\n\tvariants: {\n\t\troundedBottom: {\n\t\t\ttrue: 'rounded-b-none desktop-xs:rounded-b-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t\troundedTop: {\n\t\t\ttrue: 'rounded-t-lg desktop-xs:rounded-t-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.css',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={body({\n\t\t\t\t\troundedBottom: this.roundedBottom,\n\t\t\t\t\troundedTop: this.roundedTop,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex w-full justify-center desktop-xs:m-auto;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'tablet:max-w-[20rem]',\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.css',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<div class='flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl'>\n\t\t\t\t<p-divider class='mb-4 hidden desktop-xs:inline-block' />\n\n\t\t\t\t<div class='flex flex-col gap-4 px-4 tablet:flex-row'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst header = cva([\n\t'w-full flex-col bg-white relative rounded-t-2xl overflow-hidden z-[1]',\n\t'inline-flex aspect-[7/1]',\n]);\n\nconst content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);\n\nconst title = cva([\n\t'flex-1 text-center',\n\t'w-[calc(100%-7rem)]',\n\t'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',\n\t'black-teal-500 text-2xl text-ambit font-bold',\n]);\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.css',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={header()}>\n\t\t\t\t<div class={content()}>\n\t\t\t\t\t<div class={title()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.showClose && (\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t></p-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<p-smile />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -38,7 +38,7 @@ const ModalBody = class {
|
|
|
38
38
|
};
|
|
39
39
|
ModalBody.style = modalBodyComponentCss;
|
|
40
40
|
|
|
41
|
-
const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\\:max-w-\\[35rem\\]{max-width:35rem!important}.tablet\\:max-w-\\[40rem\\]{max-width:40rem!important}.tablet\\:max-w-\\[45rem\\]{max-width:45rem!important}.tablet\\:max-w-\\[65rem\\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";
|
|
41
|
+
const modalContainerComponentCss = ".flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\\:max-w-\\[20rem\\]{max-width:20rem!important}.tablet\\:max-w-\\[35rem\\]{max-width:35rem!important}.tablet\\:max-w-\\[40rem\\]{max-width:40rem!important}.tablet\\:max-w-\\[45rem\\]{max-width:45rem!important}.tablet\\:max-w-\\[65rem\\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";
|
|
42
42
|
|
|
43
43
|
const container = cva([
|
|
44
44
|
'flex-1 min-w-0 w-full',
|
|
@@ -49,6 +49,7 @@ const container = cva([
|
|
|
49
49
|
], {
|
|
50
50
|
variants: {
|
|
51
51
|
size: {
|
|
52
|
+
xs: 'tablet:max-w-[20rem]',
|
|
52
53
|
base: 'tablet:max-w-[35rem]',
|
|
53
54
|
lg: 'tablet:max-w-[40rem]',
|
|
54
55
|
xl: 'tablet:max-w-[45rem]',
|
|
@@ -73,10 +74,10 @@ const ModalContainer = class {
|
|
|
73
74
|
*/
|
|
74
75
|
closing = false;
|
|
75
76
|
render() {
|
|
76
|
-
return (h("div", { key: '
|
|
77
|
+
return (h("div", { key: 'c970cf83e0f3d86a92394f86960e534d8cfb614e', class: container({
|
|
77
78
|
size: this.size,
|
|
78
79
|
closing: asBoolean(this.closing),
|
|
79
|
-
}) }, h("slot", { key: '
|
|
80
|
+
}) }, h("slot", { key: '36444a771755de0317e12212baaa9593c3633374' })));
|
|
80
81
|
}
|
|
81
82
|
};
|
|
82
83
|
ModalContainer.style = modalContainerComponentCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,qpBAAqpB;;ACGnrB,MAAM,IAAI,GAAG,GAAG,CAAC,cAAc,EAAE;AAChC,IAAA,QAAQ,EAAE;AACT,QAAA,aAAa,EAAE;AACd,YAAA,IAAI,EAAE,yCAAyC;AAC/C,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,QAAA,UAAU,EAAE;AACX,YAAA,IAAI,EAAE,uCAAuC;AAC7C,YAAA,KAAK,EAAE,IAAI;AACX,SAAA;AACD,KAAA;AACD,CAAA,CAAC;MAOW,SAAS,GAAA,MAAA;;;;AACrB;;AAEG;IACK,aAAa,GAAY,KAAK;AAEtC;;AAEG;IACK,UAAU,GAAY,KAAK;IAEnC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC;gBACX,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,aAAA,CAAC,EAAA,EAEF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;ACzCT,MAAM,0BAA0B,GAAG,
|
|
1
|
+
{"file":"p-modal-body.p-modal-container.p-modal-footer.p-modal-header.entry.js","mappings":"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","names":[],"sources":["src/components/atoms/modal/body/modal-body.component.css?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal/body/modal-body.component.tsx","src/components/atoms/modal/container/modal-container.component.css?tag=p-modal-container&encapsulation=shadow","src/components/atoms/modal/container/modal-container.component.tsx","src/components/atoms/modal/footer/modal-footer.component.css?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal/footer/modal-footer.component.tsx","src/components/atoms/modal/header/modal-header.component.css?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal/header/modal-header.component.tsx"],"sourcesContent":["","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst body = cva('bg-white p-4', {\n\tvariants: {\n\t\troundedBottom: {\n\t\t\ttrue: 'rounded-b-none desktop-xs:rounded-b-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t\troundedTop: {\n\t\t\ttrue: 'rounded-t-lg desktop-xs:rounded-t-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.css',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={body({\n\t\t\t\t\troundedBottom: this.roundedBottom,\n\t\t\t\t\troundedTop: this.roundedTop,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex w-full justify-center desktop-xs:m-auto;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'tablet:max-w-[20rem]',\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.css',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<div class='flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl'>\n\t\t\t\t<p-divider class='mb-4 hidden desktop-xs:inline-block' />\n\n\t\t\t\t<div class='flex flex-col gap-4 px-4 tablet:flex-row'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst header = cva([\n\t'w-full flex-col bg-white relative rounded-t-2xl overflow-hidden z-[1]',\n\t'inline-flex aspect-[7/1]',\n]);\n\nconst content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);\n\nconst title = cva([\n\t'flex-1 text-center',\n\t'w-[calc(100%-7rem)]',\n\t'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',\n\t'black-teal-500 text-2xl text-ambit font-bold',\n]);\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.css',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={header()}>\n\t\t\t\t<div class={content()}>\n\t\t\t\t\t<div class={title()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.showClose && (\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t></p-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<p-smile />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-modal.entry.js","sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"names":[],"mappings":";;MAea,KAAK,GAAA,MAAA;;;;;;AACjB;;AAEG;IACK,IAAI,
|
|
1
|
+
{"version":3,"file":"p-modal.entry.js","sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="modulepreload" href="/build/p-
|
|
1
|
+
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="modulepreload" href="/build/p-353b338a.js"><link rel="modulepreload" href="/build/p-B4q5W46_.js"><link rel="modulepreload" href="/build/p-C5CTp9IA.js"><link rel="modulepreload" href="/build/p-CBWjHURv.js"><link rel="modulepreload" href="/build/p-CT54OXR2.js"><link rel="modulepreload" href="/build/p-ChV9xqsO.js"><link rel="modulepreload" href="/build/p-DhGo7hbh.js"><script type="module" src="/build/p-353b338a.js" data-stencil data-resources-url="/build/" data-stencil-namespace="paperless"></script> <script nomodule="" src="/build/paperless.js" data-stencil></script> <style>.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important}.lining-nums,.tabular-nums{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.tabular-nums{--tw-numeric-spacing:tabular-nums!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}*{box-sizing:border-box;font-family:Geist,serif}.touch-none{touch-action:none!important}.font-ambit{font-family:Ambit,sans-serif!important}.font-geist{font-family:Geist,serif!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.font-medium{font-weight:500!important}.lining-nums{--tw-numeric-figure:lining-nums!important;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-inherit{color:inherit!important}.antialiased{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}@import url(https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap);@import url(https://fonts.cdnfonts.com/css/ambit);*,* button,.font-geist,.font-geist button{font-variant-numeric:lining-nums tabular-nums}body,html{--tw-bg-opacity:1;-webkit-font-smoothing:antialiased;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));text-rendering:optimizeLegibility;width:100%}html{height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch}body{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important;font-size:1rem!important;font-weight:500!important;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-moz-stretch;height:-webkit-stretch;height:-webkit-fill-available;height:-moz-available;height:stretch;line-height:1.5rem!important}body *{box-sizing:border-box}a,a:visited{color:inherit}h1,h2,h3,h4,h5{font-family:Ambit,sans-serif;font-weight:700}h1{font-size:2rem;line-height:2.5rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem}h3,h4{line-height:1.75rem}h4{font-size:1.125rem}.scroll-lock{-webkit-overflow-scrolling:auto;overflow:hidden;overscroll-behavior:none;touch-action:none}</style> </head> <body> <p-button>Test</p-button> <script data-build="2025-06-05T07:27:03">
|
|
2
2
|
if ('serviceWorker' in navigator && location.protocol !== 'file:') {
|
|
3
3
|
window.addEventListener('load', function() {
|
|
4
4
|
navigator.serviceWorker.register('/sw.js')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Modal","size","header","show","applyBlur","showClose","showMobileFooter","backdropClickClose","scrollLock","closeClicked","closed","_hasFooterSlot","_hasHeaderSlot","_closing","componentWillLoad","this","_el","querySelector","render","headerContent","h","name","bodyContent","footerContent","onClicked","ev","_backdropClick","detail","closing","length","onClose","close","roundedBottom","roundedTop","modal","_findModal","target","el","nodeName","toLowerCase","parentElement","reason","emit","setTimeout","handleCloseModal"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"mappings":"+DAeaA,EAAK,M,mGAITC,
|
|
1
|
+
{"version":3,"names":["Modal","size","header","show","applyBlur","showClose","showMobileFooter","backdropClickClose","scrollLock","closeClicked","closed","_hasFooterSlot","_hasHeaderSlot","_closing","componentWillLoad","this","_el","querySelector","render","headerContent","h","name","bodyContent","footerContent","onClicked","ev","_backdropClick","detail","closing","length","onClose","close","roundedBottom","roundedTop","modal","_findModal","target","el","nodeName","toLowerCase","parentElement","reason","emit","setTimeout","handleCloseModal"],"sources":["src/components/organisms/modal/modal.component.tsx"],"sourcesContent":["import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal',\n\tshadow: true,\n})\nexport class Modal {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * The Header of the modal\n\t */\n\t@Prop() header?: string;\n\n\t/**\n\t * Wether to show the modal or not\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to apply blur to the backdrop\n\t */\n\t@Prop() applyBlur: boolean = false;\n\n\t/**\n\t * Wether to show the close button in the header\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Wether to show the footer on mobile\n\t */\n\t@Prop() showMobileFooter = false;\n\n\t/**\n\t * Wether to hide the modal when the backdrop is clicked\n\t */\n\t@Prop() backdropClickClose = true;\n\n\t/**\n\t * Wether we should scroll lock the body\n\t */\n\t@Prop() scrollLock: boolean = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tcloseClicked: EventEmitter<MouseEvent>;\n\n\t/**\n\t * Closed event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclosed: EventEmitter<string>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasFooterSlot = false;\n\tprivate _hasHeaderSlot = false;\n\n\t@State() private _closing = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasFooterSlot = !!this._el.querySelector(':scope > [slot=\"footer\"]');\n\t\tthis._hasHeaderSlot = !!this._el.querySelector(':scope > [slot=\"header\"]');\n\t}\n\n\trender() {\n\t\tif (!this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerContent = <slot name='header' />;\n\t\tconst bodyContent = <slot name='content' />;\n\t\tconst footerContent = <slot name='footer' />;\n\n\t\treturn (\n\t\t\t<p-backdrop\n\t\t\t\tapplyBlur={this.applyBlur}\n\t\t\t\tonClicked={ev => this._backdropClick(ev.detail)}\n\t\t\t\tclosing={this._closing}\n\t\t\t\tscrollLock={this.scrollLock}\n\t\t\t>\n\t\t\t\t<p-modal-container\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tclosing={this._closing}\n\t\t\t\t>\n\t\t\t\t\t{(this.header?.length || this._hasHeaderSlot) && (\n\t\t\t\t\t\t<p-modal-header\n\t\t\t\t\t\t\tshowClose={this.showClose}\n\t\t\t\t\t\t\tonClose={ev => this.close('button', ev.detail)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._hasHeaderSlot ? headerContent : this.header}\n\t\t\t\t\t\t</p-modal-header>\n\t\t\t\t\t)}\n\t\t\t\t\t<p-modal-body\n\t\t\t\t\t\troundedBottom={!this._hasFooterSlot}\n\t\t\t\t\t\troundedTop={!this._hasHeaderSlot && !this.header?.length}\n\t\t\t\t\t>\n\t\t\t\t\t\t{bodyContent}\n\t\t\t\t\t</p-modal-body>\n\t\t\t\t\t{this._hasFooterSlot && (\n\t\t\t\t\t\t<p-modal-footer>{footerContent}</p-modal-footer>\n\t\t\t\t\t)}\n\t\t\t\t</p-modal-container>\n\t\t\t</p-backdrop>\n\t\t);\n\t}\n\n\tprivate _backdropClick(ev: MouseEvent) {\n\t\tif (!this.backdropClickClose) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modal = this._findModal(ev.target as HTMLElement);\n\t\tif (modal) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.close('backdrop', ev);\n\t}\n\n\tprivate _findModal(el: HTMLElement | null): any {\n\t\tif (!el) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (el.nodeName.toLowerCase() === 'p-modal-container') {\n\t\t\treturn el;\n\t\t}\n\n\t\tif (el?.nodeName?.toLowerCase() === 'p-backdrop') {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn this._findModal(el?.parentElement);\n\t}\n\n\tpublic close(reason: string, ev?: MouseEvent) {\n\t\tthis.closeClicked.emit(ev);\n\n\t\tthis._closing = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.show = false;\n\t\t\tthis._closing = false;\n\n\t\t\tthis.closed.emit(reason);\n\t\t}, 550);\n\t}\n\n\t@Listen('closeModal', { target: 'window' })\n\thandleCloseModal() {\n\t\tthis.close('event');\n\t}\n}\n"],"mappings":"+DAeaA,EAAK,M,mGAITC,KAA4C,OAK5CC,OAKAC,KAAgB,MAKhBC,UAAqB,MAKrBC,UAAY,KAKZC,iBAAmB,MAKnBC,mBAAqB,KAKrBC,WAAsB,KAQ9BC,aAQAC,O,yBAOQC,eAAiB,MACjBC,eAAiB,MAERC,SAAW,MAE5B,iBAAAC,GACCC,KAAKJ,iBAAmBI,KAAKC,IAAIC,cAAc,4BAC/CF,KAAKH,iBAAmBG,KAAKC,IAAIC,cAAc,2B,CAGhD,MAAAC,GACC,IAAKH,KAAKZ,KAAM,CACf,M,CAGD,MAAMgB,EAAgBC,EAAA,QAAMC,KAAK,WACjC,MAAMC,EAAcF,EAAA,QAAMC,KAAK,YAC/B,MAAME,EAAgBH,EAAA,QAAMC,KAAK,WAEjC,OACCD,EAAA,cACChB,UAAWW,KAAKX,UAChBoB,UAAWC,GAAMV,KAAKW,eAAeD,EAAGE,QACxCC,QAASb,KAAKF,SACdL,WAAYO,KAAKP,YAEjBY,EACC,qBAAAnB,KAAMc,KAAKd,KACX2B,QAASb,KAAKF,WAEZE,KAAKb,QAAQ2B,QAAUd,KAAKH,iBAC7BQ,EACC,kBAAAf,UAAWU,KAAKV,UAChByB,QAASL,GAAMV,KAAKgB,MAAM,SAAUN,EAAGE,SAEtCZ,KAAKH,eAAiBO,EAAgBJ,KAAKb,QAG9CkB,EACC,gBAAAY,eAAgBjB,KAAKJ,eACrBsB,YAAalB,KAAKH,iBAAmBG,KAAKb,QAAQ2B,QAEjDP,GAEDP,KAAKJ,gBACLS,EAAA,sBAAiBG,I,CAOd,cAAAG,CAAeD,GACtB,IAAKV,KAAKR,mBAAoB,CAC7B,M,CAGD,MAAM2B,EAAQnB,KAAKoB,WAAWV,EAAGW,QACjC,GAAIF,EAAO,CACV,M,CAGDnB,KAAKgB,MAAM,WAAYN,E,CAGhB,UAAAU,CAAWE,GAClB,IAAKA,EAAI,CACR,OAAO,I,CAGR,GAAIA,EAAGC,SAASC,gBAAkB,oBAAqB,CACtD,OAAOF,C,CAGR,GAAIA,GAAIC,UAAUC,gBAAkB,aAAc,CACjD,OAAO,I,CAGR,OAAOxB,KAAKoB,WAAWE,GAAIG,c,CAGrB,KAAAT,CAAMU,EAAgBhB,GAC5BV,KAAKN,aAAaiC,KAAKjB,GAEvBV,KAAKF,SAAW,KAEhB8B,YAAW,KACV5B,KAAKZ,KAAO,MACZY,KAAKF,SAAW,MAEhBE,KAAKL,OAAOgC,KAAKD,EAAO,GACtB,I,CAIJ,gBAAAG,GACC7B,KAAKgB,MAAM,Q","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e,c as a}from"./p-DhGo7hbh.js";import{c as o}from"./p-CBWjHURv.js";import{a as r}from"./p-C5CTp9IA.js";import"./p-ChV9xqsO.js";const i="*{box-sizing:border-box}.static{position:static!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-lg{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}.desktop-xs\\:rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}}";const n=o("bg-white p-4",{variants:{roundedBottom:{true:"rounded-b-none desktop-xs:rounded-b-2xl",false:null},roundedTop:{true:"rounded-t-lg desktop-xs:rounded-t-2xl",false:null}}});const m=class{constructor(e){t(this,e)}roundedBottom=false;roundedTop=false;render(){return e("div",{key:"54eeb93a27f3d9324922588ded663f918d23459c",class:n({roundedBottom:this.roundedBottom,roundedTop:this.roundedTop})},e("slot",{key:"e59ecb5c9ea4e96ecfd070dafc402851bf569c14"}))}};m.style=i;const d=".flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}*{box-sizing:border-box}:host{display:flex;justify-content:center;width:100%}@media (min-width:64rem){:host{margin:auto}}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.z-modal{z-index:600!important}.max-h-\\[calc\\(100dvh-4rem\\)\\]{max-height:calc(100dvh - 4rem)!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.shadow-modal{--tw-shadow:0 0 0 1px rgba(0,2,2,.1),0 1px 1px 0 rgba(0,2,2,.2),0 2px 2px 0 rgba(0,2,2,.08),0 4px 4px 0 rgba(0,2,2,.08),0 8px 8px 0 rgba(0,2,2,.08)!important;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 1px 1px 0 var(--tw-shadow-color),0 2px 2px 0 var(--tw-shadow-color),0 4px 4px 0 var(--tw-shadow-color),0 8px 8px 0 var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:40rem){.tablet\\:max-w-\\[20rem\\]{max-width:20rem!important}.tablet\\:max-w-\\[35rem\\]{max-width:35rem!important}.tablet\\:max-w-\\[40rem\\]{max-width:40rem!important}.tablet\\:max-w-\\[45rem\\]{max-width:45rem!important}.tablet\\:max-w-\\[65rem\\]{max-width:65rem!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";const s=o(["flex-1 min-w-0 w-full","z-modal flex flex-col","rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl","max-h-[calc(100dvh-4rem)]","shadow-modal"],{variants:{size:{xs:"tablet:max-w-[20rem]",base:"tablet:max-w-[35rem]",lg:"tablet:max-w-[40rem]",xl:"tablet:max-w-[45rem]","2xl":"tablet:max-w-[65rem]"},closing:{false:"animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small",true:"animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none"}}});const l=class{constructor(e){t(this,e)}size="base";closing=false;render(){return e("div",{key:"c970cf83e0f3d86a92394f86960e534d8cfb614e",class:s({size:this.size,closing:r(this.closing)})},e("slot",{key:"36444a771755de0317e12212baaa9593c3633374"}))}};l.style=d;const p="*{box-sizing:border-box}.static{position:static!important}.mb-4{margin-bottom:1rem!important}.flex{display:flex!important}.hidden{display:none!important}.flex-col{flex-direction:column!important}.gap-4{gap:1rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}@media (min-width:40rem){.tablet\\:flex-row{flex-direction:row!important}}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block!important}.desktop-xs\\:rounded-b-2xl{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important}}";const c=class{constructor(e){t(this,e)}render(){return e("div",{key:"2b98a6f0f1d00b193c8d81d88afb4db6ff581484",class:"flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl"},e("p-divider",{key:"f26fcd3f3b42781ef148377089fa31a337bbf9d6",class:"mb-4 hidden desktop-xs:inline-block"}),e("div",{key:"ae51d4c9d85b9760651eda2ca3a4ad88cf064bbf",class:"flex flex-col gap-4 px-4 tablet:flex-row"},e("slot",{key:"3156a92dbf6d85df26bb46b3017850a65af00bf7"})))}};c.style=p;const b="*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.z-\\[1\\]{z-index:1!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.aspect-\\[7\\/1\\]{aspect-ratio:7/1!important}.h-12{height:3rem!important}.w-\\[calc\\(100\\%-7rem\\)\\]{width:calc(100% - 7rem)!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.overflow-hidden{overflow:hidden!important}.rounded-t-2xl{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-4{padding:1rem!important}.pb-0{padding-bottom:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.font-bold{font-weight:700!important}";const x=o(["w-full flex-col bg-white relative rounded-t-2xl overflow-hidden z-[1]","inline-flex aspect-[7/1]"]);const f=o(["flex justify-end","w-full p-4 pb-0 h-12"]);const w=o(["flex-1 text-center","w-[calc(100%-7rem)]","absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2","black-teal-500 text-2xl text-ambit font-bold"]);const h=class{constructor(e){t(this,e);this.close=a(this,"close",3)}showClose=true;close;render(){return e("div",{key:"12831cc1bca31e747b45fd13dfa66bfa82cbe2fb",class:x()},e("div",{key:"fa5539f7bd001b022be312e5e8155dd02a64a4a7",class:f()},e("div",{key:"27a50756df5d98858901fde265e103e6abf14b6a",class:w()},e("slot",{key:"4c2f3f89ef30b0c7a1e77996936c6044e569934e"})),this.showClose&&e("p-button",{key:"d20087d813a483a30a5bdcc1a036aadc616bc4c0",variant:"secondary",icon:"negative",iconOnly:true,onClick:t=>this.close.emit(t)})),e("p-smile",{key:"39ed230b0bc8f327482cc61d7257a659d2de7268"}))}};h.style=b;export{m as p_modal_body,l as p_modal_container,c as p_modal_footer,h as p_modal_header};
|
|
2
|
+
//# sourceMappingURL=p-274e9c49.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["modalBodyComponentCss","body","cva","variants","roundedBottom","true","false","roundedTop","ModalBody","render","h","key","class","this","modalContainerComponentCss","container","size","xs","base","lg","xl","closing","ModalContainer","asBoolean","modalFooterComponentCss","ModalFooter","modalHeaderComponentCss","header","content","title","ModalHeader","showClose","close","variant","icon","iconOnly","onClick","ev","emit"],"sources":["src/components/atoms/modal/body/modal-body.component.css?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal/body/modal-body.component.tsx","src/components/atoms/modal/container/modal-container.component.css?tag=p-modal-container&encapsulation=shadow","src/components/atoms/modal/container/modal-container.component.tsx","src/components/atoms/modal/footer/modal-footer.component.css?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal/footer/modal-footer.component.tsx","src/components/atoms/modal/header/modal-header.component.css?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal/header/modal-header.component.tsx"],"sourcesContent":[null,"import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst body = cva('bg-white p-4', {\n\tvariants: {\n\t\troundedBottom: {\n\t\t\ttrue: 'rounded-b-none desktop-xs:rounded-b-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t\troundedTop: {\n\t\t\ttrue: 'rounded-t-lg desktop-xs:rounded-t-2xl',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.css',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() roundedBottom: boolean = false;\n\n\t/**\n\t * Wether the modal body should be rounded at the top\n\t */\n\t@Prop() roundedTop: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={body({\n\t\t\t\t\troundedBottom: this.roundedBottom,\n\t\t\t\t\troundedTop: this.roundedTop,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n",":host {\n\t@apply flex w-full justify-center desktop-xs:m-auto;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\nconst container = cva(\n\t[\n\t\t'flex-1 min-w-0 w-full',\n\n\t\t'z-modal flex flex-col',\n\t\t'rounded-b-none rounded-t-2xl desktop-xs:rounded-b-2xl',\n\n\t\t'max-h-[calc(100dvh-4rem)]',\n\n\t\t'shadow-modal',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'tablet:max-w-[20rem]',\n\t\t\t\tbase: 'tablet:max-w-[35rem]',\n\t\t\t\tlg: 'tablet:max-w-[40rem]',\n\t\t\t\txl: 'tablet:max-w-[45rem]',\n\t\t\t\t'2xl': 'tablet:max-w-[65rem]',\n\t\t\t},\n\t\t\tclosing: {\n\t\t\t\tfalse:\n\t\t\t\t\t'animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small',\n\t\t\t\ttrue: 'animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small pointer-events-none',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.css',\n\tshadow: true,\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'xs' | 'base' | 'lg' | 'xl' | '2xl' = 'base';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={container({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\tclosing: asBoolean(this.closing),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n",null,"import { Component, h } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.css',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<div class='flex flex-col rounded-b-none bg-white pb-4 desktop-xs:rounded-b-2xl'>\n\t\t\t\t<p-divider class='mb-4 hidden desktop-xs:inline-block' />\n\n\t\t\t\t<div class='flex flex-col gap-4 px-4 tablet:flex-row'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n",null,"import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst header = cva([\n\t'w-full flex-col bg-white relative rounded-t-2xl overflow-hidden z-[1]',\n\t'inline-flex aspect-[7/1]',\n]);\n\nconst content = cva(['flex justify-end', 'w-full p-4 pb-0 h-12']);\n\nconst title = cva([\n\t'flex-1 text-center',\n\t'w-[calc(100%-7rem)]',\n\t'absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',\n\t'black-teal-500 text-2xl text-ambit font-bold',\n]);\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.css',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={header()}>\n\t\t\t\t<div class={content()}>\n\t\t\t\t\t<div class={title()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.showClose && (\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\ticon='negative'\n\t\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\t\tonClick={ev => this.close.emit(ev)}\n\t\t\t\t\t\t></p-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<p-smile />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"mappings":"kJAAA,MAAMA,EAAwB,spBCG9B,MAAMC,EAAOC,EAAI,eAAgB,CAChCC,SAAU,CACTC,cAAe,CACdC,KAAM,0CACNC,MAAO,MAERC,WAAY,CACXF,KAAM,wCACNC,MAAO,S,MAUGE,EAAS,M,yBAIbJ,cAAyB,MAKzBG,WAAsB,MAE9B,MAAAE,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAOX,EAAK,CACXG,cAAeS,KAAKT,cACpBG,WAAYM,KAAKN,cAGlBG,EAAQ,QAAAC,IAAA,6C,aCxCZ,MAAMG,EAA6B,0iGCInC,MAAMC,EAAYb,EACjB,CACC,wBAEA,wBACA,wDAEA,4BAEA,gBAED,CACCC,SAAU,CACTa,KAAM,CACLC,GAAI,uBACJC,KAAM,uBACNC,GAAI,uBACJC,GAAI,uBACJ,MAAO,wBAERC,QAAS,CACRf,MACC,mEACDD,KAAM,6F,MAWGiB,EAAc,M,yBAIlBN,KAA4C,OAK5CK,QAAmB,MAE3B,MAAAZ,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAOG,EAAU,CAChBC,KAAMH,KAAKG,KACXK,QAASE,EAAUV,KAAKQ,YAGzBX,EAAQ,QAAAC,IAAA,6C,aCzDZ,MAAMa,EAA0B,sxB,MCOnBC,EAAW,M,yBACvB,MAAAhB,GACC,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uEACVF,EAAW,aAAAC,IAAA,2CAAAC,MAAM,wCAEjBF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,4CACVF,EAAQ,QAAAC,IAAA,8C,aCdb,MAAMe,EAA0B,g2CCGhC,MAAMC,EAASzB,EAAI,CAClB,wEACA,6BAGD,MAAM0B,EAAU1B,EAAI,CAAC,mBAAoB,yBAEzC,MAAM2B,EAAQ3B,EAAI,CACjB,qBACA,sBACA,8DACA,iD,MAQY4B,EAAW,M,sDAIfC,UAAY,KAQpBC,MAEA,MAAAvB,GACC,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAOe,KACXjB,EAAK,OAAAC,IAAA,2CAAAC,MAAOgB,KACXlB,EAAK,OAAAC,IAAA,2CAAAC,MAAOiB,KACXnB,EAAA,QAAAC,IAAA,8CAGAE,KAAKkB,WACLrB,EAAA,YAAAC,IAAA,2CACCsB,QAAQ,YACRC,KAAK,WACLC,SAAU,KACVC,QAASC,GAAMxB,KAAKmB,MAAMM,KAAKD,MAKlC3B,EAAW,WAAAC,IAAA,6C","ignoreList":[]}
|