@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.212

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

@@ -0,0 +1,180 @@
+import { Component, Element, Event, h, Host, Prop, } from '@stencil/core';
+export class Modal {
+  constructor() {
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+    /**
+     * Wether to show the modal or not
+     */
+    this.show = false;
+    /**
+     * Wether to show the close on mobile in the header
+     */
+    this.showMobileClose = true;
+    /**
+     * Wether to show the footer on mobile
+     */
+    this.showMobileFooter = false;
+    this._hasFooterSlot = false;
+    this._hasHeaderSlot = false;
+  }
+  componentWillLoad() {
+    this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
+    this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
+  }
+  render() {
+    var _a;
+    if (!this.show) {
+      return;
+    }
+    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-modal-backdrop", null,
+        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))))));
+  }
+  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"
+    },
+    "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"
+    }
+  }; }
+  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 elementRef() { return "_el"; }
+}

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

@@ -0,0 +1,59 @@
+: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 .backdrop {
+  @apply fixed top-0 left-0 z-backdrop;
+  @apply h-screen w-screen;
+  @apply backdrop-blur-xs bg-storm/50;
+  will-change: opacity;
+  @apply transition-opacity opacity-0;
+  @apply desktop-xs:hidden;
+  @apply pointer-events-none;
+}
+:host .backdrop.show {
+  @apply pointer-events-auto opacity-100;
+} .static{position:static!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}

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

@@ -0,0 +1,99 @@
+import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
+export class Navbar {
+  constructor() {
+    /**
+     * The text to display for the close button
+     */
+    this.closeText = 'Close';
+    /**
+     * The text to display for the menu button & sidebar title
+     */
+    this.menuText = 'Menu';
+    this._showMenu = false;
+  }
+  render() {
+    return (h(Host, { class: "p-navbar" },
+      h("div", { class: `backdrop ${this._showMenu && 'show'}`, onClick: () => (this._showMenu = false) }),
+      h("div", { class: `sidebar ${this._showMenu && 'show'}` },
+        h("div", { class: "header" },
+          h("p", { class: "text-xl m-0 font-semibold text-storm-dark" }, this.menuText),
+          h("p-button", { variant: "secondary", icon: "negative", iconPosition: "end", size: "small", onClick: () => (this._showMenu = false) }, this.closeText)),
+        h("div", { class: "company" },
+          h("slot", { name: "company" })),
+        h("div", { class: "content" },
+          h("slot", { name: "content" })),
+        h("div", { class: "user" },
+          h("slot", { name: "user" }))),
+      h("div", { class: "top-bar" },
+        h("p-button", { variant: "secondary", icon: "menu", size: "small", onClick: () => (this._showMenu = true) }, this.menuText),
+        h("slot", { name: "topbar" }))));
+  }
+  handleCloseNavbar() {
+    this._showMenu = false;
+  }
+  handleOpenNavbar() {
+    this._showMenu = true;
+  }
+  static get is() { return "p-navbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["navbar.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["navbar.component.css"]
+  }; }
+  static get properties() { return {
+    "closeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to display for the close button"
+      },
+      "attribute": "close-text",
+      "reflect": false,
+      "defaultValue": "'Close'"
+    },
+    "menuText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to display for the menu button & sidebar title"
+      },
+      "attribute": "menu-text",
+      "reflect": false,
+      "defaultValue": "'Menu'"
+    }
+  }; }
+  static get states() { return {
+    "_showMenu": {}
+  }; }
+  static get listeners() { return [{
+      "name": "closeNavbar",
+      "method": "handleCloseNavbar",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "openNavbar",
+      "method": "handleOpenNavbar",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,3 @@
+p-table {
+  @apply flex flex-col;
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!important}.filter{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}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!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:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-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}.p-4{padding:1rem!important}.filter{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}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!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}*{box-sizing:border-box}*{box-sizing:border-box}