@paperless/core 0.1.0-alpha.10 → 0.1.0-alpha.100

package/dist/collection/components/molecules/input-group/input-group.component.css

@@ -0,0 +1,204 @@
+:host {
+  @apply flex flex-col w-full;
+}
+:host .input-label {
+  @apply text-xs text-storm-vague font-semibold uppercase tracking-wider;
+}
+:host .input-header {
+  @apply flex gap-2 items-end mb-[2px];
+}
+:host .content {
+  @apply flex;
+}
+:host .content .prefix,
+:host .content .suffix {
+  @apply flex justify-start items-center h-10;
+  @apply text-storm-dark;
+  @apply bg-white px-4 w-full;
+  @apply rounded-large;
+  @apply border border-mystic-dark border-solid !important;
+  @apply outline-0 !important;
+  @apply flex-1 text-storm box-border;
+}
+:host .content .prefix::placeholder,
+:host .content .suffix::placeholder {
+  @apply text-storm-medium;
+}
+:host .content .prefix:focus, :host .content .prefix:focus-visible, :host .content .prefix.focus,
+:host .content .suffix:focus,
+:host .content .suffix:focus-visible,
+:host .content .suffix.focus {
+  @apply border-indigo !important;
+}
+:host .content .prefix {
+  @apply rounded-tr-none rounded-br-none;
+  @apply border-r-0 !important;
+  @apply order-1;
+  @apply pr-2;
+}
+:host .content .suffix {
+  @apply rounded-tl-none rounded-bl-none;
+  @apply border-l-0 !important;
+  @apply order-3;
+  @apply pl-2;
+}
+:host .content ::slotted(input[type=text].p-input),
+:host .content ::slotted(input[type=number].p-input),
+:host .content ::slotted(input[type=date].p-input),
+:host .content ::slotted(input[type=month].p-input),
+:host .content ::slotted(input[type=datetime-local].p-input),
+:host .content ::slotted(input[type=time].p-input),
+:host .content ::slotted(input[type=tel].p-input),
+:host .content ::slotted(input[type=password].p-input),
+:host .content ::slotted(input[type=email].p-input) {
+  @apply order-2;
+}
+:host .content .prefix + ::slotted(input[type=text].p-input),
+:host .content .prefix + ::slotted(input[type=number].p-input),
+:host .content .prefix + ::slotted(input[type=date].p-input),
+:host .content .prefix + ::slotted(input[type=month].p-input),
+:host .content .prefix + ::slotted(input[type=datetime-local].p-input),
+:host .content .prefix + ::slotted(input[type=time].p-input),
+:host .content .prefix + ::slotted(input[type=tel].p-input),
+:host .content .prefix + ::slotted(input[type=password].p-input),
+:host .content .prefix + ::slotted(input[type=email].p-input) {
+  @apply rounded-tl-none rounded-bl-none !important;
+  @apply flex-auto;
+  @apply border-l-0 pl-0 !important;
+}
+:host .content .suffix + ::slotted(input[type=text].p-input),
+:host .content .suffix + ::slotted(input[type=number].p-input),
+:host .content .suffix + ::slotted(input[type=date].p-input),
+:host .content .suffix + ::slotted(input[type=month].p-input),
+:host .content .suffix + ::slotted(input[type=datetime-local].p-input),
+:host .content .suffix + ::slotted(input[type=time].p-input),
+:host .content .suffix + ::slotted(input[type=tel].p-input),
+:host .content .suffix + ::slotted(input[type=password].p-input),
+:host .content .suffix + ::slotted(input[type=email].p-input) {
+  @apply rounded-tr-none rounded-br-none !important;
+  @apply flex-auto;
+  @apply border-r-0 pr-0 !important;
+}
+
+:host(.focused) .prefix,
+:host(.focused) .suffix,
+:host([focused]) .prefix,
+:host([focused]) .suffix,
+:host(:focus-within) .prefix,
+:host(:focus-within) .suffix {
+  @apply border-indigo !important;
+  @apply text-indigo;
+}
+:host(.focused) ::slotted(input[type=text].p-input),
+:host(.focused) ::slotted(input[type=number].p-input),
+:host(.focused) ::slotted(input[type=date].p-input),
+:host(.focused) ::slotted(input[type=month].p-input),
+:host(.focused) ::slotted(input[type=datetime-local].p-input),
+:host(.focused) ::slotted(input[type=time].p-input),
+:host(.focused) ::slotted(input[type=tel].p-input),
+:host(.focused) ::slotted(input[type=password].p-input),
+:host(.focused) ::slotted(input[type=email].p-input),
+:host([focused]) ::slotted(input[type=text].p-input),
+:host([focused]) ::slotted(input[type=number].p-input),
+:host([focused]) ::slotted(input[type=date].p-input),
+:host([focused]) ::slotted(input[type=month].p-input),
+:host([focused]) ::slotted(input[type=datetime-local].p-input),
+:host([focused]) ::slotted(input[type=time].p-input),
+:host([focused]) ::slotted(input[type=tel].p-input),
+:host([focused]) ::slotted(input[type=password].p-input),
+:host([focused]) ::slotted(input[type=email].p-input),
+:host(:focus-within) ::slotted(input[type=text].p-input),
+:host(:focus-within) ::slotted(input[type=number].p-input),
+:host(:focus-within) ::slotted(input[type=date].p-input),
+:host(:focus-within) ::slotted(input[type=month].p-input),
+:host(:focus-within) ::slotted(input[type=datetime-local].p-input),
+:host(:focus-within) ::slotted(input[type=time].p-input),
+:host(:focus-within) ::slotted(input[type=tel].p-input),
+:host(:focus-within) ::slotted(input[type=password].p-input),
+:host(:focus-within) ::slotted(input[type=email].p-input) {
+  @apply border-indigo !important;
+}
+
+:host(.error) .prefix,
+:host(.error) .suffix,
+:host([error]) .prefix,
+:host([error]) .suffix {
+  @apply text-negative-dark;
+  @apply border-negative !important;
+  @apply text-negative;
+}
+:host(.error) .prefix::placeholder,
+:host(.error) .suffix::placeholder,
+:host([error]) .prefix::placeholder,
+:host([error]) .suffix::placeholder {
+  @apply text-negative-light;
+}
+:host(.error) ::slotted(input[type=text].p-input),
+:host(.error) ::slotted(input[type=number].p-input),
+:host(.error) ::slotted(input[type=date].p-input),
+:host(.error) ::slotted(input[type=month].p-input),
+:host(.error) ::slotted(input[type=datetime-local].p-input),
+:host(.error) ::slotted(input[type=time].p-input),
+:host(.error) ::slotted(input[type=tel].p-input),
+:host(.error) ::slotted(input[type=password].p-input),
+:host(.error) ::slotted(input[type=email].p-input),
+:host([error]) ::slotted(input[type=text].p-input),
+:host([error]) ::slotted(input[type=number].p-input),
+:host([error]) ::slotted(input[type=date].p-input),
+:host([error]) ::slotted(input[type=month].p-input),
+:host([error]) ::slotted(input[type=datetime-local].p-input),
+:host([error]) ::slotted(input[type=time].p-input),
+:host([error]) ::slotted(input[type=tel].p-input),
+:host([error]) ::slotted(input[type=password].p-input),
+:host([error]) ::slotted(input[type=email].p-input) {
+  @apply text-negative-dark;
+  @apply border-negative !important;
+}
+:host(.error) ::slotted(input[type=text].p-input)::placeholder,
+:host(.error) ::slotted(input[type=number].p-input)::placeholder,
+:host(.error) ::slotted(input[type=date].p-input)::placeholder,
+:host(.error) ::slotted(input[type=month].p-input)::placeholder,
+:host(.error) ::slotted(input[type=datetime-local].p-input)::placeholder,
+:host(.error) ::slotted(input[type=time].p-input)::placeholder,
+:host(.error) ::slotted(input[type=tel].p-input)::placeholder,
+:host(.error) ::slotted(input[type=password].p-input)::placeholder,
+:host(.error) ::slotted(input[type=email].p-input)::placeholder,
+:host([error]) ::slotted(input[type=text].p-input)::placeholder,
+:host([error]) ::slotted(input[type=number].p-input)::placeholder,
+:host([error]) ::slotted(input[type=date].p-input)::placeholder,
+:host([error]) ::slotted(input[type=month].p-input)::placeholder,
+:host([error]) ::slotted(input[type=datetime-local].p-input)::placeholder,
+:host([error]) ::slotted(input[type=time].p-input)::placeholder,
+:host([error]) ::slotted(input[type=tel].p-input)::placeholder,
+:host([error]) ::slotted(input[type=password].p-input)::placeholder,
+:host([error]) ::slotted(input[type=email].p-input)::placeholder {
+  @apply text-negative-light;
+}
+
+:host(.disabled) .prefix,
+:host(.disabled) .suffix,
+:host([disabled]) .prefix,
+:host([disabled]) .suffix {
+  @apply opacity-40;
+}
+:host(.disabled) ::slotted(input[type=text].p-input),
+:host(.disabled) ::slotted(input[type=number].p-input),
+:host(.disabled) ::slotted(input[type=date].p-input),
+:host(.disabled) ::slotted(input[type=month].p-input),
+:host(.disabled) ::slotted(input[type=datetime-local].p-input),
+:host(.disabled) ::slotted(input[type=time].p-input),
+:host(.disabled) ::slotted(input[type=tel].p-input),
+:host(.disabled) ::slotted(input[type=password].p-input),
+:host(.disabled) ::slotted(input[type=email].p-input),
+:host([disabled]) ::slotted(input[type=text].p-input),
+:host([disabled]) ::slotted(input[type=number].p-input),
+:host([disabled]) ::slotted(input[type=date].p-input),
+:host([disabled]) ::slotted(input[type=month].p-input),
+:host([disabled]) ::slotted(input[type=datetime-local].p-input),
+:host([disabled]) ::slotted(input[type=time].p-input),
+:host([disabled]) ::slotted(input[type=tel].p-input),
+:host([disabled]) ::slotted(input[type=password].p-input),
+:host([disabled]) ::slotted(input[type=email].p-input) {
+  @apply opacity-40;
+  pointer-events: none;
+} .static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}*{box-sizing:border-box}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/input-group/input-group.component.js

@@ -0,0 +1,264 @@
+import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+export class InputGroup {
+  constructor() {
+    /**
+     * Wether the input group is disabled
+     */
+    this.disabled = false;
+    /**
+     * Wether the input group is focused
+     */
+    this.focused = false;
+    this._showTooltip = false;
+    this._forceShowTooltip = false;
+  }
+  render() {
+    var _a;
+    const hasHelperSlot = !!this._el.querySelector('[slot="helper"]');
+    const hasLabelSlot = !!this._el.querySelector('[slot="label"]');
+    const hasPrefixSlot = !!this._el.querySelector('[slot="prefix"]');
+    const hasSuffixSlot = !!this._el.querySelector('[slot="suffix"]');
+    const hasHeaderSlot = !!this._el.querySelector('[slot="header"]');
+    const helper = hasHelperSlot ? h("slot", { name: "helper" }) : this.helper;
+    const label = hasLabelSlot ? h("slot", { name: "label" }) : this.label;
+    const prefix = hasPrefixSlot ? h("slot", { name: "prefix" }) : this.prefix;
+    const suffix = hasSuffixSlot ? h("slot", { name: "suffix" }) : this.suffix;
+    const errorAndErrorIsNotBoolean = this.error &&
+      typeof this.error === 'string' &&
+      this.error !== 'true';
+    return (h(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'}` },
+      h("div", { class: "flex justify-between items-end" },
+        label && h("div", { class: "input-label" }, label),
+        (helper || hasHeaderSlot) && (h("div", { class: "input-header" },
+          hasHeaderSlot && h("slot", { name: "header" }),
+          helper && (h("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: "top-end" }, helper))))),
+      h("div", { class: "content" },
+        (prefix || this.icon) && (h("div", { class: "prefix" }, this.icon ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))),
+        (suffix || errorAndErrorIsNotBoolean) && (h("div", { class: "suffix" }, errorAndErrorIsNotBoolean ? (h("p-tooltip", { variant: "error", popover: this.error, show: this._forceShowTooltip, onIsOpen: (ev) => (this._showTooltip = ev.detail) },
+          h("p-icon", { class: `${this._showTooltip
+              ? 'text-negative'
+              : 'text-negative-light'} hover:text-negative`, slot: "content", variant: "explanation" }))) : (suffix))),
+        h("slot", { name: "input" }))));
+  }
+  handleFocusIn() {
+    this._forceShowTooltip = true;
+  }
+  handleFocusOut() {
+    this._forceShowTooltip = false;
+  }
+  static get is() { return "p-input-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./input-group.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["input-group.component.css"]
+  }; }
+  static get properties() { return {
+    "prefix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The prefix of the input group"
+      },
+      "attribute": "prefix",
+      "reflect": false
+    },
+    "suffix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The suffix of the input group"
+      },
+      "attribute": "suffix",
+      "reflect": 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\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../../atoms/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
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the input group"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group"
+      },
+      "attribute": "helper",
+      "reflect": false
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group"
+      },
+      "attribute": "error",
+      "reflect": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input group is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input group is focused"
+      },
+      "attribute": "focused",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "_showTooltip": {},
+    "_forceShowTooltip": {}
+  }; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "focusin",
+      "method": "handleFocusIn",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusout",
+      "method": "handleFocusOut",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/molecules/navigation-item/navigation-item.component.css

@@ -0,0 +1,22 @@
+:host {
+  @apply w-full inline-block mb-1;
+}
+:host > a {
+  @apply w-full h-8 px-2 cursor-pointer rounded-large no-underline;
+  @apply flex items-center gap-2;
+  @apply text-storm font-semibold;
+  @apply hover:bg-indigo-light;
+}
+:host > a > p-icon {
+  @apply text-storm;
+}
+:host > a > p-counter {
+  @apply ml-auto;
+}
+
+:host(.active) > a {
+  @apply text-indigo bg-indigo-light;
+}
+:host(.active) > a > p-icon {
+  @apply text-indigo;
+} .static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/navigation-item/navigation-item.component.js

@@ -0,0 +1,118 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class NavigationItem {
+  constructor() {
+    /**
+     * Wether the navigation item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-navigation-item ${this.active && 'active'}` },
+      h("a", { href: this.href, target: this.target },
+        this.icon && h("p-icon", { variant: this.icon }),
+        h("span", { class: this.counter && 'has-counter' },
+          h("slot", null)),
+        this.counter && (h("p-counter", { variant: "negative" }, this.counter)))));
+  }
+  static get is() { return "p-navigation-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["navigation-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["navigation-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 navigation 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\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "counter": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "counter",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The href of the navigation item"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The target of the navigation item"
+      },
+      "attribute": "target",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,3 @@
+p-pagination {
+  @apply flex;
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}