@unipin/angular-applet 17.2.3 → 17.3.0

package/fesm2022/unipin-angular-applet.mjs

@@ -1,5 +1,5 @@
 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, ContentChildren } 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 } from '@angular/common';
 import * as i1 from '@ionic/angular';
@@ -581,11 +581,17 @@ class FormDateComponent {
         this.ch = ch;
         this.required = false;
         this.disabled = false;
+        this.presentation = 'date';
         this.isTouched = false;
         this.value = '';
+        this.dateFormat = 'dd LLL yyyy';
         this.onChange = (_val) => { };
         this.onTouched = () => { };
     }
+    ngOnInit() {
+        if (this.presentation === 'date-time')
+            this.dateFormat = `${this.dateFormat} HH:mm`;
+    }
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
     writeValue(val) {
@@ -613,7 +619,7 @@ class FormDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.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: "17.2.1", type: FormDateComponent, isStandalone: true, selector: "up-date", inputs: { label: "label", required: "required", disabled: "disabled" }, host: { classAttribute: "d-block position-relative" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -624,7 +630,7 @@ class FormDateComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormDateComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</label>\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:'dd LLL yyyy'\">\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\" presentation=\"date\" value=\"{{ value }}\" [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", "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\" [presentation]=\"presentation\" value=\"{{ value }}\" [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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormDateComponent, decorators: [{
             type: Component,
@@ -644,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormDateComponent
                         }
-                    ], template: "<label class=\"form-label\">{{ label }}</label>\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:'dd LLL yyyy'\">\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\" presentation=\"date\" value=\"{{ value }}\" [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\" [presentation]=\"presentation\" value=\"{{ value }}\" [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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['name']
@@ -657,6 +663,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], presentation: [{
+                type: Input
             }] } });
 
 class FormInputComponent {
@@ -710,7 +718,7 @@ class FormInputComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormInputComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</label>\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<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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -727,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormInputComponent
                         }
-                    ], template: "<label class=\"form-label\">{{ label }}</label>\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<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -749,6 +757,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Output
             }] } });
 
+class LocaleNumberPipe {
+    transform(value, locale) {
+        if (!value)
+            return '';
+        if (!/[.,]/.test(value))
+            return Number(value).toLocaleString(locale);
+        else {
+            if (/,/.test(value) && /\./.test(value)) {
+                const seperator = this.extractSeperator(value);
+                const splitValue = value.split(seperator[seperator.length - 1] === ',' ? /,/ : /\./);
+                return Number(splitValue[0].replaceAll(/[,.]/g, '')).toLocaleString(locale) + seperator[seperator.length - 1] + splitValue[1];
+            }
+            return Number(value.replaceAll(/[,.]/g, '')).toLocaleString(locale);
+        }
+    }
+    extractSeperator(input) {
+        const seperators = [];
+        for (let i = 0; i < input.length; i++) {
+            const char = input[i];
+            if (char === '.' || char === ',')
+                seperators.push(char);
+        }
+        return seperators;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: LocaleNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: LocaleNumberPipe, isStandalone: true, name: "localeNumber" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: LocaleNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'localeNumber',
+                    pure: true
+                }]
+        }] });
+
+class FormNumberComponent {
+    constructor(placeholder, ch) {
+        this.placeholder = placeholder;
+        this.ch = ch;
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.isTouched = false;
+        this.onChange = (_val) => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    writeValue(val) {
+        this.value = val;
+        this.ch.markForCheck();
+    }
+    setDisabledState(d) {
+        this.disabled = d;
+        this.ch.markForCheck();
+    }
+    validate(control) {
+        this.formControl = control;
+        return null;
+    }
+    change({ value }) {
+        if (!this.isTouched) {
+            this.onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled) {
+            this.value = value;
+            this.onChange(this.value);
+            this.errorMsg = getFormErrorMessage(this.formControl?.errors, this.label);
+        }
+    }
+    onKeyDown(ev) {
+        const allowedKeys = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End', ',', '.']);
+        const key = ev.key;
+        if (allowedKeys.has(key))
+            return;
+        if (!/^\d$/.test(key))
+            ev.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.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: "17.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: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FormNumberComponent
+            },
+            {
+                multi: true,
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", 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: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FormNumberComponent
+                        },
+                        {
+                            multi: true,
+                            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" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['placeholder']
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }] } });
+
 class FormPasswordComponent {
     constructor(label, autocomplete, ch) {
         this.label = label;
@@ -804,7 +937,7 @@ class FormPasswordComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormPasswordComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</label>\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" />\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)\" />\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormPasswordComponent, decorators: [{
             type: Component,
@@ -824,7 +957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormPasswordComponent
                         }
-                    ], template: "<label class=\"form-label\">{{ label }}</label>\n<input [type]=\"type\" autocomplete=\"{{ autocomplete }}\" [required]=\"required\" class=\"form-control pe-5\" [value]=\"value\" (change)=\"change($event.target)\" />\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)\" />\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['label']
@@ -907,7 +1040,7 @@ class FormSearchableSelectComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormSearchableSelectComponent
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\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: 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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "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    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: 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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "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: "17.2.1", ngImport: i0, type: FormSearchableSelectComponent, decorators: [{
             type: Component,
@@ -928,7 +1061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormSearchableSelectComponent
                         }
-                    ], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\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    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" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -965,6 +1098,7 @@ class FormSelectComponent {
         this.label = '';
         this.multiple = false;
         this.required = false;
+        this.addTag = false;
         this.disabled = false;
         this.searchable = false;
         this.bindLabel = 'label';
@@ -1004,7 +1138,7 @@ class FormSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.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: "17.2.1", type: FormSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: "items", clearable: "clearable", label: "label", multiple: "multiple", required: "required", disabled: "disabled", searchable: "searchable", bindLabel: "bindLabel", bindValue: "bindValue" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1015,7 +1149,7 @@ class FormSelectComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormSelectComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\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    [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: 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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "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    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: 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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "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: "17.2.1", ngImport: i0, type: FormSelectComponent, decorators: [{
             type: Component,
@@ -1036,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormSelectComponent
                         }
-                    ], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\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    [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    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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['placeholder']
@@ -1051,6 +1185,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Input
             }], required: [{
                 type: Input
+            }], addTag: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], searchable: [{
@@ -1110,7 +1246,7 @@ class FormTextareaComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormTextareaComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\">{{ label }}</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<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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormTextareaComponent, decorators: [{
             type: Component,
@@ -1127,7 +1263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormTextareaComponent
                         }
-                    ], template: "<label class=\"form-label\">{{ label }}</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<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['label']
@@ -1152,14 +1288,20 @@ class DragNDropDirective {
     onDragOver(evt) {
         evt.preventDefault();
         evt.stopPropagation();
+        const target = evt.target;
+        target.classList.add('dragging');
     }
     onDragLeave(evt) {
         evt.preventDefault();
         evt.stopPropagation();
+        const target = evt.target;
+        target.classList.remove('dragging');
     }
     onDrop(evt) {
         evt.preventDefault();
         evt.stopPropagation();
+        const target = evt.target;
+        target.classList.remove('dragging');
         const files = evt.dataTransfer.files;
         if (files.length > 0)
             this.fileDropped.emit(files);
@@ -1220,7 +1362,7 @@ class FormImagePickerComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FormImagePickerComponent
             },
-        ], ngImport: i0, template: "<div class=\"flex-shrink-0 mb-4\">\n\t<label class=\"mb-2 d-block form-label\">\n\t\t<span class=\"text-danger me-2\" *ngIf=\"required\">&ast;</span>{{ label }}\n\t</label>\n\n\t<div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n\t\t<img *ngIf=\"imgSrc\" alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n\n\t\t<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\t\t\t<ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" *ngIf=\"!imgSrc; else deleteIcon\" />\n\n\t\t\t<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\t\t\t</ng-template>\n\t\t</div>\n\n\t\t<input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n\t</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:\"+\";top:50%;left:50%;font-size:32px;position:absolute;color:var(--border-color);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}\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        <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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormImagePickerComponent, decorators: [{
             type: Component,
@@ -1236,7 +1378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FormImagePickerComponent
                         },
-                    ], template: "<div class=\"flex-shrink-0 mb-4\">\n\t<label class=\"mb-2 d-block form-label\">\n\t\t<span class=\"text-danger me-2\" *ngIf=\"required\">&ast;</span>{{ label }}\n\t</label>\n\n\t<div class=\"img-container position-relative border rounded\" [ngStyle]=\"{ 'aspect-ratio': ratio }\" upDragNDrop (fileDropped)=\"selectPhoto($event)\"> \n\t\t<img *ngIf=\"imgSrc\" alt=\"{{ label }}\" class=\"rounded\" width=\"100%\" height=\"100%\" src=\"{{ imgSrc }}\" />\n\n\t\t<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\t\t\t<ion-icon class=\"upload-icon\" name=\"cloud-upload\" title=\"Drop file or click to browse\" *ngIf=\"!imgSrc; else deleteIcon\" />\n\n\t\t\t<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\t\t\t</ng-template>\n\t\t</div>\n\n\t\t<input type=\"file\" hidden accept=\"image/png, image/jpeg, image/jpg\" multiple=\"false\" (change)=\"selectPhoto($event)\" #file />\n\t</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:\"+\";top:50%;left:50%;font-size:32px;position:absolute;color:var(--border-color);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}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ratio: [{
                 type: Input
             }], label: [{
@@ -1330,7 +1472,7 @@ class FilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.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: "17.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:47%}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}\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"] }, { 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", "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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:47%}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}\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: 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: "17.2.1", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -2943,7 +3085,7 @@ class RefreshTokenInterceptor {
     }
     intercept(request, next) {
         return next.handle(request).pipe(catchError(({ error: { errors } }) => {
-            if (errors[0].extensions.code === 'UNAUTHORIZED') {
+            if (errors[0].extensions.code === 'USER_INVALID_TOKEN') {
                 return this.authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(switchMap(({ data }) => {
                     const { accessToken, refreshToken } = data.authMsRefreshAccessToken;
                     AuthService.authToken = accessToken;
@@ -2974,5 +3116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: AuthService }] });
 
-export { AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, HeaderInterceptor, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionModule, PermissionService, ProfileService, RefreshTokenInterceptor, TabContentComponent, TabGroupComponent, TabsComponentModule, UnauthorizedPage, bootstrap, getFormErrorMessage };
+export { AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, HeaderInterceptor, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionModule, PermissionService, ProfileService, RefreshTokenInterceptor, TabContentComponent, TabGroupComponent, TabsComponentModule, UnauthorizedPage, bootstrap, getFormErrorMessage };
 //# sourceMappingURL=unipin-angular-applet.mjs.map