ng-tailwind 5.0.13 → 5.0.15

package/fesm2020/ng-tailwind.mjs

@@ -1104,7 +1104,7 @@ class NgtDropdownComponent {
     }
 }
 NgtDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDropdownComponent, deps: [{ token: NgtDropdownContainerComponent, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NgtDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: { scrollable: "scrollable", autoXReverse: "autoXReverse", autoYReverse: "autoYReverse", reverseXPosition: "reverseXPosition", reverseYPosition: "reverseYPosition", closeOnClick: "closeOnClick", closeTimeout: "closeTimeout", openMethod: "openMethod" }, outputs: { onToggle: "onToggle", onHostClick: "onHostClick" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-64 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+NgtDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDropdownComponent, selector: "ngt-dropdown", inputs: { scrollable: "scrollable", autoXReverse: "autoXReverse", autoYReverse: "autoYReverse", reverseXPosition: "reverseXPosition", reverseYPosition: "reverseYPosition", closeOnClick: "closeOnClick", closeTimeout: "closeTimeout", openMethod: "openMethod" }, outputs: { onToggle: "onToggle", onHostClick: "onHostClick" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-52 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" type=\"button\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>\n", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('openClose', [
             state('open', style({ opacity: 1, transform: 'translateY(0px)' })),
             state('closed', style({ opacity: 0, transform: 'translateY(-10px)' })),
@@ -1123,7 +1123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                                 animate(300)
                             ]),
                         ]),
-                    ], template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-64 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"] }]
+                    ], template: "<div class=\"sm:relative\">\n    <div (mouseenter)=\"onHover(host, container)\" (click)=\"onClick($event, host, container)\"\n        (contextmenu)=\"onRightClick($event)\" #host>\n        <ng-content select='[host]'></ng-content>\n    </div>\n\n    <div [hidden]='!isOpen'\n        class=\"{{ shouldReverseYPosition() ? 'mb-12 bottom-0' : 'mt-4' }} {{ shouldReverseXPosition() ? 'left-0': 'right-0' }} ngt-dropdown-container sm:mr-0 mr-3 max-w-xs absolute\"\n        [@openClose]=\"isOpen ? 'open' : 'closed'\" (mouseenter)=\"onHover(host, container)\"\n        (click)='closeOnSelectOption()' style=\"z-index: 1100 !important;\" #container>\n\n        <div class=\"flex flex-col\" [ngClass]=\"{ 'h-52 overflow-auto':scrollable }\">\n            <ng-content select='[container]'></ng-content>\n        </div>\n    </div>\n</div>\n\n<button *ngIf=\"isOpen && openMethod != 'HOVER'\" type=\"button\" class=\"fixed z-40 inset-0 h-full w-full opacity-0 cursor-default\"\n    (click)='toggle()'>\n</button>\n", styles: [".ngt-dropdown-container{max-height:30rem;width:max-content}\n"] }]
         }], ctorParameters: function () { return [{ type: NgtDropdownContainerComponent, decorators: [{
                     type: Optional
                 }, {
@@ -2784,9 +2784,9 @@ class NgtInputComponent extends NgtBaseNgModel {
     }
 }
 NgtInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputComponent, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtHttpValidationService, optional: true, skipSelf: true }, { token: NgtHttpResourceService, optional: true, skipSelf: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtInputComponent, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", uppercase: "uppercase", customInnerContentTemplate: "customInnerContentTemplate", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", validatePassword: "validatePassword", passwordableId: "passwordableId", passwordPolicyId: "passwordPolicyId", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", validateMinValueOnMask: "validateMinValueOnMask", externalServerDependency: "externalServerDependency", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse" }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult" }, providers: [
+NgtInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtInputComponent, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", uppercase: "uppercase", customInnerContentTemplate: "customInnerContentTemplate", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", useInputEvent: "useInputEvent", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", validatePassword: "validatePassword", passwordableId: "passwordableId", passwordPolicyId: "passwordPolicyId", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", validateMinValueOnMask: "validateMinValueOnMask", externalServerDependency: "externalServerDependency", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse" }, 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', 'font']) }}\" [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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        <span [innerHtml]=\"helpText\"></span>\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]=\"disabled()\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [style]=\"uppercase ? 'text-transform: uppercase!important':''\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" (mouseleave)=\"restorePlaceholder()\" (focusout)=\"restorePlaceholder()\"\n        (change)=\"onNativeChange()\" #element>\n    <span *ngIf=\"innerLeftIcon\"\n        class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n        (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"text-xs fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-4\" [src]='innerLeftIcon'>\n    </span>\n\n    <div *ngIf=\"customInnerContentTemplate\" class=\"absolute self-center px-2\">\n        <ng-container [ngTemplateOutlet]=\"customInnerContentTemplate\"></ng-container>\n    </div>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"!disabled() && allowClear && value && !loading\"\n            class=\"self-center right-0 px-2 text-red-400 cursor-pointer\" (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'\"\n            class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n            (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"text-xxs fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xxs 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "helperReverseYPosition"] }], 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', 'font']) }}\" [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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        <span [innerHtml]=\"helpText\"></span>\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]=\"disabled()\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [style]=\"uppercase ? 'text-transform: uppercase!important':''\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" (mouseleave)=\"restorePlaceholder()\" (focusout)=\"restorePlaceholder()\"\n        (input)=\"useInputEvent ? onNativeChange() : null\" (change)=\"!useInputEvent ? onNativeChange() : null\" #element>\n    <span *ngIf=\"innerLeftIcon\"\n        class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n        (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"text-xs fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-4\" [src]='innerLeftIcon'>\n    </span>\n\n    <div *ngIf=\"customInnerContentTemplate\" class=\"absolute self-center px-2\">\n        <ng-container [ngTemplateOutlet]=\"customInnerContentTemplate\"></ng-container>\n    </div>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"!disabled() && allowClear && value && !loading\"\n            class=\"self-center right-0 px-2 text-red-400 cursor-pointer\" (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'\"\n            class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n            (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"text-xxs fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xxs 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "helperReverseYPosition"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtInputComponent, decorators: [{
@@ -2795,7 +2795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         NgtMakeProvider(NgtInputComponent),
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], template: "<label *ngIf=\"label\" class=\"mb-2 flex {{ ngtStyle.compile(['color.text', 'text', 'font']) }}\" [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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        <span [innerHtml]=\"helpText\"></span>\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]=\"disabled()\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [style]=\"uppercase ? 'text-transform: uppercase!important':''\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" (mouseleave)=\"restorePlaceholder()\" (focusout)=\"restorePlaceholder()\"\n        (change)=\"onNativeChange()\" #element>\n    <span *ngIf=\"innerLeftIcon\"\n        class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n        (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"text-xs fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-4\" [src]='innerLeftIcon'>\n    </span>\n\n    <div *ngIf=\"customInnerContentTemplate\" class=\"absolute self-center px-2\">\n        <ng-container [ngTemplateOutlet]=\"customInnerContentTemplate\"></ng-container>\n    </div>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"!disabled() && allowClear && value && !loading\"\n            class=\"self-center right-0 px-2 text-red-400 cursor-pointer\" (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'\"\n            class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n            (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"text-xxs fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xxs 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"] }]
+                    ], template: "<label *ngIf=\"label\" class=\"mb-2 flex {{ ngtStyle.compile(['color.text', 'text', 'font']) }}\" [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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        <span [innerHtml]=\"helpText\"></span>\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]=\"disabled()\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [style]=\"uppercase ? 'text-transform: uppercase!important':''\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" (mouseleave)=\"restorePlaceholder()\" (focusout)=\"restorePlaceholder()\"\n        (input)=\"useInputEvent ? onNativeChange() : null\" (change)=\"!useInputEvent ? onNativeChange() : null\" #element>\n    <span *ngIf=\"innerLeftIcon\"\n        class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n        (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"text-xs fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-4\" [src]='innerLeftIcon'>\n    </span>\n\n    <div *ngIf=\"customInnerContentTemplate\" class=\"absolute self-center px-2\">\n        <ng-container [ngTemplateOutlet]=\"customInnerContentTemplate\"></ng-container>\n    </div>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"!disabled() && allowClear && value && !loading\"\n            class=\"self-center right-0 px-2 text-red-400 cursor-pointer\" (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'\"\n            class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n            (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"text-xxs fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xxs 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"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
                     type: Self
                 }, {
@@ -2881,6 +2881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], jit: [{
                 type: Input
+            }], useInputEvent: [{
+                type: Input
             }], findExistingResource: [{
                 type: Input
             }], allowPhoneValidation: [{
@@ -3096,6 +3098,27 @@ class NgtSelectComponent extends NgtBaseNgModel {
             }
         };
         this.compareWith = (a, b) => a === b;
+        this.itemSearchFn = (term, item) => {
+            if (this.remoteResource) {
+                return null;
+            }
+            let formattedValue;
+            if (typeof item == 'string') {
+                formattedValue = item;
+            }
+            if (!this.bindLabel) {
+                return null;
+            }
+            if (typeof item['getAttribute'] == 'function') {
+                formattedValue = item.getAttribute([this.bindLabel]);
+            }
+            else if (typeof item == 'object') {
+                formattedValue = item[this.bindLabel];
+            }
+            return formattedValue
+                ? formattedValue.toLocaleLowerCase().includes(term.toLocaleLowerCase())
+                : null;
+        };
         if (this.ngtStylizableDirective) {
             this.ngtStyle = this.ngtStylizableDirective.getNgtStylizableService();
         }
@@ -3457,7 +3480,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
 NgtSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
 NgtSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectComponent, selector: "ngt-select", inputs: { label: "label", labelIcon: "labelIcon", labelIconColor: "labelIconColor", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", loadingText: "loadingText", notFoundText: "notFoundText", dropdownPosition: "dropdownPosition", typeToSearchText: "typeToSearchText", clearAllTooltip: "clearAllTooltip", placeholder: "placeholder", createText: "createText", labelForId: "labelForId", dropdownPanelMinHeight: "dropdownPanelMinHeight", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", 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", autoSelectUniqueOption: "autoSelectUniqueOption", groupValue: "groupValue", trackBy: "trackBy", sortSelectedItemsFn: "sortSelectedItemsFn", isAllowedToRemoveFn: "isAllowedToRemoveFn", isRequired: "isRequired", compareWith: "compareWith" }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onSelectedItemRemove: "onSelectedItemRemove", onClear: "onClear", onClose: "onClose" }, 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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n    style=\"min-height: 2.5rem;\">\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]='disabled() || 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)\" (close)=\"onClose.emit()\"\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 && !cantRemoveItem(item)\">\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\">\n", 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:2.5rem!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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.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: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i9.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i9.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", "helperReverseYPosition"] }, { 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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n    style=\"min-height: 2.5rem;\">\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        [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly'\n        [clearable]=\"clearable && hasSelectedValue()\" [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\"\n        [labelForId]=\"labelForId\" [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)\" (close)=\"onClose.emit()\"\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 && !cantRemoveItem(item)\">\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\">\n", 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:2.5rem!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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.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: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i9.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i9.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", "helperReverseYPosition"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, decorators: [{
@@ -3466,7 +3489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         NgtMakeProvider(NgtSelectComponent)
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], encapsulation: ViewEncapsulation.None, 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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n    style=\"min-height: 2.5rem;\">\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]='disabled() || 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)\" (close)=\"onClose.emit()\"\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 && !cantRemoveItem(item)\">\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\">\n", 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:2.5rem!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"] }]
+                    ], encapsulation: ViewEncapsulation.None, 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\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n    style=\"min-height: 2.5rem;\">\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        [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly'\n        [clearable]=\"clearable && hasSelectedValue()\" [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\"\n        [labelForId]=\"labelForId\" [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)\" (close)=\"onClose.emit()\"\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 && !cantRemoveItem(item)\">\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\">\n", 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:2.5rem!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"] }]
         }], ctorParameters: function () { return [{ type: NgtStylizableDirective, decorators: [{
                     type: Optional
                 }, {
@@ -4823,7 +4846,7 @@ class NgtThComponent {
     }
 }
 NgtThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body [isDisabled]=\"false\">\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "helperReverseYPosition", "helperAutoXReverse"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["isDisabled"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled", "forceEnable"] }, { 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"] }] });
+NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body [isDisabled]=\"false\">\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "helperReverseYPosition", "helperAutoXReverse"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["isDisabled"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled", "forceEnable"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngt-th]', template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        (onClose)=\"ngtDataTable.searchModal.close()\">\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-gray-800 text-sm\">{{ searchLabel }}</span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body [isDisabled]=\"false\">\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>" }]
@@ -5221,9 +5244,6 @@ class NgtSliderComponent extends NgtBaseNgModel {
         }
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            this.display.nativeElement.innerHTML = this.value;
-        }, 500);
         this.renderer.listen(this.element.nativeElement, 'change', () => {
             this.onNativeChange(this.element.nativeElement.value);
         });
@@ -5245,7 +5265,7 @@ class NgtSliderComponent extends NgtBaseNgModel {
 NgtSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, deps: [{ token: i2$1.ControlContainer, host: true, optional: true }, { token: i0.Renderer2 }, { token: NgtFormComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
 NgtSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSliderComponent, selector: "ngt-slider", inputs: { label: "label", shining: "shining", isDisabled: "isDisabled", showPercentageSymbol: "showPercentageSymbol", name: "name", min: "min", max: "max", step: "step", color: "color" }, providers: [
         NgtMakeProvider(NgtSliderComponent),
-    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "display", first: true, predicate: ["display"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], viewProviders: [
+    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "display", first: true, predicate: ["display"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value' [min]='min'\n            [max]='max' [step]='step' [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display>{{ value }}</span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSliderComponent, decorators: [{
@@ -5254,7 +5274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         NgtMakeProvider(NgtSliderComponent),
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value'\n            oninput=\"display.innerHTML=value\" onchange=\"display.innerHTML=value\" [min]='min' [max]='max' [step]='step'\n            [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display></span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"] }]
+                    ], template: "<div class=\"flex flex-col\">\n    <span *ngIf='label && !shining' class=\"text-sm mb-2\">{{ label }}:</span>\n\n    <div class=\"{{ shining ? 'hidden' : 'flex' }} items-center\">\n        <input class=\"block w-full cursor-pointer overflow-hidden appearance-none bg-gray-400 {{color}}\"\n            [class.cursor-not-allowed]=\"isDisabled\" type=\"range\" [name]='name' ([ngModel])='value' [min]='min'\n            [max]='max' [step]='step' [disabled]=\"isDisabled\" #element>\n\n        <span id='display' class=\"text-xs ml-2 font-semibold\" #display>{{ value }}</span>\n        <span *ngIf=\"showPercentageSymbol\" class=\"text-xs font-semibold\">%</span>\n    </div>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-full h-6\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#FFF;border-radius:50%}.primary::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #4299e1}.success::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #ffb822}.danger::-webkit-slider-thumb{box-shadow:-405px 0 0 400px #f56565}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -5834,10 +5854,7 @@ class NgtDateComponent extends NgtBaseNgModel {
         }
     }
     ngOnDestroy() {
-        const flatpickrElement = document.getElementsByClassName('flatpickr-calendar');
-        if (flatpickrElement?.length) {
-            flatpickrElement[flatpickrElement.length - 1].remove();
-        }
+        this.ng2FlatpickrComponent.flatpickr['calendarContainer']?.remove();
         this.destroySubscriptions();
     }
     clearInput(clearInstance = false) {
@@ -7252,7 +7269,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
 NgtMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 NgtMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtMultiSelectComponent, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", autoSelectUniqueOption: "autoSelectUniqueOption", 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-xs\" [class.mb-2]='!hasValidationErrors()'>\n    {{ label }}:\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" 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: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\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 || disabled()' h='h-4' w='w-4' (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]='disabled()' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-xs {{ 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 {{ disabled() ? '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'\n                        [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n                        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-xs 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 || disabled()' 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'>\n", 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "helperReverseYPosition", "helperAutoXReverse"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { 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-xs\" [class.mb-2]='!hasValidationErrors()'>\n    {{ label }}:\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" 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: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\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 || disabled()' h='h-4' w='w-4' (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]='disabled()' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-xs {{ 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 {{ disabled() ? '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'\n                        [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n                        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-xs 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 || disabled()' 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'>\n", 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "helperReverseYPosition", "helperAutoXReverse"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{