@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/components/p-navigation-item.js

@@ -1,87 +1,100 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
-import { d as defineCustomElement$3 } from './badge.component.js';
-import { d as defineCustomElement$2 } from './icon.component.js';
+import { c as cn } from './cn.js';
+import { d as defineCustomElement$4 } from './badge.component.js';
+import { d as defineCustomElement$3 } from './icon.component.js';
+import { d as defineCustomElement$2 } from './loader.component.js';
 
-const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const navigationItemComponentCss = "*{box-sizing:border-box}.static{position:static!important}.ml-auto{margin-left:auto!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-\\[inherit\\]{width:inherit!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.pl-1{padding-left:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.hover\\:bg-off-white:hover{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal-500:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const PNavigationItemStyle0 = navigationItemComponentCss;
 
 const navigationItem = cva([
-  'h-8 w-[inherit]',
-  'flex items-center gap-2',
-  'text-black-teal-400 hover:text-black-teal-500',
-  'rounded-lg',
-  'py-1 px-2',
-  'text-sm font-medium',
-  'cursor-pointer',
+    'h-8 w-[inherit]',
+    'flex items-center gap-2',
+    'text-black-teal-400 hover:text-black-teal-500',
+    'rounded-lg',
+    'py-1 px-2',
+    'text-sm font-medium',
+    'cursor-pointer',
 ], {
-  variants: {
-    active: {
-      false: ['hover:bg-off-white'],
-      true: ['bg-off-white-600 text-black-teal-500 font-semibold'],
+    variants: {
+        active: {
+            false: ['hover:bg-off-white'],
+            true: ['bg-off-white-600 text-black-teal-500 font-semibold'],
+        },
+        icon: {
+            false: false,
+            true: ['pl-1'],
+        },
     },
-    icon: {
-      false: false,
-      true: ['pl-1'],
-    },
-  },
 });
 const navigationItemIconContainer = cva(['flex h-6 aspect-branding items-center justify-center rounded-full'], {
-  variants: {
-    active: {
-      false: false,
-      true: ['bg-supportive-lilac'],
+    variants: {
+        active: {
+            false: false,
+            true: ['bg-supportive-lilac'],
+        },
     },
-  },
 });
 const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.icon = undefined;
-    this.active = false;
-    this.as = 'a';
-    this.counter = undefined;
-    this.href = undefined;
-    this.target = undefined;
-  }
-  render() {
-    const TagType = this.as;
-    return (h(Host, { class: 'p-navigation-item inline-block' }, h(TagType, { class: navigationItem({
-        active: this.active,
-        icon: !!this.icon,
-      }), href: this.href, target: this.target }, h("div", { class: navigationItemIconContainer({ active: this.active }) }, h("p-icon", { variant: this.icon })), h("span", { class: this.counter && 'has-counter' }, h("slot", null)), !!this.counter && this.counter !== '0' && (h("p-badge", null, this.counter)))));
-  }
-  static get style() { return navigationItemComponentCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.icon = undefined;
+        this.active = false;
+        this.loading = false;
+        this.as = 'a';
+        this.counter = undefined;
+        this.href = undefined;
+        this.target = undefined;
+        this.class = undefined;
+    }
+    render() {
+        const TagType = this.as;
+        const active = this.active || this.class?.includes('active');
+        return (h(Host, { key: 'd87d8e76973078637e8c2d184b495d630f4fd556', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: 'db37312225ef973cb75c71b0b0b918ed2f8799c3', class: navigationItem({
+                icon: !!this.icon,
+                active,
+            }), href: this.href, target: this.target }, h("div", { key: '5f56c4395729260e25e6a71da5ac716b09193bd5', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '0cc4e9b0f0cdf1ad574ef8ba5b8b80f3ce376d3f', variant: this.icon })), h("span", { key: 'a52984e8227ec3af005d1b240944ff85ba58a37e', class: this.counter && 'has-counter' }, h("slot", { key: 'eaa1a3e88f0d7517fc383d96fae3194522e4efb1' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'eb7b69d6235d7f1c72ca1045255d70764a9b179d' }, this.counter)), !!this.loading && h("p-loader", { key: '081c5f8b49dfb3a80429815de87f717cd70e39ae', class: 'ml-auto' }))));
+    }
+    static get style() { return PNavigationItemStyle0; }
 }, [4, "p-navigation-item", {
-    "icon": [1],
-    "active": [4],
-    "as": [1],
-    "counter": [8],
-    "href": [1],
-    "target": [1]
-  }]);
+        "icon": [1],
+        "active": [4],
+        "loading": [4],
+        "as": [1],
+        "counter": [8],
+        "href": [1],
+        "target": [1],
+        "class": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["p-navigation-item", "p-badge", "p-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-navigation-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, NavigationItem);
-      }
-      break;
-    case "p-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "p-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-navigation-item", "p-badge", "p-icon", "p-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-navigation-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavigationItem);
+            }
+            break;
+        case "p-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "p-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "p-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const PNavigationItem = NavigationItem;

package/dist/components/p-navigation-item.js.map

@@ -1 +1 @@
-{"file":"p-navigation-item.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,i/CAAi/C;;ACIphD,MAAM,cAAc,GAAG,GAAG,CACzB;EACC,iBAAiB;EACjB,yBAAyB;EACzB,+CAA+C;EAC/C,YAAY;EACZ,WAAW;EACX,qBAAqB;EACrB,gBAAgB;CAChB,EACD;EACC,QAAQ,EAAE;IACT,MAAM,EAAE;MACP,KAAK,EAAE,CAAC,oBAAoB,CAAC;MAC7B,IAAI,EAAE,CAAC,oDAAoD,CAAC;KAC5D;IACD,IAAI,EAAE;MACL,KAAK,EAAE,KAAK;MACZ,IAAI,EAAE,CAAC,MAAM,CAAC;KACd;GACD;CACD,CACD,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,CACtC,CAAC,mEAAmE,CAAC,EACrE;EACC,QAAQ,EAAE;IACT,MAAM,EAAE;MACP,KAAK,EAAE,KAAK;MACZ,IAAI,EAAE,CAAC,qBAAqB,CAAC;KAC7B;GACD;CACD,CACD,CAAC;MAOW,cAAc;;;;;kBASA,KAAK;cAKV,GAAG;;;;;EAiBxB,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;IACxB,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,IAC3C,EAAC,OAAO,IACP,KAAK,EAAE,cAAc,CAAC;QACrB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;OACjB,CAAC,EACF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,WAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,IAC/D,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAEN,YAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzC,eAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtC,mBAAU,IAAI,CAAC,OAAO,CAAW,CACjC,CACQ,CACJ,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":["// :host {\n// \t@apply mb-1 inline-block w-full;\n//\n// \t> a {\n// \t\t@apply h-8 w-full cursor-pointer rounded-lg px-2 no-underline;\n// \t\t@apply flex items-center gap-2;\n// \t\t@apply font-semibold text-storm;\n//\n// \t\t@apply hover:bg-indigo-light;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-storm;\n// \t\t}\n//\n// \t\t> span {\n// \t\t\t@apply mr-auto;\n// \t\t}\n// \t}\n// }\n//\n// :host(.active) {\n// \t> a {\n// \t\t@apply bg-indigo-light text-indigo;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\nconst navigationItem = cva(\n\t[\n\t\t'h-8 w-[inherit]',\n\t\t'flex items-center gap-2',\n\t\t'text-black-teal-400 hover:text-black-teal-500',\n\t\t'rounded-lg',\n\t\t'py-1 px-2',\n\t\t'text-sm font-medium',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: ['hover:bg-off-white'],\n\t\t\t\ttrue: ['bg-off-white-600 text-black-teal-500 font-semibold'],\n\t\t\t},\n\t\t\ticon: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['pl-1'],\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst navigationItemIconContainer = cva(\n\t['flex h-6 aspect-branding items-center justify-center rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['bg-supportive-lilac'],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: './navigation-item.component.scss',\n\tshadow: false,\n})\nexport class NavigationItem {\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon!: IconVariant;\n\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The element to use for the navigation item\n\t */\n\t@Prop() as: string = 'a';\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\trender() {\n\t\tconst TagType = this.as;\n\t\treturn (\n\t\t\t<Host class='p-navigation-item inline-block'>\n\t\t\t\t<TagType\n\t\t\t\t\tclass={navigationItem({\n\t\t\t\t\t\tactive: this.active,\n\t\t\t\t\t\ticon: !!this.icon,\n\t\t\t\t\t})}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t>\n\t\t\t\t\t<div class={navigationItemIconContainer({ active: this.active })}>\n\t\t\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{!!this.counter && this.counter !== '0' && (\n\t\t\t\t\t\t<p-badge>{this.counter}</p-badge>\n\t\t\t\t\t)}\n\t\t\t\t</TagType>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-navigation-item.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,qhDAAqhD,CAAC;AACzjD,8BAAe,0BAA0B;;ACIzC,MAAM,cAAc,GAAG,GAAG,CACzB;IACC,iBAAiB;IACjB,yBAAyB;IACzB,+CAA+C;IAC/C,YAAY;IACZ,WAAW;IACX,qBAAqB;IACrB,gBAAgB;CAChB,EACD;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,CAAC,oBAAoB,CAAC;YAC7B,IAAI,EAAE,CAAC,oDAAoD,CAAC;SAC5D;QACD,IAAI,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,MAAM,CAAC;SACd;KACD;CACD,CACD,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,CACtC,CAAC,mEAAmE,CAAC,EACrE;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,CAAC,qBAAqB,CAAC;SAC7B;KACD;CACD,CACD,CAAC;MAOW,cAAc;;;;;sBASA,KAAK;uBAKJ,KAAK;kBAKX,GAAG;;;;;;IAsBxB,MAAM;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAE7D,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,gCAAgC,EAAE,IAAI,CAAC,KAAK,CAAC,IAC5D,EAAC,OAAO,qDACP,KAAK,EAAE,cAAc,CAAC;gBACrB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACjB,MAAM;aACN,CAAC,EACF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,4DAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,IAClD,+DAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,EAEN,6DAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,IACzC,8DAAQ,CACF,EAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,KACtC,kEAAU,IAAI,CAAC,OAAO,CAAW,CACjC,EAEA,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,KAAK,EAAC,SAAS,GAAG,CACtC,CACJ,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/navigation-item/navigation-item.component.scss?tag=p-navigation-item","src/components/molecules/navigation-item/navigation-item.component.tsx"],"sourcesContent":["// :host {\n// \t@apply mb-1 inline-block w-full;\n//\n// \t> a {\n// \t\t@apply h-8 w-full cursor-pointer rounded-lg px-2 no-underline;\n// \t\t@apply flex items-center gap-2;\n// \t\t@apply font-semibold text-storm;\n//\n// \t\t@apply hover:bg-indigo-light;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-storm;\n// \t\t}\n//\n// \t\t> span {\n// \t\t\t@apply mr-auto;\n// \t\t}\n// \t}\n// }\n//\n// :host(.active) {\n// \t> a {\n// \t\t@apply bg-indigo-light text-indigo;\n//\n// \t\t> p-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { IconVariant } from '../../atoms/icon/icon.component';\nimport { cn } from '../../../utils/cn';\n\nconst navigationItem = cva(\n\t[\n\t\t'h-8 w-[inherit]',\n\t\t'flex items-center gap-2',\n\t\t'text-black-teal-400 hover:text-black-teal-500',\n\t\t'rounded-lg',\n\t\t'py-1 px-2',\n\t\t'text-sm font-medium',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: ['hover:bg-off-white'],\n\t\t\t\ttrue: ['bg-off-white-600 text-black-teal-500 font-semibold'],\n\t\t\t},\n\t\t\ticon: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['pl-1'],\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst navigationItemIconContainer = cva(\n\t['flex h-6 aspect-branding items-center justify-center rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['bg-supportive-lilac'],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: './navigation-item.component.scss',\n\tshadow: false,\n})\nexport class NavigationItem {\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon!: IconVariant;\n\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the navigation item is loading\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The element to use for the navigation item\n\t */\n\t@Prop() as: string = 'a';\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The class of the container passed by parent\n\t */\n\t@Prop() class: string;\n\n\trender() {\n\t\tconst TagType = this.as;\n\n\t\tconst active = this.active || this.class?.includes('active');\n\n\t\treturn (\n\t\t\t<Host class={cn('p-navigation-item inline-block', this.class)}>\n\t\t\t\t<TagType\n\t\t\t\t\tclass={navigationItem({\n\t\t\t\t\t\ticon: !!this.icon,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t>\n\t\t\t\t\t<div class={navigationItemIconContainer({ active })}>\n\t\t\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{!!this.counter && this.counter !== '0' && (\n\t\t\t\t\t\t<p-badge>{this.counter}</p-badge>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!!this.loading && <p-loader class='ml-auto' />}\n\t\t\t\t</TagType>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-navigation-section.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PNavigationSection extends Components.PNavigationSection, HTMLElement {}
+export const PNavigationSection: {
+    prototype: PNavigationSection;
+    new (): PNavigationSection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-navigation-section.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './navigation-title.component.js';
+
+const navigationSectionComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.flex-col{flex-direction:column!important}.gap-2{gap:.5rem!important}";
+const PNavigationSectionStyle0 = navigationSectionComponentCss;
+
+const NavigationSection = /*@__PURE__*/ proxyCustomElement(class NavigationSection extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.header = undefined;
+    }
+    render() {
+        return (h(Host, { key: '796e5ed44de63dc1f59630dad492272b6451ed0e', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '09d6b3680a110b5cd88d5cc9b5265c4b604c8ab3' }, this.header)), h("div", { key: '646ea16ad875dcfdf40aeb12657d946c39f44b3b', class: 'flex flex-col' }, h("slot", { key: 'c11b12a07b3a65b5ca1e8d61910d8a5160e32ea7' }))));
+    }
+    static get style() { return PNavigationSectionStyle0; }
+}, [4, "p-navigation-section", {
+        "header": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-navigation-section", "p-navigation-title"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-navigation-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavigationSection);
+            }
+            break;
+        case "p-navigation-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PNavigationSection = NavigationSection;
+const defineCustomElement = defineCustomElement$1;
+
+export { PNavigationSection, defineCustomElement };
+
+//# sourceMappingURL=p-navigation-section.js.map

package/dist/components/p-navigation-section.js.map

@@ -0,0 +1 @@
+{"file":"p-navigation-section.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,8JAA8J,CAAC;AACrM,iCAAe,6BAA6B;;MCK/B,iBAAiB;;;;;;IAM7B,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,0CAA0C,IACpD,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,KACvB,6EAAqB,IAAI,CAAC,MAAM,CAAsB,CACtD,EAED,4DAAK,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,CACA,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/navigation-section/navigation-section.component.scss?tag=p-navigation-section","src/components/molecules/navigation-section/navigation-section.component.tsx"],"sourcesContent":["","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-navigation-section',\n\tstyleUrl: 'navigation-section.component.scss',\n})\nexport class NavigationSection {\n\t/**\n\t * The header of the section\n\t */\n\t@Prop() header: string;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-navigation-section flex flex-col gap-2'>\n\t\t\t\t{this.header?.length > 0 && (\n\t\t\t\t\t<p-navigation-title>{this.header}</p-navigation-title>\n\t\t\t\t)}\n\n\t\t\t\t<div class='flex flex-col'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-navigation-title.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PNavigationTitle extends Components.PNavigationTitle, HTMLElement {}
 export const PNavigationTitle: {
-  prototype: PNavigationTitle;
-  new (): PNavigationTitle;
+    prototype: PNavigationTitle;
+    new (): PNavigationTitle;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/p-navigation-title.js

@@ -1,30 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const navigationTitleComponentCss = "*{box-sizing:border-box}.static{position:static!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}";
-
-const NavigationTitle = /*@__PURE__*/ proxyCustomElement(class NavigationTitle extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return (h(Host, { class: 'p-navigation-title text-xs font-medium text-black-teal-300' }, h("slot", null)));
-  }
-  static get style() { return navigationTitleComponentCss; }
-}, [4, "p-navigation-title"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["p-navigation-title"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-navigation-title":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, NavigationTitle);
-      }
-      break;
-  } });
-}
+import { N as NavigationTitle, d as defineCustomElement$1 } from './navigation-title.component.js';
 
 const PNavigationTitle = NavigationTitle;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/p-navigation-title.js.map

@@ -1 +1 @@
-{"file":"p-navigation-title.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,+QAA+Q;;MCOtS,eAAe;;;;;EAC3B,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,4DAA4D,IACvE,eAAQ,CACF,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/navigation-title/navigation-title.component.scss?tag=p-navigation-title","src/components/atoms/navigation-title/navigation-title.component.tsx"],"sourcesContent":["","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-navigation-title',\n\tstyleUrl: 'navigation-title.component.scss',\n\tshadow: false,\n})\nexport class NavigationTitle {\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-navigation-title text-xs font-medium text-black-teal-300'>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-navigation-title.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/p-page-size-select.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PPageSizeSelect extends Components.PPageSizeSelect, HTMLElement {}
 export const PPageSizeSelect: {
-  prototype: PPageSizeSelect;
-  new (): PPageSizeSelect;
+    prototype: PPageSizeSelect;
+    new (): PPageSizeSelect;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/p-pagination-item.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PPaginationItem extends Components.PPaginationItem, HTMLElement {}
 export const PPaginationItem: {
-  prototype: PPaginationItem;
-  new (): PPaginationItem;
+    prototype: PPaginationItem;
+    new (): PPaginationItem;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/p-pagination.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PPagination extends Components.PPagination, HTMLElement {}
 export const PPagination: {
-  prototype: PPagination;
-  new (): PPagination;
+    prototype: PPagination;
+    new (): PPagination;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/p-portal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PPortal extends Components.PPortal, HTMLElement {}
+export const PPortal: {
+    prototype: PPortal;
+    new (): PPortal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-portal.js

@@ -0,0 +1,8 @@
+import { P as Portal, d as defineCustomElement$1 } from './portal.component.js';
+
+const PPortal = Portal;
+const defineCustomElement = defineCustomElement$1;
+
+export { PPortal, defineCustomElement };
+
+//# sourceMappingURL=p-portal.js.map

package/dist/components/p-portal.js.map

@@ -0,0 +1 @@
+{"file":"p-portal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/p-profile.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface PProfile extends Components.PProfile, HTMLElement {}
 export const PProfile: {
-  prototype: PProfile;
-  new (): PProfile;
+    prototype: PProfile;
+    new (): PProfile;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/p-profile.js

@@ -1,93 +1,111 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
-import { d as defineCustomElement$4 } from './dropdown.component.js';
-import { d as defineCustomElement$3 } from './dropdown-menu-container.component.js';
-import { d as defineCustomElement$2 } from './icon.component.js';
+import { d as defineCustomElement$7 } from './button.component.js';
+import { d as defineCustomElement$6 } from './dropdown.component.js';
+import { d as defineCustomElement$5 } from './dropdown-menu-container.component.js';
+import { d as defineCustomElement$4 } from './icon.component.js';
+import { d as defineCustomElement$3 } from './loader.component.js';
+import { d as defineCustomElement$2 } from './portal.component.js';
 
-const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important}.shadow-1,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-2{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:shadow-2:hover{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}";
+const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.max-w-full{max-width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}";
+const PProfileStyle0 = profileComponentCss;
 
-const profileContent = cva(['flex h-10 gap-2 items-center w-full'], {
-  variants: {
-    dropdown: {
-      false: 'py-1',
-      true: 'bg-white p-2 shadow-1 border rounded-lg hover:shadow-2 cursor-pointer',
+const profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {
+    variants: {
+        dropdown: {
+            false: 'h-10 py-1',
+            true: null,
+        },
     },
-    dropdownOpen: {
-      false: 'border-black-teal-100',
-      true: 'shadow-2 border-supportive-lilac-800 ring ring-2 ring-supportive-lilac-100',
-    },
-  },
 });
 const Profile = /*@__PURE__*/ proxyCustomElement(class Profile extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.dropdownLocation = 'bottom-end';
-    this.size = 'base';
-    this._dropdownOpen = false;
-    this._hasDropdownSlot = false;
-  }
-  componentWillLoad() {
-    this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
-  }
-  componentWillRender() {
-    this._updateAvatar();
-  }
-  render() {
-    const content = this._getContent();
-    return (h(Host, { class: 'p-profile inline-block' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, content, h("div", { slot: 'items' }, h("slot", { name: 'dropdown' })))) : (content)));
-  }
-  _getContent() {
-    return (h("div", { class: profileContent({
-        dropdown: this._hasDropdownSlot,
-        dropdownOpen: this._dropdownOpen,
-      }), slot: 'trigger' }, h("slot", { name: 'avatar' }), h("div", { class: 'flex flex-1 flex-col' }, h("p", { class: 'font-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' }), this._hasDropdownSlot && this._getIcon()));
-  }
-  _updateAvatar() {
-    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
-    if (!avatar) {
-      return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dropdownLocation = 'bottom-end';
+        this._dropdownOpen = false;
+        this._hasDropdownSlot = false;
+    }
+    get _el() { return this; }
+    componentWillLoad() {
+        this._checkDropdownSlot();
+    }
+    componentWillRender() {
+        this._updateAvatar();
+    }
+    render() {
+        const content = this._getContent();
+        return (h(Host, { key: '1ff9fb75ed53f1e4c9e53dd942f150fae77484d4', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+    }
+    slotchange() {
+        this._checkDropdownSlot();
     }
-    avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
-  }
-  _getIcon() {
-    return (h("p-icon", { variant: 'caret', flip: this._dropdownOpen ? 'vertical' : 'horizontal' }));
-  }
-  get _el() { return this; }
-  static get style() { return profileComponentCss; }
+    _checkDropdownSlot() {
+        this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
+        if (!this._hasDropdownSlot && this._dropdownOpen) {
+            this._dropdownOpen = false;
+        }
+    }
+    _getContent() {
+        return (h("div", { class: profileContent({
+                dropdown: this._hasDropdownSlot,
+            }) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex min-w-0 flex-1 flex-col items-start' }, h("p", { class: 'w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'w-auto max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
+    }
+    _updateAvatar() {
+        const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+        if (!avatar) {
+            return;
+        }
+        avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
+    }
+    static get style() { return PProfileStyle0; }
 }, [4, "p-profile", {
-    "dropdownLocation": [1, "dropdown-location"],
-    "size": [513],
-    "_dropdownOpen": [32],
-    "_hasDropdownSlot": [32]
-  }]);
+        "dropdownLocation": [1, "dropdown-location"],
+        "_dropdownOpen": [32],
+        "_hasDropdownSlot": [32]
+    }, [[0, "slotchange", "slotchange"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["p-profile", "p-dropdown", "p-dropdown-menu-container", "p-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-profile":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Profile);
-      }
-      break;
-    case "p-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "p-dropdown-menu-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "p-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-profile", "p-button", "p-dropdown", "p-dropdown-menu-container", "p-icon", "p-loader", "p-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-profile":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Profile);
+            }
+            break;
+        case "p-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "p-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "p-dropdown-menu-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "p-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "p-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "p-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const PProfile = Profile;