@paperless/core 0.1.0-alpha.7 → 0.1.0-alpha.70

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

@@ -0,0 +1,112 @@
+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", { class: "flex", 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": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../utils/types"
+          }
+        }
+      },
+      "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;
+} .static{position:static!important}

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

@@ -0,0 +1,133 @@
+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": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../utils/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,59 @@
+:host {
+  @apply flex items-end justify-center relative;
+}
+:host .content {
+  @apply whitespace-nowrap;
+  @apply text-sm font-semibold text-storm-light;
+}
+:host .circle {
+  @apply transition duration-500 ease-in-out;
+  @apply flex items-center justify-center;
+  @apply rounded-round h-4 w-4;
+  @apply bg-mystic-dark text-white;
+}
+:host .circle p-icon {
+  @apply flex !important;
+  font-size: 0.625rem;
+}
+
+:host([direction=horizontal]) {
+  @apply h-10;
+}
+:host([direction=horizontal]) .content {
+  @apply absolute top-0;
+  @apply order-1;
+}
+:host([direction=horizontal]) .circle {
+  @apply order-2;
+}
+
+:host([direction=vertical]) {
+  @apply h-4;
+}
+:host([direction=vertical]) .content {
+  @apply ml-4 order-2;
+}
+:host([direction=vertical]) .circle {
+  @apply order-1;
+}
+
+:host([active]) .content,
+:host([finished]) .content {
+  @apply text-indigo;
+}
+:host([active]) .circle,
+:host([finished]) .circle {
+  @apply bg-indigo;
+}
+
+:host([direction=horizontal][align=start]) .content {
+  @apply left-0;
+}
+
+:host([direction=horizontal][align=end]) .content {
+  @apply right-0;
+}
+
+:host([direction=horizontal][align=center]) .content {
+  @apply left-1/2 text-center transform -translate-x-1/2;
+} .static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{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}.-translate-x-1\/2{--tw-translate-x:-50%!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}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}.border-mystic-dark{border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}

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

@@ -0,0 +1,109 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperItem {
+  constructor() {
+    /**
+     * The alignment of the step content
+     */
+    this.align = 'center';
+    /**
+     * The direction of the stepper step
+     */
+    this.direction = 'horizontal';
+    /**
+     * Wether the step is finished
+     */
+    this.finished = false;
+    /**
+     * Wether the step is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: "p-stepper-item" },
+      h("div", { class: "content" },
+        h("slot", null)),
+      h("div", { class: "circle" }, this.finished && h("p-icon", { variant: "checkmark" }))));
+  }
+  static get is() { return "p-stepper-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-item.component.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'center' | 'end'",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The alignment of the step content"
+      },
+      "attribute": "align",
+      "reflect": true,
+      "defaultValue": "'center'"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper step"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    },
+    "finished": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is finished"
+      },
+      "attribute": "finished",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the step is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/atoms/stepper-line/stepper-line.component.css

@@ -0,0 +1,18 @@
+:host {
+  @apply flex-auto;
+  @apply transition duration-500 ease-in-out;
+  @apply block;
+  @apply bg-mystic-dark;
+}
+
+:host([direction=horizontal]) {
+  @apply h-[2px] mb-[calc(.5rem-1px)];
+}
+
+:host([direction=vertical]) {
+  @apply w-[2px] ml-[calc(.5rem-1px)];
+}
+
+:host([active]) {
+  @apply bg-indigo;
+} .static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{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}.-translate-x-1\/2{--tw-translate-x:-50%!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}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}.border-mystic-dark{border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}

package/dist/collection/components/atoms/stepper-line/stepper-line.component.js

@@ -0,0 +1,62 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class StepperLine {
+  constructor() {
+    /**
+     * Wether the line is active
+     */
+    this.active = false;
+    /**
+     * The direction of the stepper line
+     */
+    this.direction = 'horizontal';
+  }
+  render() {
+    return h(Host, { class: "p-stepper-line" });
+  }
+  static get is() { return "p-stepper-line"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper-line.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper-line.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 line is active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'horizontal' | 'vertical'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The direction of the stepper line"
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/tab-group/tab-group.component.css

@@ -0,0 +1,9 @@
+:host {
+  @apply flex w-full flex-col relative;
+}
+:host .content {
+  @apply flex gap-5 w-full z-10;
+}
+:host p-divider {
+  @apply m-0 absolute bottom-0 left-0 w-full;
+} .static{position:static!important}

package/dist/collection/components/atoms/tab-group/tab-group.component.js

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

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

@@ -0,0 +1,10 @@
+:host {
+  @apply flex items-center h-10;
+  @apply font-semibold text-storm-medium;
+  @apply cursor-pointer;
+  @apply border-0 border-b-2 border-transparent !important;
+}
+
+:host(.active) {
+  @apply border-indigo text-indigo !important;
+} .static{position:static!important}

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

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class TabItem {
+  constructor() {
+    /**
+     * Wether the tab item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-tab-item ${this.active && 'active'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-tab-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tab-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tab-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 tab item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,51 @@
+:host {
+  @apply flex gap-1 items-center px-3 rounded;
+  @apply h-[1.375rem];
+  @apply text-xs font-semibold;
+}
+:host .circle {
+  @apply hidden rounded-round h-2 w-2;
+}
+
+:host([circle]) {
+  @apply pl-2;
+}
+:host([circle]) .circle {
+  @apply block;
+}
+
+:host([circle=false]) .circle {
+  @apply hidden;
+}
+
+:host([variant=info]) {
+  @apply bg-sky/20;
+  @apply text-sky;
+}
+:host([variant=info]) .circle {
+  @apply bg-sky;
+}
+
+:host([variant=positive]) {
+  @apply bg-positive/20;
+  @apply text-positive;
+}
+:host([variant=positive]) .circle {
+  @apply bg-positive;
+}
+
+:host([variant=unbiased]) {
+  @apply bg-unbiased/20;
+  @apply text-unbiased;
+}
+:host([variant=unbiased]) .circle {
+  @apply bg-unbiased;
+}
+
+:host([variant=negative]) {
+  @apply bg-negative/20;
+  @apply text-negative;
+}
+:host([variant=negative]) .circle {
+  @apply bg-negative;
+} .static{position:static!important}