ng-tailwind 4.5.50 → 4.5.51

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.
@@ -3989,12 +3989,14 @@ class NgtDatatableComponent {
3989
3989
  this.searchTermOnEnter = true;
3990
3990
  this.defaultFilters = {};
3991
3991
  this.filtersDescription = {};
3992
+ this.canSelectAllRegisters = false;
3992
3993
  this.onDataChange = new EventEmitter();
3993
3994
  this.onClearFilter = new EventEmitter();
3994
3995
  this.onClearSelectedElements = new EventEmitter();
3995
3996
  this.onSelectedElementsChange = new EventEmitter();
3996
3997
  this.onToogleAllCheckboxes = new EventEmitter();
3997
3998
  this.onToogleCheckbox = new EventEmitter();
3999
+ this.onSelectAllRegisters = new EventEmitter();
3998
4000
  this.onOpenSearchModal = new EventEmitter();
3999
4001
  this.onSearch = new EventEmitter();
4000
4002
  this.data = [];
@@ -4308,6 +4310,7 @@ class NgtDatatableComponent {
4308
4310
  }
4309
4311
  this.onSelectedElementsChange.emit(this.selectedElements);
4310
4312
  }));
4313
+ this.subscriptions.push(this.onSelectAllRegisters.subscribe(() => this.hasSelectedAllElements = !this.hasSelectedAllElements));
4311
4314
  }
4312
4315
  canApplyFilters(filters) {
4313
4316
  if (!this.searching) {
@@ -4330,10 +4333,10 @@ class NgtDatatableComponent {
4330
4333
  }
4331
4334
  }
4332
4335
  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 });
4333
- 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" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", 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?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #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"] }] });
4336
+ 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?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>\n", 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"] }] });
4334
4337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
4335
4338
  type: Component,
4336
- 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?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #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"] }]
4339
+ 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?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>\n", 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"] }]
4337
4340
  }], ctorParameters: function () {
4338
4341
  return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
4339
4342
  type: Optional
@@ -4369,6 +4372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
4369
4372
  type: Input
4370
4373
  }], filtersDescription: [{
4371
4374
  type: Input
4375
+ }], canSelectAllRegisters: [{
4376
+ type: Input
4372
4377
  }], onDataChange: [{
4373
4378
  type: Output
4374
4379
  }], onClearFilter: [{
@@ -4381,6 +4386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
4381
4386
  type: Output
4382
4387
  }], onToogleCheckbox: [{
4383
4388
  type: Output
4389
+ }], onSelectAllRegisters: [{
4390
+ type: Output
4384
4391
  }], onOpenSearchModal: [{
4385
4392
  type: Output
4386
4393
  }], onSearch: [{
@@ -4630,14 +4637,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
4630
4637
  } });
4631
4638
 
4632
4639
  class NgtThCheckComponent {
4633
- constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable) {
4640
+ constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable, ngtTranslateService) {
4634
4641
  this.injector = injector;
4635
4642
  this.hostElement = hostElement;
4636
4643
  this.ngtStylizableDirective = ngtStylizableDirective;
4637
4644
  this.ngtDataTable = ngtDataTable;
4645
+ this.ngtTranslateService = ngtTranslateService;
4638
4646
  this.checked = false;
4639
4647
  this.subscriptions = [];
4640
4648
  this.bindNgtStyle();
4649
+ if (this.hasSelectedAllElements()) {
4650
+ this.checked = true;
4651
+ this.hasSelectedAllCheckboxes = true;
4652
+ }
4653
+ }
4654
+ getSelectAllElementsCheckboxStyle() {
4655
+ var _a, _b;
4656
+ return this.hasSelectedAllElements()
4657
+ ? `${(_a = this.ngtCheckbox) === null || _a === void 0 ? void 0 : _a.ngtStyle.compile(['color.bg'])} text-white`
4658
+ : `hover:${(_b = this.ngtCheckbox) === null || _b === void 0 ? void 0 : _b.ngtStyle.compile(['color.bg'])} hover:text-white bg-white`;
4659
+ }
4660
+ hasSelectedAllElements() {
4661
+ var _a;
4662
+ return (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.hasSelectedAllElements;
4663
+ }
4664
+ canSelectAllFilter() {
4665
+ var _a;
4666
+ return (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.canSelectAllRegisters;
4667
+ }
4668
+ getPaginationTotal() {
4669
+ var _a, _b, _c;
4670
+ return (_c = (_b = (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.ngtPagination) === null || _b === void 0 ? void 0 : _b.getPagination()) === null || _c === void 0 ? void 0 : _c.total;
4671
+ }
4672
+ onToggleSelectAllElements() {
4673
+ var _a;
4674
+ (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.onSelectAllRegisters.emit();
4641
4675
  }
4642
4676
  ngAfterContentInit() {
4643
4677
  if (this.ngtDataTable) {
@@ -4653,8 +4687,13 @@ class NgtThCheckComponent {
4653
4687
  this.destroySubscriptions();
4654
4688
  }
4655
4689
  onCheckboxChange(checked) {
4690
+ var _a;
4656
4691
  if (this.ngtDataTable) {
4657
4692
  this.ngtDataTable.onToogleAllCheckboxes.emit(checked);
4693
+ this.hasSelectedAllCheckboxes = checked;
4694
+ if (!checked && this.hasSelectedAllElements()) {
4695
+ (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.onSelectAllRegisters.emit();
4696
+ }
4658
4697
  }
4659
4698
  }
4660
4699
  bindNgtStyle() {
@@ -4698,11 +4737,11 @@ class NgtThCheckComponent {
4698
4737
  this.subscriptions = [];
4699
4738
  }
4700
4739
  }
4701
- NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
4702
- NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThCheckComponent, selector: "[ngt-th-check]", ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ 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: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }] });
4740
+ NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
4741
+ NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThCheckComponent, selector: "[ngt-th-check]", viewQueries: [{ propertyName: "ngtCheckbox", first: true, predicate: NgtCheckboxComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"canSelectAllFilter(); else default\">\n <div class=\"flex items-center content-center relative w-10\">\n <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'\n (click)=\"$event.stopPropagation()\">\n </ngt-checkbox>\n\n <div *ngIf=\"hasSelectedAllCheckboxes\" class=\"rounded-md border border-gray-400 p-1 ml-1 cursor-pointer relative\"\n [ngClass]=\"getSelectAllElementsCheckboxStyle()\"\n [title]=\"hasSelectedAllElements() ? ngtTranslateService.ngtDatatableClearSelection : ngtTranslateService.ngtDatatableSelectAllRegisters\"\n (click)=\"onToggleSelectAllElements()\">\n <svg class=\"fill-current self-center h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n <path\n d=\"M342.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 178.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l80 80c12.5 12.5 32.8 12.5 45.3 0l160-160zm96 128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 402.7 54.6 297.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l256-256z\" />\n </svg>\n\n <div *ngIf=\"hasSelectedAllElements()\"\n class=\"rounded-xl absolute top-0 text-xs right-0 -mt-5 -mr-2 py-1 px-2 text-center text-white bg-blue-500\">\n {{ getPaginationTotal() }}\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #default>\n <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)' (click)=\"$event.stopPropagation()\">\n </ngt-checkbox>\n</ng-template>\n\n<ng-content></ng-content>\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$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: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }] });
4703
4742
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, decorators: [{
4704
4743
  type: Component,
4705
- args: [{ selector: '[ngt-th-check]', template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>" }]
4744
+ args: [{ selector: '[ngt-th-check]', template: "<ng-container *ngIf=\"canSelectAllFilter(); else default\">\n <div class=\"flex items-center content-center relative w-10\">\n <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'\n (click)=\"$event.stopPropagation()\">\n </ngt-checkbox>\n\n <div *ngIf=\"hasSelectedAllCheckboxes\" class=\"rounded-md border border-gray-400 p-1 ml-1 cursor-pointer relative\"\n [ngClass]=\"getSelectAllElementsCheckboxStyle()\"\n [title]=\"hasSelectedAllElements() ? ngtTranslateService.ngtDatatableClearSelection : ngtTranslateService.ngtDatatableSelectAllRegisters\"\n (click)=\"onToggleSelectAllElements()\">\n <svg class=\"fill-current self-center h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n <path\n d=\"M342.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 178.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l80 80c12.5 12.5 32.8 12.5 45.3 0l160-160zm96 128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 402.7 54.6 297.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l256-256z\" />\n </svg>\n\n <div *ngIf=\"hasSelectedAllElements()\"\n class=\"rounded-xl absolute top-0 text-xs right-0 -mt-5 -mr-2 py-1 px-2 text-center text-white bg-blue-500\">\n {{ getPaginationTotal() }}\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #default>\n <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)' (click)=\"$event.stopPropagation()\">\n </ngt-checkbox>\n</ng-template>\n\n<ng-content></ng-content>\n" }]
4706
4745
  }], ctorParameters: function () {
4707
4746
  return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
4708
4747
  type: Self
@@ -4712,8 +4751,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
4712
4751
  type: Optional
4713
4752
  }, {
4714
4753
  type: SkipSelf
4754
+ }] }, { type: NgtTranslateService, decorators: [{
4755
+ type: Optional
4715
4756
  }] }];
4716
- } });
4757
+ }, propDecorators: { ngtCheckbox: [{
4758
+ type: ViewChild,
4759
+ args: [NgtCheckboxComponent]
4760
+ }] } });
4717
4761
 
4718
4762
  class NgtThComponent {
4719
4763
  constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable) {