npm - ng-tailwind - Versions diffs - 4.1.8 → 4.1.9 - Mend

ng-tailwind 4.1.8 → 4.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/fesm2020/ng-tailwind.mjs CHANGED Viewed

@@ -497,9 +497,9 @@ class NgtStylizableDirective {
         return this.ngtStylizableService;
     }
 }
-NgtStylizableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtStylizableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: { color: "color", textColor: ["color.text", "textColor"], bgColor: ["color.bg", "bgColor"], borderColor: ["color.border", "borderColor"], h: "h", w: "w", p: "p", px: "px", py: "py", pt: "pt", pr: "pr", pb: "pb", pl: "pl", m: "m", mx: "mx", my: "my", mt: "mt", mr: "mr", mb: "mb", ml: "ml", border: "border", shadow: "shadow", rounded: "rounded", font: "font", text: "text", breakWords: "breakWords", overflow: "overflow", position: "position", justifyContent: "justifyContent", cursor: "cursor", fontCase: "fontCase" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableDirective, decorators: [{
+NgtStylizableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtStylizableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: { color: "color", textColor: ["color.text", "textColor"], bgColor: ["color.bg", "bgColor"], borderColor: ["color.border", "borderColor"], h: "h", w: "w", p: "p", px: "px", py: "py", pt: "pt", pr: "pr", pb: "pb", pl: "pl", m: "m", mx: "mx", my: "my", mt: "mt", mr: "mr", mb: "mb", ml: "ml", border: "border", shadow: "shadow", rounded: "rounded", font: "font", text: "text", breakWords: "breakWords", overflow: "overflow", position: "position", justifyContent: "justifyContent", cursor: "cursor", fontCase: "fontCase" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngt-stylizable]'
@@ -601,10 +601,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtStylizableModule {
 }
-NgtStylizableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtStylizableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableModule, declarations: [NgtStylizableDirective], imports: [CommonModule], exports: [NgtStylizableDirective] });
-NgtStylizableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtStylizableModule, decorators: [{
+NgtStylizableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtStylizableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableModule, declarations: [NgtStylizableDirective], imports: [CommonModule], exports: [NgtStylizableDirective] });
+NgtStylizableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtStylizableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtStylizableDirective],
@@ -648,9 +648,9 @@ class NgtSvgComponent {
         }
     }
 }
-NgtSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSvgComponent, selector: "ngt-svg", inputs: { src: "src", class: "class" }, host: { classAttribute: "flex justify-center" }, viewQueries: [{ propertyName: "svgIconElement", first: true, predicate: SvgIconComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<svg-icon [src]='src' class=\"flex {{ class }}\"></svg-icon>\n", styles: ["svg{height:1rem}.text-xs svg{height:.75rem}.text-sm svg{height:.875rem}.text-base svg{height:1rem}.text-lg svg{height:1.125rem}.text-xl svg{height:1.25rem}.text-2xl svg{height:1.5rem}.text-3xl svg{height:1.875rem}.text-4xl svg{height:2.25rem}.text-5xl svg{height:3rem}.text-6xl svg{height:4rem}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["stretch", "applyClass", "applyCss", "svgStyle", "src", "name", "svgClass", "class", "viewBox", "svgAriaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgComponent, decorators: [{
+NgtSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtSvgComponent, selector: "ngt-svg", inputs: { src: "src", class: "class" }, host: { classAttribute: "flex justify-center" }, viewQueries: [{ propertyName: "svgIconElement", first: true, predicate: SvgIconComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<svg-icon [src]='src' class=\"flex {{ class }}\"></svg-icon>\n", styles: ["svg{height:1rem}.text-xs svg{height:.75rem}.text-sm svg{height:.875rem}.text-base svg{height:1rem}.text-lg svg{height:1.125rem}.text-xl svg{height:1.25rem}.text-2xl svg{height:1.5rem}.text-3xl svg{height:1.875rem}.text-4xl svg{height:2.25rem}.text-5xl svg{height:3rem}.text-6xl svg{height:4rem}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["stretch", "applyClass", "applyCss", "svgStyle", "src", "name", "svgClass", "class", "viewBox", "svgAriaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-svg', host: {
                         class: 'flex justify-center'
@@ -666,13 +666,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtSvgModule {
 }
-NgtSvgModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtSvgModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgModule, declarations: [NgtSvgComponent], imports: [CommonModule,
+NgtSvgModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtSvgModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgModule, declarations: [NgtSvgComponent], imports: [CommonModule,
         HttpClientModule, i1.AngularSvgIconModule], exports: [NgtSvgComponent] });
-NgtSvgModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgModule, imports: [CommonModule,
+NgtSvgModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgModule, imports: [CommonModule,
         HttpClientModule,
         AngularSvgIconModule.forRoot()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSvgModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSvgModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtSvgComponent],
@@ -713,9 +713,9 @@ class NgtActionComponent {
         }
     }
 }
-NgtActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtActionComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtActionComponent, selector: "ngt-action", inputs: { href: "href", icon: "icon", ngtStyle: "ngtStyle", isDisabled: "isDisabled" }, ngImport: i0, template: "<a *ngIf=\"href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    [routerLink]=\"href\" (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\">\n        </ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n\n<a *ngIf=\"!href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text', 'border', 'color.border']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\"></ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtActionComponent, decorators: [{
+NgtActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtActionComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtActionComponent, selector: "ngt-action", inputs: { href: "href", icon: "icon", ngtStyle: "ngtStyle", isDisabled: "isDisabled" }, ngImport: i0, template: "<a *ngIf=\"href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    [routerLink]=\"href\" (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\">\n        </ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n\n<a *ngIf=\"!href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text', 'border', 'color.border']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\"></ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-action', template: "<a *ngIf=\"href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    [routerLink]=\"href\" (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\">\n        </ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n\n<a *ngIf=\"!href\"\n    [class]=\"isDisabled ? 'block rounded-full cursor-not-allowed text-gray-600 bg-gray-400 hover:bg-gray-400 opacity-50' : 'cursor-pointer'\"\n    (click)='onClick($event)'>\n    <div\n        class=\"flex justify-center rounded-full {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py', 'shadow', 'text', 'border', 'color.border']) }}\">\n        <ngt-svg [src]=\"icon\" class='self-center' *ngIf=\"icon\"></ngt-svg>\n        <div class=\"self-center\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</a>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -734,14 +734,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtActionModule {
 }
-NgtActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtActionModule, declarations: [NgtActionComponent], imports: [CommonModule,
+NgtActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtActionModule, declarations: [NgtActionComponent], imports: [CommonModule,
         RouterModule,
         NgtSvgModule], exports: [NgtActionComponent] });
-NgtActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtActionModule, imports: [CommonModule,
+NgtActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtActionModule, imports: [CommonModule,
         RouterModule,
         NgtSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtActionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtActionComponent],
@@ -779,9 +779,9 @@ class NgtDropdownContainerComponent {
         this.onActiveDropdownChange.emit(activeDropdown);
     }
 }
-NgtDropdownContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropdownContainerComponent, selector: "[ngt-dropdown-container]", outputs: { onActiveDropdownChange: "onActiveDropdownChange" }, ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownContainerComponent, decorators: [{
+NgtDropdownContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDropdownContainerComponent, selector: "[ngt-dropdown-container]", outputs: { onActiveDropdownChange: "onActiveDropdownChange" }, ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-dropdown-container]', template: "<ng-content></ng-content>" }]
         }], propDecorators: { onActiveDropdownChange: [{
@@ -789,16 +789,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }] } });
 class NgtDropdownComponent {
-    constructor(ngtDropdownContainer) {
+    constructor(ngtDropdownContainer, changeDetector) {
         this.ngtDropdownContainer = ngtDropdownContainer;
+        this.changeDetector = changeDetector;
         this.autoYReverse = true;
         this.closeTimeout = 1000;
         this.openMethod = NgtDropdownOpenMethod.HOVER;
         this.onToggle = new EventEmitter();
         this.onHostClick = new EventEmitter();
         this.name = uuid();
-        this.isYPositionReversed = false;
-        this.isXPositionReversed = false;
         this.isBindingYPosition = true;
         this.isBindingXPosition = true;
         this.subscriptions = [];
@@ -819,6 +818,9 @@ class NgtDropdownComponent {
     open() {
         this.isOpen = true;
         this.ngtDropdownContainer?.setActiveDropdown(this);
+        this.changeDetector.detectChanges();
+        this.bindContainerXPosition();
+        this.bindContainerYPosition();
     }
     closeOnSelectOption() {
         if (this.closeOnClick) {
@@ -869,20 +871,18 @@ class NgtDropdownComponent {
         if (!this.autoXReverse || this.reverseXPosition !== undefined) {
             return this.reverseXPosition;
         }
-        if (this.isOpen) {
-            this.bindContainerXPosition();
+        if (this.isOpen && !this.isBindingXPosition) {
             this.isXPositionReversed = !(this.containerXPosition > document.documentElement.clientWidth);
-            return !this.isBindingXPosition && this.isXPositionReversed;
+            return this.isXPositionReversed;
         }
     }
     shouldReverseYPosition() {
         if (!this.autoYReverse || this.reverseYPosition !== undefined) {
             return this.reverseYPosition;
         }
-        if (this.isOpen) {
-            this.bindContainerYPosition();
+        if (this.isOpen && !this.isBindingYPosition) {
             this.isYPositionReversed = this.containerYPosition > (document.documentElement.clientHeight * 0.9);
-            return !this.isBindingYPosition && this.isYPositionReversed;
+            return this.isYPositionReversed;
         }
     }
     bindContainerXPosition() {
@@ -892,6 +892,7 @@ class NgtDropdownComponent {
                 this.containerXPosition = this.containerRef.nativeElement.getBoundingClientRect().x
                     + this.containerRef.nativeElement.offsetWidth;
                 this.isBindingXPosition = false;
+                this.changeDetector.detectChanges();
             });
         }
     }
@@ -902,6 +903,7 @@ class NgtDropdownComponent {
                 this.containerYPosition = this.containerRef.nativeElement.getBoundingClientRect().y
                     + this.containerRef.nativeElement.offsetHeight;
                 this.isBindingYPosition = false;
+                this.changeDetector.detectChanges();
             });
         }
     }
@@ -926,8 +928,8 @@ class NgtDropdownComponent {
             || this.openMethod == NgtDropdownOpenMethod.POPOVER_CLICK;
     }
 }
-NgtDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownComponent, deps: [{ token: NgtDropdownContainerComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: { autoXReverse: "autoXReverse", autoYReverse: "autoYReverse", reverseXPosition: "reverseXPosition", reverseYPosition: "reverseYPosition", closeOnClick: "closeOnClick", closeTimeout: "closeTimeout", openMethod: "openMethod" }, outputs: { onToggle: "onToggle", onHostClick: "onHostClick" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\" (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <ng-content select='[container]'></ng-content>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>\n", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+NgtDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownComponent, deps: [{ token: NgtDropdownContainerComponent, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NgtDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: { scrollable: "scrollable", autoXReverse: "autoXReverse", autoYReverse: "autoYReverse", reverseXPosition: "reverseXPosition", reverseYPosition: "reverseYPosition", closeOnClick: "closeOnClick", closeTimeout: "closeTimeout", openMethod: "openMethod" }, outputs: { onToggle: "onToggle", onHostClick: "onHostClick" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-64 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('openClose', [
             state('open', style({ opacity: 1, transform: 'translateY(0px)' })),
             state('closed', style({ opacity: 0, transform: 'translateY(-10px)' })),
@@ -936,7 +938,7 @@ NgtDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             ]),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-dropdown', animations: [
                         trigger('openClose', [
@@ -946,14 +948,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                                 animate(300)
                             ]),
                         ]),
-                    ], template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\" (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <ng-content select='[container]'></ng-content>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>\n", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"] }]
+                    ], template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-64 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"] }]
         }], ctorParameters: function () { return [{ type: NgtDropdownContainerComponent, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }]; }, propDecorators: { containerRef: [{
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
+            }], scrollable: [{
+                type: Input
             }], autoXReverse: [{
                 type: Input
             }], autoYReverse: [{
@@ -1005,9 +1009,9 @@ class NgtHelperComponent {
         });
     }
 }
-NgtHelperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgtHelperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtHelperComponent, selector: "ngt-helper", inputs: { helpTextColor: "helpTextColor", helpText: "helpText", helpTitle: "helpTitle", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", iconTitle: "iconTitle", tooltipSize: "tooltipSize", autoXReverse: "autoXReverse" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"true\" [autoXReverse]=\"autoXReverse\" #dropdownRef>\n    <div class=\"flex rounded-full {{ iconColor ?? 'text-green-500'}} {{ ngtStyle.compile(['px', 'text']) }}\" style=\"cursor: help;\"\n        host>\n        <ngt-svg *ngIf=\"icon\" [class]=\"iconSize\" [src]=\"icon\" style=\"cursor: help;\"></ngt-svg>\n\n        <div *ngIf=\"!icon\" style=\"cursor: help;\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n                <path class=\"fill-current\"\n                    d=\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\" />\n            </svg>\n        </div>\n\n        <p *ngIf=\"helpText\" class=\"cursor-pointer {{helpTextColor}}\" style=\"margin-left: 2px\">{{helpText}}</p>\n    </div>\n\n    <div class=\"bg-gray-100 rounded-lg hover:opacity-100 text-gray-800 {{tooltipSize}} shadow-lg {{ ngtStyle.compile(['text', 'fontCase']) }}\"\n        [class.-mb-4]='dropdownRef.isYPositionReversed' container>\n        <div\n            class=\"{{ ngtStyle.compile(['color.bg', 'color.text']) }} flex justify-center rounded-t-lg hover:opacity-100 font-semibold border-b border-dashed border-gray-400 text-center px-6 py-1\">\n            <ngt-svg *ngIf=\"iconTitle\" [src]=\"iconTitle\" style=\"margin-right: 3px\"></ngt-svg>\n            {{ helpTitle || ngtTranslateService.ngtStandardHelperTitle }}\n        </div>\n        <div class=\"px-2 py-1 text-center hover:opacity-100\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ngt-dropdown>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: ["autoXReverse", "autoYReverse", "reverseXPosition", "reverseYPosition", "closeOnClick", "closeTimeout", "openMethod"], outputs: ["onToggle", "onHostClick"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperComponent, decorators: [{
+NgtHelperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgtHelperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtHelperComponent, selector: "ngt-helper", inputs: { helpTextColor: "helpTextColor", helpText: "helpText", helpTitle: "helpTitle", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", iconTitle: "iconTitle", tooltipSize: "tooltipSize", autoXReverse: "autoXReverse" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"true\" [autoXReverse]=\"autoXReverse\" #dropdownRef>\n    <div class=\"flex rounded-full {{ iconColor ?? 'text-green-500'}} {{ ngtStyle.compile(['px', 'text']) }}\" style=\"cursor: help;\"\n        host>\n        <ngt-svg *ngIf=\"icon\" [class]=\"iconSize\" [src]=\"icon\" style=\"cursor: help;\"></ngt-svg>\n\n        <div *ngIf=\"!icon\" style=\"cursor: help;\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n                <path class=\"fill-current\"\n                    d=\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\" />\n            </svg>\n        </div>\n\n        <p *ngIf=\"helpText\" class=\"cursor-pointer {{helpTextColor}}\" style=\"margin-left: 2px\">{{helpText}}</p>\n    </div>\n\n    <div class=\"bg-gray-100 rounded-lg hover:opacity-100 text-gray-800 {{tooltipSize}} shadow-lg {{ ngtStyle.compile(['text', 'fontCase']) }}\"\n        [class.-mb-4]='dropdownRef.isYPositionReversed' container>\n        <div\n            class=\"{{ ngtStyle.compile(['color.bg', 'color.text']) }} flex justify-center rounded-t-lg hover:opacity-100 font-semibold border-b border-dashed border-gray-400 text-center px-6 py-1\">\n            <ngt-svg *ngIf=\"iconTitle\" [src]=\"iconTitle\" style=\"margin-right: 3px\"></ngt-svg>\n            {{ helpTitle || ngtTranslateService.ngtStandardHelperTitle }}\n        </div>\n        <div class=\"px-2 py-1 text-center hover:opacity-100\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ngt-dropdown>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: ["scrollable", "autoXReverse", "autoYReverse", "reverseXPosition", "reverseYPosition", "closeOnClick", "closeTimeout", "openMethod"], outputs: ["onToggle", "onHostClick"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-helper', encapsulation: ViewEncapsulation.None, template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"true\" [autoXReverse]=\"autoXReverse\" #dropdownRef>\n    <div class=\"flex rounded-full {{ iconColor ?? 'text-green-500'}} {{ ngtStyle.compile(['px', 'text']) }}\" style=\"cursor: help;\"\n        host>\n        <ngt-svg *ngIf=\"icon\" [class]=\"iconSize\" [src]=\"icon\" style=\"cursor: help;\"></ngt-svg>\n\n        <div *ngIf=\"!icon\" style=\"cursor: help;\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n                <path class=\"fill-current\"\n                    d=\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z\" />\n            </svg>\n        </div>\n\n        <p *ngIf=\"helpText\" class=\"cursor-pointer {{helpTextColor}}\" style=\"margin-left: 2px\">{{helpText}}</p>\n    </div>\n\n    <div class=\"bg-gray-100 rounded-lg hover:opacity-100 text-gray-800 {{tooltipSize}} shadow-lg {{ ngtStyle.compile(['text', 'fontCase']) }}\"\n        [class.-mb-4]='dropdownRef.isYPositionReversed' container>\n        <div\n            class=\"{{ ngtStyle.compile(['color.bg', 'color.text']) }} flex justify-center rounded-t-lg hover:opacity-100 font-semibold border-b border-dashed border-gray-400 text-center px-6 py-1\">\n            <ngt-svg *ngIf=\"iconTitle\" [src]=\"iconTitle\" style=\"margin-right: 3px\"></ngt-svg>\n            {{ helpTitle || ngtTranslateService.ngtStandardHelperTitle }}\n        </div>\n        <div class=\"px-2 py-1 text-center hover:opacity-100\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ngt-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: NgtStylizableDirective, decorators: [{
@@ -1041,10 +1045,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtDropdownModule {
 }
-NgtDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownModule, declarations: [NgtDropdownComponent, NgtDropdownContainerComponent], imports: [CommonModule], exports: [NgtDropdownComponent, NgtDropdownContainerComponent] });
-NgtDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownModule, decorators: [{
+NgtDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownModule, declarations: [NgtDropdownComponent, NgtDropdownContainerComponent], imports: [CommonModule], exports: [NgtDropdownComponent, NgtDropdownContainerComponent] });
+NgtDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtDropdownComponent, NgtDropdownContainerComponent],
@@ -1057,14 +1061,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtHelperModule {
 }
-NgtHelperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtHelperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperModule, declarations: [NgtHelperComponent], imports: [CommonModule,
+NgtHelperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtHelperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperModule, declarations: [NgtHelperComponent], imports: [CommonModule,
         NgtSvgModule,
         NgtDropdownModule], exports: [NgtHelperComponent] });
-NgtHelperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperModule, imports: [CommonModule,
+NgtHelperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperModule, imports: [CommonModule,
         NgtSvgModule,
         NgtDropdownModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHelperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHelperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtHelperComponent],
@@ -1093,9 +1097,9 @@ class NgtShiningComponent {
         });
     }
 }
-NgtShiningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtShiningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtShiningComponent, selector: "ngt-shining", inputs: { shiningWidth: "shiningWidth" }, ngImport: i0, template: "<div class=\"text-center w-full h-full ngt-shining-{{ shiningWidth }} {{ ngtStyle.compile(['rounded']) }}\"></div>", styles: [".ngt-shining-xs{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xs}.ngt-shining-sm{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-sm}.ngt-shining-lg{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-lg}.ngt-shining-xl{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xl}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningComponent, decorators: [{
+NgtShiningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtShiningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtShiningComponent, selector: "ngt-shining", inputs: { shiningWidth: "shiningWidth" }, ngImport: i0, template: "<div class=\"text-center w-full h-full ngt-shining-{{ shiningWidth }} {{ ngtStyle.compile(['rounded']) }}\"></div>", styles: [".ngt-shining-xs{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xs}.ngt-shining-sm{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-sm}.ngt-shining-lg{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-lg}.ngt-shining-xl{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xl}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-shining', template: "<div class=\"text-center w-full h-full ngt-shining-{{ shiningWidth }} {{ ngtStyle.compile(['rounded']) }}\"></div>", styles: [".ngt-shining-xs{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xs}.ngt-shining-sm{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-sm}.ngt-shining-lg{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-lg}.ngt-shining-xl{background:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:100%;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-name:shimmer-xl}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -1115,10 +1119,10 @@ var NgtShiningWidth;
 class NgtShiningModule {
 }
-NgtShiningModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtShiningModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningModule, declarations: [NgtShiningComponent], imports: [CommonModule], exports: [NgtShiningComponent] });
-NgtShiningModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtShiningModule, decorators: [{
+NgtShiningModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtShiningModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningModule, declarations: [NgtShiningComponent], imports: [CommonModule], exports: [NgtShiningComponent] });
+NgtShiningModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtShiningModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtShiningComponent],
@@ -1249,9 +1253,9 @@ class NgtFormValidationMessageComponent {
         this.ngtTranslateService = ngtTranslateService;
     }
 }
-NgtFormValidationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormValidationMessageComponent, deps: [{ token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtFormValidationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: { canShowValidationMessage: "canShowValidationMessage", message: "message" }, ngImport: i0, template: "<div *ngIf=\"canShowValidationMessage\" class=\"mb-5 p-2 rounded bg-red-500 text-white\">\n    {{ message || ngtTranslateService.ngtFormDefaultValidationMessage }}\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormValidationMessageComponent, decorators: [{
+NgtFormValidationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormValidationMessageComponent, deps: [{ token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtFormValidationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: { canShowValidationMessage: "canShowValidationMessage", message: "message" }, ngImport: i0, template: "<div *ngIf=\"canShowValidationMessage\" class=\"mb-5 p-2 rounded bg-red-500 text-white\">\n    {{ message || ngtTranslateService.ngtFormDefaultValidationMessage }}\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormValidationMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-form-validation-message', template: "<div *ngIf=\"canShowValidationMessage\" class=\"mb-5 p-2 rounded bg-red-500 text-white\">\n    {{ message || ngtTranslateService.ngtFormDefaultValidationMessage }}\n</div>" }]
         }], ctorParameters: function () { return [{ type: NgtTranslateService, decorators: [{
@@ -1402,9 +1406,9 @@ class NgtFormComponent {
     }
 }
 NgtFormComponent.onSubmitInvalidForm = new EventEmitter;
-NgtFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: i2$2.NgForm, host: true, optional: true }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: NgtHttpFormService }], target: i0.ɵɵFactoryTarget.Component });
-NgtFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtFormComponent, selector: "ngt-form", inputs: { guessFormState: "guessFormState", message: "message", routeIdentifier: "routeIdentifier", resource: "resource", customLayout: "customLayout" }, outputs: { onCreating: "onCreating", onEditing: "onEditing", onLoadingChange: "onLoadingChange", onShiningChange: "onShiningChange", setupComponent: "setupComponent", onResourceLoadingError: "onResourceLoadingError" }, ngImport: i0, template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: ["canShowValidationMessage", "message"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormComponent, decorators: [{
+NgtFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: i2$2.NgForm, host: true, optional: true }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: NgtHttpFormService }], target: i0.ɵɵFactoryTarget.Component });
+NgtFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtFormComponent, selector: "ngt-form", inputs: { guessFormState: "guessFormState", message: "message", routeIdentifier: "routeIdentifier", resource: "resource", customLayout: "customLayout" }, outputs: { onCreating: "onCreating", onEditing: "onEditing", onLoadingChange: "onLoadingChange", onShiningChange: "onShiningChange", setupComponent: "setupComponent", onResourceLoadingError: "onResourceLoadingError" }, ngImport: i0, template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: ["canShowValidationMessage", "message"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-form', template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i2$2.ControlContainer, decorators: [{
@@ -1526,8 +1530,8 @@ class NgtCheckboxComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxComponent, deps: [{ token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: { label: "label", shining: "shining", isDisabled: "isDisabled", isClickDisabled: "isClickDisabled", name: "name", mode: "mode", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText" }, providers: [
+NgtCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxComponent, deps: [{ token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: { label: "label", shining: "shining", isDisabled: "isDisabled", isClickDisabled: "isClickDisabled", name: "name", mode: "mode", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText" }, providers: [
         NgtMakeProvider(NgtCheckboxComponent)
     ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"flex items-center {{ isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n    [class.flex-col]='isToggleMode()' style=\"max-width: max-content;\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]=\"isDisabled || isClickDisabled\"\n        #element>\n\n    <span *ngIf=\"isToggleMode() && label\" class=\"flex\">\n        <span class=\"{{ ngtStyle.compile(['text', 'fontCase']) }} mb-2\">{{ label }}</span>\n\n        <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n            {{ helpText }}\n        </ngt-helper>\n    </span>\n\n    <ng-container *ngIf=\"isDefaultMode()\">\n        <div style=\"transition: background-color .2s ease-out\"\n            class=\"{{ value ? ngtStyle.compile(['color.bg']) : 'bg-white' }}  {{ ngtStyle.compile(['h', 'w']) }}\n                    shadow rounded border border-gray-400 {{ isDisabled ? 'opacity-50' : '' }} {{ !shining ? 'flex justify-center' : 'hidden' }}\">\n            <svg class=\"fill-current self-center text-white pointer-events-none\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\">\n                <path d=\"M0 11l2-2 5 5L18 3l2 2L7 18z\" />\n            </svg>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"isRadioMode()\">\n        <div style=\"transition: background-color .2s ease-out\"\n            class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }} {{ isDisabled ? 'opacity-50' : '' }}\n                    shadow w-6 h-6 rounded-full border-2 border-gray-400 {{ !shining ? 'flex justify-center' : 'hidden' }}\">\n            <svg *ngIf=\"value\" class=\"fill-current self-center h-3\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 29.107 29.107\">\n                <path\n                    d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n            </svg>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"isToggleMode() || isSideToggleMode()\">\n        <div class=\"shadow w-16 h-8 rounded-full border border-gray-400 {{ shining ? 'hidden' : 'flex' }}\"\n            [class.justify-end]=\"value\" [class.opacity-50]=\"isDisabled\" style=\"padding: 1px;\">\n            <div *ngIf=\"value\"\n                class=\"flex text-xs text-white {{ ngtStyle.compile(['color.bg']) }} pointer-events-none rounded-full px-2 py-3\"\n                @slideLeftToRight>\n                <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path d=\"M0 11l2-2 5 5L18 3l2 2L7 18z\" />\n                </svg>\n            </div>\n\n            <div *ngIf=\"!value\" class=\"flex text-xl text-white bg-gray-300 pointer-events-none rounded-full px-1 py-3\"\n                @slideRightToLeft>\n                <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path class=\"heroicon-ui\"\n                        d=\"M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z\" />\n                </svg>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf='label && !shining && !isToggleMode()'>\n        <span class=\"{{ ngtStyle.compile(['text', 'fontCase']) }} ml-2\">{{ label }}</span>\n\n        <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n            {{ helpText }}\n        </ngt-helper>\n    </ng-container>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
@@ -1545,7 +1549,7 @@ NgtCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-checkbox', providers: [
                         NgtMakeProvider(NgtCheckboxComponent)
@@ -1609,14 +1613,14 @@ var NgtCheckboxMode;
 class NgtCheckboxModule {
 }
-NgtCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxModule, declarations: [NgtCheckboxComponent], imports: [CommonModule,
+NgtCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxModule, declarations: [NgtCheckboxComponent], imports: [CommonModule,
         NgtShiningModule,
         NgtHelperModule], exports: [NgtCheckboxComponent] });
-NgtCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxModule, imports: [CommonModule,
+NgtCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxModule, imports: [CommonModule,
         NgtShiningModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtCheckboxComponent],
@@ -1631,12 +1635,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtFormModule {
 }
-NgtFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtFormModule, declarations: [NgtFormComponent,
+NgtFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtFormModule, declarations: [NgtFormComponent,
         NgtFormValidationMessageComponent], imports: [CommonModule], exports: [NgtFormComponent,
         NgtFormValidationMessageComponent] });
-NgtFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormModule, decorators: [{
+NgtFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1658,9 +1662,9 @@ class NgtValidationComponent {
         this.ngtTranslateService = ngtTranslateService;
     }
 }
-NgtValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationComponent, deps: [{ token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtValidationComponent, selector: "ngt-validation", inputs: { control: "control", container: "container", minValue: "minValue", minLength: "minLength" }, ngImport: i0, template: "<div type=\"hidden\" class=\"text-xs text-red-700 font-bold\">\n    <span class=\"help-block has-error\" *ngIf=\"control?.errors?.maxlength\">\n        {{ ngtTranslateService.ngtValidationMaxCharactersExceded }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.required && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationRequiredField }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.email && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidEmail }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.unique && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationAlreadyExists }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cnpj && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCnpj }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cpf && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCpf }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.password && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationPasswordRequiredMinCharacters }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.match && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationFieldsNotMatch }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.invalidDate && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidDate }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.time && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidPrevision }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.externalServerDependency && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationExternalServerUnavailable }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minValue && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationValueMustBeGreaterThan(minValue) }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minlength && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationMinLengthField(minLength) }}\n    </span>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationComponent, decorators: [{
+NgtValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationComponent, deps: [{ token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtValidationComponent, selector: "ngt-validation", inputs: { control: "control", container: "container", minValue: "minValue", minLength: "minLength" }, ngImport: i0, template: "<div type=\"hidden\" class=\"text-xs text-red-700 font-bold\">\n    <span class=\"help-block has-error\" *ngIf=\"control?.errors?.maxlength\">\n        {{ ngtTranslateService.ngtValidationMaxCharactersExceded }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.required && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationRequiredField }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.email && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidEmail }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.unique && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationAlreadyExists }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cnpj && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCnpj }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cpf && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCpf }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.password && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationPasswordRequiredMinCharacters }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.match && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationFieldsNotMatch }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.invalidDate && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidDate }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.time && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidPrevision }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.externalServerDependency && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationExternalServerUnavailable }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minValue && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationValueMustBeGreaterThan(minValue) }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minlength && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationMinLengthField(minLength) }}\n    </span>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-validation', template: "<div type=\"hidden\" class=\"text-xs text-red-700 font-bold\">\n    <span class=\"help-block has-error\" *ngIf=\"control?.errors?.maxlength\">\n        {{ ngtTranslateService.ngtValidationMaxCharactersExceded }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.required && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationRequiredField }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.email && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidEmail }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.unique && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationAlreadyExists }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cnpj && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCnpj }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.cpf && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidCpf }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.password && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationPasswordRequiredMinCharacters }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.match && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationFieldsNotMatch }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.invalidDate && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidDate }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.time && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationInvalidPrevision }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.externalServerDependency && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationExternalServerUnavailable }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minValue && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationValueMustBeGreaterThan(minValue) }}\n    </span>\n\n    <span class=\"help-block has-error\"\n        *ngIf=\"control?.errors?.minlength && (control?.dirty || (container && container['submitted']))\">\n        {{ ngtTranslateService.ngtValidationMinLengthField(minLength) }}\n    </span>\n</div>" }]
         }], ctorParameters: function () { return [{ type: NgtTranslateService, decorators: [{
@@ -1677,10 +1681,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtValidationModule {
 }
-NgtValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationModule, declarations: [NgtValidationComponent], imports: [CommonModule], exports: [NgtValidationComponent] });
-NgtValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtValidationModule, decorators: [{
+NgtValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationModule, declarations: [NgtValidationComponent], imports: [CommonModule], exports: [NgtValidationComponent] });
+NgtValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtValidationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtValidationComponent],
@@ -2299,13 +2303,13 @@ class NgtInputComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: NgtHttpValidationService, optional: true, skipSelf: true }, { token: NgtHttpResourceService, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtInputComponent, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", externalServerDependency: "externalServerDependency" }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult" }, providers: [
+NgtInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtInputComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: NgtHttpValidationService, optional: true, skipSelf: true }, { token: NgtHttpResourceService, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtInputComponent, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", externalServerDependency: "externalServerDependency" }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult" }, providers: [
         NgtMakeProvider(NgtInputComponent),
     ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" class=\"mb-2 flex {{ ngtStyle.compile(['color.text', 'text', 'fontCase']) }}\" [hidden]='shining'>\n    {{ label }}:\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div class=\"{{ shining ? 'hidden' : 'flex relative'}}\">\n    <input autocomplete=\"new-password\"\n        class=\"flex border appearance-none focus:outline-none leading-tight w-full {{ getInputPaddings() }} {{ ngtStyle.compile(['h', 'text', 'color.border', 'color.bg', 'color.text', 'rounded', 'cursor']) }}\"\n        [disabled]=\"isDisabled\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" #element>\n    <span *ngIf=\"innerLeftIcon\" class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n          (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-6\" [src]='innerLeftIcon'>\n    </span>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"allowClear && value && !loading\" class=\"self-center right-0 px-2 text-red-400 cursor-pointer\"\n            (click)='clearInput($event)'>\n            <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n            </svg>\n        </span>\n\n        <span *ngIf=\"loading\" class=\"self-center right-0 px-2 text-gray-500\">\n            <div class=\"div-loader\"></div>\n        </span>\n\n        <span *ngIf=\"type == 'password' && value\" class=\"self-center px-2 cursor-pointer\">\n            <svg *ngIf=\"element.type == 'password'\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\" (click)='showPassword()'>\n                <path\n                    d=\"M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10zm9.8 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n            </svg>\n\n            <svg *ngIf=\"element.type == 'text'\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\" (click)='hidePassword()'>\n                <path\n                    d=\"M12.81 4.36l-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99l1.42 1.42L3.64 17.78l-1.42-1.42L16.36 2.22z\" />\n            </svg>\n        </span>\n\n        <span *ngIf=\"innerRightIcon && type != 'password'\" class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n              (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xs mt-1\">\n        {{ ngtTranslateService.ngtTextAreaRemainingCharacters }}:\n        <span class=\"font-semibold\">{{ getRemainingCharacters() }}</span>\n    </p>\n</ng-container>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<input *ngIf='componentReady' type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\" [minValue]='minValue' [minLength]='minLength'>\n</ngt-validation>\n", styles: [".div-loader{width:20px;height:20px;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-input', providers: [
                         NgtMakeProvider(NgtInputComponent),
@@ -2413,8 +2417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtInputModule {
 }
-NgtInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtInputModule, declarations: [NgtInputComponent], imports: [CommonModule,
+NgtInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtInputModule, declarations: [NgtInputComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         NgtValidationModule,
@@ -2422,7 +2426,7 @@ NgtInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         NgtSvgModule,
         NgtFormModule,
         NgtHelperModule], exports: [NgtInputComponent] });
-NgtInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputModule, imports: [CommonModule,
+NgtInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtInputModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         NgtValidationModule,
@@ -2430,7 +2434,7 @@ NgtInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         NgtSvgModule,
         NgtFormModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtInputComponent],
@@ -2450,18 +2454,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtModalBodyComponent {
 }
-NgtModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalBodyComponent, selector: "ngt-modal-body", ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, decorators: [{
+NgtModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtModalBodyComponent, selector: "ngt-modal-body", ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-modal-body', template: "<ng-content></ng-content>" }]
         }] });
 class NgtModalFooterComponent {
 }
-NgtModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalFooterComponent, selector: "ngt-modal-footer", ngImport: i0, template: "<div class=\"flex w-full py-1\">\n    <ng-content></ng-content>\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalFooterComponent, decorators: [{
+NgtModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtModalFooterComponent, selector: "ngt-modal-footer", ngImport: i0, template: "<div class=\"flex w-full py-1\">\n    <ng-content></ng-content>\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-modal-footer', template: "<div class=\"flex w-full py-1\">\n    <ng-content></ng-content>\n</div>" }]
         }] });
@@ -2486,9 +2490,9 @@ class NgtModalHeaderComponent {
     }
 }
 NgtModalHeaderComponent.onCloseModalByHeader = new EventEmitter();
-NgtModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalHeaderComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: { disableDefaultCloses: "disableDefaultCloses" }, ngImport: i0, template: "<div\n    class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr']) }}\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"!disableDefaultCloses\">\n        <div class=\"cursor-pointer z-50 absolute right-0 top-0 m-2\" (click)='emitOnCloseEvent()'>\n            <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n                <path\n                    d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n                </path>\n            </svg>\n        </div>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalHeaderComponent, decorators: [{
+NgtModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalHeaderComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: { disableDefaultCloses: "disableDefaultCloses" }, ngImport: i0, template: "<div\n    class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr']) }}\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"!disableDefaultCloses\">\n        <div class=\"cursor-pointer z-50 absolute right-0 top-0 m-2\" (click)='emitOnCloseEvent()'>\n            <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n                <path\n                    d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n                </path>\n            </svg>\n        </div>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-modal-header', template: "<div\n    class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr']) }}\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"!disableDefaultCloses\">\n        <div class=\"cursor-pointer z-50 absolute right-0 top-0 m-2\" (click)='emitOnCloseEvent()'>\n            <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n                <path\n                    d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n                </path>\n            </svg>\n        </div>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -2556,8 +2560,8 @@ class NgtModalComponent {
         this.subscriptions = [];
     }
 }
-NgtModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalComponent, selector: "ngt-modal", inputs: { customLayout: "customLayout", disableDefaultCloses: "disableDefaultCloses", ngtStyle: "ngtStyle" }, outputs: { onCloseModal: "onCloseModal", onOpenModal: "onOpenModal" }, ngImport: i0, template: "<div class=\"flex min-w-full relative justify-center text-gray-700\">\n    <div *ngIf=\"isOpen\" class=\"flex fixed min-w-full h-full inset-0 px-6 py-6 md:py-0 md:px-0 justify-center\"\n        style=\"background: rgba(0,0,0,.7); z-index: 1100 !important;\" @fade>\n        <ng-container *ngIf=\"!disableDefaultCloses\">\n            <button class=\"fixed inset-0 h-full w-full bg-black opacity-0 cursor-default z-0\" tabindex=\"-1\"\n                type=\"button\" (click)='close()'>\n            </button>\n        </ng-container>\n\n        <div class=\"{{ ngtStyle.compile(['w', 'overflow']) }} relative border border-teal-500 bg-white w-full self-center rounded shadow-lg z-10\"\n            style=\"max-height: 85%;\">\n            <div class=\"cursor-default text-left {{ ngtStyle.compile(['py', 'px']) }}\">\n                <div *ngIf=\"!customLayout\">\n                    <ngt-modal-header class=\"w-full\" [disableDefaultCloses]=\"disableDefaultCloses\">\n                        <ng-content select='[header]'></ng-content>\n                    </ngt-modal-header>\n                </div>\n\n                <ng-container *ngIf=\"!customLayout\">\n                    <ngt-modal-body>\n                        <ng-content select='[body]'></ng-content>\n                    </ngt-modal-body>\n                </ng-container>\n\n                <!--Footer-->\n                <ng-container *ngIf=\"!customLayout\">\n                    <ngt-modal-footer>\n                        <ng-content select='[footer]'></ng-content>\n                    </ngt-modal-footer>\n                </ng-container>\n\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body" }, { kind: "component", type: NgtModalFooterComponent, selector: "ngt-modal-footer" }], animations: [
+NgtModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtModalComponent, selector: "ngt-modal", inputs: { customLayout: "customLayout", disableDefaultCloses: "disableDefaultCloses", ngtStyle: "ngtStyle" }, outputs: { onCloseModal: "onCloseModal", onOpenModal: "onOpenModal" }, ngImport: i0, template: "<div class=\"flex min-w-full relative justify-center text-gray-700\">\n    <div *ngIf=\"isOpen\" class=\"flex fixed min-w-full h-full inset-0 px-6 py-6 md:py-0 md:px-0 justify-center\"\n        style=\"background: rgba(0,0,0,.7); z-index: 1100 !important;\" @fade>\n        <ng-container *ngIf=\"!disableDefaultCloses\">\n            <button class=\"fixed inset-0 h-full w-full bg-black opacity-0 cursor-default z-0\" tabindex=\"-1\"\n                type=\"button\" (click)='close()'>\n            </button>\n        </ng-container>\n\n        <div class=\"{{ ngtStyle.compile(['w', 'overflow']) }} relative border border-teal-500 bg-white w-full self-center rounded shadow-lg z-10\"\n            style=\"max-height: 85%;\">\n            <div class=\"cursor-default text-left {{ ngtStyle.compile(['py', 'px']) }}\">\n                <div *ngIf=\"!customLayout\">\n                    <ngt-modal-header class=\"w-full\" [disableDefaultCloses]=\"disableDefaultCloses\">\n                        <ng-content select='[header]'></ng-content>\n                    </ngt-modal-header>\n                </div>\n\n                <ng-container *ngIf=\"!customLayout\">\n                    <ngt-modal-body>\n                        <ng-content select='[body]'></ng-content>\n                    </ngt-modal-body>\n                </ng-container>\n\n                <!--Footer-->\n                <ng-container *ngIf=\"!customLayout\">\n                    <ngt-modal-footer>\n                        <ng-content select='[footer]'></ng-content>\n                    </ngt-modal-footer>\n                </ng-container>\n\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body" }, { kind: "component", type: NgtModalFooterComponent, selector: "ngt-modal-footer" }], animations: [
         trigger('fade', [
             state('void', style({ opacity: 0 })),
             transition(':enter, :leave', [
@@ -2565,7 +2569,7 @@ NgtModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-modal', animations: [
                         trigger('fade', [
@@ -2593,16 +2597,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtModalModule {
 }
-NgtModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtModalModule, declarations: [NgtModalComponent,
+NgtModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtModalModule, declarations: [NgtModalComponent,
         NgtModalHeaderComponent,
         NgtModalBodyComponent,
         NgtModalFooterComponent], imports: [CommonModule], exports: [NgtModalComponent,
         NgtModalHeaderComponent,
         NgtModalBodyComponent,
         NgtModalFooterComponent] });
-NgtModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalModule, decorators: [{
+NgtModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2628,9 +2632,9 @@ class NgtSelectOptionTmp {
         this.template = template;
     }
 }
-NgtSelectOptionTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectOptionTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgtSelectOptionTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectOptionTmp, selector: "[ngt-select-option]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectOptionTmp, decorators: [{
+NgtSelectOptionTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectOptionTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NgtSelectOptionTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgtSelectOptionTmp, selector: "[ngt-select-option]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectOptionTmp, decorators: [{
             type: Directive,
             args: [{ selector: '[ngt-select-option]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -2639,9 +2643,9 @@ class NgtSelectOptionSelectedTmp {
         this.template = template;
     }
 }
-NgtSelectOptionSelectedTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectOptionSelectedTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgtSelectOptionSelectedTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectOptionSelectedTmp, selector: "[ngt-select-option-selected]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectOptionSelectedTmp, decorators: [{
+NgtSelectOptionSelectedTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectOptionSelectedTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NgtSelectOptionSelectedTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgtSelectOptionSelectedTmp, selector: "[ngt-select-option-selected]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectOptionSelectedTmp, decorators: [{
             type: Directive,
             args: [{ selector: '[ngt-select-option-selected]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -2650,9 +2654,9 @@ class NgtSelectHeaderTmp {
         this.template = template;
     }
 }
-NgtSelectHeaderTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectHeaderTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgtSelectHeaderTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectHeaderTmp, selector: "[ngt-select-header]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectHeaderTmp, decorators: [{
+NgtSelectHeaderTmp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectHeaderTmp, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NgtSelectHeaderTmp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NgtSelectHeaderTmp, selector: "[ngt-select-header]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectHeaderTmp, decorators: [{
             type: Directive,
             args: [{ selector: '[ngt-select-header]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
@@ -3044,13 +3048,13 @@ class NgtSelectComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectComponent, selector: "ngt-select", inputs: { label: "label", labelIcon: "labelIcon", labelIconColor: "labelIconColor", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", loadingText: "loadingText", notFoundText: "notFoundText", dropdownPosition: "dropdownPosition", typeToSearchText: "typeToSearchText", clearAllTooltip: "clearAllTooltip", placeholder: "placeholder", createText: "createText", labelForId: "labelForId", dropdownPanelMinHeight: "dropdownPanelMinHeight", name: "name", autoLoad: "autoLoad", allowCreate: "allowCreate", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", isDisabled: "isDisabled", isReadonly: "isReadonly", remoteResource: "remoteResource", hideSelected: "hideSelected", bindLabel: "bindLabel", bindValue: "bindValue", items: "items", inputAttrs: "inputAttrs", closeOnSelect: "closeOnSelect", clearable: "clearable", groupBy: "groupBy", maxSelectedItems: "maxSelectedItems", multiple: "multiple", searchable: "searchable", clearSearchOnAdd: "clearSearchOnAdd", virtualScroll: "virtualScroll", tabIndex: "tabIndex", typeahead: "typeahead", guessCompareWith: "guessCompareWith", groupValue: "groupValue", trackBy: "trackBy", isRequired: "isRequired", compareWith: "compareWith" }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onClear: "onClear" }, providers: [
+NgtSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtSelectComponent, selector: "ngt-select", inputs: { label: "label", labelIcon: "labelIcon", labelIconColor: "labelIconColor", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", loadingText: "loadingText", notFoundText: "notFoundText", dropdownPosition: "dropdownPosition", typeToSearchText: "typeToSearchText", clearAllTooltip: "clearAllTooltip", placeholder: "placeholder", createText: "createText", labelForId: "labelForId", dropdownPanelMinHeight: "dropdownPanelMinHeight", name: "name", autoLoad: "autoLoad", allowCreate: "allowCreate", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", isDisabled: "isDisabled", isReadonly: "isReadonly", remoteResource: "remoteResource", hideSelected: "hideSelected", bindLabel: "bindLabel", bindValue: "bindValue", items: "items", inputAttrs: "inputAttrs", closeOnSelect: "closeOnSelect", clearable: "clearable", groupBy: "groupBy", maxSelectedItems: "maxSelectedItems", multiple: "multiple", searchable: "searchable", clearSearchOnAdd: "clearSearchOnAdd", virtualScroll: "virtualScroll", tabIndex: "tabIndex", typeahead: "typeahead", guessCompareWith: "guessCompareWith", groupValue: "groupValue", trackBy: "trackBy", isRequired: "isRequired", compareWith: "compareWith" }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onClear: "onClear" }, providers: [
         NgtMakeProvider(NgtSelectComponent)
     ], queries: [{ propertyName: "ngtOptionTemplate", first: true, predicate: NgtSelectOptionTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtOptionSelectedTemplate", first: true, predicate: NgtSelectOptionSelectedTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtSelectHeaderTemplate", first: true, predicate: NgtSelectHeaderTmp, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" [hidden]='shining'\n    class=\"{{ shining ? '' : 'block' }} {{ ngtStyle.compile(['color.text', 'text', 'font', 'fontCase']) }} mb-2 flex\">\n    <ngt-svg *ngIf=\"labelIcon\" class=\"mr-1 {{labelIconColor}}\" src=\"{{labelIcon}}\"></ngt-svg>\n    {{ label }}:\n\n    <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ getSelectClass() }} normal-case\" style=\"min-height: 3rem;\">\n    <ng-select class=\"custom\" [(ngModel)]='nativeValue' [name]='nativeName' [addTag]='allowCreate'\n        [addTagText]=\"createText || ngtTranslateService.ngtSelectCreateText\" [bindLabel]=\"bindLabel\"\n        [multiple]=\"multiple\" [hideSelected]=\"hideSelected\" [typeahead]=\"typeahead\"\n        [notFoundText]=\"notFoundText || ngtTranslateService.ngtSelectNotFoundText\" [searchable]=\"searchable\"\n        [disabled]='isDisabled || isReadonly' [clearable]=\"clearable && hasSelectedValue()\"\n        [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\" [labelForId]=\"labelForId\"\n        [typeToSearchText]=\"typeToSearchText || ngtTranslateService.ngtSelectTypeToSearchText\"\n        [placeholder]=\"placeholder || ngtTranslateService.ngtSelectPlaceholder\" [dropdownPosition]=\"dropdownPosition\"\n        [groupBy]=\"groupBy\" [clearAllText]=\"clearAllTooltip || ngtTranslateService.ngtSelectClearAllTooltip\"\n        [clearSearchOnAdd]=\"clearSearchOnAdd\" [bindValue]=\"bindValue\" [virtualScroll]=\"virtualScroll\"\n        [loadingText]=\"loadingText || ngtTranslateService.ngtSelectLoadingText\" [maxSelectedItems]=\"maxSelectedItems\"\n        [tabIndex]=\"tabIndex\" [items]=\"ngSelectItems | async\" [groupValue]=\"groupValue\" [loading]=\"loading\"\n        [compareWith]='compareWith' [inputAttrs]=\"inputAttrs\" (scroll)=\"onScroll($event)\"\n        (change)=\"onNativeChange($event)\" (clear)='onClearSelect()' (remove)='onRemoveSelectedItem($event)'\n        (click)=\"wasClicked = true\">\n\n        <ng-template *ngIf='ngtSelectHeaderTemplate' ng-header-tmp>\n            <ng-template [ngTemplateOutlet]=\"ngtSelectHeaderTemplate\">\n            </ng-template>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-item=\"item\">\n            <div class=\"flex w-full items-center pr-1\">\n                <ng-container *ngIf=\"multiple\">\n                    <div class=\"ng-value-icon px-1 h-full border-r mr-2 {{ ngtStyle.compile(['color.text', 'text']) }} cursor-pointer\"\n                        (click)='removeItem($event, item)'>\n                        <svg class=\"ng-value-icon fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n                        </svg>\n                    </div>\n                </ng-container>\n\n                <ng-template *ngIf='ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionSelectedTemplate\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n\n                <ng-template *ngIf='!ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionTemplate\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n            <ng-template [ngTemplateOutlet]=\"ngtOptionTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item, index: index, searchTerm: search }\">\n            </ng-template>\n        </ng-template>\n    </ng-select>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select,.ng-select.custom .ng-select-container{height:100%;margin-top:-1px;margin-bottom:-1px}.ng-select-container{color:inherit!important;min-height:3rem!important}.select-border-disabled .ng-select-container{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem;padding:1px}.select-border-error .ng-select-container{border:solid #c53030 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.select-border-normal .ng-select-container{border:solid #cbd5e0 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.ng-value{max-width:100%}.ng-select-dropdown-panel-auto .ng-dropdown-panel .ng-dropdown-panel-items{min-height:unset}.ng-select-dropdown-panel-xs .ng-dropdown-panel .ng-dropdown-panel-items{min-height:80px!important}.ng-select-dropdown-panel-sm .ng-dropdown-panel .ng-dropdown-panel-items{min-height:100px!important}.ng-select-dropdown-panel-md .ng-dropdown-panel .ng-dropdown-panel-items{min-height:120px!important}.ng-select-dropdown-panel-lg .ng-dropdown-panel .ng-dropdown-panel-items{min-height:140px!important}.ng-select-dropdown-panel-xl .ng-dropdown-panel .ng-dropdown-panel-items{min-height:160px!important}.ng-dropdown-panel .ng-dropdown-header{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i7.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-select', providers: [
                         NgtMakeProvider(NgtSelectComponent)
@@ -3188,8 +3192,8 @@ var NgtSelectDropdownPanelHeight;
 class NgtSelectModule {
 }
-NgtSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectModule, declarations: [NgtSelectComponent,
+NgtSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectModule, declarations: [NgtSelectComponent,
         NgtSelectOptionTmp,
         NgtSelectOptionSelectedTmp,
         NgtSelectHeaderTmp], imports: [CommonModule,
@@ -3203,7 +3207,7 @@ NgtSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         NgtSelectOptionTmp,
         NgtSelectOptionSelectedTmp,
         NgtSelectHeaderTmp] });
-NgtSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectModule, imports: [CommonModule,
+NgtSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectModule, imports: [CommonModule,
         FormsModule,
         NgSelectModule,
         NgtValidationModule,
@@ -3211,7 +3215,7 @@ NgtSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         NgtShiningModule,
         NgtHelperModule,
         NgtSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3376,9 +3380,9 @@ class NgtPaginationComponent {
         this.displayNextSectionButton = sectionEndPage < totalPages;
     }
 }
-NgtPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationComponent, deps: [{ token: i0.Injector }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: { pagesInterval: "pagesInterval" }, outputs: { onPageChange: "onPageChange", onPerPageChange: "onPerPageChange" }, ngImport: i0, template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n    <ul class=\"flex justify-start\">\n        <!-- FIRST -->\n        <li (click)='goToFirstPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS -->\n        <li (click)='goToPreviousPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS SECTION -->\n        <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <ng-container *ngFor='let page of pages'>\n            <ng-container *ngIf='page == pagination.page'>\n                <li class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n            <ng-container *ngIf='page !== pagination.page'>\n                <li (click)='goToPage(page)' class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n        </ng-container>\n\n        <!-- NEXT SECTION -->\n        <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- NEXT -->\n        <li (click)='goToNextPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- LAST -->\n        <li (click)='goToLastPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n    </ul>\n\n    <!-- REGISTERS PER PAGE -->\n    <div class=\"flex items-center w-auto absolute right-0\">\n        <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n            [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n            h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n            <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n                {{ item ? item : '' }}\n            </ng-template>\n        </ngt-select>\n\n        <P class=\"ml-2\">\n            {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n        </P>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "component", type: NgtSelectComponent, selector: "ngt-select", inputs: ["label", "labelIcon", "labelIconColor", "helpTitle", "helpText", "helpTextColor", "shining", "loading", "loadingText", "notFoundText", "dropdownPosition", "typeToSearchText", "clearAllTooltip", "placeholder", "createText", "labelForId", "dropdownPanelMinHeight", "name", "autoLoad", "allowCreate", "allowOriginalItemsUnselect", "isDisabled", "isReadonly", "remoteResource", "hideSelected", "bindLabel", "bindValue", "items", "inputAttrs", "closeOnSelect", "clearable", "groupBy", "maxSelectedItems", "multiple", "searchable", "clearSearchOnAdd", "virtualScroll", "tabIndex", "typeahead", "guessCompareWith", "groupValue", "trackBy", "isRequired", "compareWith"], outputs: ["onLoadRemoteResource", "onClear"] }, { kind: "directive", type: NgtSelectOptionTmp, selector: "[ngt-select-option]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationComponent, decorators: [{
+NgtPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationComponent, deps: [{ token: i0.Injector }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: { pagesInterval: "pagesInterval" }, outputs: { onPageChange: "onPageChange", onPerPageChange: "onPerPageChange" }, ngImport: i0, template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n    <ul class=\"flex justify-start\">\n        <!-- FIRST -->\n        <li (click)='goToFirstPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS -->\n        <li (click)='goToPreviousPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS SECTION -->\n        <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <ng-container *ngFor='let page of pages'>\n            <ng-container *ngIf='page == pagination.page'>\n                <li class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n            <ng-container *ngIf='page !== pagination.page'>\n                <li (click)='goToPage(page)' class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n        </ng-container>\n\n        <!-- NEXT SECTION -->\n        <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- NEXT -->\n        <li (click)='goToNextPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- LAST -->\n        <li (click)='goToLastPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n    </ul>\n\n    <!-- REGISTERS PER PAGE -->\n    <div class=\"flex items-center w-auto absolute right-0\">\n        <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n            [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n            h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n            <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n                {{ item ? item : '' }}\n            </ng-template>\n        </ngt-select>\n\n        <P class=\"ml-2\">\n            {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n        </P>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "component", type: NgtSelectComponent, selector: "ngt-select", inputs: ["label", "labelIcon", "labelIconColor", "helpTitle", "helpText", "helpTextColor", "shining", "loading", "loadingText", "notFoundText", "dropdownPosition", "typeToSearchText", "clearAllTooltip", "placeholder", "createText", "labelForId", "dropdownPanelMinHeight", "name", "autoLoad", "allowCreate", "allowOriginalItemsUnselect", "isDisabled", "isReadonly", "remoteResource", "hideSelected", "bindLabel", "bindValue", "items", "inputAttrs", "closeOnSelect", "clearable", "groupBy", "maxSelectedItems", "multiple", "searchable", "clearSearchOnAdd", "virtualScroll", "tabIndex", "typeahead", "guessCompareWith", "groupValue", "trackBy", "isRequired", "compareWith"], outputs: ["onLoadRemoteResource", "onClear"] }, { kind: "directive", type: NgtSelectOptionTmp, selector: "[ngt-select-option]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-pagination', template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n    <ul class=\"flex justify-start\">\n        <!-- FIRST -->\n        <li (click)='goToFirstPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS -->\n        <li (click)='goToPreviousPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- PREVIOUS SECTION -->\n        <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <ng-container *ngFor='let page of pages'>\n            <ng-container *ngIf='page == pagination.page'>\n                <li class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n            <ng-container *ngIf='page !== pagination.page'>\n                <li (click)='goToPage(page)' class=\"mr-2\">\n                    <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n                        {{ page }}\n                    </ngt-action>\n                </li>\n            </ng-container>\n\n        </ng-container>\n\n        <!-- NEXT SECTION -->\n        <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                    <path\n                        d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- NEXT -->\n        <li (click)='goToNextPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n                </svg>\n            </ngt-action>\n        </li>\n\n        <!-- LAST -->\n        <li (click)='goToLastPage()' class=\"mr-2\">\n            <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                    aria-hidden=\"true\" focusable=\"false\"\n                    style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n                    preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n                </svg>\n            </ngt-action>\n        </li>\n    </ul>\n\n    <!-- REGISTERS PER PAGE -->\n    <div class=\"flex items-center w-auto absolute right-0\">\n        <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n            [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n            h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n            <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n                {{ item ? item : '' }}\n            </ng-template>\n        </ngt-select>\n\n        <P class=\"ml-2\">\n            {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n        </P>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtTranslateService, decorators: [{
@@ -3393,18 +3397,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtPaginationModule {
 }
-NgtPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationModule, declarations: [NgtPaginationComponent], imports: [CommonModule,
+NgtPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationModule, declarations: [NgtPaginationComponent], imports: [CommonModule,
         FormsModule,
         NgtStylizableModule,
         NgtActionModule,
         NgtSelectModule], exports: [NgtPaginationComponent] });
-NgtPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationModule, imports: [CommonModule,
+NgtPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationModule, imports: [CommonModule,
         FormsModule,
         NgtStylizableModule,
         NgtActionModule,
         NgtSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtPaginationComponent],
@@ -3437,9 +3441,9 @@ class NgtTagComponent {
         });
     }
 }
-NgtTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTagComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTagComponent, selector: "ngt-tag", inputs: { icon: "icon" }, ngImport: i0, template: "<button type=\"button\"\n    class=\"rounded-full w-full cursor-pointer font-semibold focus:outline-none block px-4 text-sm {{ ngtStyle.compile(['color.bg', 'color.text']) }}\">\n    <span class=\"flex items-center justify-center\">\n        <ng-content></ng-content>\n        <ngt-svg *ngIf=\"icon\" [src]='icon' class=\"fill-current self-center pl-1\"></ngt-svg>\n\n        <span *ngIf=\"!icon\" class=\"text-lg\">\n            <svg class=\"fill-current self-center pl-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n                <path\n                    d=\"M15 3C8.373 3 3 8.373 3 15s5.373 12 12 12 12-5.373 12-12S21.627 3 15 3zm4.707 15.293a.999.999 0 11-1.414 1.414L15 16.414l-3.293 3.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L13.586 15l-3.293-3.293a.999.999 0 111.414-1.414L15 13.586l3.293-3.293a.999.999 0 111.414 1.414L16.414 15l3.293 3.293z\" />\n            </svg>\n        </span>\n    </span>\n</button>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTagComponent, decorators: [{
+NgtTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTagComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTagComponent, selector: "ngt-tag", inputs: { icon: "icon" }, ngImport: i0, template: "<button type=\"button\"\n    class=\"rounded-full w-full cursor-pointer font-semibold focus:outline-none block px-4 text-sm {{ ngtStyle.compile(['color.bg', 'color.text']) }}\">\n    <span class=\"flex items-center justify-center\">\n        <ng-content></ng-content>\n        <ngt-svg *ngIf=\"icon\" [src]='icon' class=\"fill-current self-center pl-1\"></ngt-svg>\n\n        <span *ngIf=\"!icon\" class=\"text-lg\">\n            <svg class=\"fill-current self-center pl-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n                <path\n                    d=\"M15 3C8.373 3 3 8.373 3 15s5.373 12 12 12 12-5.373 12-12S21.627 3 15 3zm4.707 15.293a.999.999 0 11-1.414 1.414L15 16.414l-3.293 3.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L13.586 15l-3.293-3.293a.999.999 0 111.414-1.414L15 13.586l3.293-3.293a.999.999 0 111.414 1.414L16.414 15l3.293 3.293z\" />\n            </svg>\n        </span>\n    </span>\n</button>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-tag', template: "<button type=\"button\"\n    class=\"rounded-full w-full cursor-pointer font-semibold focus:outline-none block px-4 text-sm {{ ngtStyle.compile(['color.bg', 'color.text']) }}\">\n    <span class=\"flex items-center justify-center\">\n        <ng-content></ng-content>\n        <ngt-svg *ngIf=\"icon\" [src]='icon' class=\"fill-current self-center pl-1\"></ngt-svg>\n\n        <span *ngIf=\"!icon\" class=\"text-lg\">\n            <svg class=\"fill-current self-center pl-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n                <path\n                    d=\"M15 3C8.373 3 3 8.373 3 15s5.373 12 12 12 12-5.373 12-12S21.627 3 15 3zm4.707 15.293a.999.999 0 11-1.414 1.414L15 16.414l-3.293 3.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L13.586 15l-3.293-3.293a.999.999 0 111.414-1.414L15 13.586l3.293-3.293a.999.999 0 111.414 1.414L16.414 15l3.293 3.293z\" />\n            </svg>\n        </span>\n    </span>\n</button>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -3452,12 +3456,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtTagModule {
 }
-NgtTagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtTagModule, declarations: [NgtTagComponent], imports: [CommonModule,
+NgtTagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtTagModule, declarations: [NgtTagComponent], imports: [CommonModule,
         NgtSvgModule], exports: [NgtTagComponent] });
-NgtTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTagModule, imports: [CommonModule,
+NgtTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTagModule, imports: [CommonModule,
         NgtSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTagModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTagModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtTagComponent],
@@ -3812,9 +3816,9 @@ class NgtDatatableComponent {
         this.subscriptions = [];
     }
 }
-NgtDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loading\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal #searchModal [customLayout]='true'>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
+NgtDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loading\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal #searchModal [customLayout]='true'>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-datatable', template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loading\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal #searchModal [customLayout]='true'>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
@@ -3931,9 +3935,9 @@ class NgtTbodyComponent {
         ]);
     }
 }
-NgtTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTbodyComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTbodyComponent, selector: "[ngt-tbody]", ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTbodyComponent, decorators: [{
+NgtTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTbodyComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTbodyComponent, selector: "[ngt-tbody]", ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTbodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-tbody]', template: "<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4020,9 +4024,9 @@ class NgtTdCheckComponent {
         this.subscriptions = [];
     }
 }
-NgtTdCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTdCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTdCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTdCheckComponent, selector: "[ngt-td-check]", inputs: { reference: "reference", isDisabled: "isDisabled", checked: "checked" }, outputs: { onCheckboxInit: "onCheckboxInit" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: NgtCheckboxComponent, descendants: true, static: true }], ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' [isDisabled]=\"isDisabled\" (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTdCheckComponent, decorators: [{
+NgtTdCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTdCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTdCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTdCheckComponent, selector: "[ngt-td-check]", inputs: { reference: "reference", isDisabled: "isDisabled", checked: "checked" }, outputs: { onCheckboxInit: "onCheckboxInit" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: NgtCheckboxComponent, descendants: true, static: true }], ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' [isDisabled]=\"isDisabled\" (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTdCheckComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-td-check]', template: "<ngt-checkbox [(ngModel)]='checked' [isDisabled]=\"isDisabled\" (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4093,9 +4097,9 @@ class NgtTdComponent {
         ]);
     }
 }
-NgtTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTdComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTdComponent, selector: "[ngt-td]", ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTdComponent, decorators: [{
+NgtTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTdComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTdComponent, selector: "[ngt-td]", ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTdComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-td]', template: "<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4173,9 +4177,9 @@ class NgtThCheckComponent {
         this.subscriptions = [];
     }
 }
-NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThCheckComponent, selector: "[ngt-th-check]", ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, decorators: [{
+NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtThCheckComponent, selector: "[ngt-th-check]", ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtThCheckComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-th-check]', template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4349,9 +4353,9 @@ class NgtThComponent {
         this.subscriptions = [];
     }
 }
-NgtThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body>\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "externalServerDependency"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body" }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, decorators: [{
+NgtThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtThComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body>\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "externalServerDependency"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body" }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtThComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-th]', template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body>\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4428,9 +4432,9 @@ class NgtTheadComponent {
         ]);
     }
 }
-NgtTheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTheadComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTheadComponent, selector: "[ngt-thead]", ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTheadComponent, decorators: [{
+NgtTheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTheadComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTheadComponent, selector: "[ngt-thead]", ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTheadComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-thead]', template: "<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
@@ -4490,9 +4494,9 @@ class NgtTrComponent {
         return '';
     }
 }
-NgtTrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTrComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtTheadComponent, optional: true, skipSelf: true }, { token: NgtTbodyComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTrComponent, selector: "[ngt-tr]", inputs: { evenStripped: "evenStripped", oddStripped: "oddStripped" }, host: { properties: { "class.evenStripped": "this.evenStripped", "class.oddStripped": "this.oddStripped" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [".evenStripped:nth-child(even){background-color:#edf2f7!important}.oddStripped:nth-child(odd){background-color:#edf2f7!important}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTrComponent, decorators: [{
+NgtTrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTrComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtTheadComponent, optional: true, skipSelf: true }, { token: NgtTbodyComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTrComponent, selector: "[ngt-tr]", inputs: { evenStripped: "evenStripped", oddStripped: "oddStripped" }, host: { properties: { "class.evenStripped": "this.evenStripped", "class.oddStripped": "this.oddStripped" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [".evenStripped:nth-child(even){background-color:#edf2f7!important}.oddStripped:nth-child(odd){background-color:#edf2f7!important}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTrComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-tr]', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: [".evenStripped:nth-child(even){background-color:#edf2f7!important}.oddStripped:nth-child(odd){background-color:#edf2f7!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtTheadComponent, decorators: [{
@@ -4521,8 +4525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtDatatableModule {
 }
-NgtDatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableModule, declarations: [NgtDatatableComponent,
+NgtDatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableModule, declarations: [NgtDatatableComponent,
         NgtTbodyComponent,
         NgtTdComponent,
         NgtTdCheckComponent,
@@ -4546,7 +4550,7 @@ NgtDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         NgtThCheckComponent,
         NgtTheadComponent,
         NgtTrComponent] });
-NgtDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableModule, imports: [CommonModule,
+NgtDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableModule, imports: [CommonModule,
         FormsModule,
         NgtShiningModule,
         NgtPaginationModule,
@@ -4556,7 +4560,7 @@ NgtDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         NgtTagModule,
         NgtActionModule,
         NgtStylizableModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDatatableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4639,8 +4643,8 @@ class NgtFloatingButtonComponent {
         return menu.type == NgtFloatingButtonType.NAVIGATION;
     }
 }
-NgtFloatingButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtFloatingButtonComponent, selector: "ngt-floating-button", inputs: { menus: "menus", icon: "icon", label: "label", withAnimation: "withAnimation" }, ngImport: i0, template: "<button (click)=\"toggleMenu()\" *ngIf=\"isOpen\" tabindex=\"-1\"\n    class=\"fixed z-10 inset-0 h-full w-full bg-black opacity-0 cursor-default\"></button>\n\n<div class=\"{{ ngtStyle.compile(['w']) }} rounded-full relative z-20\" *ngIf=\"isOpen\" @fadeY>\n    <ng-container *ngFor=\"let menu of menus; let i = index\">\n        <div class=\"my-2 rounded-full shadow-xl\">\n            <a *ngIf=\"isTypeNavigation(menu)\" [routerLink]=\"menu.externalLink ? null : menu.url\"\n                (click)='menu.externalLink ? openExternalLink(menu.url) : toggleMenu()' title=\"{{ menu.tooltip }}\"\n                class=\"{{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text']) }} flex items-center justify-center rounded-full hover:opacity-75\">\n                <span *ngIf=\"menu.name\"\n                    class=\"text-sm font-semibold {{ menu.icon ? 'pr-2' : '' }}\">{{ menu.name }}</span>\n                <ngt-svg *ngIf=\"menu.icon\" [src]='menu.icon' class=\"fill-current\"></ngt-svg>\n            </a>\n\n            <div *ngIf=\"isTypeAction(menu)\" title=\"{{ menu.tooltip }}\" (click)='onClick($event, menu)'\n                class=\"{{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text']) }} flex items-center justify-center rounded-full hover:opacity-75 cursor-pointer\">\n                <span *ngIf=\"menu.name\"\n                    class=\"text-sm font-semibold {{ menu.icon ? 'pr-2' : '' }}\">{{ menu.name }}</span>\n                <ngt-svg *ngIf=\"menu.icon\" [src]='menu.icon' class=\"fill-current\"></ngt-svg>\n            </div>\n        </div>\n    </ng-container>\n</div>\n\n<!-- Abrir menu -->\n<div (click)=\"toggleMenu()\"\n    class=\"flex z-20 justify-center {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py']) }} focus:outline-none hover:opacity-75 cursor-pointer rounded-full outline-none\">\n    <span *ngIf=\"label\"\n        class=\"{{ icon ? 'pr-2' : '' }} self-center text-center text-sm font-semibold w-full\">{{ label }}</span>\n    <ngt-svg *ngIf=\"icon\" [@openClose]=\"withAnimation ? isOpen ? 'open' : 'closed' : ''\" [src]='icon'\n        class=\"fill-current\"></ngt-svg>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }], animations: [
+NgtFloatingButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtFloatingButtonComponent, selector: "ngt-floating-button", inputs: { menus: "menus", icon: "icon", label: "label", withAnimation: "withAnimation" }, ngImport: i0, template: "<button (click)=\"toggleMenu()\" *ngIf=\"isOpen\" tabindex=\"-1\"\n    class=\"fixed z-10 inset-0 h-full w-full bg-black opacity-0 cursor-default\"></button>\n\n<div class=\"{{ ngtStyle.compile(['w']) }} rounded-full relative z-20\" *ngIf=\"isOpen\" @fadeY>\n    <ng-container *ngFor=\"let menu of menus; let i = index\">\n        <div class=\"my-2 rounded-full shadow-xl\">\n            <a *ngIf=\"isTypeNavigation(menu)\" [routerLink]=\"menu.externalLink ? null : menu.url\"\n                (click)='menu.externalLink ? openExternalLink(menu.url) : toggleMenu()' title=\"{{ menu.tooltip }}\"\n                class=\"{{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text']) }} flex items-center justify-center rounded-full hover:opacity-75\">\n                <span *ngIf=\"menu.name\"\n                    class=\"text-sm font-semibold {{ menu.icon ? 'pr-2' : '' }}\">{{ menu.name }}</span>\n                <ngt-svg *ngIf=\"menu.icon\" [src]='menu.icon' class=\"fill-current\"></ngt-svg>\n            </a>\n\n            <div *ngIf=\"isTypeAction(menu)\" title=\"{{ menu.tooltip }}\" (click)='onClick($event, menu)'\n                class=\"{{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text']) }} flex items-center justify-center rounded-full hover:opacity-75 cursor-pointer\">\n                <span *ngIf=\"menu.name\"\n                    class=\"text-sm font-semibold {{ menu.icon ? 'pr-2' : '' }}\">{{ menu.name }}</span>\n                <ngt-svg *ngIf=\"menu.icon\" [src]='menu.icon' class=\"fill-current\"></ngt-svg>\n            </div>\n        </div>\n    </ng-container>\n</div>\n\n<!-- Abrir menu -->\n<div (click)=\"toggleMenu()\"\n    class=\"flex z-20 justify-center {{ ngtStyle.compile(['h', 'w', 'color.bg', 'color.text', 'px', 'py']) }} focus:outline-none hover:opacity-75 cursor-pointer rounded-full outline-none\">\n    <span *ngIf=\"label\"\n        class=\"{{ icon ? 'pr-2' : '' }} self-center text-center text-sm font-semibold w-full\">{{ label }}</span>\n    <ngt-svg *ngIf=\"icon\" [@openClose]=\"withAnimation ? isOpen ? 'open' : 'closed' : ''\" [src]='icon'\n        class=\"fill-current\"></ngt-svg>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }], animations: [
         trigger('fadeY', [
             state('void', style({ opacity: 0, transform: 'translateY(10px)' })),
             transition(':enter, :leave', [
@@ -4662,7 +4666,7 @@ NgtFloatingButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             ]),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-floating-button', animations: [
                         trigger('fadeY', [
@@ -4707,14 +4711,14 @@ var NgtFloatingButtonType;
 class NgtFloatingButtonModule {
 }
-NgtFloatingButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtFloatingButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonModule, declarations: [NgtFloatingButtonComponent], imports: [CommonModule,
+NgtFloatingButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtFloatingButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonModule, declarations: [NgtFloatingButtonComponent], imports: [CommonModule,
         RouterModule,
         NgtSvgModule], exports: [NgtFloatingButtonComponent] });
-NgtFloatingButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonModule, imports: [CommonModule,
+NgtFloatingButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonModule, imports: [CommonModule,
         RouterModule,
         NgtSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFloatingButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtFloatingButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtFloatingButtonComponent],
@@ -4767,13 +4771,13 @@ class NgtSliderComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSliderComponent, selector: "ngt-slider", inputs: { label: "label", shining: "shining", name: "name", min: "min", max: "max", step: "step", color: "color" }, providers: [
+NgtSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtSliderComponent, selector: "ngt-slider", inputs: { label: "label", shining: "shining", name: "name", min: "min", max: "max", step: "step", color: "color" }, providers: [
         NgtMakeProvider(NgtSliderComponent),
     ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "display", first: true, predicate: ["display"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>\n", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-slider', providers: [
                         NgtMakeProvider(NgtSliderComponent),
@@ -4820,12 +4824,12 @@ var NgtSliderColorSchemeEnum;
 class NgtSliderModule {
 }
-NgtSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderModule, declarations: [NgtSliderComponent], imports: [CommonModule,
+NgtSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderModule, declarations: [NgtSliderComponent], imports: [CommonModule,
         NgtShiningModule], exports: [NgtSliderComponent] });
-NgtSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderModule, imports: [CommonModule,
+NgtSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderModule, imports: [CommonModule,
         NgtShiningModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtSliderComponent],
@@ -4845,9 +4849,9 @@ class NgtRadioButtonContainerComponent {
         this.onActiveRadioButtonChange.emit(activeRadioButton);
     }
 }
-NgtRadioButtonContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtRadioButtonContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtRadioButtonContainerComponent, selector: "[ngt-radio-button-container]", outputs: { onActiveRadioButtonChange: "onActiveRadioButtonChange" }, ngImport: i0, template: "<ng-content></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonContainerComponent, decorators: [{
+NgtRadioButtonContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtRadioButtonContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtRadioButtonContainerComponent, selector: "[ngt-radio-button-container]", outputs: { onActiveRadioButtonChange: "onActiveRadioButtonChange" }, ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-radio-button-container]', template: "<ng-content></ng-content>" }]
         }], propDecorators: { onActiveRadioButtonChange: [{
@@ -4917,13 +4921,13 @@ class NgtRadioButtonComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonComponent, deps: [{ token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtRadioButtonContainerComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtRadioButtonComponent, selector: "ngt-radio-button", inputs: { label: "label", name: "name", shining: "shining", isSelectable: "isSelectable", isDisabled: "isDisabled", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText" }, providers: [
+NgtRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonComponent, deps: [{ token: i0.Injector }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtRadioButtonContainerComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtRadioButtonComponent, selector: "ngt-radio-button", inputs: { label: "label", name: "name", shining: "shining", isSelectable: "isSelectable", isDisabled: "isDisabled", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText" }, providers: [
         NgtMakeProvider(NgtRadioButtonComponent),
     ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"inline-flex items-center {{ isDisabled || !isSelectable ? 'cursor-not-allowed' : 'cursor-pointer' }}\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]='isDisabled || !isSelectable'\n        #element>\n\n    <div class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                    shadow rounded-full border border-gray-400 {{ !shining ? 'flex justify-center items-center' : 'hidden' }}\"\n        style=\"width: 19px; height: 19px;\">\n        <svg *ngIf=\"value\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\"\n            style=\"width: 13px; height: 13px;\">\n            <path\n                d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n        </svg>\n    </div>\n\n    <span *ngIf='label && !shining' class=\"text-sm ml-2\" [class.line-through]='!isSelectable'>\n        {{ label }}\n    </span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>\n", styles: ["label{margin-bottom:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-radio-button', providers: [
                         NgtMakeProvider(NgtRadioButtonComponent),
@@ -4969,14 +4973,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtRadioButtonModule {
 }
-NgtRadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtRadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonModule, declarations: [NgtRadioButtonComponent, NgtRadioButtonContainerComponent], imports: [CommonModule,
+NgtRadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtRadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonModule, declarations: [NgtRadioButtonComponent, NgtRadioButtonContainerComponent], imports: [CommonModule,
         NgtShiningModule,
         NgtHelperModule], exports: [NgtRadioButtonComponent, NgtRadioButtonContainerComponent] });
-NgtRadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonModule, imports: [CommonModule,
+NgtRadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonModule, imports: [CommonModule,
         NgtShiningModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtRadioButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtRadioButtonComponent, NgtRadioButtonContainerComponent],
@@ -5152,13 +5156,13 @@ class NgtTextareaComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtTextareaComponent, selector: "ngt-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", showCharactersLength: "showCharactersLength", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", jit: "jit", focus: "focus", isRequired: "isRequired", maxLength: "maxLength" }, providers: [
+NgtTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtTextareaComponent, selector: "ngt-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", showCharactersLength: "showCharactersLength", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", jit: "jit", focus: "focus", isRequired: "isRequired", maxLength: "maxLength" }, providers: [
         NgtMakeProvider(NgtTextareaComponent),
     ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"{{ shining ? '' : 'block' }} mb-2 flex {{ ngtStyle.compile(['text', 'fontCase']) }}\" *ngIf=\"label\"\n    [hidden]='shining'>\n    {{ label }}:\n\n    <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div class=\"flex flex-col\">\n    <div class=\"{{ shining ? '' : 'flex'}}\" [hidden]='shining'>\n        <textarea [rows]='rows' autocomplete=\"new-password\" attr.type=\"text\"\n            class=\"appearance-none block border focus:outline-none leading-tight px-4 py-3 rounded w-full h-full {{ ngtStyle.compile(['h', 'color.border', 'color.bg', 'color.text']) }}\"\n            [disabled]=\"isDisabled\" [readonly]=\"isReadonly\" placeholder=\"{{ placeholder ? placeholder : ''}}\"\n            [ngClass]=\"{'textarea-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n            #element>\n        </textarea>\n    </div>\n\n    <ng-container *ngIf=\"showCharactersLength && !shining\">\n        <p class=\"text-xs mt-1\">\n            {{ ngtTranslateService.ngtTextAreaRemainingCharacters }}: <span class=\"font-semibold\">\n                {{ getRemainingCharacters() }}\n            </span>\n        </p>\n    </ng-container>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<input *ngIf='componentReady' type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-textarea', providers: [
                         NgtMakeProvider(NgtTextareaComponent),
@@ -5216,22 +5220,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtTextareaModule {
 }
-NgtTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaModule, declarations: [NgtTextareaComponent], imports: [CommonModule,
+NgtTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaModule, declarations: [NgtTextareaComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         NgtValidationModule,
         NgtShiningModule,
         NgtHelperModule,
         NgtFormModule], exports: [NgtTextareaComponent] });
-NgtTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaModule, imports: [CommonModule,
+NgtTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         NgtValidationModule,
         NgtShiningModule,
         NgtHelperModule,
         NgtFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtTextareaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtTextareaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtTextareaComponent],
@@ -5557,13 +5561,13 @@ class NgtDateComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDateComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDateComponent, selector: "ngt-date", inputs: { label: "label", placeholder: "placeholder", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", dateFormat: "dateFormat", dateFormatNgModel: "dateFormatNgModel", showCalendarIcon: "showCalendarIcon", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", mode: "mode", time_24hr: "time_24hr", enableTime: "enableTime", noCalendar: "noCalendar", minuteIncrement: "minuteIncrement", allowInput: "allowInput", locale: "locale", allowClear: "allowClear", minDate: "minDate", maxDate: "maxDate", defaultDate: "defaultDate", isRequired: "isRequired" }, providers: [
+NgtDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDateComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDateComponent, selector: "ngt-date", inputs: { label: "label", placeholder: "placeholder", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", dateFormat: "dateFormat", dateFormatNgModel: "dateFormatNgModel", showCalendarIcon: "showCalendarIcon", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", mode: "mode", time_24hr: "time_24hr", enableTime: "enableTime", noCalendar: "noCalendar", minuteIncrement: "minuteIncrement", allowInput: "allowInput", locale: "locale", allowClear: "allowClear", minDate: "minDate", maxDate: "maxDate", defaultDate: "defaultDate", isRequired: "isRequired" }, providers: [
         NgtMakeProvider(NgtDateComponent),
     ], viewQueries: [{ propertyName: "ng2FlatpickrComponent", first: true, predicate: ["ng2FlatpickrComponent"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"{{ shining ? '' : 'block' }} mb-2 {{ngtStyle.compile(['text', 'fontCase'])}} flex\" *ngIf=\"label\"\n    [hidden]='shining'>\n    {{ label }}:\n\n    <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div class=\"relative\" [hidden]='shining || isDisabled || isReadonly'>\n    <div\n        class=\"overflow-hidden {{ ngtStyle.compile(['h', 'color.text']) }} {{ hasErrors() ? 'border-error' : 'border-normal' }}\">\n        <ng2-flatpickr class=\"block h-full\" [config]='dateConfig' disabled='true' placeholder=\"{{ placeholder }}\"\n            #ng2FlatpickrComponent>\n        </ng2-flatpickr>\n\n        <div *ngIf=\"allowClear && value\"\n            class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer {{showCalendarIcon ? 'mr-6' : 'mr-2'}}\"\n            (click)='clearInput(true)'>\n            <svg class=\"fill-current text-red-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n            </svg>\n        </div>\n\n        <div *ngIf=\"showCalendarIcon\"\n            class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer mr-2\">\n            <svg class=\"fill-current text-lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z\" />\n            </svg>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<ng-container *ngIf='isDisabled || isReadonly'>\n    <div\n        class=\"{{isDisabled ? 'disabledDiv' : ''}} {{ngtStyle.compile(['h'])}} w-full px-4 rounded appearance-none flex items-center border border-gray-400\">\n        {{ getFormattedNativeValue() }}\n    </div>\n</ng-container>\n\n<input *ngIf='componentReady' type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>", styles: [".flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:auto;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 #e6e6e6,-1px 0 #e6e6e6,0 1px #e6e6e6,0 -1px #e6e6e6,0 3px 13px #00000014}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:30px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:\"\";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:#000000e6;fill:#000000e6;height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:#000000e6;fill:#000000e6}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,.1)}.numInputWrapper span:active{background:rgba(0,0,0,.2)}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:#00000080}.numInputWrapper:hover{background:rgba(0,0,0,.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translateZ(0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\fffd;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:#000000e6}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:#000000e6}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:#00000080;background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:#0000008a;line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translateZ(0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:#3939394d;background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:#3939391a}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 #569ff7,5px 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:#3939394d;background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:30px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:30px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:12px;position:relative;box-sizing:border-box;-webkit-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}.border-error{border:solid #c53030 1px;background-color:unset!important;border-radius:.25rem}.border-normal{border:solid #cbd5e0 1px;background-color:unset!important;border-radius:.25rem}.ng2-flatpickr-input:focus{outline:none}.ng2-flatpickr-input{border:0;width:100%;height:100%;padding-left:.8rem}.ng2-flatpickr-input-container{height:100%!important}.disabledDiv{background-color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.Ng2FlatpickrComponent, selector: "ng2-flatpickr", inputs: ["placeholder", "addClass", "hideButton", "tabindex", "config", "setDate"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-date', encapsulation: ViewEncapsulation.None, providers: [
                         NgtMakeProvider(NgtDateComponent),
@@ -5647,20 +5651,20 @@ var NgtDateMode;
 class NgtDateModule {
 }
-NgtDateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtDateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtDateModule, declarations: [NgtDateComponent], imports: [CommonModule,
+NgtDateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtDateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtDateModule, declarations: [NgtDateComponent], imports: [CommonModule,
         FormsModule,
         Ng2FlatpickrModule,
         NgtValidationModule,
         NgtShiningModule,
         NgtHelperModule], exports: [NgtDateComponent] });
-NgtDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDateModule, imports: [CommonModule,
+NgtDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDateModule, imports: [CommonModule,
         FormsModule,
         Ng2FlatpickrModule,
         NgtValidationModule,
         NgtShiningModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDateModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtDateComponent],
@@ -5757,9 +5761,9 @@ class NgtButtonComponent {
         this.subscriptions = [];
     }
 }
-NgtButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonComponent, deps: [{ token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtButtonComponent, selector: "ngt-button", inputs: { link: "link", href: "href", type: "type", loading: "loading", isDisabled: "isDisabled", noSubmit: "noSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<div class=\"h-full w-full\" (click)='onClick($event)'>\n    <ng-container *ngIf='!link'>\n        <button [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\" [disabled]=\"isDisabled\"\n            [type]=\"(loading || isDisabled || noSubmit) ? 'button' : 'submit'\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n            <span *ngIf=\"loading\" class=\"ml-2\">\n                <div class=\"div-loader h-5 w-5\"></div>\n            </span>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf='link'>\n        <a [routerLink]='href ? href : null' [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <span class=\"w-full\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </span>\n\n            <span *ngIf=\"loading\" class=\"ml-1\">\n                <div class=\"div-loader\"></div>\n            </span>\n        </a>\n    </ng-container>\n</div>", styles: [".disabled-button{opacity:.5!important;cursor:not-allowed!important}.loading-button{opacity:.5!important;cursor:wait!important}.div-loader{border:3px solid #edf2f738;border-top-color:#edf2f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonComponent, decorators: [{
+NgtButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonComponent, deps: [{ token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtButtonComponent, selector: "ngt-button", inputs: { link: "link", href: "href", type: "type", loading: "loading", isDisabled: "isDisabled", noSubmit: "noSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<div class=\"h-full w-full\" (click)='onClick($event)'>\n    <ng-container *ngIf='!link'>\n        <button [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\" [disabled]=\"isDisabled\"\n            [type]=\"(loading || isDisabled || noSubmit) ? 'button' : 'submit'\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n            <span *ngIf=\"loading\" class=\"ml-2\">\n                <div class=\"div-loader h-5 w-5\"></div>\n            </span>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf='link'>\n        <a [routerLink]='href ? href : null' [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <span class=\"w-full\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </span>\n\n            <span *ngIf=\"loading\" class=\"ml-1\">\n                <div class=\"div-loader\"></div>\n            </span>\n        </a>\n    </ng-container>\n</div>", styles: [".disabled-button{opacity:.5!important;cursor:not-allowed!important}.loading-button{opacity:.5!important;cursor:wait!important}.div-loader{border:3px solid #edf2f738;border-top-color:#edf2f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-button', template: "<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<div class=\"h-full w-full\" (click)='onClick($event)'>\n    <ng-container *ngIf='!link'>\n        <button [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\" [disabled]=\"isDisabled\"\n            [type]=\"(loading || isDisabled || noSubmit) ? 'button' : 'submit'\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n            <span *ngIf=\"loading\" class=\"ml-2\">\n                <div class=\"div-loader h-5 w-5\"></div>\n            </span>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf='link'>\n        <a [routerLink]='href ? href : null' [ngClass]=\"{ 'disabled-button': isDisabled, 'loading-button': loading }\"\n            class=\"flex justify-center items-center h-full w-full focus:outline-none rounded cursor-pointer {{ ngtStyle.compile(['color.bg', 'color.text', 'color.border', 'px', 'py', 'border']) }}\">\n            <span class=\"w-full\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </span>\n\n            <span *ngIf=\"loading\" class=\"ml-1\">\n                <div class=\"div-loader\"></div>\n            </span>\n        </a>\n    </ng-container>\n</div>", styles: [".disabled-button{opacity:.5!important;cursor:not-allowed!important}.loading-button{opacity:.5!important;cursor:wait!important}.div-loader{border:3px solid #edf2f738;border-top-color:#edf2f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: NgtFormComponent, decorators: [{
@@ -5786,14 +5790,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtButtonModule {
 }
-NgtButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonModule, declarations: [NgtButtonComponent], imports: [CommonModule,
+NgtButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonModule, declarations: [NgtButtonComponent], imports: [CommonModule,
         RouterModule,
         NgtFormModule], exports: [NgtButtonComponent] });
-NgtButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonModule, imports: [CommonModule,
+NgtButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonModule, imports: [CommonModule,
         RouterModule,
         NgtFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtButtonComponent],
@@ -5825,9 +5829,9 @@ class NgtPortletBodyComponent {
         }, ['NgtPortletStyle']);
     }
 }
-NgtPortletBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletBodyComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtPortletBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPortletBodyComponent, selector: "ngt-portlet-body", ngImport: i0, template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg', 'py', 'px']) }}\">\n    <ng-content></ng-content>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletBodyComponent, decorators: [{
+NgtPortletBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletBodyComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtPortletBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPortletBodyComponent, selector: "ngt-portlet-body", ngImport: i0, template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg', 'py', 'px']) }}\">\n    <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-portlet-body', template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg', 'py', 'px']) }}\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -5854,9 +5858,9 @@ class NgtPortletFooterComponent {
         }, ['NgtPortletStyle']);
     }
 }
-NgtPortletFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletFooterComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtPortletFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPortletFooterComponent, selector: "ngt-portlet-footer", ngImport: i0, template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg']) }}\">\n    <div class=\"clearfix w-full px-6 py-3\">\n        <div class=\"md:float-left w-full\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"md:float-left w-full md:w-auto\">\n            <ng-content select=\"[left-footer]\"></ng-content>\n        </div>\n        <div class=\"md:float-right w-full md:w-auto\">\n            <ng-content select=\"[right-footer]\"></ng-content>\n        </div>\n    </div>\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletFooterComponent, decorators: [{
+NgtPortletFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletFooterComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtPortletFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPortletFooterComponent, selector: "ngt-portlet-footer", ngImport: i0, template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg']) }}\">\n    <div class=\"clearfix w-full px-6 py-3\">\n        <div class=\"md:float-left w-full\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"md:float-left w-full md:w-auto\">\n            <ng-content select=\"[left-footer]\"></ng-content>\n        </div>\n        <div class=\"md:float-right w-full md:w-auto\">\n            <ng-content select=\"[right-footer]\"></ng-content>\n        </div>\n    </div>\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-portlet-footer', template: "<div class=\"{{ ngtStyle.compile(['color.text', 'color.bg']) }}\">\n    <div class=\"clearfix w-full px-6 py-3\">\n        <div class=\"md:float-left w-full\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"md:float-left w-full md:w-auto\">\n            <ng-content select=\"[left-footer]\"></ng-content>\n        </div>\n        <div class=\"md:float-right w-full md:w-auto\">\n            <ng-content select=\"[right-footer]\"></ng-content>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -5890,9 +5894,9 @@ class NgtPortletHeaderComponent {
         }, ['NgtPortletStyle']);
     }
 }
-NgtPortletHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletHeaderComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtPortletHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPortletHeaderComponent, selector: "ngt-portlet-header", inputs: { caption: "caption", icon: "icon", helperTitle: "helperTitle", helperText: "helperText", helperIconColor: "helperIconColor" }, ngImport: i0, template: "<div class='leading-loose {{ ngtStyle.compile([\"h\", \"color.text\", \"color.bg\", \"border\", \"text\", \"fontCase\"]) }}'>\n    <div class=\"flex flex-wrap md:flex-nowrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-nowrap items-center gap-2\">\n            <ngt-svg [src]=\"icon\" class=\"text-xl\" *ngIf=\"icon\"></ngt-svg>\n            <div class=\"flex font-medium self-center gap-1\">\n                {{ caption }}\n\n                <ngt-helper *ngIf=\"helperText\" [helpTitle]=\"helperTitle\" class=\"mt-1\"\n                    [iconColor]=\"helperIconColor\">\n                    {{ helperText }}\n                </ngt-helper>\n            </div>\n        </div>\n\n        <div [hidden]='!leftHeader?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #leftHeader>\n            <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n\n        <div [hidden]='!header?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #header>\n            <ng-content select=\"[header]\"></ng-content>\n        </div>\n\n        <div class=\"{{ !rightHeader?.children[0]?.children?.length ? 'hidden' : 'flex justify-end ml-auto self-center' }} {{ ngtStyle.compile(['position', 'w']) }}\"\n            #rightHeader>\n            <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletHeaderComponent, decorators: [{
+NgtPortletHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletHeaderComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtPortletHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPortletHeaderComponent, selector: "ngt-portlet-header", inputs: { caption: "caption", icon: "icon", helperTitle: "helperTitle", helperText: "helperText", helperIconColor: "helperIconColor" }, ngImport: i0, template: "<div class='leading-loose {{ ngtStyle.compile([\"h\", \"color.text\", \"color.bg\", \"border\", \"text\", \"fontCase\"]) }}'>\n    <div class=\"flex flex-wrap md:flex-nowrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-nowrap items-center gap-2\">\n            <ngt-svg [src]=\"icon\" class=\"text-xl\" *ngIf=\"icon\"></ngt-svg>\n            <div class=\"flex font-medium self-center gap-1\">\n                {{ caption }}\n\n                <ngt-helper *ngIf=\"helperText\" [helpTitle]=\"helperTitle\" class=\"mt-1\"\n                    [iconColor]=\"helperIconColor\">\n                    {{ helperText }}\n                </ngt-helper>\n            </div>\n        </div>\n\n        <div [hidden]='!leftHeader?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #leftHeader>\n            <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n\n        <div [hidden]='!header?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #header>\n            <ng-content select=\"[header]\"></ng-content>\n        </div>\n\n        <div class=\"{{ !rightHeader?.children[0]?.children?.length ? 'hidden' : 'flex justify-end ml-auto self-center' }} {{ ngtStyle.compile(['position', 'w']) }}\"\n            #rightHeader>\n            <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-portlet-header', template: "<div class='leading-loose {{ ngtStyle.compile([\"h\", \"color.text\", \"color.bg\", \"border\", \"text\", \"fontCase\"]) }}'>\n    <div class=\"flex flex-wrap md:flex-nowrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-nowrap items-center gap-2\">\n            <ngt-svg [src]=\"icon\" class=\"text-xl\" *ngIf=\"icon\"></ngt-svg>\n            <div class=\"flex font-medium self-center gap-1\">\n                {{ caption }}\n\n                <ngt-helper *ngIf=\"helperText\" [helpTitle]=\"helperTitle\" class=\"mt-1\"\n                    [iconColor]=\"helperIconColor\">\n                    {{ helperText }}\n                </ngt-helper>\n            </div>\n        </div>\n\n        <div [hidden]='!leftHeader?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #leftHeader>\n            <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n\n        <div [hidden]='!header?.children[0]?.children?.length'\n            class=\"self-center {{ ngtStyle.compile(['position', 'w']) }}\" #header>\n            <ng-content select=\"[header]\"></ng-content>\n        </div>\n\n        <div class=\"{{ !rightHeader?.children[0]?.children?.length ? 'hidden' : 'flex justify-end ml-auto self-center' }} {{ ngtStyle.compile(['position', 'w']) }}\"\n            #rightHeader>\n            <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -5935,8 +5939,8 @@ class NgtPortletComponent {
         });
     }
 }
-NgtPortletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtPortletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPortletComponent, selector: "ngt-portlet", inputs: { caption: "caption", icon: "icon", customLayout: "customLayout", withFooter: "withFooter", withBody: "withBody", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor" }, ngImport: i0, template: "<section class='flex'>\n    <div class=\"w-full {{ ngtStyle.compile(['h', 'color.bg', 'color.text', 'p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'm', 'mx', 'my', 'ml', 'mr', 'mt', 'mb', 'shadow']) }}\"\n        @fadeUp>\n        <!--Header-->\n        <div *ngIf=\"!customLayout\">\n            <ngt-portlet-header [icon]='icon' [caption]='caption' [helperText]=\"helpText\" [helperTitle]=\"helpTitle\"\n                [helperIconColor]=\"helpIconColor\">\n                <div right-header>\n                    <ng-content select='[right-header]'></ng-content>\n                </div>\n                <div left-header>\n                    <ng-content select='[left-header]'></ng-content>\n                </div>\n                <div header>\n                    <ng-content select='[header]'></ng-content>\n                </div>\n            </ngt-portlet-header>\n        </div>\n\n        <!--Body-->\n        <ng-container *ngIf=\"!customLayout && withBody\">\n            <ngt-portlet-body>\n                <ng-content select='[body]'></ng-content>\n            </ngt-portlet-body>\n        </ng-container>\n\n        <!--Footer-->\n        <ng-container *ngIf=\"!customLayout && withFooter\">\n            <ngt-portlet-footer>\n                <div right-footer>\n                    <ng-content select='[right-footer]'></ng-content>\n                </div>\n                <div left-footer>\n                    <ng-content select='[left-footer]'></ng-content>\n                </div>\n                <div footer>\n                    <ng-content select='[footer]'></ng-content>\n                </div>\n            </ngt-portlet-footer>\n        </ng-container>\n\n        <ng-content></ng-content>\n    </div>\n</section>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtPortletHeaderComponent, selector: "ngt-portlet-header", inputs: ["caption", "icon", "helperTitle", "helperText", "helperIconColor"] }, { kind: "component", type: NgtPortletBodyComponent, selector: "ngt-portlet-body" }, { kind: "component", type: NgtPortletFooterComponent, selector: "ngt-portlet-footer" }], animations: [
+NgtPortletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtPortletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPortletComponent, selector: "ngt-portlet", inputs: { caption: "caption", icon: "icon", customLayout: "customLayout", withFooter: "withFooter", withBody: "withBody", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor" }, ngImport: i0, template: "<section class='flex'>\n    <div class=\"w-full {{ ngtStyle.compile(['h', 'color.bg', 'color.text', 'p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'm', 'mx', 'my', 'ml', 'mr', 'mt', 'mb', 'shadow']) }}\"\n        @fadeUp>\n        <!--Header-->\n        <div *ngIf=\"!customLayout\">\n            <ngt-portlet-header [icon]='icon' [caption]='caption' [helperText]=\"helpText\" [helperTitle]=\"helpTitle\"\n                [helperIconColor]=\"helpIconColor\">\n                <div right-header>\n                    <ng-content select='[right-header]'></ng-content>\n                </div>\n                <div left-header>\n                    <ng-content select='[left-header]'></ng-content>\n                </div>\n                <div header>\n                    <ng-content select='[header]'></ng-content>\n                </div>\n            </ngt-portlet-header>\n        </div>\n\n        <!--Body-->\n        <ng-container *ngIf=\"!customLayout && withBody\">\n            <ngt-portlet-body>\n                <ng-content select='[body]'></ng-content>\n            </ngt-portlet-body>\n        </ng-container>\n\n        <!--Footer-->\n        <ng-container *ngIf=\"!customLayout && withFooter\">\n            <ngt-portlet-footer>\n                <div right-footer>\n                    <ng-content select='[right-footer]'></ng-content>\n                </div>\n                <div left-footer>\n                    <ng-content select='[left-footer]'></ng-content>\n                </div>\n                <div footer>\n                    <ng-content select='[footer]'></ng-content>\n                </div>\n            </ngt-portlet-footer>\n        </ng-container>\n\n        <ng-content></ng-content>\n    </div>\n</section>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtPortletHeaderComponent, selector: "ngt-portlet-header", inputs: ["caption", "icon", "helperTitle", "helperText", "helperIconColor"] }, { kind: "component", type: NgtPortletBodyComponent, selector: "ngt-portlet-body" }, { kind: "component", type: NgtPortletFooterComponent, selector: "ngt-portlet-footer" }], animations: [
         trigger('fadeUp', [
             state('void', style({ transform: 'translateY(20px)', opacity: 0 })),
             transition(':enter', [
@@ -5944,7 +5948,7 @@ NgtPortletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-portlet', animations: [
                         trigger('fadeUp', [
@@ -5978,8 +5982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtPortletModule {
 }
-NgtPortletModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtPortletModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletModule, declarations: [NgtPortletComponent,
+NgtPortletModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtPortletModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletModule, declarations: [NgtPortletComponent,
         NgtPortletHeaderComponent,
         NgtPortletBodyComponent,
         NgtPortletFooterComponent], imports: [CommonModule,
@@ -5988,10 +5992,10 @@ NgtPortletModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         NgtPortletHeaderComponent,
         NgtPortletBodyComponent,
         NgtPortletFooterComponent] });
-NgtPortletModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletModule, imports: [CommonModule,
+NgtPortletModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletModule, imports: [CommonModule,
         NgtSvgModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPortletModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPortletModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -6152,11 +6156,11 @@ class NgtSidenavComponent {
         return this.screenWidth < 1024;
     }
 }
-NgtSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSidenavComponent, selector: "ngt-sidenav", inputs: { size: "size", initVisible: "initVisible", closeMenuOnMobileView: "closeMenuOnMobileView" }, host: { listeners: { "window:resize": "bindScreenSize($event)" } }, viewQueries: [{ propertyName: "sideMenuRef", first: true, predicate: ["sideMenu"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex h-full w-full\">\n    <ng-container *ngIf=\"visible\">\n        <div class=\"{{ getNavSize() }} {{ ngtStyle.compile(['color.bg', 'h']) }} {{ open ? 'block' : 'hidden' }} top-auto fixed {{ isMobileView() ? '' : 'md:static md:block' }}\"\n            @fadeDownAnimation #sideMenu>\n            <ng-content select='[sideMenu]'></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"open\">\n            <button (click)='closeMenu()' tabindex=\"-1\"\n                class=\"fixed z-30 inset-0 h-full w-full bg-black opacity-50 cursor-default\">\n            </button>\n        </ng-container>\n    </ng-container>\n\n    <div class=\"flex-wrap {{ getContainerSize() }} overflow-auto\" #container>\n        <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+NgtSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtSidenavComponent, selector: "ngt-sidenav", inputs: { size: "size", initVisible: "initVisible", closeMenuOnMobileView: "closeMenuOnMobileView" }, host: { listeners: { "window:resize": "bindScreenSize($event)" } }, viewQueries: [{ propertyName: "sideMenuRef", first: true, predicate: ["sideMenu"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex h-full w-full\">\n    <ng-container *ngIf=\"visible\">\n        <div class=\"{{ getNavSize() }} {{ ngtStyle.compile(['color.bg', 'h']) }} {{ open ? 'block' : 'hidden' }} top-auto fixed {{ isMobileView() ? '' : 'md:static md:block' }}\"\n            @fadeDownAnimation #sideMenu>\n            <ng-content select='[sideMenu]'></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"open\">\n            <button (click)='closeMenu()' tabindex=\"-1\"\n                class=\"fixed z-30 inset-0 h-full w-full bg-black opacity-50 cursor-default\">\n            </button>\n        </ng-container>\n    </ng-container>\n\n    <div class=\"flex-wrap {{ getContainerSize() }} overflow-auto\" #container>\n        <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         fadeDownAnimation('fadeDownAnimation', 600)
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-sidenav', animations: [
                         fadeDownAnimation('fadeDownAnimation', 600)
@@ -6184,10 +6188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtSidenavModule {
 }
-NgtSidenavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtSidenavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavModule, declarations: [NgtSidenavComponent], imports: [CommonModule], exports: [NgtSidenavComponent] });
-NgtSidenavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSidenavModule, decorators: [{
+NgtSidenavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtSidenavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavModule, declarations: [NgtSidenavComponent], imports: [CommonModule], exports: [NgtSidenavComponent] });
+NgtSidenavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSidenavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtSidenavComponent],
@@ -6217,9 +6221,9 @@ class NgtHeaderNavComponent {
         this.element.nativeElement.classList.add('tail-animate-fade-up');
     }
 }
-NgtHeaderNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtHeaderNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtHeaderNavComponent, selector: "ngt-header-nav", inputs: { ngtStyle: "ngtStyle" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"flex\">\n    <nav class=\"w-full relative {{ ngtStyle.compile(['color.bg']) }}\" #element>\n      <div class=\"h-full\">\n        <!-- Float Left -->\n        <div class=\"float-left flex\">\n          <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n  \n        <!-- Float Right -->\n        <div class=\"float-right flex h-full\">\n          <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n  \n        <!-- Fallback -->\n        <ng-content></ng-content>\n      </div>\n    </nav>\n</section>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavComponent, decorators: [{
+NgtHeaderNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtHeaderNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtHeaderNavComponent, selector: "ngt-header-nav", inputs: { ngtStyle: "ngtStyle" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"flex\">\n    <nav class=\"w-full relative {{ ngtStyle.compile(['color.bg']) }}\" #element>\n      <div class=\"h-full\">\n        <!-- Float Left -->\n        <div class=\"float-left flex\">\n          <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n  \n        <!-- Float Right -->\n        <div class=\"float-right flex h-full\">\n          <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n  \n        <!-- Fallback -->\n        <ng-content></ng-content>\n      </div>\n    </nav>\n</section>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-header-nav', template: "<section class=\"flex\">\n    <nav class=\"w-full relative {{ ngtStyle.compile(['color.bg']) }}\" #element>\n      <div class=\"h-full\">\n        <!-- Float Left -->\n        <div class=\"float-left flex\">\n          <ng-content select=\"[left-header]\"></ng-content>\n        </div>\n  \n        <!-- Float Right -->\n        <div class=\"float-right flex h-full\">\n          <ng-content select=\"[right-header]\"></ng-content>\n        </div>\n  \n        <!-- Fallback -->\n        <ng-content></ng-content>\n      </div>\n    </nav>\n</section>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -6235,10 +6239,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtHeaderNavModule {
 }
-NgtHeaderNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtHeaderNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavModule, declarations: [NgtHeaderNavComponent], imports: [CommonModule], exports: [NgtHeaderNavComponent] });
-NgtHeaderNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtHeaderNavModule, decorators: [{
+NgtHeaderNavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtHeaderNavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavModule, declarations: [NgtHeaderNavComponent], imports: [CommonModule], exports: [NgtHeaderNavComponent] });
+NgtHeaderNavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtHeaderNavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtHeaderNavComponent],
@@ -6264,9 +6268,9 @@ class NgtContentComponent {
         });
     }
 }
-NgtContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtContentComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtContentComponent, selector: "ngt-content", inputs: { ngtStyle: "ngtStyle" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <div class='flex-grow {{ ngtStyle.compile([\"color.bg\"]) }}'>\n        <ng-content></ng-content>\n    </div>\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtContentComponent, decorators: [{
+NgtContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtContentComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtContentComponent, selector: "ngt-content", inputs: { ngtStyle: "ngtStyle" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <div class='flex-grow {{ ngtStyle.compile([\"color.bg\"]) }}'>\n        <ng-content></ng-content>\n    </div>\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-content', template: "<div class=\"flex flex-col\">\n    <div class='flex-grow {{ ngtStyle.compile([\"color.bg\"]) }}'>\n        <ng-content></ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
@@ -6279,10 +6283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtContentModule {
 }
-NgtContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtContentModule, declarations: [NgtContentComponent], imports: [CommonModule], exports: [NgtContentComponent] });
-NgtContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtContentModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtContentModule, decorators: [{
+NgtContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtContentModule, declarations: [NgtContentComponent], imports: [CommonModule], exports: [NgtContentComponent] });
+NgtContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtContentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtContentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtContentComponent],
@@ -6357,8 +6361,8 @@ class NgtSectionComponent {
         this.onRemove.emit();
     }
 }
-NgtSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSectionComponent, selector: "ngt-section", inputs: { icon: "icon", caption: "caption", subtitle: "subtitle", accordion: "accordion", showSection: "showSection", removable: "removable", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor" }, outputs: { onRemove: "onRemove", onToggleSection: "onToggleSection" }, ngImport: i0, template: "<div class=\"flex mb-6\">\n    <ngt-svg *ngIf=\"icon\" [src]='icon'\n        class=\"hidden md:block {{ ngtSectionStyle.compile(['color.text', 'h', 'w', 'my', 'pr']) }}\">\n    </ngt-svg>\n\n    <div\n        class=\"w-full pb-4 md:pb-0 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\n        <div *ngIf=\"!accordion && caption\" class=\"flex\">\n            <span class=\"pl-5 {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                {{ caption }}\n            </span>\n\n            <span *ngIf=\"subtitle\"\n                class=\" pt-1 self-center {{ ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml']) }}\">\n                {{ subtitle }}\n            </span>\n\n            <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1 hover:opacity-100 opacity-100\"\n                [iconColor]=\"helpIconColor\">\n                {{ helpText }}\n            </ngt-helper>\n        </div>\n\n        <ng-container *ngIf=\"accordion\">\n            <div class=\"flex flex-wrap items-center px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\n                (click)='toggle()' style=\"max-width: fit-content;\">\n                <div *ngIf=\"!showSection\"\n                    class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path d=\"M2.82 4.59l9.18 9.16 9.18 -9.16 2.82 2.82 -12 12 -12 -12 2.82 -2.82z\" />\n                    </svg>\n                </div>\n\n                <div *ngIf=\"showSection\"\n                    class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path d=\"M2.82 19.41l9.18 -9.16 9.18 9.16 2.82 -2.82 -12 -12 -12 12 2.82 2.82z\" />\n                    </svg>\n                </div>\n\n                <span [class]=\"ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n                    {{ caption }}\n                </span>\n\n                <span *ngIf=\"subtitle\"\n                    [class]=\"ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n                    {{ subtitle }}\n                </span>\n\n                <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1\" [iconColor]=\"helpIconColor\"\n                    class=\"ml-1 hover:opacity-100 opacity-100\">\n                    {{ helpText }}\n                </ngt-helper>\n\n                <div *ngIf=\"removable\"\n                    class=\"flex items-center justify-center h-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\n                    (click)='remove($event)'>\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path\n                            d=\"M4 21.33c0,1.47 1.2,2.67 2.67,2.67l10.66 0c1.47,0 2.67,-1.2 2.67,-2.67l0 -16 -16 0 0 16zm17.33 -20l-4.66 0 -1.34 -1.33 -6.66 0 -1.34 1.33 -4.66 0 0 2.67 18.66 0 0 -2.67z\" />\n                    </svg>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf='showSection' class=\"{{ ngtSectionStyle.compile(['px']) }}\" [@enterAnimation]='!showSection'>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], animations: [
+NgtSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtSectionComponent, selector: "ngt-section", inputs: { icon: "icon", caption: "caption", subtitle: "subtitle", accordion: "accordion", showSection: "showSection", removable: "removable", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor" }, outputs: { onRemove: "onRemove", onToggleSection: "onToggleSection" }, ngImport: i0, template: "<div class=\"flex mb-6\">\n    <ngt-svg *ngIf=\"icon\" [src]='icon'\n        class=\"hidden md:block {{ ngtSectionStyle.compile(['color.text', 'h', 'w', 'my', 'pr']) }}\">\n    </ngt-svg>\n\n    <div\n        class=\"w-full pb-4 md:pb-0 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\n        <div *ngIf=\"!accordion && caption\" class=\"flex\">\n            <span class=\"pl-5 {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                {{ caption }}\n            </span>\n\n            <span *ngIf=\"subtitle\"\n                class=\" pt-1 self-center {{ ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml']) }}\">\n                {{ subtitle }}\n            </span>\n\n            <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1 hover:opacity-100 opacity-100\"\n                [iconColor]=\"helpIconColor\">\n                {{ helpText }}\n            </ngt-helper>\n        </div>\n\n        <ng-container *ngIf=\"accordion\">\n            <div class=\"flex flex-wrap items-center px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\n                (click)='toggle()' style=\"max-width: fit-content;\">\n                <div *ngIf=\"!showSection\"\n                    class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path d=\"M2.82 4.59l9.18 9.16 9.18 -9.16 2.82 2.82 -12 12 -12 -12 2.82 -2.82z\" />\n                    </svg>\n                </div>\n\n                <div *ngIf=\"showSection\"\n                    class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path d=\"M2.82 19.41l9.18 -9.16 9.18 9.16 2.82 -2.82 -12 -12 -12 12 2.82 2.82z\" />\n                    </svg>\n                </div>\n\n                <span [class]=\"ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n                    {{ caption }}\n                </span>\n\n                <span *ngIf=\"subtitle\"\n                    [class]=\"ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n                    {{ subtitle }}\n                </span>\n\n                <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1\" [iconColor]=\"helpIconColor\"\n                    class=\"ml-1 hover:opacity-100 opacity-100\">\n                    {{ helpText }}\n                </ngt-helper>\n\n                <div *ngIf=\"removable\"\n                    class=\"flex items-center justify-center h-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\n                    (click)='remove($event)'>\n                    <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path\n                            d=\"M4 21.33c0,1.47 1.2,2.67 2.67,2.67l10.66 0c1.47,0 2.67,-1.2 2.67,-2.67l0 -16 -16 0 0 16zm17.33 -20l-4.66 0 -1.34 -1.33 -6.66 0 -1.34 1.33 -4.66 0 0 2.67 18.66 0 0 -2.67z\" />\n                    </svg>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf='showSection' class=\"{{ ngtSectionStyle.compile(['px']) }}\" [@enterAnimation]='!showSection'>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }], animations: [
         trigger('enterAnimation', [
             state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
             transition(':enter', [
@@ -6366,7 +6370,7 @@ NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             ])
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-section', animations: [
                         trigger('enterAnimation', [
@@ -6406,16 +6410,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtSectionModule {
 }
-NgtSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionModule, declarations: [NgtSectionComponent], imports: [CommonModule,
+NgtSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionModule, declarations: [NgtSectionComponent], imports: [CommonModule,
         NgtStylizableModule,
         NgtSvgModule,
         NgtHelperModule], exports: [NgtSectionComponent] });
-NgtSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionModule, imports: [CommonModule,
+NgtSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionModule, imports: [CommonModule,
         NgtStylizableModule,
         NgtSvgModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtSectionComponent],
@@ -6781,13 +6785,13 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtMultiSelectComponent, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
+NgtMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtMultiSelectComponent, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
         NgtMakeProvider(NgtMultiSelectComponent)
     ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n    {{ label }}:\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n    style=\"min-height: 16rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='isDisabled'>\n    <div class=\"flex items-center w-full p-2 border-b\">\n        <ngt-checkbox class=\"flex\" title=\"Selecionar todos\" [label]=\"!searchable ? 'Selecionar todos' : ''\"\n            [(ngModel)]=\"selectAllCheckbox\" [name]=\"selectAllCheckboxName\" [isClickDisabled]='true'\n            [isDisabled]='loading || isDisabled' h='h-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n        </ngt-checkbox>\n\n        <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n            placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n            [loading]='loading' [isDisabled]='isDisabled' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex justify-center items-center h-full w-full cursor-wait\">\n        <div class=\"div-loader\"></div>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n        #containerRef>\n        <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n        </ng-container>\n\n        <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n            <div class=\"flex w-full items-center hover:bg-gray-200 {{ isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n                [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n                <ng-template let-element #elementCheckboxTemplate>\n                    <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n                        (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true' [isDisabled]='isDisabled'\n                        h='h-5' w='w-5' (click)='toggleItem(element, $event)' ngt-stylizable>\n                    </ngt-checkbox>\n                </ng-template>\n\n                <ng-template let-element #defaultOptionTemplate>\n                    {{ getSelectableElementValue(element) }}\n                </ng-template>\n\n                <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element }\">\n                </ng-container>\n\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n            {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n        </p>\n    </div>\n</div>\n\n<div class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n    <span class=\"text-sm mr-4\">\n        {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n    </span>\n\n    <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n        [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading' h='h-5' w='w-5' ngt-stylizable>\n    </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n    rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "externalServerDependency"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-multi-select', encapsulation: ViewEncapsulation.None, providers: [
                         NgtMakeProvider(NgtMultiSelectComponent)
@@ -6860,8 +6864,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtMultiSelectModule {
 }
-NgtMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectModule, declarations: [NgtMultiSelectComponent], imports: [CommonModule,
+NgtMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectModule, declarations: [NgtMultiSelectComponent], imports: [CommonModule,
         FormsModule,
         NgtValidationModule,
         NgtShiningModule,
@@ -6869,7 +6873,7 @@ NgtMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         NgtInputModule,
         NgtCheckboxModule,
         NgtStylizableModule], exports: [NgtMultiSelectComponent] });
-NgtMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectModule, imports: [CommonModule,
+NgtMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectModule, imports: [CommonModule,
         FormsModule,
         NgtValidationModule,
         NgtShiningModule,
@@ -6877,7 +6881,7 @@ NgtMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         NgtInputModule,
         NgtCheckboxModule,
         NgtStylizableModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtMultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -6953,14 +6957,14 @@ class CustomDropzonePreviewComponent extends NgxDropzonePreviewComponent {
         }
     }
 }
-CustomDropzonePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomDropzonePreviewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-CustomDropzonePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: CustomDropzonePreviewComponent, selector: "custom-dropzone-preview", providers: [
+CustomDropzonePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomDropzonePreviewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+CustomDropzonePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomDropzonePreviewComponent, selector: "custom-dropzone-preview", providers: [
         {
             provide: NgxDropzonePreviewComponent,
             useExisting: CustomDropzonePreviewComponent
         }
     ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col items-center w-48 cursor-pointer hover:opacity-75\">\n    <div class=\"w-full flex justify-center border-2 rounded py-4 text-6xl\">\n        <svg *ngIf=\"fileType == 'OTHER'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path class=\"heroicon-ui\" fill=\"#4a5568\"\n                d=\"M6 2h9a1 1 0 0 1 .7.3l4 4a1 1 0 0 1 .3.7v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2zm9 2.41V7h2.59L15 4.41zM18 9h-3a2 2 0 0 1-2-2V4H6v16h12V9zm-2 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm0-4a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm-5-4a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" />\n        </svg>\n\n        <svg *ngIf=\"fileType == 'DOC'\" fill=\"#4a5568\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-0.78 -12l-2.52 10.8 -1.68 0 -2.16 -8.15 -2.16 8.15 -1.68 0 -2.64 -10.8 1.8 0 1.68 8.17 2.16 -8.17 1.56 0 2.16 8.17 1.68 -8.17 1.8 0z\" />\n        </svg>\n\n        <svg *ngIf=\"fileType == 'XLS'\" fill=\"#4a5568\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-6.12 -6.6l3.48 5.4 -2.16 0 -2.4 -4.08 -2.4 4.08 -2.16 0 3.48 -5.4 -3.48 -5.4 2.16 0 2.4 4.08 2.4 -4.08 2.16 0 -3.48 5.4z\" />\n        </svg>\n\n        <svg *ngIf=\"fileType == 'PDF'\" fill=\"#4a5568\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n                d=\"M14.4 0l7.2 7.2 0 14.4c0,1.32 -1.08,2.4 -2.4,2.4l-14.4 0c-1.32,0 -2.4,-1.08 -2.4,-2.4l0 -19.2c0,-1.32 1.08,-2.4 2.4,-2.4l9.6 0 0 0zm4.8 21.6l0 -13.2 -6 0 0 -6 -8.4 0 0 19.2 14.4 0 0 0zm-8.5 -9.23c-0.28,-0.92 -0.92,-3.87 0.76,-3.92 1.68,-0.05 0.58,3.74 0.58,3.74 0.46,1.79 2.42,3.07 2.42,3.07 0.6,-0.18 4.02,-0.57 3.54,1.21 -0.52,1.77 -4.2,0.1 -4.2,0.1 -2.34,0.17 -4.09,0.8 -4.09,0.8 -1.36,2.53 -2.94,3.63 -3.59,2.56 -0.8,-1.33 2.56,-3.04 2.56,-3.04 1.74,-2.83 2,-4.47 2.02,-4.52l0 0zm0.78 1.01c-0.48,1.56 -1.44,3.23 -1.44,3.23 1.02,-0.41 3.26,-0.88 3.26,-0.88 -1.37,-1.2 -1.79,-2.34 -1.82,-2.35l0 0zm3.77 2.6c0,0 2.1,0.79 2.15,0.47 0.08,-0.32 -1.6,-0.61 -2.15,-0.47l0 0zm-6.79 1.79c-0.93,0.36 -1.81,1.9 -1.6,1.9 0.22,0.01 1.1,-0.72 1.6,-1.9l0 0zm3.02 -6.66c0,-0.06 0.52,-2.01 0,-2.07 -0.36,-0.04 -0.01,2.02 0,2.07z\" />\n        </svg>\n\n        <svg *ngIf=\"fileType == 'DWG'\" version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"512.000000pt\" height=\"512.000000pt\"\n            viewBox=\"0 0 512.000000 512.000000\" preserveAspectRatio=\"xMidYMid meet\">\n            <g transform=\"translate(0.000000,512.000000) scale(0.100000,-0.100000)\" fill=\"#4a5568\" stroke=\"none\">\n                <path\n                    d=\"M830 5104 c-42 -18 -86 -58 -108 -99 -15 -27 -17 -109 -20 -871 l-3 -842 -92 -4 c-112 -5 -179 -32 -235 -92 -81 -88 -77 -39 -77 -946 0 -801 0 -805 21 -851 54 -116 140 -169 291 -177 l92 -5 3 -536 c3 -588 1 -562 65 -623 65 -62 -61 -58 1793 -58 1854 0 1728 -4 1793 58 64 61 62 35 65 623 l3 536 92 5 c151 8 237 61 291 177 21 46 21 50 21 851 0 907 4 858 -77 946 -56 60 -123 87 -235 92 l-93 4 -1 302 c-1 165 -4 312 -8 326 -8 30 -994 1160 -1033 1184 -24 15 -138 16 -1270 16 -1088 -1 -1247 -3 -1278 -16z m2400 -714 l0 -530 29 -32 29 -33 466 -3 466 -3 0 -249 0 -250 -1660 0 -1660 0 0 815 0 815 1165 0 1165 0 0 -530z m1093 -1516 c87 -16 127 -32 127 -48 -1 -17 -48 -197 -54 -203 -2 -3 -27 2 -54 11 -131 44 -323 40 -429 -9 -72 -33 -146 -110 -174 -182 -27 -72 -36 -204 -19 -282 26 -120 110 -221 217 -261 70 -26 193 -36 251 -21 l42 12 0 124 0 125 -95 0 -95 0 0 110 0 110 230 0 230 0 0 -320 0 -320 -27 -11 c-16 -6 -71 -20 -123 -32 -129 -29 -401 -31 -500 -4 -116 33 -189 74 -266 151 -114 114 -164 244 -164 426 0 265 115 460 331 563 52 25 117 50 144 57 122 30 283 31 428 4z m-3042 -12 c304 -82 457 -320 419 -653 -35 -312 -215 -491 -545 -544 -94 -16 -317 -20 -448 -9 l-77 7 0 602 0 603 83 10 c45 6 174 9 287 7 170 -2 218 -6 281 -23z m808 -34 c16 -81 96 -524 127 -705 15 -90 29 -161 31 -160 2 2 14 66 28 143 20 116 101 518 145 722 l12 52 147 0 147 0 28 -147 c67 -356 104 -564 116 -648 13 -92 29 -144 30 -95 0 42 47 310 107 608 l56 282 138 0 c77 0 139 -3 139 -7 0 -5 -217 -853 -301 -1175 l-10 -38 -149 0 c-133 0 -149 2 -154 18 -13 44 -127 653 -141 759 -9 65 -18 119 -19 120 -1 2 -12 -55 -24 -125 -13 -70 -55 -272 -94 -449 l-71 -323 -152 0 -151 0 -142 598 c-78 328 -142 603 -142 610 0 9 36 12 144 12 l145 0 10 -52z m2131 -2088 l0 -480 -1660 0 -1660 0 0 480 0 480 1660 0 1660 0 0 -480z\" />\n\n                <path\n                    d=\"M923 2673 l-23 -4 0 -399 0 -399 43 -6 c60 -9 200 12 261 39 140 63 212 207 204 411 -3 86 -8 109 -34 165 -51 108 -128 167 -249 189 -57 11 -157 13 -202 4z\" />\n            </g>\n        </svg>\n    </div>\n</div>\n\n<ngx-dropzone-remove-badge *ngIf=\"removable\" (click)=\"_remove($event)\" style=\"top: -15px !important;\">\n</ngx-dropzone-remove-badge>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomDropzonePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomDropzonePreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'custom-dropzone-preview', providers: [
                         {
@@ -7005,9 +7009,9 @@ class NgtDropzoneFileViewerComponent {
         file.click();
     }
 }
-NgtDropzoneFileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneFileViewerComponent, deps: [{ token: NgtTranslateService }], target: i0.ɵɵFactoryTarget.Component });
-NgtDropzoneFileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropzoneFileViewerComponent, selector: "ngt-dropzone-file-viewer", inputs: { url: "url", fileName: "fileName", fileSize: "fileSize", disableContent: "disableContent", canDownloadFile: "canDownloadFile" }, outputs: { onClose: "onClose" }, host: { listeners: { "window:keydown": "keyEvent($event)" } }, viewQueries: [{ propertyName: "eloverdeDocViewer", first: true, predicate: EloverdeDocViewerComponent, descendants: true }], ngImport: i0, template: "<div style=\"width:100%; height: 100%;\">\n    <div style=\"width:100%; height: 100%;\">\n        <div class=\"w-full py-5 pr-10\">\n            <div class=\"w-full flex justify-end text-2xl\">\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer\" (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n\n                &nbsp;&nbsp;&nbsp;\n\n                <div class=\"cursor-pointer\" (click)=\"close()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path fill=\"#fff\"\n                            d=\"M24 2.42l-2.42 -2.42 -9.58 9.58 -9.58 -9.58 -2.42 2.42 9.58 9.58 -9.58 9.58 2.42 2.42 9.58 -9.58 9.58 9.58 2.42 -2.42 -9.58 -9.58 9.58 -9.58z\" />\n                    </svg>\n                </div>\n\n            </div>\n\n            <div class=\"w-full justify-center text-center text-2xl font-mono text-white\">\n                {{ fileName }}\n            </div>\n        </div>\n\n        <div *ngIf=\"fileSize > maxFileSize\" class=\"flex w-full h-full justify-center items-center\">\n            <div class=\"flex flex-col w-auto bg-gray-700 rounded-lg p-6\" style=\"max-width: 80%;\">\n                <p class=\"text-white font-medium text-center w-full\">\n                    {{\n                    canDownloadFile\n                    ? ngtTranslateService.ngtFileTooLargeForPreview\n                    : ngtTranslateService.ngtFileTooLargeForPreviewNoDownloadPermission\n                    }}\n                </p>\n\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer mt-5 text-2xl self-center border rounded p-2\"\n                    (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"px-10\" style=\"width:100%; height: 83%;\" *ngIf=\"canShowViewer\">\n            <eloverde-doc-viewer class=\"h-full w-full flex justify-center\" [url]=\"url\" [disableContent]=\"disableContent\"\n                (loaded)=\"loading = false\" (onClose)=\"handleClose()\">\n            </eloverde-doc-viewer>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"loading\" class=\"flex fixed inset-0 justify-center items-center w-full h-full cursor-wait z-50\">\n    <div class=\"div-loader\"></div>\n</div>", styles: [":host{background:rgba(0,0,0,.5);color:#fff;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000000}.div-loader{width:5rem;height:5rem;border:5px solid #89C43F38;border-top-color:#89c43f;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EloverdeDocViewerComponent, selector: "eloverde-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded", "onClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneFileViewerComponent, decorators: [{
+NgtDropzoneFileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneFileViewerComponent, deps: [{ token: NgtTranslateService }], target: i0.ɵɵFactoryTarget.Component });
+NgtDropzoneFileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDropzoneFileViewerComponent, selector: "ngt-dropzone-file-viewer", inputs: { url: "url", fileName: "fileName", fileSize: "fileSize", disableContent: "disableContent", canDownloadFile: "canDownloadFile" }, outputs: { onClose: "onClose" }, host: { listeners: { "window:keydown": "keyEvent($event)" } }, viewQueries: [{ propertyName: "eloverdeDocViewer", first: true, predicate: EloverdeDocViewerComponent, descendants: true }], ngImport: i0, template: "<div style=\"width:100%; height: 100%;\">\n    <div style=\"width:100%; height: 100%;\">\n        <div class=\"w-full py-5 pr-10\">\n            <div class=\"w-full flex justify-end text-2xl\">\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer\" (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n\n                &nbsp;&nbsp;&nbsp;\n\n                <div class=\"cursor-pointer\" (click)=\"close()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path fill=\"#fff\"\n                            d=\"M24 2.42l-2.42 -2.42 -9.58 9.58 -9.58 -9.58 -2.42 2.42 9.58 9.58 -9.58 9.58 2.42 2.42 9.58 -9.58 9.58 9.58 2.42 -2.42 -9.58 -9.58 9.58 -9.58z\" />\n                    </svg>\n                </div>\n\n            </div>\n\n            <div class=\"w-full justify-center text-center text-2xl font-mono text-white\">\n                {{ fileName }}\n            </div>\n        </div>\n\n        <div *ngIf=\"fileSize > maxFileSize\" class=\"flex w-full h-full justify-center items-center\">\n            <div class=\"flex flex-col w-auto bg-gray-700 rounded-lg p-6\" style=\"max-width: 80%;\">\n                <p class=\"text-white font-medium text-center w-full\">\n                    {{\n                    canDownloadFile\n                    ? ngtTranslateService.ngtFileTooLargeForPreview\n                    : ngtTranslateService.ngtFileTooLargeForPreviewNoDownloadPermission\n                    }}\n                </p>\n\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer mt-5 text-2xl self-center border rounded p-2\"\n                    (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"px-10\" style=\"width:100%; height: 83%;\" *ngIf=\"canShowViewer\">\n            <eloverde-doc-viewer class=\"h-full w-full flex justify-center\" [url]=\"url\" [disableContent]=\"disableContent\"\n                (loaded)=\"loading = false\" (onClose)=\"handleClose()\">\n            </eloverde-doc-viewer>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"loading\" class=\"flex fixed inset-0 justify-center items-center w-full h-full cursor-wait z-50\">\n    <div class=\"div-loader\"></div>\n</div>", styles: [":host{background:rgba(0,0,0,.5);color:#fff;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000000}.div-loader{width:5rem;height:5rem;border:5px solid #89C43F38;border-top-color:#89c43f;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EloverdeDocViewerComponent, selector: "eloverde-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded", "onClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneFileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-dropzone-file-viewer', template: "<div style=\"width:100%; height: 100%;\">\n    <div style=\"width:100%; height: 100%;\">\n        <div class=\"w-full py-5 pr-10\">\n            <div class=\"w-full flex justify-end text-2xl\">\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer\" (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n\n                &nbsp;&nbsp;&nbsp;\n\n                <div class=\"cursor-pointer\" (click)=\"close()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path fill=\"#fff\"\n                            d=\"M24 2.42l-2.42 -2.42 -9.58 9.58 -9.58 -9.58 -2.42 2.42 9.58 9.58 -9.58 9.58 2.42 2.42 9.58 -9.58 9.58 9.58 2.42 -2.42 -9.58 -9.58 9.58 -9.58z\" />\n                    </svg>\n                </div>\n\n            </div>\n\n            <div class=\"w-full justify-center text-center text-2xl font-mono text-white\">\n                {{ fileName }}\n            </div>\n        </div>\n\n        <div *ngIf=\"fileSize > maxFileSize\" class=\"flex w-full h-full justify-center items-center\">\n            <div class=\"flex flex-col w-auto bg-gray-700 rounded-lg p-6\" style=\"max-width: 80%;\">\n                <p class=\"text-white font-medium text-center w-full\">\n                    {{\n                    canDownloadFile\n                    ? ngtTranslateService.ngtFileTooLargeForPreview\n                    : ngtTranslateService.ngtFileTooLargeForPreviewNoDownloadPermission\n                    }}\n                </p>\n\n                <div *ngIf=\"canDownloadFile\" class=\"cursor-pointer mt-5 text-2xl self-center border rounded p-2\"\n                    (click)=\"downloadFile()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path fill=\"#fff\" d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"px-10\" style=\"width:100%; height: 83%;\" *ngIf=\"canShowViewer\">\n            <eloverde-doc-viewer class=\"h-full w-full flex justify-center\" [url]=\"url\" [disableContent]=\"disableContent\"\n                (loaded)=\"loading = false\" (onClose)=\"handleClose()\">\n            </eloverde-doc-viewer>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"loading\" class=\"flex fixed inset-0 justify-center items-center w-full h-full cursor-wait z-50\">\n    <div class=\"div-loader\"></div>\n</div>", styles: [":host{background:rgba(0,0,0,.5);color:#fff;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000000}.div-loader{width:5rem;height:5rem;border:5px solid #89C43F38;border-top-color:#89c43f;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: NgtTranslateService }]; }, propDecorators: { eloverdeDocViewer: [{
@@ -7101,9 +7105,9 @@ class NgtDropzoneViewComponent {
         return !this.isImage(resource) && !this.isAudio(resource) && !this.isVideo(resource);
     }
 }
-NgtDropzoneViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtDropzoneViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropzoneViewComponent, selector: "ngt-dropzone-view", inputs: { resources: "resources", dropzoneHeight: "dropzoneHeight", loading: "loading", placeholder: "placeholder" }, outputs: { onImageClick: "onImageClick", onFileClick: "onFileClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-2 border-dotted border-gray-400 rounded p-2 flex items-center overflow-x-auto\"\n    [ngStyle]=\"{ 'height': dropzoneHeight }\">\n    <div *ngIf=\"loading\" class=\"flex absolute justify-center items-center w-full h-full cursor-wait z-10\">\n        <div class=\"div-loader\"></div>\n    </div>\n\n    <div [class]=\"loading ? 'hidden' : 'flex items-center'\">\n        <ng-container *ngIf=\"images?.length\">\n            <div class=\"flex py-5\">\n                <div *ngFor=\"let image of images; let index = index\" class=\"w-48 mr-8\">\n                    <div class=\"flex flex-col w-48 mx-4 cursor-pointer\"\n                        title=\"{{ image.name || '' }} ({{ getFormattedFileSize(image) }})\"\n                        (click)=\"handleImageClick(index)\">\n                        <img [src]=\"image.thumbnailUrl\" [alt]=\"image.name\" class=\"w-full h-32\">\n\n                        <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                            {{ image.name || '' }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"audios?.length\">\n            <ng-container *ngFor=\"let audio of audios\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <audio controls>\n                        <source [src]=\"audio.previewUrl\">\n                    </audio>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ audio.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"videos?.length\">\n            <ng-container *ngFor=\"let video of videos\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <video width=\"240\" controls>\n                        <source [src]=\"video.previewUrl\">\n                    </video>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ video.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"files?.length\">\n            <ng-container *ngFor=\"let file of files\">\n                <div class=\"flex flex-col w-48 mr-6 cursor-pointer\"\n                    (click)=\"handleFileClick(file.previewUrl, file.name, file.fileSize)\">\n                    <div class=\"w-full flex justify-center border-2 rounded py-4 text-6xl\">\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.OTHER\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path class=\"heroicon-ui\" fill=\"#4a5568\"\n                                d=\"M6 2h9a1 1 0 0 1 .7.3l4 4a1 1 0 0 1 .3.7v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2zm9 2.41V7h2.59L15 4.41zM18 9h-3a2 2 0 0 1-2-2V4H6v16h12V9zm-2 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm0-4a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm-5-4a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.DOC\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-0.78 -12l-2.52 10.8 -1.68 0 -2.16 -8.15 -2.16 8.15 -1.68 0 -2.64 -10.8 1.8 0 1.68 8.17 2.16 -8.17 1.56 0 2.16 8.17 1.68 -8.17 1.8 0z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.XLS\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-6.12 -6.6l3.48 5.4 -2.16 0 -2.4 -4.08 -2.4 4.08 -2.16 0 3.48 -5.4 -3.48 -5.4 2.16 0 2.4 4.08 2.4 -4.08 2.16 0 -3.48 5.4z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.PDF\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l7.2 7.2 0 14.4c0,1.32 -1.08,2.4 -2.4,2.4l-14.4 0c-1.32,0 -2.4,-1.08 -2.4,-2.4l0 -19.2c0,-1.32 1.08,-2.4 2.4,-2.4l9.6 0 0 0zm4.8 21.6l0 -13.2 -6 0 0 -6 -8.4 0 0 19.2 14.4 0 0 0zm-8.5 -9.23c-0.28,-0.92 -0.92,-3.87 0.76,-3.92 1.68,-0.05 0.58,3.74 0.58,3.74 0.46,1.79 2.42,3.07 2.42,3.07 0.6,-0.18 4.02,-0.57 3.54,1.21 -0.52,1.77 -4.2,0.1 -4.2,0.1 -2.34,0.17 -4.09,0.8 -4.09,0.8 -1.36,2.53 -2.94,3.63 -3.59,2.56 -0.8,-1.33 2.56,-3.04 2.56,-3.04 1.74,-2.83 2,-4.47 2.02,-4.52l0 0zm0.78 1.01c-0.48,1.56 -1.44,3.23 -1.44,3.23 1.02,-0.41 3.26,-0.88 3.26,-0.88 -1.37,-1.2 -1.79,-2.34 -1.82,-2.35l0 0zm3.77 2.6c0,0 2.1,0.79 2.15,0.47 0.08,-0.32 -1.6,-0.61 -2.15,-0.47l0 0zm-6.79 1.79c-0.93,0.36 -1.81,1.9 -1.6,1.9 0.22,0.01 1.1,-0.72 1.6,-1.9l0 0zm3.02 -6.66c0,-0.06 0.52,-2.01 0,-2.07 -0.36,-0.04 -0.01,2.02 0,2.07z\" />\n                        </svg>\n                    </div>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ file.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"!loading && !resources?.length\" class=\"px-2 text-center w-full\">\n        {{ placeholder }}\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneViewComponent, decorators: [{
+NgtDropzoneViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtDropzoneViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDropzoneViewComponent, selector: "ngt-dropzone-view", inputs: { resources: "resources", dropzoneHeight: "dropzoneHeight", loading: "loading", placeholder: "placeholder" }, outputs: { onImageClick: "onImageClick", onFileClick: "onFileClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-2 border-dotted border-gray-400 rounded p-2 flex items-center overflow-x-auto\"\n    [ngStyle]=\"{ 'height': dropzoneHeight }\">\n    <div *ngIf=\"loading\" class=\"flex absolute justify-center items-center w-full h-full cursor-wait z-10\">\n        <div class=\"div-loader\"></div>\n    </div>\n\n    <div [class]=\"loading ? 'hidden' : 'flex items-center'\">\n        <ng-container *ngIf=\"images?.length\">\n            <div class=\"flex py-5\">\n                <div *ngFor=\"let image of images; let index = index\" class=\"w-48 mr-8\">\n                    <div class=\"flex flex-col w-48 mx-4 cursor-pointer\"\n                        title=\"{{ image.name || '' }} ({{ getFormattedFileSize(image) }})\"\n                        (click)=\"handleImageClick(index)\">\n                        <img [src]=\"image.thumbnailUrl\" [alt]=\"image.name\" class=\"w-full h-32\">\n\n                        <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                            {{ image.name || '' }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"audios?.length\">\n            <ng-container *ngFor=\"let audio of audios\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <audio controls>\n                        <source [src]=\"audio.previewUrl\">\n                    </audio>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ audio.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"videos?.length\">\n            <ng-container *ngFor=\"let video of videos\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <video width=\"240\" controls>\n                        <source [src]=\"video.previewUrl\">\n                    </video>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ video.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"files?.length\">\n            <ng-container *ngFor=\"let file of files\">\n                <div class=\"flex flex-col w-48 mr-6 cursor-pointer\"\n                    (click)=\"handleFileClick(file.previewUrl, file.name, file.fileSize)\">\n                    <div class=\"w-full flex justify-center border-2 rounded py-4 text-6xl\">\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.OTHER\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path class=\"heroicon-ui\" fill=\"#4a5568\"\n                                d=\"M6 2h9a1 1 0 0 1 .7.3l4 4a1 1 0 0 1 .3.7v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2zm9 2.41V7h2.59L15 4.41zM18 9h-3a2 2 0 0 1-2-2V4H6v16h12V9zm-2 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm0-4a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm-5-4a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.DOC\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-0.78 -12l-2.52 10.8 -1.68 0 -2.16 -8.15 -2.16 8.15 -1.68 0 -2.64 -10.8 1.8 0 1.68 8.17 2.16 -8.17 1.56 0 2.16 8.17 1.68 -8.17 1.8 0z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.XLS\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-6.12 -6.6l3.48 5.4 -2.16 0 -2.4 -4.08 -2.4 4.08 -2.16 0 3.48 -5.4 -3.48 -5.4 2.16 0 2.4 4.08 2.4 -4.08 2.16 0 -3.48 5.4z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.PDF\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l7.2 7.2 0 14.4c0,1.32 -1.08,2.4 -2.4,2.4l-14.4 0c-1.32,0 -2.4,-1.08 -2.4,-2.4l0 -19.2c0,-1.32 1.08,-2.4 2.4,-2.4l9.6 0 0 0zm4.8 21.6l0 -13.2 -6 0 0 -6 -8.4 0 0 19.2 14.4 0 0 0zm-8.5 -9.23c-0.28,-0.92 -0.92,-3.87 0.76,-3.92 1.68,-0.05 0.58,3.74 0.58,3.74 0.46,1.79 2.42,3.07 2.42,3.07 0.6,-0.18 4.02,-0.57 3.54,1.21 -0.52,1.77 -4.2,0.1 -4.2,0.1 -2.34,0.17 -4.09,0.8 -4.09,0.8 -1.36,2.53 -2.94,3.63 -3.59,2.56 -0.8,-1.33 2.56,-3.04 2.56,-3.04 1.74,-2.83 2,-4.47 2.02,-4.52l0 0zm0.78 1.01c-0.48,1.56 -1.44,3.23 -1.44,3.23 1.02,-0.41 3.26,-0.88 3.26,-0.88 -1.37,-1.2 -1.79,-2.34 -1.82,-2.35l0 0zm3.77 2.6c0,0 2.1,0.79 2.15,0.47 0.08,-0.32 -1.6,-0.61 -2.15,-0.47l0 0zm-6.79 1.79c-0.93,0.36 -1.81,1.9 -1.6,1.9 0.22,0.01 1.1,-0.72 1.6,-1.9l0 0zm3.02 -6.66c0,-0.06 0.52,-2.01 0,-2.07 -0.36,-0.04 -0.01,2.02 0,2.07z\" />\n                        </svg>\n                    </div>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ file.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"!loading && !resources?.length\" class=\"px-2 text-center w-full\">\n        {{ placeholder }}\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-dropzone-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"border-2 border-dotted border-gray-400 rounded p-2 flex items-center overflow-x-auto\"\n    [ngStyle]=\"{ 'height': dropzoneHeight }\">\n    <div *ngIf=\"loading\" class=\"flex absolute justify-center items-center w-full h-full cursor-wait z-10\">\n        <div class=\"div-loader\"></div>\n    </div>\n\n    <div [class]=\"loading ? 'hidden' : 'flex items-center'\">\n        <ng-container *ngIf=\"images?.length\">\n            <div class=\"flex py-5\">\n                <div *ngFor=\"let image of images; let index = index\" class=\"w-48 mr-8\">\n                    <div class=\"flex flex-col w-48 mx-4 cursor-pointer\"\n                        title=\"{{ image.name || '' }} ({{ getFormattedFileSize(image) }})\"\n                        (click)=\"handleImageClick(index)\">\n                        <img [src]=\"image.thumbnailUrl\" [alt]=\"image.name\" class=\"w-full h-32\">\n\n                        <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                            {{ image.name || '' }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"audios?.length\">\n            <ng-container *ngFor=\"let audio of audios\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <audio controls>\n                        <source [src]=\"audio.previewUrl\">\n                    </audio>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ audio.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"videos?.length\">\n            <ng-container *ngFor=\"let video of videos\">\n                <div class=\"flex flex-col w-48 mx-4 py-5\">\n                    <video width=\"240\" controls>\n                        <source [src]=\"video.previewUrl\">\n                    </video>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ video.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"files?.length\">\n            <ng-container *ngFor=\"let file of files\">\n                <div class=\"flex flex-col w-48 mr-6 cursor-pointer\"\n                    (click)=\"handleFileClick(file.previewUrl, file.name, file.fileSize)\">\n                    <div class=\"w-full flex justify-center border-2 rounded py-4 text-6xl\">\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.OTHER\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path class=\"heroicon-ui\" fill=\"#4a5568\"\n                                d=\"M6 2h9a1 1 0 0 1 .7.3l4 4a1 1 0 0 1 .3.7v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2zm9 2.41V7h2.59L15 4.41zM18 9h-3a2 2 0 0 1-2-2V4H6v16h12V9zm-2 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm0-4a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1zm-5-4a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.DOC\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-0.78 -12l-2.52 10.8 -1.68 0 -2.16 -8.15 -2.16 8.15 -1.68 0 -2.64 -10.8 1.8 0 1.68 8.17 2.16 -8.17 1.56 0 2.16 8.17 1.68 -8.17 1.8 0z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.XLS\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l-9.6 0c-1.33,0 -2.4,1.08 -2.4,2.4l0 19.2c0,1.33 1.07,2.4 2.4,2.4l14.4 0c1.33,0 2.4,-1.07 2.4,-2.4l0 -14.4 -7.2 -7.2 0 0zm4.8 21.6l-14.4 0 0 -19.2 8.4 0 0 6 6 0 0 13.2 0 0zm-6.12 -6.6l3.48 5.4 -2.16 0 -2.4 -4.08 -2.4 4.08 -2.16 0 3.48 -5.4 -3.48 -5.4 2.16 0 2.4 4.08 2.4 -4.08 2.16 0 -3.48 5.4z\" />\n                        </svg>\n\n                        <svg *ngIf=\"getFileType(file) == ngtDropzoneViewFileTypeEnum.PDF\" fill=\"#4a5568\"\n                            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                            <path\n                                d=\"M14.4 0l7.2 7.2 0 14.4c0,1.32 -1.08,2.4 -2.4,2.4l-14.4 0c-1.32,0 -2.4,-1.08 -2.4,-2.4l0 -19.2c0,-1.32 1.08,-2.4 2.4,-2.4l9.6 0 0 0zm4.8 21.6l0 -13.2 -6 0 0 -6 -8.4 0 0 19.2 14.4 0 0 0zm-8.5 -9.23c-0.28,-0.92 -0.92,-3.87 0.76,-3.92 1.68,-0.05 0.58,3.74 0.58,3.74 0.46,1.79 2.42,3.07 2.42,3.07 0.6,-0.18 4.02,-0.57 3.54,1.21 -0.52,1.77 -4.2,0.1 -4.2,0.1 -2.34,0.17 -4.09,0.8 -4.09,0.8 -1.36,2.53 -2.94,3.63 -3.59,2.56 -0.8,-1.33 2.56,-3.04 2.56,-3.04 1.74,-2.83 2,-4.47 2.02,-4.52l0 0zm0.78 1.01c-0.48,1.56 -1.44,3.23 -1.44,3.23 1.02,-0.41 3.26,-0.88 3.26,-0.88 -1.37,-1.2 -1.79,-2.34 -1.82,-2.35l0 0zm3.77 2.6c0,0 2.1,0.79 2.15,0.47 0.08,-0.32 -1.6,-0.61 -2.15,-0.47l0 0zm-6.79 1.79c-0.93,0.36 -1.81,1.9 -1.6,1.9 0.22,0.01 1.1,-0.72 1.6,-1.9l0 0zm3.02 -6.66c0,-0.06 0.52,-2.01 0,-2.07 -0.36,-0.04 -0.01,2.02 0,2.07z\" />\n                        </svg>\n                    </div>\n\n                    <p class=\"w-full truncate text-gray-500 text-center text-sm font-mono\">\n                        {{ file.name || '' }}\n                    </p>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"!loading && !resources?.length\" class=\"px-2 text-center w-full\">\n        {{ placeholder }}\n    </div>\n</div>" }]
         }], propDecorators: { resources: [{
@@ -7475,13 +7479,13 @@ class NgtDropzoneComponent extends NgtBaseNgModel {
         this.subscriptions = [];
     }
 }
-NgtDropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtAttachmentHttpService, optional: true, skipSelf: true }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NgtDropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropzoneComponent, selector: "ngt-dropzone", inputs: { label: "label", placeholder: "placeholder", helpTextColor: "helpTextColor", helpText: "helpText", helpTitle: "helpTitle", resources: "resources", multipleSelection: "multipleSelection", itemsLimit: "itemsLimit", showFileName: "showFileName", disableClick: "disableClick", disabled: "disabled", viewMode: "viewMode", removable: "removable", canDownloadFile: "canDownloadFile", verticalExpandable: "verticalExpandable", acceptedFiles: "acceptedFiles", unacceptedFiles: "unacceptedFiles", maxFileSize: "maxFileSize", previewType: "previewType", isRequired: "isRequired", name: "name", remoteResource: "remoteResource" }, outputs: { onFileSelected: "onFileSelected", onFileSelectError: "onFileSelectError", onFileUploadFail: "onFileUploadFail", onFileRemoved: "onFileRemoved", onFileUploadInit: "onFileUploadInit", onFileUploaded: "onFileUploaded", onFilePreviewLoaded: "onFilePreviewLoaded" }, providers: [
+NgtDropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true }, { token: NgtAttachmentHttpService, optional: true, skipSelf: true }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NgtDropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtDropzoneComponent, selector: "ngt-dropzone", inputs: { label: "label", placeholder: "placeholder", helpTextColor: "helpTextColor", helpText: "helpText", helpTitle: "helpTitle", resources: "resources", multipleSelection: "multipleSelection", itemsLimit: "itemsLimit", showFileName: "showFileName", disableClick: "disableClick", disabled: "disabled", viewMode: "viewMode", removable: "removable", canDownloadFile: "canDownloadFile", verticalExpandable: "verticalExpandable", acceptedFiles: "acceptedFiles", unacceptedFiles: "unacceptedFiles", maxFileSize: "maxFileSize", previewType: "previewType", isRequired: "isRequired", name: "name", remoteResource: "remoteResource" }, outputs: { onFileSelected: "onFileSelected", onFileSelectError: "onFileSelectError", onFileUploadFail: "onFileUploadFail", onFileRemoved: "onFileRemoved", onFileUploadInit: "onFileUploadInit", onFileUploaded: "onFileUploaded", onFilePreviewLoaded: "onFilePreviewLoaded" }, providers: [
         NgtMakeProvider(NgtDropzoneComponent),
     ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "ngxDropzone", first: true, predicate: NgxDropzoneComponent, descendants: true, static: true }, { propertyName: "ngtDropzoneFileViewer", first: true, predicate: NgtDropzoneFileViewerComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-full w-full\" #container>\n    <label *ngIf=\"label\" class=\"flex mb-2 text-sm\">\n        {{ label }}:\n\n        <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n        <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n            {{ helpText }}\n        </ngt-helper>\n    </label>\n\n    <div *ngIf=\"!viewMode\" class=\"h-full w-full relative\">\n        <div *ngIf=\"loading\" class=\"flex absolute justify-center items-center w-full h-full cursor-wait z-10\">\n            <div class=\"div-loader\"></div>\n        </div>\n\n        <ngx-dropzone [id]=\"ngxElementId\" [multiple]='multipleSelection' [maxFileSize]='maxFileSize'\n            (change)='onSelect($event)' [class.single-attachment]='itemsLimit == 1' [accept]='acceptedFiles'\n            [disabled]='disabled || loading' [expandable]='verticalExpandable'\n            [disableClick]='disableClick || forceDisableClick' [ngStyle]=\"{ 'height': dropzoneHeight }\" #ngxDropzone>\n            <ng-container *ngIf=\"!loading\">\n                <ngx-dropzone-label *ngIf=\"!uploadedResources?.length\" class=\"px-2\">\n                    {{ placeholder }}\n                </ngx-dropzone-label>\n\n                <ng-container *ngFor=\"let resource of uploadedResources; let index = index\">\n                    <div class=\"flex flex-col w-48 mx-4\"\n                        title=\"{{ resource?.file?.name || '' }} ({{ getFormattedFileSize(resource) }})\">\n                        <custom-dropzone-preview *ngIf=\"previewType == 'DEFAULT' && isFile(resource)\"\n                            [file]='resource.file' [removable]=\"removable\" (removed)=\"onRemove(resource)\"\n                            (click)=\"onFileClick(resource.file.url, resource.file.name, resource.file.size)\"\n                            ngProjectAs=\"ngx-dropzone-preview\">\n                        </custom-dropzone-preview>\n\n                        <div *ngIf=\"isImage(resource)\" class=\"cursor-pointer\" (click)=\"imagePreview(index)\" #gallery>\n                            <ngx-dropzone-image-preview class=\"image-preview-default-class\" [file]=\"resource.file\"\n                                [removable]=\"removable\" (removed)=\"onRemove(resource)\">\n                            </ngx-dropzone-image-preview>\n                        </div>\n\n                        <ngx-dropzone-video-preview *ngIf=\"isVideo(resource) || isAudio(resource)\"\n                            [file]=\"resource.file\" [removable]=\"removable\" (removed)=\"onRemove(resource)\">\n                        </ngx-dropzone-video-preview>\n\n                        <p *ngIf=\"showFileName\"\n                            class=\"w-full truncate text-gray-500 text-center text-sm font-mono mt-2\">\n                            {{ resource?.file?.name || '' }}\n                        </p>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </ngx-dropzone>\n    </div>\n\n    <ngt-dropzone-view *ngIf=\"viewMode\" class=\"h-full w-full\" [resources]=\"resources\" [loading]=\"loading\"\n        [placeholder]=\"placeholder\" [dropzoneHeight]=\"dropzoneHeight\"\n        (onFileClick)=\"onFileClick($event.previewUrl, $event.name, $event.fileSize)\"\n        (onImageClick)=\"onImageClick($event.div, $event.index)\">\n    </ngt-dropzone-view>\n\n    <ngt-dropzone-file-viewer [hidden]=\"!showNgtDropzoneFileViewer\" (onClose)=\"forceDisableClick = false\"\n        [canDownloadFile]=\"canDownloadFile\" [disableContent]=\"canDownloadFile ? 'none' : 'popout'\">\n    </ngt-dropzone-file-viewer>\n\n    <input *ngIf='componentReady' type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n    <ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n</div>", styles: [".single-attachment{border:none!important;margin:unset!important;overflow:hidden!important;display:flex!important;justify-content:center!important}.image-preview-default-class{margin:unset!important}custom-dropzone-preview{height:100%!important;min-height:unset!important;margin:unset!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: i5$1.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i5$1.ɵb, selector: "ngx-dropzone-label" }, { kind: "component", type: i5$1.NgxDropzoneImagePreviewComponent, selector: "ngx-dropzone-image-preview" }, { kind: "component", type: i5$1.NgxDropzoneVideoPreviewComponent, selector: "ngx-dropzone-video-preview" }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse"] }, { kind: "component", type: NgtDropzoneFileViewerComponent, selector: "ngt-dropzone-file-viewer", inputs: ["url", "fileName", "fileSize", "disableContent", "canDownloadFile"], outputs: ["onClose"] }, { kind: "component", type: NgtDropzoneViewComponent, selector: "ngt-dropzone-view", inputs: ["resources", "dropzoneHeight", "loading", "placeholder"], outputs: ["onImageClick", "onFileClick"] }, { kind: "component", type: CustomDropzonePreviewComponent, selector: "custom-dropzone-preview" }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-dropzone', encapsulation: ViewEncapsulation.None, providers: [
                         NgtMakeProvider(NgtDropzoneComponent),
@@ -7567,8 +7571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 class NgtDropzoneModule {
 }
-NgtDropzoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtDropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneModule, declarations: [NgtDropzoneComponent,
+NgtDropzoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtDropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneModule, declarations: [NgtDropzoneComponent,
         NgtDropzoneFileViewerComponent,
         NgtDropzoneViewComponent,
         CustomDropzonePreviewComponent], imports: [CommonModule,
@@ -7578,14 +7582,14 @@ NgtDropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         NgtSvgModule,
         EloverdeDocViewerModule,
         NgtHelperModule], exports: [NgtDropzoneComponent] });
-NgtDropzoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneModule, imports: [CommonModule,
+NgtDropzoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneModule, imports: [CommonModule,
         FormsModule,
         NgtValidationModule,
         NgxDropzoneModule,
         NgtSvgModule,
         EloverdeDocViewerModule,
         NgtHelperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropzoneModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtDropzoneModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [NgtDropzoneComponent],
@@ -7647,9 +7651,9 @@ class NgtPopoverComponent {
         }, 500);
     }
 }
-NgtPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgtPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPopoverComponent, selector: "ngt-popover", inputs: { closeTimeout: "closeTimeout", openMethod: "openMethod", closeOnClick: "closeOnClick", placeOnBottom: "placeOnBottom", placeOnLeft: "placeOnLeft" }, outputs: { onClick: "onClick" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "hostDiv", first: true, predicate: ["hostDiv"], descendants: true }], ngImport: i0, template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"closeOnClick\" [openMethod]=\"openMethod\"\n            [autoYReverse]=\"false\" [reverseXPosition]=\"!placeOnLeft\" [reverseYPosition]=\"!placeOnBottom\"\n            [closeTimeout]=\"closeTimeout\" (onHostClick)=\"fireClickEvent()\" #dropdownRef>\n    <div #hostDiv host>\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"bg-gray-100 text-sm rounded-lg hover:opacity-100 text-gray-800 shadow-lg -mb-4\"\n        [ngClass]=\"ngtStyle.compile(stylesToCompile)\" container>\n\n        <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n</ngt-dropdown>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: ["autoXReverse", "autoYReverse", "reverseXPosition", "reverseYPosition", "closeOnClick", "closeTimeout", "openMethod"], outputs: ["onToggle", "onHostClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverComponent, decorators: [{
+NgtPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgtPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgtPopoverComponent, selector: "ngt-popover", inputs: { closeTimeout: "closeTimeout", openMethod: "openMethod", closeOnClick: "closeOnClick", placeOnBottom: "placeOnBottom", placeOnLeft: "placeOnLeft" }, outputs: { onClick: "onClick" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "hostDiv", first: true, predicate: ["hostDiv"], descendants: true }], ngImport: i0, template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"closeOnClick\" [openMethod]=\"openMethod\"\n            [autoYReverse]=\"false\" [reverseXPosition]=\"!placeOnLeft\" [reverseYPosition]=\"!placeOnBottom\"\n            [closeTimeout]=\"closeTimeout\" (onHostClick)=\"fireClickEvent()\" #dropdownRef>\n    <div #hostDiv host>\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"bg-gray-100 text-sm rounded-lg hover:opacity-100 text-gray-800 shadow-lg -mb-4\"\n        [ngClass]=\"ngtStyle.compile(stylesToCompile)\" container>\n\n        <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n</ngt-dropdown>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: ["scrollable", "autoXReverse", "autoYReverse", "reverseXPosition", "reverseYPosition", "closeOnClick", "closeTimeout", "openMethod"], outputs: ["onToggle", "onHostClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-popover', template: "<ngt-dropdown class=\"flex w-full hover:opacity-100\" [closeOnClick]=\"closeOnClick\" [openMethod]=\"openMethod\"\n            [autoYReverse]=\"false\" [reverseXPosition]=\"!placeOnLeft\" [reverseYPosition]=\"!placeOnBottom\"\n            [closeTimeout]=\"closeTimeout\" (onHostClick)=\"fireClickEvent()\" #dropdownRef>\n    <div #hostDiv host>\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"bg-gray-100 text-sm rounded-lg hover:opacity-100 text-gray-800 shadow-lg -mb-4\"\n        [ngClass]=\"ngtStyle.compile(stylesToCompile)\" container>\n\n        <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n</ngt-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: NgtStylizableDirective, decorators: [{
@@ -7687,12 +7691,12 @@ var NgtPopoverOpenMethod;
 class NgtPopoverModule {
 }
-NgtPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgtPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverModule, declarations: [NgtPopoverComponent], imports: [CommonModule,
+NgtPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgtPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverModule, declarations: [NgtPopoverComponent], imports: [CommonModule,
         NgtDropdownModule], exports: [NgtPopoverComponent] });
-NgtPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverModule, imports: [CommonModule,
+NgtPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverModule, imports: [CommonModule,
         NgtDropdownModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgtPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgtPopoverComponent],