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

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

@@ -1,23 +1,13 @@
-import { Component, Element, Event, h, Host, Prop, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 export class Drawer {
   constructor() {
-    /**
-     * Wether to show the drawer or not
-     */
+    this._hasHeaderSlot = false;
+    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.showClose = true;
-    /**
-     * Wether to hide the drawer when the backdrop is clicked
-     */
     this.backdropClickClose = true;
-    this._hasHeaderSlot = false;
+    this._closing = false;
   }
   componentWillLoad() {
     this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
@@ -29,132 +19,161 @@ export class Drawer {
     }
     const headerContent = h("slot", { name: "header" });
     const bodyContent = h("slot", { name: "content" });
-    return (h(Host, { class: "p-drawer" },
-      h("p-backdrop", { variant: "drawer", applyBlur: this.applyBlur, onClicked: () => this._backdropClick() },
-        h("p-drawer-container", null,
-          (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (h("p-drawer-header", { "show-close": this.showClose, onClose: () => this.close.emit() }, this._hasHeaderSlot
-            ? headerContent
-            : this.header)),
-          h("p-drawer-body", null, bodyContent)))));
+    return (h(Host, { class: "p-drawer" }, h("p-backdrop", { variant: "drawer", applyBlur: this.applyBlur, onClicked: (ev) => this._backdropClick(ev.detail), closing: this._closing }, h("p-drawer-container", { closing: this._closing }, (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this._hasHeaderSlot) && (h("p-drawer-header", { "show-close": this.showClose, onClose: (ev) => this.close(ev.detail) }, this._hasHeaderSlot
+      ? headerContent
+      : this.header)), h("p-drawer-body", null, bodyContent)))));
   }
-  _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();
+    }, 250);
   }
   static get is() { return "p-drawer"; }
   static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The Header of the drawer"
-      },
-      "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 drawer 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"
-    },
-    "showClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The Header of the drawer"
+        },
+        "attribute": "header",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the close on mobile in the header"
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the drawer or not"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "show-close",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "backdropClickClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to hide the drawer when the backdrop is clicked"
+      "showClose": {
+        "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-close",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "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"
+      "backdropClickClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to hide the drawer 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"; }
 }