@vallift/ngl 0.0.26 → 20.0.0

package/fesm2022/vallift-ngl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, effect, viewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, DOCUMENT, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, effect, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { retry, throwError, Subject, debounceTime, fromEvent, filter as filter$1, take, of } from 'rxjs';
@@ -10,7 +10,7 @@ import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { NgClass, DOCUMENT, NgStyle, CommonModule, DatePipe } from '@angular/common';
+import { NgClass, NgStyle, CommonModule, DatePipe } from '@angular/common';
 import { SvgIconComponent } from 'angular-svg-icon';
 import { CdkPortal, ComponentPortal } from '@angular/cdk/portal';
 import { NgxMaskDirective } from 'ngx-mask';
@@ -149,10 +149,10 @@ class BaseApiService {
             return this.baseUrl + url;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -160,8 +160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class BaseControlValueAccessor {
-    disabled = signal(false);
-    touched = signal(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     formControl = new FormControl();
     writeToInherited = false;
     get hasErrors() {
@@ -202,10 +202,10 @@ class BaseControlValueAccessor {
 }
 
 class BaseControlValueAccessorV2 {
-    controlValue = signal(null);
+    controlValue = signal(null, ...(ngDevMode ? [{ debugName: "controlValue" }] : []));
     actualValue;
-    disabled = signal(false);
-    touched = signal(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     formControl = new FormControl();
     writeToInherited = false;
     ngControl = inject(NgControl, { optional: true, self: true });
@@ -336,10 +336,10 @@ function getDynamicTypeStructure(obj) {
 }
 
 class BaseControlValueAccessorV3 {
-    errorMessages = input({});
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     valueChanged = output();
-    disabled = signal(false);
-    touched = signal(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
     formControl = new FormControl();
     ngControl = inject(NgControl, { optional: true, self: true });
     actualValue;
@@ -400,25 +400,25 @@ class BaseControlValueAccessorV3 {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseControlValueAccessorV3, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: BaseControlValueAccessorV3, isStandalone: true, selector: "ng-component", inputs: { errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseControlValueAccessorV3, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: BaseControlValueAccessorV3, isStandalone: true, selector: "ng-component", inputs: { errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseControlValueAccessorV3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseControlValueAccessorV3, decorators: [{
             type: Component,
             args: [{
                     imports: [],
                     template: '',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 class State {
-    responseSignal = signal(null);
-    initialLoadingSignal = signal(false);
-    loadingSignal = signal(false);
-    successSignal = signal(false);
-    failedSignal = signal(false);
-    errorSignal = signal(null);
-    stateSignal = signal(null);
+    responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : []));
+    initialLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "initialLoadingSignal" }] : []));
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
+    successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : []));
+    failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : []));
+    errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
+    stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
     response = this.responseSignal.asReadonly();
     initialLoading = this.initialLoadingSignal.asReadonly();
     loading = this.loadingSignal.asReadonly();
@@ -528,23 +528,23 @@ var RequestState;
 // }
 
 class PaginationState {
-    responseSignal = signal(null);
-    loadingSignal = signal(false);
-    successSignal = signal(false);
-    failedSignal = signal(false);
-    errorSignal = signal(null);
-    stateSignal = signal(null);
+    responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : []));
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
+    successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : []));
+    failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : []));
+    errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
+    stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
     response = this.responseSignal.asReadonly();
     loading = this.loadingSignal.asReadonly();
     success = this.successSignal.asReadonly();
     failed = this.failedSignal.asReadonly();
     error = this.errorSignal.asReadonly();
     state = this.stateSignal.asReadonly();
-    items = signal([]);
-    pageNumber = signal(0);
-    pageSize = signal(25);
-    totalRecords = signal(0);
-    totalPages = signal(0);
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    pageNumber = signal(0, ...(ngDevMode ? [{ debugName: "pageNumber" }] : []));
+    pageSize = signal(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    totalPages = signal(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     constructor() {
         this.stateSignal.set(RequestState.idle);
     }
@@ -605,16 +605,16 @@ class PaginationState {
 }
 
 class SpinnerComponent {
-    borderColor = input('border-primary-500');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\"\n  [ngClass]=\"borderColor()\"\n  role=\"status\">\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    borderColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\"\n  [ngClass]=\"borderColor()\"\n  role=\"status\">\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-spinner', standalone: true, imports: [
                         NgClass
                     ], template: "<div\n  class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\"\n  [ngClass]=\"borderColor()\"\n  role=\"status\">\n</div>\n" }]
-        }] });
+        }], propDecorators: { borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }] } });
 
 class AppSvgIconComponent {
     src;
@@ -624,10 +624,10 @@ class AppSvgIconComponent {
     getStyle() {
         return { ...this.svgStyle, 'width.px': this.size, 'height.px': this.size };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AppSvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AppSvgIconComponent, isStandalone: true, selector: "app-svg-icon", inputs: { src: "src", stretch: "stretch", size: "size", svgStyle: "svgStyle" }, ngImport: i0, template: "<svg-icon [src]=\"src\" [stretch]=\"stretch\" [svgStyle]=\"getStyle()\">\n</svg-icon>\n", styles: [""], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AppSvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AppSvgIconComponent, isStandalone: true, selector: "app-svg-icon", inputs: { src: "src", stretch: "stretch", size: "size", svgStyle: "svgStyle" }, ngImport: i0, template: "<svg-icon [src]=\"src\" [stretch]=\"stretch\" [svgStyle]=\"getStyle()\">\n</svg-icon>\n", styles: [""], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AppSvgIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AppSvgIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-svg-icon', standalone: true, imports: [
                         SvgIconComponent
@@ -646,18 +646,18 @@ class ButtonComponent {
     elementRef = inject(ElementRef);
     document = inject(DOCUMENT);
     renderer = inject(Renderer2);
-    type = input('button');
-    disabled = input(false);
-    fullWidth = input(false);
-    appearance = input('primary');
-    loading = input(false);
-    iconSize = input(18);
-    iconSrc = input();
-    iconColor = input(null);
-    buttonColor = input('bg-primary-500');
-    outlineColor = input('border-primary-500');
-    textButtonColor = input('text-primary-500');
-    size = input('medium');
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    appearance = input('primary', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    iconSize = input(18, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    iconColor = input(null, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    buttonColor = input('bg-primary-500', ...(ngDevMode ? [{ debugName: "buttonColor" }] : []));
+    outlineColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "outlineColor" }] : []));
+    textButtonColor = input('text-primary-500', ...(ngDevMode ? [{ debugName: "textButtonColor" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     buttonClick = new EventEmitter();
     formGroupDirective = inject(FormGroupDirective, { optional: true });
     getButtonClass() {
@@ -730,17 +730,17 @@ class ButtonComponent {
         formGroup.markAllAsTouched();
         formGroup.markAsPristine();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, outlineColor: { classPropertyName: "outlineColor", publicName: "outlineColor", isSignal: true, isRequired: false, transformFunction: null }, textButtonColor: { classPropertyName: "textButtonColor", publicName: "textButtonColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  (click)=\"onClick()\"\n  [type]=\"type()\"\n  class=\"relative whitespace-nowrap\"\n  [ngClass]=\"getButtonClass()\">\n\n  @if (iconSrc()) {\n    <app-svg-icon [src]=\"iconSrc()!\" [size]=\"iconSize()\" class=\"mr-3\"\n                  [ngClass]=\"loading() ? 'text-transparent' : getIconClass()\"></app-svg-icon>\n  }\n\n  <app-spinner class=\"w-min absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n               [borderColor]=\"loading() ? getLoaderColor() : 'border-transparent'\"></app-spinner>\n\n  <div [ngClass]=\"loading() ? 'text-transparent' : 'text-body2'\">\n    <ng-content></ng-content>\n  </div>\n\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, outlineColor: { classPropertyName: "outlineColor", publicName: "outlineColor", isSignal: true, isRequired: false, transformFunction: null }, textButtonColor: { classPropertyName: "textButtonColor", publicName: "textButtonColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  (click)=\"onClick()\"\n  [type]=\"type()\"\n  class=\"relative whitespace-nowrap\"\n  [ngClass]=\"getButtonClass()\">\n\n  @if (iconSrc()) {\n    <app-svg-icon [src]=\"iconSrc()!\" [size]=\"iconSize()\" class=\"mr-3\"\n                  [ngClass]=\"loading() ? 'text-transparent' : getIconClass()\"></app-svg-icon>\n  }\n\n  <app-spinner class=\"w-min absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n               [borderColor]=\"loading() ? getLoaderColor() : 'border-transparent'\"></app-spinner>\n\n  <div [ngClass]=\"loading() ? 'text-transparent' : 'text-body2'\">\n    <ng-content></ng-content>\n  </div>\n\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-button', standalone: true, imports: [
                         NgClass,
                         SpinnerComponent,
                         AppSvgIconComponent
                     ], template: "<button\n  (click)=\"onClick()\"\n  [type]=\"type()\"\n  class=\"relative whitespace-nowrap\"\n  [ngClass]=\"getButtonClass()\">\n\n  @if (iconSrc()) {\n    <app-svg-icon [src]=\"iconSrc()!\" [size]=\"iconSize()\" class=\"mr-3\"\n                  [ngClass]=\"loading() ? 'text-transparent' : getIconClass()\"></app-svg-icon>\n  }\n\n  <app-spinner class=\"w-min absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n               [borderColor]=\"loading() ? getLoaderColor() : 'border-transparent'\"></app-spinner>\n\n  <div [ngClass]=\"loading() ? 'text-transparent' : 'text-body2'\">\n    <ng-content></ng-content>\n  </div>\n\n</button>\n" }]
-        }], propDecorators: { buttonClick: [{
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], buttonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColor", required: false }] }], outlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlineColor", required: false }] }], textButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButtonColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], buttonClick: [{
                 type: Output
             }] } });
 
@@ -753,10 +753,10 @@ class AlertDialogComponent {
     onYesClicked() {
         this.dialogRef.close(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AlertDialogComponent, isStandalone: true, selector: "app-alert-dialog", ngImport: i0, template: "<div class=\"flex flex-col gap-2 text-start px-4 py-3\">\n  <p class=\"text-body1 text-error\">{{ data.title }}</p>\n  <p class=\"text-body2\">{{ data.message }}</p>\n  <div class=\"flex justify-end gap-4 mt-3\">\n    <app-button appearance=\"outline\" (click)=\"onNoClicked()\">Cancel\n    </app-button>\n    <app-button buttonColor=\"bg-primary-500\"\n                (click)=\"onYesClicked()\">Yes\n    </app-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AlertDialogComponent, isStandalone: true, selector: "app-alert-dialog", ngImport: i0, template: "<div class=\"flex flex-col gap-2 text-start px-4 py-3\">\n  <p class=\"text-body1 text-error\">{{ data.title }}</p>\n  <p class=\"text-body2\">{{ data.message }}</p>\n  <div class=\"flex justify-end gap-4 mt-3\">\n    <app-button appearance=\"outline\" (click)=\"onNoClicked()\">Cancel\n    </app-button>\n    <app-button buttonColor=\"bg-primary-500\"\n                (click)=\"onYesClicked()\">Yes\n    </app-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-alert-dialog', standalone: true, imports: [
                         ButtonComponent,
@@ -966,10 +966,10 @@ class OverlayService {
         });
         return dialogRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1029,10 +1029,10 @@ class UnsavedAwareDirective {
             $event.returnValue = 'You have unsaved changes! Do you really want to leave?';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UnsavedAwareDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: UnsavedAwareDirective, isStandalone: true, selector: "form[unSavedAware]", host: { listeners: { "window:beforeunload": "unloadNotification($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: UnsavedAwareDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: UnsavedAwareDirective, isStandalone: true, selector: "form[unSavedAware]", host: { listeners: { "window:beforeunload": "unloadNotification($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[unSavedAware]'
@@ -1148,45 +1148,45 @@ var TemplateResolverArrayUtil;
 })(TemplateResolverArrayUtil || (TemplateResolverArrayUtil = {}));
 
 class NoDataComponent {
-    size = input(250);
-    message = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: NoDataComponent, isStandalone: true, selector: "app-no-data", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n  <svg class=\"svg-icon text-neutral-200 h-16 w-16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M19 20H4C2.89 20 2 19.1 2 18V6C2 4.89 2.89 4 4 4H10L12 6H19C19.5304 6 20.0391 6.21071 20.4142 6.58579C20.7893 6.96086 21 7.46957 21 8H4V18L6.14 10H23.21L20.93 18.5C20.7 19.37 19.92 20 19 20Z\"\n      fill=\"currentColor\"/>\n  </svg>\n  <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n", styles: [""] });
+    size = input(250, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: NoDataComponent, isStandalone: true, selector: "app-no-data", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n  <svg class=\"svg-icon text-neutral-200 h-16 w-16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M19 20H4C2.89 20 2 19.1 2 18V6C2 4.89 2.89 4 4 4H10L12 6H19C19.5304 6 20.0391 6.21071 20.4142 6.58579C20.7893 6.96086 21 7.46957 21 8H4V18L6.14 10H23.21L20.93 18.5C20.7 19.37 19.92 20 19 20Z\"\n      fill=\"currentColor\"/>\n  </svg>\n  <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NoDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NoDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-no-data', standalone: true, imports: [], template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n  <svg class=\"svg-icon text-neutral-200 h-16 w-16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path\n      d=\"M19 20H4C2.89 20 2 19.1 2 18V6C2 4.89 2.89 4 4 4H10L12 6H19C19.5304 6 20.0391 6.21071 20.4142 6.58579C20.7893 6.96086 21 7.46957 21 8H4V18L6.14 10H23.21L20.93 18.5C20.7 19.37 19.92 20 19 20Z\"\n      fill=\"currentColor\"/>\n  </svg>\n  <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n" }]
-        }] });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 class NoDataTableComponent {
-    message = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NoDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: NoDataTableComponent, isStandalone: true, selector: "app-no-data-table", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<tbody class=\"bg-white text-center py-14\">\n<tr>\n  <td colspan=\"10\">\n    <div class=\"py-14\">\n      <app-no-data class=\"\" [message]=\"message() ?? 'No data found'\"></app-no-data>\n    </div>\n  </td>\n</tr>\n</tbody>\n", styles: [""], dependencies: [{ kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["size", "message"] }] });
+    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NoDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: NoDataTableComponent, isStandalone: true, selector: "app-no-data-table", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<tbody class=\"bg-white text-center py-14\">\n<tr>\n  <td colspan=\"10\">\n    <div class=\"py-14\">\n      <app-no-data class=\"\" [message]=\"message() ?? 'No data found'\"></app-no-data>\n    </div>\n  </td>\n</tr>\n</tbody>\n", styles: [""], dependencies: [{ kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["size", "message"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NoDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NoDataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-no-data-table', standalone: true, imports: [
                         NoDataComponent
                     ], template: "<tbody class=\"bg-white text-center py-14\">\n<tr>\n  <td colspan=\"10\">\n    <div class=\"py-14\">\n      <app-no-data class=\"\" [message]=\"message() ?? 'No data found'\"></app-no-data>\n    </div>\n  </td>\n</tr>\n</tbody>\n" }]
-        }] });
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
 
 class ShimmerComponent {
-    type = input('grid');
-    count = input(1);
+    type = input('grid', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
     loop = computed(() => {
         return Array(this.count()).fill(1).map((x, i) => i);
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ShimmerComponent, isStandalone: true, selector: "app-shimmer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n}\n\n\n", styles: [""] });
+    }, ...(ngDevMode ? [{ debugName: "loop" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ShimmerComponent, isStandalone: true, selector: "app-shimmer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n}\n\n\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ShimmerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ShimmerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-shimmer', standalone: true, imports: [], template: "@switch (type()) {\n  @case ('grid') {\n    <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"space-y-3\">\n        <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('list') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n        <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n  @case ('single-line') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n      </div>\n    </div>\n  }\n  @case ('multiline') {\n    <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n      <div class=\"flex flex-col gap-3 w-full\">\n        <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n        <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n      </div>\n    </div>\n  }\n}\n\n\n" }]
-        }] });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
 
 class PaginationComponent {
-    totalItems = input(0);
-    pageSizeOptions = input([10, 25, 50, 100]);
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     pageSize = 25; // Default page size
     pageChange = output();
     currentPage = 1;
@@ -1230,24 +1230,24 @@ class PaginationComponent {
     emitPageChange() {
         this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n  <div>\n    <!-- Showing items text -->\n    <p class=\"text-sm text-gray-700 text-nowrap\">\n      Showing <span class=\"font-semibold\">{{ startItem }}</span> to <span class=\"font-semibold\">{{ endItem }}</span>\n      of <span class=\"font-semibold\">{{ totalItems() }}</span> results\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n\n    <span class=\"text-body2\">Items per page:</span>\n\n    <div class=\"relative inline-block border rounded p-2 text-caption\">\n      <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\"\n              class=\"\">\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n\n    <span class=\"text-caption\">{{ startItem }} - {{ endItem }} of  {{ totalItems() }}</span>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToFirstPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToLastPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"black\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n  <div>\n    <!-- Showing items text -->\n    <p class=\"text-sm text-gray-700 text-nowrap\">\n      Showing <span class=\"font-semibold\">{{ startItem }}</span> to <span class=\"font-semibold\">{{ endItem }}</span>\n      of <span class=\"font-semibold\">{{ totalItems() }}</span> results\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n\n    <span class=\"text-body2\">Items per page:</span>\n\n    <div class=\"relative inline-block border rounded p-2 text-caption\">\n      <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\"\n              class=\"\">\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n\n    <span class=\"text-caption\">{{ startItem }} - {{ endItem }} of  {{ totalItems() }}</span>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToFirstPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToLastPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"black\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pagination', standalone: true, imports: [
                         FormsModule,
                         NgClass
                     ], template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n  <div>\n    <!-- Showing items text -->\n    <p class=\"text-sm text-gray-700 text-nowrap\">\n      Showing <span class=\"font-semibold\">{{ startItem }}</span> to <span class=\"font-semibold\">{{ endItem }}</span>\n      of <span class=\"font-semibold\">{{ totalItems() }}</span> results\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n\n    <span class=\"text-body2\">Items per page:</span>\n\n    <div class=\"relative inline-block border rounded p-2 text-caption\">\n      <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\"\n              class=\"\">\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n\n    <span class=\"text-caption\">{{ startItem }} - {{ endItem }} of  {{ totalItems() }}</span>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToFirstPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"black\"/>\n      </svg>\n    </button>\n\n    <button\n      class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n      [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToLastPage()\">\n      <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"black\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { pageSize: [{
+        }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSize: [{
                 type: Input
-            }] } });
+            }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class BaseTableComponent {
-    pageSize = input(10);
-    state = input();
-    isHorizontallyScrollable = input(false);
-    itemsPerPage = input(10);
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+    isHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "isHorizontallyScrollable" }] : []));
+    itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
     pageChange = output();
     ngAfterViewInit() {
         this.pageChange.emit({ pageNumber: 1, pageSize: this.pageSize() });
@@ -1255,10 +1255,10 @@ class BaseTableComponent {
     onPageChange(event) {
         this.pageChange.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-table', standalone: true, imports: [
                         NoDataTableComponent,
@@ -1266,7 +1266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         NgClass,
                         PaginationComponent
                     ], template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n" }]
-        }] });
+        }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], isHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHorizontallyScrollable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class SortableTableDirective {
     el;
@@ -1402,16 +1402,16 @@ class SortableTableDirective {
             this.renderer.setStyle(svgIcon, 'fill', 'black');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SortableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: SortableTableDirective, isStandalone: true, selector: "[sortableTable]", outputs: { sortChange: "sortChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SortableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: SortableTableDirective, isStandalone: true, selector: "[sortableTable]", outputs: { sortChange: "sortChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SortableTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SortableTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sortableTable]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
 
 class ResizableColumnDirective {
     startX;
@@ -1457,10 +1457,10 @@ class ResizableColumnDirective {
         document.removeEventListener('mousemove', this.resizeColumnHandler);
         document.removeEventListener('mouseup', this.stopResizeHandler);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResizableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ResizableColumnDirective, isStandalone: true, selector: "[appResizableColumn]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ResizableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ResizableColumnDirective, isStandalone: true, selector: "[appResizableColumn]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResizableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ResizableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appResizableColumn]',
@@ -1524,10 +1524,10 @@ class TableResizableColumnsDirective {
         // Add mousedown listener to the resize handle (div)
         this.renderer.listen(resizeDiv, 'mousedown', startResize);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableResizableColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TableResizableColumnsDirective, isStandalone: true, selector: "[appTableResizableColumns]", inputs: { applyResizableColumn: ["appTableResizableColumns", "applyResizableColumn"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableResizableColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TableResizableColumnsDirective, isStandalone: true, selector: "[appTableResizableColumns]", inputs: { applyResizableColumn: ["appTableResizableColumns", "applyResizableColumn"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableResizableColumnsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableResizableColumnsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appTableResizableColumns]',
@@ -1577,10 +1577,10 @@ class BreadcrumbComponent {
     navigate(route) {
         this.router.navigate([route]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", ngImport: i0, template: "<div class=\"flex items-center\">\n  @for (breadcrumb of breadcrumbs; track i; let last = $last; let i = $index) {\n    <div class=\"flex items-center\">\n\n      <span (click)=\"!last ? navigate(breadcrumb.route!) : null\"\n            class=\"text-caption cursor-pointer px-2.5 py-1.5 rounded-full transition-all duration-500\"\n            [ngClass]=\"[last ? 'text-black font-medium' : 'text-neutral-500 hover:bg-neutral-200/80']\">\n        {{ breadcrumb.title }}\n      </span>\n\n      @if (!last) {\n        <span class=\"mx-2 text-caption text-neutral-400\">\n          <svg class=\"w-[16px] h-[16px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n            <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\" fill=\"currentColor\"/>\n        </svg>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", ngImport: i0, template: "<div class=\"flex items-center\">\n  @for (breadcrumb of breadcrumbs; track i; let last = $last; let i = $index) {\n    <div class=\"flex items-center\">\n\n      <span (click)=\"!last ? navigate(breadcrumb.route!) : null\"\n            class=\"text-caption cursor-pointer px-2.5 py-1.5 rounded-full transition-all duration-500\"\n            [ngClass]=\"[last ? 'text-black font-medium' : 'text-neutral-500 hover:bg-neutral-200/80']\">\n        {{ breadcrumb.title }}\n      </span>\n\n      @if (!last) {\n        <span class=\"mx-2 text-caption text-neutral-400\">\n          <svg class=\"w-[16px] h-[16px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n            <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\" fill=\"currentColor\"/>\n        </svg>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-breadcrumb', standalone: true, imports: [
                         NgClass
@@ -1588,10 +1588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class CloseButtonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", ngImport: i0, template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", ngImport: i0, template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CloseButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-close-button', standalone: true, imports: [], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
         }] });
@@ -1955,10 +1955,10 @@ class ColorConverterService {
         const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
         return `#${rgbHex.toUpperCase()}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorConverterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2054,10 +2054,10 @@ class ColorPickerSliderDirective {
             this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "touchStart($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "touchStart($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[colorPickerSlider]',
@@ -2082,8 +2082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 class ColorPickerComponent extends BaseControlValueAccessorV3 {
-    hexColor = input('#00FF00F8');
-    enableAdditionalColor = input(false);
+    hexColor = input('#00FF00F8', ...(ngDevMode ? [{ debugName: "hexColor" }] : []));
+    enableAdditionalColor = input(false, ...(ngDevMode ? [{ debugName: "enableAdditionalColor" }] : []));
     additionalColors = input([
         // Gray shades
         '#FFFFFF', // White
@@ -2130,38 +2130,38 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
         '#D0C9FF', // Lavender
         '#FFB7B2', // Blush pink
         '#F1C0E8', // Light magenta
-    ]);
-    enableAlpha = input(true);
+    ], ...(ngDevMode ? [{ debugName: "additionalColors" }] : []));
+    enableAlpha = input(true, ...(ngDevMode ? [{ debugName: "enableAlpha" }] : []));
     controls = "default";
     colorChanged = new EventEmitter(false);
     onAlphaChange = new EventEmitter(false);
     closeColorPicker = new EventEmitter();
     color = new Hsva(0, 1, 1, 1);
-    COLOR_PICKER_HEIGHT = signal(140);
-    COLOR_PICKER_WIDTH = signal(250);
+    COLOR_PICKER_HEIGHT = signal(140, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_HEIGHT" }] : []));
+    COLOR_PICKER_WIDTH = signal(250, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_WIDTH" }] : []));
     converterService = inject(ColorConverterService);
     cdr = inject(ChangeDetectorRef);
-    hsva = signal(new Hsva(0, 1, 1, 1));
+    hsva = signal(new Hsva(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "hsva" }] : []));
     outputColor;
-    selectedColor = signal("#000000");
-    sliderDimMax = signal(new SliderDimension(0, 1, 1, 1));
-    slider = signal(new SliderPosition(0, 1, 1, 1));
-    hueSliderColor = signal(null);
-    alphaSliderColor = signal(null);
+    selectedColor = signal("#000000", ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+    sliderDimMax = signal(new SliderDimension(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "sliderDimMax" }] : []));
+    slider = signal(new SliderPosition(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "slider" }] : []));
+    hueSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "hueSliderColor" }] : []));
+    alphaSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "alphaSliderColor" }] : []));
     hueSlider;
     alphaSlider;
     height = computed(() => {
         return `${this.COLOR_PICKER_HEIGHT()}px`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "height" }] : []));
     width = computed(() => {
         return `${this.COLOR_PICKER_WIDTH()}px`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "width" }] : []));
     // height = signal(`${this.COLOR_PICKER_HEIGHT()}px`);
     // width = signal(`${this.COLOR_PICKER_WIDTH()}px`);
-    isTooltip = signal(false);
+    isTooltip = signal(false, ...(ngDevMode ? [{ debugName: "isTooltip" }] : []));
     format = ColorFormats.HEX;
-    hexColorValue = model('');
-    alphaValue = signal(1);
+    hexColorValue = model('', ...(ngDevMode ? [{ debugName: "hexColorValue" }] : []));
+    alphaValue = signal(1, ...(ngDevMode ? [{ debugName: "alphaValue" }] : []));
     click(event) {
         if (this.isOutside(event)) {
             // this.emitClose('cancel');
@@ -2315,10 +2315,10 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
     onColorSelected(color) {
         this.setHexColor(color);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  @if(enableAdditionalColor()) {\n    <div class=\"mt-4\">\n      @for (row of getColorRows(); let $isLast = $last; track $index) {\n        <div class=\"grid grid-cols-8 gap-2 mb-1\">\n          @for (color of row; track $index) {\n            <div\n              (click)=\"onColorSelected(color)\"\n              class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n              [style.background-color]=\"color\">\n            </div>\n          }\n        </div>\n\n        <!-- Separator line unless it's the last row -->\n        @if (!$isLast) {\n          <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n        }\n      }\n    </div>\n  }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  @if(enableAdditionalColor()) {\n    <div class=\"mt-4\">\n      @for (row of getColorRows(); let $isLast = $last; track $index) {\n        <div class=\"grid grid-cols-8 gap-2 mb-1\">\n          @for (color of row; track $index) {\n            <div\n              (click)=\"onColorSelected(color)\"\n              class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n              [style.background-color]=\"color\">\n            </div>\n          }\n        </div>\n\n        <!-- Separator line unless it's the last row -->\n        @if (!$isLast) {\n          <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n        }\n      }\n    </div>\n  }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-color-picker', standalone: true, imports: [
                         ColorPickerSliderDirective,
@@ -2326,7 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         FormsModule,
                         NgClass
                     ], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  @if(enableAdditionalColor()) {\n    <div class=\"mt-4\">\n      @for (row of getColorRows(); let $isLast = $last; track $index) {\n        <div class=\"grid grid-cols-8 gap-2 mb-1\">\n          @for (color of row; track $index) {\n            <div\n              (click)=\"onColorSelected(color)\"\n              class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n              [style.background-color]=\"color\">\n            </div>\n          }\n        </div>\n\n        <!-- Separator line unless it's the last row -->\n        @if (!$isLast) {\n          <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n        }\n      }\n    </div>\n  }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"] }]
-        }], propDecorators: { controls: [{
+        }], propDecorators: { hexColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hexColor", required: false }] }], enableAdditionalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAdditionalColor", required: false }] }], additionalColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalColors", required: false }] }], enableAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAlpha", required: false }] }], controls: [{
                 type: Input
             }], colorChanged: [{
                 type: Output
@@ -2340,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }], alphaSlider: [{
                 type: ViewChild,
                 args: ["alphaSlider", { static: false }]
-            }], click: [{
+            }], hexColorValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hexColorValue", required: false }] }, { type: i0.Output, args: ["hexColorValueChange"] }], click: [{
                 type: HostListener,
                 args: ['document:mousedown', ['$event']]
             }] } });
@@ -2445,10 +2445,10 @@ class ColorPickerDirective {
     ngOnDestroy() {
         this.closeColorPicker();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appColorPicker]',
@@ -2468,10 +2468,10 @@ class OverlayContextMenuComponent {
         this.dialogRef.close(action.actionKey);
         $event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayContextMenuComponent, isStandalone: true, selector: "app-overlay-context-menu", ngImport: i0, template: "<div class=\"flex flex-col gap-2 min-w-[200px] py-2\">\n  @for (action of actions; track action.actionKey) {\n    <div (click)=\"_onActionClicked($event, action)\"\n         class=\"flex items-center gap-3 py-3 px-3 hover:bg-neutral-100/80 cursor-pointer\">\n      @if (action.iconPath != null && action.iconPath != '') {\n        <app-svg-icon class=\"text-neutral-600\" [src]=\"action.iconPath\" [size]=\"20\"></app-svg-icon>\n      }\n      <span class=\"text-caption text-neutral-600 font-normal\">{{ action.label }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OverlayContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: OverlayContextMenuComponent, isStandalone: true, selector: "app-overlay-context-menu", ngImport: i0, template: "<div class=\"flex flex-col gap-2 min-w-[200px] py-2\">\n  @for (action of actions; track action.actionKey) {\n    <div (click)=\"_onActionClicked($event, action)\"\n         class=\"flex items-center gap-3 py-3 px-3 hover:bg-neutral-100/80 cursor-pointer\">\n      @if (action.iconPath != null && action.iconPath != '') {\n        <app-svg-icon class=\"text-neutral-600\" [src]=\"action.iconPath\" [size]=\"20\"></app-svg-icon>\n      }\n      <span class=\"text-caption text-neutral-600 font-normal\">{{ action.label }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-overlay-context-menu', imports: [
                         AppSvgIconComponent,
@@ -2482,8 +2482,8 @@ class ContextMenuButtonComponent {
     trigger;
     overlay = inject(Overlay);
     dialog = inject(Dialog);
-    actions = input();
-    positionPreference = input('bottomCenter');
+    actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
+    positionPreference = input('bottomCenter', ...(ngDevMode ? [{ debugName: "positionPreference" }] : []));
     onActionClicked = output();
     basePanelClass = ['bg-white', 'shadow-2'];
     dialogRef;
@@ -2566,22 +2566,22 @@ class ContextMenuButtonComponent {
             this.onActionClicked.emit(actionKey);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ContextMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ContextMenuButtonComponent, isStandalone: true, selector: "app-context-menu-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, positionPreference: { classPropertyName: "positionPreference", publicName: "positionPreference", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionClicked: "onActionClicked" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], ngImport: i0, template: "<div #trigger (click)=\"onMenuClicked()\" class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ContextMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: ContextMenuButtonComponent, isStandalone: true, selector: "app-context-menu-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, positionPreference: { classPropertyName: "positionPreference", publicName: "positionPreference", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionClicked: "onActionClicked" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], ngImport: i0, template: "<div #trigger (click)=\"onMenuClicked()\" class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ContextMenuButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ContextMenuButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-context-menu-button', imports: [], standalone: true, template: "<div #trigger (click)=\"onMenuClicked()\" class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n" }]
         }], propDecorators: { trigger: [{
                 type: ViewChild,
                 args: ['trigger', { static: true }]
-            }] } });
+            }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], positionPreference: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionPreference", required: false }] }], onActionClicked: [{ type: i0.Output, args: ["onActionClicked"] }] } });
 
 class ContextMenuIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ContextMenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ContextMenuIconComponent, isStandalone: true, selector: "app-context-menu-icon", ngImport: i0, template: "<div class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ContextMenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ContextMenuIconComponent, isStandalone: true, selector: "app-context-menu-icon", ngImport: i0, template: "<div class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ContextMenuIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ContextMenuIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-context-menu-icon', standalone: true, imports: [], template: "<div class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n    <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n  </svg>\n</div>\n" }]
         }] });
@@ -2592,10 +2592,10 @@ class TableCustomComponent {
     rowPosition;
     isLastRow = false;
     actionPerformed = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TableCustomComponent, isStandalone: true, selector: "lib-table-custom-component", inputs: { rowData: "rowData", data: "data", rowPosition: "rowPosition", isLastRow: "isLastRow" }, outputs: { actionPerformed: "actionPerformed" }, ngImport: i0, template: "", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TableCustomComponent, isStandalone: true, selector: "lib-table-custom-component", inputs: { rowData: "rowData", data: "data", rowPosition: "rowPosition", isLastRow: "isLastRow" }, outputs: { actionPerformed: "actionPerformed" }, ngImport: i0, template: "", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableCustomComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table-custom-component', imports: [], template: "" }]
         }], propDecorators: { rowData: [{
@@ -2606,28 +2606,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], isLastRow: [{
                 type: Input
-            }] } });
+            }], actionPerformed: [{ type: i0.Output, args: ["actionPerformed"] }] } });
 
 class StatusBadgeComponent {
-    status = input.required();
-    backgroundColorClass = input.required();
-    indicatorColor = input();
-    textColorClass = input.required();
-    borderColorClass = input.required();
-    isUpperCase = input(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: StatusBadgeComponent, isStandalone: true, selector: "app-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: true, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, textColorClass: { classPropertyName: "textColorClass", publicName: "textColorClass", isSignal: true, isRequired: true, transformFunction: null }, borderColorClass: { classPropertyName: "borderColorClass", publicName: "borderColorClass", isSignal: true, isRequired: true, transformFunction: null }, isUpperCase: { classPropertyName: "isUpperCase", publicName: "isUpperCase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex px-2.5 py-1.5 border items-center rounded-full gap-2\"\n     [ngClass]=\"[backgroundColorClass() ?? 'bg-neutral-50', borderColorClass() ?? '']\">\n  @if(indicatorColor()) {\n    <span class=\"h-[6px] w-[6px] rounded-full\" [ngClass]=\"indicatorColor() ?? 'bg-neutral-500'\"></span>\n  }\n  <span class=\"text-overline\"\n        [ngClass]=\"[textColorClass() ?? 'text-neutral-500', isUpperCase() ? 'uppercase' : '']\">{{ status() ?? 'Unknown' }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
+    backgroundColorClass = input.required(...(ngDevMode ? [{ debugName: "backgroundColorClass" }] : []));
+    indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
+    textColorClass = input.required(...(ngDevMode ? [{ debugName: "textColorClass" }] : []));
+    borderColorClass = input.required(...(ngDevMode ? [{ debugName: "borderColorClass" }] : []));
+    isUpperCase = input(false, ...(ngDevMode ? [{ debugName: "isUpperCase" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: StatusBadgeComponent, isStandalone: true, selector: "app-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: true, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, textColorClass: { classPropertyName: "textColorClass", publicName: "textColorClass", isSignal: true, isRequired: true, transformFunction: null }, borderColorClass: { classPropertyName: "borderColorClass", publicName: "borderColorClass", isSignal: true, isRequired: true, transformFunction: null }, isUpperCase: { classPropertyName: "isUpperCase", publicName: "isUpperCase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex px-2.5 py-1.5 border items-center rounded-full gap-2\"\n     [ngClass]=\"[backgroundColorClass() ?? 'bg-neutral-50', borderColorClass() ?? '']\">\n  @if(indicatorColor()) {\n    <span class=\"h-[6px] w-[6px] rounded-full\" [ngClass]=\"indicatorColor() ?? 'bg-neutral-500'\"></span>\n  }\n  <span class=\"text-overline\"\n        [ngClass]=\"[textColorClass() ?? 'text-neutral-500', isUpperCase() ? 'uppercase' : '']\">{{ status() ?? 'Unknown' }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StatusBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-status-badge', imports: [
                         NgClass
                     ], standalone: true, template: "<div class=\"flex px-2.5 py-1.5 border items-center rounded-full gap-2\"\n     [ngClass]=\"[backgroundColorClass() ?? 'bg-neutral-50', borderColorClass() ?? '']\">\n  @if(indicatorColor()) {\n    <span class=\"h-[6px] w-[6px] rounded-full\" [ngClass]=\"indicatorColor() ?? 'bg-neutral-500'\"></span>\n  }\n  <span class=\"text-overline\"\n        [ngClass]=\"[textColorClass() ?? 'text-neutral-500', isUpperCase() ? 'uppercase' : '']\">{{ status() ?? 'Unknown' }}</span>\n</div>\n" }]
-        }] });
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], backgroundColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColorClass", required: true }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], textColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColorClass", required: true }] }], borderColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColorClass", required: true }] }], isUpperCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUpperCase", required: false }] }] } });
 
 class CheckboxComponent extends BaseControlValueAccessorV3 {
-    title = input();
-    id = signal('');
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
     ngOnInit() {
         this.id.set(this.getId());
     }
@@ -2653,15 +2653,15 @@ class CheckboxComponent extends BaseControlValueAccessorV3 {
             this.onCheckboxSelected($event, true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative flex items-center rounded-full cursor-pointer py-3\" [for]=\"id()\">\n    <input type=\"checkbox\"\n           (change)=\"onCheckboxSelected($event)\"\n           [formControl]=\"formControl\"\n           class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-sm border-2 border-neutral-600 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:bg-primary-500 checked:before:bg-neutral-900\"\n           [id]=\"id()\"\n           (keydown)=\"handleKeydown($event)\"/>\n    <span\n      class=\"absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"\n           stroke=\"currentColor\" stroke-width=\"1\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"></path>\n      </svg>\n    </span>\n  </label>\n  @if(title()) {\n    <label class=\"m-0 text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative flex items-center rounded-full cursor-pointer py-3\" [for]=\"id()\">\n    <input type=\"checkbox\"\n           (change)=\"onCheckboxSelected($event)\"\n           [formControl]=\"formControl\"\n           class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-sm border-2 border-neutral-600 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:bg-primary-500 checked:before:bg-neutral-900\"\n           [id]=\"id()\"\n           (keydown)=\"handleKeydown($event)\"/>\n    <span\n      class=\"absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"\n           stroke=\"currentColor\" stroke-width=\"1\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"></path>\n      </svg>\n    </span>\n  </label>\n  @if(title()) {\n    <label class=\"m-0 text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-checkbox', standalone: true, imports: [
                         ReactiveFormsModule,
                     ], template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative flex items-center rounded-full cursor-pointer py-3\" [for]=\"id()\">\n    <input type=\"checkbox\"\n           (change)=\"onCheckboxSelected($event)\"\n           [formControl]=\"formControl\"\n           class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-sm border-2 border-neutral-600 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:bg-primary-500 checked:before:bg-neutral-900\"\n           [id]=\"id()\"\n           (keydown)=\"handleKeydown($event)\"/>\n    <span\n      class=\"absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"\n           stroke=\"currentColor\" stroke-width=\"1\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"></path>\n      </svg>\n    </span>\n  </label>\n  @if(title()) {\n    <label class=\"m-0 text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n" }]
-        }] });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
 
 const defaultErrors = {
     required: () => `Required`,
@@ -2699,10 +2699,10 @@ class HumanizeFormMessagesPipe {
             : 'Invalid field';
         return message;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HumanizeFormMessagesPipe, deps: [{ token: FORM_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: HumanizeFormMessagesPipe, isStandalone: true, name: "humanizeFormMessages" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HumanizeFormMessagesPipe, deps: [{ token: FORM_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: HumanizeFormMessagesPipe, isStandalone: true, name: "humanizeFormMessages" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'humanizeFormMessages' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2711,39 +2711,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }] }] });
 
 class BaseInputComponent {
-    title = input(null);
-    isRequiredField = input(false);
-    fullWidth = input(false);
-    inputType = input('text');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BaseInputComponent, isStandalone: true, selector: "app-base-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isRequiredField: { classPropertyName: "isRequiredField", publicName: "isRequiredField", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"app-form-control inline-flex items-center cursor-pointer select-none\"\n     [ngClass]=\"fullWidth() ? 'w-full' : ''\">\n  <div class=\"flex gap-6 items-center w-full\">\n    <div class=\"flex flex-col justify-center gap-2 w-full\">\n      @if (title()) {\n        <div class=\"flex gap-1\">\n          <span class=\"text-body2 text-nowrap text-primary-900\">{{ title() }}</span>\n          @if (isRequiredField()) {\n            <span class=\"text-body2 text-error-600\">*</span>\n          }\n        </div>\n      }\n      <ng-content class=\"w-full\" select=\"[input]\"></ng-content>\n\n      <ng-content select=\"[error]\"></ng-content>\n\n    </div>\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    isRequiredField = input(false, ...(ngDevMode ? [{ debugName: "isRequiredField" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BaseInputComponent, isStandalone: true, selector: "app-base-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isRequiredField: { classPropertyName: "isRequiredField", publicName: "isRequiredField", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"app-form-control inline-flex items-center cursor-pointer select-none\"\n     [ngClass]=\"fullWidth() ? 'w-full' : ''\">\n  <div class=\"flex gap-6 items-center w-full\">\n    <div class=\"flex flex-col justify-center gap-2 w-full\">\n      @if (title()) {\n        <div class=\"flex gap-1\">\n          <span class=\"text-body2 text-nowrap text-primary-900\">{{ title() }}</span>\n          @if (isRequiredField()) {\n            <span class=\"text-body2 text-error-600\">*</span>\n          }\n        </div>\n      }\n      <ng-content class=\"w-full\" select=\"[input]\"></ng-content>\n\n      <ng-content select=\"[error]\"></ng-content>\n\n    </div>\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-input', standalone: true, imports: [
                         NgClass
                     ], template: "<div class=\"app-form-control inline-flex items-center cursor-pointer select-none\"\n     [ngClass]=\"fullWidth() ? 'w-full' : ''\">\n  <div class=\"flex gap-6 items-center w-full\">\n    <div class=\"flex flex-col justify-center gap-2 w-full\">\n      @if (title()) {\n        <div class=\"flex gap-1\">\n          <span class=\"text-body2 text-nowrap text-primary-900\">{{ title() }}</span>\n          @if (isRequiredField()) {\n            <span class=\"text-body2 text-error-600\">*</span>\n          }\n        </div>\n      }\n      <ng-content class=\"w-full\" select=\"[input]\"></ng-content>\n\n      <ng-content select=\"[error]\"></ng-content>\n\n    </div>\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isRequiredField: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequiredField", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }] } });
 
 class TextInputComponent extends BaseControlValueAccessor {
-    appearance = input('outline');
-    type = input('text');
-    viewType = input('text');
-    size = input('medium');
-    iconSrc = input();
-    actionIcon = input();
-    label = input();
-    fullWidth = input(false);
-    placeholder = input('');
-    errorMessages = input({});
-    showErrorSpace = input(false);
-    mask = input(null);
-    debounceSearchEnabled = input(true);
-    autoFocus = input(false);
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    actionIcon = input(...(ngDevMode ? [undefined, { debugName: "actionIcon" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
+    mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : []));
+    debounceSearchEnabled = input(true, ...(ngDevMode ? [{ debugName: "debounceSearchEnabled" }] : []));
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : []));
     inputRef;
     changeValue = output();
     actionIconClicked = output();
-    isFocused = signal(false);
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
     ngControl = inject(NgControl, { optional: true, self: true });
     searchSubject = new Subject();
     constructor() {
@@ -2815,10 +2815,10 @@ class TextInputComponent extends BaseControlValueAccessor {
         this.onTouched();
         this.isFocused.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-input', standalone: true, imports: [
                         NgClass,
@@ -2829,16 +2829,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         BaseInputComponent,
                         NgxMaskDirective
                     ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{
+        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], actionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], debounceSearchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceSearchEnabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
-            }] } });
+            }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], actionIconClicked: [{ type: i0.Output, args: ["actionIconClicked"] }] } });
 
 class TextButtonSmall {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextButtonSmall, isStandalone: true, selector: "app-text-button-small", ngImport: i0, template: "<span class=\"text-body2 cursor-pointer py-2 px-4 text-info-500 hover:bg-info-50 rounded-full transition-all duration-300\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TextButtonSmall, isStandalone: true, selector: "app-text-button-small", ngImport: i0, template: "<span class=\"text-body2 cursor-pointer py-2 px-4 text-info-500 hover:bg-info-50 rounded-full transition-all duration-300\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextButtonSmall, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextButtonSmall, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-button-small', standalone: true, imports: [], template: "<span class=\"text-body2 cursor-pointer py-2 px-4 text-info-500 hover:bg-info-50 rounded-full transition-all duration-300\">\n  <ng-content></ng-content>\n</span>\n" }]
         }] });
@@ -2846,9 +2846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class DynamicRendererComponent {
     component;
     rowData;
-    data = input();
-    rowPosition = input();
-    isLastRow = input(false);
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+    rowPosition = input(...(ngDevMode ? [undefined, { debugName: "rowPosition" }] : []));
+    isLastRow = input(false, ...(ngDevMode ? [{ debugName: "isLastRow" }] : []));
     actionPerformed = output();
     container;
     componentRef;
@@ -2881,34 +2881,34 @@ class DynamicRendererComponent {
     ngOnDestroy() {
         this.actionSubscription?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: DynamicRendererComponent, isStandalone: true, selector: "app-dynamic-renderer", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowPosition: { classPropertyName: "rowPosition", publicName: "rowPosition", isSignal: true, isRequired: false, transformFunction: null }, isLastRow: { classPropertyName: "isLastRow", publicName: "isLastRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionPerformed: "actionPerformed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: DynamicRendererComponent, isStandalone: true, selector: "app-dynamic-renderer", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowPosition: { classPropertyName: "rowPosition", publicName: "rowPosition", isSignal: true, isRequired: false, transformFunction: null }, isLastRow: { classPropertyName: "isLastRow", publicName: "isLastRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionPerformed: "actionPerformed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DynamicRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DynamicRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dynamic-renderer', imports: [], template: "<ng-container #container></ng-container>\n" }]
         }], propDecorators: { component: [{
                 type: Input
             }], rowData: [{
                 type: Input
-            }], container: [{
+            }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowPosition", required: false }] }], isLastRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastRow", required: false }] }], actionPerformed: [{ type: i0.Output, args: ["actionPerformed"] }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
             }] } });
 
 class DataTableComponent extends BaseControlValueAccessorV3 {
     headerComponents;
-    columnDefs = input.required();
-    state = input.required();
-    pageSize = input(50);
-    enableHorizontallyScrollable = input(false);
-    enableResizableColumns = input(false);
-    enableClickableRows = input(false);
-    expandableComponent = input();
-    enableColumnsConfig = input(false);
-    filterComponent = input();
-    enableSearch = input(true);
-    disableInitialLoad = input(false);
+    columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    pageSize = input(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    enableHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : []));
+    enableResizableColumns = input(false, ...(ngDevMode ? [{ debugName: "enableResizableColumns" }] : []));
+    enableClickableRows = input(false, ...(ngDevMode ? [{ debugName: "enableClickableRows" }] : []));
+    expandableComponent = input(...(ngDevMode ? [undefined, { debugName: "expandableComponent" }] : []));
+    enableColumnsConfig = input(false, ...(ngDevMode ? [{ debugName: "enableColumnsConfig" }] : []));
+    filterComponent = input(...(ngDevMode ? [undefined, { debugName: "filterComponent" }] : []));
+    enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    disableInitialLoad = input(false, ...(ngDevMode ? [{ debugName: "disableInitialLoad" }] : []));
     pageChange = output();
     sortChanged = output();
     tableStateChanged = output();
@@ -3087,7 +3087,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
         };
         this.onActionPerformed.emit(tableActionEvent);
     }
-    expandedRowIndex = signal(null);
+    expandedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowIndex" }] : []));
     onRowExpandedClicked(i) {
         if (this.expandedRowIndex() == i) {
             this.expandedRowIndex.set(null);
@@ -3105,10 +3105,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
     onRowActionPerformed($event) {
         this.onActionPerformed.emit($event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-table', standalone: true, imports: [
                         PaginationComponent,
@@ -3131,17 +3131,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
-            }], portal: [{
+            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
                 type: ViewChild,
                 args: [CdkPortal]
             }] } });
 
 class EnvBannerComponent {
     config = inject(NGL_CONFIG);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: EnvBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: EnvBannerComponent, isStandalone: true, selector: "app-env-banner", ngImport: i0, template: "@if(config.enableDevTools) {\n  <div\n    class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n    DEV\n  </div>\n}\n", styles: [".banner{z-index:10000}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EnvBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: EnvBannerComponent, isStandalone: true, selector: "app-env-banner", ngImport: i0, template: "@if(config.enableDevTools) {\n  <div\n    class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n    DEV\n  </div>\n}\n", styles: [".banner{z-index:10000}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: EnvBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EnvBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-env-banner', standalone: true, imports: [], template: "@if(config.enableDevTools) {\n  <div\n    class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n    DEV\n  </div>\n}\n", styles: [".banner{z-index:10000}\n"] }]
         }] });
@@ -3173,10 +3173,10 @@ class OpenFloatingMenuDirective {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference", floatingMenuData: "floatingMenuData" }, outputs: { onFloatingMenuActionPerformed: "onFloatingMenuActionPerformed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference", floatingMenuData: "floatingMenuData" }, outputs: { onFloatingMenuActionPerformed: "onFloatingMenuActionPerformed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[libOpenFloatingMenu]',
@@ -3197,12 +3197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 class ListviewComponent {
-    state = input.required();
-    data = input();
-    pageSize = input(20);
-    component = input.required();
-    enableSearch = input(true);
-    enableSearchFullWidth = input(true);
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
+    enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    enableSearchFullWidth = input(true, ...(ngDevMode ? [{ debugName: "enableSearchFullWidth" }] : []));
     onStateChanged = output();
     onActionPerformed = output();
     searchText = '';
@@ -3243,10 +3243,10 @@ class ListviewComponent {
     onRowAction($event) {
         this.onActionPerformed.emit($event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-listview', imports: [
                         InfiniteScrollDirective,
@@ -3255,20 +3255,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ShimmerComponent,
                         NoDataTableComponent,
                     ], standalone: true, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n" }]
-        }] });
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], enableSearchFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearchFullWidth", required: false }] }], onStateChanged: [{ type: i0.Output, args: ["onStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }] } });
 
 class LoaderService {
-    loadingCount = signal(0);
+    loadingCount = signal(0, ...(ngDevMode ? [{ debugName: "loadingCount" }] : []));
     show() {
         this.loadingCount.update((current) => current + 1);
     }
     hide() {
         this.loadingCount.update((current) => current - 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LoaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3277,10 +3277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class LoaderComponent {
     loaderService = inject(LoaderService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LoaderComponent, isStandalone: true, selector: "app-loader", ngImport: i0, template: "@if (loaderService.loadingCount() > 0) {\n  <div class=\"fixed left-1/2 top-1/2 py-3 px-5 shadow-2 bg-white loader rounded-md\">\n    <app-spinner></app-spinner>\n  </div>\n}\n", styles: [".loader{z-index:10000}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: LoaderComponent, isStandalone: true, selector: "app-loader", ngImport: i0, template: "@if (loaderService.loadingCount() > 0) {\n  <div class=\"fixed left-1/2 top-1/2 py-3 px-5 shadow-2 bg-white loader rounded-md\">\n    <app-spinner></app-spinner>\n  </div>\n}\n", styles: [".loader{z-index:10000}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-loader', standalone: true, imports: [
                         SpinnerComponent
@@ -3288,12 +3288,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class NetworkImageComponent {
-    placeholderImage = input();
-    imageUrl = input();
-    isError = signal(false);
+    placeholderImage = input(...(ngDevMode ? [undefined, { debugName: "placeholderImage" }] : []));
+    imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
+    isError = signal(false, ...(ngDevMode ? [{ debugName: "isError" }] : []));
     placeHolderUrl = computed(() => {
         return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
-    });
+    }, ...(ngDevMode ? [{ debugName: "placeHolderUrl" }] : []));
     sourceUrl = computed(() => {
         if (this.imageUrl()) {
             return this.imageUrl();
@@ -3301,26 +3301,26 @@ class NetworkImageComponent {
         else {
             return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "sourceUrl" }] : []));
     handleImageError() {
         this.isError.update((c) => true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NetworkImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: NetworkImageComponent, isStandalone: true, selector: "lib-network-image", inputs: { placeholderImage: { classPropertyName: "placeholderImage", publicName: "placeholderImage", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isError()) {\n  <img\n    [src]=\"placeHolderUrl()\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\" alt=\"Image\">\n} @else {\n  <img\n    [src]=\"sourceUrl()\"\n    (error)=\"handleImageError()\" alt=\"\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\">\n}\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NetworkImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NetworkImageComponent, isStandalone: true, selector: "lib-network-image", inputs: { placeholderImage: { classPropertyName: "placeholderImage", publicName: "placeholderImage", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isError()) {\n  <img\n    [src]=\"placeHolderUrl()\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\" alt=\"Image\">\n} @else {\n  <img\n    [src]=\"sourceUrl()\"\n    (error)=\"handleImageError()\" alt=\"\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\">\n}\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NetworkImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NetworkImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-network-image', standalone: true, imports: [], template: "@if (isError()) {\n  <img\n    [src]=\"placeHolderUrl()\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\" alt=\"Image\">\n} @else {\n  <img\n    [src]=\"sourceUrl()\"\n    (error)=\"handleImageError()\" alt=\"\"\n    class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\">\n}\n" }]
-        }] });
+        }], propDecorators: { placeholderImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderImage", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
 
 class BaseOverlayComponent {
     container;
     actionsDiv;
     actionsContainerDiv;
-    title = input.required();
-    showTitle = input(true);
-    showBackButton = input(false);
-    enableDefaultLayout = input(true);
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
+    showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
+    enableDefaultLayout = input(true, ...(ngDevMode ? [{ debugName: "enableDefaultLayout" }] : []));
     onBackClicked = output();
     renderer = inject(Renderer2);
     dialogRef = inject((DialogRef));
@@ -3340,10 +3340,10 @@ class BaseOverlayComponent {
     onCloseClicked() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BaseOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-overlay', imports: [
                         NgClass
@@ -3357,11 +3357,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }], actionsContainerDiv: [{
                 type: ViewChild,
                 args: ['actionsContainer', { static: false }]
-            }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], enableDefaultLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDefaultLayout", required: false }] }], onBackClicked: [{ type: i0.Output, args: ["onBackClicked"] }] } });
 
 class OverlayWizardUtils {
-    uiState = signal([]);
-    wizard = signal([]);
+    uiState = signal([], ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    wizard = signal([], ...(ngDevMode ? [{ debugName: "wizard" }] : []));
     showBackButton() {
         return this.uiState().length > 1;
     }
@@ -3411,7 +3411,7 @@ class OverlayWizardUtils {
 class ResponsiveHelperComponent {
     config = inject(NGL_CONFIG);
     document = inject(DOCUMENT);
-    screenWidth = signal(0);
+    screenWidth = signal(0, ...(ngDevMode ? [{ debugName: "screenWidth" }] : []));
     constructor() {
         this.screenWidth.set(this.document.documentElement.clientWidth);
     }
@@ -3421,10 +3421,10 @@ class ResponsiveHelperComponent {
     onResize(event) {
         this.screenWidth.set(this.document.documentElement.clientWidth);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n  <div\n    class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n  <div\n    class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-responsive-helper', standalone: true, imports: [], template: "@if (config.enableDevTools) {\n  <div\n    class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
@@ -3436,7 +3436,7 @@ class SvgUrlIconComponent {
     http;
     sanitizer;
     svgIcon = null;
-    svgUrl = input.required();
+    svgUrl = input.required(...(ngDevMode ? [{ debugName: "svgUrl" }] : []));
     constructor(http, sanitizer) {
         this.http = http;
         this.sanitizer = sanitizer;
@@ -3448,13 +3448,13 @@ class SvgUrlIconComponent {
             console.error('Failed to load SVG:', error);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgUrlIconComponent, deps: [{ token: i1$1.HttpClient }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SvgUrlIconComponent, isStandalone: true, selector: "app-svg-url-icon", inputs: { svgUrl: { classPropertyName: "svgUrl", publicName: "svgUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [innerHTML]=\"svgIcon\"></div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SvgUrlIconComponent, deps: [{ token: i1$1.HttpClient }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: SvgUrlIconComponent, isStandalone: true, selector: "app-svg-url-icon", inputs: { svgUrl: { classPropertyName: "svgUrl", publicName: "svgUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [innerHTML]=\"svgIcon\"></div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgUrlIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SvgUrlIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-svg-url-icon', standalone: true, imports: [], template: "<div [innerHTML]=\"svgIcon\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DomSanitizer }], propDecorators: { svgUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgUrl", required: true }] }] } });
 
 var ToastType;
 (function (ToastType) {
@@ -3527,10 +3527,10 @@ class ToastService {
             duration: duration
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3542,10 +3542,10 @@ class ToastCloseButtonComponent {
     onCloseClick() {
         this.closeEvent.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ToastCloseButtonComponent, isStandalone: true, selector: "app-toast-close-button", outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div class=\"p-1 text-neutral-400 rounded-full hover:bg-neutral-50 hover:cursor-pointer\" (click)=\"onCloseClick()\">\n  <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"close\">\n      <path id=\"Vector\" d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"currentColor\"/>\n    </g>\n  </svg>\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToastCloseButtonComponent, isStandalone: true, selector: "app-toast-close-button", outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div class=\"p-1 text-neutral-400 rounded-full hover:bg-neutral-50 hover:cursor-pointer\" (click)=\"onCloseClick()\">\n  <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"close\">\n      <path id=\"Vector\" d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"currentColor\"/>\n    </g>\n  </svg>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastCloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastCloseButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toast-close-button', standalone: true, imports: [], template: "<div class=\"p-1 text-neutral-400 rounded-full hover:bg-neutral-50 hover:cursor-pointer\" (click)=\"onCloseClick()\">\n  <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"close\">\n      <path id=\"Vector\" d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"currentColor\"/>\n    </g>\n  </svg>\n</div>\n" }]
         }], propDecorators: { closeEvent: [{
@@ -3558,7 +3558,7 @@ class ToastComponent {
     title;
     message;
     duration;
-    themeType = input('light');
+    themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
     themeClass = computed(() => {
         let classes = '';
         switch (this.themeType()) {
@@ -3570,7 +3570,7 @@ class ToastComponent {
                 break;
         }
         return classes;
-    });
+    }, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
     ToastType = ToastType;
     ngOnInit() {
         this.show();
@@ -3585,10 +3585,10 @@ class ToastComponent {
     }
     ngOnDestroy() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: false, isRequired: false, transformFunction: null }, themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disposeEvent: "disposeEvent" }, ngImport: i0, template: "<div class=\"shadow-2 border border-neutral-200 px-3 py-3 mb-5 min-w-72 max-w-80 rounded-md z-50\" [ngClass]=\"themeClass()\">\n  <div class=\"flex items-center gap-3\">\n    <div class=\"flex justify-center items-center h-6 w-6\">\n      @switch (type) {\n        @case (ToastType.success) {\n          <svg height=\"18\" width=\"18\" class=\"text-green-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"currentColor\">\n            <path\n              d=\"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.error) {\n          <svg height=\"18\" width=\"18\" class=\"text-red-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.info) {\n          <svg height=\"18\" width=\"18\" class=\"text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM11 17H13V11H11V17Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.warning) {\n          <svg height=\"18\" width=\"18\" class=\"text-amber-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"currentColor\">\n            <path\n              d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n      }\n    </div>\n\n    <div class=\"flex flex-col gap-2\">\n      @if (title) {\n        <p class=\"text-body1\">{{ title }}</p>\n      }\n      <p class=\"text-body2 text-neutral-400\">{{ message }}</p>\n    </div>\n    <div class=\"flex-grow\"></div>\n\n    <app-toast-close-button (closeEvent)=\"hide()\"></app-toast-close-button>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToastCloseButtonComponent, selector: "app-toast-close-button", outputs: ["closeEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: false, isRequired: false, transformFunction: null }, themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disposeEvent: "disposeEvent" }, ngImport: i0, template: "<div class=\"shadow-2 border border-neutral-200 px-3 py-3 mb-5 min-w-72 max-w-80 rounded-md z-50\" [ngClass]=\"themeClass()\">\n  <div class=\"flex items-center gap-3\">\n    <div class=\"flex justify-center items-center h-6 w-6\">\n      @switch (type) {\n        @case (ToastType.success) {\n          <svg height=\"18\" width=\"18\" class=\"text-green-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"currentColor\">\n            <path\n              d=\"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.error) {\n          <svg height=\"18\" width=\"18\" class=\"text-red-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.info) {\n          <svg height=\"18\" width=\"18\" class=\"text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path\n              d=\"M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM11 17H13V11H11V17Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n        @case (ToastType.warning) {\n          <svg height=\"18\" width=\"18\" class=\"text-amber-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"currentColor\">\n            <path\n              d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        }\n      }\n    </div>\n\n    <div class=\"flex flex-col gap-2\">\n      @if (title) {\n        <p class=\"text-body1\">{{ title }}</p>\n      }\n      <p class=\"text-body2 text-neutral-400\">{{ message }}</p>\n    </div>\n    <div class=\"flex-grow\"></div>\n\n    <app-toast-close-button (closeEvent)=\"hide()\"></app-toast-close-button>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToastCloseButtonComponent, selector: "app-toast-close-button", outputs: ["closeEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toast', standalone: true, imports: [
                         ToastCloseButtonComponent,
@@ -3604,12 +3604,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], duration: [{
                 type: Input
-            }] } });
+            }], themeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeType", required: false }] }] } });
 
 class ToasterComponent {
     toastService;
     cdr;
-    themeType = input('light');
+    themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
     currentToasts = [];
     constructor(toastService, cdr) {
         this.toastService = toastService;
@@ -3629,23 +3629,23 @@ class ToasterComponent {
         this.currentToasts.splice(index, 1);
         this.cdr.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToasterComponent, isStandalone: true, selector: "app-toaster", inputs: { themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toaster fixed top-1 right-1 px-3 py-2\">\n  @for (toast of currentToasts; track toast; let i = $index) {\n    <div>\n      <app-toast\n        [type]=\"toast.type\"\n        [title]=\"toast.title\"\n        [message]=\"toast.message\"\n        [duration]=\"toast.duration\"\n        (disposeEvent)=\"dispose(i)\"\n        [themeType]=\"toast.themeType ?? 'light'\"\n      ></app-toast>\n    </div>\n  }\n</div>\n", styles: [".toaster{z-index:2000}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["type", "title", "message", "duration", "themeType"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ToasterComponent, isStandalone: true, selector: "app-toaster", inputs: { themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toaster fixed top-1 right-1 px-3 py-2\">\n  @for (toast of currentToasts; track toast; let i = $index) {\n    <div>\n      <app-toast\n        [type]=\"toast.type\"\n        [title]=\"toast.title\"\n        [message]=\"toast.message\"\n        [duration]=\"toast.duration\"\n        (disposeEvent)=\"dispose(i)\"\n        [themeType]=\"toast.themeType ?? 'light'\"\n      ></app-toast>\n    </div>\n  }\n</div>\n", styles: [".toaster{z-index:2000}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["type", "title", "message", "duration", "themeType"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToasterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToasterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toaster', standalone: true, imports: [
                         ToastComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster fixed top-1 right-1 px-3 py-2\">\n  @for (toast of currentToasts; track toast; let i = $index) {\n    <div>\n      <app-toast\n        [type]=\"toast.type\"\n        [title]=\"toast.title\"\n        [message]=\"toast.message\"\n        [duration]=\"toast.duration\"\n        (disposeEvent)=\"dispose(i)\"\n        [themeType]=\"toast.themeType ?? 'light'\"\n      ></app-toast>\n    </div>\n  }\n</div>\n", styles: [".toaster{z-index:2000}\n"] }]
-        }], ctorParameters: () => [{ type: ToastService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: ToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { themeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeType", required: false }] }] } });
 
 class TooltipComponent {
     text = '';
     tooltipClass = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", tooltipClass: "tooltipClass" }, ngImport: i0, template: "<div class=\"bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\"\n     [ngClass]=\"tooltipClass\">\n  {{ text }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", tooltipClass: "tooltipClass" }, ngImport: i0, template: "<div class=\"bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\"\n     [ngClass]=\"tooltipClass\">\n  {{ text }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tooltip', imports: [
                         NgClass
@@ -3664,8 +3664,8 @@ class TooltipDirective {
     longPressTimeout = null;
     // tooltipText = input<string>('');
     libTooltip = '';
-    tooltipPosition = input('bottom');
-    tooltipClass = input({ alias: 'tooltipClass' });
+    tooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    tooltipClass = input({ alias: 'tooltipClass' }, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : []));
     constructor() {
         effect(() => {
             this.hideTooltip();
@@ -3759,10 +3759,10 @@ class TooltipDirective {
         }
         this.hideTooltip();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: { classPropertyName: "libTooltip", publicName: "libTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: { classPropertyName: "libTooltip", publicName: "libTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[libTooltip]',
@@ -3770,7 +3770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { libTooltip: [{
                 type: Input
-            }], onMouseEnter: [{
+            }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -3808,10 +3808,10 @@ class ClickOutsideDirective {
         let isInside = elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
         return isInside;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -3855,10 +3855,10 @@ class InvalidControlScrollDirective {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InvalidControlScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: InvalidControlScrollDirective, isStandalone: true, selector: "[appInvalidControlScroll]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InvalidControlScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: InvalidControlScrollDirective, isStandalone: true, selector: "[appInvalidControlScroll]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appInvalidControlScroll]',
@@ -3908,10 +3908,10 @@ class InvalidControlScrollContainerDirective {
             return absoluteControlElTop - labelOffset;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InvalidControlScrollContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: InvalidControlScrollContainerDirective, isStandalone: true, selector: "[appInvalidControlScrollContainer]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InvalidControlScrollContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: InvalidControlScrollContainerDirective, isStandalone: true, selector: "[appInvalidControlScrollContainer]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appInvalidControlScrollContainer]',
@@ -3968,29 +3968,29 @@ class FormValidationUtils {
 }
 
 class AppErrorComponent {
-    control = input.required();
-    errorMessages = input({});
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     get hasErrors() {
         return (this.control() && this.control()?.touched && this.control()?.errors) ?? false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AppErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AppErrorComponent, isStandalone: true, selector: "app-error", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()?.errors && hasErrors) {\n  <div class=\"flex mt-1\">\n        <span class=\"text-caption text-red-500\">\n          {{ control()?.errors! | humanizeFormMessages: errorMessages() }}\n        </span>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AppErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AppErrorComponent, isStandalone: true, selector: "app-error", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()?.errors && hasErrors) {\n  <div class=\"flex mt-1\">\n        <span class=\"text-caption text-red-500\">\n          {{ control()?.errors! | humanizeFormMessages: errorMessages() }}\n        </span>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AppErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AppErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-error', imports: [
                         HumanizeFormMessagesPipe
                     ], template: "@if (control()?.errors && hasErrors) {\n  <div class=\"flex mt-1\">\n        <span class=\"text-caption text-red-500\">\n          {{ control()?.errors! | humanizeFormMessages: errorMessages() }}\n        </span>\n  </div>\n}\n" }]
-        }] });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
 
 class DatePickerComponent extends BaseControlValueAccessorV3 {
-    minDate = input();
-    maxDate = input();
-    allowOnlyPast = input(false);
-    allowOnlyFuture = input(false);
-    allowToday = input(false);
-    disabledDays = input([]);
-    disabledDates = input([]);
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+    allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
+    allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
+    allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : []));
+    disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
+    disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : []));
     dateSelected = output();
     // days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
     days = [
@@ -4016,7 +4016,7 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
         'Nov',
         'Dec'
     ];
-    uiMode = signal('date');
+    uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
     activeMonth;
     activeYear;
     selectedDate;
@@ -4224,15 +4224,15 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
     getLastYear() {
         return this.years[this.years.length - 1].value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none w-min\">\n\n  <div class=\"flex items-center justify-between w-[280px]\">\n\n    <div (click)=\"onYearSelectionPressed()\"\n         class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n      @switch (uiMode()) {\n        @case ('date') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n        @case ('month') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n        }\n        @case ('year') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n               viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n      }\n\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n\n      <div (click)=\"previousMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <div (click)=\"nextMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n        </svg>\n      </div>\n\n    </div>\n\n  </div>\n\n  @if (uiMode() == 'date') {\n    <div class=\"grid grid-cols-7 text-xs text-center text-gray-900 gap-y-1\">\n      @for (day of days; track day) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n      }\n\n      @for (blankDay of blankDays; track blankDay) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n      }\n\n      @for (day of daysOfMonth; track day) {\n        <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n              [ngClass]=\"{\n              'text-neutral-400' : !day.isEnabled,\n             '!bg-primary-500 !text-white': isSelected(day.value),\n             'today-and-selected bg-primary-500 text-white': isToday(day.value) && isSelected(day.value),\n             'border border-primary-500 text-primary-900': isToday(day.value),\n             'not-today-not-selected text-gray-700 hover:bg-primary-50': !isToday(day.value) && !isSelected(day.value) && day.isEnabled,\n             'not-today-selected text-gray-700 hover:bg-primary-500': !isToday(day.value) && isSelected(day.value),\n            }\"\n              class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 rounded-lg select-none cursor-pointer\">{{ day.value }}</span>\n      }\n    </div>\n  }\n\n  @if (uiMode() == 'month') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (month of months; track month; let i = $index) {\n        <span (click)=\"onMonthSelected(i)\"\n              [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n      }\n    </div>\n  }\n\n\n  @if (uiMode() == 'year') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (year of years; track year; let i = $index) {\n        <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n              [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n      }\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none w-min\">\n\n  <div class=\"flex items-center justify-between w-[280px]\">\n\n    <div (click)=\"onYearSelectionPressed()\"\n         class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n      @switch (uiMode()) {\n        @case ('date') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n        @case ('month') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n        }\n        @case ('year') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n               viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n      }\n\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n\n      <div (click)=\"previousMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <div (click)=\"nextMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n        </svg>\n      </div>\n\n    </div>\n\n  </div>\n\n  @if (uiMode() == 'date') {\n    <div class=\"grid grid-cols-7 text-xs text-center text-gray-900 gap-y-1\">\n      @for (day of days; track day) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n      }\n\n      @for (blankDay of blankDays; track blankDay) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n      }\n\n      @for (day of daysOfMonth; track day) {\n        <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n              [ngClass]=\"{\n              'text-neutral-400' : !day.isEnabled,\n             '!bg-primary-500 !text-white': isSelected(day.value),\n             'today-and-selected bg-primary-500 text-white': isToday(day.value) && isSelected(day.value),\n             'border border-primary-500 text-primary-900': isToday(day.value),\n             'not-today-not-selected text-gray-700 hover:bg-primary-50': !isToday(day.value) && !isSelected(day.value) && day.isEnabled,\n             'not-today-selected text-gray-700 hover:bg-primary-500': !isToday(day.value) && isSelected(day.value),\n            }\"\n              class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 rounded-lg select-none cursor-pointer\">{{ day.value }}</span>\n      }\n    </div>\n  }\n\n  @if (uiMode() == 'month') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (month of months; track month; let i = $index) {\n        <span (click)=\"onMonthSelected(i)\"\n              [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n      }\n    </div>\n  }\n\n\n  @if (uiMode() == 'year') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (year of years; track year; let i = $index) {\n        <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n              [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n      }\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-picker', imports: [
                         NgClass
                     ], standalone: true, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none w-min\">\n\n  <div class=\"flex items-center justify-between w-[280px]\">\n\n    <div (click)=\"onYearSelectionPressed()\"\n         class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n      @switch (uiMode()) {\n        @case ('date') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n        @case ('month') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n        }\n        @case ('year') {\n          <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n          <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n               viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n          </svg>\n        }\n      }\n\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n\n      <div (click)=\"previousMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <div (click)=\"nextMonthPressed()\"\n           class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n        <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n        </svg>\n      </div>\n\n    </div>\n\n  </div>\n\n  @if (uiMode() == 'date') {\n    <div class=\"grid grid-cols-7 text-xs text-center text-gray-900 gap-y-1\">\n      @for (day of days; track day) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n      }\n\n      @for (blankDay of blankDays; track blankDay) {\n        <span\n          class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n      }\n\n      @for (day of daysOfMonth; track day) {\n        <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n              [ngClass]=\"{\n              'text-neutral-400' : !day.isEnabled,\n             '!bg-primary-500 !text-white': isSelected(day.value),\n             'today-and-selected bg-primary-500 text-white': isToday(day.value) && isSelected(day.value),\n             'border border-primary-500 text-primary-900': isToday(day.value),\n             'not-today-not-selected text-gray-700 hover:bg-primary-50': !isToday(day.value) && !isSelected(day.value) && day.isEnabled,\n             'not-today-selected text-gray-700 hover:bg-primary-500': !isToday(day.value) && isSelected(day.value),\n            }\"\n              class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 rounded-lg select-none cursor-pointer\">{{ day.value }}</span>\n      }\n    </div>\n  }\n\n  @if (uiMode() == 'month') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (month of months; track month; let i = $index) {\n        <span (click)=\"onMonthSelected(i)\"\n              [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n      }\n    </div>\n  }\n\n\n  @if (uiMode() == 'year') {\n    <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n      @for (year of years; track year; let i = $index) {\n        <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n              [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n              class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n      }\n    </div>\n  }\n\n</div>\n" }]
-        }] });
+        }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
 
 class DatePickerOverlayComponent {
     dialogRef = inject(DialogRef);
@@ -4240,10 +4240,10 @@ class DatePickerOverlayComponent {
     onDateSelected($event) {
         this.dialogRef.close($event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: DatePickerOverlayComponent, isStandalone: true, selector: "app-date-picker-overlay", ngImport: i0, template: "<app-date-picker [minDate]=\"data.minDate\"\n                 [maxDate]=\"data.maxDate\"\n                 [allowOnlyPast]=\"data.allowOnlyPast\"\n                 [allowOnlyFuture]=\"data.allowOnlyFuture\"\n                 [disabledDays]=\"data.disabledDays\"\n                 [disabledDates]=\"data.disabledDates\"\n                 (dateSelected)=\"onDateSelected($event)\">\n</app-date-picker>\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "app-date-picker", inputs: ["minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DatePickerOverlayComponent, isStandalone: true, selector: "app-date-picker-overlay", ngImport: i0, template: "<app-date-picker [minDate]=\"data.minDate\"\n                 [maxDate]=\"data.maxDate\"\n                 [allowOnlyPast]=\"data.allowOnlyPast\"\n                 [allowOnlyFuture]=\"data.allowOnlyFuture\"\n                 [disabledDays]=\"data.disabledDays\"\n                 [disabledDates]=\"data.disabledDates\"\n                 (dateSelected)=\"onDateSelected($event)\">\n</app-date-picker>\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "app-date-picker", inputs: ["minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-picker-overlay', imports: [
                         DatePickerComponent
@@ -4279,21 +4279,21 @@ var InputDateFormat;
 })(InputDateFormat || (InputDateFormat = {}));
 class DateInputComponent extends BaseControlValueAccessorV3 {
     trigger;
-    label = input();
-    iconSrc = input();
-    showDatePickerIcon = input(true);
-    fullWidth = input(false);
-    showErrorSpace = input(false);
-    minDate = input();
-    maxDate = input();
-    allowOnlyPast = input(false);
-    allowOnlyFuture = input(false);
-    disabledDays = input([]);
-    disabledDates = input([]);
-    inputDateFormat = input(InputDateFormat.mmddyyyy);
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    showDatePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showDatePickerIcon" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+    allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
+    allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
+    disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
+    disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : []));
+    inputDateFormat = input(InputDateFormat.mmddyyyy, ...(ngDevMode ? [{ debugName: "inputDateFormat" }] : []));
     overlayService = inject(OverlayService);
-    isFocused = signal(false);
-    textInputValue = signal(null);
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    textInputValue = signal(null, ...(ngDevMode ? [{ debugName: "textInputValue" }] : []));
     subscription;
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -4428,10 +4428,10 @@ class DateInputComponent extends BaseControlValueAccessorV3 {
         const yyyy = date.getFullYear();
         return this.inputDateFormat() === InputDateFormat.mmddyyyy ? `${mm}/${dd}/${yyyy}` : `${dd}/${mm}/${yyyy}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DateInputComponent, isStandalone: true, selector: "app-date-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, showDatePickerIcon: { classPropertyName: "showDatePickerIcon", publicName: "showDatePickerIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"'00/00/0000'\"\n      [showMaskTyped]=\"isFocused()\"\n      class=\"w-full h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [(ngModel)]=\"textInputValue\"\n      (focus)=\"onFocus()\"\n      [ngClass]=\"getClass()\"\n      [placeholder]=\"placeHolder\"\n      (blur)=\"onBlur()\"\n      (input)=\"onInputChanged($event)\">\n\n\n    <div #trigger (click)=\"onDatePickerIconClicked()\"\n         class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n           class=\"w-[18px] h-[18px] text-neutral-500\">\n        <path\n          d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n          fill=\"currentColor\"/>\n      </svg>\n    </div>\n\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"flex mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateInputComponent, isStandalone: true, selector: "app-date-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, showDatePickerIcon: { classPropertyName: "showDatePickerIcon", publicName: "showDatePickerIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"'00/00/0000'\"\n      [showMaskTyped]=\"isFocused()\"\n      class=\"w-full h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [(ngModel)]=\"textInputValue\"\n      (focus)=\"onFocus()\"\n      [ngClass]=\"getClass()\"\n      [placeholder]=\"placeHolder\"\n      (blur)=\"onBlur()\"\n      (input)=\"onInputChanged($event)\">\n\n\n    <div #trigger (click)=\"onDatePickerIconClicked()\"\n         class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n           class=\"w-[18px] h-[18px] text-neutral-500\">\n        <path\n          d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n          fill=\"currentColor\"/>\n      </svg>\n    </div>\n\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"flex mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-input', standalone: true, imports: [
                         HumanizeFormMessagesPipe,
@@ -4445,14 +4445,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], propDecorators: { trigger: [{
                 type: ViewChild,
                 args: ['trigger', { static: true }]
-            }] } });
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], showDatePickerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDatePickerIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], inputDateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDateFormat", required: false }] }] } });
 
 class DateRangePickerComponent extends BaseControlValueAccessorV3 {
-    minDate = input();
-    maxDate = input();
-    allowOnlyPast = input(false);
-    allowOnlyFuture = input(false);
-    allowToday = input(false);
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
+    allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
+    allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
+    allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : []));
     dateRangeSelected = output();
     days = [
         { day: 'sunday', displayName: 'Su' },
@@ -4477,7 +4477,7 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
         'Nov',
         'Dec'
     ];
-    uiMode = signal('date');
+    uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
     activeMonth;
     activeYear;
     startDate;
@@ -4728,52 +4728,52 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
         this.hoveredDate = null;
         this.onValueChange(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DateRangePickerComponent, isStandalone: true, selector: "app-date-range-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeSelected: "dateRangeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none\">\n\n  <div class=\"grow flex flex-col gap-3 w-[280px]\">\n\n    <div class=\"flex items-center justify-between\">\n\n      <div (click)=\"onYearSelectionPressed()\"\n           class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n        @switch (uiMode()) {\n          @case ('date') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n          @case ('month') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n          }\n          @case ('year') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n        }\n\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n\n        <div (click)=\"previousMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n        <div (click)=\"nextMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n          </svg>\n        </div>\n\n      </div>\n\n    </div>\n    <div class=\"flex gap-3\">\n          <span (click)=\"resetSelection()\"\n                class=\"text-overline px-2 py-1.5 rounded-md transition-all duration-300 bg-info-50 cursor-pointer select-none text-info-500\">Today</span>\n    </div>\n\n    @if (uiMode() == 'date') {\n      <div class=\"grid grid-cols-7 gap-y-1 text-xs text-center text-gray-900\">\n        @for (day of days; track day) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n        }\n\n        @for (blankDay of blankDays; track blankDay) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n        }\n\n        @for (day of daysOfMonth; track day) {\n          <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n                (mouseover)=\"onDayHovered(day.value)\"\n                [ngClass]=\"{\n                          'text-neutral-400' : !day.isEnabled,\n                          'border rounded-lg border-primary-500 text-primary-900': isToday(day.value) && !isSelectionStartDate(day.value) && !isSelectionEndDate(day.value),\n                          'bg-primary-500 rounded-tl-lg rounded-bl-lg text-white': isSelectionStartDate(day.value),\n                          'bg-primary-500 !rounded-tr-lg !rounded-br-lg text-white': isSelectionEndDate(day.value),\n                          'bg-primary-50 text-primary-900': isDateInSelectionRange(day.value),\n                          'border-t border-b border-r rounded-tr-lg rounded-br-lg border-dashed border-gray-500 bg-neutral-100 text-primary-900': isDateHovered(day.value),\n                          '!border-t !border-b !border-r-none !border-dashed !border-gray-500 !text-primary-900': isDateInHoveredRange(day.value),\n                        }\"\n                class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 select-none cursor-pointer\">{{ day.value }}</span>\n        }\n      </div>\n    }\n\n    @if (uiMode() == 'month') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (month of months; track month; let i = $index) {\n          <span (click)=\"onMonthSelected(i)\"\n                [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n        }\n      </div>\n    }\n\n\n    @if (uiMode() == 'year') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (year of years; track year; let i = $index) {\n          <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n                [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n        }\n      </div>\n    }\n  </div>\n\n\n  <div class=\"flex items-center justify-end\">\n    <span (click)=\"resetSelection()\"\n          class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-info-50 cursor-pointer select-none text-info-500\">Reset</span>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DateRangePickerComponent, isStandalone: true, selector: "app-date-range-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeSelected: "dateRangeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none\">\n\n  <div class=\"grow flex flex-col gap-3 w-[280px]\">\n\n    <div class=\"flex items-center justify-between\">\n\n      <div (click)=\"onYearSelectionPressed()\"\n           class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n        @switch (uiMode()) {\n          @case ('date') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n          @case ('month') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n          }\n          @case ('year') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n        }\n\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n\n        <div (click)=\"previousMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n        <div (click)=\"nextMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n          </svg>\n        </div>\n\n      </div>\n\n    </div>\n    <div class=\"flex gap-3\">\n          <span (click)=\"resetSelection()\"\n                class=\"text-overline px-2 py-1.5 rounded-md transition-all duration-300 bg-info-50 cursor-pointer select-none text-info-500\">Today</span>\n    </div>\n\n    @if (uiMode() == 'date') {\n      <div class=\"grid grid-cols-7 gap-y-1 text-xs text-center text-gray-900\">\n        @for (day of days; track day) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n        }\n\n        @for (blankDay of blankDays; track blankDay) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n        }\n\n        @for (day of daysOfMonth; track day) {\n          <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n                (mouseover)=\"onDayHovered(day.value)\"\n                [ngClass]=\"{\n                          'text-neutral-400' : !day.isEnabled,\n                          'border rounded-lg border-primary-500 text-primary-900': isToday(day.value) && !isSelectionStartDate(day.value) && !isSelectionEndDate(day.value),\n                          'bg-primary-500 rounded-tl-lg rounded-bl-lg text-white': isSelectionStartDate(day.value),\n                          'bg-primary-500 !rounded-tr-lg !rounded-br-lg text-white': isSelectionEndDate(day.value),\n                          'bg-primary-50 text-primary-900': isDateInSelectionRange(day.value),\n                          'border-t border-b border-r rounded-tr-lg rounded-br-lg border-dashed border-gray-500 bg-neutral-100 text-primary-900': isDateHovered(day.value),\n                          '!border-t !border-b !border-r-none !border-dashed !border-gray-500 !text-primary-900': isDateInHoveredRange(day.value),\n                        }\"\n                class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 select-none cursor-pointer\">{{ day.value }}</span>\n        }\n      </div>\n    }\n\n    @if (uiMode() == 'month') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (month of months; track month; let i = $index) {\n          <span (click)=\"onMonthSelected(i)\"\n                [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n        }\n      </div>\n    }\n\n\n    @if (uiMode() == 'year') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (year of years; track year; let i = $index) {\n          <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n                [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n        }\n      </div>\n    }\n  </div>\n\n\n  <div class=\"flex items-center justify-end\">\n    <span (click)=\"resetSelection()\"\n          class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-info-50 cursor-pointer select-none text-info-500\">Reset</span>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-range-picker', imports: [
                         NgClass
                     ], standalone: true, template: "<div\n  class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none\">\n\n  <div class=\"grow flex flex-col gap-3 w-[280px]\">\n\n    <div class=\"flex items-center justify-between\">\n\n      <div (click)=\"onYearSelectionPressed()\"\n           class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n        @switch (uiMode()) {\n          @case ('date') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n          @case ('month') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n          }\n          @case ('year') {\n            <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n            <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n            </svg>\n          }\n        }\n\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n\n        <div (click)=\"previousMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n        <div (click)=\"nextMonthPressed()\"\n             class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n          <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n          </svg>\n        </div>\n\n      </div>\n\n    </div>\n    <div class=\"flex gap-3\">\n          <span (click)=\"resetSelection()\"\n                class=\"text-overline px-2 py-1.5 rounded-md transition-all duration-300 bg-info-50 cursor-pointer select-none text-info-500\">Today</span>\n    </div>\n\n    @if (uiMode() == 'date') {\n      <div class=\"grid grid-cols-7 gap-y-1 text-xs text-center text-gray-900\">\n        @for (day of days; track day) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n        }\n\n        @for (blankDay of blankDays; track blankDay) {\n          <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n        }\n\n        @for (day of daysOfMonth; track day) {\n          <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n                (mouseover)=\"onDayHovered(day.value)\"\n                [ngClass]=\"{\n                          'text-neutral-400' : !day.isEnabled,\n                          'border rounded-lg border-primary-500 text-primary-900': isToday(day.value) && !isSelectionStartDate(day.value) && !isSelectionEndDate(day.value),\n                          'bg-primary-500 rounded-tl-lg rounded-bl-lg text-white': isSelectionStartDate(day.value),\n                          'bg-primary-500 !rounded-tr-lg !rounded-br-lg text-white': isSelectionEndDate(day.value),\n                          'bg-primary-50 text-primary-900': isDateInSelectionRange(day.value),\n                          'border-t border-b border-r rounded-tr-lg rounded-br-lg border-dashed border-gray-500 bg-neutral-100 text-primary-900': isDateHovered(day.value),\n                          '!border-t !border-b !border-r-none !border-dashed !border-gray-500 !text-primary-900': isDateInHoveredRange(day.value),\n                        }\"\n                class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 select-none cursor-pointer\">{{ day.value }}</span>\n        }\n      </div>\n    }\n\n    @if (uiMode() == 'month') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (month of months; track month; let i = $index) {\n          <span (click)=\"onMonthSelected(i)\"\n                [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n        }\n      </div>\n    }\n\n\n    @if (uiMode() == 'year') {\n      <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n        @for (year of years; track year; let i = $index) {\n          <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n                [ngClass]=\"{\n                 'text-neutral-400' : !year.isEnabled,\n              }\"\n                class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n        }\n      </div>\n    }\n  </div>\n\n\n  <div class=\"flex items-center justify-end\">\n    <span (click)=\"resetSelection()\"\n          class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-info-50 cursor-pointer select-none text-info-500\">Reset</span>\n  </div>\n\n</div>\n" }]
-        }] });
+        }], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }] } });
 
 class DropdownComponent extends BaseControlValueAccessorV2 {
     cdr = inject(ChangeDetectorRef);
     renderer = inject(Renderer2);
     overlay = inject(Overlay);
-    title = input();
-    items = input([]);
-    placeholder = input('Select');
-    prefixIconPath = input();
-    isTitlePrefix = input(false);
-    display = input();
-    displayTemplate = input();
-    value = input();
-    searchKeyMatch = input();
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    prefixIconPath = input(...(ngDevMode ? [undefined, { debugName: "prefixIconPath" }] : []));
+    isTitlePrefix = input(false, ...(ngDevMode ? [{ debugName: "isTitlePrefix" }] : []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
+    displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : []));
     // identifier = input<string>();
-    noDataMessage = input();
-    state = input();
-    fullWidth = input(false);
-    showErrorSpace = input(false);
-    enableSearch = input(false);
-    addActionText = input();
-    minimumPopupWidth = input(250);
-    noBorder = input(false);
-    isOpen = signal(false);
-    highlightedIndex = signal(-1);
-    selectedItem = signal(null);
-    dropUp = signal(false);
-    dropdownWidth = signal(300);
-    filteredList = signal([]);
-    errorMessages = signal({});
+    noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
+    state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
+    enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
+    minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
+    noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
+    dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     valueChanged = output();
     addActionClicked = output();
     dropdownButton;
     dropdown;
     dropdownListContainer;
     dropdownList;
-    searchField = viewChild('searchField');
+    searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
     scrollStrategy = this.overlay.scrollStrategies.block();
     ngOnChanges(changes) {
         let value = this.actualValue;
@@ -5033,10 +5033,10 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
             return current === value;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefixIconPath: { classPropertyName: "prefixIconPath", publicName: "prefixIconPath", isSignal: true, isRequired: false, transformFunction: null }, isTitlePrefix: { classPropertyName: "isTitlePrefix", publicName: "isTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"isTitlePrefix() ? null : title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n  <div #dropdownButton input class=\"relative inline text-left min-w-28 w-full\">\n\n    <button #dropdown (click)=\"toggleDropdown()\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-expanded]=\"isOpen()\"\n            class=\"h-[46px] flex items-center gap-3 w-full px-3 py-2 text-sm justify-between font-medium text-gray-700 bg-white rounded-md transition-all duration-300\"\n            [ngClass]=\"getButtonClass()\">\n\n      <div class=\"flex items-center gap-3 w-full\">\n        @if(prefixIconPath()) {\n          <app-svg-icon [size]=\"18\" [src]=\"prefixIconPath()!\"></app-svg-icon>\n        }\n        @if (isTitlePrefix()) {\n          <span class=\"text-body2 text-neutral-500 whitespace-nowrap\">{{ title() }}:</span>\n        }\n        <span class=\"w-full text-body2 text-left truncate overflow-hidden text-ellipsis ... line-clamp-2\"\n              [ngClass]=\"((formControl.value != null && formControl.value != '') || (selectedItem() != null && selectedItem() != '')) ? 'text-black' : 'text-gray-400'\">{{ getDisplayString(selectedItem()) || getDisplayString(getSelectedItem()) || placeholder() }}</span>\n      </div>\n\n      <svg class=\"-mr-1 h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n              fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n      <div #dropdownListContainer\n           class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n        @if (enableSearch()) {\n          <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n            <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                fill=\"currentColor\"/>\n            </svg>\n\n            <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                   class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n            <div\n              class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n              (click)=\"onClearSearchClicked()\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </div>\n        }\n\n        @if (addActionText()) {\n          <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\"\n               (click)=\"onAddActionClicked()\">\n            <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n          </div>\n        }\n\n        <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n             role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n             [style.width.px]=\"dropdownWidth()\">\n\n          @for (item of filteredList(); track item; let i = $index) {\n            <span class=\"text-gray-700 block px-4 py-3 text-sm hover:bg-neutral-100 cursor-pointer\"\n                  [ngClass]=\"(highlightedIndex() == i) ? 'bg-neutral-200' : 'bg-neutral-50'\" role=\"menuitem\"\n                  tabindex=\"-1\" (click)=\"onItemClicked(item)\">{{ getDisplayString(item) }}</span>\n          } @empty {\n            <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [".scrollbar::-webkit-scrollbar{@apply w-1;}.scrollbar::-webkit-scrollbar-thumb{@apply bg-primary-200 rounded-full;}.scrollbar::-webkit-scrollbar-track{@apply bg-primary-50 bg-opacity-80;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefixIconPath: { classPropertyName: "prefixIconPath", publicName: "prefixIconPath", isSignal: true, isRequired: false, transformFunction: null }, isTitlePrefix: { classPropertyName: "isTitlePrefix", publicName: "isTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"isTitlePrefix() ? null : title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n  <div #dropdownButton input class=\"relative inline text-left min-w-28 w-full\">\n\n    <button #dropdown (click)=\"toggleDropdown()\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-expanded]=\"isOpen()\"\n            class=\"h-[46px] flex items-center gap-3 w-full px-3 py-2 text-sm justify-between font-medium text-gray-700 bg-white rounded-md transition-all duration-300\"\n            [ngClass]=\"getButtonClass()\">\n\n      <div class=\"flex items-center gap-3 w-full\">\n        @if(prefixIconPath()) {\n          <app-svg-icon [size]=\"18\" [src]=\"prefixIconPath()!\"></app-svg-icon>\n        }\n        @if (isTitlePrefix()) {\n          <span class=\"text-body2 text-neutral-500 whitespace-nowrap\">{{ title() }}:</span>\n        }\n        <span class=\"w-full text-body2 text-left truncate overflow-hidden text-ellipsis ... line-clamp-2\"\n              [ngClass]=\"((formControl.value != null && formControl.value != '') || (selectedItem() != null && selectedItem() != '')) ? 'text-black' : 'text-gray-400'\">{{ getDisplayString(selectedItem()) || getDisplayString(getSelectedItem()) || placeholder() }}</span>\n      </div>\n\n      <svg class=\"-mr-1 h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n              fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n      <div #dropdownListContainer\n           class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n        @if (enableSearch()) {\n          <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n            <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                fill=\"currentColor\"/>\n            </svg>\n\n            <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                   class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n            <div\n              class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n              (click)=\"onClearSearchClicked()\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </div>\n        }\n\n        @if (addActionText()) {\n          <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\"\n               (click)=\"onAddActionClicked()\">\n            <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n          </div>\n        }\n\n        <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n             role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n             [style.width.px]=\"dropdownWidth()\">\n\n          @for (item of filteredList(); track item; let i = $index) {\n            <span class=\"text-gray-700 block px-4 py-3 text-sm hover:bg-neutral-100 cursor-pointer\"\n                  [ngClass]=\"(highlightedIndex() == i) ? 'bg-neutral-200' : 'bg-neutral-50'\" role=\"menuitem\"\n                  tabindex=\"-1\" (click)=\"onItemClicked(item)\">{{ getDisplayString(item) }}</span>\n          } @empty {\n            <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [".scrollbar::-webkit-scrollbar{@apply w-1;}.scrollbar::-webkit-scrollbar-thumb{@apply bg-primary-200 rounded-full;}.scrollbar::-webkit-scrollbar-track{@apply bg-primary-50 bg-opacity-80;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dropdown', standalone: true, imports: [
                         ReactiveFormsModule,
@@ -5046,7 +5046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CdkConnectedOverlay,
                         AppSvgIconComponent
                     ], template: "<app-base-input [title]=\"isTitlePrefix() ? null : title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n  <div #dropdownButton input class=\"relative inline text-left min-w-28 w-full\">\n\n    <button #dropdown (click)=\"toggleDropdown()\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-expanded]=\"isOpen()\"\n            class=\"h-[46px] flex items-center gap-3 w-full px-3 py-2 text-sm justify-between font-medium text-gray-700 bg-white rounded-md transition-all duration-300\"\n            [ngClass]=\"getButtonClass()\">\n\n      <div class=\"flex items-center gap-3 w-full\">\n        @if(prefixIconPath()) {\n          <app-svg-icon [size]=\"18\" [src]=\"prefixIconPath()!\"></app-svg-icon>\n        }\n        @if (isTitlePrefix()) {\n          <span class=\"text-body2 text-neutral-500 whitespace-nowrap\">{{ title() }}:</span>\n        }\n        <span class=\"w-full text-body2 text-left truncate overflow-hidden text-ellipsis ... line-clamp-2\"\n              [ngClass]=\"((formControl.value != null && formControl.value != '') || (selectedItem() != null && selectedItem() != '')) ? 'text-black' : 'text-gray-400'\">{{ getDisplayString(selectedItem()) || getDisplayString(getSelectedItem()) || placeholder() }}</span>\n      </div>\n\n      <svg class=\"-mr-1 h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n              fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n      <div #dropdownListContainer\n           class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n        @if (enableSearch()) {\n          <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n            <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                fill=\"currentColor\"/>\n            </svg>\n\n            <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                   class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n            <div\n              class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n              (click)=\"onClearSearchClicked()\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </div>\n        }\n\n        @if (addActionText()) {\n          <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\"\n               (click)=\"onAddActionClicked()\">\n            <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n          </div>\n        }\n\n        <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n             role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n             [style.width.px]=\"dropdownWidth()\">\n\n          @for (item of filteredList(); track item; let i = $index) {\n            <span class=\"text-gray-700 block px-4 py-3 text-sm hover:bg-neutral-100 cursor-pointer\"\n                  [ngClass]=\"(highlightedIndex() == i) ? 'bg-neutral-200' : 'bg-neutral-50'\" role=\"menuitem\"\n                  tabindex=\"-1\" (click)=\"onItemClicked(item)\">{{ getDisplayString(item) }}</span>\n          } @empty {\n            <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [".scrollbar::-webkit-scrollbar{@apply w-1;}.scrollbar::-webkit-scrollbar-thumb{@apply bg-primary-200 rounded-full;}.scrollbar::-webkit-scrollbar-track{@apply bg-primary-50 bg-opacity-80;}\n"] }]
-        }], propDecorators: { dropdownButton: [{
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefixIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconPath", required: false }] }], isTitlePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTitlePrefix", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchKeyMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchKeyMatch", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], addActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addActionText", required: false }] }], minimumPopupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumPopupWidth", required: false }] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], addActionClicked: [{ type: i0.Output, args: ["addActionClicked"] }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { static: true }]
             }], dropdown: [{
@@ -5058,21 +5058,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }], dropdownList: [{
                 type: ViewChild,
                 args: ['dropdownList', { static: false }]
-            }], onResize: [{
+            }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
 
 class FileUploaderComponent extends BaseControlValueAccessor {
-    fullWidth = input(false);
-    label = input();
-    isRequired = input(false);
-    uploading = input(false);
-    errorMessages = input({});
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     fileSelected = output();
     fileRemoved = output();
-    id = signal('');
-    selectedFile = signal(null);
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : []));
     ngControl = inject(NgControl, { optional: true, self: true });
     constructor() {
         super();
@@ -5136,16 +5136,16 @@ class FileUploaderComponent extends BaseControlValueAccessor {
             return fileName ? decodeURIComponent(fileName) : '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FileUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex items-center rounded border-2 border-dashed border-info-300 px-4 py-4 gap-2 cursor-pointer\">\n  <div class=\"flex flex-row items-center gap-2 w-full\">\n    <div class=\"flex items-center gap-2 grow\">\n      <label [for]=\"id()\" class=\"flex items-center gap-3 text-caption cursor-pointer grow\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-[24px] w-[24px] text-neutral-500\" fill=\"currentColor\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M16.5 6V17.5C16.5 18.5609 16.0786 19.5783 15.3284 20.3284C14.5783 21.0786 13.5609 21.5 12.5 21.5C11.4391 21.5 10.4217 21.0786 9.67157 20.3284C8.92143 19.5783 8.5 18.5609 8.5 17.5V5C8.5 4.33696 8.76339 3.70107 9.23223 3.23223C9.70107 2.76339 10.337 2.5 11 2.5C11.663 2.5 12.2989 2.76339 12.7678 3.23223C13.2366 3.70107 13.5 4.33696 13.5 5V15.5C13.5 15.7652 13.3946 16.0196 13.2071 16.2071C13.0196 16.3946 12.7652 16.5 12.5 16.5C12.2348 16.5 11.9804 16.3946 11.7929 16.2071C11.6054 16.0196 11.5 15.7652 11.5 15.5V6H10V15.5C10 16.163 10.2634 16.7989 10.7322 17.2678C11.2011 17.7366 11.837 18 12.5 18C13.163 18 13.7989 17.7366 14.2678 17.2678C14.7366 16.7989 15 16.163 15 15.5V5C15 3.93913 14.5786 2.92172 13.8284 2.17157C13.0783 1.42143 12.0609 1 11 1C9.93913 1 8.92172 1.42143 8.17157 2.17157C7.42143 2.92172 7 3.93913 7 5V17.5C7 18.9587 7.57946 20.3576 8.61091 21.3891C9.64236 22.4205 11.0413 23 12.5 23C13.9587 23 15.3576 22.4205 16.3891 21.3891C17.4205 20.3576 18 18.9587 18 17.5V6H16.5Z\"\n            fill=\"currentColor\"/>\n        </svg>\n        <span class=\"text-caption text-neutral-900\">{{ label() }}</span>\n        @if (hasRequiredValidator() || isRequired()) {\n          <span class=\"text-caption text-error-500\">*</span>\n        }\n      </label>\n    </div>\n\n    @if (formControl.value || selectedFile()) {\n      <div class=\"flex gap-3 items-center\">\n        <span class=\"text-body2 text-info-500 px-2 underline\"\n              (click)=\"onViewFileClicked()\">{{ formControl.value?.name || getFileNameFromUrl(formControl.value) || selectedFile()?.name }}</span>\n        @if (!uploading()) {\n          <div class=\"flex items-center gap-1 cursor-pointer\" (click)=\"onRemoveFileClicked()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[16px] w-[16px] text-error-500 underline\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n                fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-caption underline text-red-500\">Remove</span>\n          </div>\n        }\n      </div>\n    }\n\n    @if (uploading()) {\n      <app-spinner></app-spinner>\n    }\n\n  </div>\n  <input type=\"file\" [id]=\"id()\" (change)=\"onFileChange($event)\" hidden/>\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n}\n\n", styles: [""], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: FileUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex items-center rounded border-2 border-dashed border-info-300 px-4 py-4 gap-2 cursor-pointer\">\n  <div class=\"flex flex-row items-center gap-2 w-full\">\n    <div class=\"flex items-center gap-2 grow\">\n      <label [for]=\"id()\" class=\"flex items-center gap-3 text-caption cursor-pointer grow\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-[24px] w-[24px] text-neutral-500\" fill=\"currentColor\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M16.5 6V17.5C16.5 18.5609 16.0786 19.5783 15.3284 20.3284C14.5783 21.0786 13.5609 21.5 12.5 21.5C11.4391 21.5 10.4217 21.0786 9.67157 20.3284C8.92143 19.5783 8.5 18.5609 8.5 17.5V5C8.5 4.33696 8.76339 3.70107 9.23223 3.23223C9.70107 2.76339 10.337 2.5 11 2.5C11.663 2.5 12.2989 2.76339 12.7678 3.23223C13.2366 3.70107 13.5 4.33696 13.5 5V15.5C13.5 15.7652 13.3946 16.0196 13.2071 16.2071C13.0196 16.3946 12.7652 16.5 12.5 16.5C12.2348 16.5 11.9804 16.3946 11.7929 16.2071C11.6054 16.0196 11.5 15.7652 11.5 15.5V6H10V15.5C10 16.163 10.2634 16.7989 10.7322 17.2678C11.2011 17.7366 11.837 18 12.5 18C13.163 18 13.7989 17.7366 14.2678 17.2678C14.7366 16.7989 15 16.163 15 15.5V5C15 3.93913 14.5786 2.92172 13.8284 2.17157C13.0783 1.42143 12.0609 1 11 1C9.93913 1 8.92172 1.42143 8.17157 2.17157C7.42143 2.92172 7 3.93913 7 5V17.5C7 18.9587 7.57946 20.3576 8.61091 21.3891C9.64236 22.4205 11.0413 23 12.5 23C13.9587 23 15.3576 22.4205 16.3891 21.3891C17.4205 20.3576 18 18.9587 18 17.5V6H16.5Z\"\n            fill=\"currentColor\"/>\n        </svg>\n        <span class=\"text-caption text-neutral-900\">{{ label() }}</span>\n        @if (hasRequiredValidator() || isRequired()) {\n          <span class=\"text-caption text-error-500\">*</span>\n        }\n      </label>\n    </div>\n\n    @if (formControl.value || selectedFile()) {\n      <div class=\"flex gap-3 items-center\">\n        <span class=\"text-body2 text-info-500 px-2 underline\"\n              (click)=\"onViewFileClicked()\">{{ formControl.value?.name || getFileNameFromUrl(formControl.value) || selectedFile()?.name }}</span>\n        @if (!uploading()) {\n          <div class=\"flex items-center gap-1 cursor-pointer\" (click)=\"onRemoveFileClicked()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[16px] w-[16px] text-error-500 underline\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n                fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-caption underline text-red-500\">Remove</span>\n          </div>\n        }\n      </div>\n    }\n\n    @if (uploading()) {\n      <app-spinner></app-spinner>\n    }\n\n  </div>\n  <input type=\"file\" [id]=\"id()\" (change)=\"onFileChange($event)\" hidden/>\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n}\n\n", styles: [""], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-uploader', standalone: true, imports: [
                         SpinnerComponent,
                         HumanizeFormMessagesPipe
                     ], template: "<div\n  class=\"flex items-center rounded border-2 border-dashed border-info-300 px-4 py-4 gap-2 cursor-pointer\">\n  <div class=\"flex flex-row items-center gap-2 w-full\">\n    <div class=\"flex items-center gap-2 grow\">\n      <label [for]=\"id()\" class=\"flex items-center gap-3 text-caption cursor-pointer grow\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-[24px] w-[24px] text-neutral-500\" fill=\"currentColor\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M16.5 6V17.5C16.5 18.5609 16.0786 19.5783 15.3284 20.3284C14.5783 21.0786 13.5609 21.5 12.5 21.5C11.4391 21.5 10.4217 21.0786 9.67157 20.3284C8.92143 19.5783 8.5 18.5609 8.5 17.5V5C8.5 4.33696 8.76339 3.70107 9.23223 3.23223C9.70107 2.76339 10.337 2.5 11 2.5C11.663 2.5 12.2989 2.76339 12.7678 3.23223C13.2366 3.70107 13.5 4.33696 13.5 5V15.5C13.5 15.7652 13.3946 16.0196 13.2071 16.2071C13.0196 16.3946 12.7652 16.5 12.5 16.5C12.2348 16.5 11.9804 16.3946 11.7929 16.2071C11.6054 16.0196 11.5 15.7652 11.5 15.5V6H10V15.5C10 16.163 10.2634 16.7989 10.7322 17.2678C11.2011 17.7366 11.837 18 12.5 18C13.163 18 13.7989 17.7366 14.2678 17.2678C14.7366 16.7989 15 16.163 15 15.5V5C15 3.93913 14.5786 2.92172 13.8284 2.17157C13.0783 1.42143 12.0609 1 11 1C9.93913 1 8.92172 1.42143 8.17157 2.17157C7.42143 2.92172 7 3.93913 7 5V17.5C7 18.9587 7.57946 20.3576 8.61091 21.3891C9.64236 22.4205 11.0413 23 12.5 23C13.9587 23 15.3576 22.4205 16.3891 21.3891C17.4205 20.3576 18 18.9587 18 17.5V6H16.5Z\"\n            fill=\"currentColor\"/>\n        </svg>\n        <span class=\"text-caption text-neutral-900\">{{ label() }}</span>\n        @if (hasRequiredValidator() || isRequired()) {\n          <span class=\"text-caption text-error-500\">*</span>\n        }\n      </label>\n    </div>\n\n    @if (formControl.value || selectedFile()) {\n      <div class=\"flex gap-3 items-center\">\n        <span class=\"text-body2 text-info-500 px-2 underline\"\n              (click)=\"onViewFileClicked()\">{{ formControl.value?.name || getFileNameFromUrl(formControl.value) || selectedFile()?.name }}</span>\n        @if (!uploading()) {\n          <div class=\"flex items-center gap-1 cursor-pointer\" (click)=\"onRemoveFileClicked()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[16px] w-[16px] text-error-500 underline\"\n                 viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n                fill=\"currentColor\"/>\n            </svg>\n            <span class=\"text-caption underline text-red-500\">Remove</span>\n          </div>\n        }\n      </div>\n    }\n\n    @if (uploading()) {\n      <app-spinner></app-spinner>\n    }\n\n  </div>\n  <input type=\"file\" [id]=\"id()\" (change)=\"onFileChange($event)\" hidden/>\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n}\n\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequired", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
 
 class SharedConstants {
     static inputIdentifier = 'id';
@@ -5155,35 +5155,35 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
     cdr = inject(ChangeDetectorRef);
     renderer = inject(Renderer2);
     overlay = inject(Overlay);
-    title = input();
-    items = input([]);
-    placeholder = input('Select');
-    display = input();
-    displayTemplate = input();
-    value = input('');
-    identifier = input(SharedConstants.inputIdentifier);
-    searchKeyMatch = input();
-    noDataMessage = input();
-    state = input();
-    fullWidth = input(false);
-    showErrorSpace = input(false);
-    enableSearch = input(false);
-    addActionText = input();
-    minimumPopupWidth = input(250);
-    appearance = input(MultiSelectDropdownAppearance.standard);
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
+    displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
+    searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : []));
+    noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
+    state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
+    enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
+    addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
+    minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
+    appearance = input(MultiSelectDropdownAppearance.standard, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     valueChanged = output();
     addActionClicked = output();
-    isOpen = signal(false);
-    highlightedIndex = signal(-1);
-    dropUp = signal(false);
-    dropdownWidth = signal(300);
-    selectedItems = signal([]);
-    filteredList = signal([]);
-    errorMessages = signal({});
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
+    dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     dropdownButton;
     dropdownListContainer;
     dropdownList;
-    searchField = viewChild('searchField');
+    searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
     scrollStrategy = this.overlay.scrollStrategies.block();
     ngControl = inject(NgControl, { optional: true, self: true });
     MultiSelectDropdownAppearance = MultiSelectDropdownAppearance;
@@ -5501,10 +5501,10 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
     onAddActionClicked() {
         this.addActionClicked.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MultiSelectDropdownComponent, isStandalone: true, selector: "app-multi-select-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n\n    <div #dropdownButton input class=\"relative inline-block text-left min-w-52\">\n        <div>\n            <button (click)=\"toggleDropdown()\"\n                    type=\"button\"\n                    tabindex=\"0\"\n                    [attr.aria-expanded]=\"isOpen()\"\n                    class=\"h-[46px] inline-flex items-center w-full px-4 py-2 text-sm justify-between font-medium text-gray-700 bg-white border-none outline-none border-gray-300 ring-1 focus:ring-2 ring-neutral-300 focus:ring-primary-500 rounded-md shadow-1 focus:border-none focus:outline-none transition-all duration-300\">\n                @switch (appearance()) {\n                    @case (MultiSelectDropdownAppearance.standard) {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                    @case (MultiSelectDropdownAppearance.csv) {\n                        <div class=\"flex flex-wrap gap-2 w-full\">\n                            <span class=\"text-body1 text-left w-full truncate overflow-ellipsis\"\n                                  [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ getCsv() ?? placeholder() }}</span>\n                        </div>\n                    }\n                    @default {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                }\n                <div class=\"flex items-center gap-2 -mr-1\">\n                    <svg class=\"h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n                              fill=\"currentColor\"/>\n                    </svg>\n                </div>\n\n            </button>\n        </div>\n    </div>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 [cdkConnectedOverlayHasBackdrop]=\"false\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n        <div #dropdownListContainer\n             class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n\n            @if (enableSearch()) {\n                <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n                    <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                         viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path\n                                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                                fill=\"currentColor\"/>\n                    </svg>\n\n                    <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                           class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n                    <div\n                            class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n                            (click)=\"onClearSearchClicked()\">\n                        <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\"\n                             viewBox=\"0 0 24 24\"\n                             fill=\"none\">\n                            <path\n                                    d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                                    fill=\"currentColor\"/>\n                        </svg>\n                    </div>\n                </div>\n            }\n\n            @if(addActionText()) {\n                <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\" (click)=\"onAddActionClicked()\">\n                    <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                        <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n                    </svg>\n                    <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n                </div>\n            }\n\n            <div class=\"flex items-center justify-between px-4 py-4 bg-neutral-50\">\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onSelectAllClicked()\">SELECT ALL</span>\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onClearSelectionClicked()\">CLEAR</span>\n            </div>\n\n            <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n                 role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n                 [style.width.px]=\"dropdownWidth()\">\n\n                @for (item of filteredList(); track item; let i = $index) {\n                    <div (click)=\"onItemClicked(item)\"\n                         class=\"flex gap-2 items-center px-2 hover:bg-neutral-100 cursor-pointer\"\n                         [ngClass]=\"{\n                              'bg-neutral-200': (highlightedIndex() == i),\n                              'bg-primary-50': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                              'bg-opacity-30': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                           }\"\n                         role=\"menuitem\"\n                         tabindex=\"-1\">\n                        <app-checkbox\n                                [ngModel]=\"isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)\"></app-checkbox>\n                        <span class=\"text-gray-700 block text-sm\">{{ getDisplayString(item) }}</span>\n                    </div>\n                } @empty {\n                    <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n    <div class=\"mb-3\">\n        <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n    </div>\n} @else {\n    @if (showErrorSpace()) {\n        <div class=\"mb-3\">\n            <span class=\"text-caption text-transparent\">.</span>\n        </div>\n    }\n}\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MultiSelectDropdownComponent, isStandalone: true, selector: "app-multi-select-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n\n    <div #dropdownButton input class=\"relative inline-block text-left min-w-52\">\n        <div>\n            <button (click)=\"toggleDropdown()\"\n                    type=\"button\"\n                    tabindex=\"0\"\n                    [attr.aria-expanded]=\"isOpen()\"\n                    class=\"h-[46px] inline-flex items-center w-full px-4 py-2 text-sm justify-between font-medium text-gray-700 bg-white border-none outline-none border-gray-300 ring-1 focus:ring-2 ring-neutral-300 focus:ring-primary-500 rounded-md shadow-1 focus:border-none focus:outline-none transition-all duration-300\">\n                @switch (appearance()) {\n                    @case (MultiSelectDropdownAppearance.standard) {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                    @case (MultiSelectDropdownAppearance.csv) {\n                        <div class=\"flex flex-wrap gap-2 w-full\">\n                            <span class=\"text-body1 text-left w-full truncate overflow-ellipsis\"\n                                  [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ getCsv() ?? placeholder() }}</span>\n                        </div>\n                    }\n                    @default {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                }\n                <div class=\"flex items-center gap-2 -mr-1\">\n                    <svg class=\"h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n                              fill=\"currentColor\"/>\n                    </svg>\n                </div>\n\n            </button>\n        </div>\n    </div>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 [cdkConnectedOverlayHasBackdrop]=\"false\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n        <div #dropdownListContainer\n             class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n\n            @if (enableSearch()) {\n                <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n                    <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                         viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path\n                                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                                fill=\"currentColor\"/>\n                    </svg>\n\n                    <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                           class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n                    <div\n                            class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n                            (click)=\"onClearSearchClicked()\">\n                        <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\"\n                             viewBox=\"0 0 24 24\"\n                             fill=\"none\">\n                            <path\n                                    d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                                    fill=\"currentColor\"/>\n                        </svg>\n                    </div>\n                </div>\n            }\n\n            @if(addActionText()) {\n                <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\" (click)=\"onAddActionClicked()\">\n                    <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                        <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n                    </svg>\n                    <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n                </div>\n            }\n\n            <div class=\"flex items-center justify-between px-4 py-4 bg-neutral-50\">\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onSelectAllClicked()\">SELECT ALL</span>\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onClearSelectionClicked()\">CLEAR</span>\n            </div>\n\n            <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n                 role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n                 [style.width.px]=\"dropdownWidth()\">\n\n                @for (item of filteredList(); track item; let i = $index) {\n                    <div (click)=\"onItemClicked(item)\"\n                         class=\"flex gap-2 items-center px-2 hover:bg-neutral-100 cursor-pointer\"\n                         [ngClass]=\"{\n                              'bg-neutral-200': (highlightedIndex() == i),\n                              'bg-primary-50': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                              'bg-opacity-30': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                           }\"\n                         role=\"menuitem\"\n                         tabindex=\"-1\">\n                        <app-checkbox\n                                [ngModel]=\"isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)\"></app-checkbox>\n                        <span class=\"text-gray-700 block text-sm\">{{ getDisplayString(item) }}</span>\n                    </div>\n                } @empty {\n                    <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n    <div class=\"mb-3\">\n        <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n    </div>\n} @else {\n    @if (showErrorSpace()) {\n        <div class=\"mb-3\">\n            <span class=\"text-caption text-transparent\">.</span>\n        </div>\n    }\n}\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-multi-select-dropdown', standalone: true, imports: [
                         BaseInputComponent,
@@ -5514,7 +5514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CheckboxComponent,
                         FormsModule
                     ], template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n                [isRequiredField]=\"hasRequiredValidator()\">\n\n    <div #dropdownButton input class=\"relative inline-block text-left min-w-52\">\n        <div>\n            <button (click)=\"toggleDropdown()\"\n                    type=\"button\"\n                    tabindex=\"0\"\n                    [attr.aria-expanded]=\"isOpen()\"\n                    class=\"h-[46px] inline-flex items-center w-full px-4 py-2 text-sm justify-between font-medium text-gray-700 bg-white border-none outline-none border-gray-300 ring-1 focus:ring-2 ring-neutral-300 focus:ring-primary-500 rounded-md shadow-1 focus:border-none focus:outline-none transition-all duration-300\">\n                @switch (appearance()) {\n                    @case (MultiSelectDropdownAppearance.standard) {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                    @case (MultiSelectDropdownAppearance.csv) {\n                        <div class=\"flex flex-wrap gap-2 w-full\">\n                            <span class=\"text-body1 text-left w-full truncate overflow-ellipsis\"\n                                  [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ getCsv() ?? placeholder() }}</span>\n                        </div>\n                    }\n                    @default {\n                        <span class=\"text-body1 text-left overflow-ellipsis\"\n                              [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n                    }\n                }\n                <div class=\"flex items-center gap-2 -mr-1\">\n                    <svg class=\"h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n                              fill=\"currentColor\"/>\n                    </svg>\n                </div>\n\n            </button>\n        </div>\n    </div>\n\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n                 [cdkConnectedOverlayOpen]=\"isOpen()\"\n                 [cdkConnectedOverlayHasBackdrop]=\"false\"\n                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n                 (overlayOutsideClick)=\"onClickOutside()\"\n                 [cdkConnectedOverlayPositions]=\"[\n                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n                     ]\"\n                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n                 [cdkConnectedOverlayOffsetY]=\"10\">\n        <div #dropdownListContainer\n             class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n\n            @if (enableSearch()) {\n                <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n                    <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n                         viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path\n                                d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n                                fill=\"currentColor\"/>\n                    </svg>\n\n                    <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n                           class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n                    <div\n                            class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n                            (click)=\"onClearSearchClicked()\">\n                        <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\"\n                             viewBox=\"0 0 24 24\"\n                             fill=\"none\">\n                            <path\n                                    d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n                                    fill=\"currentColor\"/>\n                        </svg>\n                    </div>\n                </div>\n            }\n\n            @if(addActionText()) {\n                <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\" (click)=\"onAddActionClicked()\">\n                    <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                        <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n                    </svg>\n                    <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n                </div>\n            }\n\n            <div class=\"flex items-center justify-between px-4 py-4 bg-neutral-50\">\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onSelectAllClicked()\">SELECT ALL</span>\n                <span class=\"text-overline text-blue-500 cursor-pointer\"\n                      (click)=\"onClearSelectionClicked()\">CLEAR</span>\n            </div>\n\n            <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n                 role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n                 [style.width.px]=\"dropdownWidth()\">\n\n                @for (item of filteredList(); track item; let i = $index) {\n                    <div (click)=\"onItemClicked(item)\"\n                         class=\"flex gap-2 items-center px-2 hover:bg-neutral-100 cursor-pointer\"\n                         [ngClass]=\"{\n                              'bg-neutral-200': (highlightedIndex() == i),\n                              'bg-primary-50': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                              'bg-opacity-30': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                           }\"\n                         role=\"menuitem\"\n                         tabindex=\"-1\">\n                        <app-checkbox\n                                [ngModel]=\"isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)\"></app-checkbox>\n                        <span class=\"text-gray-700 block text-sm\">{{ getDisplayString(item) }}</span>\n                    </div>\n                } @empty {\n                    <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n    <div class=\"mb-3\">\n        <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n    </div>\n} @else {\n    @if (showErrorSpace()) {\n        <div class=\"mb-3\">\n            <span class=\"text-caption text-transparent\">.</span>\n        </div>\n    }\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { dropdownButton: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], searchKeyMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchKeyMatch", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], addActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addActionText", required: false }] }], minimumPopupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumPopupWidth", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], addActionClicked: [{ type: i0.Output, args: ["addActionClicked"] }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { static: true }]
             }], dropdownListContainer: [{
@@ -5523,7 +5523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }], dropdownList: [{
                 type: ViewChild,
                 args: ['dropdownList', { static: false }]
-            }], onResize: [{
+            }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -5535,31 +5535,31 @@ var MultiSelectDropdownAppearance;
 })(MultiSelectDropdownAppearance || (MultiSelectDropdownAppearance = {}));
 
 class MultiSelectionFieldComponent extends BaseControlValueAccessor {
-    title = input();
-    items = input([]);
-    display = input();
-    displayTemplate = input();
-    iconSrc = input();
-    dynamicIconPath = input();
-    imageUrl = input();
-    dynamicImageUrlPath = input();
-    value = input(null);
-    identifier = input(SharedConstants.inputIdentifier);
-    noDataMessage = input();
-    state = input();
-    iconColor = input();
-    dynamicIconColor = input();
-    customActionText = input();
-    fullWidth = input(false);
-    itemWidth = input(null);
-    isItemCentered = input(false);
-    showSelectionTickMark = input(true);
-    maximumDisplayItems = input(null);
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
+    displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
+    imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
+    dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
+    noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
+    state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
+    customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
+    isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
+    showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
+    maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : []));
     valueChanged = output();
     onCustomActionClicked = output();
-    showAll = signal(false);
-    selectedItems = signal([]);
-    errorMessages = signal({});
+    showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     ngControl = inject(NgControl, { optional: true, self: true });
     constructor() {
         super();
@@ -5790,10 +5790,10 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MultiSelectionFieldComponent, isStandalone: true, selector: "app-multi-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap justify-start gap-3\">\n\n    @for (item of getVisibleItems(); track item; let index = $index) {\n      <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n           tabindex=\"0\"\n           (keydown)=\"handleKeydown($event, item)\"\n           [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n           (click)=\"onItemClicked(item)\"\n           [ngClass]=\"{\n                'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                'justify-center': isItemCentered()\n            }\">\n\n\n        @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if (state()?.success() && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.failed()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MultiSelectionFieldComponent, isStandalone: true, selector: "app-multi-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap justify-start gap-3\">\n\n    @for (item of getVisibleItems(); track item; let index = $index) {\n      <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n           tabindex=\"0\"\n           (keydown)=\"handleKeydown($event, item)\"\n           [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n           (click)=\"onItemClicked(item)\"\n           [ngClass]=\"{\n                'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                'justify-center': isItemCentered()\n            }\">\n\n\n        @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if (state()?.success() && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.failed()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-multi-selection-field', standalone: true, imports: [
                         BaseInputComponent,
@@ -5803,7 +5803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         AppSvgIconComponent,
                         NgStyle
                     ], template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap justify-start gap-3\">\n\n    @for (item of getVisibleItems(); track item; let index = $index) {\n      <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n           tabindex=\"0\"\n           (keydown)=\"handleKeydown($event, item)\"\n           [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n           (click)=\"onItemClicked(item)\"\n           [ngClass]=\"{\n                'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n                'justify-center': isItemCentered()\n            }\">\n\n\n        @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if (state()?.success() && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.failed()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], dynamicIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconPath", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], dynamicImageUrlPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicImageUrlPath", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], dynamicIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconColor", required: false }] }], customActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActionText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], isItemCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemCentered", required: false }] }], showSelectionTickMark: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionTickMark", required: false }] }], maximumDisplayItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumDisplayItems", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], onCustomActionClicked: [{ type: i0.Output, args: ["onCustomActionClicked"] }] } });
 
 class NumberInputComponent extends BaseControlValueAccessorV2 {
     valueChanged = output();
@@ -5820,33 +5820,33 @@ class NumberInputComponent extends BaseControlValueAccessorV2 {
     }
     text(someType) {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: NumberInputComponent, isStandalone: true, selector: "app-number-input", outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<pre> {{ formValue() | json }}</pre>-->\n<app-button (click)=\"increment()\">Increment</app-button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: NumberInputComponent, isStandalone: true, selector: "app-number-input", outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<pre> {{ formValue() | json }}</pre>-->\n<app-button (click)=\"increment()\">Increment</app-button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-number-input', standalone: true, imports: [
                         ButtonComponent
                     ], template: "<!--<pre> {{ formValue() | json }}</pre>-->\n<app-button (click)=\"increment()\">Increment</app-button>\n" }]
-        }] });
+        }], propDecorators: { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 class PhoneNumberInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PhoneNumberInputComponent, isStandalone: true, selector: "app-phone-number-input", ngImport: i0, template: "", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: PhoneNumberInputComponent, isStandalone: true, selector: "app-phone-number-input", ngImport: i0, template: "", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-phone-number-input', imports: [], template: "" }]
         }] });
 
 class RadioButtonComponent extends BaseControlValueAccessor {
-    title = input();
-    groupName = input.required();
-    value = input();
-    id = signal('');
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    groupName = input.required(...(ngDevMode ? [{ debugName: "groupName" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
     valueChanged = new EventEmitter();
     ngControl = inject(NgControl, { optional: true, self: true });
-    errorMessages = input({});
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     constructor() {
         super();
         if (this.ngControl) {
@@ -5876,26 +5876,26 @@ class RadioButtonComponent extends BaseControlValueAccessor {
         const randomNumber = Math.floor(1000 + Math.random() * 9000);
         return `radio-button-${randomNumber.toString()}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RadioButtonComponent, isStandalone: true, selector: "app-radio-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative align-baseline flex items-center rounded-full cursor-pointer\" [for]=\"id()\">\n    @if(ngControl?.name) {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [formControl]=\"formControl\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    } @else {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    }\n\n    <span\n      class=\"absolute text-primary-500 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-2.5 w-2.5\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <circle data-name=\"ellipse\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        </svg>\n      </span>\n  </label>\n  @if(title()) {\n    <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: RadioButtonComponent, isStandalone: true, selector: "app-radio-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative align-baseline flex items-center rounded-full cursor-pointer\" [for]=\"id()\">\n    @if(ngControl?.name) {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [formControl]=\"formControl\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    } @else {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    }\n\n    <span\n      class=\"absolute text-primary-500 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-2.5 w-2.5\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <circle data-name=\"ellipse\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        </svg>\n      </span>\n  </label>\n  @if(title()) {\n    <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-radio-button', standalone: true, imports: [
                         ReactiveFormsModule
                     ], template: "<div class=\"flex items-center gap-3\">\n  <label class=\"relative align-baseline flex items-center rounded-full cursor-pointer\" [for]=\"id()\">\n    @if(ngControl?.name) {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [formControl]=\"formControl\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    } @else {\n      <input type=\"radio\"\n             [name]=\"groupName()\"\n             [value]=\"value()\"\n             [attr.name]=\"groupName()\"\n             [attr.value]=\"value()\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onRadioSelected($event)\"\n             class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n             [id]=\"id()\"/>\n    }\n\n    <span\n      class=\"absolute text-primary-500 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-2.5 w-2.5\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <circle data-name=\"ellipse\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        </svg>\n      </span>\n  </label>\n  @if(title()) {\n    <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { valueChanged: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChanged: [{
                 type: Output
-            }] } });
+            }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
 
 class SingleItemPickerInputComponent extends BaseControlValueAccessor {
-    title = input.required();
-    items = input([]);
-    display = input.required();
-    value = input();
-    errorMessages = signal({});
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    display = input.required(...(ngDevMode ? [{ debugName: "display" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     ngControl = inject(NgControl, { optional: true, self: true });
-    isPopUpOpen = signal(false);
+    isPopUpOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopUpOpen" }] : []));
     valueChanged = new EventEmitter();
     constructor() {
         super();
@@ -5944,46 +5944,46 @@ class SingleItemPickerInputComponent extends BaseControlValueAccessor {
     togglePopup() {
         this.isPopUpOpen.update(p => !p);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SingleItemPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SingleItemPickerInputComponent, isStandalone: true, selector: "app-single-item-picker-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex-inline relative hover:bg-neutral-50 py-2 px-4 rounded-lg select-none cursor-pointer\"\n     (clickOutside)=\"outsideClicked()\">\n  <div class=\"flex gap-4 items-center\" (click)=\"togglePopup()\">\n    <div class=\"flex flex-col gap-2\">\n      <p class=\"text-body2 text-neutral-500\">{{ title() }}</p>\n      <p class=\"text-caption sm:text-body2\">{{ (formControl.value != null && formControl.value != '') ? getProperty(formControl.value) : '-' }}</p>\n    </div>\n    <app-svg-icon src=\"assets/icons/chevron-down.svg\" class=\"text-neutral-400\" [size]=\"12\"></app-svg-icon>\n  </div>\n  @if (isPopUpOpen()) {\n    <div class=\"absolute z-50 mt-6 min-w-72 transform -translate-x-1/3 rounded-md bg-white shadow-2 p-3 max-h-60 overflow-y-scroll\">\n      <div class=\"flex flex-col gap-2\">\n        <p class=\"text-body2 text-neutral-600\">Time</p>\n        <div class=\"grid grid-cols-3 w-full gap-2\">\n          @for (item of items(); track item) {\n            <div class=\"inline-flex justify-center items-center cursor-pointer\" (click)=\"onItemClicked(item)\">\n              <p\n                class=\"text-caption hover:border-primary-500 border-2 border-neutral-200 hover:border-2 p-2 rounded\">{{ getProperty(item) }}</p>\n            </div>\n          }\n        </div>\n        @if(items().length <= 0) {\n          <span class=\"text-neutral-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<div>\n  @if (formControl.errors && hasErrors) {\n    <p class=\"text-caption text-red-500\">\n      {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n    </p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SingleItemPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SingleItemPickerInputComponent, isStandalone: true, selector: "app-single-item-picker-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex-inline relative hover:bg-neutral-50 py-2 px-4 rounded-lg select-none cursor-pointer\"\n     (clickOutside)=\"outsideClicked()\">\n  <div class=\"flex gap-4 items-center\" (click)=\"togglePopup()\">\n    <div class=\"flex flex-col gap-2\">\n      <p class=\"text-body2 text-neutral-500\">{{ title() }}</p>\n      <p class=\"text-caption sm:text-body2\">{{ (formControl.value != null && formControl.value != '') ? getProperty(formControl.value) : '-' }}</p>\n    </div>\n    <app-svg-icon src=\"assets/icons/chevron-down.svg\" class=\"text-neutral-400\" [size]=\"12\"></app-svg-icon>\n  </div>\n  @if (isPopUpOpen()) {\n    <div class=\"absolute z-50 mt-6 min-w-72 transform -translate-x-1/3 rounded-md bg-white shadow-2 p-3 max-h-60 overflow-y-scroll\">\n      <div class=\"flex flex-col gap-2\">\n        <p class=\"text-body2 text-neutral-600\">Time</p>\n        <div class=\"grid grid-cols-3 w-full gap-2\">\n          @for (item of items(); track item) {\n            <div class=\"inline-flex justify-center items-center cursor-pointer\" (click)=\"onItemClicked(item)\">\n              <p\n                class=\"text-caption hover:border-primary-500 border-2 border-neutral-200 hover:border-2 p-2 rounded\">{{ getProperty(item) }}</p>\n            </div>\n          }\n        </div>\n        @if(items().length <= 0) {\n          <span class=\"text-neutral-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<div>\n  @if (formControl.errors && hasErrors) {\n    <p class=\"text-caption text-red-500\">\n      {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n    </p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-single-item-picker-input', standalone: true, imports: [
                         AppSvgIconComponent,
                         ClickOutsideDirective,
                         HumanizeFormMessagesPipe
                     ], template: "<div class=\"flex-inline relative hover:bg-neutral-50 py-2 px-4 rounded-lg select-none cursor-pointer\"\n     (clickOutside)=\"outsideClicked()\">\n  <div class=\"flex gap-4 items-center\" (click)=\"togglePopup()\">\n    <div class=\"flex flex-col gap-2\">\n      <p class=\"text-body2 text-neutral-500\">{{ title() }}</p>\n      <p class=\"text-caption sm:text-body2\">{{ (formControl.value != null && formControl.value != '') ? getProperty(formControl.value) : '-' }}</p>\n    </div>\n    <app-svg-icon src=\"assets/icons/chevron-down.svg\" class=\"text-neutral-400\" [size]=\"12\"></app-svg-icon>\n  </div>\n  @if (isPopUpOpen()) {\n    <div class=\"absolute z-50 mt-6 min-w-72 transform -translate-x-1/3 rounded-md bg-white shadow-2 p-3 max-h-60 overflow-y-scroll\">\n      <div class=\"flex flex-col gap-2\">\n        <p class=\"text-body2 text-neutral-600\">Time</p>\n        <div class=\"grid grid-cols-3 w-full gap-2\">\n          @for (item of items(); track item) {\n            <div class=\"inline-flex justify-center items-center cursor-pointer\" (click)=\"onItemClicked(item)\">\n              <p\n                class=\"text-caption hover:border-primary-500 border-2 border-neutral-200 hover:border-2 p-2 rounded\">{{ getProperty(item) }}</p>\n            </div>\n          }\n        </div>\n        @if(items().length <= 0) {\n          <span class=\"text-neutral-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<div>\n  @if (formControl.errors && hasErrors) {\n    <p class=\"text-caption text-red-500\">\n      {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n    </p>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { valueChanged: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChanged: [{
                 type: Output
             }] } });
 
 class SingleSelectionFieldComponent extends BaseControlValueAccessor {
-    title = input();
-    items = input([]);
-    display = input();
-    displayTemplate = input();
-    iconSrc = input();
-    dynamicIconPath = input();
-    imageUrl = input();
-    dynamicImageUrlPath = input();
-    iconColor = input();
-    dynamicIconColor = input();
-    value = input();
-    noDataMessage = input();
-    state = input();
-    customActionText = input();
-    fullWidth = input(false);
-    itemWidth = input(null);
-    isItemCentered = input(false);
-    showSelectionTickMark = input(true);
-    itemPlacement = input('start');
-    maximumDisplayItems = input(null);
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
+    displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
+    imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
+    dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
+    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
+    state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+    customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
+    isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
+    showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
+    itemPlacement = input('start', ...(ngDevMode ? [{ debugName: "itemPlacement" }] : []));
+    maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : []));
     valueChanged = output();
     onCustomActionClicked = output();
-    selectedItem = signal(null);
-    showAll = signal(false);
-    errorMessages = signal({});
+    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     ngControl = inject(NgControl, { optional: true, self: true });
     constructor() {
         super();
@@ -6103,10 +6103,10 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SingleSelectionFieldComponent, isStandalone: true, selector: "app-single-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, itemPlacement: { classPropertyName: "itemPlacement", publicName: "itemPlacement", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap gap-3\"\n       [ngClass]=\"[\n       itemPlacement() == 'start' ? 'justify-start' : '',\n       itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n    @for (item of getVisibleItems(); track item) {\n      <div\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n        tabindex=\"0\"\n        (keydown)=\"handleKeydown($event, item)\"\n        [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n        (click)=\"onItemClicked(item)\"\n        [ngClass]=\"{\n        'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n        'justify-center': isItemCentered()\n      }\">\n\n        @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n        <ng-content select=\"[post]\"></ng-content>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if ((state()?.success()) && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.error()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SingleSelectionFieldComponent, isStandalone: true, selector: "app-single-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, itemPlacement: { classPropertyName: "itemPlacement", publicName: "itemPlacement", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap gap-3\"\n       [ngClass]=\"[\n       itemPlacement() == 'start' ? 'justify-start' : '',\n       itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n    @for (item of getVisibleItems(); track item) {\n      <div\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n        tabindex=\"0\"\n        (keydown)=\"handleKeydown($event, item)\"\n        [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n        (click)=\"onItemClicked(item)\"\n        [ngClass]=\"{\n        'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n        'justify-center': isItemCentered()\n      }\">\n\n        @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n        <ng-content select=\"[post]\"></ng-content>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if ((state()?.success()) && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.error()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-single-selection-field', standalone: true, imports: [
                         BaseInputComponent,
@@ -6117,14 +6117,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         NgStyle,
                         ShimmerComponent
                     ], template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"flex flex-wrap gap-3\"\n       [ngClass]=\"[\n       itemPlacement() == 'start' ? 'justify-start' : '',\n       itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n    @for (item of getVisibleItems(); track item) {\n      <div\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n        tabindex=\"0\"\n        (keydown)=\"handleKeydown($event, item)\"\n        [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n        (click)=\"onItemClicked(item)\"\n        [ngClass]=\"{\n        'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n        'justify-center': isItemCentered()\n      }\">\n\n        @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n          <div class=\"absolute -top-[8px] -right-[8px]\">\n            <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path\n                d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"white\"/>\n              <path\n                d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n                fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        @if (getDynamicIcon(item)) {\n          @switch (getImageType(item)) {\n            @case ('url') {\n              <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n            }\n            @case ('svg') {\n              <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n                            [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n            }\n          }\n        }\n        <p\n          class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n        <ng-content select=\"[post]\"></ng-content>\n      </div>\n    }\n\n    @if (showMoreButton()) {\n      <span\n        (click)=\"showAllItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n          More\n      </span>\n    }\n\n    @if (showLessButton()) {\n      <span\n        (click)=\"shrinkItems()\"\n        class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n          Less\n        </span>\n    }\n\n    @if (customActionText()) {\n      <div (click)=\"customActionClicked()\"\n           class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n        <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n      </div>\n    }\n\n    @if ((state()?.success()) && items().length <= 0) {\n      <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if ((state()?.error()) && items().length <= 0) {\n      <p\n        class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n    }\n\n    @if (state()?.loading()) {\n      <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n    }\n  </div>\n\n  <div error>\n    @if (formControl.errors && hasErrors) {\n      <p class=\"text-caption text-red-500\">\n        {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n      </p>\n    }\n  </div>\n</app-base-input>\n\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], dynamicIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconPath", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], dynamicImageUrlPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicImageUrlPath", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], dynamicIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconColor", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], customActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActionText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], isItemCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemCentered", required: false }] }], showSelectionTickMark: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionTickMark", required: false }] }], itemPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemPlacement", required: false }] }], maximumDisplayItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumDisplayItems", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], onCustomActionClicked: [{ type: i0.Output, args: ["onCustomActionClicked"] }] } });
 
 class SwitchComponent extends BaseControlValueAccessor {
-    title = input();
-    id = signal('');
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
     valueChanged = new EventEmitter();
     ngControl = inject(NgControl, { optional: true, self: true });
-    errorMessages = input({});
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
     constructor() {
         super();
         if (this.ngControl) {
@@ -6154,28 +6154,28 @@ class SwitchComponent extends BaseControlValueAccessor {
         const randomNumber = Math.floor(1000 + Math.random() * 9000);
         return `checkbox-${randomNumber.toString()}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "app-switch", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<label for=\"toggle\" class=\"flex items-center cursor-pointer\">-->\n<!--  <div class=\"relative\">-->\n<!--    <input id=\"toggle\" type=\"checkbox\" class=\"sr-only peer\" [checked]=\"checked()\" (change)=\"toggleSwitch()\">-->\n<!--    <div class=\"w-16 h-8 bg-gray-100 rounded-full shadow-inner\"></div>-->\n<!--    <span-->\n<!--      class=\"absolute left-1 top-1 w-2/5 h-4/5 bg-primary-500 rounded-full peer-checked:bg-primary-500 peer-checked:left-8 transition-all duration-300\"></span>-->\n<!--  </div>-->\n<!--  <div class=\"ml-3 text-gray-700 font-medium\">Toggle</div>-->\n<!--</label>-->\n\n<!--<div class=\"flex items-center cursor-pointer\">-->\n<!--  <label id=\"id()\" class=\"flex items-center m-0\">-->\n<!--    <div class=\"relative\">-->\n<!--      <input [id]=\"id()\" type=\"checkbox\" class=\"sr-only peer\"-->\n<!--             [checked]=\"formControl.value\"-->\n<!--             (change)=\"onSwitchSelected($event)\">-->\n<!--      <div class=\"w-16 h-8 bg-gray-100 peer-checked:bg-primary-50 rounded-full shadow-inner\"></div>-->\n<!--      <span-->\n<!--        class=\"w-2/5 h-4/5 bg-primary-500 absolute rounded-full left-1 top-1 peer-checked:bg-primary-500 transition-all duration-300\"-->\n<!--        [ngClass]=\"formControl.value ? 'translate-x-7' : 'translate-x-0'\">-->\n<!--    </span>-->\n<!--    </div>-->\n<!--    @if (title()) {-->\n<!--      <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>-->\n<!--    }-->\n<!--  </label>-->\n<!--</div>-->\n\n\n<div class=\"flex items-center\">\n  <label [for]=\"id()\" class=\"flex m-0 items-center cursor-pointer\">\n    <!-- Toggle Switch -->\n    <div class=\"relative\">\n      <input type=\"checkbox\" [id]=\"id()\" [name]=\"id()\"\n             class=\"sr-only\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onSwitchSelected($event)\"/>\n      <div class=\"toggle-bg peer-checked:bg-primary-500\">\n        <div class=\"dot\">\n        </div>\n      </div>\n    </div>\n    @if (title()) {\n      <span class=\"toggle-label text-sm text-gray-700\">{{ title() }}</span>\n    }\n  </label>\n</div>\n", styles: [".toggle-bg{position:relative;display:inline-block;width:56px;height:32px;background-color:#d1d5db;border-radius:16px;transition:background-color .3s ease}.toggle-bg .dot{position:absolute;top:2px;left:2px;width:28px;height:28px;background-color:#fff;border-radius:50%;transition:transform .3s ease}input:checked+.toggle-bg .dot{transform:translate(24px)}.toggle-label{margin-left:.5rem;font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SwitchComponent, isStandalone: true, selector: "app-switch", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<label for=\"toggle\" class=\"flex items-center cursor-pointer\">-->\n<!--  <div class=\"relative\">-->\n<!--    <input id=\"toggle\" type=\"checkbox\" class=\"sr-only peer\" [checked]=\"checked()\" (change)=\"toggleSwitch()\">-->\n<!--    <div class=\"w-16 h-8 bg-gray-100 rounded-full shadow-inner\"></div>-->\n<!--    <span-->\n<!--      class=\"absolute left-1 top-1 w-2/5 h-4/5 bg-primary-500 rounded-full peer-checked:bg-primary-500 peer-checked:left-8 transition-all duration-300\"></span>-->\n<!--  </div>-->\n<!--  <div class=\"ml-3 text-gray-700 font-medium\">Toggle</div>-->\n<!--</label>-->\n\n<!--<div class=\"flex items-center cursor-pointer\">-->\n<!--  <label id=\"id()\" class=\"flex items-center m-0\">-->\n<!--    <div class=\"relative\">-->\n<!--      <input [id]=\"id()\" type=\"checkbox\" class=\"sr-only peer\"-->\n<!--             [checked]=\"formControl.value\"-->\n<!--             (change)=\"onSwitchSelected($event)\">-->\n<!--      <div class=\"w-16 h-8 bg-gray-100 peer-checked:bg-primary-50 rounded-full shadow-inner\"></div>-->\n<!--      <span-->\n<!--        class=\"w-2/5 h-4/5 bg-primary-500 absolute rounded-full left-1 top-1 peer-checked:bg-primary-500 transition-all duration-300\"-->\n<!--        [ngClass]=\"formControl.value ? 'translate-x-7' : 'translate-x-0'\">-->\n<!--    </span>-->\n<!--    </div>-->\n<!--    @if (title()) {-->\n<!--      <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>-->\n<!--    }-->\n<!--  </label>-->\n<!--</div>-->\n\n\n<div class=\"flex items-center\">\n  <label [for]=\"id()\" class=\"flex m-0 items-center cursor-pointer\">\n    <!-- Toggle Switch -->\n    <div class=\"relative\">\n      <input type=\"checkbox\" [id]=\"id()\" [name]=\"id()\"\n             class=\"sr-only\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onSwitchSelected($event)\"/>\n      <div class=\"toggle-bg peer-checked:bg-primary-500\">\n        <div class=\"dot\">\n        </div>\n      </div>\n    </div>\n    @if (title()) {\n      <span class=\"toggle-label text-sm text-gray-700\">{{ title() }}</span>\n    }\n  </label>\n</div>\n", styles: [".toggle-bg{position:relative;display:inline-block;width:56px;height:32px;background-color:#d1d5db;border-radius:16px;transition:background-color .3s ease}.toggle-bg .dot{position:absolute;top:2px;left:2px;width:28px;height:28px;background-color:#fff;border-radius:50%;transition:transform .3s ease}input:checked+.toggle-bg .dot{transform:translate(24px)}.toggle-label{margin-left:.5rem;font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-switch', standalone: true, imports: [
                         ReactiveFormsModule
                     ], template: "<!--<label for=\"toggle\" class=\"flex items-center cursor-pointer\">-->\n<!--  <div class=\"relative\">-->\n<!--    <input id=\"toggle\" type=\"checkbox\" class=\"sr-only peer\" [checked]=\"checked()\" (change)=\"toggleSwitch()\">-->\n<!--    <div class=\"w-16 h-8 bg-gray-100 rounded-full shadow-inner\"></div>-->\n<!--    <span-->\n<!--      class=\"absolute left-1 top-1 w-2/5 h-4/5 bg-primary-500 rounded-full peer-checked:bg-primary-500 peer-checked:left-8 transition-all duration-300\"></span>-->\n<!--  </div>-->\n<!--  <div class=\"ml-3 text-gray-700 font-medium\">Toggle</div>-->\n<!--</label>-->\n\n<!--<div class=\"flex items-center cursor-pointer\">-->\n<!--  <label id=\"id()\" class=\"flex items-center m-0\">-->\n<!--    <div class=\"relative\">-->\n<!--      <input [id]=\"id()\" type=\"checkbox\" class=\"sr-only peer\"-->\n<!--             [checked]=\"formControl.value\"-->\n<!--             (change)=\"onSwitchSelected($event)\">-->\n<!--      <div class=\"w-16 h-8 bg-gray-100 peer-checked:bg-primary-50 rounded-full shadow-inner\"></div>-->\n<!--      <span-->\n<!--        class=\"w-2/5 h-4/5 bg-primary-500 absolute rounded-full left-1 top-1 peer-checked:bg-primary-500 transition-all duration-300\"-->\n<!--        [ngClass]=\"formControl.value ? 'translate-x-7' : 'translate-x-0'\">-->\n<!--    </span>-->\n<!--    </div>-->\n<!--    @if (title()) {-->\n<!--      <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>-->\n<!--    }-->\n<!--  </label>-->\n<!--</div>-->\n\n\n<div class=\"flex items-center\">\n  <label [for]=\"id()\" class=\"flex m-0 items-center cursor-pointer\">\n    <!-- Toggle Switch -->\n    <div class=\"relative\">\n      <input type=\"checkbox\" [id]=\"id()\" [name]=\"id()\"\n             class=\"sr-only\"\n             [disabled]=\"formControl.disabled\"\n             [checked]=\"formControl.value\"\n             (change)=\"onSwitchSelected($event)\"/>\n      <div class=\"toggle-bg peer-checked:bg-primary-500\">\n        <div class=\"dot\">\n        </div>\n      </div>\n    </div>\n    @if (title()) {\n      <span class=\"toggle-label text-sm text-gray-700\">{{ title() }}</span>\n    }\n  </label>\n</div>\n", styles: [".toggle-bg{position:relative;display:inline-block;width:56px;height:32px;background-color:#d1d5db;border-radius:16px;transition:background-color .3s ease}.toggle-bg .dot{position:absolute;top:2px;left:2px;width:28px;height:28px;background-color:#fff;border-radius:50%;transition:transform .3s ease}input:checked+.toggle-bg .dot{transform:translate(24px)}.toggle-label{margin-left:.5rem;font-size:.875rem;font-weight:500}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { valueChanged: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], valueChanged: [{
                 type: Output
-            }] } });
+            }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
 
 class TextAreaInputComponent extends BaseControlValueAccessor {
-    appearance = input('outline');
-    type = input('text');
-    viewType = input('text');
-    label = input.required();
-    fullWidth = input(true);
-    placeholder = input('');
-    rows = input(4);
-    errorMessages = input({});
-    showErrorSpace = input(false);
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
     changeValue = output();
     ngControl = inject(NgControl, { optional: true, self: true });
     constructor() {
@@ -6197,34 +6197,34 @@ class TextAreaInputComponent extends BaseControlValueAccessor {
     }
     onWriteValue(obj) {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextAreaInputComponent, isStandalone: true, selector: "app-text-area-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    <textarea\n      class=\"w-full p-2 placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition duration-300\"\n              [formControl]=\"formControl\"\n\n              [rows]=\"rows()\"\n              [placeholder]=\"placeholder()\"\n              (blur)=\"onTouched()\"\n              (input)=\"onValueChange($event)\">\n  </textarea>\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TextAreaInputComponent, isStandalone: true, selector: "app-text-area-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    <textarea\n      class=\"w-full p-2 placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition duration-300\"\n              [formControl]=\"formControl\"\n\n              [rows]=\"rows()\"\n              [placeholder]=\"placeholder()\"\n              (blur)=\"onTouched()\"\n              (input)=\"onValueChange($event)\">\n  </textarea>\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextAreaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextAreaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-text-area-input', standalone: true, imports: [
                         ReactiveFormsModule,
                         HumanizeFormMessagesPipe,
                         BaseInputComponent
                     ], template: "<app-base-input [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    <textarea\n      class=\"w-full p-2 placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition duration-300\"\n              [formControl]=\"formControl\"\n\n              [rows]=\"rows()\"\n              [placeholder]=\"placeholder()\"\n              (blur)=\"onTouched()\"\n              (input)=\"onValueChange($event)\">\n  </textarea>\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }] } });
 
 class TimePickerComponent extends BaseControlValueAccessorV2 {
     overlay = inject(Overlay);
-    iconSrc = input();
-    fullWidth = input(false);
-    showErrorSpace = input(false);
-    showTimePickerIcon = input(true);
+    iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
+    showTimePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showTimePickerIcon" }] : []));
     valueChanged = output();
     scrollStrategy = this.overlay.scrollStrategies.block();
-    isOpen = signal(false);
-    errorMessages = signal({});
-    enableApplyActions = signal(false);
-    hours = signal(12);
-    minutes = signal(0);
-    period = signal('AM');
-    is24HourFormat = signal(false);
-    isFocused = signal(false);
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    enableApplyActions = signal(false, ...(ngDevMode ? [{ debugName: "enableApplyActions" }] : []));
+    hours = signal(12, ...(ngDevMode ? [{ debugName: "hours" }] : []));
+    minutes = signal(0, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+    period = signal('AM', ...(ngDevMode ? [{ debugName: "period" }] : []));
+    is24HourFormat = signal(false, ...(ngDevMode ? [{ debugName: "is24HourFormat" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
     handleHourUpdate = false;
     previousValidHours = 12;
     previousValidMinutes = 0;
@@ -6399,10 +6399,10 @@ class TimePickerComponent extends BaseControlValueAccessorV2 {
     onClickOutside() {
         this.isOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TimePickerComponent, isStandalone: true, selector: "app-time-picker", inputs: { iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, showTimePickerIcon: { classPropertyName: "showTimePickerIcon", publicName: "showTimePickerIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<app-base-input>\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"'00:00'\"\n      [showMaskTyped]=\"isFocused()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      (focus)=\"onFocus()\"\n      [ngClass]=\"getClass()\"\n      [placeholder]=\"'HH:MM'\"\n      (blur)=\"onBlur()\">\n\n\n    @if (showTimePickerIcon()) {\n      <div #timePickerIcon (click)=\"onTimePickerIconClick()\" class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n\n        <svg class=\"w-[18px] h-[18px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    }\n\n    <ng-template cdkPortal>\n\n    </ng-template>\n\n<!--    <ng-template cdkConnectedOverlay-->\n<!--                 [cdkConnectedOverlayOrigin]=\"timePickerIcon\"-->\n<!--                 [cdkConnectedOverlayOpen]=\"isOpen()\"-->\n<!--                 (overlayOutsideClick)=\"onClickOutside()\"-->\n<!--                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"-->\n<!--                 [cdkConnectedOverlayPositions]=\"[-->\n<!--                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},-->\n<!--                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}-->\n<!--                     ]\"-->\n<!--                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"-->\n<!--                 [cdkConnectedOverlayOffsetY]=\"10\">-->\n<!--    </ng-template>-->\n  </div>\n\n\n</app-base-input>\n\n<div class=\"flex flex-col gap-3\">\n  <div class=\"flex items-center\">\n      <app-checkbox title=\"24H\" (valueChanged)=\"toggle24HourFormat($event)\"></app-checkbox>\n  </div>\n\n  <div class=\"flex items-center gap-6\">\n    <!-- Hour Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onHourUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedHours()\"\n             (blur)=\"validateHours($event)\"\n             type=\"number\">\n\n      <div (click)=\"onHourDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <span class=\"text-body1 select-none\">:</span>\n\n    <!-- Minute Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onMinuteUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedMinutes()\"\n             (blur)=\"validateMinutes($event)\"\n             type=\"number\">\n\n      <div (click)=\"onMinuteDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle (Hide when 24-hour is selected) -->\n    @if(!is24HourFormat()) {\n      <div class=\"flex gap-3\">\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'AM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">AM</span>\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'PM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">PM</span>\n      </div>\n    }\n  </div>\n\n  @if(enableApplyActions()) {\n    <div class=\"flex items-center justify-between\">\n      <button class=\"py-2 text-primary-500 rounded-md transition-all duration-300\">Cancel</button>\n      <button class=\"px-4 py-2 text-white bg-primary-500 rounded-md hover:bg-primary-600 transition-all duration-300\">Apply</button>\n    </div>\n  }\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: ["@tailwind utilities;@layer utilities{input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{@apply appearance-none;}input[type=number]{-moz-appearance:textfield}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TimePickerComponent, isStandalone: true, selector: "app-time-picker", inputs: { iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, showTimePickerIcon: { classPropertyName: "showTimePickerIcon", publicName: "showTimePickerIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<app-base-input>\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"'00:00'\"\n      [showMaskTyped]=\"isFocused()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      (focus)=\"onFocus()\"\n      [ngClass]=\"getClass()\"\n      [placeholder]=\"'HH:MM'\"\n      (blur)=\"onBlur()\">\n\n\n    @if (showTimePickerIcon()) {\n      <div #timePickerIcon (click)=\"onTimePickerIconClick()\" class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n\n        <svg class=\"w-[18px] h-[18px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    }\n\n    <ng-template cdkPortal>\n\n    </ng-template>\n\n<!--    <ng-template cdkConnectedOverlay-->\n<!--                 [cdkConnectedOverlayOrigin]=\"timePickerIcon\"-->\n<!--                 [cdkConnectedOverlayOpen]=\"isOpen()\"-->\n<!--                 (overlayOutsideClick)=\"onClickOutside()\"-->\n<!--                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"-->\n<!--                 [cdkConnectedOverlayPositions]=\"[-->\n<!--                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},-->\n<!--                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}-->\n<!--                     ]\"-->\n<!--                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"-->\n<!--                 [cdkConnectedOverlayOffsetY]=\"10\">-->\n<!--    </ng-template>-->\n  </div>\n\n\n</app-base-input>\n\n<div class=\"flex flex-col gap-3\">\n  <div class=\"flex items-center\">\n      <app-checkbox title=\"24H\" (valueChanged)=\"toggle24HourFormat($event)\"></app-checkbox>\n  </div>\n\n  <div class=\"flex items-center gap-6\">\n    <!-- Hour Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onHourUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedHours()\"\n             (blur)=\"validateHours($event)\"\n             type=\"number\">\n\n      <div (click)=\"onHourDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <span class=\"text-body1 select-none\">:</span>\n\n    <!-- Minute Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onMinuteUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedMinutes()\"\n             (blur)=\"validateMinutes($event)\"\n             type=\"number\">\n\n      <div (click)=\"onMinuteDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle (Hide when 24-hour is selected) -->\n    @if(!is24HourFormat()) {\n      <div class=\"flex gap-3\">\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'AM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">AM</span>\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'PM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">PM</span>\n      </div>\n    }\n  </div>\n\n  @if(enableApplyActions()) {\n    <div class=\"flex items-center justify-between\">\n      <button class=\"py-2 text-primary-500 rounded-md transition-all duration-300\">Cancel</button>\n      <button class=\"px-4 py-2 text-white bg-primary-500 rounded-md hover:bg-primary-600 transition-all duration-300\">Apply</button>\n    </div>\n  }\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: ["@tailwind utilities;@layer utilities{input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{@apply appearance-none;}input[type=number]{-moz-appearance:textfield}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-time-picker', standalone: true, imports: [
                         NgClass,
@@ -6415,7 +6415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CdkPortal,
                         AppSvgIconComponent
                     ], template: "<app-base-input>\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"'00:00'\"\n      [showMaskTyped]=\"isFocused()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      (focus)=\"onFocus()\"\n      [ngClass]=\"getClass()\"\n      [placeholder]=\"'HH:MM'\"\n      (blur)=\"onBlur()\">\n\n\n    @if (showTimePickerIcon()) {\n      <div #timePickerIcon (click)=\"onTimePickerIconClick()\" class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n\n        <svg class=\"w-[18px] h-[18px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    }\n\n    <ng-template cdkPortal>\n\n    </ng-template>\n\n<!--    <ng-template cdkConnectedOverlay-->\n<!--                 [cdkConnectedOverlayOrigin]=\"timePickerIcon\"-->\n<!--                 [cdkConnectedOverlayOpen]=\"isOpen()\"-->\n<!--                 (overlayOutsideClick)=\"onClickOutside()\"-->\n<!--                 [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"-->\n<!--                 [cdkConnectedOverlayPositions]=\"[-->\n<!--                        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},-->\n<!--                        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}-->\n<!--                     ]\"-->\n<!--                 [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"-->\n<!--                 [cdkConnectedOverlayOffsetY]=\"10\">-->\n<!--    </ng-template>-->\n  </div>\n\n\n</app-base-input>\n\n<div class=\"flex flex-col gap-3\">\n  <div class=\"flex items-center\">\n      <app-checkbox title=\"24H\" (valueChanged)=\"toggle24HourFormat($event)\"></app-checkbox>\n  </div>\n\n  <div class=\"flex items-center gap-6\">\n    <!-- Hour Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onHourUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedHours()\"\n             (blur)=\"validateHours($event)\"\n             type=\"number\">\n\n      <div (click)=\"onHourDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <span class=\"text-body1 select-none\">:</span>\n\n    <!-- Minute Controls -->\n    <div class=\"flex flex-col items-center gap-2\">\n      <div (click)=\"onMinuteUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n\n      <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n             [value]=\"getFormattedMinutes()\"\n             (blur)=\"validateMinutes($event)\"\n             type=\"number\">\n\n      <div (click)=\"onMinuteDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n        <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle (Hide when 24-hour is selected) -->\n    @if(!is24HourFormat()) {\n      <div class=\"flex gap-3\">\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'AM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">AM</span>\n        <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n              [ngClass]=\"period() === 'PM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n              (click)=\"togglePeriod()\">PM</span>\n      </div>\n    }\n  </div>\n\n  @if(enableApplyActions()) {\n    <div class=\"flex items-center justify-between\">\n      <button class=\"py-2 text-primary-500 rounded-md transition-all duration-300\">Cancel</button>\n      <button class=\"px-4 py-2 text-white bg-primary-500 rounded-md hover:bg-primary-600 transition-all duration-300\">Apply</button>\n    </div>\n  }\n</div>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mb-3\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mb-3\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: ["@tailwind utilities;@layer utilities{input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{@apply appearance-none;}input[type=number]{-moz-appearance:textfield}}\n"] }]
-        }] });
+        }], propDecorators: { iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], showTimePickerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePickerIcon", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 class DateUtils {
     convertToMMDDYYYY(dateString) {
@@ -6621,10 +6621,10 @@ class NglService {
     getBaseUrl() {
         return this.config.baseApiUrl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NglService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NglService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NglService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NglService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NglService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NglService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'