@paperless/core 0.1.0-alpha.281 → 0.1.0-alpha.282

package/dist/collection/components/organisms/modal/modal.component.js

@@ -1,36 +1,17 @@
-import { Component, Element, Event, h, Host, Prop, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 export class Modal {
   constructor() {
-    /**
-     * The size of the modal container
-     */
+    this._hasFooterSlot = false;
+    this._hasHeaderSlot = false;
     this.size = 'md';
-    /**
-     * The variant of the modal body
-     */
     this.variant = 'default';
-    /**
-     * Wether to show the modal or not
-     */
+    this.header = undefined;
     this.show = false;
-    /**
-     * Wether to apply blur to the backdrop
-     */
     this.applyBlur = false;
-    /**
-     * Wether to show the close on mobile in the header
-     */
     this.showMobileClose = true;
-    /**
-     * Wether to show the footer on mobile
-     */
     this.showMobileFooter = false;
-    /**
-     * Wether to hide the modal when the backdrop is clicked
-     */
     this.backdropClickClose = true;
-    this._hasFooterSlot = false;
-    this._hasHeaderSlot = false;
+    this._closing = false;
   }
   componentWillLoad() {
     this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
@@ -44,187 +25,215 @@ export class Modal {
     const headerContent = h("slot", { name: "header" });
     const bodyContent = h("slot", { name: "content" });
     const footerContent = h("slot", { name: "footer" });
-    return (h(Host, { class: "p-modal" },
-      h("p-backdrop", { applyBlur: this.applyBlur, onClicked: () => this._backdropClick() },
-        h("p-modal-container", { size: this.size },
-          (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (h("p-modal-header", { "show-mobile-close": this.showMobileClose, onClose: () => this.close.emit() }, this._hasHeaderSlot
-            ? headerContent
-            : this.header)),
-          h("p-modal-body", { variant: this.variant }, bodyContent),
-          this._hasFooterSlot && (h("p-modal-footer", { "hide-on-mobile": this.showMobileFooter }, footerContent))))));
+    return (h(Host, { class: "p-modal" }, h("p-backdrop", { applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing }, h("p-modal-container", { size: this.size, closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (h("p-modal-header", { "show-mobile-close": this.showMobileClose, onClose: (ev) => this.close(ev.detail) }, this._hasHeaderSlot
+      ? headerContent
+      : this.header)), h("p-modal-body", { variant: this.variant }, bodyContent), this._hasFooterSlot && (h("p-modal-footer", { "hide-on-mobile": this.showMobileFooter }, footerContent))))));
   }
-  _backdropClick() {
+  _backdropClick(ev) {
     if (!this.backdropClickClose) {
       return;
     }
-    this.close.emit();
+    this.close(ev);
+  }
+  close(ev) {
+    this.closeClicked.emit(ev);
+    this._closing = true;
+    setTimeout(() => {
+      this.show = false;
+      this._closing = false;
+      this.closed.emit();
+    }, 550);
   }
   static get is() { return "p-modal"; }
   static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'sm' | 'md' | 'lg' | 'xl'",
-        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the modal container"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'md'"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'table'",
-        "resolved": "\"default\" | \"table\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The variant of the modal body"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The Header of the modal"
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "show": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the modal or not"
-      },
-      "attribute": "show",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "applyBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to apply blur to the backdrop"
-      },
-      "attribute": "apply-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showMobileClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the close on mobile in the header"
-      },
-      "attribute": "show-mobile-close",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "showMobileFooter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the footer on mobile"
-      },
-      "attribute": "show-mobile-footer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "backdropClickClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to hide the modal when the backdrop is clicked"
-      },
-      "attribute": "backdrop-click-close",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Close click event"
-      },
-      "complexType": {
-        "original": "MouseEvent",
-        "resolved": "MouseEvent",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg' | 'xl'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the modal container"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'table'",
+          "resolved": "\"default\" | \"table\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the modal body"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The Header of the modal"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the modal or not"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "applyBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to apply blur to the backdrop"
+        },
+        "attribute": "apply-blur",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showMobileClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the close on mobile in the header"
+        },
+        "attribute": "show-mobile-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showMobileFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the footer on mobile"
+        },
+        "attribute": "show-mobile-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "backdropClickClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to hide the modal when the backdrop is clicked"
+        },
+        "attribute": "backdrop-click-close",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_closing": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeClicked",
+        "name": "closeClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close click event"
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }, {
+        "method": "closed",
+        "name": "closed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Closed event"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_el"; }
 }

package/dist/collection/components/organisms/navbar/navbar.component.css

@@ -1,53 +1 @@
-:host {
-  @apply w-full;
-  @apply desktop-xs:w-60;
-}
-:host .sidebar,
-:host .sidebar .company,
-:host .sidebar .content,
-:host .sidebar .user,
-:host .userbar {
-  @apply flex flex-col w-full;
-}
-:host .sidebar,
-:host .top-bar {
-  @apply bg-white;
-  @apply border-0  border-solid border-mystic-dark !important;
-}
-:host .sidebar {
-  @apply bg-white fixed top-0 left-0 h-screen w-60 z-navbar;
-  @apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;
-  @apply will-change-transform;
-  @apply transform-gpu -translate-x-full desktop-xs:translate-x-0;
-  @apply p-4;
-  padding-top: calc(env(safe-area-inset-top, 0) + 1rem);
-  @apply border-r !important;
-  @apply transition-all;
-}
-:host .sidebar .header {
-  @apply flex justify-between w-full items-center mb-6;
-  @apply desktop-xs:hidden;
-}
-:host .sidebar .content {
-  @apply mt-6;
-}
-:host .sidebar .user {
-  @apply hidden mt-auto;
-  @apply desktop-xs:flex;
-}
-:host .sidebar.show {
-  --tw-translate-x: env(safe-area-inset-left, 0);
-}
-:host .top-bar {
-  @apply flex justify-between px-4 py-2 w-full;
-  padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);
-  height: calc(env(safe-area-inset-top, 0) + 3rem);
-  @apply border-b !important;
-  @apply desktop-xs:hidden;
-}
-:host p-backdrop {
-  @apply hidden;
-}
-:host p-backdrop.show {
-  @apply block;
-} .static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:hidden{display:none!important}}
+.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important;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}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) 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}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-r{border-right-width:1px!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:0;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;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));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;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));width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\:relative{position:relative!important}.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:h-full{height:100%!important}}.static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}