@paperless/core 2.0.1-beta.23 → 2.0.1-beta.24

package/hydrate/index.js

@@ -22775,6 +22775,7 @@ class Field {
         this.placeholder = undefined;
         this.helper = undefined;
         this.required = true;
+        this.autofocus = false;
         this.error = undefined;
         this.errorPlacement = undefined;
         this.disabled = false;
@@ -22795,18 +22796,21 @@ class Field {
     inputRefChange;
     get _el() { return getElement(this); }
     _inputRef;
+    componentDidLoad() {
+        this._checkAutoFocus();
+    }
     render() {
         const { prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, } = this._getSlotInfo();
-        return (hAsync(Host, { key: '6ee18d3003f95e306599804827d24bccb869fbac', class: 'p-field' }, hAsync("p-field-container", { key: '253178a1a1f9d85dc5a2515d7daa3bdec3756685', forceShowTooltip: this.forceShowTooltip || this._focused, label: this.label, helper: this.helper, error: this.error, required: this.required }, hasLabelSlot && (hAsync("slot", { key: '9ae351e4b130f2097c459889614d627426eb73f1', name: 'label', slot: 'label' })), hasHeaderSlot && (hAsync("slot", { key: '06b232eb4d1101e51027b1fcb296076252ec73da', name: 'header', slot: 'header' })), hasHelperSlot && (hAsync("slot", { key: '28bae575c273efc6373d30d80a403508bac4b5f5', name: 'helper', slot: 'helper' })), hasErrorSlot && (hAsync("slot", { key: '9c43b918c2b1901f1e374f300d6189cb31608ecb', name: 'error', slot: 'error' })), hAsync("div", { key: 'e170a99bfbc5fa17c9c4465051219132360a8c3d', class: field({
+        return (hAsync(Host, { key: 'cf990118b7fb2b397a4ed1d00026893fb5d65651', class: 'p-field' }, hAsync("p-field-container", { key: '8957ddbafafbe9be741359ae9c4265bb5c2ab08d', forceShowTooltip: this.forceShowTooltip || this._focused, label: this.label, helper: this.helper, error: this.error, required: this.required }, hasLabelSlot && (hAsync("slot", { key: 'f60081c6a1485f8066715a2e422ea5903f0963a8', name: 'label', slot: 'label' })), hasHeaderSlot && (hAsync("slot", { key: 'e4b78626d1a79acb5b95692158b5809a4b24dd63', name: 'header', slot: 'header' })), hasHelperSlot && (hAsync("slot", { key: '4346e4bc124d1de2ceb4ee4005eb9b661bf677dd', name: 'helper', slot: 'helper' })), hasErrorSlot && (hAsync("slot", { key: '6d0408efce0e27da7d14dfb4aa9fffb38d3b927a', name: 'error', slot: 'error' })), hAsync("div", { key: 'cf6aed5c63d0652a7fa0ca66c562a7c79d57dafa', class: field({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
                 size: this.size,
-            }), slot: 'content' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { key: 'ecf1fb9ec811e26c4123f97f5ba18d6cbc07750b', class: prefixAndSuffic({
+            }), slot: 'content' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { key: 'fb6c0aa6cebc783dc15a44462bc04e89fcd13f13', class: prefixAndSuffic({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
-            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getInput(), (suffix || (this.icon && this.iconPosition === 'end')) && (hAsync("div", { key: 'fb6fcf5c393812d91b01cdb7ebb5bd74767656be', class: prefixAndSuffic({
+            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getInput(), (suffix || (this.icon && this.iconPosition === 'end')) && (hAsync("div", { key: '2822280cb543d2315d062b00b52729f1603b8c6f', class: prefixAndSuffic({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
@@ -22892,6 +22896,16 @@ class Field {
         this.value = value;
         this.valueChange.emit(value);
     }
+    _checkAutoFocus() {
+        if (!this.autofocus) {
+            return;
+        }
+        if (!this._inputRef) {
+            setTimeout(() => this._checkAutoFocus(), 100);
+            return;
+        }
+        this._focusInput();
+    }
     static get style() { return PFieldStyle0; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -22911,6 +22925,7 @@ class Field {
             "placeholder": [1],
             "helper": [1],
             "required": [516],
+            "autofocus": [516],
             "error": [513],
             "errorPlacement": [1, "error-placement"],
             "disabled": [516],
@@ -22923,7 +22938,7 @@ class Field {
         },
         "$listeners$": [[0, "focusin", "handleFocusIn"], [0, "focusout", "handleFocusOut"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["required", "required"], ["error", "error"], ["disabled", "disabled"], ["focused", "focused"], ["forceShowTooltip", "force-show-tooltip"], ["selectAllOnFocus", "select-all-on-focus"]]
+        "$attrsToReflect$": [["required", "required"], ["autofocus", "autofocus"], ["error", "error"], ["disabled", "disabled"], ["focused", "focused"], ["forceShowTooltip", "force-show-tooltip"], ["selectAllOnFocus", "select-all-on-focus"]]
     }; }
 }
 
@@ -23191,6 +23206,9 @@ class Icon {
         this.rotate = 0;
         this.flip = 'none';
     }
+    componentDidLoad() {
+        console.warn('[p-icon-deprecated] Deprecated, please use p-icon');
+    }
     render() {
         const icon = iconsDeprecated[this.variant];
         const styles = {
@@ -23227,7 +23245,7 @@ class Icon {
             '-rotate-270': this.rotate === -270,
             '-rotate-315': this.rotate === -315,
         };
-        return (hAsync(Host, { key: 'd277986b0f5d36dd8999eaca58e2e7740799f072', class: styles, innerHTML: icon }));
+        return (hAsync(Host, { key: '5dea07a6c18881f4b6b0ff852886c7ef36819530', class: styles, innerHTML: icon }));
     }
     static get style() { return PIconDeprecatedStyle0; }
     static get cmpMeta() { return {
@@ -23330,6 +23348,153 @@ class InputError {
     }; }
 }
 
+const inputGroupComponentCss = ".mb-\\[2px\\]{margin-bottom:2px!important}.box-border{box-sizing:border-box!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.py-\\[calc\\(0\\.75rem-1px\\)\\]{padding-bottom:calc(.75rem - 1px)!important;padding-top:calc(.75rem - 1px)!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}.tracking-wider{letter-spacing:.05em!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;outline:2px solid transparent!important;outline-offset:2px!important;width:100%}:host .input-label{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity,1));font-size:.75rem;font-weight:600;letter-spacing:.05em;line-height:1rem;margin-bottom:2px;text-transform:uppercase}:host .input-header{align-items:flex-end;display:flex;gap:.5rem;margin-bottom:2px}:host .content{display:flex;width:100%}:host .content .prefix,:host .content .suffix{--tw-text-opacity:1;box-sizing:border-box;color:rgb(81 83 107/var(--tw-text-opacity,1));flex:1 1 0%;height:100%}:host .content .prefix{border-bottom-right-radius:0;border-right-width:0!important;border-top-right-radius:0;order:1;padding-right:.5rem}:host .content .suffix{border-bottom-left-radius:0;border-left-width:0!important;border-top-left-radius:0;order:3;padding-left:.5rem}:host(.focused),:host(:focus),:host(:focus-within),:host([focused]){outline:2px solid transparent!important;outline-offset:2px!important}:host(.focused) .prefix,:host(.focused) .suffix,:host(:focus) .prefix,:host(:focus) .suffix,:host(:focus-within) .prefix,:host(:focus-within) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}:host(.error) .prefix,:host(.error) .suffix,:host([error]) .prefix,:host([error]) .suffix{--tw-text-opacity:1;color:rgb(185 30 40/var(--tw-text-opacity,1))}:host(.error) .suffix,:host([error]) .suffix{align-items:flex-start;padding-bottom:calc(.75rem - 1px);padding-top:calc(.75rem - 1px)}:host(.size-small.error) .suffix,:host(.size-small[error]) .suffix{padding-bottom:.5rem;padding-top:.5rem}.static{position:static!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.justify-between{justify-content:space-between!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity,1))!important}";
+var PInputGroupStyle0 = inputGroupComponentCss;
+
+class InputGroup {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 'medium';
+        this.prefix = undefined;
+        this.suffix = undefined;
+        this.icon = undefined;
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.iconPosition = 'start';
+        this.label = undefined;
+        this.helper = undefined;
+        this.required = undefined;
+        this.error = undefined;
+        this.disabled = false;
+        this.focused = false;
+        this.forceShowTooltip = false;
+        this.focusMethod = 'focus';
+        this.errorVariant = 'auto';
+        this._forceShowTooltip = false;
+    }
+    get _el() { return getElement(this); }
+    _whitelistedTags = ['input', 'textarea'];
+    componentDidLoad() {
+        console.warn('[p-input-group] Deprecated, please use p-field');
+    }
+    componentWillRender() {
+        this._setInputClasses();
+    }
+    render() {
+        const { hasHeaderSlot, helper, label, prefix, suffix, errorAndErrorIsNotBoolean, errorVariant, } = this._getSlotInfo();
+        return (hAsync(Host, { key: '9848be9dc18dbb66de4ffaeb0fd6377204355127', class: `p-input-group ${this.error?.length && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` }, hAsync("div", { key: '4d4035d525fe79a6afbd669bf49302fbd96ee4a9', class: 'flex items-end justify-between' }, label && (hAsync("div", { key: '859e6c72d70ddd2b62c72170be460452d0d87d11', class: 'input-label', onClick: () => this._focusInput() }, label, this.required && hAsync("span", { key: '19c99b31a2d0f5b6f03971b6441e459653e3af13', class: 'ml-1 text-negative' }, "*"))), (helper || hasHeaderSlot) && (hAsync("div", { key: '3e2abec6c63ae8d26b42316d48516992c2bc699b', class: 'input-header' }, hasHeaderSlot && hAsync("slot", { key: '1d100f887f1345ccfcf11e97d7667dd94355f026', name: 'header' }), helper && (hAsync("p-helper", { key: '9dbf5401cd26db9421c526bd406c683829abd877', class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: 'top-end' }, helper))))), hAsync("p-tooltip", { key: '71ef03a090b4311c14d7c935809f147140791e9e', class: 'w-full', variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean &&
+                errorVariant === 'element' &&
+                (this.forceShowTooltip || this._forceShowTooltip), enableUserInput: false }, hAsync("div", { key: '21bda229af33f22f4080ef66cd2b2821f755edd6', class: 'content', slot: 'trigger' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { key: '21f4e49db797a4ee2e6caee81d952858cc550567', 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", { key: '033bc354c872c0b9fb351182d7466515642d3f9b', 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", { key: '1dc6aa666c99246ba2d532c435987875528af5f6', name: 'input' })))));
+    }
+    handleFocusIn() {
+        this._forceShowTooltip = true;
+    }
+    handleFocusOut() {
+        this._forceShowTooltip = false;
+    }
+    /*
+     With this, we shall hack the system in ways no one would ever have thought.
+
+     <div class="pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none"></div>
+     */
+    _setInputClasses() {
+        const input = this._el.querySelector(':scope > [slot="input"]');
+        if (!input) {
+            return;
+        }
+        const tagName = input.tagName.toLowerCase();
+        if (this._whitelistedTags.indexOf(tagName) === -1) {
+            return;
+        }
+        if (!input.classList.contains('p-input')) {
+            input.classList.add('p-input');
+        }
+        const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } = this._getSlotInfo();
+        if (suffix ||
+            (errorAndErrorIsNotBoolean && errorVariant === 'icon') ||
+            (this.icon && this.iconPosition === 'end')) {
+            input.classList.add('border-r-0', 'rounded-tr-none', 'rounded-br-none', 'pr-0');
+        }
+        else {
+            input.classList.remove('border-r-0', 'rounded-tr-none', 'rounded-br-none', 'pr-0');
+        }
+        if (prefix || (this.icon && this.iconPosition === 'start')) {
+            input.classList.add('border-l-0', 'rounded-tl-none', 'rounded-bl-none', 'pl-0');
+        }
+        else {
+            input.classList.remove('border-l-0', 'rounded-tl-none', 'rounded-bl-none', 'pl-0');
+        }
+        if (this.size === 'small' && !input.classList.contains('size-small')) {
+            input.classList.add('size-small');
+        }
+        if (this.size !== 'small' && input.classList.contains('size-small')) {
+            input.classList.remove('size-small');
+        }
+    }
+    _getSlotInfo() {
+        const hasHelperSlot = !!this._el.querySelector(':scope > [slot="helper"]');
+        const hasLabelSlot = !!this._el.querySelector(':scope > [slot="label"]');
+        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';
+        return {
+            hasHelperSlot,
+            hasLabelSlot,
+            hasPrefixSlot,
+            hasSuffixSlot,
+            hasHeaderSlot,
+            helper,
+            label,
+            prefix,
+            suffix,
+            errorAndErrorIsNotBoolean,
+            errorVariant: this.errorVariant === 'auto'
+                ? this._el.offsetWidth <= 72
+                    ? 'element'
+                    : 'icon'
+                : this.errorVariant,
+        };
+    }
+    _focusInput() {
+        const input = this._el.querySelector(':scope > [slot="input"]');
+        input[this.focusMethod]();
+    }
+    static get style() { return PInputGroupStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "p-input-group",
+        "$members$": {
+            "size": [1],
+            "prefix": [1],
+            "suffix": [1],
+            "icon": [1],
+            "iconFlip": [1, "icon-flip"],
+            "iconRotate": [2, "icon-rotate"],
+            "iconPosition": [1, "icon-position"],
+            "label": [1],
+            "helper": [1],
+            "required": [516],
+            "error": [513],
+            "disabled": [516],
+            "focused": [516],
+            "forceShowTooltip": [516, "force-show-tooltip"],
+            "focusMethod": [1, "focus-method"],
+            "errorVariant": [1, "error-variant"],
+            "_forceShowTooltip": [32]
+        },
+        "$listeners$": [[0, "focusin", "handleFocusIn"], [0, "focusout", "handleFocusOut"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["required", "required"], ["error", "error"], ["disabled", "disabled"], ["focused", "focused"], ["forceShowTooltip", "force-show-tooltip"]]
+    }; }
+}
+
 const labelComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-full{border-radius:9999px!important}.bg-amber-100{--tw-bg-opacity:1!important;background-color:rgb(255 246 194/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-positive-green-100{--tw-bg-opacity:1!important;background-color:rgb(213 251 199/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-white-700{--tw-bg-opacity:1!important;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-amber-800{--tw-text-opacity:1!important;color:rgb(148 77 11/var(--tw-text-opacity,1))!important}.text-dark-teal-800{--tw-text-opacity:1!important;color:rgb(1 37 33/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-positive-green-800{--tw-text-opacity:1!important;color:rgb(47 100 7/var(--tw-text-opacity,1))!important}.text-supportive-lilac-900{--tw-text-opacity:1!important;color:rgb(80 9 179/var(--tw-text-opacity,1))!important}@media (min-width:64rem){.desktop-xs\\:block{display:block!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}";
 var PLabelStyle0 = labelComponentCss;
 
@@ -23370,14 +23535,14 @@ class Label {
         this.keepMobileContent = false;
     }
     render() {
-        return (hAsync(Host, { key: 'b65dfe6ae11bfa1309561cd1aa1fb0c2c71b5535', class: 'p-label' }, hAsync("div", { key: '4e6b4648f1778aadee757fab902bae7281f5a5ff', class: label({
+        return (hAsync(Host, { key: '04c0b2510fd1ae8cad957ee02d7d54245b7fdbb0', class: 'p-label' }, hAsync("div", { key: '7dfd0871e52cef46c49f0c30e58facfa603c5d0f', class: label({
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (hAsync("p-icon", { key: 'a1ef1bf1d58046c3ceeadb1def0030b547a6297c', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (hAsync("div", { key: '961a9f05c969fdb3b1d31f706a370084dd365ab1', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
+            }) }, this.icon && (hAsync("p-icon", { key: 'b70587122206d6b26785cbf5e9e8219219aeb7d0', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (hAsync("div", { key: '5426ae86e86f205b04130628923f3d53747c85d5', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm', {
                 hidden: !this.keepMobileContent,
                 'desktop-xs:block': !this.keepMobileContent,
-            }) }, hAsync("slot", { key: 'ffa41b6d694819b6b438c4ea58485e78c41d34a6' }))))));
+            }) }, hAsync("slot", { key: '62413d44b71c12291cb13997e839774d2b047fdd' }))))));
     }
     static get style() { return PLabelStyle0; }
     static get cmpMeta() { return {
@@ -23817,7 +23982,7 @@ class Navbar {
         this._show = false;
     }
     render() {
-        return (hAsync(Host, { key: '933b55e6875b50546cd980e5c4f7c923cd6cbd11', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, hAsync("p-backdrop", { key: '9fb8220b757a0571b77620f394b92fe78d578ba5', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), hAsync("div", { key: 'c24c80eca5ec18ee39df438c591e55ff683a9c06', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, hAsync("div", { key: '6338aee239fa25bef1555f5b085d0682c8122c94', class: 'flex w-full items-center justify-between layout-1280:hidden' }, hAsync("p-button", { key: '7768db8078e996b9b0d08a38d7a63329513d4d7b', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), hAsync("div", { key: 'b736053b767173fe3da99b1c270ce95eff3376fd', class: 'flex w-full flex-col items-stretch' }, hAsync("slot", { key: '570c7aab38574229bf5f118c7b8196cc93b69992', name: 'company' })), hAsync("div", { key: 'e0d69dc2869eda05e854eb167d72436412669978', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, hAsync("slot", { key: '02e79fdd87b22514e602fa8ace2b4091dde7126a', name: 'content' })), hAsync("div", { key: 'dc66843c8beabbbcb21b1e3c937192b2dba656d2', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, hAsync("slot", { key: 'b08ed35bb831aa4bc6076a4d5b4d5d1fb4c960d3', name: 'user' }))), hAsync("div", { key: 'b15ae515d4872501b143aa3dc30d40e7004da088', class: topbar({ class: sidebarAndTopbar() }) }, hAsync("p-button", { key: '96628a7f7741fc9d71d68e1744e727a95dec9552', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), hAsync("slot", { key: '22a596e750b0541a9dabf0d9857c294d77acea58', name: 'topbar' }))));
+        return (hAsync(Host, { key: '5702b79e2c26e706ad4101b89f53de842fcb80b6', class: 'p-navbar w-full max-h-screen-safe layout-1280:w-60 layout-1680:w-72' }, hAsync("p-backdrop", { key: 'c5fa86a7922261ce0c52a30f397a912da999b705', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), hAsync("div", { key: 'cea2c0276187ee5e86eea96879774d34d4439828', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, hAsync("div", { key: '7da029ff6de0ce27e5652a2995e1350384a0c83f', class: 'flex w-full items-center justify-between layout-1280:hidden' }, hAsync("p-button", { key: '5bd366656745c2998e979bfb4650e17290c3e288', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, size: 'sm', onClick: () => (this._show = false) })), hAsync("div", { key: '5fc3e1b70f45905c8a6dfbf85251a5edc8571b78', class: 'flex w-full flex-col items-stretch' }, hAsync("slot", { key: '99f3a9c3bcf2f53b1bb69c14fd30d8f3dd850a23', name: 'company' })), hAsync("div", { key: '47dbf4bb5cde7b785401df9584ed6ae155329be1', class: 'flex w-full flex-col gap-6 overflow-y-auto' }, hAsync("slot", { key: '8220bc3836bb64fe353d1585003d005cb5c04bd4', name: 'content' })), hAsync("div", { key: 'a04e5098279b15f9526fcba60ce000e552d6b3b4', class: 'mt-auto hidden w-full flex-col layout-1280:flex' }, hAsync("slot", { key: '6902b1780e7e8e9642caa22e467adc938c335c2c', name: 'user' }))), hAsync("div", { key: '54e624bd9bed375fe496a7ebb0ea26a92c6cf5f5', class: topbar({ class: sidebarAndTopbar() }) }, hAsync("p-button", { key: '8b8df57e642e4e4fdc1848271c8104f3489ad269', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', size: 'sm', onClick: () => (this._show = true) }), hAsync("slot", { key: 'ea415e56ec47a30ca4005d0c138f2c6bdc7abf22', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;
@@ -23884,10 +24049,10 @@ class NavigationItem {
     render() {
         const TagType = this.as;
         const active = this.active || this.class?.includes('active');
-        return (hAsync(Host, { key: 'f87e67e61239b95e49d93b9bd07686b7b70477a9', class: cn('p-navigation-item inline-block', this.class) }, hAsync(TagType, { key: '67c327313aa12d7fe54389bc298ca23b3e17437a', class: navigationItem({
+        return (hAsync(Host, { key: '6b12fc10340027d176fc9fa9699ff62a9f200c06', class: cn('p-navigation-item inline-block', this.class) }, hAsync(TagType, { key: '447c6dfb9e7cd9a426dfc83a786117ecd809ed23', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, hAsync("div", { key: 'b1de70235c4bb1bff509db3f1723c106e50614d9', class: navigationItemIconContainer({ active }) }, hAsync("p-icon", { key: 'debe4fce9441178c12c4198cab3c94247db0cd49', variant: this.icon })), hAsync("span", { key: 'f6e9daee27dc7fc467c1d6e5d50b3f2d9aaa3cf8', class: this.counter && 'has-counter' }, hAsync("slot", { key: 'c10c72c8c3ad0f8b238ed69636ca2b8e3291dc44' })), !!this.counter && this.counter !== '0' && (hAsync("p-badge", { key: '4bb1889d85efdac8e80a398fcb3769dc55b26ee3' }, this.counter)), !!this.loading && hAsync("p-loader", { key: '80b43031e00df08c342df9872caa928dcbc87650', class: 'ml-auto' }))));
+            }), href: this.href, target: this.target }, hAsync("div", { key: 'ee2fb03620b46d75f34887c1426abe3090dd50f8', class: navigationItemIconContainer({ active }) }, hAsync("p-icon", { key: '92ae190b1b415939e23476403dfc7ea7065db3f6', variant: this.icon })), hAsync("span", { key: 'd56fbd8fdffc8a20b98d4d4a25dd68eb1e2548e0', class: this.counter && 'has-counter' }, hAsync("slot", { key: 'd1baea6b23dab3cc3db75ab4c6c5b660977475c6' })), !!this.counter && this.counter !== '0' && (hAsync("p-badge", { key: 'd50225f39e08b412b622055438584ad9aa02b4c1' }, this.counter)), !!this.loading && hAsync("p-loader", { key: '10ab89e057f00442ad0dab32c0342ad16daf667a', class: 'ml-auto' }))));
     }
     static get style() { return PNavigationItemStyle0; }
     static get cmpMeta() { return {
@@ -23918,7 +24083,7 @@ class NavigationSection {
         this.header = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '2498f9f2121a61e9a086faa32e676ac8a59bbe7b', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (hAsync("p-navigation-title", { key: '04a310fc04574b350c1d36cb57b23537a25a8b6e' }, this.header)), hAsync("div", { key: 'd444fee83c080992f04ed3e0c977b8687198633c', class: 'flex flex-col' }, hAsync("slot", { key: 'fde7c2c5be6223b0ae89c2708c74bd0d840de2f1' }))));
+        return (hAsync(Host, { key: '2278321f85bd2cc19317f416174aee1d2797ff56', class: 'p-navigation-section flex flex-col gap-2' }, this.header?.length > 0 && (hAsync("p-navigation-title", { key: '2eba4771425254e503d02470d0b7caeb18cac710' }, this.header)), hAsync("div", { key: 'bf1ffb4905308dbc7694e911ca171be4686e0300', class: 'flex flex-col' }, hAsync("slot", { key: 'e646b3ae3781eea037ff358dc59937d847f2b956' }))));
     }
     static get style() { return PNavigationSectionStyle0; }
     static get cmpMeta() { return {
@@ -24038,7 +24203,7 @@ class Pagination {
         this._generate();
     }
     render() {
-        return (hAsync(Host, { key: 'b78ab074e0cbaf260070e2ae6689c58d44474132', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
+        return (hAsync(Host, { key: '3568c3e866dcd2ffee3fb8acd34a81d63e564068', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {
                 return (hAsync("p-pagination-item", { onClick: () => p.type === 'previous'
                         ? this._previousClick()
@@ -24271,7 +24436,7 @@ class Profile {
     }
     render() {
         const content = this._getContent();
-        return (hAsync(Host, { key: '9313ef616b33a4491b7a8bd6ebe647b3e334c168', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (hAsync("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, hAsync("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), hAsync("div", { slot: 'items' }, hAsync("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+        return (hAsync(Host, { key: 'a9482eb4aab89a3dff60ec39ecc2be00b1b8036f', class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (hAsync("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, hAsync("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), hAsync("div", { slot: 'items' }, hAsync("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
     }
     slotchange() {
         this._checkDropdownSlot();
@@ -24668,7 +24833,7 @@ class Select {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'bbcf5a411b3516151b5cde49e83e637e8f275d6d', class: 'p-select' }, hAsync("p-dropdown", { key: '0a75a3e234fe53fd205cda607860b12ae864c998', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, hAsync("p-field-container", { key: 'd09b7269c07ab493d9372481165f88c383210230', slot: 'trigger', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, errorPlacement: 'top-start', forceShowTooltip: this.error?.length && this._showDropdown }, hAsync("p-button", { key: 'ae1626f92d3a509e0cab45faa11a9965b12d27aa', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron, disabled: this.disabled, active: this._showDropdown, icon: this.icon, onClick: ev => this._onClick(ev) }, hAsync("div", { key: '9d53222285fdc827c4df5468e38a491399496f01', class: 'relative flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue))), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem())));
+        return (hAsync(Host, { key: 'f62a834435e5a23ac883458bbbc6584fc475585a', class: 'p-select' }, hAsync("p-dropdown", { key: 'f052fca097cd93660e1319d9e697cddfa849adbb', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, hAsync("p-field-container", { key: 'abeced0d91a257f87f02cd6c22ee150ed66b3c4f', slot: 'trigger', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, errorPlacement: 'top-start', forceShowTooltip: this.error?.length && this._showDropdown }, hAsync("p-button", { key: 'ac9f12fbab1e18cb05c406b90d9d615220626ed3', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron, disabled: this.disabled, active: this._showDropdown, icon: this.icon, onClick: ev => this._onClick(ev) }, hAsync("div", { key: '00962c1d7e8cc69860a071cf4f4ff48ae096c43d', class: 'relative flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue))), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem())));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {
@@ -25149,7 +25314,7 @@ class Stepper {
         this._generateSteps(true);
     }
     render() {
-        return (hAsync(Host, { key: 'dab66ec915bdfc6db37204746035c9fa25beb364', class: 'p-stepper' }, hAsync("slot", { key: '614787c115b5f21dd50d589acfb830c84fc84173', onSlotchange: this._onSlotChange })));
+        return (hAsync(Host, { key: '8fa52e3d517deebb230039f2938893a14fb5613e', class: 'p-stepper' }, hAsync("slot", { key: '385c27e425dad328346910e77f42d7fdc32183b8', onSlotchange: this._onSlotChange })));
     }
     _onActiveStepChange() {
         this._generateSteps();
@@ -26006,7 +26171,7 @@ class TableCell {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'e9622200c7747ae2dd3611252f87c1781ecfc0c0', class: {
+        return (hAsync(Host, { key: 'fdd68a4b75fa75a0301b2721d81a069cac64d098', class: {
                 'p-table-cell': true,
                 [`variant-${this.variant}`]: true,
                 ...this._getColumnClasses(),
@@ -26156,7 +26321,7 @@ class TableFooter {
     }
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];
-        return (hAsync(Host, { key: '16588e28b4c1a74e0d8fd1324ad0ca5f3d9764ec', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (hAsync("p-page-size-select", { key: 'a09d397cc4f1792809aa2226280baf00db625b51', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (hAsync("p-loader", { key: '949f8e777163603ad66142ec7da8957c8eeb4600', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (hAsync("p-pagination", { key: '296c3e4d342def9fd72fff8c6d27561b3fbab522', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (hAsync("p-button", { key: 'be27ba3f224e267b80f43d03d07be3359f22ef76', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
+        return (hAsync(Host, { key: '8c85669efe0bdc3f14fe0dfb5cbca5a38451b2ca', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (hAsync("p-page-size-select", { key: '69cb04177926201d314ab138ac72452d9a32ccd3', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (hAsync("p-loader", { key: '4601f2a8736bb05af33159769bfba2e1854c8cdf', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (hAsync("p-pagination", { key: 'e9c672d24d92cb973482a37b16f8a1210fb17345', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (hAsync("p-button", { key: '3f6942fb87389cb69281e397134f857d2cedb87c', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
@@ -27225,9 +27390,9 @@ class TableRow {
         this.enableHover = true;
     }
     render() {
-        return (hAsync(Host, { key: '84fafc96af5423eca823b2702a4b878a03c76565', class: `p-table-row variant-${this.variant} ${this.enableHover &&
+        return (hAsync(Host, { key: '962ec4f0187a22416270df391edb910c6584fc57', class: `p-table-row variant-${this.variant} ${this.enableHover &&
                 this.variant === 'default' &&
-                'enable-hover'} group` }, hAsync("div", { key: '968888482a3d22ec973cda8a9618e3a3b59c2ff4', class: "content" }, hAsync("slot", { key: '934e900af0720877e705d78a9cfbddf033206326' })), this.variant === 'default' && hAsync("p-divider", { key: '5c443bc203dd2cdb0641b41db9824a26646239eb', class: "m-0" })));
+                'enable-hover'} group` }, hAsync("div", { key: '45deb1c2a22e4afdf99b3e4f407f8ceedc3769fc', class: "content" }, hAsync("slot", { key: 'd9bae05aad34f48ef13598e432813ffacab3d3f6' })), this.variant === 'default' && hAsync("p-divider", { key: 'efdc3dcb43ea3f74786495f62ceaf7b6a62908d6', class: "m-0" })));
     }
     static get style() { return PTableRowStyle0; }
     static get cmpMeta() { return {
@@ -27301,7 +27466,7 @@ class Toast {
      */
     action;
     render() {
-        return (hAsync(Host, { key: '45995dbf55e1f5da083853de2a84a8b2fabecae3', class: `p-toast variant-${this.variant}`, onClick: () => this._onClick() }, hAsync("div", { key: '21cc758c734909d3ac31b57174ac48117086ea8b', class: 'flex w-full min-w-0 flex-col' }, hAsync("p", { key: '6d9e38a1ff99eb3cca01492a1b23b1855d47e6c2', class: 'font-semibold text-storm' }, this.header?.length ? this.header : hAsync("slot", { name: 'header' })), hAsync("p", { key: 'e9cb052a385dc14e0485944518548365f743a3e4', class: 'w-full text-sm text-storm-medium' }, this.content?.length ? this.content : hAsync("slot", { name: 'content' }))), this.enableAction && (hAsync("p-button", { key: '3622337e6595749610b400498a5c8860adc9ab32', variant: 'secondary', iconOnly: true, size: 'sm', icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, class: 'flex-shrink-0' }))));
+        return (hAsync(Host, { key: '8037040911805538a87e382891c638dc02b60206', class: `p-toast variant-${this.variant}`, onClick: () => this._onClick() }, hAsync("div", { key: '3d62bfbdc62f0aad9f0b2aa399b881498328329c', class: 'flex w-full min-w-0 flex-col' }, hAsync("p", { key: '6025fc8d67bdaeff8e43ae6b65aed1c12a42a107', class: 'font-semibold text-storm' }, this.header?.length ? this.header : hAsync("slot", { name: 'header' })), hAsync("p", { key: '39b41b1033a0b4eaaca958949556cae1037d0019', class: 'w-full text-sm text-storm-medium' }, this.content?.length ? this.content : hAsync("slot", { name: 'content' }))), this.enableAction && (hAsync("p-button", { key: '0b58b68d606925c26007d2e00437a3e2c69bfd0f', variant: 'secondary', iconOnly: true, size: 'sm', icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, class: 'flex-shrink-0' }))));
     }
     _onClick() {
         if (this.enableAction) {
@@ -27756,6 +27921,7 @@ registerComponents([
   Illustration,
   InfoPanel,
   InputError,
+  InputGroup,
   Label,
   Layout,
   Loader,