@unipin/angular-applet 18.5.2-beta → 18.5.6

package/fesm2022/unipin-angular-applet.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Attribute, HostBinding, PlatformRef, VERSION, enableProdMode, NgZone, Injectable, Inject, Directive, inject, NgModule, HostListener, Pipe, ContentChildren } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule, Location, formatDate, DatePipe, JsonPipe } from '@angular/common';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Attribute, HostBinding, enableProdMode, NgZone, Injectable, Inject, Directive, inject, NgModule, HostListener, Pipe, ContentChildren } from '@angular/core';
 import * as i1 from '@ionic/angular';
 import { IonButton, IonicModule, NavController } from '@ionic/angular';
 import * as i1$2 from '@angular/router';
-import { Router, RouterLink, RouterLinkActive, NavigationEnd, RouterModule } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { Subject, fromEvent, distinctUntilChanged, debounceTime, tap, switchMap, map, catchError, of, concat, filter, throwError } from 'rxjs';
-import { platformBrowser } from '@angular/platform-browser';
+import { Location, DatePipe, AsyncPipe, NgStyle, NgTemplateOutlet, formatDate, JsonPipe } from '@angular/common';
+import { bootstrapApplication, createApplication } from '@angular/platform-browser';
+import { createCustomElement } from '@angular/elements';
 import * as i1$1 from 'apollo-angular';
 import { gql } from 'apollo-angular';
-import * as i3 from 'angular-split';
+import * as i2 from 'angular-split';
 import { AngularSplitModule } from 'angular-split';
-import * as i3$1 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@ng-select/ng-select';
+import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { ModuleRegistry } from '@ag-grid-community/core';
 export { GridApi } from '@ag-grid-community/core';
@@ -42,15 +42,14 @@ class ButtonLoadingComponent {
         this.btn.disabled = !this.btn.disabled;
         this.ch.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ButtonLoadingComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ButtonLoadingComponent, isStandalone: true, selector: "up-btn-loading", inputs: { disabled: "disabled", form: "form", type: "type", fill: "fill", color: "color" }, outputs: { onClick: "onClick" }, viewQueries: [{ propertyName: "btn", first: true, predicate: IonButton, descendants: true }], ngImport: i0, template: "<ion-button type=\"{{ type }}\" fill=\"{{ fill }}\" color=\"{{ color }}\" expand=\"block\" mode=\"md\" [disabled]=\"disabled\" [form]=\"form\" (click)=\"clickBtn()\">\n    <ion-spinner *ngIf=\"isLoading;else showIcon\" />\n    \n    <ng-template #showIcon>\n        <ng-content select=\"ion-icon\" />\n    </ng-template>\n\n    <ng-content />\n</ion-button>\n", styles: ["ion-spinner{width:14px;height:14px;margin-right:8px}circle{stroke-width:8}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ButtonLoadingComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ButtonLoadingComponent, isStandalone: true, selector: "up-btn-loading", inputs: { disabled: "disabled", form: "form", type: "type", fill: "fill", color: "color" }, outputs: { onClick: "onClick" }, viewQueries: [{ propertyName: "btn", first: true, predicate: IonButton, descendants: true }], ngImport: i0, template: "<ion-button type=\"{{ type }}\" fill=\"{{ fill }}\" color=\"{{ color }}\" expand=\"block\" mode=\"md\" [disabled]=\"disabled\" [form]=\"form\" (click)=\"clickBtn()\">\n    @if (isLoading) {\n        <ion-spinner />\n    } @else {\n        <ng-content select=\"ion-icon\" />\n    }\n    \n    <ng-content />\n</ion-button>\n", styles: ["ion-spinner{width:14px;height:14px;margin-right:8px}circle{stroke-width:8}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ButtonLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ButtonLoadingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-btn-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        IonicModule,
-                        CommonModule
-                    ], template: "<ion-button type=\"{{ type }}\" fill=\"{{ fill }}\" color=\"{{ color }}\" expand=\"block\" mode=\"md\" [disabled]=\"disabled\" [form]=\"form\" (click)=\"clickBtn()\">\n    <ion-spinner *ngIf=\"isLoading;else showIcon\" />\n    \n    <ng-template #showIcon>\n        <ng-content select=\"ion-icon\" />\n    </ng-template>\n\n    <ng-content />\n</ion-button>\n", styles: ["ion-spinner{width:14px;height:14px;margin-right:8px}circle{stroke-width:8}\n"] }]
+                        IonicModule
+                    ], template: "<ion-button type=\"{{ type }}\" fill=\"{{ fill }}\" color=\"{{ color }}\" expand=\"block\" mode=\"md\" [disabled]=\"disabled\" [form]=\"form\" (click)=\"clickBtn()\">\n    @if (isLoading) {\n        <ion-spinner />\n    } @else {\n        <ng-content select=\"ion-icon\" />\n    }\n    \n    <ng-content />\n</ion-button>\n", styles: ["ion-spinner{width:14px;height:14px;margin-right:8px}circle{stroke-width:8}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], form: [{
@@ -88,16 +87,15 @@ class ButtonGroupComponent {
         this.activeIndex = i;
         this.popoverCtrl.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: 'id', attribute: true }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ButtonGroupComponent, isStandalone: true, selector: "up-btn-group", inputs: { config: "config" }, host: { properties: { "class.d-none": "this.isHidden" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"config.length > 0\">\n    <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"config[activeIndex].type\" [disabled]=\"config[activeIndex].disabled\" [form]=\"config[activeIndex].form\" [color]=\"config[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n        <ion-icon class=\"me-2\" name=\"{{ config[activeIndex].icon }}\" *ngIf=\"config[activeIndex].icon\" />\n        {{ config[activeIndex].label }}\n    </up-btn-loading>\n\n    <ng-container *ngIf=\"config.length > 1\" >\n        <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"config[activeIndex].color\">\n            <ion-icon name=\"caret-down-outline\" />\n        </ion-button>\n    \n        <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n            <ng-template>\n                <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" *ngFor=\"let c of config; let i = index\" (click)=\"change(i);\">\n                    <div class=\"icon flex-shrink-0\">\n                        <ion-icon name=\"checkmark\" *ngIf=\"i === activeIndex\" />\n                    </div>\n    \n                    <div class=\"flex-grow-1\">\n                        <div class=\"fw-medium\">{{ c.label }}</div>\n                        <div class=\"f12 pt-1\" *ngIf=\"c.description\">\n                            {{ c.description }}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </ion-popover>\n    </ng-container>\n</ng-container>\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonLoadingComponent, selector: "up-btn-loading", inputs: ["disabled", "form", "type", "fill", "color"], outputs: ["onClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: 'id', attribute: true }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ButtonGroupComponent, isStandalone: true, selector: "up-btn-group", inputs: { config: "config" }, host: { properties: { "class.d-none": "this.isHidden" } }, usesOnChanges: true, ngImport: i0, template: "@if (config.length > 0) {\n    <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"config[activeIndex].type\" [disabled]=\"config[activeIndex].disabled\" [form]=\"config[activeIndex].form\" [color]=\"config[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n        @if (config[activeIndex].icon) {\n            <ion-icon class=\"me-2\" name=\"{{ config[activeIndex].icon }}\" />\n        }\n\n        {{ config[activeIndex].label }}\n    </up-btn-loading>\n\n    @defer (when config.length > 1) {\n        <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"config[activeIndex].color\">\n            <ion-icon name=\"caret-down-outline\" />\n        </ion-button>\n\n        <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n            <ng-template>\n                @for (c of config; track $index; let i = $index) {\n                    <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" (click)=\"change(i);\">\n                        <div class=\"icon flex-shrink-0\">\n                            @if (i === activeIndex) {\n                                <ion-icon name=\"checkmark\" />\n                            }\n                        </div>\n                \n                        <div class=\"flex-grow-1\">\n                            <div class=\"fw-medium\">{{ c.label }}</div>\n                                \n                            @if (c.description) {\n                                <div class=\"f12 pt-1\">\n                                    {{ c.description }}\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </ng-template>\n        </ion-popover>\n    }\n}\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonLoadingComponent, selector: "up-btn-loading", inputs: ["disabled", "form", "type", "fill", "color"], outputs: ["onClick"] }], deferBlockDependencies: [() => [i1.IonButton, i1.IonIcon, i1.IonPopover]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-btn-group', imports: [
                         IonicModule,
-                        CommonModule,
                         ButtonLoadingComponent
-                    ], template: "<ng-container *ngIf=\"config.length > 0\">\n    <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"config[activeIndex].type\" [disabled]=\"config[activeIndex].disabled\" [form]=\"config[activeIndex].form\" [color]=\"config[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n        <ion-icon class=\"me-2\" name=\"{{ config[activeIndex].icon }}\" *ngIf=\"config[activeIndex].icon\" />\n        {{ config[activeIndex].label }}\n    </up-btn-loading>\n\n    <ng-container *ngIf=\"config.length > 1\" >\n        <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"config[activeIndex].color\">\n            <ion-icon name=\"caret-down-outline\" />\n        </ion-button>\n    \n        <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n            <ng-template>\n                <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" *ngFor=\"let c of config; let i = index\" (click)=\"change(i);\">\n                    <div class=\"icon flex-shrink-0\">\n                        <ion-icon name=\"checkmark\" *ngIf=\"i === activeIndex\" />\n                    </div>\n    \n                    <div class=\"flex-grow-1\">\n                        <div class=\"fw-medium\">{{ c.label }}</div>\n                        <div class=\"f12 pt-1\" *ngIf=\"c.description\">\n                            {{ c.description }}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </ion-popover>\n    </ng-container>\n</ng-container>\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"] }]
+                    ], template: "@if (config.length > 0) {\n    <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"config[activeIndex].type\" [disabled]=\"config[activeIndex].disabled\" [form]=\"config[activeIndex].form\" [color]=\"config[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n        @if (config[activeIndex].icon) {\n            <ion-icon class=\"me-2\" name=\"{{ config[activeIndex].icon }}\" />\n        }\n\n        {{ config[activeIndex].label }}\n    </up-btn-loading>\n\n    @defer (when config.length > 1) {\n        <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"config[activeIndex].color\">\n            <ion-icon name=\"caret-down-outline\" />\n        </ion-button>\n\n        <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n            <ng-template>\n                @for (c of config; track $index; let i = $index) {\n                    <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" (click)=\"change(i);\">\n                        <div class=\"icon flex-shrink-0\">\n                            @if (i === activeIndex) {\n                                <ion-icon name=\"checkmark\" />\n                            }\n                        </div>\n                \n                        <div class=\"flex-grow-1\">\n                            <div class=\"fw-medium\">{{ c.label }}</div>\n                                \n                            @if (c.description) {\n                                <div class=\"f12 pt-1\">\n                                    {{ c.description }}\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </ng-template>\n        </ion-popover>\n    }\n}\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['id']
@@ -123,91 +121,30 @@ function setGlobalStateSlice(slice) {
     return Object.assign(getGlobalState(), slice);
 }
 
-let ngZoneSharing = true;
-let platformSharing = true;
-let legacyMode = true;
-function getMajor(version) {
-    const pre = version.match(/\d+/)?.at(0);
-    const post = version.match(/-.*/);
-    if (!pre)
-        throw new Error('Cound not identify major version: ' + version);
-    if (post)
-        return pre + post[0];
-    return pre;
-}
-function getLegacyPlatformCache() {
-    const platformCache = window;
-    platformCache.platform = platformCache.platform || {};
-    return platformCache;
-}
-function getLegacyPlatform(key) {
-    const platform = getLegacyPlatformCache().platform[key];
-    return platform instanceof PlatformRef ? platform : null;
-}
-function setLegacyPlatform(key, platform) {
-    getLegacyPlatformCache().platform[key] = platform;
-}
-function getLegacyNgZone() {
-    return window['ngZone'];
-}
-function setLegacyNgZone(zone) {
-    window['ngZone'] = zone;
-}
-function getPlatformCache() {
-    return (getGlobalStateSlice((state) => state.platformCache) ||
-        setGlobalStateSlice({
-            platformCache: new Map(),
-        }).platformCache);
-}
-function setPlatform(version, platform) {
-    if (platformSharing) {
-        legacyMode && setLegacyPlatform(version.full, platform);
-        getPlatformCache().set(version, platform);
-    }
-}
-function getPlatform(options) {
-    if (!platformSharing) {
-        return options.platformFactory();
-    }
-    const versionResult = options.version();
-    const version = versionResult === VERSION.full ? VERSION : versionResult;
-    const versionKey = typeof version === 'string' ? version : version.full;
-    let platform = getPlatformCache().get(version) || (legacyMode && getLegacyPlatform(versionKey));
-    if (!platform) {
-        platform = options.platformFactory();
-        setPlatform(VERSION, platform);
-        options.production && enableProdMode();
-    }
-    return platform;
-}
 function getNgZone() {
-    return (getGlobalStateSlice((state) => state.ngZone) || getLegacyNgZone());
+    return (getGlobalStateSlice((state) => state.ngZone));
 }
 function shareNgZone(zone) {
-    if (ngZoneSharing) {
-        legacyMode && setLegacyNgZone(zone);
-        setGlobalStateSlice({ ngZone: zone });
-    }
+    setGlobalStateSlice({ ngZone: zone });
 }
-function bootstrap(module, options) {
-    ngZoneSharing = options.ngZoneSharing !== false;
-    platformSharing = options.platformSharing !== false;
-    legacyMode = options.activeLegacyMode !== false;
-    options.platformFactory = options.platformFactory || (() => platformBrowser());
-    options.version = options.version || (() => VERSION);
-    if (ngZoneSharing && !options.compilerOptions?.ngZone) {
-        options.compilerOptions = options.compilerOptions || {};
-        options.compilerOptions.ngZone = getNgZone();
-    }
-    return getPlatform(options)?.bootstrapModule(module, options.compilerOptions).then((ref) => {
-        if (options.appType === 'shell') {
+function bootstrap(component, options, config) {
+    options.production && enableProdMode();
+    if (options.appType === 'shell') {
+        bootstrapApplication(component, config).then((ref) => {
             shareShellZone(ref.injector);
-        }
-        else if (options.appType === 'microfrontend') {
-            connectMicroFrontendRouter(ref.injector);
-        }
-        return ref;
-    });
+        });
+        return;
+    }
+    if (!getNgZone() && isLocalhost()) {
+        bootstrapApplication(component, config);
+        return;
+    }
+    (async () => {
+        config.providers.push({ provide: NgZone, useValue: getNgZone() });
+        const app = await createApplication(config);
+        customElements.define(options.elementName, createCustomElement(component, { injector: app.injector }));
+        connectMicroFrontendRouter(app.injector);
+    })();
 }
 function shareShellZone(injector) {
     const ngZone = injector.get(NgZone, null);
@@ -226,6 +163,10 @@ function connectMicroFrontendRouter(injector) {
     }
     router.navigateByUrl(location.path() + window.location.hash);
 }
+function isLocalhost() {
+    const hostname = window.location.hostname;
+    return hostname === 'localhost' || hostname === '127.0.0.1';
+}
 
 class PermissionService {
     constructor(apollo) {
@@ -258,10 +199,10 @@ class PermissionService {
       `
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -294,10 +235,10 @@ class LoadingPage {
         });
     }
     ngOnDestroy() { this.sub.unsubscribe(); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LoadingPage, deps: [{ token: 'LOADING_CONFIG' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: LoadingPage, isStandalone: true, selector: "up-loading", host: { classAttribute: "d-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto" }, ngImport: i0, template: "<ion-spinner class=\"mb-4\" />\n<h3 class=\"text-center\">Please wait, we're preparing the applet. Drink water or coffee while waiting.</h3>\n", styles: ["ion-spinner{height:50px;width:50px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LoadingPage, deps: [{ token: 'LOADING_CONFIG' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: LoadingPage, isStandalone: true, selector: "up-loading", host: { classAttribute: "d-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto" }, ngImport: i0, template: "<ion-spinner class=\"mb-4\" />\n<h3 class=\"text-center\">Please wait, we're preparing the applet. Drink water or coffee while waiting.</h3>\n", styles: ["ion-spinner{height:50px;width:50px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LoadingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LoadingPage, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-loading', host: {
                         class: 'd-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto'
@@ -328,12 +269,13 @@ class PermissionDirective {
         this.permissionService = permissionService;
         this.scope = 'GLOBAL';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: PermissionDirective, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission", hasPermissionScope: "hasPermissionScope", hasPermissionType: "hasPermissionType" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: PermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission", hasPermissionScope: "hasPermissionScope", hasPermissionType: "hasPermissionType" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: '[hasPermission]'
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PermissionService }], propDecorators: { hasPermission: [{
@@ -348,10 +290,9 @@ const PermissionGuard = (route) => {
     const router = inject(Router);
     const location = inject(Location);
     const permissionService = inject(PermissionService);
-    const permission = route.data['requiredPermission'];
     const permissions = route.data['requiredPermissions'];
-    if (!permission)
-        throw new Error('Invalid config: requiredPermission is a required parameter in route data for PermissionGuard');
+    if (!permissions || permissions.length === 0)
+        throw new Error('Invalid config: requiredPermissions is a required parameter in route data for PermissionGuard');
     if (!permissionService.isInitiated) {
         router.navigate(['loading'], { queryParams: { url: `${location.path() + window.location.hash}` } });
         return false;
@@ -363,22 +304,19 @@ const PermissionGuard = (route) => {
                 return true;
         }
     }
-    const { scope, module, type } = permission;
-    if (permissionService.checkPermission(scope, module, type))
-        return true;
     router.navigate(['401']);
     return false;
 };
 
 class PermissionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: PermissionModule, declarations: [PermissionDirective], exports: [PermissionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: PermissionModule, imports: [PermissionDirective], exports: [PermissionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PermissionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: PermissionModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         PermissionDirective
                     ],
                     exports: [
@@ -388,10 +326,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
         }] });
 
 class UnauthorizedPage {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: UnauthorizedPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: UnauthorizedPage, isStandalone: true, selector: "up-unauthorized", host: { classAttribute: "d-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto" }, ngImport: i0, template: "<ion-icon name=\"lock-closed\" class=\"mb-4\" />\n<h3 class=\"text-center\">Oops! You're not authorized to access this page.</h3>\n<p class=\"text-center\">Please log in or re-check your permissions.</p>\n", styles: ["ion-icon{font-size:5rem}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnauthorizedPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: UnauthorizedPage, isStandalone: true, selector: "up-unauthorized", host: { classAttribute: "d-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto" }, ngImport: i0, template: "<ion-icon name=\"lock-closed\" class=\"mb-4\" />\n<h3 class=\"text-center\">Oops! You're not authorized to access this page.</h3>\n<p class=\"text-center\">Please log in or re-check your permissions.</p>\n", styles: ["ion-icon{font-size:5rem}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: UnauthorizedPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: UnauthorizedPage, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-unauthorized', host: {
                         class: 'd-flex flex-column align-items-center justify-content-center h-100 w-75 mx-auto'
@@ -428,10 +366,10 @@ class AppletContainerComponent {
     selectMenu() {
         dispatchEvent(new CustomEvent('menuEvent', { detail: { isActive: false } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AppletContainerComponent, deps: [{ token: 'APPLET_CONFIG' }, { token: i0.ChangeDetectorRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: AppletContainerComponent, isStandalone: true, selector: "up-applet-container", host: { classAttribute: "d-flex h-100 w-100" }, ngImport: i0, template: "<div class=\"sidenav flex-shrink-0 h-100 py-4 d-flex flex-column\" [class.collapsed]=\"isCollapsed\" [class.show]=\"isMenuActive\">\n    <div class=\"logo-container px-3 pb-3 border-bottom flex-shrink-0 position-relative d-flex align-items-center gap-3 d-none d-md-flex\">\n        <img alt=\"Applet Icon\" width=\"44px\" height=\"44px\" class=\"rounded\" [src]=\"config.icon\" />\n\n        <div class=\"info w-75 pe-2\">\n            <div class=\"name fw-medium text-truncate\">{{ config.name }}</div>\n            \n            <div class=\"tenant pt-1 fw-medium\">\n                v{{ config.version }}\n            </div>\n        </div>\n\n        <button class=\"btn-close cursor-pointer position-absolute border-0 rounded-circle d-none d-md-block\" (click)=\"toggleSidenav()\">\n            <ion-icon name=\"chevron-forward\" class=\"mt-1\" />\n        </button>\n    </div>\n\n    <div class=\"flex-grow-1 px-3 pt-3 overflow-y-auto d-none d-md-block\" (click)=\"selectMenu()\">\n        @for (c of config.containers; track $index) {\n            <a class=\"nav align-items-center text-decoration-none gap-2 rounded mb-1 {{ isHidden[$index]? 'd-none' : 'd-flex' }}\" routerLinkActive=\"fw-medium\" title=\"{{ c.label }}\" [routerLink]=\"c.path\">\n                <ion-icon name=\"{{ c.icon }}\" />\n                <div class=\"text-truncate\">{{ c.label }}</div>\n            </a>\n        }\n    </div>\n\n    @if (config.enabledSetting) {\n        <div class=\"flex-shrink-0 px-3 pt-3 border-top d-none d-md-block\" (click)=\"selectMenu()\">\n            <a class=\"nav d-flex align-items-center text-decoration-none gap-2 rounded\" title=\"Setting\" routerLink=\"setting\" routerLinkActive=\"fw-medium\">\n                <ion-icon name=\"settings\" />\n                <div class=\"text-truncate\">Setting</div>\n            </a>\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 w-100 overflow-y-auto\">\n    <ng-content />\n</div>\n", styles: [".info{display:none}.name{font-size:16px}.tenant{color:#757575}.sidenav{width:73px;background:#f8f9fb;transition:all .2s ease;border-right:1px solid #D1D1D1}.sidenav.collapsed{width:250px}.sidenav.collapsed .btn-close{transform:rotate(180deg)}.sidenav.collapsed .nav div,.sidenav.collapsed .info{display:block}.sidenav.show{width:250px}.sidenav.show .logo-container{display:flex!important}.sidenav.show div:not(.logo-container),.sidenav.show img,.sidenav.show .info{display:block!important}.btn-close{width:35px;height:35px;bottom:23px;right:-17px;z-index:999;transition:all .3s ease;background-color:#f8f9fb;box-shadow:0 0 .15rem #616161}.btn-close ion-icon{color:#616161;font-size:16px}@media (max-width: 768px){.btn-close{right:-18px}.btn-close ion-icon{position:absolute;right:9px;bottom:10px}}.nav{padding:12px;color:#616161;transition:all .3s ease}.nav.fw-medium,.nav:hover{background-color:#fef3ee;color:#ed6b26!important}.nav ion-icon{font-size:20px}.nav div{display:none;font-size:16px}@media (max-width: 767px){.sidenav{width:0;z-index:2;position:absolute!important}}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AppletContainerComponent, deps: [{ token: 'APPLET_CONFIG' }, { token: i0.ChangeDetectorRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: AppletContainerComponent, isStandalone: true, selector: "up-applet-container", host: { classAttribute: "d-flex h-100 w-100" }, ngImport: i0, template: "<div class=\"sidenav flex-shrink-0 h-100 py-4 d-flex flex-column\" [class.collapsed]=\"isCollapsed\" [class.show]=\"isMenuActive\">\n    <div class=\"logo-container px-3 pb-3 border-bottom flex-shrink-0 position-relative d-flex align-items-center gap-3 d-none d-md-flex\">\n        <img alt=\"Applet Icon\" width=\"44px\" height=\"44px\" class=\"rounded\" [src]=\"config.icon\" />\n\n        <div class=\"info w-75 pe-2\">\n            <div class=\"name fw-medium text-truncate\">{{ config.name }}</div>\n            \n            <div class=\"tenant pt-1 fw-medium\">\n                v{{ config.version }}\n            </div>\n        </div>\n\n        <button class=\"btn-close cursor-pointer position-absolute border-0 rounded-circle d-none d-md-block\" (click)=\"toggleSidenav()\">\n            <ion-icon name=\"chevron-forward\" class=\"mt-1\" />\n        </button>\n    </div>\n\n    <div class=\"flex-grow-1 px-3 pt-3 overflow-y-auto d-none d-md-block\" (click)=\"selectMenu()\">\n        @for (c of config.containers; track $index) {\n            <a class=\"nav align-items-center text-decoration-none gap-2 rounded mb-1 {{ isHidden[$index]? 'd-none' : 'd-flex' }}\" routerLinkActive=\"fw-medium\" title=\"{{ c.label }}\" [routerLink]=\"c.path\">\n                <ion-icon name=\"{{ c.icon }}\" />\n                <div class=\"text-truncate\">{{ c.label }}</div>\n            </a>\n        }\n    </div>\n\n    @if (config.enabledSetting) {\n        <div class=\"flex-shrink-0 px-3 pt-3 border-top d-none d-md-block\" (click)=\"selectMenu()\">\n            <a class=\"nav d-flex align-items-center text-decoration-none gap-2 rounded\" title=\"Setting\" routerLink=\"setting\" routerLinkActive=\"fw-medium\">\n                <ion-icon name=\"settings\" />\n                <div class=\"text-truncate\">Setting</div>\n            </a>\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 w-100 overflow-y-auto\">\n    <ng-content />\n</div>\n", styles: [".info{display:none}.name{font-size:16px}.tenant{color:#757575}.overflow-y-auto{overflow-y:auto;overflow-x:hidden}.sidenav{width:73px;background:#f8f9fb;transition:all .2s ease;border-right:1px solid #D1D1D1}.sidenav.collapsed{width:250px}.sidenav.collapsed .btn-close{transform:rotate(180deg)}.sidenav.collapsed .nav div,.sidenav.collapsed .info{display:block}.sidenav.show{width:250px}.sidenav.show .logo-container{display:flex!important}.sidenav.show div:not(.logo-container),.sidenav.show img,.sidenav.show .info{display:block!important}.btn-close{width:35px;height:35px;bottom:23px;right:-17px;z-index:999;transition:all .3s ease;background-color:#f8f9fb;box-shadow:0 0 .15rem #616161}.btn-close ion-icon{color:#616161;font-size:16px}@media (max-width: 768px){.btn-close{right:-18px}.btn-close ion-icon{position:absolute;right:9px;bottom:10px}}.nav{padding:12px;color:#616161;transition:all .3s ease}.nav.fw-medium,.nav:hover{background-color:#fef3ee;color:#ed6b26!important}.nav ion-icon{font-size:20px}.nav div{display:none;font-size:16px}@media (max-width: 767px){.sidenav{width:0;z-index:2;position:absolute!important}}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AppletContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AppletContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-applet-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-flex h-100 w-100'
@@ -439,7 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                         IonicModule,
                         RouterLink,
                         RouterLinkActive
-                    ], template: "<div class=\"sidenav flex-shrink-0 h-100 py-4 d-flex flex-column\" [class.collapsed]=\"isCollapsed\" [class.show]=\"isMenuActive\">\n    <div class=\"logo-container px-3 pb-3 border-bottom flex-shrink-0 position-relative d-flex align-items-center gap-3 d-none d-md-flex\">\n        <img alt=\"Applet Icon\" width=\"44px\" height=\"44px\" class=\"rounded\" [src]=\"config.icon\" />\n\n        <div class=\"info w-75 pe-2\">\n            <div class=\"name fw-medium text-truncate\">{{ config.name }}</div>\n            \n            <div class=\"tenant pt-1 fw-medium\">\n                v{{ config.version }}\n            </div>\n        </div>\n\n        <button class=\"btn-close cursor-pointer position-absolute border-0 rounded-circle d-none d-md-block\" (click)=\"toggleSidenav()\">\n            <ion-icon name=\"chevron-forward\" class=\"mt-1\" />\n        </button>\n    </div>\n\n    <div class=\"flex-grow-1 px-3 pt-3 overflow-y-auto d-none d-md-block\" (click)=\"selectMenu()\">\n        @for (c of config.containers; track $index) {\n            <a class=\"nav align-items-center text-decoration-none gap-2 rounded mb-1 {{ isHidden[$index]? 'd-none' : 'd-flex' }}\" routerLinkActive=\"fw-medium\" title=\"{{ c.label }}\" [routerLink]=\"c.path\">\n                <ion-icon name=\"{{ c.icon }}\" />\n                <div class=\"text-truncate\">{{ c.label }}</div>\n            </a>\n        }\n    </div>\n\n    @if (config.enabledSetting) {\n        <div class=\"flex-shrink-0 px-3 pt-3 border-top d-none d-md-block\" (click)=\"selectMenu()\">\n            <a class=\"nav d-flex align-items-center text-decoration-none gap-2 rounded\" title=\"Setting\" routerLink=\"setting\" routerLinkActive=\"fw-medium\">\n                <ion-icon name=\"settings\" />\n                <div class=\"text-truncate\">Setting</div>\n            </a>\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 w-100 overflow-y-auto\">\n    <ng-content />\n</div>\n", styles: [".info{display:none}.name{font-size:16px}.tenant{color:#757575}.sidenav{width:73px;background:#f8f9fb;transition:all .2s ease;border-right:1px solid #D1D1D1}.sidenav.collapsed{width:250px}.sidenav.collapsed .btn-close{transform:rotate(180deg)}.sidenav.collapsed .nav div,.sidenav.collapsed .info{display:block}.sidenav.show{width:250px}.sidenav.show .logo-container{display:flex!important}.sidenav.show div:not(.logo-container),.sidenav.show img,.sidenav.show .info{display:block!important}.btn-close{width:35px;height:35px;bottom:23px;right:-17px;z-index:999;transition:all .3s ease;background-color:#f8f9fb;box-shadow:0 0 .15rem #616161}.btn-close ion-icon{color:#616161;font-size:16px}@media (max-width: 768px){.btn-close{right:-18px}.btn-close ion-icon{position:absolute;right:9px;bottom:10px}}.nav{padding:12px;color:#616161;transition:all .3s ease}.nav.fw-medium,.nav:hover{background-color:#fef3ee;color:#ed6b26!important}.nav ion-icon{font-size:20px}.nav div{display:none;font-size:16px}@media (max-width: 767px){.sidenav{width:0;z-index:2;position:absolute!important}}\n"] }]
+                    ], template: "<div class=\"sidenav flex-shrink-0 h-100 py-4 d-flex flex-column\" [class.collapsed]=\"isCollapsed\" [class.show]=\"isMenuActive\">\n    <div class=\"logo-container px-3 pb-3 border-bottom flex-shrink-0 position-relative d-flex align-items-center gap-3 d-none d-md-flex\">\n        <img alt=\"Applet Icon\" width=\"44px\" height=\"44px\" class=\"rounded\" [src]=\"config.icon\" />\n\n        <div class=\"info w-75 pe-2\">\n            <div class=\"name fw-medium text-truncate\">{{ config.name }}</div>\n            \n            <div class=\"tenant pt-1 fw-medium\">\n                v{{ config.version }}\n            </div>\n        </div>\n\n        <button class=\"btn-close cursor-pointer position-absolute border-0 rounded-circle d-none d-md-block\" (click)=\"toggleSidenav()\">\n            <ion-icon name=\"chevron-forward\" class=\"mt-1\" />\n        </button>\n    </div>\n\n    <div class=\"flex-grow-1 px-3 pt-3 overflow-y-auto d-none d-md-block\" (click)=\"selectMenu()\">\n        @for (c of config.containers; track $index) {\n            <a class=\"nav align-items-center text-decoration-none gap-2 rounded mb-1 {{ isHidden[$index]? 'd-none' : 'd-flex' }}\" routerLinkActive=\"fw-medium\" title=\"{{ c.label }}\" [routerLink]=\"c.path\">\n                <ion-icon name=\"{{ c.icon }}\" />\n                <div class=\"text-truncate\">{{ c.label }}</div>\n            </a>\n        }\n    </div>\n\n    @if (config.enabledSetting) {\n        <div class=\"flex-shrink-0 px-3 pt-3 border-top d-none d-md-block\" (click)=\"selectMenu()\">\n            <a class=\"nav d-flex align-items-center text-decoration-none gap-2 rounded\" title=\"Setting\" routerLink=\"setting\" routerLinkActive=\"fw-medium\">\n                <ion-icon name=\"settings\" />\n                <div class=\"text-truncate\">Setting</div>\n            </a>\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 w-100 overflow-y-auto\">\n    <ng-content />\n</div>\n", styles: [".info{display:none}.name{font-size:16px}.tenant{color:#757575}.overflow-y-auto{overflow-y:auto;overflow-x:hidden}.sidenav{width:73px;background:#f8f9fb;transition:all .2s ease;border-right:1px solid #D1D1D1}.sidenav.collapsed{width:250px}.sidenav.collapsed .btn-close{transform:rotate(180deg)}.sidenav.collapsed .nav div,.sidenav.collapsed .info{display:block}.sidenav.show{width:250px}.sidenav.show .logo-container{display:flex!important}.sidenav.show div:not(.logo-container),.sidenav.show img,.sidenav.show .info{display:block!important}.btn-close{width:35px;height:35px;bottom:23px;right:-17px;z-index:999;transition:all .3s ease;background-color:#f8f9fb;box-shadow:0 0 .15rem #616161}.btn-close ion-icon{color:#616161;font-size:16px}@media (max-width: 768px){.btn-close{right:-18px}.btn-close ion-icon{position:absolute;right:9px;bottom:10px}}.nav{padding:12px;color:#616161;transition:all .3s ease}.nav.fw-medium,.nav:hover{background-color:#fef3ee;color:#ed6b26!important}.nav ion-icon{font-size:20px}.nav div{display:none;font-size:16px}@media (max-width: 767px){.sidenav{width:0;z-index:2;position:absolute!important}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['APPLET_CONFIG']
@@ -452,10 +390,10 @@ class LazyRouteDirective {
     ngOnInit() {
         this.loadRoute.loadComponent().then((m) => this.vcr.createComponent(m));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LazyRouteDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: LazyRouteDirective, isStandalone: true, selector: "[loadRoute]", inputs: { loadRoute: "loadRoute" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LazyRouteDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: LazyRouteDirective, isStandalone: true, selector: "[loadRoute]", inputs: { loadRoute: "loadRoute" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LazyRouteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LazyRouteDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -522,35 +460,33 @@ class ColumnContainerComponent {
     checkScreen() {
         this.colSize = window.innerWidth <= 768 ? 100 : 50;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ColumnContainerComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split [disabled]=\"true\" [useTransition]=\"true\" [gutterSize]=\"0\">\n    <as-split-area [size]=\"colSize\" [hidden]=\"!a.visible\" [visible]=\"a.visible\" [order]=\"i\" *ngFor=\"let a of areas; let i = index\" class=\"border-start\">\n        <ng-container [loadRoute]=\"a.route\" />\n    </as-split-area>\n</as-split>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i3.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i3.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: LazyRouteDirective, selector: "[loadRoute]", inputs: ["loadRoute"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ColumnContainerComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split [disabled]=\"true\" [useTransition]=\"true\" [gutterSize]=\"0\">\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area [size]=\"colSize\" [hidden]=\"!a.visible\" [visible]=\"a.visible\" [order]=\"i\" class=\"border-start\">\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i2.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: LazyRouteDirective, selector: "[loadRoute]", inputs: ["loadRoute"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ColumnContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ColumnContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-column-container', host: {
                         class: 'd-block h-100 w-100'
                     }, imports: [
-                        RouterModule,
-                        CommonModule,
                         AngularSplitModule,
                         LazyRouteDirective
-                    ], template: "<as-split [disabled]=\"true\" [useTransition]=\"true\" [gutterSize]=\"0\">\n    <as-split-area [size]=\"colSize\" [hidden]=\"!a.visible\" [visible]=\"a.visible\" [order]=\"i\" *ngFor=\"let a of areas; let i = index\" class=\"border-start\">\n        <ng-container [loadRoute]=\"a.route\" />\n    </as-split-area>\n</as-split>\n" }]
+                    ], template: "<as-split [disabled]=\"true\" [useTransition]=\"true\" [gutterSize]=\"0\">\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area [size]=\"colSize\" [hidden]=\"!a.visible\" [visible]=\"a.visible\" [order]=\"i\" class=\"border-start\">\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n" }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { checkScreen: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
 class ColumnHeaderContainerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ColumnHeaderContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ColumnHeaderContainerComponent, isStandalone: true, selector: "up-column-header-container", inputs: { header: "header", prevUrl: "prevUrl" }, host: { classAttribute: "d-flex flex-column h-100" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons class=\"flex-shrink-0\">\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\n\t\t<div class=\"f20 fw-medium flex-grow-1 text-truncate\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"[button]\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n", styles: ["ion-buttons{z-index:0}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ColumnHeaderContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ColumnHeaderContainerComponent, isStandalone: true, selector: "up-column-header-container", inputs: { header: "header", prevUrl: "prevUrl" }, host: { classAttribute: "d-flex flex-column h-100" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons class=\"flex-shrink-0\">\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\n\t\t<div class=\"f20 fw-medium flex-grow-1 text-truncate\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"[button]\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n", styles: ["ion-buttons{z-index:0}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ColumnHeaderContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ColumnHeaderContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-column-header-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-flex flex-column h-100'
                     }, imports: [
                         IonicModule,
-                        RouterModule
+                        RouterLink
                     ], template: "<div class=\"d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0\">\n\t<div class=\"flex-grow-1 d-flex align-items-center pe-3\">\n\t\t<ion-buttons class=\"flex-shrink-0\">\n\t\t\t<ion-button routerLink=\"{{ prevUrl }}\">\n\t\t\t\t<ion-icon slot=\"icon-only\" name=\"close\" />\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\n\t\t<div class=\"f20 fw-medium flex-grow-1 text-truncate\">{{ header }}</div>\n\t</div>\n\n\t<ng-content select=\"[button]\" />\n</div>\n\n<div class=\"p-1 flex-grow-1 overflow-auto\">\n\t<ng-content/>\n</div>\n", styles: ["ion-buttons{z-index:0}.flex-grow-1{min-width:0}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
@@ -576,10 +512,10 @@ class ModalContainerComponent {
             this.modalCtrl.dismiss();
     }
     close() { this.modalCtrl.dismiss(); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ModalContainerComponent, isStandalone: true, selector: "up-modal-container", inputs: { header: "header", disabled: "disabled" }, host: { listeners: { "window:popstate": "popState($event)" } }, ngImport: i0, template: "<ion-header class=\"ion-no-border\">\n    <ion-toolbar>\n        <ion-buttons slot=\"start\">\n            <ion-button [disabled]=\"disabled\" (click)=\"close()\">\n                <ion-icon slot=\"icon-only\" name=\"close\" />\n            </ion-button>\n        </ion-buttons>\n\n        <ion-title class=\"p-0 fs-5\">{{ header }}</ion-title>\n    </ion-toolbar>\n</ion-header>\n\n<div class=\"p-4\">\n    <ng-content />\n</div>\n", styles: ["ion-toolbar{color:#616161}ion-header{border-bottom:1px solid #e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ModalContainerComponent, isStandalone: true, selector: "up-modal-container", inputs: { header: "header", disabled: "disabled" }, host: { listeners: { "window:popstate": "popState($event)" } }, ngImport: i0, template: "<ion-header class=\"ion-no-border\">\n    <ion-toolbar>\n        <ion-buttons slot=\"start\">\n            <ion-button [disabled]=\"disabled\" (click)=\"close()\">\n                <ion-icon slot=\"icon-only\" name=\"close\" />\n            </ion-button>\n        </ion-buttons>\n\n        <ion-title class=\"p-0 fs-5\">{{ header }}</ion-title>\n    </ion-toolbar>\n</ion-header>\n\n<div class=\"p-4\">\n    <ng-content />\n</div>\n", styles: ["ion-toolbar{color:#616161}ion-header{border-bottom:1px solid #e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-modal-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         IonicModule
@@ -702,8 +638,8 @@ class FormDateComponent {
             this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormDateComponent, deps: [{ token: 'name', attribute: true }, { token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormDateComponent, isStandalone: true, selector: "up-date", inputs: { label: "label", required: "required", disabled: "disabled", presentation: "presentation" }, host: { classAttribute: "d-block position-relative" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormDateComponent, deps: [{ token: 'name', attribute: true }, { token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormDateComponent, isStandalone: true, selector: "up-date", inputs: { label: "label", required: "required", disabled: "disabled", presentation: "presentation" }, host: { classAttribute: "d-block position-relative" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -714,15 +650,15 @@ class FormDateComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormDateComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n    <ng-template>\n        <ion-datetime mode=\"md\" hourCycle=\"h23\" [presentation]=\"presentation\" value=\"{{ localValue }}\" [showDefaultButtons]=\"true\" (ionChange)=\"changeDate($event)\" />\n    </ng-template>\n</ion-modal>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n    <ng-template>\n        <ion-datetime mode=\"md\" hourCycle=\"h23\" [presentation]=\"presentation\" value=\"{{ localValue }}\" [showDefaultButtons]=\"true\" (ionChange)=\"changeDate($event)\" />\n    </ng-template>\n</ion-modal>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormDateComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-date', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block position-relative'
                     }, imports: [
-                        IonicModule,
-                        CommonModule
+                        DatePipe,
+                        IonicModule
                     ], providers: [
                         {
                             multi: true,
@@ -734,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormDateComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n    <ng-template>\n        <ion-datetime mode=\"md\" hourCycle=\"h23\" [presentation]=\"presentation\" value=\"{{ localValue }}\" [showDefaultButtons]=\"true\" (ionChange)=\"changeDate($event)\" />\n    </ng-template>\n</ion-modal>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"] }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n    <ng-template>\n        <ion-datetime mode=\"md\" hourCycle=\"h23\" [presentation]=\"presentation\" value=\"{{ localValue }}\" [showDefaultButtons]=\"true\" (ionChange)=\"changeDate($event)\" />\n    </ng-template>\n</ion-modal>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['name']
@@ -790,8 +726,8 @@ class FormInputComponent {
             this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: 'type', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormInputComponent, isStandalone: true, selector: "up-input", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { onInput: "onInput" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: 'type', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormInputComponent, isStandalone: true, selector: "up-input", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { onInput: "onInput" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -802,13 +738,13 @@ class FormInputComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormInputComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input type=\"{{ type }}\" autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\" (input)=\"input($event)\" />\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input type=\"{{ type }}\" autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\" (input)=\"input($event)\" />\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
-                    }, imports: [CommonModule], providers: [
+                    }, providers: [
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
@@ -819,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormInputComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input type=\"{{ type }}\" autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\" (input)=\"input($event)\" />\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<input type=\"{{ type }}\" autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\" (input)=\"input($event)\" />\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -865,10 +801,10 @@ class LocaleNumberPipe {
         }
         return seperators;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LocaleNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: LocaleNumberPipe, isStandalone: true, name: "localeNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LocaleNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: LocaleNumberPipe, isStandalone: true, name: "localeNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LocaleNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: LocaleNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -921,8 +857,8 @@ class FormNumberComponent {
         if (!/^\d$/.test(key))
             ev.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormNumberComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormNumberComponent, isStandalone: true, selector: "up-number", inputs: { label: "label", value: "value", required: "required", disabled: "disabled", locale: "locale" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormNumberComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormNumberComponent, isStandalone: true, selector: "up-number", inputs: { label: "label", value: "value", required: "required", disabled: "disabled", locale: "locale" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -933,13 +869,16 @@ class FormNumberComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormNumberComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</label>\n<input type=\"text\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value | localeNumber:locale\" (keydown)=\"onKeyDown($event)\" (change)=\"change($event.target)\" />\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LocaleNumberPipe, name: "localeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</label>\n<input type=\"text\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value | localeNumber:locale\" (keydown)=\"onKeyDown($event)\" (change)=\"change($event.target)\" />\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LocaleNumberPipe, name: "localeNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormNumberComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-number', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
-                    }, imports: [CommonModule, FormsModule, LocaleNumberPipe], providers: [
+                    }, imports: [
+                        FormsModule,
+                        LocaleNumberPipe
+                    ], providers: [
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
@@ -950,7 +889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormNumberComponent
                         }
-                    ], template: "<label class=\"form-label\">{{ label }}</label>\n<input type=\"text\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value | localeNumber:locale\" (keydown)=\"onKeyDown($event)\" (change)=\"change($event.target)\" />\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+                    ], template: "<label class=\"form-label\">{{ label }}</label>\n<input type=\"text\" placeholder=\"{{ placeholder }}\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value | localeNumber:locale\" (keydown)=\"onKeyDown($event)\" (change)=\"change($event.target)\" />\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -1016,8 +955,8 @@ class FormPasswordComponent {
         }
         this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormPasswordComponent, deps: [{ token: 'label', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormPasswordComponent, isStandalone: true, selector: "up-password", inputs: { required: "required", mustSame: "mustSame" }, host: { classAttribute: "d-block position-relative" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormPasswordComponent, deps: [{ token: 'label', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormPasswordComponent, isStandalone: true, selector: "up-password", inputs: { required: "required", mustSame: "mustSame" }, host: { classAttribute: "d-block position-relative" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1028,15 +967,14 @@ class FormPasswordComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormPasswordComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" (focus)=\"touch()\" />\n<ion-icon name=\"{{ type === 'password'? 'eye' : 'eye-off' }}\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"changeType()\"></ion-icon>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ion-icon{top:33px;right:16px;color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" (focus)=\"touch()\" />\n<ion-icon name=\"{{ type === 'password'? 'eye' : 'eye-off' }}\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"changeType()\"></ion-icon>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-icon{top:33px;right:16px;color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormPasswordComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-password', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block position-relative'
                     }, imports: [
-                        IonicModule,
-                        CommonModule
+                        IonicModule
                     ], providers: [
                         {
                             multi: true,
@@ -1048,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormPasswordComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" (focus)=\"touch()\" />\n<ion-icon name=\"{{ type === 'password'? 'eye' : 'eye-off' }}\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"changeType()\"></ion-icon>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ion-icon{top:33px;right:16px;color:#616161}\n"] }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" (focus)=\"touch()\" />\n<ion-icon name=\"{{ type === 'password'? 'eye' : 'eye-off' }}\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"changeType()\"></ion-icon>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-icon{top:33px;right:16px;color:#616161}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['label']
@@ -1119,8 +1057,8 @@ class FormSearchableSelectComponent {
             this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormSearchableSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormSearchableSelectComponent, isStandalone: true, selector: "up-searchable-select", inputs: { queryFunc: "queryFunc", clearable: "clearable", label: "label", initialItems: "initialItems", required: "required", addTag: "addTag", disabled: "disabled", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormSearchableSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormSearchableSelectComponent, isStandalone: true, selector: "up-searchable-select", inputs: { queryFunc: "queryFunc", clearable: "clearable", label: "label", initialItems: "initialItems", required: "required", addTag: "addTag", disabled: "disabled", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1131,14 +1069,14 @@ class FormSearchableSelectComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormSearchableSelectComponent
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<ng-select \n    appendTo=\"body\"\n    typeToSearchText=\"Please enter 3 or more characters\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\" \n    [minTermLength]=\"3\"\n    [virtualScroll]=\"true\"\n    [editableSearchTerm]=\"true\"\n    [ngModel]=\"value\" \n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    [typeahead]=\"typeahead\"\n    [items]=\"items$ | async\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<ng-select \n    typeToSearchText=\"Please enter 3 or more characters\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\" \n    [minTermLength]=\"3\"\n    [virtualScroll]=\"true\"\n    [editableSearchTerm]=\"true\"\n    [ngModel]=\"value\" \n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    [typeahead]=\"typeahead\"\n    [items]=\"items$ | async\"\n    (change)=\"change($event);\"\n/>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormSearchableSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormSearchableSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-searchable-select', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
                     }, imports: [
-                        CommonModule,
+                        AsyncPipe,
                         FormsModule,
                         NgSelectModule
                     ], providers: [
@@ -1152,7 +1090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormSearchableSelectComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<ng-select \n    appendTo=\"body\"\n    typeToSearchText=\"Please enter 3 or more characters\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\" \n    [minTermLength]=\"3\"\n    [virtualScroll]=\"true\"\n    [editableSearchTerm]=\"true\"\n    [ngModel]=\"value\" \n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    [typeahead]=\"typeahead\"\n    [items]=\"items$ | async\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\" />\n    <span>{{ label }}</span>\n</label>\n\n<ng-select \n    typeToSearchText=\"Please enter 3 or more characters\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\" \n    [minTermLength]=\"3\"\n    [virtualScroll]=\"true\"\n    [editableSearchTerm]=\"true\"\n    [ngModel]=\"value\" \n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    [typeahead]=\"typeahead\"\n    [items]=\"items$ | async\"\n    (change)=\"change($event);\"\n/>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -1228,8 +1166,8 @@ class FormSelectComponent {
             this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: "items", clearable: "clearable", label: "label", multiple: "multiple", required: "required", addTag: "addTag", disabled: "disabled", searchable: "searchable", bindLabel: "bindLabel", bindValue: "bindValue" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: "items", clearable: "clearable", label: "label", multiple: "multiple", required: "required", addTag: "addTag", disabled: "disabled", searchable: "searchable", bindLabel: "bindLabel", bindValue: "bindValue" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1240,14 +1178,13 @@ class FormSelectComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormSelectComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<ng-select\n    appendTo=\"body\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#e9ecef}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#e9ecef;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#e9ecef}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<ng-select\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    (change)=\"change($event);\"\n/>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#e9ecef}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#e9ecef;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#e9ecef}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-select', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
                     }, imports: [
-                        CommonModule,
                         FormsModule,
                         NgSelectModule
                     ], providers: [
@@ -1261,7 +1198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormSelectComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<ng-select\n    appendTo=\"body\"\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#e9ecef}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#e9ecef;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#e9ecef}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"] }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\" [class.required]=\"required\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n\n<ng-select\n    bindLabel=\"{{ bindLabel }}\"\n    bindValue=\"{{ bindValue }}\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [addTag]=\"addTag\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    (change)=\"change($event);\"\n/>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#e9ecef}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#e9ecef;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#e9ecef}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -1325,8 +1262,8 @@ class FormTextareaComponent {
             this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormTextareaComponent, deps: [{ token: 'label', attribute: true }, { token: 'placeholder', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormTextareaComponent, isStandalone: true, selector: "up-textarea", inputs: { value: "value", required: "required", disabled: "disabled" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormTextareaComponent, deps: [{ token: 'label', attribute: true }, { token: 'placeholder', attribute: true }, { token: 'autocomplete', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormTextareaComponent, isStandalone: true, selector: "up-textarea", inputs: { value: "value", required: "required", disabled: "disabled" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1337,13 +1274,13 @@ class FormTextareaComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormTextareaComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n<textarea autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" rows=\"3\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\"></textarea>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n<textarea autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" rows=\"3\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\"></textarea>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormTextareaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-textarea', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
-                    }, imports: [CommonModule], providers: [
+                    }, providers: [
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
@@ -1354,7 +1291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormTextareaComponent
                         }
-                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n<textarea autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" rows=\"3\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\"></textarea>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+                    ], template: "<label class=\"form-label d-flex align-items-center\">\n    <ng-content select=\"[icon]\"/>\n    <span>{{ label }}</span>\n</label>\n<textarea autocomplete=\"{{ autocomplete }}\" placeholder=\"{{ placeholder }}\" rows=\"3\" class=\"form-control\" [required]=\"required\" [disabled]=\"disabled\" [value]=\"value\" (change)=\"change($event.target)\"></textarea>\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['label']
@@ -1397,10 +1334,10 @@ class DragNDropDirective {
         if (files.length > 0)
             this.fileDropped.emit(files);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DragNDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: DragNDropDirective, isStandalone: true, selector: "[upDragNDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DragNDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: DragNDropDirective, isStandalone: true, selector: "[upDragNDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DragNDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DragNDropDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1446,30 +1383,30 @@ class FormImagePickerComponent {
             this.onChange.emit(files[0]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormImagePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormImagePickerComponent, isStandalone: true, selector: "up-image-picker", inputs: { ratio: "ratio", label: "label", required: "required" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormImagePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormImagePickerComponent, isStandalone: true, selector: "up-image-picker", inputs: { ratio: "ratio", label: "label", required: "required" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FormImagePickerComponent
             },
-        ], ngImport: i0, template: "<div class=\"flex-shrink-0 mb-4\">\n    <label class=\"mb-2 d-flex align-items-center form-label\">\n        <span class=\"text-danger me-2\" *ngIf=\"required\">&ast;</span>\n        \n        <ng-content select=\"[icon]\"/>\n        <span>{{ label }}</span>\n    </label>\n    \n    <div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n        <img *ngIf=\"imgSrc\" alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n    \n        <div class=\"upload-icon rounded position-absolute text-white align-items-center justify-content-center px-3 py-2 w-100\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" (click)=\"file.click();\">\n            <ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" *ngIf=\"!imgSrc; else deleteIcon\" />\n    \n            <ng-template #deleteIcon>\n                <div class=\"position-absolute display-flex justify-content-center rounded p-1 d-btn\">\n                <ion-icon name=\"trash\" class=\"text-red-600\" title=\"Clear Image\" (click)=\"clear($event)\" />\n            </div>\n            </ng-template>\n        </div>\n    \n        <input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n    </div>\n</div>\n", styles: ["ion-icon{font-size:24px}.img-container{width:250px;border-style:dashed!important}.img-container:hover .upload-icon{display:flex}.img-container:not(:has(img)):before{content:\"Choose file or Drag here.\";top:50%;left:50%;font-size:12px;position:absolute;color:gray;text-align:center;transform:translate(-50%,-50%)}.upload-icon:not(ion-icon){background:#00000050}.upload-icon{top:0;left:0;display:none;cursor:pointer}.d-btn{right:10px;bottom:10px;width:32px;height:32px;background-color:#fee2e2}.d-btn ion-icon{color:#dc2626}.dragging{border:2px dashed #ED6B26!important}.dragging:not(:has(img)):before{content:\"Drop\";font-size:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DragNDropDirective, selector: "[upDragNDrop]", outputs: ["fileDropped"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex-shrink-0 mb-4\">\n    <label class=\"mb-2 d-flex align-items-center form-label\">\n        @if (required) {\n            <span class=\"text-danger me-2\">&ast;</span>\n        }\n        \n        <ng-content select=\"[icon]\"/>\n        <span>{{ label }}</span>\n    </label>\n    \n    <div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n        @if (imgSrc) {\n            <img alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n        }\n    \n        <div class=\"upload-icon rounded position-absolute text-white align-items-center justify-content-center px-3 py-2 w-100\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" (click)=\"file.click();\">\n            @if (!imgSrc) {\n                <ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" />\n            } \n            @else {\n                <div class=\"position-absolute display-flex justify-content-center rounded p-1 d-btn\">\n                    <ion-icon name=\"trash\" class=\"text-red-600\" title=\"Clear Image\" (click)=\"clear($event)\" />\n                </div>\n            }\n        </div>\n    \n        <input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n    </div>\n</div>\n", styles: ["ion-icon{font-size:24px}.img-container{width:250px;border-style:dashed!important}.img-container:hover .upload-icon{display:flex}.img-container:not(:has(img)):before{content:\"Choose file or Drag here.\";top:50%;left:50%;font-size:12px;position:absolute;color:gray;text-align:center;transform:translate(-50%,-50%)}.upload-icon:not(ion-icon){background:#00000050}.upload-icon{top:0;left:0;display:none;cursor:pointer}.d-btn{right:10px;bottom:10px;width:32px;height:32px;background-color:#fee2e2}.d-btn ion-icon{color:#dc2626}.dragging{border:2px dashed #ED6B26!important}.dragging:not(:has(img)):before{content:\"Drop\";font-size:32px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DragNDropDirective, selector: "[upDragNDrop]", outputs: ["fileDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormImagePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormImagePickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
                     }, imports: [
-                        CommonModule,
-                        DragNDropDirective,
-                        IonicModule
+                        IonicModule,
+                        NgStyle,
+                        DragNDropDirective
                     ], providers: [
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FormImagePickerComponent
                         },
-                    ], template: "<div class=\"flex-shrink-0 mb-4\">\n    <label class=\"mb-2 d-flex align-items-center form-label\">\n        <span class=\"text-danger me-2\" *ngIf=\"required\">&ast;</span>\n        \n        <ng-content select=\"[icon]\"/>\n        <span>{{ label }}</span>\n    </label>\n    \n    <div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n        <img *ngIf=\"imgSrc\" alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n    \n        <div class=\"upload-icon rounded position-absolute text-white align-items-center justify-content-center px-3 py-2 w-100\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" (click)=\"file.click();\">\n            <ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" *ngIf=\"!imgSrc; else deleteIcon\" />\n    \n            <ng-template #deleteIcon>\n                <div class=\"position-absolute display-flex justify-content-center rounded p-1 d-btn\">\n                <ion-icon name=\"trash\" class=\"text-red-600\" title=\"Clear Image\" (click)=\"clear($event)\" />\n            </div>\n            </ng-template>\n        </div>\n    \n        <input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n    </div>\n</div>\n", styles: ["ion-icon{font-size:24px}.img-container{width:250px;border-style:dashed!important}.img-container:hover .upload-icon{display:flex}.img-container:not(:has(img)):before{content:\"Choose file or Drag here.\";top:50%;left:50%;font-size:12px;position:absolute;color:gray;text-align:center;transform:translate(-50%,-50%)}.upload-icon:not(ion-icon){background:#00000050}.upload-icon{top:0;left:0;display:none;cursor:pointer}.d-btn{right:10px;bottom:10px;width:32px;height:32px;background-color:#fee2e2}.d-btn ion-icon{color:#dc2626}.dragging{border:2px dashed #ED6B26!important}.dragging:not(:has(img)):before{content:\"Drop\";font-size:32px}\n"] }]
+                    ], template: "<div class=\"flex-shrink-0 mb-4\">\n    <label class=\"mb-2 d-flex align-items-center form-label\">\n        @if (required) {\n            <span class=\"text-danger me-2\">&ast;</span>\n        }\n        \n        <ng-content select=\"[icon]\"/>\n        <span>{{ label }}</span>\n    </label>\n    \n    <div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n        @if (imgSrc) {\n            <img alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n        }\n    \n        <div class=\"upload-icon rounded position-absolute text-white align-items-center justify-content-center px-3 py-2 w-100\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" (click)=\"file.click();\">\n            @if (!imgSrc) {\n                <ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" />\n            } \n            @else {\n                <div class=\"position-absolute display-flex justify-content-center rounded p-1 d-btn\">\n                    <ion-icon name=\"trash\" class=\"text-red-600\" title=\"Clear Image\" (click)=\"clear($event)\" />\n                </div>\n            }\n        </div>\n    \n        <input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n    </div>\n</div>\n", styles: ["ion-icon{font-size:24px}.img-container{width:250px;border-style:dashed!important}.img-container:hover .upload-icon{display:flex}.img-container:not(:has(img)):before{content:\"Choose file or Drag here.\";top:50%;left:50%;font-size:12px;position:absolute;color:gray;text-align:center;transform:translate(-50%,-50%)}.upload-icon:not(ion-icon){background:#00000050}.upload-icon{top:0;left:0;display:none;cursor:pointer}.d-btn{right:10px;bottom:10px;width:32px;height:32px;background-color:#fee2e2}.d-btn ion-icon{color:#dc2626}.dragging{border:2px dashed #ED6B26!important}.dragging:not(:has(img)):before{content:\"Drop\";font-size:32px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ratio: [{
                 type: Input
             }], label: [{
@@ -2106,10 +2043,10 @@ class ProfileService {
             return authMsMyProfile;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ProfileService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ProfileService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ProfileService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ProfileService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2244,10 +2181,10 @@ class AuthService {
             variables: { input }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Apollo }, { token: ProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Apollo }, { token: ProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2280,10 +2217,10 @@ class CurrencyService {
       `,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CurrencyService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CurrencyService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CurrencyService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CurrencyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CurrencyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CurrencyService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2319,10 +2256,10 @@ class CountryService {
       `,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CountryService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CountryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CountryService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CountryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: CountryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: CountryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2419,8 +2356,8 @@ class FormCurrencyInputComponent {
         this.isLoading = b;
         this.ch.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormCurrencyInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: 'numberPlaceholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormCurrencyInputComponent, isStandalone: true, selector: "up-currency-input", inputs: { label: "label", clearable: "clearable", isInputNumber: "isInputNumber", numberValue: "numberValue", isNumberDisabled: "isNumberDisabled", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormCurrencyInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: 'numberPlaceholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormCurrencyInputComponent, isStandalone: true, selector: "up-currency-input", inputs: { label: "label", clearable: "clearable", isInputNumber: "isInputNumber", numberValue: "numberValue", isNumberDisabled: "isNumberDisabled", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -2431,16 +2368,16 @@ class FormCurrencyInputComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormCurrencyInputComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n@if (!isInputNumber) {\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n} \n@else {\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n}\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormCurrencyInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormCurrencyInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-currency-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
                     }, imports: [
-                        CommonModule,
                         FormsModule,
-                        NgSelectModule
+                        NgSelectModule,
+                        NgTemplateOutlet,
                     ], providers: [
                         {
                             multi: true,
@@ -2452,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormCurrencyInputComponent
                         }
-                    ], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"] }]
+                    ], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n@if (!isInputNumber) {\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n} \n@else {\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n}\n\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -2484,6 +2421,7 @@ class FormCountryInputComponent {
         this.countryService = countryService;
         this.clearable = true;
         this.required = false;
+        this.multiple = false;
         this.disabled = false;
         this.onChange = new EventEmitter();
         this.items = [];
@@ -2528,7 +2466,11 @@ class FormCountryInputComponent {
             this.isTouched = true;
         }
         if (!this.disabled) {
-            this.value = e?.value;
+            if (!e)
+                this.value = null;
+            else {
+                this.value = !this.multiple ? e.value : e.map((o) => o.value);
+            }
             this.changed(this.value);
             this.onChange.emit(e.data);
             this.errorMsg = getFormErrorMessage(this.formControl.errors, 'Country');
@@ -2538,8 +2480,8 @@ class FormCountryInputComponent {
         this.isLoading = b;
         this.ch.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormCountryInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FormCountryInputComponent, isStandalone: true, selector: "up-country-input", inputs: { clearable: "clearable", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormCountryInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FormCountryInputComponent, isStandalone: true, selector: "up-country-input", inputs: { clearable: "clearable", required: "required", multiple: "multiple", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -2550,14 +2492,13 @@ class FormCountryInputComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormCountryInputComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FormCountryInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormCountryInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-country-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block'
                     }, imports: [
-                        CommonModule,
                         FormsModule,
                         NgSelectModule
                     ], providers: [
@@ -2571,7 +2512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormCountryInputComponent
                         }
-                    ], template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+                    ], template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [multiple]=\"multiple\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n@if (errorMsg) {\n    <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -2579,6 +2520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                 type: Input
             }], required: [{
                 type: Input
+            }], multiple: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], onChange: [{
@@ -2667,22 +2610,21 @@ class FilterComponent {
             this.activeFilter.push({ label: `${key}:${val}`, key, value: val });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FilterComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n    <div *ngIf=\"activeFilter.length > 0\" class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n        <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\" *ngFor=\"let item of activeFilter; index as i\">\n            <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n            {{ item.label }}\n        </div>\n    </div>\n\n    <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n<ng-container *ngIf=\"config.mode === 'advanced'\">\n    <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n    <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n\n    <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n        <ng-template>\n            <div class=\"d-flex flex-column filter\">\n                <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n                    <ion-buttons>\n                        <ion-button size=\"small\" (click)=\"close()\">\n                            <ion-icon slot=\"icon-only\" name=\"close\" />\n                        </ion-button>\n                    </ion-buttons>\n    \n                    <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n                </div>\n    \n                <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n                    <ng-container *ngFor=\"let c of config.fields\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchCase=\"'number'\" />\n                            \n                            <div class=\"my-4\" *ngSwitchCase=\"'checkbox'\">\n                                <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n                            </div>\n    \n                            <div class=\"d-flex gap-3 my-4\" *ngSwitchCase=\"'date-range'\">\n                                <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n                                <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n                            </div>\n    \n                            <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" *ngSwitchCase=\"'select'\" />\n                            <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" *ngSwitchCase=\"'searchable-select'\" />\n    \n                            <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchDefault />\n                        </ng-container>\n                    </ng-container>\n                </form>\n    \n                <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n                    <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n                    <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n                </div>\n            </div>\n        </ng-template>\n    </ion-popover>    \n</ng-container>\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled", "presentation"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "addTag", "disabled", "searchable", "bindLabel", "bindValue"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FilterComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n    @if (activeFilter.length > 0) {\n        <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n            @for (item of activeFilter; track item.key; let i = $index) {\n                <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n                    <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n                    {{ item.label }}\n                </div>\n            }\n        </div>\n    }\n\n    <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n    <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n    <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n    \n    <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n        <ng-template>\n            <div class=\"d-flex flex-column filter\">\n                <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n                    <ion-buttons>\n                        <ion-button size=\"small\" (click)=\"close()\">\n                            <ion-icon slot=\"icon-only\" name=\"close\" />\n                        </ion-button>\n                    </ion-buttons>\n        \n                    <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n                </div>\n        \n                <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n                    @for (c of config.fields; track c.key) {\n                        @switch (c.type) {\n                            @case ('number') {\n                                <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n\n                            @case ('checkbox') {\n                                <div class=\"my-4\">\n                                    <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n                                </div>\n                            }\n\n                            @case ('date-range') {\n                                <div class=\"d-flex gap-3 my-4\">\n                                    <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n                                    <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n                                </div>\n                            }\n\n                            @case ('select') { \n                                <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" /> \n                            }\n\n                            @case ('searchable-select') { \n                                <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" /> \n                            }\n                            \n                            @default { \n                                <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n                        }\n                    }\n                </form>\n        \n                <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n                    <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n                    <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n                </div>\n            </div>\n        </ng-template>\n     </ion-popover>    \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled", "presentation"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "addTag", "disabled", "searchable", "bindLabel", "bindValue"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block position-relative'
                     }, imports: [
                         IonicModule,
-                        CommonModule,
                         FormDateComponent,
                         FormInputComponent,
                         ReactiveFormsModule,
                         FormSelectComponent,
                         FormSearchableSelectComponent
-                    ], template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n    <div *ngIf=\"activeFilter.length > 0\" class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n        <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\" *ngFor=\"let item of activeFilter; index as i\">\n            <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n            {{ item.label }}\n        </div>\n    </div>\n\n    <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n<ng-container *ngIf=\"config.mode === 'advanced'\">\n    <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n    <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n\n    <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n        <ng-template>\n            <div class=\"d-flex flex-column filter\">\n                <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n                    <ion-buttons>\n                        <ion-button size=\"small\" (click)=\"close()\">\n                            <ion-icon slot=\"icon-only\" name=\"close\" />\n                        </ion-button>\n                    </ion-buttons>\n    \n                    <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n                </div>\n    \n                <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n                    <ng-container *ngFor=\"let c of config.fields\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchCase=\"'number'\" />\n                            \n                            <div class=\"my-4\" *ngSwitchCase=\"'checkbox'\">\n                                <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n                            </div>\n    \n                            <div class=\"d-flex gap-3 my-4\" *ngSwitchCase=\"'date-range'\">\n                                <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n                                <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n                            </div>\n    \n                            <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" *ngSwitchCase=\"'select'\" />\n                            <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" *ngSwitchCase=\"'searchable-select'\" />\n    \n                            <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchDefault />\n                        </ng-container>\n                    </ng-container>\n                </form>\n    \n                <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n                    <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n                    <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n                </div>\n            </div>\n        </ng-template>\n    </ion-popover>    \n</ng-container>\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"] }]
+                    ], template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n    @if (activeFilter.length > 0) {\n        <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n            @for (item of activeFilter; track item.key; let i = $index) {\n                <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n                    <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n                    {{ item.label }}\n                </div>\n            }\n        </div>\n    }\n\n    <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n    <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n    <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n    \n    <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n        <ng-template>\n            <div class=\"d-flex flex-column filter\">\n                <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n                    <ion-buttons>\n                        <ion-button size=\"small\" (click)=\"close()\">\n                            <ion-icon slot=\"icon-only\" name=\"close\" />\n                        </ion-button>\n                    </ion-buttons>\n        \n                    <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n                </div>\n        \n                <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n                    @for (c of config.fields; track c.key) {\n                        @switch (c.type) {\n                            @case ('number') {\n                                <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n\n                            @case ('checkbox') {\n                                <div class=\"my-4\">\n                                    <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n                                </div>\n                            }\n\n                            @case ('date-range') {\n                                <div class=\"d-flex gap-3 my-4\">\n                                    <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n                                    <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n                                </div>\n                            }\n\n                            @case ('select') { \n                                <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" /> \n                            }\n\n                            @case ('searchable-select') { \n                                <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" /> \n                            }\n                            \n                            @default { \n                                <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n                        }\n                    }\n                </form>\n        \n                <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n                    <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n                    <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n                </div>\n            </div>\n        </ng-template>\n     </ion-popover>    \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -2712,10 +2654,10 @@ class GridService {
             this.apis[id]?.purgeInfiniteCache();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2794,10 +2736,10 @@ class GridSnapshotComponent {
         };
         this.gridApi.setGridOption('datasource', datasource);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridSnapshotComponent, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: GridSnapshotComponent, isStandalone: true, selector: "up-snapshot-grid", inputs: { id: "id", config: "config", rowSelection: "rowSelection" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSelectionChanged: "onSelectionChanged" }, host: { classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<ag-grid-angular class=\"ag-theme-balham h-100\"\n    rowModelType=\"infinite\"\n    [pagination]=\"true\"\n    [animateRows]=\"true\"\n    [rowSelection]=\"rowSelection\"\n    [columnDefs]=\"config.colDefs\"\n    [defaultColDef]=\"defaultColDef\"\n    [cacheBlockSize]=\"config.rowPerPage\"\n    [paginationPageSize]=\"config.rowPerPage\"\n    [overlayNoRowsTemplate]=\"config.noRowText\"\n    (dragStopped)=\"dragColumn($event)\"\n    (gridReady)=\"setDatasource($event)\"\n    (rowClicked)=\"clickRow($event.data)\"\n    (selectionChanged)=\"changeSelected($event)\"\n    (paginationChanged)=\"changePagination($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i2$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridSnapshotComponent, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: GridSnapshotComponent, isStandalone: true, selector: "up-snapshot-grid", inputs: { id: "id", config: "config", rowSelection: "rowSelection" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSelectionChanged: "onSelectionChanged" }, host: { classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<ag-grid-angular class=\"ag-theme-balham h-100\"\n    rowModelType=\"infinite\"\n    [pagination]=\"true\"\n    [animateRows]=\"true\"\n    [rowSelection]=\"rowSelection\"\n    [columnDefs]=\"config.colDefs\"\n    [defaultColDef]=\"defaultColDef\"\n    [cacheBlockSize]=\"config.rowPerPage\"\n    [paginationPageSize]=\"config.rowPerPage\"\n    [overlayNoRowsTemplate]=\"config.noRowText\"\n    (dragStopped)=\"dragColumn($event)\"\n    (gridReady)=\"setDatasource($event)\"\n    (rowClicked)=\"clickRow($event.data)\"\n    (selectionChanged)=\"changeSelected($event)\"\n    (paginationChanged)=\"changePagination($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i2$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridSnapshotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridSnapshotComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-snapshot-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block h-100 w-100'
@@ -2888,10 +2830,10 @@ class GridPaginationComponent {
         };
         this.gridApi?.setGridOption('datasource', datasource);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridPaginationComponent, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: GridPaginationComponent, isStandalone: true, selector: "up-pagination-grid", inputs: { config: "config", rowData: "rowData", id: "id", rowModelType: "rowModelType", rowSelection: "rowSelection" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSelectionChanged: "onSelectionChanged" }, host: { classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<ag-grid-angular class=\"ag-theme-balham h-100\"\n    [pagination]=\"true\"\n    [animateRows]=\"true\"\n    [rowModelType]=\"rowModelType\"\n    [rowSelection]=\"rowSelection\"\n    [columnDefs]=\"config.colDefs\"\n    [defaultColDef]=\"defaultColDef\"\n    [cacheBlockSize]=\"config.rowPerPage\"\n    [paginationPageSize]=\"config.rowPerPage\"\n    [overlayNoRowsTemplate]=\"config.noRowText\"\n    (dragStopped)=\"dragColumn($event)\"\n    (gridReady)=\"setDatasource($event)\"\n    (rowClicked)=\"clickRow($event.data)\"\n    (selectionChanged)=\"changeSelected($event)\"\n    (paginationChanged)=\"changePagination($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i2$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridPaginationComponent, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: GridPaginationComponent, isStandalone: true, selector: "up-pagination-grid", inputs: { config: "config", rowData: "rowData", id: "id", rowModelType: "rowModelType", rowSelection: "rowSelection" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSelectionChanged: "onSelectionChanged" }, host: { classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<ag-grid-angular class=\"ag-theme-balham h-100\"\n    [pagination]=\"true\"\n    [animateRows]=\"true\"\n    [rowModelType]=\"rowModelType\"\n    [rowSelection]=\"rowSelection\"\n    [columnDefs]=\"config.colDefs\"\n    [defaultColDef]=\"defaultColDef\"\n    [cacheBlockSize]=\"config.rowPerPage\"\n    [paginationPageSize]=\"config.rowPerPage\"\n    [overlayNoRowsTemplate]=\"config.noRowText\"\n    (dragStopped)=\"dragColumn($event)\"\n    (gridReady)=\"setDatasource($event)\"\n    (rowClicked)=\"clickRow($event.data)\"\n    (selectionChanged)=\"changeSelected($event)\"\n    (paginationChanged)=\"changePagination($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i2$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: GridPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: GridPaginationComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-pagination-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block h-100 w-100'
@@ -2917,6 +2859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                 type: Output
             }] } });
 
+;
 class ListPaginationContainerComponent {
     constructor(id, router) {
         this.id = id;
@@ -2936,23 +2879,21 @@ class ListPaginationContainerComponent {
     }
     search(k) {
         this.onSearch.emit(k);
-        this.gridApi.refreshInfiniteCache();
+        this.gridApi.paginationGoToFirstPage();
+        this.gridApi.purgeInfiniteCache();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListPaginationContainerComponent, deps: [{ token: 'id', attribute: true }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ListPaginationContainerComponent, isStandalone: true, selector: "up-list-pagination-container", inputs: { header: "header", config: "config" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSearch: "onSearch" }, host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        <up-btn-group *ngIf=\"config.buttons && config.buttons.length > 0\" class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\" *ngIf=\"config.filterConfig\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ListPaginationContainerComponent, deps: [{ token: 'id', attribute: true }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ListPaginationContainerComponent, isStandalone: true, selector: "up-list-pagination-container", inputs: { header: "header", config: "config" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSearch: "onSearch" }, host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        @if (config.buttons && config.buttons.length > 0) {\n            <up-btn-group class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n        }\n    </div>\n\n    @if (config.filterConfig) {\n        <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\">\n            <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListPaginationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ListPaginationContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-list-pagination-container', host: {
                         class: 'd-flex flex-column h-100 w-100'
                     }, imports: [
-                        IonicModule,
-                        CommonModule,
-                        RouterModule,
                         FilterComponent,
                         ButtonGroupComponent,
                         GridPaginationComponent
-                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        <up-btn-group *ngIf=\"config.buttons && config.buttons.length > 0\" class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\" *ngIf=\"config.filterConfig\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"] }]
+                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        @if (config.buttons && config.buttons.length > 0) {\n            <up-btn-group class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n        }\n    </div>\n\n    @if (config.filterConfig) {\n        <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\">\n            <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['id']
@@ -2992,21 +2933,18 @@ class ListSnapshotContainerComponent {
         this.gridApi.paginationGoToFirstPage();
         this.gridApi.purgeInfiniteCache();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListSnapshotContainerComponent, deps: [{ token: 'id', attribute: true }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ListSnapshotContainerComponent, isStandalone: true, selector: "up-list-snapshot-container", inputs: { header: "header", config: "config" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSearch: "onSearch" }, host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        <up-btn-group *ngIf=\"config.buttons && config.buttons.length > 0\" class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\" *ngIf=\"config.filterConfig\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-snapshot-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridSnapshotComponent, selector: "up-snapshot-grid", inputs: ["id", "config", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ListSnapshotContainerComponent, deps: [{ token: 'id', attribute: true }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ListSnapshotContainerComponent, isStandalone: true, selector: "up-list-snapshot-container", inputs: { header: "header", config: "config" }, outputs: { onRowClick: "onRowClick", onGridReady: "onGridReady", onSearch: "onSearch" }, host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        @if (config.buttons && config.buttons.length > 0) {\n            <up-btn-group class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n        }\n    </div>\n\n    @if (config.filterConfig) {\n        <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\">\n            <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-snapshot-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridSnapshotComponent, selector: "up-snapshot-grid", inputs: ["id", "config", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListSnapshotContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ListSnapshotContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-list-snapshot-container', host: {
                         class: 'd-flex flex-column h-100 w-100'
                     }, imports: [
-                        IonicModule,
-                        CommonModule,
-                        RouterModule,
                         FilterComponent,
                         ButtonGroupComponent,
                         GridSnapshotComponent
-                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        <up-btn-group *ngIf=\"config.buttons && config.buttons.length > 0\" class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\" *ngIf=\"config.filterConfig\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-snapshot-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"] }]
+                    ], template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n        <h3 class=\"m-0 text-truncate\">{{ header }}</h3>\n\n        @if (config.buttons && config.buttons.length > 0) {\n            <up-btn-group class=\"flex-shrink-0\" id=\"btn-list-snapshot-container\" [config]=\"config.buttons\" />\n        }\n    </div>\n\n    @if (config.filterConfig) {\n        <div class=\"flex-shrink-0 flex-grow-1 flex-lg-grow-0\">\n            <up-filter placeholder=\"Type to search\" id=\"filter-{{ id }}\" [config]=\"config.filterConfig\" (onSearch)=\"search($event)\" />\n        </div>\n    }\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-snapshot-grid [config]=\"config.gridConfig\" [id]=\"gridId\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" />\n</div>\n", styles: ["div:has(>up-filter){flex-basis:50%}@media (max-width: 576px){div:has(>up-filter){flex-basis:100%}}.flex-grow-1{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['id']
@@ -3034,10 +2972,10 @@ class TabContentComponent {
         this.isActive = s;
         this.ch.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabContentComponent, deps: [{ token: 'fragment', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: TabContentComponent, selector: "up-tab-content", inputs: { header: "header" }, host: { properties: { "class.flex-grow-1": "this.isActive" }, classAttribute: "overflow-auto" }, ngImport: i0, template: "<div [hidden]=\"!isActive\" class=\"h-100\">\n    <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabContentComponent, deps: [{ token: 'fragment', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TabContentComponent, selector: "up-tab-content", inputs: { header: "header" }, host: { properties: { "class.flex-grow-1": "this.isActive" }, classAttribute: "overflow-auto" }, ngImport: i0, template: "<div [hidden]=\"!isActive\" class=\"h-100\">\n    <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'up-tab-content', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'overflow-auto'
@@ -3080,10 +3018,10 @@ class TabGroupComponent {
             this.activeFragment = this.content.get(0).fragment;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabGroupComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: TabGroupComponent, selector: "up-tab-group", outputs: { onChange: "onChange" }, host: { classAttribute: "d-flex flex-column" }, queries: [{ propertyName: "content", predicate: TabContentComponent }], ngImport: i0, template: "<ion-segment [scrollable]=\"true\" [value]=\"activeFragment\" class=\"d-flex pb-4 flex-shrink-0\">\n    @for (c of content; track c.fragment) {\n        <ion-segment-button class=\"rounded\" [value]=\"c.fragment\" (click)=\"changeTab(c.fragment)\">\n            {{ c.header }}\n        </ion-segment-button>\n    }\n</ion-segment>\n\n<ng-content />\n", styles: ["ion-segment::-webkit-scrollbar{height:0}ion-segment-button{--color: #9E9E9E;--color-checked: #424242;--indicator-color: #ED6B26;border:none;height:34px;font-weight:400;min-width:100px;min-height:34px;width:fit-content;text-transform:none;letter-spacing:normal}ion-segment-button.segment-button-checked{font-weight:500}ion-segment-button::part(native){border-radius:4px}ion-segment-button::part(indicator-background){margin:auto;max-width:25%;border-radius:8px}\n"], dependencies: [{ kind: "component", type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabGroupComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: TabGroupComponent, selector: "up-tab-group", outputs: { onChange: "onChange" }, host: { classAttribute: "d-flex flex-column" }, queries: [{ propertyName: "content", predicate: TabContentComponent }], ngImport: i0, template: "<ion-segment [scrollable]=\"true\" [value]=\"activeFragment\" class=\"d-flex pb-4 flex-shrink-0\">\n    @for (c of content; track c.fragment) {\n        <ion-segment-button class=\"rounded\" [value]=\"c.fragment\" (click)=\"changeTab(c.fragment)\">\n            {{ c.header }}\n        </ion-segment-button>\n    }\n</ion-segment>\n\n<ng-content />\n", styles: ["ion-segment::-webkit-scrollbar{height:0}ion-segment-button{--color: #9E9E9E;--color-checked: #424242;--indicator-color: #ED6B26;border:none;height:34px;font-weight:400;min-width:100px;min-height:34px;width:fit-content;text-transform:none;letter-spacing:normal}ion-segment-button.segment-button-checked{font-weight:500}ion-segment-button::part(native){border-radius:4px}ion-segment-button::part(indicator-background){margin:auto;max-width:25%;border-radius:8px}\n"], dependencies: [{ kind: "component", type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'up-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-flex flex-column'
@@ -3096,13 +3034,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 class TabsComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: TabsComponentModule, declarations: [TabGroupComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: TabsComponentModule, declarations: [TabGroupComponent,
             TabContentComponent], imports: [IonicModule], exports: [TabGroupComponent,
             TabContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabsComponentModule, imports: [IonicModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsComponentModule, imports: [IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TabsComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3154,10 +3092,10 @@ class AuditService {
       `
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3210,10 +3148,10 @@ class AuditListComponent {
         this.criteria.tagValues = [guid];
         this.gridComponent.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditListComponent, deps: [{ token: 'id', attribute: true }, { token: 'mainUrl', attribute: true }, { token: i1$2.Router }, { token: AuditService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: AuditListComponent, isStandalone: true, selector: "up-audit-list", inputs: { relatedEntities: "relatedEntities", tagKeys: "tagKeys" }, host: { classAttribute: "d-flex flex-column h-100" }, viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridPaginationComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-end px-4 pb-4 flex-shrink-0\">\n    <up-filter class=\"w-100\" id=\"audit-filter\" placeholder=\"Type to search\" [config]=\"filterConfig\" (onSearch)=\"search($event);\" />\n</div>\n          \n<up-pagination-grid id=\"grid-audit\" class=\"flex-grow-1\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"rowClicked($event)\" />\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditListComponent, deps: [{ token: 'id', attribute: true }, { token: 'mainUrl', attribute: true }, { token: i1$2.Router }, { token: AuditService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: AuditListComponent, isStandalone: true, selector: "up-audit-list", inputs: { relatedEntities: "relatedEntities", tagKeys: "tagKeys" }, host: { classAttribute: "d-flex flex-column h-100" }, viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridPaginationComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-end px-4 pb-4 flex-shrink-0\">\n    <up-filter class=\"w-100\" id=\"audit-filter\" placeholder=\"Type to search\" [config]=\"filterConfig\" (onSearch)=\"search($event);\" />\n</div>\n          \n<up-pagination-grid id=\"grid-audit\" class=\"flex-grow-1\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"rowClicked($event)\" />\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-audit-list', host: {
                         class: 'd-flex flex-column h-100'
@@ -3265,7 +3203,9 @@ class AuditDetailComponent {
         this.isLoading = true;
         this.guid = '';
     }
-    ngOnDestroy() { this.sub?.unsubscribe(); }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
     setGridApi({ api }) {
         this.gridApi = api;
         this.getData();
@@ -3329,21 +3269,20 @@ class AuditDetailComponent {
         }));
         this.gridApi.setGridOption('rowData', changedData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditDetailComponent, deps: [{ token: i3$1.FormBuilder }, { token: AuditService }, { token: i1$2.ActivatedRoute }, { token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: AuditDetailComponent, isStandalone: true, selector: "up-audit-detail", ngImport: i0, template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        <form [formGroup]=\"form\" class=\"px-4 pb-4\" *ngIf=\"!isLoading; else loading\">\n              <div class=\"d-flex align-items-center gap-2 pb-3\">\n                  <ion-icon name=\"information-circle\" />\n                  <h5 class=\"m-0\">Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                  </div>\n              </div>\n              \n              <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n              <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n\n              <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                  <ion-icon name=\"laptop\" />\n                  <h5 class=\"m-0\">System Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                      <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                      <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                  </div>\n              </div>\n          </form>\n\n        <ng-template #loading>\n            <ion-skeleton-text class=\"sk-input mx-4 mb-4\" *ngFor=\"let i of [0,1,2,3,4,5,6]\" />\n        </ng-template>        \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditDetailComponent, deps: [{ token: i1$3.FormBuilder }, { token: AuditService }, { token: i1$2.ActivatedRoute }, { token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: AuditDetailComponent, isStandalone: true, selector: "up-audit-detail", ngImport: i0, template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        @if (isLoading) {\n            @for(i of [0,1,2,3,4,5,6]; track $index) {\n                <ion-skeleton-text class=\"sk-input mx-4 mb-4\" />\n            }\n        } @else {\n            <form [formGroup]=\"form\" class=\"px-4 pb-4\">\n                <div class=\"d-flex align-items-center gap-2 pb-3\">\n                    <ion-icon name=\"information-circle\" />\n                    <h5 class=\"m-0\">Information</h5>\n                </div>\n  \n                <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                    </div>\n  \n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                    </div>\n                </div>\n                \n                <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n                <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n  \n                <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                    <ion-icon name=\"laptop\" />\n                    <h5 class=\"m-0\">System Information</h5>\n                </div>\n  \n                <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                        <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                    </div>\n  \n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                        <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                    </div>\n                </div>\n            </form>\n        }   \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuditDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuditDetailComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-audit-detail', imports: [
-                        CommonModule,
                         IonicModule,
                         GridPaginationComponent,
                         TabsComponentModule,
                         FormInputComponent,
                         FormTextareaComponent,
                         ReactiveFormsModule
-                    ], template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        <form [formGroup]=\"form\" class=\"px-4 pb-4\" *ngIf=\"!isLoading; else loading\">\n              <div class=\"d-flex align-items-center gap-2 pb-3\">\n                  <ion-icon name=\"information-circle\" />\n                  <h5 class=\"m-0\">Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                  </div>\n              </div>\n              \n              <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n              <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n\n              <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                  <ion-icon name=\"laptop\" />\n                  <h5 class=\"m-0\">System Information</h5>\n              </div>\n\n              <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                      <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                  </div>\n\n                  <div class=\"flex-grow-1\">\n                      <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                      <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                  </div>\n              </div>\n          </form>\n\n        <ng-template #loading>\n            <ion-skeleton-text class=\"sk-input mx-4 mb-4\" *ngFor=\"let i of [0,1,2,3,4,5,6]\" />\n        </ng-template>        \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i3$1.FormBuilder }, { type: AuditService }, { type: i1$2.ActivatedRoute }, { type: i1.NavController }] });
+                    ], template: "<up-tab-group class=\"h-100\">\n    <up-tab-content header=\"Detail\" fragment=\"detail\">\n        @if (isLoading) {\n            @for(i of [0,1,2,3,4,5,6]; track $index) {\n                <ion-skeleton-text class=\"sk-input mx-4 mb-4\" />\n            }\n        } @else {\n            <form [formGroup]=\"form\" class=\"px-4 pb-4\">\n                <div class=\"d-flex align-items-center gap-2 pb-3\">\n                    <ion-icon name=\"information-circle\" />\n                    <h5 class=\"m-0\">Information</h5>\n                </div>\n  \n                <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-lg-4\" label=\"Action\" formControlName=\"action\" />\n                    </div>\n  \n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"Source IP\" formControlName=\"sourceIp\" />\n                    </div>\n                </div>\n                \n                <up-input class=\"mb-4\" label=\"User Name\" formControlName=\"userName\" />\n                <up-textarea class=\"mb-4\" label=\"Description\" formControlName=\"description\" />\n  \n                <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                    <ion-icon name=\"laptop\" />\n                    <h5 class=\"m-0\">System Information</h5>\n                </div>\n  \n                <div class=\"d-flex flex-column flex-lg-row gap-4\">\n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"Action Date\" formControlName=\"createdAt\" />\n                        <up-input class=\"mb-lg-4\" label=\"Source Platform\" formControlName=\"sourcePlatform\" />\n                    </div>\n  \n                    <div class=\"flex-grow-1\">\n                        <up-input class=\"mb-4\" label=\"MS Source\" formControlName=\"msSource\" />\n                        <up-input class=\"mb-4\" label=\"Function\" formControlName=\"function\" />\n                    </div>\n                </div>\n            </form>\n        }   \n    </up-tab-content>\n\n    <up-tab-content header=\"Attributes\" fragment=\"attributes\">\n        <up-pagination-grid id=\"grid-audit-detail\" rowModelType=\"clientSide\" [config]=\"gridConfig\" (onGridReady)=\"setGridApi($event)\" />\n    </up-tab-content>\n</up-tab-group>\n", styles: ["ion-icon{font-size:24px;margin-right:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: AuditService }, { type: i1$2.ActivatedRoute }, { type: i1.NavController }] });
 
 class ApprovalService {
     constructor(apollo) {
@@ -3377,10 +3316,10 @@ class ApprovalService {
       `
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3472,10 +3411,10 @@ class ApprovalListComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalListComponent, deps: [{ token: 'ENTITIES' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: ApprovalService }, { token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ApprovalListComponent, isStandalone: true, selector: "up-approval-list", host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalListComponent, deps: [{ token: 'ENTITIES' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: ApprovalService }, { token: i1.AlertController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ApprovalListComponent, isStandalone: true, selector: "up-approval-list", host: { classAttribute: "d-flex flex-column h-100 w-100" }, ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap\">\n    <div class=\"flex-grow-1 d-flex align-items-center gap-3\">\n        <h3 class=\"m-0\">Approval</h3>\n\n        <up-btn-group id=\"approval-list\" [config]=\"btnConfig\" />\n    </div>\n\n    <div class=\"flex-shrink-0 flex-grow-1\">\n        <up-filter placeholder=\"Type to search\" id=\"filter-approval-list\" [config]=\"filterConfig\" (onSearch)=\"search($event)\" />\n    </div>\n</div>\n\n<div class=\"flex-grow-1 px-1 pb-1\">\n    <up-pagination-grid [config]=\"gridConfig\" id=\"grid-approval-list\" rowSelection=\"multiple\" (onGridReady)=\"setGridApi($event)\" (onRowClick)=\"openDetail($event)\" (onSelectionChanged)=\"selectApprovals()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FilterComponent, selector: "up-filter", inputs: ["id", "config"], outputs: ["onSearch"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: GridPaginationComponent, selector: "up-pagination-grid", inputs: ["config", "rowData", "id", "rowModelType", "rowSelection"], outputs: ["onRowClick", "onGridReady", "onSelectionChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-approval-list', host: {
                         class: 'd-flex flex-column h-100 w-100'
@@ -3587,10 +3526,10 @@ class ApprovalFormComponent {
         this.ch.markForCheck();
     }
     async showAlert(header, message, buttons = ['OK'], inputs = []) { (await this.alertCtrl.create({ header, message, buttons, inputs })).present(); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalFormComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: ApprovalService }, { token: GridService }, { token: i1.AlertController }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 pb-4 d-block" }, ngImport: i0, template: "@if (isLoading) {\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\n}\n@else {\n    @for (d of data; track $index) {\n        @if (data.length > 1) {\n            <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                <ion-icon name=\"document\" />\n                <h5 class=\"m-0\">Approval {{ $index + 1 }}</h5>\n            </div>\n        }\n    \n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n\n        <up-textarea label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalFormComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: ApprovalService }, { token: GridService }, { token: i1.AlertController }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { isLoading: "isLoading" }, host: { classAttribute: "px-4 pb-4 d-block" }, ngImport: i0, template: "@if (isLoading) {\n    <div class=\"d-flex flex-column flex-lg-row gap-4\">\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n\n        <div class=\"flex-grow-1\">\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n            <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n        </div>\n    </div>\n    \n    <ion-skeleton-text class=\"m-0 mb-4 sk-input\" />\n    <ion-skeleton-text class=\"m-0 sk-input\" />\n}\n@else {\n    @for (d of data; track $index) {\n        @if (data.length > 1) {\n            <div class=\"d-flex align-items-center gap-2 pb-3 pt-2\">\n                <ion-icon name=\"document\" />\n                <h5 class=\"m-0\">Approval {{ $index + 1 }}</h5>\n            </div>\n        }\n    \n        <div class=\"d-flex flex-column flex-lg-row gap-4\">\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Entity\" [disabled]=\"true\" [value]=\"d.entity\" />\n                <up-input class=\"mb-4\" label=\"Remark\" [disabled]=\"true\" [value]=\"d.remark\" />\n            </div>\n\n            <div class=\"flex-grow-1\">\n                <up-input class=\"mb-4\" label=\"Created At\" [disabled]=\"true\" [value]=\"d.createdAt | date:'dd MMM yyyy HH:mm'\" />\n                <up-input class=\"mb-4\" label=\"Status\" [disabled]=\"true\" [value]=\"d.status\" />\n            </div>\n        </div>\n\n        <up-textarea label=\"JSON\" [disabled]=\"true\" [value]=\"d.data | json\" />\n        <up-textarea class=\"mt-4\" label=\"Reason\" [disabled]=\"true\" [value]=\"d.reason\" *ngIf=\"d.status !== 'PENDING'\" />\n    }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "component", type: FormTextareaComponent, selector: "up-textarea", inputs: ["value", "required", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-approval-form', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'px-4 pb-4 d-block'
@@ -3652,10 +3591,10 @@ class ApprovalDetailComponent {
     setChildGuid(guids) {
         this.formComponent?.setGuid(guids, this.approvalGroupGuid, this.isApprove);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalDetailComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ApprovalDetailComponent, isStandalone: true, selector: "up-approval-detail", host: { classAttribute: "d-block h-100" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: ApprovalFormComponent, descendants: true }], ngImport: i0, template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    @if (!formComponent?.isLoading) {\n        <up-btn-group id=\"approval-detail-button\" [config]=\"btnConfig\" button />\n    }\n    @else {\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\n    }\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: ColumnHeaderContainerComponent, selector: "up-column-header-container", inputs: ["header", "prevUrl"] }, { kind: "component", type: ApprovalFormComponent, selector: "up-approval-form", inputs: ["isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalDetailComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: ApprovalDetailComponent, isStandalone: true, selector: "up-approval-detail", host: { classAttribute: "d-block h-100" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: ApprovalFormComponent, descendants: true }], ngImport: i0, template: "<up-column-header-container header=\"Approval Detail\" prevUrl=\"/approval\" class=\"bg-white\">\n    @if (!formComponent?.isLoading) {\n        <up-btn-group id=\"approval-detail-button\" [config]=\"btnConfig\" button />\n    }\n    @else {\n        <ion-skeleton-text class=\"m-0 sk-btn\" button />\n    }\n\n    <up-tab-group class=\"h-100\" (onChange)=\"changeTab($event)\">\n        <up-tab-content header=\"Detail\" fragment=\"detail\">\n            <up-approval-form />\n        </up-tab-content>\n    </up-tab-group>\n</up-column-header-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "ngmodule", type: TabsComponentModule }, { kind: "component", type: TabGroupComponent, selector: "up-tab-group", outputs: ["onChange"] }, { kind: "component", type: TabContentComponent, selector: "up-tab-content", inputs: ["header"] }, { kind: "component", type: ButtonGroupComponent, selector: "up-btn-group", inputs: ["config"] }, { kind: "component", type: ColumnHeaderContainerComponent, selector: "up-column-header-container", inputs: ["header", "prevUrl"] }, { kind: "component", type: ApprovalFormComponent, selector: "up-approval-form", inputs: ["isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ApprovalDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ApprovalDetailComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-approval-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block h-100'
@@ -3695,14 +3634,14 @@ class InfiniteScrollDirective {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: InfiniteScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: InfiniteScrollDirective, isStandalone: true, selector: "[upInfiniteScroll]", inputs: { threshold: "threshold", rootMargin: "rootMargin" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InfiniteScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: InfiniteScrollDirective, isStandalone: true, selector: "[upInfiniteScroll]", inputs: { threshold: "threshold", rootMargin: "rootMargin" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: InfiniteScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InfiniteScrollDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: '[upInfiniteScroll]',
-                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { threshold: [{
                 type: Input
@@ -3722,16 +3661,15 @@ class InfiniteScrollComponent {
     scroll() {
         this.onScrollThreshold.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: InfiniteScrollComponent, isStandalone: true, selector: "up-infinite-scroll", inputs: { loadingText: "loadingText", threshold: "threshold", rootMargin: "rootMargin", loadingIcon: "loadingIcon" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n    <div class=\"pt-2\" *ngIf=\"loadingText\">{{ loadingText }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[upInfiniteScroll]", inputs: ["threshold", "rootMargin"], outputs: ["onScrollThreshold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: InfiniteScrollComponent, isStandalone: true, selector: "up-infinite-scroll", inputs: { loadingText: "loadingText", threshold: "threshold", rootMargin: "rootMargin", loadingIcon: "loadingIcon" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n\n    @if (loadingText) {\n        <div class=\"pt-2\">{{ loadingText }}</div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[upInfiniteScroll]", inputs: ["threshold", "rootMargin"], outputs: ["onScrollThreshold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
                         IonicModule,
                         InfiniteScrollDirective
-                    ], template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n    <div class=\"pt-2\" *ngIf=\"loadingText\">{{ loadingText }}</div>\n</div>\n" }]
+                    ], template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n\n    @if (loadingText) {\n        <div class=\"pt-2\">{{ loadingText }}</div>\n    }\n</div>\n" }]
         }], propDecorators: { loadingText: [{
                 type: Input
             }], threshold: [{
@@ -3818,10 +3756,10 @@ class AuthResolver {
             buffer = chars.indexOf(buffer);
         return output;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthResolver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthResolver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AuthResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AuthResolver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3846,10 +3784,10 @@ class HeaderInterceptor {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: HeaderInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: HeaderInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: HeaderInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderInterceptor, decorators: [{
             type: Injectable
         }] });
 
@@ -3884,10 +3822,10 @@ class RefreshTokenInterceptor {
             return throwError(() => errors[0]);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RefreshTokenInterceptor, deps: [{ token: i1$2.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RefreshTokenInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RefreshTokenInterceptor, deps: [{ token: i1$2.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RefreshTokenInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RefreshTokenInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: RefreshTokenInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: AuthService }] });