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

package/dist/collection/components/atoms/info-panel/info-panel.component.js

@@ -0,0 +1,106 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class InfoPanel {
+  constructor() {
+    /**
+     * The variant of the info panel
+     */
+    this.variant = 'info';
+    /**
+     * Wether the panel can be closed
+     */
+    this.closeable = false;
+  }
+  render() {
+    return (h(Host, { class: `p-info-panel variant-${this.variant} ${this.closeable && 'has-close'}` },
+      h("div", { class: "header" },
+        h("slot", { name: "header" })),
+      h("div", { class: "content" },
+        h("slot", { name: "content" })),
+      this.closeable && (h("div", { class: "close", onClick: () => this._close() },
+        h("p-icon", { variant: "negative" })))));
+  }
+  _close() {
+    this._el.remove();
+  }
+  static get is() { return "p-info-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["info-panel.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["info-panel.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'info' | 'negative' | 'positive' | 'unbiased'",
+        "resolved": "\"info\" | \"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the info panel"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'info'"
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The header of the info panel"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the info panel"
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "closeable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the panel can be closed"
+      },
+      "attribute": "closeable",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

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: 9999;
+}
+: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;
+}

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

@@ -0,0 +1,153 @@
+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" },
+        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-100 d-block 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/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;
+}

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

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class PaginationItem {
+  constructor() {
+    /**
+     * Wether the pagination item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-pagination-item ${this.active && 'active'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-pagination-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["pagination-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pagination-item.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the pagination item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,37 @@
+:host {
+  @apply cursor-pointer inline-block;
+}
+:host .popover {
+  @apply bg-white hidden text-xs font-medium py-2 px-3 rounded drop-shadow-4;
+  max-width: 14.5rem;
+}
+:host .popover.variant-hover {
+  @apply bg-storm text-white py-1;
+}
+:host .popover[data-show] {
+  @apply block;
+}
+:host .popover .arrow,
+:host .popover .arrow::before {
+  background: inherit;
+  @apply absolute w-2 h-2;
+}
+:host .popover .arrow {
+  visibility: hidden;
+}
+:host .popover .arrow::before {
+  @apply visible transform rotate-45;
+  content: "";
+}
+:host .popover[data-popper-placement^=top] > .arrow {
+  @apply -bottom-1;
+}
+:host .popover[data-popper-placement^=bottom] > .arrow {
+  @apply -top-1;
+}
+:host .popover[data-popper-placement^=left] > .arrow {
+  @apply -right-1;
+}
+:host .popover[data-popper-placement^=right] > .arrow {
+  @apply -left-1;
+}

package/dist/collection/components/{tooltip → atoms/tooltip}/tooltip.component.js

@@ -3,60 +3,102 @@ import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
 export class Tooltip {
   constructor() {
     /**
-     * The content of the tooltip
+     * The variant of the popover
      */
-    this.content = null;
+    this.variant = 'hover';
     /**
-     * The content of the tooltip
+     * The content of the popover
+     */
+    this.popover = null;
+    /**
+     * The content of the popover
      */
     this.placement = 'top';
     /**
-     * Wether to force show the tooltip
+     * Wether to show the popover
+     */
+    this.show = false;
+    /**
+     * Wether to someone can manually close the popover
      */
-    this.forceShow = false;
+    this.canManuallyClose = true;
     this._loaded = false;
   }
   componentShouldUpdate() {
     this._setOptions();
-    if (this.forceShow) {
+    if (this._loaded && this.show) {
       this._show();
     }
   }
   render() {
-    return (h(Host, null,
-      h("slot", null),
-      h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
-        this.content,
+    return (h(Host, { class: "p-popover" },
+      h("slot", { name: "content" }),
+      h("div", { class: `popover variant-${this.variant}`, role: "popover", ref: el => this._load(el) },
+        this.popover ? this.popover : h("slot", { name: "popover" }),
         h("div", { class: "arrow", "data-popper-arrow": true }))));
   }
+  clickHandler() {
+    if (this.variant === 'hover') {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      this._show();
+    }
+  }
+  documentClickHandler() {
+    if (this.variant === 'hover' || !this.canManuallyClose) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      this._hide();
+    }
+  }
+  mouseEnterHandler() {
+    if (this.variant === 'click') {
+      return;
+    }
+    this._show();
+  }
+  mouseLeaveHandler() {
+    if (this.show || this.variant === 'click') {
+      return;
+    }
+    this._hide();
+  }
   _show() {
     if (!this._loaded) {
       return;
     }
-    // Make the tooltip visible
-    this._tooltip.setAttribute('data-show', '');
+    // Make the popover visible
+    this._popover.setAttribute('data-show', '');
     // Enable the event listeners
     this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
     // Update its position
     this._popper.update();
   }
   _hide() {
-    if (!this._loaded && !this.forceShow) {
+    if (!this._loaded) {
       return;
     }
-    // Hide the tooltip
-    this._tooltip.removeAttribute('data-show');
+    // Hide the popover
+    this._popover.removeAttribute('data-show');
     // Disable the event listeners
     this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
   }
-  _load(tooltip) {
-    this._tooltip = tooltip;
-    if (tooltip) {
-      this._popper = createPopper(this._el, tooltip);
+  _load(popover) {
+    this._popover = popover;
+    if (popover) {
+      this._popper = createPopper(this._el, popover);
       this._setOptions();
       this._loaded = true;
-      if (this.forceShow) {
-        this._show();
+      if (this.show) {
+        setTimeout(() => this._show(), 100);
       }
     }
   }
@@ -85,7 +127,25 @@ export class Tooltip {
     "$": ["tooltip.component.css"]
   }; }
   static get properties() { return {
-    "content": {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hover' | 'click'",
+        "resolved": "\"click\" | \"hover\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the popover"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'hover'"
+    },
+    "popover": {
       "type": "any",
       "mutable": false,
       "complexType": {
@@ -97,9 +157,9 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
-      "attribute": "content",
+      "attribute": "popover",
       "reflect": false,
       "defaultValue": "null"
     },
@@ -120,13 +180,13 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
       "attribute": "placement",
       "reflect": false,
       "defaultValue": "'top'"
     },
-    "forceShow": {
+    "show": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -138,35 +198,65 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Wether to force show the tooltip"
+        "text": "Wether to show the popover"
       },
-      "attribute": "force-show",
+      "attribute": "show",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "canManuallyClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to someone can manually close the popover"
+      },
+      "attribute": "can-manually-close",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get elementRef() { return "_el"; }
   static get listeners() { return [{
+      "name": "click",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "documentClickHandler",
+      "target": "document",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "mouseenter",
-      "method": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "focus",
-      "method": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
       "name": "mouseleave",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "blur",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/molecules/pagination/pagination.component.css

@@ -0,0 +1,3 @@
+p-pagination {
+  @apply flex;
+}