@acorex/components 20.2.0-next.0 → 20.2.0-next.10

package/fesm2022/acorex-components-data-pager.mjs

@@ -9,10 +9,10 @@ import { AXNumberBoxComponent, AXNumberBoxModule } from '@acorex/components/numb
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AXButtonComponent, AXButtonItemListComponent, AXButtonItemComponent, AXButtonModule } from '@acorex/components/button';
-import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
 import { isNumber, isEqual, cloneDeep } from 'lodash-es';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
 
 class AXDataPagerChangedEvent extends AXEvent {
     constructor() {
@@ -77,7 +77,7 @@ class AXDataPagerInfoComponent extends AXDataPagerChild {
      */
     async applyParent() {
         const info = this._parent.displayInfo;
-        if ([info.range, info.range.from, info.totalItems].every((c) => c)) {
+        if ([info.range, info.range.from, info.totalItems].every((c) => c != undefined)) {
             this._textFormatted = (await this.translateService.translateAsync(this.text ?? '@acorex:datapager.info.text'))
                 .replace('[from]', info.range.from.toString())
                 .replace('[to]', info.range.to.toString())
@@ -389,7 +389,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled"
+      [disabled]="_currentPage === 1 || _parent.disabled || _parent.isLoading"
       look="blank"
       (onClick)="_handleOnItemClick({ data: 1 })"
     >
@@ -402,28 +402,24 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       ></ax-icon>
     </ax-button>
 
-    @if (!_parent.isLoading) {
-      @for (item of _items; track $index) {
-        <ax-button
-          class="ax-data-pager-num-button"
-          [disabled]="_parent.disabled"
-          [color]="_currentPage === item.data ? 'primary' : 'default'"
-          [look]="_currentPage === item.data ? 'solid' : 'blank'"
-          [text]="item.text"
-          (onClick)="_handleOnItemClick(item)"
-        >
-          @if (item.iconClass) {
-            <ax-icon class="ax-icon" [ngClass]="item.iconClass"></ax-icon>
-          }
-        </ax-button>
-      }
-    } @else {
-      <ax-skeleton></ax-skeleton>
+    @for (item of _items; track $index) {
+      <ax-button
+        class="ax-data-pager-num-button"
+        [disabled]="_parent.disabled || _parent.isLoading"
+        [color]="_currentPage === item.data ? 'primary' : 'default'"
+        [look]="_currentPage === item.data ? 'solid' : 'blank'"
+        [text]="item.text"
+        (onClick)="_handleOnItemClick(item)"
+      >
+        @if (item.iconClass) {
+          <ax-icon class="ax-icon" [ngClass]="item.iconClass"></ax-icon>
+        }
+      </ax-button>
     }
 
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled"
+      [disabled]="_currentPage === _lastPage || _parent.disabled || _parent.isLoading"
       look="blank"
       (onClick)="_handleOnItemClick({ data: _lastPage })"
     >
@@ -435,7 +431,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         }"
       ></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
@@ -444,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                     template: `
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled"
+      [disabled]="_currentPage === 1 || _parent.disabled || _parent.isLoading"
       look="blank"
       (onClick)="_handleOnItemClick({ data: 1 })"
     >
@@ -457,28 +453,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
       ></ax-icon>
     </ax-button>
 
-    @if (!_parent.isLoading) {
-      @for (item of _items; track $index) {
-        <ax-button
-          class="ax-data-pager-num-button"
-          [disabled]="_parent.disabled"
-          [color]="_currentPage === item.data ? 'primary' : 'default'"
-          [look]="_currentPage === item.data ? 'solid' : 'blank'"
-          [text]="item.text"
-          (onClick)="_handleOnItemClick(item)"
-        >
-          @if (item.iconClass) {
-            <ax-icon class="ax-icon" [ngClass]="item.iconClass"></ax-icon>
-          }
-        </ax-button>
-      }
-    } @else {
-      <ax-skeleton></ax-skeleton>
+    @for (item of _items; track $index) {
+      <ax-button
+        class="ax-data-pager-num-button"
+        [disabled]="_parent.disabled || _parent.isLoading"
+        [color]="_currentPage === item.data ? 'primary' : 'default'"
+        [look]="_currentPage === item.data ? 'solid' : 'blank'"
+        [text]="item.text"
+        (onClick)="_handleOnItemClick(item)"
+      >
+        @if (item.iconClass) {
+          <ax-icon class="ax-icon" [ngClass]="item.iconClass"></ax-icon>
+        }
+      </ax-button>
     }
 
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled"
+      [disabled]="_currentPage === _lastPage || _parent.disabled || _parent.isLoading"
       look="blank"
       (onClick)="_handleOnItemClick({ data: _lastPage })"
     >
@@ -501,7 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXDataPagerNumericSelectorComponent },
                     ],
-                    imports: [AXButtonComponent, AXDecoratorIconComponent, NgClass, AXSkeletonComponent],
+                    imports: [AXButtonComponent, AXDecoratorIconComponent, NgClass],
                 }]
         }], ctorParameters: () => [] });
 
@@ -918,7 +910,7 @@ class AXDataPagerComponent extends MXValueComponent {
      *  @ignore
      */
     _emitChangedEvent(u = false) {
-        this.totalPages = Math.ceil(this._total / this.size);
+        this.totalPages = Math.ceil(this._total / this.size) || 1;
         //
         if (!isEqual(this.previousDisplayInfo, this.displayInfo)) {
             this.onChanged.emit(Object.assign({
@@ -936,36 +928,41 @@ class AXDataPagerComponent extends MXValueComponent {
     }
     /**
      * Navigates to the next page, or to the last page if on the final page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the next available page.
      */
     goNextPage() {
         this.goToPage(Math.min(this.value + 1, this.totalPages));
     }
     /**
      * Navigates to the last page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the final page.
      */
     goLastPage() {
         this.goToPage(this.totalPages);
     }
     /**
      * Navigates to the first page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the first page.
      */
     goFirstPage() {
         this.goToPage(1);
     }
     /**
      * Navigates to the previous page, or to the first page if on the initial page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the previous available page.
      */
     goPrevPage() {
         this.goToPage(Math.max(this.value - 1, 1));
     }
     /**
      * Navigates to a specified page.
+     *
      * @param page - The page number to navigate to.
-     * @ignore
+     * @returns void - No return value. The component navigates to the specified page.
      */
     goToPage(page) {
         if (page != this.value) {