ng-tailwind 4.4.39 → 4.5.39
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.
- package/components/ngt-multi-select/ngt-multi-select.component.d.ts +4 -1
- package/esm2020/components/ngt-multi-select/ngt-multi-select.component.mjs +19 -8
- package/fesm2015/ng-tailwind.mjs +19 -7
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +18 -7
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2015/ng-tailwind.mjs
CHANGED
|
@@ -6933,6 +6933,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
6933
6933
|
this.itemsPerPage = 15;
|
|
6934
6934
|
this.items = [];
|
|
6935
6935
|
this.searchable = true;
|
|
6936
|
+
this.allowOriginalItemsUnselect = true;
|
|
6936
6937
|
this.onDataChange = new EventEmitter();
|
|
6937
6938
|
this.searchTerm = '';
|
|
6938
6939
|
this.searchInputName = uuid();
|
|
@@ -6989,7 +6990,10 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
6989
6990
|
ngDoCheck() {
|
|
6990
6991
|
if (!this.becameVisible && !this.isHidden()) {
|
|
6991
6992
|
this.becameVisible = true;
|
|
6992
|
-
this.loadData().then(() =>
|
|
6993
|
+
this.loadData().then(() => {
|
|
6994
|
+
this.initComponentValidation();
|
|
6995
|
+
this.originalItems = [...this.selectedElements];
|
|
6996
|
+
});
|
|
6993
6997
|
}
|
|
6994
6998
|
}
|
|
6995
6999
|
ngOnChanges(changes) {
|
|
@@ -7034,13 +7038,13 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
7034
7038
|
this.selectAllCheckbox = !this.selectAllCheckbox;
|
|
7035
7039
|
this.value = [];
|
|
7036
7040
|
this.nativeValue = [];
|
|
7037
|
-
this.selectedElements = [];
|
|
7041
|
+
this.selectedElements = this.allowOriginalItemsUnselect ? [] : [...this.originalItems];
|
|
7038
7042
|
const perpage = this.selectAllCheckbox ? this.pagination.total : this.itemsPerPage;
|
|
7039
7043
|
this.loadData(perpage, this.searchTerm)
|
|
7040
7044
|
.then(() => {
|
|
7041
7045
|
var _a, _b;
|
|
7042
7046
|
(_b = (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
7043
|
-
this.selectableElements.forEach(element => element.isSelected = this.selectAllCheckbox);
|
|
7047
|
+
this.selectableElements.forEach(element => element.isSelected = this.selectAllCheckbox || this.isSelectedElement(element));
|
|
7044
7048
|
if (this.selectAllCheckbox) {
|
|
7045
7049
|
this.selectedElements = this.selectableElements;
|
|
7046
7050
|
}
|
|
@@ -7063,7 +7067,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
7063
7067
|
}
|
|
7064
7068
|
toggleItem(selectableElement, event) {
|
|
7065
7069
|
event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
|
|
7066
|
-
if (!this.disabled()) {
|
|
7070
|
+
if (!this.disabled() && this.canSelectItem(selectableElement)) {
|
|
7067
7071
|
selectableElement.isSelected = !selectableElement.isSelected;
|
|
7068
7072
|
this.handleElementSelection(selectableElement);
|
|
7069
7073
|
}
|
|
@@ -7144,6 +7148,12 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
7144
7148
|
var _a;
|
|
7145
7149
|
return ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.errors) && (this.formControl.dirty || (this.formContainer && this.formContainer['submitted']));
|
|
7146
7150
|
}
|
|
7151
|
+
canSelectItem(item) {
|
|
7152
|
+
var _a;
|
|
7153
|
+
return !this.disabled()
|
|
7154
|
+
&& (this.allowOriginalItemsUnselect
|
|
7155
|
+
|| !((_a = this.originalItems) === null || _a === void 0 ? void 0 : _a.some(originalItem => originalItem.uuid == item.uuid)));
|
|
7156
|
+
}
|
|
7147
7157
|
disabled() {
|
|
7148
7158
|
return this.isDisabled || this.isDisabledByParent();
|
|
7149
7159
|
}
|
|
@@ -7290,9 +7300,9 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
|
|
|
7290
7300
|
}
|
|
7291
7301
|
}
|
|
7292
7302
|
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 });
|
|
7293
|
-
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", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
|
|
7303
|
+
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", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
|
|
7294
7304
|
NgtMakeProvider(NgtMultiSelectComponent)
|
|
7295
|
-
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\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: 16rem;\" [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-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='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-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ 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'
|
|
7305
|
+
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\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: 16rem;\" [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-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='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-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ 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-sm mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || 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", "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: [
|
|
7296
7306
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
7297
7307
|
], encapsulation: i0.ViewEncapsulation.None });
|
|
7298
7308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, decorators: [{
|
|
@@ -7301,7 +7311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
7301
7311
|
NgtMakeProvider(NgtMultiSelectComponent)
|
|
7302
7312
|
], viewProviders: [
|
|
7303
7313
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
7304
|
-
], template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\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: 16rem;\" [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-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='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-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ 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'
|
|
7314
|
+
], template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\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: 16rem;\" [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-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='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-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ 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-sm mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || 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"] }]
|
|
7305
7315
|
}], ctorParameters: function () {
|
|
7306
7316
|
return [{ type: NgtHttpService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtFormComponent, decorators: [{
|
|
7307
7317
|
type: Optional
|
|
@@ -7369,6 +7379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
7369
7379
|
type: Input
|
|
7370
7380
|
}], searchable: [{
|
|
7371
7381
|
type: Input
|
|
7382
|
+
}], allowOriginalItemsUnselect: [{
|
|
7383
|
+
type: Input
|
|
7372
7384
|
}], isRequired: [{
|
|
7373
7385
|
type: Input
|
|
7374
7386
|
}], isDisabled: [{
|