ng-tailwind 5.0.17 → 5.0.19
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-datatable/ngt-datatable.component.d.ts +3 -0
- package/esm2020/components/ngt-datatable/ngt-datatable.component.mjs +25 -4
- package/esm2020/components/ngt-datatable/ngt-th-check/ngt-th-check.component.mjs +4 -2
- package/esm2020/components/ngt-select/ngt-select.component.mjs +11 -4
- package/esm2020/helpers/promise/promise-helper.mjs +4 -0
- package/fesm2015/ng-tailwind.mjs +55 -20
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +40 -7
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/helpers/promise/promise-helper.d.ts +1 -0
- package/package.json +1 -1
package/fesm2020/ng-tailwind.mjs
CHANGED
|
@@ -3028,6 +3028,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
3028
3028
|
args: [{ selector: '[ngt-select-header]' }]
|
|
3029
3029
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
3030
3030
|
|
|
3031
|
+
function delay(ms) {
|
|
3032
|
+
return new Promise(resolve => setTimeout(resolve, ms));
|
|
3033
|
+
}
|
|
3034
|
+
|
|
3031
3035
|
class NgtSelectComponent extends NgtBaseNgModel {
|
|
3032
3036
|
constructor(ngtStylizableDirective, formContainer, ngtTranslateService, injector, ngtHttp, changeDetector, ngtForm, ngtSection, ngtModal) {
|
|
3033
3037
|
super();
|
|
@@ -3077,7 +3081,6 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3077
3081
|
this.onClear = new EventEmitter();
|
|
3078
3082
|
this.onClose = new EventEmitter();
|
|
3079
3083
|
this.nativeName = uuid();
|
|
3080
|
-
this.ngSelectItems = [];
|
|
3081
3084
|
this.componentReady = false;
|
|
3082
3085
|
this.originalPerPage = 15;
|
|
3083
3086
|
this.subscriptions = [];
|
|
@@ -3321,7 +3324,14 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3321
3324
|
disabled() {
|
|
3322
3325
|
return this.isDisabled || this.isDisabledByParent();
|
|
3323
3326
|
}
|
|
3324
|
-
calculateDropdownPosition(parentElement) {
|
|
3327
|
+
async calculateDropdownPosition(parentElement) {
|
|
3328
|
+
while (!this.componentReady || this.loading || this.ngSelectComponent.showNoItemsFound()) {
|
|
3329
|
+
await delay(200);
|
|
3330
|
+
if (this.ngSelectComponent.showNoItemsFound() && !this.loading && this.componentReady) {
|
|
3331
|
+
break;
|
|
3332
|
+
}
|
|
3333
|
+
}
|
|
3334
|
+
this.changeDetector.detectChanges();
|
|
3325
3335
|
setTimeout(() => {
|
|
3326
3336
|
const ngSelectElement = this.ngSelectComponent.element;
|
|
3327
3337
|
const ngSelectHeight = ngSelectElement.offsetHeight;
|
|
@@ -3331,7 +3341,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3331
3341
|
const parentYPosition = parentElement.getBoundingClientRect().y;
|
|
3332
3342
|
const ngSelectYPositionInsideParent = ngSelectYPosition - parentYPosition;
|
|
3333
3343
|
const openedSelectTotalHeight = openedSelectHeight + ngSelectYPositionInsideParent;
|
|
3334
|
-
const dropdownPosition = openedSelectTotalHeight > parentElement.clientHeight
|
|
3344
|
+
const dropdownPosition = openedSelectTotalHeight > (parentElement.clientHeight * 0.9)
|
|
3335
3345
|
? 'top'
|
|
3336
3346
|
: 'bottom';
|
|
3337
3347
|
this.ngSelectComponent.dropdownPanel['_currentPosition'] = dropdownPosition;
|
|
@@ -4170,6 +4180,22 @@ class NgtDatatableComponent {
|
|
|
4170
4180
|
}
|
|
4171
4181
|
});
|
|
4172
4182
|
}
|
|
4183
|
+
getTagFilterValue(filter) {
|
|
4184
|
+
const filtersTag = this.getFiltersTagArray(filter);
|
|
4185
|
+
return filtersTag.length > 1
|
|
4186
|
+
? filtersTag[0] + " +"
|
|
4187
|
+
: filtersTag[0];
|
|
4188
|
+
}
|
|
4189
|
+
getTitle(filter) {
|
|
4190
|
+
const filtersTag = this.getFiltersTagArray(filter);
|
|
4191
|
+
return filtersTag.length > 1
|
|
4192
|
+
? filtersTag.slice(1).join(",")
|
|
4193
|
+
: '';
|
|
4194
|
+
}
|
|
4195
|
+
getFiltersTagArray(filter) {
|
|
4196
|
+
const tag = filter?.value?.tagValue ? filter.value.tagValue : filter.value;
|
|
4197
|
+
return tag.split(",");
|
|
4198
|
+
}
|
|
4173
4199
|
loadData(page) {
|
|
4174
4200
|
return new Promise((resolve, reject) => {
|
|
4175
4201
|
const pagination = { ...this.ngtPagination.getPagination(), ...{ page: page } };
|
|
@@ -4272,7 +4298,12 @@ class NgtDatatableComponent {
|
|
|
4272
4298
|
}
|
|
4273
4299
|
this.onSelectedElementsChange.emit(this.selectedElements);
|
|
4274
4300
|
}));
|
|
4275
|
-
this.subscriptions.push(this.onSelectAllRegisters.subscribe(() =>
|
|
4301
|
+
this.subscriptions.push(this.onSelectAllRegisters.subscribe(() => {
|
|
4302
|
+
this.hasSelectedAllElements = !this.hasSelectedAllElements;
|
|
4303
|
+
if (!this.hasSelectedAllElements) {
|
|
4304
|
+
this.selectedElements = [];
|
|
4305
|
+
}
|
|
4306
|
+
}));
|
|
4276
4307
|
}
|
|
4277
4308
|
canApplyFilters(filters) {
|
|
4278
4309
|
if (!this.searching) {
|
|
@@ -4295,10 +4326,10 @@ class NgtDatatableComponent {
|
|
|
4295
4326
|
}
|
|
4296
4327
|
}
|
|
4297
4328
|
NgtDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4298
|
-
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n {{ filter.translation + ': ' + (filter
|
|
4329
|
+
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]='true' [isDisabled]=\"false\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\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: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "isDisabled", "ngtStyle"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { 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"] }] });
|
|
4299
4330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
|
|
4300
4331
|
type: Component,
|
|
4301
|
-
args: [{ selector: 'ngt-datatable', template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n {{ filter.translation + ': ' + (filter
|
|
4332
|
+
args: [{ selector: 'ngt-datatable', template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]='true' [isDisabled]=\"false\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"] }]
|
|
4302
4333
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
|
|
4303
4334
|
type: Optional
|
|
4304
4335
|
}] }]; }, propDecorators: { table: [{
|
|
@@ -4639,8 +4670,10 @@ class NgtThCheckComponent {
|
|
|
4639
4670
|
if (this.ngtDataTable) {
|
|
4640
4671
|
this.ngtDataTable.onToogleAllCheckboxes.emit(checked);
|
|
4641
4672
|
this.hasSelectedAllCheckboxes = checked;
|
|
4673
|
+
this.checked = checked;
|
|
4642
4674
|
if (!checked && this.hasSelectedAllElements()) {
|
|
4643
|
-
this.
|
|
4675
|
+
this.hasSelectedAllCheckboxes = true;
|
|
4676
|
+
this.checked = true;
|
|
4644
4677
|
}
|
|
4645
4678
|
}
|
|
4646
4679
|
}
|