@paperless/core 1.64.2 → 1.66.0

package/dist/types/components/atoms/helper/helper.component.d.ts

@@ -1,5 +1,9 @@
-import { Placement } from '@floating-ui/dom';
+import { Placement, Strategy } from '@floating-ui/dom';
 export declare class Helper {
+  /**
+   * The strategy of the popover placement
+   */
+  strategy: Strategy;
   /**
    * The placement of the helper popover
    */

package/dist/types/components/atoms/portal/portal.component.d.ts

@@ -0,0 +1,9 @@
+export declare class Portal {
+  containerClass: string;
+  _element: HTMLElement;
+  private _moved;
+  private createPortal;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/molecules/dropdown/dropdown.component.d.ts

@@ -17,6 +17,10 @@ export declare class Dropdown {
    * Wether to show the dropdown menu
    */
   show: boolean;
+  /**
+   * Wether to use a portal for the dropdown container
+   */
+  usePortal: boolean;
   /**
    * Wether to automatically calculate the width of the menu based on the trigger
    */
@@ -71,8 +75,9 @@ export declare class Dropdown {
   private _cleanup;
   componentShouldUpdate(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): any;
-  private _checkButton;
+  private _checkButtons;
   protected onShowChange(show: any): void;
   protected documentClickHandler({ target }: {
     target: any;

package/dist/types/components.d.ts

@@ -494,6 +494,10 @@ export namespace Components {
           * The strategy of the dropdown placement
          */
         "strategy": Strategy;
+        /**
+          * Wether to use a portal for the dropdown container
+         */
+        "usePortal": boolean;
     }
     interface PDropdownMenuContainer {
         /**
@@ -556,6 +560,10 @@ export namespace Components {
           * The placement of the helper popover
          */
         "placement": Placement;
+        /**
+          * The strategy of the popover placement
+         */
+        "strategy": Strategy;
     }
     interface PIbanIcon {
         /**
@@ -932,13 +940,16 @@ export namespace Components {
          */
         "active": boolean;
     }
+    interface PPortal {
+        "containerClass": string;
+    }
     interface PProfile {
         /**
           * The size of the profile avatar
          */
         "size": | 'xsmall'
 		| 'small'
-    | 'table'
+		| 'table'
 		| 'medium'
 		| 'large'
 		| 'xlarge';
@@ -2037,6 +2048,12 @@ declare global {
         prototype: HTMLPPaginationItemElement;
         new (): HTMLPPaginationItemElement;
     };
+    interface HTMLPPortalElement extends Components.PPortal, HTMLStencilElement {
+    }
+    var HTMLPPortalElement: {
+        prototype: HTMLPPortalElement;
+        new (): HTMLPPortalElement;
+    };
     interface HTMLPProfileElement extends Components.PProfile, HTMLStencilElement {
     }
     var HTMLPProfileElement: {
@@ -2215,6 +2232,7 @@ declare global {
         "p-page-size-select": HTMLPPageSizeSelectElement;
         "p-pagination": HTMLPPaginationElement;
         "p-pagination-item": HTMLPPaginationItemElement;
+        "p-portal": HTMLPPortalElement;
         "p-profile": HTMLPProfileElement;
         "p-segment-container": HTMLPSegmentContainerElement;
         "p-segment-item": HTMLPSegmentItemElement;
@@ -2750,6 +2768,10 @@ declare namespace LocalJSX {
           * The strategy of the dropdown placement
          */
         "strategy"?: Strategy;
+        /**
+          * Wether to use a portal for the dropdown container
+         */
+        "usePortal"?: boolean;
     }
     interface PDropdownMenuContainer {
         /**
@@ -2812,6 +2834,10 @@ declare namespace LocalJSX {
           * The placement of the helper popover
          */
         "placement"?: Placement;
+        /**
+          * The strategy of the popover placement
+         */
+        "strategy"?: Strategy;
     }
     interface PIbanIcon {
         /**
@@ -3212,13 +3238,16 @@ declare namespace LocalJSX {
          */
         "active"?: boolean;
     }
+    interface PPortal {
+        "containerClass"?: string;
+    }
     interface PProfile {
         /**
           * The size of the profile avatar
          */
         "size"?: | 'xsmall'
 		| 'small'
-    | 'table'
+		| 'table'
 		| 'medium'
 		| 'large'
 		| 'xlarge';
@@ -4115,6 +4144,7 @@ declare namespace LocalJSX {
         "p-page-size-select": PPageSizeSelect;
         "p-pagination": PPagination;
         "p-pagination-item": PPaginationItem;
+        "p-portal": PPortal;
         "p-profile": PProfile;
         "p-segment-container": PSegmentContainer;
         "p-segment-item": PSegmentItem;
@@ -4188,6 +4218,7 @@ declare module "@stencil/core" {
             "p-page-size-select": LocalJSX.PPageSizeSelect & JSXBase.HTMLAttributes<HTMLPPageSizeSelectElement>;
             "p-pagination": LocalJSX.PPagination & JSXBase.HTMLAttributes<HTMLPPaginationElement>;
             "p-pagination-item": LocalJSX.PPaginationItem & JSXBase.HTMLAttributes<HTMLPPaginationItemElement>;
+            "p-portal": LocalJSX.PPortal & JSXBase.HTMLAttributes<HTMLPPortalElement>;
             "p-profile": LocalJSX.PProfile & JSXBase.HTMLAttributes<HTMLPProfileElement>;
             "p-segment-container": LocalJSX.PSegmentContainer & JSXBase.HTMLAttributes<HTMLPSegmentContainerElement>;
             "p-segment-item": LocalJSX.PSegmentItem & JSXBase.HTMLAttributes<HTMLPSegmentItemElement>;

package/hydrate/index.js

@@ -4950,7 +4950,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE$1 = 'paperless';
-const BUILD = /* paperless */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* paperless */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, patchPseudoShadowDom: false, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 function queryNonceMetaTagContent(e) {
  var t, o, n;
@@ -5139,19 +5139,21 @@ function waitingOnElementMsg(e) {
 
 const createTime = (e, t = "") => {
  return () => {};
-}, EMPTY_OBJ = {}, isComplexType = e => "object" == (e = typeof e) || "function" === e, isPromise = e => !!e && ("object" == typeof e || "function" == typeof e) && "function" == typeof e.then, h = (e, t, ...o) => {
- let n = null, l = null, a = !1, r = !1;
+}, XLINK_NS = "http://www.w3.org/1999/xlink", EMPTY_OBJ = {}, isComplexType = e => "object" == (e = typeof e) || "function" === e, isPromise = e => !!e && ("object" == typeof e || "function" == typeof e) && "function" == typeof e.then, h = (e, t, ...o) => {
+ let n = null, s = null, l = null, a = !1, r = !1;
  const i = [], d = t => {
   for (let o = 0; o < t.length; o++) n = t[o], Array.isArray(n) ? d(n) : null != n && "boolean" != typeof n && ((a = "function" != typeof e && !isComplexType(n)) ? n = String(n) : BUILD.isDev  , 
   a && r ? i[i.length - 1].$text$ += n : i.push(a ? newVNode(null, n) : n), r = a);
  };
- if (d(o), t && (t.name && (l = t.name), BUILD.vdomClass)) {
+ if (d(o), t && (t.key && (s = t.key), 
+ t.name && (l = t.name), BUILD.vdomClass)) {
   const e = t.className || t.class;
   e && (t.class = "object" != typeof e ? e : Object.keys(e).filter((t => e[t])).join(" "));
  }
  if ("function" == typeof e) return e(null === t ? {} : t, i, vdomFnUtils);
  const c = newVNode(e, null);
- return c.$attrs$ = t, i.length > 0 && (c.$children$ = i), (c.$name$ = l), c;
+ return c.$attrs$ = t, i.length > 0 && (c.$children$ = i), (c.$key$ = s), 
+ (c.$name$ = l), c;
 }, newVNode = (e, t) => {
  const o = {
   $flags$: 0,
@@ -5160,7 +5162,8 @@ const createTime = (e, t = "") => {
   $elm$: null,
   $children$: null
  };
- return (o.$attrs$ = null), (o.$name$ = null), o;
+ return (o.$attrs$ = null), (o.$key$ = null), 
+ (o.$name$ = null), o;
 }, Host = {}, isHost = e => e && e.$tag$ === Host, vdomFnUtils = {
  forEach: (e, t) => e.map(convertToPublic).forEach(t),
  map: (e, t) => e.map(convertToPublic).map(t).map(convertToPrivate)
@@ -5281,7 +5284,7 @@ const createTime = (e, t = "") => {
   } else if ("style" === t) {
    for (const t in o) n && null != n[t] || (e.style[t] = "");
    for (const t in n) o && n[t] === o[t] || (e.style[t] = n[t]);
-  } else if ("ref" === t) n && n(e); else if ((a ) || "o" !== t[0] || "n" !== t[1]) {
+  } else if ("key" === t) ; else if ("ref" === t) n && n(e); else if ((a ) || "o" !== t[0] || "n" !== t[1]) {
    {
     const i = isComplexType(n);
     if ((a || i && null !== n) && !s) try {
@@ -5290,8 +5293,9 @@ const createTime = (e, t = "") => {
       "list" === t ? a = !1 : null != o && e[t] == s || (e[t] = s);
      }
     } catch (e) {}
-    null == n || !1 === n ? !1 === n && "" !== e.getAttribute(t) || (e.removeAttribute(t)) : (!a || 4 & l || s) && !i && (n = !0 === n ? "" : n, 
-    e.setAttribute(t, n));
+    let d = !1;
+    r !== (r = r.replace(/^xlink\:?/, "")) && (t = r, d = !0), null == n || !1 === n ? !1 === n && "" !== e.getAttribute(t) || (d ? e.removeAttributeNS(XLINK_NS, t) : e.removeAttribute(t)) : (!a || 4 & l || s) && !i && (n = !0 === n ? "" : n, 
+    d ? e.setAttributeNS(XLINK_NS, t, n) : e.setAttribute(t, n));
    }
   } else t = "-" === t[2] ? t.slice(3) : isMemberInElement(win, r) ? r.slice(2) : r[2] + t.slice(3), 
   o && plt.rel(e, t, o, !1), n && plt.ael(e, t, n, !1);
@@ -5341,17 +5345,22 @@ const createElm = (e, t, o, n) => {
    e["s-ol"] ? e["s-ol"].remove() : putBackInOriginalLocation(e, !0)), e.remove());
   }
  }
-}, isSameVnode = (e, t) => e.$tag$ === t.$tag$ && ("slot" === e.$tag$ ? e.$name$ === t.$name$ : !BUILD.vdomKey ), referenceNode = e => e && e["s-ol"] || e, parentReferenceNode = e => (e["s-ol"] ? e["s-ol"] : e).parentNode, patch = (e, t) => {
+}, isSameVnode = (e, t) => e.$tag$ === t.$tag$ && ("slot" === e.$tag$ ? e.$name$ === t.$name$ : e.$key$ === t.$key$), referenceNode = e => e && e["s-ol"] || e, parentReferenceNode = e => (e["s-ol"] ? e["s-ol"] : e).parentNode, patch = (e, t) => {
  const o = t.$elm$ = e.$elm$, n = e.$children$, s = t.$children$, l = t.$tag$, a = t.$text$;
  let r;
  null !== a ? (r = o["s-cr"]) ? r.parentNode.textContent = a : e.$text$ !== a && (o.data = a) : (("slot" === l || updateElement(e, t, isSvgMode)), 
  null !== n && null !== s ? ((e, t, o, n) => {
-  let s, a = 0, r = 0, c = t.length - 1, $ = t[0], m = t[c], p = n.length - 1, h = n[0], u = n[p];
+  let s, l, a = 0, r = 0, i = 0, d = 0, c = t.length - 1, $ = t[0], m = t[c], p = n.length - 1, h = n[0], u = n[p];
   for (;a <= c && r <= p; ) if (null == $) $ = t[++a]; else if (null == m) m = t[--c]; else if (null == h) h = n[++r]; else if (null == u) u = n[--p]; else if (isSameVnode($, h)) patch($, h), 
   $ = t[++a], h = n[++r]; else if (isSameVnode(m, u)) patch(m, u), m = t[--c], u = n[--p]; else if (isSameVnode($, u)) "slot" !== $.$tag$ && "slot" !== u.$tag$ || putBackInOriginalLocation($.$elm$.parentNode, !1), 
   patch($, u), e.insertBefore($.$elm$, m.$elm$.nextSibling), $ = t[++a], u = n[--p]; else if (isSameVnode(m, h)) "slot" !== $.$tag$ && "slot" !== u.$tag$ || putBackInOriginalLocation(m.$elm$.parentNode, !1), 
   patch(m, h), e.insertBefore(m.$elm$, $.$elm$), m = t[--c], h = n[++r]; else {
-   (s = createElm(t && t[r], o, r, e), h = n[++r]), 
+   if (i = -1, BUILD.vdomKey) for (d = a; d <= c; ++d) if (t[d] && null !== t[d].$key$ && t[d].$key$ === h.$key$) {
+    i = d;
+    break;
+   }
+   i >= 0 ? (l = t[i], l.$tag$ !== h.$tag$ ? s = createElm(t && t[r], o, i, e) : (patch(l, h), 
+   t[i] = void 0, s = l.$elm$), h = n[++r]) : (s = createElm(t && t[r], o, r, e), h = n[++r]), 
    s && (parentReferenceNode($.$elm$).insertBefore(s, referenceNode($.$elm$)) );
   }
   a > c ? addVnodes(e, null == n[p + 1] ? null : n[p + 1].$elm$, o, n, r, p) : r > p && removeVnodes(t, a, c);
@@ -19752,7 +19761,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const dropdownComponentCss = "/*!@.fixed*/.fixed.sc-p-dropdown{position:fixed!important}/*!@.absolute*/.absolute.sc-p-dropdown{position:absolute!important}/*!@.relative*/.relative.sc-p-dropdown{position:relative!important}/*!@.left-0*/.left-0.sc-p-dropdown{left:0!important}/*!@.top-0*/.top-0.sc-p-dropdown{top:0!important}/*!@.z-dropdown*/.z-dropdown.sc-p-dropdown{z-index:200!important}/*!@.block*/.block.sc-p-dropdown{display:block!important}/*!@.flex*/.flex.sc-p-dropdown{display:flex!important}/*!@.hidden*/.hidden.sc-p-dropdown{display:none!important}/*!@.h-auto*/.h-auto.sc-p-dropdown{height:auto!important}/*!@**/*.sc-p-dropdown{box-sizing:border-box}/*!@:host*/.sc-p-dropdown-h{display:block;position:relative}/*!@:host .trigger*/.sc-p-dropdown-h .trigger.sc-p-dropdown{display:block;height:auto;position:relative;width:auto}/*!@:host p-dropdown-menu-container*/.sc-p-dropdown-h p-dropdown-menu-container.sc-p-dropdown{display:none;left:0;top:0;z-index:200}/*!@:host p-dropdown-menu-container[data-show]*/.sc-p-dropdown-h p-dropdown-menu-container[data-show].sc-p-dropdown{display:flex}/*!@:host p-dropdown-menu-container[data-strategy=absolute]*/.sc-p-dropdown-h p-dropdown-menu-container[data-strategy=absolute].sc-p-dropdown{position:absolute}/*!@:host p-dropdown-menu-container[data-strategy=fixed]*/.sc-p-dropdown-h p-dropdown-menu-container[data-strategy=fixed].sc-p-dropdown{position:fixed}/*!@.visible*/.visible.sc-p-dropdown{visibility:visible!important}/*!@.static*/.static.sc-p-dropdown{position:static!important}";
+const dropdownComponentCss = ".relative{position:relative!important}.block{display:block!important}.h-auto{height:auto!important}*{box-sizing:border-box}p-dropdown,p-dropdown .trigger{display:block;position:relative}p-dropdown .trigger{height:auto;width:auto}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.z-dropdown{z-index:200!important}.flex{display:flex!important}.hidden{display:none!important}";
 
 class Dropdown {
   constructor(hostRef) {
@@ -19763,6 +19772,7 @@ class Dropdown {
     this.offset = 8;
     this.strategy = 'absolute';
     this.show = false;
+    this.usePortal = false;
     this.calculateWidth = false;
     this.applyMaxWidth = true;
     this.applyFullWidth = true;
@@ -19782,25 +19792,41 @@ class Dropdown {
       this._cleanup();
       this._cleanup = null;
     }
+    this._menu.remove();
+  }
+  componentDidRender() {
+    this._checkButtons();
   }
   render() {
-    return (hAsync(Host, { class: "p-dropdown" }, hAsync("div", { class: "trigger", ref: (ref) => (this._trigger = ref), onClick: () => this._triggerClickHandler() }, hAsync("slot", { onSlotchange: (ev) => this._checkButton(ev), name: "trigger" })), hAsync("p-dropdown-menu-container", { role: "popover", maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, ref: (el) => this._load(el), "data-placement": this.placement, "data-strategy": this.strategy, onClick: () => this._containerClickHandler(), scrollable: this.scrollable }, hAsync("slot", { name: "items" }))));
+    const dropdownContainerProps = {
+      class: `z-dropdown hidden ${this.strategy === 'fixed' ? 'fixed' : 'absolute'}`,
+      ref: el => this._load(el),
+      onClick: () => this._containerClickHandler(),
+      role: 'popover',
+      'data-placement': this.placement,
+      'data-strategy': this.strategy,
+    };
+    let dropdownContainer;
+    if (this.usePortal) {
+      dropdownContainer = (hAsync("p-portal", Object.assign({}, dropdownContainerProps), hAsync("p-dropdown-menu-container", { maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable }, hAsync("slot", { name: 'items' }))));
+    }
+    else {
+      dropdownContainer = (hAsync("p-dropdown-menu-container", Object.assign({ maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable }, dropdownContainerProps), hAsync("slot", { name: 'items' })));
+    }
+    return (hAsync(Host, { class: 'p-dropdown' }, hAsync("div", { class: 'trigger', ref: ref => (this._trigger = ref), onClick: () => this._triggerClickHandler() }, hAsync("slot", { name: 'trigger' })), dropdownContainer));
   }
-  _checkButton({ target }) {
+  _checkButtons() {
     if (!this.applyChevron) {
       return;
     }
-    const slot = target;
-    const children = slot.assignedElements();
-    for (let child of children) {
-      if (child.nodeName === 'P-BUTTON') {
-        child.chevronPosition = this.chevronPosition;
-        child.chevron = this.chevronDirection
-          ? this.chevronDirection
-          : this.placement.indexOf('top') >= 0
-            ? 'up'
-            : 'down';
-      }
+    const children = this._el.querySelectorAll('p-button[slot="trigger"]');
+    for (let child of [...children]) {
+      child.chevronPosition = this.chevronPosition;
+      child.chevron = this.chevronDirection
+        ? this.chevronDirection
+        : this.placement.indexOf('top') >= 0
+          ? 'up'
+          : 'down';
     }
   }
   onShowChange(show) {
@@ -19814,8 +19840,7 @@ class Dropdown {
     this._show();
   }
   documentClickHandler({ target }) {
-    if (!this._menu.hasAttribute('data-show') ||
-      childOf(target, this._el)) {
+    if (!this._menu.hasAttribute('data-show') || childOf(target, this._menu)) {
       return;
     }
     this._hide();
@@ -19858,7 +19883,10 @@ class Dropdown {
     }
     this._cleanup = autoUpdate(this._el, this._menu, () => this._update());
     this._menu.setAttribute('data-show', '');
+    this._menu.classList.remove('hidden');
+    this._menu.classList.add('flex');
     this.isOpen.emit(true);
+    this._update();
   }
   _hide() {
     if (!this._loaded || this.show) {
@@ -19870,6 +19898,8 @@ class Dropdown {
     }
     // Hide the popover
     this._menu.removeAttribute('data-show');
+    this._menu.classList.remove('flex');
+    this._menu.classList.add('hidden');
     this.isOpen.emit(false);
   }
   _update() {
@@ -19894,13 +19924,14 @@ class Dropdown {
   }; }
   static get style() { return dropdownComponentCss; }
   static get cmpMeta() { return {
-    "$flags$": 9,
+    "$flags$": 4,
     "$tagName$": "p-dropdown",
     "$members$": {
       "placement": [513],
       "offset": [2],
       "strategy": [1],
       "show": [4],
+      "usePortal": [4, "use-portal"],
       "calculateWidth": [4, "calculate-width"],
       "applyMaxWidth": [4, "apply-max-width"],
       "applyFullWidth": [4, "apply-full-width"],
@@ -19918,7 +19949,7 @@ class Dropdown {
   }; }
 }
 
-const dropdownMenuContainerComponentCss = ".z-10{z-index:10!important}.flex{display:flex!important}.hidden{display:none!important}.max-h-\\[11\\.5rem\\]{max-height:11.5rem!important}.max-h-\\[13\\.875rem\\]{max-height:13.875rem!important}.max-h-\\[20rem\\]{max-height:20rem!important}.w-full{width:100%!important}.max-w-\\[222px\\]{max-width:222px!important}.flex-col{flex-direction:column!important}.gap-\\[1px\\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.rounded-xxlarge{border-radius:.75rem!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.drop-shadow-4,.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}p-dropdown-menu-container{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;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);width:auto;z-index:10}p-dropdown-menu-container .content{display:flex;flex-direction:column;gap:1px;padding:.5rem;width:100%}p-dropdown-menu-container.full-width{width:100%}p-dropdown-menu-container.no-overflow{overflow-x:hidden;overflow-y:auto}p-dropdown-menu-container.max-width{max-width:222px}p-dropdown-menu-container.scrollable{max-height:11.5rem;scrollbar-width:none}p-dropdown-menu-container.scrollable::-webkit-scrollbar{display:none}p-dropdown-menu-container.scrollable .content{height:100%}p-dropdown-menu-container.scrollable.scrollable-large{max-height:13.875rem}p-dropdown-menu-container.scrollable.scrollable-xlarge{max-height:20rem}.static{position:static!important}";
+const dropdownMenuContainerComponentCss = ".z-10{z-index:10!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.max-h-\\[11\\.5rem\\]{max-height:11.5rem!important}.max-h-\\[13\\.875rem\\]{max-height:13.875rem!important}.max-h-\\[20rem\\]{max-height:20rem!important}.w-full{width:100%!important}.max-w-\\[222px\\]{max-width:222px!important}.flex-col{flex-direction:column!important}.gap-\\[1px\\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.rounded-xxlarge{border-radius:.75rem!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.drop-shadow-4,.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}p-dropdown-menu-container{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;display:block;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);width:auto;z-index:10}p-dropdown-menu-container .content{display:flex;flex-direction:column;gap:1px;padding:.5rem;width:100%}p-dropdown-menu-container.full-width{width:100%}p-dropdown-menu-container.no-overflow{overflow-x:hidden;overflow-y:auto}p-dropdown-menu-container.max-width{max-width:222px}p-dropdown-menu-container.scrollable{max-height:11.5rem;scrollbar-width:none}p-dropdown-menu-container.scrollable::-webkit-scrollbar{display:none}p-dropdown-menu-container.scrollable .content{height:100%}p-dropdown-menu-container.scrollable.scrollable-large{max-height:13.875rem}p-dropdown-menu-container.scrollable.scrollable-xlarge{max-height:20rem}.static{position:static!important}";
 
 class DropdownMenuContainer {
   constructor(hostRef) {
@@ -20026,21 +20057,23 @@ class FloatingMenuItem {
   }; }
 }
 
-const helperComponentCss = "/*!@.inline-block*/.inline-block.sc-p-helper{display:inline-block!important}/*!@.w-3*/.w-3.sc-p-helper{width:.75rem!important}/*!@.cursor-pointer*/.cursor-pointer.sc-p-helper{cursor:pointer!important}/*!@.bg-center*/.bg-center.sc-p-helper{background-position:50%!important}/*!@.bg-no-repeat*/.bg-no-repeat.sc-p-helper{background-repeat:no-repeat!important}/*!@**/*.sc-p-helper{box-sizing:border-box}/*!@:host .helper*/.sc-p-helper-h .helper.sc-p-helper{background-image:url(/assets/images/helper/helper.svg);background-position:50%;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:.75rem;width:.75rem}/*!@:host .helper:hover*/.sc-p-helper-h .helper.sc-p-helper:hover{background-image:url(/assets/images/helper/helper-hover.svg)}/*!@.static*/.static.sc-p-helper{position:static!important}";
+const helperComponentCss = "/*!@.inline-block*/.inline-block.sc-p-helper{display:inline-block!important}/*!@.w-3*/.w-3.sc-p-helper{width:.75rem!important}/*!@.cursor-pointer*/.cursor-pointer.sc-p-helper{cursor:pointer!important}/*!@.bg-center*/.bg-center.sc-p-helper{background-position:50%!important}/*!@.bg-no-repeat*/.bg-no-repeat.sc-p-helper{background-repeat:no-repeat!important}/*!@**/*.sc-p-helper{box-sizing:border-box}/*!@:host .helper*/.sc-p-helper-h .helper.sc-p-helper{background-image:url(/assets/images/helper/helper.svg);background-position:50%;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:.75rem;width:.75rem}/*!@:host .helper:hover*/.sc-p-helper-h .helper.sc-p-helper:hover{background-image:url(/assets/images/helper/helper-hover.svg)}/*!@.static*/.static.sc-p-helper{position:static!important}/*!@.absolute*/.absolute.sc-p-helper{position:absolute!important}";
 
 class Helper {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.strategy = 'absolute';
     this.placement = 'top';
   }
   render() {
-    return (hAsync(Host, { class: "p-helper" }, hAsync("p-tooltip", { placement: this.placement }, hAsync("div", { slot: "content" }, hAsync("slot", null)), hAsync("div", { slot: "trigger", class: "helper" }))));
+    return (hAsync(Host, { class: 'p-helper' }, hAsync("p-tooltip", { placement: this.placement, strategy: this.strategy }, hAsync("div", { slot: 'content' }, hAsync("slot", null)), hAsync("div", { slot: 'trigger', class: 'helper' }))));
   }
   static get style() { return helperComponentCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "p-helper",
     "$members$": {
+      "strategy": [1],
       "placement": [1]
     },
     "$listeners$": undefined,
@@ -20275,14 +20308,11 @@ class InputGroup {
   render() {
     var _a;
     const { hasHeaderSlot, helper, label, prefix, suffix, errorAndErrorIsNotBoolean, errorVariant, } = this._getSlotInfo();
-    return (hAsync(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, hAsync("div", { class: "flex items-end justify-between" }, label && (hAsync("div", { class: "input-label", onClick: () => this._focusInput() }, label, this.required && (hAsync("span", { class: "ml-1 text-negative" }, "*")))), (helper || hasHeaderSlot) && (hAsync("div", { class: "input-header" }, hasHeaderSlot && hAsync("slot", { name: "header" }), helper && (hAsync("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: "top-end" }, helper))))), hAsync("p-tooltip", { class: "w-full", variant: "error-element", content: this.error, show: errorAndErrorIsNotBoolean &&
+    return (hAsync(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, hAsync("div", { class: 'flex items-end justify-between' }, label && (hAsync("div", { class: 'input-label', onClick: () => this._focusInput() }, label, this.required && hAsync("span", { class: 'ml-1 text-negative' }, "*"))), (helper || hasHeaderSlot) && (hAsync("div", { class: 'input-header' }, hasHeaderSlot && hAsync("slot", { name: 'header' }), helper && (hAsync("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: 'top-end' }, helper))))), hAsync("p-tooltip", { class: 'w-full', variant: 'error-element', content: this.error, show: errorAndErrorIsNotBoolean &&
         errorVariant === 'element' &&
-        (this.forceShowTooltip || this._forceShowTooltip), enableUserInput: false }, hAsync("div", { class: "content", slot: "trigger" }, (prefix ||
-      (this.icon && this.iconPosition === 'start')) && (hAsync("div", { class: `prefix size-${this.size}`, onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), (suffix ||
-      (errorAndErrorIsNotBoolean &&
-        errorVariant === 'icon') ||
-      (this.icon && this.iconPosition === 'end')) && (hAsync("div", { class: `suffix size-${this.size}`, onClick: () => this._focusInput() }, errorAndErrorIsNotBoolean &&
-      errorVariant === 'icon' ? (hAsync("p-input-error", { error: this.error, forceShowTooltip: this.forceShowTooltip || this._forceShowTooltip })) : this.icon && this.iconPosition === 'end' ? (hAsync("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))), hAsync("slot", { name: "input" })))));
+        (this.forceShowTooltip || this._forceShowTooltip), enableUserInput: false }, hAsync("div", { class: 'content', slot: 'trigger' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { class: `prefix size-${this.size}`, onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), (suffix ||
+      (errorAndErrorIsNotBoolean && errorVariant === 'icon') ||
+      (this.icon && this.iconPosition === 'end')) && (hAsync("div", { class: `suffix size-${this.size}`, onClick: () => this._focusInput() }, errorAndErrorIsNotBoolean && errorVariant === 'icon' ? (hAsync("p-input-error", { error: this.error, forceShowTooltip: this.forceShowTooltip || this._forceShowTooltip })) : this.icon && this.iconPosition === 'end' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))), hAsync("slot", { name: 'input' })))));
   }
   handleFocusIn() {
     this._forceShowTooltip = true;
@@ -20335,13 +20365,11 @@ class InputGroup {
     const hasPrefixSlot = !!this._el.querySelector(':scope > [slot="prefix"]');
     const hasSuffixSlot = !!this._el.querySelector(':scope > [slot="suffix"]');
     const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
-    const helper = hasHelperSlot ? hAsync("slot", { name: "helper" }) : this.helper;
-    const label = hasLabelSlot ? hAsync("slot", { name: "label" }) : this.label;
-    const prefix = hasPrefixSlot ? hAsync("slot", { name: "prefix" }) : this.prefix;
-    const suffix = hasSuffixSlot ? hAsync("slot", { name: "suffix" }) : this.suffix;
-    const errorAndErrorIsNotBoolean = this.error &&
-      typeof this.error === 'string' &&
-      this.error !== 'true';
+    const helper = hasHelperSlot ? hAsync("slot", { name: 'helper' }) : this.helper;
+    const label = hasLabelSlot ? hAsync("slot", { name: 'label' }) : this.label;
+    const prefix = hasPrefixSlot ? hAsync("slot", { name: 'prefix' }) : this.prefix;
+    const suffix = hasSuffixSlot ? hAsync("slot", { name: 'suffix' }) : this.suffix;
+    const errorAndErrorIsNotBoolean = this.error && typeof this.error === 'string' && this.error !== 'true';
     return {
       hasHelperSlot,
       hasLabelSlot,
@@ -20353,7 +20381,11 @@ class InputGroup {
       prefix,
       suffix,
       errorAndErrorIsNotBoolean,
-      errorVariant: this.errorVariant === 'auto' ? (this._el.offsetWidth <= 72 ? 'element' : 'icon') : this.errorVariant,
+      errorVariant: this.errorVariant === 'auto'
+        ? this._el.offsetWidth <= 72
+          ? 'element'
+          : 'icon'
+        : this.errorVariant,
     };
   }
   _focusInput() {
@@ -21096,7 +21128,38 @@ class PaginationItem {
   }; }
 }
 
-const profileComponentCss = "/*!@.flex*/.flex.sc-p-profile{display:flex!important}/*!@.table*/.table.sc-p-profile{display:table!important}/*!@.h-\\[3\\.125rem\\]*/.h-\\[3\\.125rem\\].sc-p-profile{height:3.125rem!important}/*!@.h-\\[4\\.125rem\\]*/.h-\\[4\\.125rem\\].sc-p-profile{height:4.125rem!important}/*!@.h-\\[6\\.5rem\\]*/.h-\\[6\\.5rem\\].sc-p-profile{height:6.5rem!important}/*!@.flex-col*/.flex-col.sc-p-profile{flex-direction:column!important}/*!@.items-center*/.items-center.sc-p-profile{align-items:center!important}/*!@.justify-center*/.justify-center.sc-p-profile{justify-content:center!important}/*!@.gap-3*/.gap-3.sc-p-profile{gap:.75rem!important}/*!@.overflow-hidden*/.overflow-hidden.sc-p-profile{overflow:hidden!important}/*!@.text-ellipsis*/.text-ellipsis.sc-p-profile{text-overflow:ellipsis!important}/*!@.rounded*/.rounded.sc-p-profile{border-radius:.25rem!important}/*!@.border*/.border.sc-p-profile{border-width:1px!important}/*!@.border-solid*/.border-solid.sc-p-profile{border-style:solid!important}/*!@.border-mystic-dark*/.border-mystic-dark.sc-p-profile{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}/*!@.p-2*/.p-2.sc-p-profile{padding:.5rem!important}/*!@.text-sm*/.text-sm.sc-p-profile{font-size:.875rem!important;line-height:1.25rem!important}/*!@**/*.sc-p-profile{box-sizing:border-box}/*!@:host*/.sc-p-profile-h{display:flex}/*!@:host .content*/.sc-p-profile-h .content.sc-p-profile{align-items:center;display:flex;gap:.75rem;width:100%}/*!@:host .content .name*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile{display:flex;flex-direction:column;justify-content:center;overflow:hidden}/*!@:host .content .name>:first-child*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile>.sc-p-profile:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}/*!@:host .content .name>:nth-child(2)*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile>.sc-p-profile:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}/*!@:host .content .name ::slotted(*)*/.sc-p-profile-h .content .name .sc-p-profile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host([size=xsmall])*/[size=xsmall].sc-p-profile-h{height:1.5rem}/*!@:host([size=small])*/[size=small].sc-p-profile-h{height:2rem}/*!@:host([size=table])*/[size=table].sc-p-profile-h{height:2.5rem}/*!@:host([size=medium])*/[size=medium].sc-p-profile-h{height:3.125rem}/*!@:host([size=large])*/[size=large].sc-p-profile-h{height:4rem}/*!@:host([size=xlarge])*/[size=xlarge].sc-p-profile-h{height:6.5rem}/*!@:host(.has-dropdown)*/.has-dropdown.sc-p-profile-h{cursor:pointer}/*!@:host(.has-dropdown) .content*/.has-dropdown.sc-p-profile-h .content.sc-p-profile{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}/*!@:host(.has-dropdown[size=small])*/.has-dropdown[size=small].sc-p-profile-h{height:3rem}/*!@:host(.has-dropdown[size=medium])*/.has-dropdown[size=medium].sc-p-profile-h{height:4.125rem}/*!@:host(.has-dropdown[size=large])*/.has-dropdown[size=large].sc-p-profile-h{height:5rem}/*!@:host(.active) .content,:host(.has-dropdown:hover) .content*/.active.sc-p-profile-h .content.sc-p-profile,.has-dropdown.sc-p-profile-h:hover .content.sc-p-profile{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}/*!@:host(.active) .content p-icon*/.active.sc-p-profile-h .content.sc-p-profile p-icon.sc-p-profile{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}/*!@.static*/.static.sc-p-profile{position:static!important}/*!@.absolute*/.absolute.sc-p-profile{position:absolute!important}/*!@.ml-auto*/.ml-auto.sc-p-profile{margin-left:auto!important}/*!@.w-full*/.w-full.sc-p-profile{width:100%!important}/*!@.min-w-0*/.min-w-0.sc-p-profile{min-width:0!important}";
+class Portal {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._moved = false;
+    this.containerClass = undefined;
+  }
+  createPortal() {
+    document.body.append(this._element);
+  }
+  componentDidLoad() {
+    this.createPortal();
+  }
+  disconnectedCallback() {
+    this._moved ? this._element.remove() : (this._moved = true);
+  }
+  render() {
+    return (hAsync(Host, null, hAsync("slot", null)));
+  }
+  get _element() { return getElement(this); }
+  static get cmpMeta() { return {
+    "$flags$": 4,
+    "$tagName$": "p-portal",
+    "$members$": {
+      "containerClass": [1, "container-class"]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+const profileComponentCss = "/*!@.flex*/.flex.sc-p-profile{display:flex!important}/*!@.table*/.table.sc-p-profile{display:table!important}/*!@.h-\\[3\\.125rem\\]*/.h-\\[3\\.125rem\\].sc-p-profile{height:3.125rem!important}/*!@.h-\\[4\\.125rem\\]*/.h-\\[4\\.125rem\\].sc-p-profile{height:4.125rem!important}/*!@.h-\\[6\\.5rem\\]*/.h-\\[6\\.5rem\\].sc-p-profile{height:6.5rem!important}/*!@.w-full*/.w-full.sc-p-profile{width:100%!important}/*!@.flex-col*/.flex-col.sc-p-profile{flex-direction:column!important}/*!@.items-center*/.items-center.sc-p-profile{align-items:center!important}/*!@.justify-center*/.justify-center.sc-p-profile{justify-content:center!important}/*!@.overflow-hidden*/.overflow-hidden.sc-p-profile{overflow:hidden!important}/*!@.text-ellipsis*/.text-ellipsis.sc-p-profile{text-overflow:ellipsis!important}/*!@.rounded*/.rounded.sc-p-profile{border-radius:.25rem!important}/*!@.border*/.border.sc-p-profile{border-width:1px!important}/*!@.border-solid*/.border-solid.sc-p-profile{border-style:solid!important}/*!@.border-mystic-dark*/.border-mystic-dark.sc-p-profile{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}/*!@.text-sm*/.text-sm.sc-p-profile{font-size:.875rem!important;line-height:1.25rem!important}/*!@**/*.sc-p-profile{box-sizing:border-box}/*!@:host*/.sc-p-profile-h{display:flex}/*!@:host .content*/.sc-p-profile-h .content.sc-p-profile{align-items:center;display:flex;gap:.75rem;width:100%}/*!@:host .content .name*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile{display:flex;flex-direction:column;justify-content:center;overflow:hidden}/*!@:host .content .name>:first-child*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile>.sc-p-profile:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}/*!@:host .content .name>:nth-child(2)*/.sc-p-profile-h .content.sc-p-profile .name.sc-p-profile>.sc-p-profile:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}/*!@:host .content .name ::slotted(*)*/.sc-p-profile-h .content .name .sc-p-profile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host([size=xsmall])*/[size=xsmall].sc-p-profile-h{height:1.5rem}/*!@:host([size=small])*/[size=small].sc-p-profile-h{height:2rem}/*!@:host([size=table])*/[size=table].sc-p-profile-h{height:2.5rem}/*!@:host([size=medium])*/[size=medium].sc-p-profile-h{height:3.125rem}/*!@:host([size=large])*/[size=large].sc-p-profile-h{height:4rem}/*!@:host([size=xlarge])*/[size=xlarge].sc-p-profile-h{height:6.5rem}/*!@:host(.has-dropdown)*/.has-dropdown.sc-p-profile-h{cursor:pointer}/*!@:host(.has-dropdown) .content*/.has-dropdown.sc-p-profile-h .content.sc-p-profile{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}/*!@:host(.has-dropdown[size=small])*/.has-dropdown[size=small].sc-p-profile-h{height:3rem}/*!@:host(.has-dropdown[size=medium])*/.has-dropdown[size=medium].sc-p-profile-h{height:4.125rem}/*!@:host(.has-dropdown[size=large])*/.has-dropdown[size=large].sc-p-profile-h{height:5rem}/*!@:host(.active) .content,:host(.has-dropdown:hover) .content*/.active.sc-p-profile-h .content.sc-p-profile,.has-dropdown.sc-p-profile-h:hover .content.sc-p-profile{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}/*!@:host(.active) .content p-icon*/.active.sc-p-profile-h .content.sc-p-profile p-icon.sc-p-profile{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}/*!@.static*/.static.sc-p-profile{position:static!important}/*!@.absolute*/.absolute.sc-p-profile{position:absolute!important}/*!@.ml-auto*/.ml-auto.sc-p-profile{margin-left:auto!important}/*!@.min-w-0*/.min-w-0.sc-p-profile{min-width:0!important}";
 
 class Profile {
   constructor(hostRef) {
@@ -21111,10 +21174,11 @@ class Profile {
   render() {
     const hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
     const content = this._getContent(hasDropdownSlot);
-    return (hAsync(Host, { class: `p-profile ${hasDropdownSlot && 'has-dropdown'} ${this._dropdownOpen && 'active'}` }, hasDropdownSlot ? (hAsync("p-dropdown", { class: "w-full min-w-0", strategy: "absolute", placement: this.variant === 'user' ? 'top-end' : 'bottom-end', applyFullWidth: true, applyMaxWidth: false, onIsOpen: (ev) => (this._dropdownOpen = ev.detail) }, content, hAsync("div", { slot: "items" }, hAsync("slot", { name: "dropdown" })))) : (content)));
+    const dropdownItems = hAsync("slot", { name: 'dropdown' });
+    return (hAsync(Host, { class: `p-profile ${hasDropdownSlot && 'has-dropdown'} ${this._dropdownOpen && 'active'}` }, hasDropdownSlot ? (hAsync("p-dropdown", { class: 'w-full min-w-0', strategy: 'absolute', placement: this.variant === 'user' ? 'top-end' : 'bottom-end', applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, content, hAsync("div", { slot: 'items' }, dropdownItems))) : (content)));
   }
   _getContent(hasDropdownSlot) {
-    return (hAsync("div", { class: "content", slot: "trigger" }, hAsync("slot", { name: "avatar" }), hAsync("div", { class: "name" }, hAsync("slot", { name: "title" }), hAsync("slot", { name: "subtitle" })), hasDropdownSlot && this._getIcon()));
+    return (hAsync("div", { class: 'content', slot: 'trigger' }, hAsync("slot", { name: 'avatar' }), hAsync("div", { class: 'name' }, hAsync("slot", { name: 'title' }), hAsync("slot", { name: 'subtitle' })), hasDropdownSlot && this._getIcon()));
   }
   _updateAvatar() {
     var _a, _b;
@@ -21126,7 +21190,7 @@ class Profile {
     avatar.size = (_b = this.size) !== null && _b !== void 0 ? _b : avatar === null || avatar === void 0 ? void 0 : avatar.size;
   }
   _getIcon() {
-    return (hAsync("p-icon", { class: "ml-auto", variant: this.variant === 'company' ? 'chevron' : 'more' }));
+    return (hAsync("p-icon", { class: 'ml-auto', variant: this.variant === 'company' ? 'chevron' : 'more' }));
   }
   get _el() { return getElement(this); }
   static get style() { return profileComponentCss; }
@@ -24139,6 +24203,7 @@ registerComponents([
   PageSizeSelect,
   Pagination,
   PaginationItem,
+  Portal,
   Profile,
   SegmentContainer,
   SegmentItem,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paperless/core",
-	"version": "1.64.2",
+	"version": "1.66.0",
 	"description": "Stencil Component Starter",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.js",

package/dist/build/p-2d3ff364.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as o,g as r}from"./p-e4d5e7a7.js";const i=".flex{display:flex!important}.table{display:table!important}.h-\\[3\\.125rem\\]{height:3.125rem!important}.h-\\[4\\.125rem\\]{height:4.125rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-2{padding:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([size=xsmall]){height:1.5rem}:host([size=small]){height:2rem}:host([size=table]){height:2.5rem}:host([size=medium]){height:3.125rem}:host([size=large]){height:4rem}:host([size=xlarge]){height:6.5rem}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding:.5rem}:host(.has-dropdown[size=small]){height:3rem}:host(.has-dropdown[size=medium]){height:4.125rem}:host(.has-dropdown[size=large]){height:5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.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}";const a=class{constructor(e){t(this,e);this.variant="user";this.size="small";this._dropdownOpen=false}componentWillRender(){this._updateAvatar()}render(){const t=!!this._el.querySelector(':scope > [slot="dropdown"]');const r=this._getContent(t);return e(o,{class:`p-profile ${t&&"has-dropdown"} ${this._dropdownOpen&&"active"}`},t?e("p-dropdown",{class:"w-full min-w-0",strategy:"absolute",placement:this.variant==="user"?"top-end":"bottom-end",applyFullWidth:true,applyMaxWidth:false,onIsOpen:t=>this._dropdownOpen=t.detail},r,e("div",{slot:"items"},e("slot",{name:"dropdown"}))):r)}_getContent(t){return e("div",{class:"content",slot:"trigger"},e("slot",{name:"avatar"}),e("div",{class:"name"},e("slot",{name:"title"}),e("slot",{name:"subtitle"})),t&&this._getIcon())}_updateAvatar(){var t,e;const o=this._el.querySelector('p-avatar[slot="avatar"]');if(!o){return}o.variant=(t=this.variant)!==null&&t!==void 0?t:o.variant;o.size=(e=this.size)!==null&&e!==void 0?e:o===null||o===void 0?void 0:o.size}_getIcon(){return e("p-icon",{class:"ml-auto",variant:this.variant==="company"?"chevron":"more"})}get _el(){return r(this)}};a.style=i;export{a as p_profile};
-//# sourceMappingURL=p-2d3ff364.entry.js.map

package/dist/build/p-2d3ff364.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["profileComponentCss","Profile","componentWillRender","this","_updateAvatar","render","hasDropdownSlot","_el","querySelector","content","_getContent","h","Host","class","_dropdownOpen","strategy","placement","variant","applyFullWidth","applyMaxWidth","onIsOpen","ev","detail","slot","name","_getIcon","avatar","_a","size","_b"],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile&encapsulation=shadow","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n\n\t.content {\n\t\t@apply flex gap-3 items-center w-full;\n\n\t\t.name {\n\t\t\t@apply flex flex-col justify-center overflow-hidden;\n\n\t\t\t> *:nth-child(1) {\n\t\t\t\t@apply text-sm text-storm-dark;\n\t\t\t\t@apply font-semibold;\n\t\t\t}\n\n\t\t\t> *:nth-child(2) {\n\t\t\t\t@apply text-sm text-storm-vague;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\t@apply text-ellipsis overflow-hidden whitespace-nowrap;\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host([size='xsmall']) {\n\t@apply h-6;\n}\n\n:host([size='small']) {\n\t@apply h-8;\n}\n\n:host([size='table']) {\n\t@apply h-10;\n}\n\n:host([size='medium']) {\n\t@apply h-[3.125rem];\n}\n\n:host([size='large']) {\n\t@apply h-16;\n}\n\n:host([size='xlarge']) {\n\t@apply h-[6.5rem];\n}\n\n:host(.has-dropdown) {\n\t@apply cursor-pointer;\n\n\t.content {\n\t\t@apply p-2 rounded;\n\t\t@apply border border-solid border-mystic-dark #{!important};\n\t}\n}\n\n:host(.has-dropdown[size='small']) {\n\t@apply h-12;\n}\n\n:host(.has-dropdown[size='medium']) {\n\t@apply h-[4.125rem];\n}\n\n:host(.has-dropdown[size='large']) {\n\t@apply h-20;\n}\n\n:host(.has-dropdown:hover),\n:host(.active) {\n\t.content {\n\t\t@apply shadow-4;\n\t}\n}\n\n:host(.active) {\n\t.content {\n\t\tp-icon {\n\t\t\t@apply text-indigo;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n\tshadow: true,\n})\nexport class Profile {\n\t/**\n\t * The variant of the profile\n\t */\n\t@Prop() variant: 'company' | 'user' = 'user';\n\n\t/**\n\t * The size of the profile avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xsmall'\n\t\t| 'small'\n    | 'table'\n\t\t| 'medium'\n\t\t| 'large'\n\t\t| 'xlarge' = 'small';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t\tconst content = this._getContent(hasDropdownSlot);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-profile ${hasDropdownSlot && 'has-dropdown'} ${\n\t\t\t\t\tthis._dropdownOpen && 'active'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass=\"w-full min-w-0\"\n\t\t\t\t\t\tstrategy=\"absolute\"\n\t\t\t\t\t\tplacement={\n\t\t\t\t\t\t\tthis.variant === 'user' ? 'top-end' : 'bottom-end'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={(ev) => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<div slot=\"items\">\n\t\t\t\t\t\t\t<slot name=\"dropdown\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent(hasDropdownSlot) {\n\t\treturn (\n\t\t\t<div class=\"content\" slot=\"trigger\">\n\t\t\t\t<slot name=\"avatar\" />\n\t\t\t\t<div class=\"name\">\n\t\t\t\t\t<slot name=\"title\" />\n\t\t\t\t\t<slot name=\"subtitle\" />\n\t\t\t\t</div>\n\n\t\t\t\t{hasDropdownSlot && this._getIcon()}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _updateAvatar() {\n\t\tconst avatar = this._el.querySelector(\n\t\t\t'p-avatar[slot=\"avatar\"]'\n\t\t) as HTMLPAvatarElement;\n\n\t\tif (!avatar) {\n\t\t\treturn;\n\t\t}\n\n\t\tavatar.variant = this.variant ?? avatar.variant;\n\t\tavatar.size = this.size ?? avatar?.size;\n\t}\n\n\tprivate _getIcon() {\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass=\"ml-auto\"\n\t\t\t\tvariant={this.variant === 'company' ? 'chevron' : 'more'}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,giF,MCOfC,EAAO,M,sCAImB,O,UAWxB,Q,mBAOmB,K,CAEjC,mBAAAC,GACCC,KAAKC,e,CAGN,MAAAC,GACC,MAAMC,IAAoBH,KAAKI,IAAIC,cAClC,8BAED,MAAMC,EAAUN,KAAKO,YAAYJ,GACjC,OACCK,EAACC,EAAI,CACJC,MAAO,aAAaP,GAAmB,kBACtCH,KAAKW,eAAiB,YAGtBR,EACAK,EAAA,cACCE,MAAM,iBACNE,SAAS,WACTC,UACCb,KAAKc,UAAY,OAAS,UAAY,aAEvCC,eAAgB,KAChBC,cAAe,MACfC,SAAWC,GAAQlB,KAAKW,cAAgBO,EAAGC,QAE1Cb,EACDE,EAAA,OAAKY,KAAK,SACTZ,EAAA,QAAMa,KAAK,eAEA,E,CAQT,WAAAd,CAAYJ,GACnB,OACCK,EAAA,OAAKE,MAAM,UAAUU,KAAK,WACzBZ,EAAA,QAAMa,KAAK,WACXb,EAAA,OAAKE,MAAM,QACVF,EAAA,QAAMa,KAAK,UACXb,EAAA,QAAMa,KAAK,cAGXlB,GAAmBH,KAAKsB,W,CAKpB,aAAArB,G,QACP,MAAMsB,EAASvB,KAAKI,IAAIC,cACvB,2BAGD,IAAKkB,EAAQ,CACZ,M,CAGDA,EAAOT,SAAUU,EAAAxB,KAAKc,WAAO,MAAAU,SAAA,EAAAA,EAAID,EAAOT,QACxCS,EAAOE,MAAOC,EAAA1B,KAAKyB,QAAI,MAAAC,SAAA,EAAAA,EAAIH,IAAM,MAANA,SAAM,SAANA,EAAQE,I,CAG5B,QAAAH,GACP,OACCd,EAAA,UACCE,MAAM,UACNI,QAASd,KAAKc,UAAY,UAAY,UAAY,Q"}