@paperless/core 0.1.0-alpha.2 → 0.1.0-alpha.20

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

@@ -1,18 +1,58 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { Component, Event, h, Host, Listen, Prop } from '@stencil/core';
 export class Button {
   constructor() {
     /**
      * The variant of the button
      */
     this.variant = 'primary';
+    /**
+     * The size of the button
+     */
+    this.size = 'medium';
+    /**
+     * Wether to show a loader or not
+     */
+    this.loading = false;
+    /**
+     * Wether the button is disabled
+     */
+    this.disabled = false;
+    /**
+     * Icon position
+     */
+    this.iconPosition = 'end';
   }
   render() {
-    return (h(Host, null,
-      h("button", { class: `variant-${this.variant}` },
-        h("slot", null))));
+    let loaderColor = 'white';
+    switch (this.variant) {
+      case 'secondary':
+        loaderColor = 'storm';
+        break;
+      case 'text':
+        loaderColor = 'indigo';
+        break;
+    }
+    const VariableTag = this.variant === 'text' ? 'a' : 'button';
+    return (h(Host, { class: "p-button" },
+      h(VariableTag, { class: `variant-${this.variant} size-${this.size} icon-position-${this.iconPosition}`, disabled: this.disabled, href: this.href, target: this.target },
+        this.icon && this.iconPosition === 'start' && this._getIcon(),
+        h("slot", null),
+        this.icon && this.iconPosition === 'end' && this._getIcon(),
+        this.loading && h("p-loader", { color: loaderColor }))));
+  }
+  handleClick(ev) {
+    if (this.loading || this.disabled) {
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate });
   }
   static get is() { return "p-button"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["button.component.scss"]
   }; }
@@ -24,8 +64,8 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'secondary'",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "'primary' | 'secondary' | 'text'",
+        "resolved": "\"primary\" | \"secondary\" | \"text\"",
         "references": {}
       },
       "required": false,
@@ -37,6 +77,200 @@ export class Button {
       "attribute": "variant",
       "reflect": false,
       "defaultValue": "'primary'"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href in case of \"text\" version"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Target in case of \"text\" version"
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium'",
+        "resolved": "\"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the button"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show a loader or not"
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"grid\" | \"headset\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"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 button"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon position"
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "'end'"
+    },
+    "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
     }
   }; }
+  static get events() { return [{
+      "method": "onClick",
+      "name": "onClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Button click event"
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
 }

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

@@ -0,0 +1,5 @@
+:host {
+  @apply h-4 px-2 bg-indigo rounded-xlarge;
+  @apply text-xs leading-3 text-white font-bold uppercase;
+  @apply flex justify-center items-center;
+}

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

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

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

@@ -0,0 +1,3 @@
+:host {
+  @apply h-px bg-mystic-medium my-2 w-full;
+}

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

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

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

@@ -0,0 +1,7 @@
+:host .helper {
+  @apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;
+  background-image: url(/assets/images/helper/helper.svg);
+}
+:host .helper:hover {
+  background-image: url(/assets/images/helper/helper-hover.svg);
+}

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

@@ -0,0 +1,18 @@
+import { Component, h, Host } from '@stencil/core';
+export class Helper {
+  render() {
+    return (h(Host, { class: "p-helper" },
+      h("p-tooltip", null,
+        h("div", { slot: "popover" },
+          h("slot", null)),
+        h("div", { slot: "content", class: "helper" }))));
+  }
+  static get is() { return "p-helper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper.component.css"]
+  }; }
+}

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

@@ -2,10 +2,6 @@ import { Component, h, Host, Prop } from '@stencil/core';
 import icons from '../../../utils/icons';
 export class Icon {
   constructor() {
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */
@@ -40,15 +36,14 @@ export class Icon {
           }
         }
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
         "text": "The icon the be displayed"
       },
       "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     },
     "size": {
       "type": "string",

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

@@ -1,12 +1,6 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import illustrations from '../../../utils/illustrations';
 export class Illustration {
-  constructor() {
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
-  }
   render() {
     const illustration = illustrations[this.variant];
     return h(Host, { class: "p-illustration block", innerHTML: illustration });
@@ -25,15 +19,14 @@ export class Illustration {
           }
         }
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
         "text": "The icon the be displayed"
       },
       "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     }
   }; }
 }

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.js

@@ -33,7 +33,7 @@ export class Loader {
             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-100 d-block flex justify-center text-4xl'}` }, this._loader);
   }
   _checkShow() {
     var _a;

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

@@ -1,34 +1,37 @@
 :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 {
+  @apply bg-storm text-white py-1;
+}
+: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;
 }