ng-tailwind 3.32.371 → 3.32.373
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/bundles/ng-tailwind.umd.js +52 -19
- package/bundles/ng-tailwind.umd.js.map +1 -1
- package/components/ngt-multi-select/ngt-multi-select.component.d.ts +5 -2
- package/esm2015/components/ngt-multi-select/ngt-multi-select.component.js +47 -17
- package/fesm2015/ng-tailwind.js +46 -16
- package/fesm2015/ng-tailwind.js.map +1 -1
- package/ng-tailwind.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -6769,8 +6769,14 @@
|
|
|
6769
6769
|
var _this = this;
|
|
6770
6770
|
setTimeout(function () { return _this.inputSearch.setFocus(); });
|
|
6771
6771
|
};
|
|
6772
|
-
NgtMultiSelectComponent.prototype.refresh = function () {
|
|
6773
|
-
|
|
6772
|
+
NgtMultiSelectComponent.prototype.refresh = function (itemsPerPage, searchTerm) {
|
|
6773
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
6774
|
+
return __generator(this, function (_d) {
|
|
6775
|
+
this.itemsPerPage = itemsPerPage !== undefined ? itemsPerPage : this.itemsPerPage;
|
|
6776
|
+
this.searchTerm = searchTerm !== undefined ? searchTerm : this.searchTerm;
|
|
6777
|
+
return [2 /*return*/, this.loadData(this.itemsPerPage, this.searchTerm)];
|
|
6778
|
+
});
|
|
6779
|
+
});
|
|
6774
6780
|
};
|
|
6775
6781
|
NgtMultiSelectComponent.prototype.reset = function () {
|
|
6776
6782
|
this.value = [];
|
|
@@ -6785,7 +6791,8 @@
|
|
|
6785
6791
|
this.value = [];
|
|
6786
6792
|
this.nativeValue = [];
|
|
6787
6793
|
this.selectedElements = [];
|
|
6788
|
-
this.
|
|
6794
|
+
var perpage = this.selectAllCheckbox ? this.pagination.total : this.itemsPerPage;
|
|
6795
|
+
this.loadData(perpage, this.searchTerm)
|
|
6789
6796
|
.then(function () {
|
|
6790
6797
|
var _a, _b;
|
|
6791
6798
|
(_b = (_a = _this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
@@ -6796,6 +6803,28 @@
|
|
|
6796
6803
|
});
|
|
6797
6804
|
}
|
|
6798
6805
|
};
|
|
6806
|
+
NgtMultiSelectComponent.prototype.selectElements = function (elements) {
|
|
6807
|
+
var _this = this;
|
|
6808
|
+
if (!this.isDisabled) {
|
|
6809
|
+
var elementIds_1 = this.isColoquentResources() ? elements.map(function (element) { return element.getApiId(); }) : elements;
|
|
6810
|
+
this.selectableElements.forEach(function (selectableElement) {
|
|
6811
|
+
var value = selectableElement.value;
|
|
6812
|
+
if (!selectableElement.isSelected
|
|
6813
|
+
&& ((_this.isColoquentResources() && elementIds_1.includes(value.getApiId()))
|
|
6814
|
+
|| elementIds_1.includes(value))) {
|
|
6815
|
+
selectableElement.isSelected = true;
|
|
6816
|
+
_this.handleElementSelection(selectableElement);
|
|
6817
|
+
}
|
|
6818
|
+
});
|
|
6819
|
+
}
|
|
6820
|
+
};
|
|
6821
|
+
NgtMultiSelectComponent.prototype.toggleItem = function (selectableElement, event) {
|
|
6822
|
+
event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
|
|
6823
|
+
if (!this.isDisabled) {
|
|
6824
|
+
selectableElement.isSelected = !selectableElement.isSelected;
|
|
6825
|
+
this.handleElementSelection(selectableElement);
|
|
6826
|
+
}
|
|
6827
|
+
};
|
|
6799
6828
|
NgtMultiSelectComponent.prototype.onNativeChange = function (selectableElement) {
|
|
6800
6829
|
if (this.componentReady) {
|
|
6801
6830
|
this.handleElementSelection(selectableElement);
|
|
@@ -6824,32 +6853,26 @@
|
|
|
6824
6853
|
}
|
|
6825
6854
|
}
|
|
6826
6855
|
};
|
|
6827
|
-
NgtMultiSelectComponent.prototype.toggleItem = function (event, selectableElement) {
|
|
6828
|
-
event.stopImmediatePropagation();
|
|
6829
|
-
if (!this.isDisabled) {
|
|
6830
|
-
selectableElement.isSelected = !selectableElement.isSelected;
|
|
6831
|
-
this.handleElementSelection(selectableElement);
|
|
6832
|
-
}
|
|
6833
|
-
};
|
|
6834
6856
|
NgtMultiSelectComponent.prototype.search = function (term) {
|
|
6835
6857
|
var _this = this;
|
|
6836
|
-
if (!this.componentReady || term === undefined || term === null || term === this.previousSearchTerm) {
|
|
6858
|
+
if (!this.componentReady || term === undefined || term === null || term === this.previousSearchTerm || this.loading) {
|
|
6837
6859
|
return;
|
|
6838
6860
|
}
|
|
6839
6861
|
if (this.searchTimeout) {
|
|
6840
6862
|
clearTimeout(this.searchTimeout);
|
|
6841
6863
|
}
|
|
6842
6864
|
this.searchTimeout = setTimeout(function () {
|
|
6843
|
-
var _a, _b;
|
|
6865
|
+
var _a, _b, _c;
|
|
6844
6866
|
_this.previousSearchTerm = term;
|
|
6867
|
+
_this.selectAllCheckbox = ((_a = _this.selectedElements) === null || _a === void 0 ? void 0 : _a.length) == _this.selectableResourcesCount;
|
|
6845
6868
|
if (!term) {
|
|
6846
6869
|
_this.inSearch = false;
|
|
6847
|
-
if ((
|
|
6870
|
+
if ((_b = _this.items) === null || _b === void 0 ? void 0 : _b.length) {
|
|
6848
6871
|
return;
|
|
6849
6872
|
}
|
|
6850
6873
|
}
|
|
6851
6874
|
_this.inSearch = true;
|
|
6852
|
-
if ((
|
|
6875
|
+
if ((_c = _this.items) === null || _c === void 0 ? void 0 : _c.length) {
|
|
6853
6876
|
_this.selectableElementsOnSearch = _this.selectableElements.filter(function (item) { return _this.getSelectableElementValue(item).includes(term); });
|
|
6854
6877
|
}
|
|
6855
6878
|
else {
|
|
@@ -6886,7 +6909,6 @@
|
|
|
6886
6909
|
}
|
|
6887
6910
|
else if (!selectableElement.isSelected && this.isSelectedElement(selectableElement)) {
|
|
6888
6911
|
this.selectedElements = this.selectedElements.filter(function (selectedElement) { return selectedElement.uuid !== selectableElement.uuid; });
|
|
6889
|
-
;
|
|
6890
6912
|
this.onNativeChange(selectableElement);
|
|
6891
6913
|
if (this.displayOnlySelected && !this.selectedElements.length) {
|
|
6892
6914
|
this.displayOnlySelected = false;
|
|
@@ -6897,23 +6919,30 @@
|
|
|
6897
6919
|
if (perpage === void 0) { perpage = this.itemsPerPage; }
|
|
6898
6920
|
return __awaiter(this, void 0, void 0, function () {
|
|
6899
6921
|
var _this = this;
|
|
6900
|
-
return __generator(this, function (
|
|
6922
|
+
return __generator(this, function (_d) {
|
|
6901
6923
|
return [2 /*return*/, new Promise(function (resolve, reject) {
|
|
6902
|
-
var
|
|
6924
|
+
var _d;
|
|
6903
6925
|
var _a, _b;
|
|
6904
6926
|
if (_this.remoteResource) {
|
|
6927
|
+
if (_this.loading) {
|
|
6928
|
+
return resolve();
|
|
6929
|
+
}
|
|
6905
6930
|
if (perpage == _this.itemsPerPage) {
|
|
6906
6931
|
(_b = (_a = _this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
6907
6932
|
}
|
|
6908
6933
|
_this.selectableElements = [];
|
|
6909
6934
|
_this.loading = true;
|
|
6935
|
+
_this.itemsPerPage = perpage;
|
|
6910
6936
|
var pagination = Object.assign(Object.assign({}, _this.pagination), { per_page: perpage });
|
|
6911
|
-
var filters = searchTerm ? (
|
|
6937
|
+
var filters = searchTerm ? (_d = {}, _d[_this.bindSearch] = searchTerm, _d) : null;
|
|
6912
6938
|
_this.subscriptions.push(_this.ngtHttpService.get(_this.remoteResource, filters, pagination).subscribe(function (response) {
|
|
6913
6939
|
_this.bindSelectableElements(response.data);
|
|
6914
6940
|
_this.pagination = response.meta.pagination;
|
|
6915
6941
|
_this.itemsTotal = _this.pagination.total;
|
|
6916
6942
|
_this.loading = false;
|
|
6943
|
+
if (!_this.selectableResourcesCount && !searchTerm) {
|
|
6944
|
+
_this.selectableResourcesCount = _this.pagination.total;
|
|
6945
|
+
}
|
|
6917
6946
|
_this.onDataChange.emit(_this.selectableElements);
|
|
6918
6947
|
_this.componentReady = true;
|
|
6919
6948
|
_this.changeDetector.detectChanges();
|
|
@@ -7011,6 +7040,10 @@
|
|
|
7011
7040
|
var _a;
|
|
7012
7041
|
return !((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetParent);
|
|
7013
7042
|
};
|
|
7043
|
+
NgtMultiSelectComponent.prototype.isColoquentResources = function () {
|
|
7044
|
+
var _a;
|
|
7045
|
+
return ((_a = this.selectableElements) === null || _a === void 0 ? void 0 : _a.length) && typeof this.selectableElements[0].value['getApiId'] === 'function';
|
|
7046
|
+
};
|
|
7014
7047
|
NgtMultiSelectComponent.prototype.destroySubscriptions = function () {
|
|
7015
7048
|
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
|
|
7016
7049
|
this.subscriptions = [];
|
|
@@ -7020,7 +7053,7 @@
|
|
|
7020
7053
|
NgtMultiSelectComponent.decorators = [
|
|
7021
7054
|
{ type: core.Component, args: [{
|
|
7022
7055
|
selector: 'ngt-multi-select',
|
|
7023
|
-
template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 16rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='isDisabled'>\n <div class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox class=\"flex\" title=\"Selecionar todos\" [label]=\"!searchable ? 'Selecionar todos' : ''\"\n [(ngModel)]=\"selectAllCheckbox\" [name]=\"selectAllCheckboxName\" [isClickDisabled]='true'\n [isDisabled]='loading || isDisabled' h='h-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='isDisabled' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex justify-center items-center h-full w-full cursor-wait\">\n <div class=\"div-loader\"></div>\n </div>\n\n <div class=\"w-full overflow-y-auto text-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem($event
|
|
7056
|
+
template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n {{ label }}:\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 16rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='isDisabled'>\n <div class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox class=\"flex\" title=\"Selecionar todos\" [label]=\"!searchable ? 'Selecionar todos' : ''\"\n [(ngModel)]=\"selectAllCheckbox\" [name]=\"selectAllCheckboxName\" [isClickDisabled]='true'\n [isDisabled]='loading || isDisabled' h='h-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n [loading]='loading' [isDisabled]='isDisabled' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex justify-center items-center h-full w-full cursor-wait\">\n <div class=\"div-loader\"></div>\n </div>\n\n <div class=\"w-full overflow-y-auto text-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n <ng-template let-element #elementCheckboxTemplate>\n <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true' [isDisabled]='isDisabled'\n h='h-5' w='w-5' (click)='toggleItem(element, $event)' ngt-stylizable>\n </ngt-checkbox>\n </ng-template>\n\n <ng-template let-element #defaultOptionTemplate>\n {{ getSelectableElementValue(element) }}\n </ng-template>\n\n <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element }\">\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n </p>\n </div>\n</div>\n\n<div class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n <span class=\"text-sm mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading' h='h-5' w='w-5' ngt-stylizable>\n </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>",
|
|
7024
7057
|
encapsulation: core.ViewEncapsulation.None,
|
|
7025
7058
|
providers: [
|
|
7026
7059
|
NgtMakeProvider(NgtMultiSelectComponent)
|