@paperless/core 0.1.0-alpha.26 → 0.1.0-alpha.260

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

@@ -9,6 +9,10 @@ export class Pagination {
      * The amount of items per page
      */
     this.pageSize = 12;
+    /**
+     * Wether to hide when there is only 1 page available
+     */
+    this.hideOnSinglePage = false;
     this._pages = [];
     this._set = [];
     this._nextClick = () => {
@@ -106,8 +110,8 @@ export class Pagination {
     this._generate();
   }
   render() {
-    var _a;
-    return (h(Host, { class: "p-pagination" }, (_a = this._set) === null || _a === void 0 ? void 0 : _a.map((p) => {
+    var _a, _b;
+    return (h(Host, { class: `p-pagination ${this.hideOnSinglePage && ((_a = this._set) === null || _a === void 0 ? void 0 : _a.length) === 3 && 'hidden'}` }, (_b = this._set) === null || _b === void 0 ? void 0 : _b.map((p) => {
       if (p.type === 'previous' || p.type === 'next') {
         return (h("p-pagination-item", { onClick: () => p.type === 'previous'
             ? this._previousClick()
@@ -120,7 +124,6 @@ export class Pagination {
     })));
   }
   pageChangeHandler() {
-    console.log('pageChangeHandler called');
     this._generate();
   }
   _generate() {
@@ -196,6 +199,24 @@ export class Pagination {
       "reflect": false,
       "defaultValue": "12"
     },
+    "hideOnSinglePage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to hide when there is only 1 page available"
+      },
+      "attribute": "hide-on-single-page",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "total": {
       "type": "number",
       "mutable": false,
@@ -222,7 +243,7 @@ export class Pagination {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Event whenever the page changes"
       },
       "complexType": {
         "original": "number",

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

@@ -0,0 +1,60 @@
+:host {
+  @apply flex;
+}
+:host .content {
+  @apply flex gap-3 items-center w-full;
+}
+:host .content .name {
+  @apply flex flex-col justify-center overflow-hidden;
+}
+:host .content .name > *:nth-child(1) {
+  @apply text-sm text-storm-dark;
+  @apply font-semibold;
+}
+:host .content .name > *:nth-child(2) {
+  @apply text-sm text-storm-vague;
+}
+:host .content .name ::slotted(*) {
+  @apply text-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+:host([size=small]) {
+  @apply h-8;
+}
+
+:host([size=medium]) {
+  @apply h-[3.125rem];
+}
+
+:host([size=large]) {
+  @apply h-16;
+}
+
+:host(.has-dropdown) {
+  @apply cursor-pointer;
+}
+:host(.has-dropdown) .content {
+  @apply p-2 rounded;
+  @apply border border-solid border-mystic-dark !important;
+}
+
+:host(.has-dropdown[size=small]) {
+  @apply h-12;
+}
+
+:host(.has-dropdown[size=medium]) {
+  @apply h-[4.125rem];
+}
+
+:host(.has-dropdown[size=large]) {
+  @apply h-20;
+}
+
+:host(.has-dropdown:hover) .content,
+:host(.active) .content {
+  @apply shadow-4;
+}
+
+:host(.active) .content p-icon {
+  @apply text-indigo;
+} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/profile/profile.component.js

@@ -0,0 +1,95 @@
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+export class Profile {
+  constructor() {
+    /**
+     * The variant of the profile
+     */
+    this.variant = 'user';
+    /**
+     * The size of the profile avatar
+     */
+    this.size = 'small';
+    this._dropdownOpen = false;
+  }
+  componentWillRender() {
+    this._updateAvatar();
+  }
+  render() {
+    const hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
+    const content = this._getContent(hasDropdownSlot);
+    return (h(Host, { class: `p-profile ${hasDropdownSlot && 'has-dropdown'} ${this._dropdownOpen && 'active'}` }, hasDropdownSlot ? (h("p-dropdown", { class: "w-full min-w-0", strategy: "absolute", placement: this.variant === 'user' ? 'top-end' : 'bottom-end', onIsOpen: (ev) => (this._dropdownOpen = ev.detail) },
+      content,
+      h("div", { slot: "items" },
+        h("slot", { name: "dropdown" })))) : (content)));
+  }
+  _getContent(hasDropdownSlot) {
+    return (h("div", { class: "content", slot: "trigger" },
+      h("slot", { name: "avatar" }),
+      h("div", { class: "name" },
+        h("slot", { name: "title" }),
+        h("slot", { name: "subtitle" })),
+      hasDropdownSlot && this._getIcon()));
+  }
+  _updateAvatar() {
+    var _a, _b;
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    if (!avatar) {
+      return;
+    }
+    avatar.variant = (_a = this.variant) !== null && _a !== void 0 ? _a : avatar.variant;
+    avatar.size = (_b = this.size) !== null && _b !== void 0 ? _b : avatar === null || avatar === void 0 ? void 0 : avatar.size;
+  }
+  _getIcon() {
+    return (h("p-icon", { class: "ml-auto", variant: this.variant === 'company' ? 'chevron' : 'more' }));
+  }
+  static get is() { return "p-profile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["profile.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["profile.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'company' | 'user'",
+        "resolved": "\"company\" | \"user\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the profile"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'user'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the profile avatar"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'small'"
+    }
+  }; }
+  static get states() { return {
+    "_dropdownOpen": {}
+  }; }
+  static get elementRef() { return "_el"; }
+}

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

@@ -0,0 +1,6 @@
+:host {
+  @apply flex flex-col;
+}
+:host input.read-only {
+  @apply text-ellipsis;
+} .static{position:static!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{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}.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}