@paperless/core 0.1.0-alpha.26 → 0.1.0-alpha.261

package/dist/esm/p-backdrop_5.entry.js

@@ -0,0 +1,90 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-7c99f044.js';
+
+const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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:120rem){.container{max-width:120rem}}@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}}*{box-sizing:border-box}:host{align-items:flex-end;animation:fadeIn .2s ease-in-out;background-color:rgba(39,40,56,.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:490}@media (min-width:40rem){:host{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host{align-items:center;padding:4rem}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}";
+
+const Backdrop = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.applyBlur = false;
+  }
+  render() {
+    return (h(Host, { class: `p-backdrop ${this.applyBlur && 'blurred'}` }, h("slot", null)));
+  }
+};
+Backdrop.style = backdropComponentCss;
+
+const modalBodyComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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:120rem){.container{max-width:120rem}}@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}}*{box-sizing:border-box}:host{padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}";
+
+const ModalBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-modal-body variant-${this.variant}` }, h("slot", null)));
+  }
+};
+ModalBody.style = modalBodyComponentCss;
+
+const modalContainerComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem 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}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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:120rem){.container{max-width:120rem}}@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}}*{box-sizing:border-box}p-modal-container{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;overflow:hidden;width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}@media (min-width:40rem){.tablet\\:w-auto{width:auto!important}}";
+
+// $modal-xs: 20rem;
+// $modal-sm: 33.5rem;
+// $modal-md: 38rem;
+// $modal-lg: 47.5rem;
+// $modal-xl: 57.5rem;
+const modalSizes = {
+  xs: 'tablet:w-80',
+  sm: 'tablet:w-[33.5rem]',
+  md: 'tablet:w-[38rem]',
+  lg: 'tablet:w-[47.5rem]',
+  xl: 'tablet:w-[57.5rem]',
+};
+const ModalContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+  }
+  render() {
+    const sizeClass = modalSizes[this.size];
+    return (h(Host, { class: `p-modal-container ${sizeClass}` }, h("slot", null)));
+  }
+};
+ModalContainer.style = modalContainerComponentCss;
+
+const modalFooterComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.hidden{display:none!important}.pb-6{padding-bottom:1.5rem!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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:120rem){.container{max-width:120rem}}@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}}*{box-sizing:border-box}:host{display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+
+const ModalFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "p-modal-footer" }, h("p-divider", { class: "mb-6 mt-0 hidden desktop-xs:flex" }), h("slot", null)));
+  }
+};
+ModalFooter.style = modalFooterComponentCss;
+
+const modalHeaderComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.hidden{display:none!important}.justify-between{justify-content:space-between!important}.p-4{padding:1rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-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:120rem){.container{max-width:120rem}}@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}}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}";
+
+const ModalHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    /**
+     * Wether to show the close button on mobile
+     */
+    this.showClose = true;
+  }
+  render() {
+    return (h(Host, { class: "p-modal-header" }, h("span", null, h("slot", null)), this.showClose && (h("p-button", { variant: "secondary", icon: "negative", iconOnly: true, onClick: () => this.close.emit(), size: "small" }))));
+  }
+};
+ModalHeader.style = modalHeaderComponentCss;
+
+export { Backdrop as p_backdrop, ModalBody as p_modal_body, ModalContainer as p_modal_container, ModalFooter as p_modal_footer, ModalHeader as p_modal_header };