@paperless/core 0.1.0-alpha.13 → 0.1.0-alpha.131

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\" | \"camera\" | \"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/page-size-select/constants.js

@@ -0,0 +1,2 @@
+export const defaultSize = 12;
+export const defaultSizeOptions = [12, 24, 68, 136];

package/dist/collection/components/molecules/page-size-select/page-size-select.component.js

@@ -0,0 +1,195 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { formatTranslation, getLocaleComponentStrings, } from '../../../utils/localization';
+import { defaultSize, defaultSizeOptions } from './constants';
+export class PageSizeSelect {
+  constructor() {
+    /**
+     * The current page
+     */
+    this.size = defaultSize;
+    /**
+     * The available sizes
+     */
+    this.sizeOptions = defaultSizeOptions;
+    /**
+     * Chevron position
+     */
+    this.chevronPosition = 'start';
+    /**
+     * The size of the button
+     */
+    this.buttonSize = 'small';
+    /**
+     * The template for the data view
+     */
+    this.buttonTemplate = (size) => formatTranslation(this._locales.button, { size });
+    /**
+     * The template for the data view
+     */
+    this.itemTemplate = (size) => formatTranslation(this._locales.item, { size });
+    /**
+     * Locales used for this component
+     */
+    this._locales = {};
+  }
+  componentWillLoad() {
+    this._setLocales();
+  }
+  render() {
+    return (h(Host, { class: "p-page-size-select" },
+      h("p-dropdown", { placement: "top-start", chevronPosition: this.chevronPosition, chevronDirection: "down" },
+        h("p-button", { variant: "secondary", slot: "trigger", size: this.buttonSize }, this.buttonTemplate(this.size)),
+        h("slot", { slot: "items" }, this.sizeOptions.map((option) => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate(option))))))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  _changeSize(s) {
+    if (!s) {
+      return;
+    }
+    this.size = s;
+    this.sizeChange.emit(this.size);
+  }
+  static get is() { return "p-page-size-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "defaultSize"
+    },
+    "sizeOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The available sizes"
+      },
+      "defaultValue": "defaultSizeOptions"
+    },
+    "chevronPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Chevron position"
+      },
+      "attribute": "chevron-position",
+      "reflect": false,
+      "defaultValue": "'start'"
+    },
+    "buttonSize": {
+      "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": "button-size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
+    "buttonTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "templateFunc",
+        "resolved": "(value: number) => string",
+        "references": {
+          "templateFunc": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the data view"
+      },
+      "defaultValue": "(size) =>\n        formatTranslation(this._locales.button, { size })"
+    },
+    "itemTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "templateFunc",
+        "resolved": "(value: number) => string",
+        "references": {
+          "templateFunc": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the data view"
+      },
+      "defaultValue": "(size) =>\n        formatTranslation(this._locales.item, { size })"
+    }
+  }; }
+  static get states() { return {
+    "_locales": {}
+  }; }
+  static get events() { return [{
+      "method": "sizeChange",
+      "name": "sizeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the size changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "localeChanged",
+      "method": "_setLocales",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,3 +1,3 @@
 p-pagination {
   @apply flex;
-}
+} .static{position:static!important}.flex{display:flex!important}.table{display:table!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.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}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.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}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.static{position:static!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}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

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

@@ -1,18 +1,22 @@
-import { Component, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, Watch, } from '@stencil/core';
 export class Pagination {
   constructor() {
     /**
      * The current page
      */
-    this.value = 1;
+    this.page = 1;
     /**
      * 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 = () => {
-      const nextPage = this.value + 1;
+      const nextPage = this.page + 1;
       if (nextPage > this._pages[this._pages.length - 1]) {
         return;
       }
@@ -24,8 +28,8 @@ export class Pagination {
       if (!totalPages) {
         return [];
       }
-      let start = this.value - range;
-      let end = this.value + range;
+      let start = this.page - range;
+      let end = this.page + range;
       if (end > totalPages) {
         end = totalPages;
         start = totalPages - range * 2;
@@ -46,7 +50,7 @@ export class Pagination {
       };
       // Disable page range, display all the pages
       if (range === null) {
-        const p = this._pages.map(p => ({
+        const p = this._pages.map((p) => ({
           type: 'page',
           value: p,
         }));
@@ -106,32 +110,39 @@ 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() : this._nextClick()) }, p.value);
+        return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
       }
       if (p.type === 'ellipsis') {
         return h("p-pagination-item", null, "...");
       }
-      return (h("p-pagination-item", { active: p.value === this.value, onClick: () => this._pageClick(p.value) }, p.value));
+      return (h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
     })));
   }
   pageChangeHandler() {
     this._generate();
   }
   _generate() {
+    var _a;
     this._pages = this._generatePages();
     this._set = this._generateSet();
+    if (this.page > ((_a = this._pages) === null || _a === void 0 ? void 0 : _a.length)) {
+      this._changePage(this._pages.length);
+    }
   }
   _changePage(p) {
     if (!p) {
       return;
     }
-    this.value = p;
+    this.page = p;
+    this.pageChange.emit(this.page);
   }
   _previousClick() {
-    const previousPage = this.value - 1;
+    const previousPage = this.page - 1;
     if (previousPage < this._pages[0]) {
       return;
     }
@@ -152,7 +163,7 @@ export class Pagination {
     "$": ["pagination.component.css"]
   }; }
   static get properties() { return {
-    "value": {
+    "page": {
       "type": "number",
       "mutable": true,
       "complexType": {
@@ -166,8 +177,8 @@ export class Pagination {
         "tags": [],
         "text": "The current page"
       },
-      "attribute": "value",
-      "reflect": false,
+      "attribute": "page",
+      "reflect": true,
       "defaultValue": "1"
     },
     "pageSize": {
@@ -188,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,
@@ -206,8 +235,24 @@ export class Pagination {
       "reflect": false
     }
   }; }
+  static get events() { return [{
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
   static get watchers() { return [{
-      "propName": "value",
+      "propName": "page",
       "methodName": "pageChangeHandler"
     }, {
       "propName": "pageSize",

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('[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/stepper/stepper.component.css

@@ -0,0 +1,12 @@
+:host {
+  @apply flex;
+}
+
+:host([direction=horizontal]) {
+  @apply h-auto items-end;
+}
+
+:host([direction=vertical]) {
+  @apply flex-col flex-wrap items-start;
+  @apply w-full min-h-full;
+} .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{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-mystic-dark{--tw-border-opacity:1!important;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}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}