@paperless/core 0.1.0-alpha.3 → 0.1.0-alpha.30

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

@@ -0,0 +1,28 @@
+:host {
+  @apply flex flex-col w-full relative p-4 bg-indigo-light rounded-large;
+}
+:host .header {
+  @apply font-semibold text-storm-dark;
+}
+:host .content {
+  @apply text-sm;
+}
+:host .close {
+  @apply absolute top-2 right-2 cursor-pointer text-storm-vague;
+}
+
+:host(.variant-positive) {
+  @apply bg-positive-light;
+}
+
+:host(.variant-unbiased) {
+  @apply bg-unbiased-light;
+}
+
+:host(.variant-negative) {
+  @apply bg-negative-light;
+}
+
+:host(.has-close) {
+  @apply pr-8;
+}

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

@@ -13,7 +13,7 @@
   @apply fixed top-0 left-0 w-screen h-screen;
   @apply flex items-center justify-center;
   @apply bg-mystic;
-  z-index: 9999;
+  z-index: 1001;
 }
 :host .loading-screen .content {
   @apply max-w-xs;

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

@@ -27,13 +27,14 @@ export class Loader {
       return;
     }
     if (this.variant === 'full-screen') {
-      return (h(Host, { class: "p-loader" },
+      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 ${this.variant === 'full-width' && 'w-100 d-block flex justify-center text-4xl'}` }, 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;
@@ -42,7 +43,7 @@ export class Loader {
       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));
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe((show) => (this._show = show));
       return;
     }
     this._show = this.show;

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/segment-container/segment-container.component.css

@@ -0,0 +1,5 @@
+p-segment-container {
+  @apply flex bg-white rounded;
+  @apply filter drop-shadow-4;
+  @apply h-8 p-1;
+}

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

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

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

@@ -0,0 +1,21 @@
+:host {
+  @apply h-6 flex items-center px-2 rounded font-medium mr-1;
+  @apply text-storm-light text-sm;
+  @apply cursor-pointer;
+}
+
+:host(.variant-icon) {
+  @apply w-6 justify-center px-0;
+}
+
+:host(:hover) {
+  @apply text-storm-medium;
+}
+
+:host(.active) {
+  @apply text-indigo bg-indigo-light;
+}
+
+:host(:last-child) {
+  @apply mr-0;
+}

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

@@ -0,0 +1,107 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class SegmentItem {
+  constructor() {
+    /**
+     * Wether the segment item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-segment-item variant-${this.icon ? 'icon' : 'default'} ${this.active && 'active'}` }, this.icon ? this._getIcon() : h("slot", null)));
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  static get is() { return "p-segment-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["segment-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["segment-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 segment item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the segment item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,16 @@
+p-status {
+  @apply flex items-center;
+  @apply text-sm text-storm-vague font-medium;
+}
+p-status p-icon {
+  @apply mr-2 text-base;
+}
+p-status.variant-positive {
+  @apply text-positive;
+}
+p-status.variant-unbiased {
+  @apply text-unbiased;
+}
+p-status.variant-negative {
+  @apply text-negative;
+}

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

@@ -0,0 +1,128 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Status {
+  constructor() {
+    /**
+     * The variant of the status
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-status variant-${this.variant}
+                }` },
+      this._getIcon(),
+      h("slot", null)));
+  }
+  _getIcon() {
+    const icon = this.icon || this._getVariantIcon();
+    if (!icon) {
+      return;
+    }
+    return (h("p-icon", { variant: icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  _getVariantIcon() {
+    let icon = null;
+    switch (this.variant) {
+      case 'positive':
+        icon = 'checkmark';
+        break;
+      case 'negative':
+        icon = 'negative';
+        break;
+      case 'unbiased':
+        icon = 'clock';
+        break;
+      default:
+        icon = null;
+        break;
+    }
+    return icon;
+  }
+  static get is() { return "p-status"; }
+  static get originalStyleUrls() { return {
+    "$": ["status.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["status.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'positive' | 'unbiased' | 'negative'",
+        "resolved": "\"default\" | \"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the status"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the status"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    }
+  }; }
+}

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

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