@acorex/components 20.7.37 → 20.7.38

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

@@ -1,7 +1,8 @@
 import { AXEvent, MXInteractiveComponent, AXComponent, MXValueComponent, AXPagedComponent } from '@acorex/cdk/common';
-import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { AXLocaleService } from '@acorex/core/locale';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, afterNextRender, signal, EventEmitter, forwardRef, HostBinding, Output, NgModule } from '@angular/core';
+import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, EventEmitter, forwardRef, HostBinding, Output, NgModule } from '@angular/core';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AsyncPipe, NgClass, CommonModule } from '@angular/common';
@@ -9,7 +10,6 @@ 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 { AXLocaleService } from '@acorex/core/locale';
 import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
 import { isNumber, isEqual, cloneDeep } from 'lodash-es';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
@@ -41,6 +41,7 @@ class AXDataPagerChild extends MXInteractiveComponent {
         super();
         this._parent = inject(AXDataPagerParentComponent);
         this._unsubscriber = inject(AXUnsubscriber);
+        this._localeService = inject(AXLocaleService);
         //
         this._parent.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(async (c) => {
             await this.applyParent();
@@ -49,6 +50,10 @@ class AXDataPagerChild extends MXInteractiveComponent {
         this._parent.onOptionChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(async (c) => {
             await this.applyParent();
         });
+        //
+        this._localeService.profileChanged$.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => {
+            void this.applyParent();
+        });
     }
     /**
      *  @ignore
@@ -206,12 +211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @category Components
  */
 class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        super.ngOnInit;
-        this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
+    constructor() {
+        super(...arguments);
+        this.localeService = inject(AXLocaleService);
+        this.isRtl = this.localeService.isRtl;
     }
     /**
      *  @ignore
@@ -251,8 +254,8 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': rtl,
-          'ax-icon-chevron-right': !rtl,
+          'ax-icon-chevron-left': isRtl(),
+          'ax-icon-chevron-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -265,7 +268,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     >
       <ax-icon
         class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
+        [ngClass]="{ 'ax-icon-chevron-double-left': isRtl(), 'ax-icon-chevron-double-right': !isRtl() }"
       ></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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -285,8 +288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': rtl,
-          'ax-icon-chevron-right': !rtl,
+          'ax-icon-chevron-left': isRtl(),
+          'ax-icon-chevron-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -299,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
     >
       <ax-icon
         class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
+        [ngClass]="{ 'ax-icon-chevron-double-left': isRtl(), 'ax-icon-chevron-double-right': !isRtl() }"
       ></ax-icon>
     </ax-button>
   `,
@@ -320,28 +323,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @category Components
  */
 class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
     constructor() {
-        super();
+        super(...arguments);
         this._items = [];
         this._currentPage = 1;
         this._lastPage = 1;
         this._loading = false;
         this.localeService = inject(AXLocaleService);
-        this.rtlstatus = computed(() => {
-            // console.log(this.localeService.activeProfile().i18nMeta?.rtl ?? false);
-            return this.localeService.activeProfile().i18nMeta?.rtl ?? false;
-        }, ...(ngDevMode ? [{ debugName: "rtlstatus" }] : []));
+        this.isRtl = this.localeService.isRtl;
         /**
          *  @ignore
          */
         this._displayCount = 5;
-        afterNextRender(() => {
-            this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
-            this.cdr.detectChanges();
-        });
     }
     /**
      *  @ignore
@@ -363,7 +356,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // Add ellipsis button for previous pages if needed
         if (start > 1) {
             this._items.push({
-                iconClass: this.rtl ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left',
+                iconClass: this.isRtl() ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left',
                 data: start - 1,
             });
         }
@@ -377,7 +370,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // Add ellipsis button for next pages if needed
         if (end < this._lastPage) {
             this._items.push({
-                iconClass: this.rtl ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right',
+                iconClass: this.isRtl() ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right',
                 data: end + 1,
             });
         }
@@ -397,8 +390,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // } else {
         //   this._parent.goToPage(Number(e.data));
         // }
-        const nextIcon = this.rtl ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right';
-        const prevIcon = this.rtl ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left';
+        const nextIcon = this.isRtl() ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right';
+        const prevIcon = this.isRtl() ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left';
         if (e.iconClass === nextIcon) {
             this._parent.goNextPage();
         }
@@ -409,7 +402,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(Number(e.data));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDataPagerNumericSelectorComponent, isStandalone: true, selector: "ax-data-pager-numeric-selector", providers: [
             {
                 provide: AXDataPagerChild,
@@ -427,8 +420,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': !rtl,
-          'ax-icon-chevron-double-right': rtl,
+          'ax-icon-chevron-double-left': !isRtl(),
+          'ax-icon-chevron-double-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -457,8 +450,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': rtl,
-          'ax-icon-chevron-double-right': !rtl,
+          'ax-icon-chevron-double-left': isRtl(),
+          'ax-icon-chevron-double-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -478,8 +471,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': !rtl,
-          'ax-icon-chevron-double-right': rtl,
+          'ax-icon-chevron-double-left': !isRtl(),
+          'ax-icon-chevron-double-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -508,8 +501,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': rtl,
-          'ax-icon-chevron-double-right': !rtl,
+          'ax-icon-chevron-double-left': isRtl(),
+          'ax-icon-chevron-double-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -526,7 +519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     ],
                     imports: [AXButtonComponent, AXDecoratorIconComponent, NgClass],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Displays a button to select page sizes for data pagination.
@@ -649,12 +642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @category Components
  */
 class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        super.ngOnInit;
-        this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
+    constructor() {
+        super(...arguments);
+        this.localeService = inject(AXLocaleService);
+        this.isRtl = this.localeService.isRtl;
     }
     /**
      *  @ignore
@@ -693,7 +684,7 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
     >
       <ax-icon
         class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
+        [ngClass]="{ 'ax-icon-chevron-double-right': isRtl(), 'ax-icon-chevron-double-left': !isRtl() }"
       ></ax-icon>
     </ax-button>
     <ax-button
@@ -706,8 +697,8 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': !rtl,
-          'ax-icon-chevron-right': rtl,
+          'ax-icon-chevron-left': !isRtl(),
+          'ax-icon-chevron-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -727,7 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
     >
       <ax-icon
         class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
+        [ngClass]="{ 'ax-icon-chevron-double-right': isRtl(), 'ax-icon-chevron-double-left': !isRtl() }"
       ></ax-icon>
     </ax-button>
     <ax-button
@@ -740,8 +731,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': !rtl,
-          'ax-icon-chevron-right': rtl,
+          'ax-icon-chevron-left': !isRtl(),
+          'ax-icon-chevron-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>