ng-tailwind 4.1.2 → 4.1.4

package/fesm2020/ng-tailwind.mjs

@@ -11,13 +11,13 @@ import * as i1 from 'angular-svg-icon';
 import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Observable, zip, Subject, forkJoin } from 'rxjs';
+import Inputmask from 'inputmask/dist/inputmask.es6.js';
 import * as i7 from '@ng-select/ng-select';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import * as i5 from 'ng2-flatpickr';
 import { Ng2FlatpickrModule } from 'ng2-flatpickr';
 import { english } from 'flatpickr/dist/l10n/default.js';
 import { Portuguese } from 'flatpickr/dist/l10n/pt.js';
-import Inputmask$1 from 'inputmask';
 import moment from 'moment';
 import * as i3 from 'eloverde-doc-viewer';
 import { EloverdeDocViewerComponent, EloverdeDocViewerModule } from 'eloverde-doc-viewer';
@@ -987,6 +987,7 @@ class NgtHelperComponent {
         this.ngtTranslateService = ngtTranslateService;
         this.injector = injector;
         this.tooltipSize = 'max-w-xs';
+        this.autoXReverse = true;
         if (this.ngtStylizableDirective) {
             this.ngtStyle = this.ngtStylizableDirective.getNgtStylizableService();
         }
@@ -1005,10 +1006,10 @@ class NgtHelperComponent {
     }
 }
 NgtHelperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", type: NgtHelperComponent, selector: "ngt-helper", inputs: { helpTextColor: "helpTextColor", helpText: "helpText", helpTitle: "helpTitle", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", iconTitle: "iconTitle", tooltipSize: "tooltipSize" }, 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]='true' #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 });
+NgtHelperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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.3", 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]='true' #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" }]
+            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: [{
                     type: Optional
                 }, {
@@ -1034,6 +1035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                 type: Input
             }], tooltipSize: [{
                 type: Input
+            }], autoXReverse: [{
+                type: Input
             }] } });
 
 class NgtDropdownModule {
@@ -1526,7 +1529,7 @@ class NgtCheckboxComponent extends NgtBaseNgModel {
 NgtCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], viewProviders: [
+    ], 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 }
     ], animations: [
         trigger('slideLeftToRight', [
@@ -1688,20 +1691,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                 }]
         }] });
 
-var NgtInputMaskEnum;
-(function (NgtInputMaskEnum) {
-    NgtInputMaskEnum["CPF"] = "cpf";
-    NgtInputMaskEnum["CNPJ"] = "cnpj";
-    NgtInputMaskEnum["CPF_CNPJ"] = "cnpj-cpf";
-    NgtInputMaskEnum["CPF_CNPJ_RUT"] = "cnpj-cpf-rut";
-    NgtInputMaskEnum["DECIMAL"] = "decimal";
-    NgtInputMaskEnum["CELLPHONE"] = "cellphone";
-    NgtInputMaskEnum["PLATE"] = "plate";
-    NgtInputMaskEnum["CEP"] = "cep";
-    NgtInputMaskEnum["INTEGER"] = "integer";
-    NgtInputMaskEnum["TIME"] = "time";
-    NgtInputMaskEnum["INTERNATIONAL_PHONE"] = "international-phone";
-})(NgtInputMaskEnum || (NgtInputMaskEnum = {}));
+var InputMaskEnum;
+(function (InputMaskEnum) {
+    InputMaskEnum["CPF"] = "cpf";
+    InputMaskEnum["CNPJ"] = "cnpj";
+    InputMaskEnum["CPF_CNPJ"] = "cnpj-cpf";
+    InputMaskEnum["CPF_CNPJ_RUT"] = "cnpj-cpf-rut";
+    InputMaskEnum["DECIMAL"] = "decimal";
+    InputMaskEnum["CELLPHONE"] = "cellphone";
+    InputMaskEnum["PLATE"] = "plate";
+    InputMaskEnum["CEP"] = "cep";
+    InputMaskEnum["INTEGER"] = "integer";
+    InputMaskEnum["TIME"] = "time";
+    InputMaskEnum["INTERNATIONAL_PHONE"] = "international-phone";
+    InputMaskEnum["DATE"] = "date";
+})(InputMaskEnum || (InputMaskEnum = {}));
+function applyInputMask(element, mask, parameters) {
+    Inputmask(mask, parameters).mask(element);
+}
+function removeInputMask(element) {
+    Inputmask.remove(element);
+}
+
 class NgtInputComponent extends NgtBaseNgModel {
     constructor(injector, ngtStylizableDirective, formContainer, ngtFormComponent, renderer, ngtValidationService, ngtResourceService, changeDetector, ngtTranslateService) {
         super();
@@ -1778,7 +1789,7 @@ class NgtInputComponent extends NgtBaseNgModel {
             value = parseFloat(value);
         }
         if (!this.getNativeValue()) {
-            this.element.nativeElement.value = value;
+            this.element.nativeElement.value = value ?? '';
         }
         if (!value && value !== 0) {
             this.clearInput();
@@ -1789,7 +1800,7 @@ class NgtInputComponent extends NgtBaseNgModel {
             if (nativeValue && ngModelValue != this.value) {
                 this.value = ngModelValue;
             }
-            if ((this.mask == NgtInputMaskEnum.CELLPHONE || this.mask == NgtInputMaskEnum.INTERNATIONAL_PHONE)
+            if ((this.mask == InputMaskEnum.CELLPHONE || this.mask == InputMaskEnum.INTERNATIONAL_PHONE)
                 && this.allowPhoneValidation && this.value) {
                 this.validatePhone();
             }
@@ -1958,21 +1969,21 @@ class NgtInputComponent extends NgtBaseNgModel {
     }
     setupMasks(previousMask) {
         if (this.mask != previousMask && !this.mask) {
-            Inputmask.remove(this.element.nativeElement);
+            removeInputMask(this.element.nativeElement);
             return this.clearInput();
         }
         let masks = {
-            [NgtInputMaskEnum.CPF]: '999.999.999-99',
-            [NgtInputMaskEnum.CNPJ]: '99.999.999/9999-99',
-            [NgtInputMaskEnum.CPF_CNPJ_RUT]: {
+            [InputMaskEnum.CPF]: '999.999.999-99',
+            [InputMaskEnum.CNPJ]: '99.999.999/9999-99',
+            [InputMaskEnum.CPF_CNPJ_RUT]: {
                 mask: ['999.999.999-99', '999999999999', '99.999.999/9999-99'],
                 keepStatic: true
             },
-            [NgtInputMaskEnum.CPF_CNPJ]: {
+            [InputMaskEnum.CPF_CNPJ]: {
                 mask: ['999.999.999-99', '99.999.999/9999-99'],
                 keepStatic: true
             },
-            [NgtInputMaskEnum.DECIMAL]: {
+            [InputMaskEnum.DECIMAL]: {
                 digits: this.decimalMaskPrecision,
                 groupSeparator: '.',
                 radixPoint: ',',
@@ -1981,33 +1992,33 @@ class NgtInputComponent extends NgtBaseNgModel {
                 rightAlign: false,
                 max: this.maxValue,
             },
-            [NgtInputMaskEnum.CELLPHONE]: {
+            [InputMaskEnum.CELLPHONE]: {
                 mask: ['(99) 999-999', '(99) 9999-9999', '(99) 99999-9999'],
                 keepStatic: true
             },
-            [NgtInputMaskEnum.INTERNATIONAL_PHONE]: {
+            [InputMaskEnum.INTERNATIONAL_PHONE]: {
                 mask: ['+999 99 999-999', '+99 (99) 9999-9999', '+99 (99) 99999-9999', '+999 (99) 9999-9999', '+999 (99) 99999-9999'],
                 keepStatic: true
             },
-            [NgtInputMaskEnum.PLATE]: {
+            [InputMaskEnum.PLATE]: {
                 mask: ['AAA-9999', 'AAA9A99'],
                 keepStatic: true
             },
-            [NgtInputMaskEnum.CEP]: '99999-999',
-            [NgtInputMaskEnum.INTEGER]: {
+            [InputMaskEnum.CEP]: '99999-999',
+            [InputMaskEnum.INTEGER]: {
                 max: this.maxValue,
                 rightAlign: false
             },
-            [NgtInputMaskEnum.TIME]: '99:99',
+            [InputMaskEnum.TIME]: '99:99',
         };
-        if (this.mask == NgtInputMaskEnum.DECIMAL) {
-            Inputmask(NgtInputMaskEnum.DECIMAL, masks[this.mask]).mask(this.element.nativeElement);
+        if (this.mask == InputMaskEnum.DECIMAL) {
+            applyInputMask(this.element.nativeElement, InputMaskEnum.DECIMAL, masks[this.mask]);
         }
-        else if (this.mask == NgtInputMaskEnum.INTEGER) {
-            Inputmask(NgtInputMaskEnum.INTEGER, masks[this.mask]).mask(this.element.nativeElement);
+        else if (this.mask == InputMaskEnum.INTEGER) {
+            applyInputMask(this.element.nativeElement, InputMaskEnum.INTEGER, masks[this.mask]);
         }
         else {
-            Inputmask(masks[this.mask]).mask(this.element.nativeElement);
+            applyInputMask(this.element.nativeElement, masks[this.mask]);
         }
     }
     setupProperties() {
@@ -2268,8 +2279,8 @@ class NgtInputComponent extends NgtBaseNgModel {
                 .replace('-', '')
                 .replace('/', '');
         }
-        else if (this.mask == NgtInputMaskEnum.CELLPHONE
-            || this.mask == NgtInputMaskEnum.INTERNATIONAL_PHONE) {
+        else if (this.mask == InputMaskEnum.CELLPHONE
+            || this.mask == InputMaskEnum.INTERNATIONAL_PHONE) {
             value = (value + "")
                 .replace('(', '')
                 .replace(')', '')
@@ -2291,7 +2302,7 @@ class NgtInputComponent extends NgtBaseNgModel {
 NgtInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], viewProviders: [
+    ], 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.3", ngImport: i0, type: NgtInputComponent, decorators: [{
@@ -3025,7 +3036,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
 NgtSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
+    ], 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.3", ngImport: i0, type: NgtSelectComponent, decorators: [{
@@ -4898,7 +4909,7 @@ class NgtRadioButtonComponent extends NgtBaseNgModel {
 NgtRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], viewProviders: [
+    ], 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.3", ngImport: i0, type: NgtRadioButtonComponent, decorators: [{
@@ -5133,7 +5144,7 @@ class NgtTextareaComponent extends NgtBaseNgModel {
 NgtTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], viewProviders: [
+    ], 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.3", ngImport: i0, type: NgtTextareaComponent, decorators: [{
@@ -5449,10 +5460,10 @@ class NgtDateComponent extends NgtBaseNgModel {
     }
     setupDateInputMask() {
         if (this.locale == NgtDateLocale.BRAZIL) {
-            return Inputmask$1('date', { mask: '99/99/9999' }).mask(this.ng2FlatpickrComponent.flatpickr['input']);
+            return applyInputMask(this.ng2FlatpickrComponent.flatpickr['input'], InputMaskEnum.DATE, { mask: '99/99/9999' });
         }
         if (this.locale == NgtDateLocale.US) {
-            return Inputmask$1('date', { mask: '9999-99-99' }).mask(this.ng2FlatpickrComponent.flatpickr['input']);
+            return applyInputMask(this.ng2FlatpickrComponent.flatpickr['input'], InputMaskEnum.DATE, { mask: '9999-99-99' });
         }
     }
     updateValidations() {
@@ -5538,7 +5549,7 @@ class NgtDateComponent extends NgtBaseNgModel {
 NgtDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], viewProviders: [
+    ], 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.3", ngImport: i0, type: NgtDateComponent, decorators: [{
@@ -5869,7 +5880,7 @@ class NgtPortletHeaderComponent {
     }
 }
 NgtPortletHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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-no-wrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-no-wrap 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"] }] });
+NgtPortletHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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-no-wrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-no-wrap 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.3", 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-no-wrap h-full relative px-3 md:px-8 py-2\">\n        <div *ngIf=\"caption || icon\" class=\"flex md:whitespace-no-wrap 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" }]
@@ -6336,7 +6347,7 @@ class NgtSectionComponent {
     }
 }
 NgtSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }], animations: [
+NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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', [
@@ -6508,8 +6519,10 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
     setFocus() {
         setTimeout(() => this.inputSearch.setFocus());
     }
-    refresh() {
-        this.loadData(this.itemsPerPage, this.searchTerm);
+    async refresh(itemsPerPage, searchTerm) {
+        this.itemsPerPage = itemsPerPage !== undefined ? itemsPerPage : this.itemsPerPage;
+        this.searchTerm = searchTerm !== undefined ? searchTerm : this.searchTerm;
+        return this.loadData(this.itemsPerPage, this.searchTerm);
     }
     reset() {
         this.value = [];
@@ -6533,6 +6546,27 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
             });
         }
     }
+    selectElements(elements) {
+        if (!this.isDisabled) {
+            const elementIds = this.isColoquentResources() ? elements.map(element => element.getApiId()) : elements;
+            this.selectableElements.forEach((selectableElement) => {
+                const value = selectableElement.value;
+                if (!selectableElement.isSelected
+                    && ((this.isColoquentResources() && elementIds.includes(value.getApiId()))
+                        || elementIds.includes(value))) {
+                    selectableElement.isSelected = true;
+                    this.handleElementSelection(selectableElement);
+                }
+            });
+        }
+    }
+    toggleItem(selectableElement, event) {
+        event?.stopImmediatePropagation();
+        if (!this.isDisabled) {
+            selectableElement.isSelected = !selectableElement.isSelected;
+            this.handleElementSelection(selectableElement);
+        }
+    }
     onNativeChange(selectableElement) {
         if (this.componentReady) {
             this.handleElementSelection(selectableElement);
@@ -6559,15 +6593,8 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
             }
         }
     }
-    toggleItem(event, selectableElement) {
-        event.stopImmediatePropagation();
-        if (!this.isDisabled) {
-            selectableElement.isSelected = !selectableElement.isSelected;
-            this.handleElementSelection(selectableElement);
-        }
-    }
     search(term) {
-        if (!this.componentReady || term === undefined || term === null || term === this.previousSearchTerm) {
+        if (!this.componentReady || term === undefined || term === null || term === this.previousSearchTerm || this.loading) {
             return;
         }
         if (this.searchTimeout) {
@@ -6617,7 +6644,6 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
         }
         else if (!selectableElement.isSelected && this.isSelectedElement(selectableElement)) {
             this.selectedElements = this.selectedElements.filter(selectedElement => selectedElement.uuid !== selectableElement.uuid);
-            ;
             this.onNativeChange(selectableElement);
             if (this.displayOnlySelected && !this.selectedElements.length) {
                 this.displayOnlySelected = false;
@@ -6627,11 +6653,15 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
     async loadData(perpage = this.itemsPerPage, searchTerm) {
         return new Promise((resolve, reject) => {
             if (this.remoteResource) {
+                if (this.loading) {
+                    return resolve();
+                }
                 if (perpage == this.itemsPerPage) {
                     this.containerRef?.nativeElement?.scrollTo({ top: 0 });
                 }
                 this.selectableElements = [];
                 this.loading = true;
+                this.itemsPerPage = perpage;
                 const pagination = { ...this.pagination, ...{ per_page: perpage } };
                 const filters = searchTerm ? { [this.bindSearch]: searchTerm } : null;
                 this.subscriptions.push(this.ngtHttpService.get(this.remoteResource, filters, pagination).subscribe((response) => {
@@ -6727,6 +6757,9 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
     isHidden() {
         return !this.containerRef?.nativeElement.offsetParent;
     }
+    isColoquentResources() {
+        return this.selectableElements?.length && typeof this.selectableElements[0].value['getApiId'] === 'function';
+    }
     destroySubscriptions() {
         this.subscriptions.forEach(subscription => subscription.unsubscribe());
         this.subscriptions = [];
@@ -6735,7 +6768,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
 NgtMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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($event, element)'>\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($event, element)' 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"] }, { 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: [
+    ], 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.3", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{
@@ -6744,7 +6777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         NgtMakeProvider(NgtMultiSelectComponent)
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], 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($event, element)'>\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($event, element)' 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"] }]
+                    ], 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"] }]
         }], ctorParameters: function () { return [{ type: NgtHttpService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
                     type: Optional
                 }, {
@@ -7429,7 +7462,7 @@ class NgtDropzoneComponent extends NgtBaseNgModel {
 NgtDropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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.3", 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"] }, { 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: [
+    ], 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.3", ngImport: i0, type: NgtDropzoneComponent, decorators: [{
@@ -7663,5 +7696,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtActionComponent, NgtActionModule, NgtAttachmentHttpService, NgtButtonComponent, NgtButtonModule, NgtCheckboxComponent, NgtCheckboxMode, NgtCheckboxModule, NgtCheckedElement, NgtContentComponent, NgtContentModule, NgtCustomFilter, NgtDatatableComponent, NgtDatatableModule, NgtDatatableParam, NgtDatatableSearchType, NgtDatatableType, NgtDateComponent, NgtDateLocale, NgtDateMode, NgtDateModule, NgtDropdownComponent, NgtDropdownContainerComponent, NgtDropdownModule, NgtDropdownOpenMethod, NgtDropzoneComponent, NgtDropzoneErrorType, NgtDropzoneFileTypeEnum, NgtDropzoneModule, NgtDropzonePreviewType, NgtFloatingButtonComponent, NgtFloatingButtonModule, NgtFloatingButtonType, NgtFormComponent, NgtFormModule, NgtFormState, NgtFormValidationMessageComponent, NgtHeaderNavComponent, NgtHeaderNavModule, NgtHelperComponent, NgtHelperModule, NgtHttpFormService, NgtHttpResourceService, NgtHttpService, NgtHttpValidationService, NgtInputComponent, NgtInputMaskEnum, NgtInputModule, NgtModalBodyComponent, NgtModalComponent, NgtModalFooterComponent, NgtModalHeaderComponent, NgtModalModule, NgtMultiSelectComponent, NgtMultiSelectModule, NgtPaginationComponent, NgtPaginationModule, NgtPopoverComponent, NgtPopoverModule, NgtPopoverOpenMethod, NgtPortletBodyComponent, NgtPortletComponent, NgtPortletFooterComponent, NgtPortletHeaderComponent, NgtPortletModule, NgtRadioButtonComponent, NgtRadioButtonContainerComponent, NgtRadioButtonModule, NgtSectionComponent, NgtSectionModule, NgtSelectComponent, NgtSelectDropdownPanelHeight, NgtSelectHeaderTmp, NgtSelectModule, NgtSelectOptionSelectedTmp, NgtSelectOptionTmp, NgtShiningComponent, NgtShiningModule, NgtShiningWidth, NgtSidenavComponent, NgtSidenavModule, NgtSliderColorSchemeEnum, NgtSliderComponent, NgtSliderModule, NgtStylizableDirective, NgtStylizableModule, NgtSvgComponent, NgtSvgModule, NgtTagComponent, NgtTagModule, NgtTbodyComponent, NgtTdCheckComponent, NgtTdComponent, NgtTextareaComponent, NgtTextareaModule, NgtThCheckComponent, NgtThComponent, NgtTheadComponent, NgtTrComponent, NgtTranslateService, Size, fadeDownAnimation, fadeUpAnimation, slideLeftToRightAnimation, slideRightToLeftAnimation };
+export { NgtActionComponent, NgtActionModule, NgtAttachmentHttpService, NgtButtonComponent, NgtButtonModule, NgtCheckboxComponent, NgtCheckboxMode, NgtCheckboxModule, NgtCheckedElement, NgtContentComponent, NgtContentModule, NgtCustomFilter, NgtDatatableComponent, NgtDatatableModule, NgtDatatableParam, NgtDatatableSearchType, NgtDatatableType, NgtDateComponent, NgtDateLocale, NgtDateMode, NgtDateModule, NgtDropdownComponent, NgtDropdownContainerComponent, NgtDropdownModule, NgtDropdownOpenMethod, NgtDropzoneComponent, NgtDropzoneErrorType, NgtDropzoneFileTypeEnum, NgtDropzoneModule, NgtDropzonePreviewType, NgtFloatingButtonComponent, NgtFloatingButtonModule, NgtFloatingButtonType, NgtFormComponent, NgtFormModule, NgtFormState, NgtFormValidationMessageComponent, NgtHeaderNavComponent, NgtHeaderNavModule, NgtHelperComponent, NgtHelperModule, NgtHttpFormService, NgtHttpResourceService, NgtHttpService, NgtHttpValidationService, NgtInputComponent, NgtInputModule, NgtModalBodyComponent, NgtModalComponent, NgtModalFooterComponent, NgtModalHeaderComponent, NgtModalModule, NgtMultiSelectComponent, NgtMultiSelectModule, NgtPaginationComponent, NgtPaginationModule, NgtPopoverComponent, NgtPopoverModule, NgtPopoverOpenMethod, NgtPortletBodyComponent, NgtPortletComponent, NgtPortletFooterComponent, NgtPortletHeaderComponent, NgtPortletModule, NgtRadioButtonComponent, NgtRadioButtonContainerComponent, NgtRadioButtonModule, NgtSectionComponent, NgtSectionModule, NgtSelectComponent, NgtSelectDropdownPanelHeight, NgtSelectHeaderTmp, NgtSelectModule, NgtSelectOptionSelectedTmp, NgtSelectOptionTmp, NgtShiningComponent, NgtShiningModule, NgtShiningWidth, NgtSidenavComponent, NgtSidenavModule, NgtSliderColorSchemeEnum, NgtSliderComponent, NgtSliderModule, NgtStylizableDirective, NgtStylizableModule, NgtSvgComponent, NgtSvgModule, NgtTagComponent, NgtTagModule, NgtTbodyComponent, NgtTdCheckComponent, NgtTdComponent, NgtTextareaComponent, NgtTextareaModule, NgtThCheckComponent, NgtThComponent, NgtTheadComponent, NgtTrComponent, NgtTranslateService, Size, fadeDownAnimation, fadeUpAnimation, slideLeftToRightAnimation, slideRightToLeftAnimation };
 //# sourceMappingURL=ng-tailwind.mjs.map