@paperless/core 0.1.0-alpha.0 → 0.1.0-alpha.101

package/dist/collection/components/atoms/layout/layout.component.css

@@ -0,0 +1,73 @@
+:host {
+  @apply grid h-screen w-screen content-start overflow-hidden;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(1fr, 3);
+  gap: 0;
+  grid-template-areas: "topbar" "sidebar" "content";
+}
+@screen desktop-xs {
+  :host {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "topbar topbar" "sidebar content";
+  }
+}
+:host .topbar,
+:host .sidebar,
+:host .content {
+  @apply self-start;
+}
+:host .topbar {
+  grid-area: topbar;
+  @apply sticky w-full;
+  @apply order-2 desktop-sm:order-1;
+}
+:host .sidebar {
+  grid-area: sidebar;
+  @apply flex h-full box-border;
+  @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;
+  @apply order-1 desktop-sm:order-2;
+}
+:host .content {
+  grid-area: content;
+  @apply relative flex flex-col h-full overflow-y-auto overflow-x-hidden;
+  @apply order-3;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+:host .content .inner-content {
+  @apply relative pb-24 box-content;
+  @apply px-content-mobile-x py-content-mobile-y;
+  @apply desktop-sm:px-content-desktop-x desktop-sm:py-content-desktop-y;
+  @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;
+}
+
+:host(.variant-default) .content {
+  @apply flex-1;
+}
+
+:host(.variant-login) {
+  grid-template-areas: "topbar topbar" "content content";
+}
+@screen desktop-xs {
+  :host(.variant-login) {
+    grid-template-areas: "topbar topbar" "content sidebar";
+  }
+}
+:host(.variant-login) .sidebar {
+  @apply hidden desktop-xs:flex w-unset;
+  @apply order-3 p-2;
+  @apply flex-1 overflow-hidden;
+}
+:host(.variant-login) .sidebar .inner-content {
+  @apply p-2;
+}
+:host(.variant-login) .content {
+  @apply order-3 desktop-xs:order-2;
+  @apply items-center desktop-xs:justify-center;
+}
+:host(.variant-login) .content .inner-content {
+  @apply box-border;
+  @apply desktop-xs:py-0 desktop-xs:px-18;
+  @apply w-full tablet:w-content-desktop-login;
+  @apply pt-14 desktop-xs:pt-content-mobile-y;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/layout/layout.component.js

@@ -0,0 +1,47 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Layout {
+  constructor() {
+    /**
+     * Variant of the layout
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-layout variant-${this.variant}` },
+      h("div", { class: "topbar" },
+        h("slot", { name: "topbar" })),
+      h("div", { class: "sidebar" },
+        h("slot", { name: "sidebar" })),
+      h("div", { class: "content" },
+        h("div", { class: "inner-content" },
+          h("slot", { name: "content" })))));
+  }
+  static get is() { return "p-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["layout.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["layout.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'login'",
+        "resolved": "\"default\" | \"login\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of the layout"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/loader/loader.component.css

@@ -0,0 +1,26 @@
+:host .loader {
+  @apply w-[1em] h-[1em] inline-block rounded-round;
+  @apply animate-spin duration-500;
+  @apply border-solid border-2 border-indigo-light border-t-indigo !important;
+}
+:host .loader.color-storm {
+  @apply border-storm-light/40 border-t-storm !important;
+}
+:host .loader.color-white {
+  @apply border-indigo-light/40 border-t-white !important;
+}
+:host .loading-screen {
+  @apply fixed top-0 left-0 w-screen h-screen;
+  @apply flex items-center justify-center;
+  @apply bg-mystic;
+  z-index: 1001;
+}
+:host .loading-screen .content {
+  @apply max-w-xs;
+}
+:host .loading-screen .content .loader-wrapper {
+  @apply w-full flex justify-center;
+}
+:host .loading-screen .content .loader-wrapper .loader {
+  @apply text-4xl;
+} .static{position:static!important}.w-full{width:100%!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{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}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{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}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{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}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{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}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{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}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{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}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{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}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{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}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{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}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{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}.scale-y-flip{--tw-scale-y:-1!important}.transform{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}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important;line-height:1!important}.text-6xl{font-size:3.75rem!important;line-height:1!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}*{box-sizing:border-box}.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/atoms/loader/loader.component.js

@@ -0,0 +1,154 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Loader {
+  constructor() {
+    /**
+     * Wether to show or hide the loader
+     */
+    this.show = true;
+    /**
+     * Variant of loader
+     */
+    this.variant = 'inline';
+    /**
+     * Color of the loader
+     */
+    this.color = 'indigo';
+    this._show = this.show;
+    this._loader = (h("div", { class: `loader color-${this.color}` }));
+  }
+  componentWillRender() {
+    this._checkShow();
+  }
+  componentShouldUpdate() {
+    this._checkShow();
+  }
+  render() {
+    if (!this._show) {
+      return;
+    }
+    if (this.variant === 'full-screen') {
+      return (h(Host, { class: "p-loader variant-full-screen" },
+        h("div", { class: "loading-screen" },
+          h("div", { class: "content" },
+            h("slot", null),
+            h("div", { class: "loader-wrapper" }, this._loader)))));
+    }
+    return (h(Host, { class: `p-loader flex ${this.variant === 'full-width' &&
+        'w-full flex justify-center text-4xl'}` }, this._loader));
+  }
+  _checkShow() {
+    var _a;
+    if (this._showSubscriber) {
+      this._showSubscriber.unsubscribe();
+      this._showSubscriber = null;
+    }
+    if (typeof this.show !== 'boolean') {
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe((show) => (this._show = show));
+      return;
+    }
+    this._show = this.show;
+  }
+  static get is() { return "p-loader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["loader.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["loader.component.css"]
+  }; }
+  static get properties() { return {
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | Observable<boolean>",
+        "resolved": "Observable<boolean> | boolean",
+        "references": {
+          "Observable": {
+            "location": "import",
+            "path": "rxjs"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show or hide the loader"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'inline' | 'full-width' | 'full-screen' | 'modal'",
+        "resolved": "\"full-screen\" | \"full-width\" | \"inline\" | \"modal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of loader"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'inline'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'indigo' | 'white' | 'storm'",
+        "resolved": "\"indigo\" | \"storm\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the loader"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'indigo'"
+    },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal title for modal variant"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal description for modal variant"
+      },
+      "attribute": "modal-description",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-backdrop/modal-backdrop.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply fixed top-0 left-0 z-modal;
+  @apply h-screen w-screen tablet:px-16 desktop-xs:p-16;
+  @apply backdrop-blur-xs bg-storm/50;
+  @apply flex justify-center items-end desktop-xs:items-center;
+  @apply animate-fade-in;
+} .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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/modal-backdrop/modal-backdrop.component.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class ModalBackdrop {
+  render() {
+    return (h(Host, { class: "p-modal-backdrop" },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-backdrop"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-backdrop.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-backdrop.component.css"]
+  }; }
+}

package/dist/collection/components/atoms/modal-body/modal-body.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;
+}
+
+:host(.variant-table) {
+  @apply px-6;
+} .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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/{button/button.component.js → atoms/modal-body/modal-body.component.js}

@@ -1,42 +1,41 @@
 import { Component, h, Host, Prop } from '@stencil/core';
-export class Button {
+export class ModalBody {
   constructor() {
     /**
-     * The variant of the button
+     * The variant of the modal body
      */
-    this.variant = 'primary';
+    this.variant = 'default';
   }
   render() {
-    return (h(Host, null,
-      h("button", { class: `variant-${this.variant}` },
-        h("slot", null))));
+    return (h(Host, { class: `p-modal-body variant-${this.variant}` },
+      h("slot", null)));
   }
-  static get is() { return "p-button"; }
+  static get is() { return "p-modal-body"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["button.component.scss"]
+    "$": ["modal-body.component.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["button.component.css"]
+    "$": ["modal-body.component.css"]
   }; }
   static get properties() { return {
     "variant": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'secondary'",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "'default' | 'table'",
+        "resolved": "\"default\" | \"table\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The variant of the button"
+        "text": "The variant of the modal body"
       },
       "attribute": "variant",
       "reflect": false,
-      "defaultValue": "'primary'"
+      "defaultValue": "'default'"
     }
   }; }
 }

package/dist/collection/components/atoms/modal-container/modal-container.component.css

@@ -0,0 +1,6 @@
+p-modal-container {
+  @apply flex flex-col w-full tablet:w-auto;
+  @apply bg-white rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;
+  @apply overflow-hidden;
+  @apply shadow-4 !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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}

package/dist/collection/components/atoms/modal-container/modal-container.component.js

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+// $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]',
+};
+export class ModalContainer {
+  constructor() {
+    /**
+     * 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)));
+  }
+  static get is() { return "p-modal-container"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-container.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-container.component.css"]
+  }; }
+  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'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-footer/modal-footer.component.css

@@ -0,0 +1,8 @@
+:host {
+  @apply flex flex-col;
+  @apply pb-6 px-6;
+}
+
+:host(.hide-on-mobile) {
+  @apply hidden desktop-xs:flex;
+} .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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/modal-footer/modal-footer.component.js

@@ -0,0 +1,42 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class ModalFooter {
+  constructor() {
+    /**
+     * Wether to show the footer on mobile
+     */
+    this.hideOnMobile = true;
+  }
+  render() {
+    return (h(Host, { class: `p-modal-footer ${this.hideOnMobile && 'hide-on-mobile'}` },
+      h("p-divider", { class: "mb-6 mt-0" }),
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-footer.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-footer.component.css"]
+  }; }
+  static get properties() { return {
+    "hideOnMobile": {
+      "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": "hide-on-mobile",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-header/modal-header.component.css

@@ -0,0 +1,16 @@
+:host {
+  @apply bg-white;
+  @apply desktop-xs:bg-mystic;
+  @apply flex justify-between items-center mx-4 py-4;
+  @apply desktop-xs:mx-0 desktop-xs:px-8 desktop-xs:py-6;
+  @apply text-storm-dark text-xl font-semibold;
+  @apply desktop-xs:text-3xl desktop-xs:font-bold;
+  @apply border-0 border-b border-solid border-b-mystic-medium !important;
+}
+:host .close {
+  @apply flex justify-center items-center w-7 h-7 rounded bg-indigo-light text-storm-vague cursor-pointer;
+  @apply desktop-xs:hidden;
+}
+:host .close:hover {
+  @apply bg-indigo/20;
+} .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}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!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}@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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/atoms/modal-header/modal-header.component.js

@@ -0,0 +1,64 @@
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class ModalHeader {
+  constructor() {
+    /**
+     * Wether to show the close button on mobile
+     */
+    this.showMobileClose = true;
+  }
+  render() {
+    return (h(Host, { class: "p-modal-header" },
+      h("span", null,
+        h("slot", null)),
+      this.showMobileClose && (h("div", { class: "close", onClick: () => this.close.emit() },
+        h("p-icon", { variant: "negative" })))));
+  }
+  static get is() { return "p-modal-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-header.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-header.component.css"]
+  }; }
+  static get properties() { return {
+    "showMobileClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the close button on mobile"
+      },
+      "attribute": "show-mobile-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"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/atoms/pagination-item/pagination-item.component.css

@@ -0,0 +1,16 @@
+:host {
+  @apply h-8 w-8;
+  @apply flex justify-center items-center;
+  @apply font-semibold text-storm-medium text-sm;
+  @apply rounded;
+  @apply cursor-pointer;
+}
+
+:host(:hover),
+:host(:focus) {
+  @apply text-storm;
+}
+
+:host(.active) {
+  @apply text-indigo bg-indigo-light;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}