ng-tailwind 5.2.10 → 5.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1019,6 +1019,7 @@ class NgtDropdownComponent {
1019
1019
  this.changeDetector.detectChanges();
1020
1020
  this.bindContainerXPosition();
1021
1021
  this.bindContainerYPosition();
1022
+ this.onToggle.emit(this.isOpen);
1022
1023
  }
1023
1024
  closeOnSelectOption() {
1024
1025
  if (this.closeOnClick) {
@@ -1029,6 +1030,7 @@ class NgtDropdownComponent {
1029
1030
  this.isOpen = false;
1030
1031
  this.containerXPosition = null;
1031
1032
  this.containerYPosition = null;
1033
+ this.onToggle.emit(this.isOpen);
1032
1034
  }
1033
1035
  toggle() {
1034
1036
  setTimeout(() => {
@@ -1038,7 +1040,6 @@ class NgtDropdownComponent {
1038
1040
  else {
1039
1041
  this.open();
1040
1042
  }
1041
- this.onToggle.emit(this.isOpen);
1042
1043
  });
1043
1044
  }
1044
1045
  onHover(host, container) {
@@ -7206,6 +7207,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
7206
7207
  this.items = [];
7207
7208
  this.searchable = true;
7208
7209
  this.allowOriginalItemsUnselect = true;
7210
+ this.allowSelectAll = true;
7209
7211
  this.onDataChange = new EventEmitter();
7210
7212
  this.searchTerm = '';
7211
7213
  this.searchInputName = uuid();
@@ -7320,7 +7322,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
7320
7322
  this.refresh();
7321
7323
  }
7322
7324
  selectAll() {
7323
- if (!this.loading && !this.disabled()) {
7325
+ if (this.allowSelectAll && !this.loading && !this.disabled()) {
7324
7326
  this.selectAllCheckbox = !this.selectAllCheckbox;
7325
7327
  this.value = [];
7326
7328
  this.nativeValue = [];
@@ -7592,9 +7594,9 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
7592
7594
  }
7593
7595
  }
7594
7596
  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 });
7595
- 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: [
7597
+ 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", allowSelectAll: "allowSelectAll", autoSelectUniqueOption: "autoSelectUniqueOption", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
7596
7598
  NgtMakeProvider(NgtMultiSelectComponent)
7597
- ], 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", "helperReverseYPosition", "helperAutoXReverse", "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", "customValidator"], 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", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
7599
+ ], 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 *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [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'>", 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", "helperReverseYPosition", "helperAutoXReverse", "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", "customValidator"], 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", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
7598
7600
  { provide: ControlContainer, useExisting: NgForm }
7599
7601
  ], encapsulation: i0.ViewEncapsulation.None });
7600
7602
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{
@@ -7603,7 +7605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
7603
7605
  NgtMakeProvider(NgtMultiSelectComponent)
7604
7606
  ], viewProviders: [
7605
7607
  { provide: ControlContainer, useExisting: NgForm }
7606
- ], 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"] }]
7608
+ ], 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 *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [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'>", 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"] }]
7607
7609
  }], ctorParameters: function () {
7608
7610
  return [{ type: NgtHttpService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtFormComponent, decorators: [{
7609
7611
  type: Optional
@@ -7673,6 +7675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
7673
7675
  type: Input
7674
7676
  }], allowOriginalItemsUnselect: [{
7675
7677
  type: Input
7678
+ }], allowSelectAll: [{
7679
+ type: Input
7676
7680
  }], autoSelectUniqueOption: [{
7677
7681
  type: Input
7678
7682
  }], isRequired: [{