Merge pull request #17151 from IgniteUI/rkaraivanov/remove-direction-service

removed: Direction service

Author: kdinev

projects/igniteui-angular/carousel/src/carousel/carousel.component.ts

@@ -1,9 +1,9 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injectable, Input, IterableChangeRecord, IterableDiffer, IterableDiffers, OnDestroy, Output, QueryList, TemplateRef, ViewChild, ViewChildren, booleanAttribute, DOCUMENT, inject } from '@angular/core';
+import { AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injectable, Input, IterableChangeRecord, IterableDiffer, IterableDiffers, OnDestroy, Output, QueryList, TemplateRef, ViewChild, ViewChildren, booleanAttribute, inject } from '@angular/core';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CarouselResourceStringsEN, ICarouselResourceStrings, ɵIgxDirectionality } from 'igniteui-angular/core';
+import { CarouselResourceStringsEN, ICarouselResourceStrings, isLeftToRight} from 'igniteui-angular/core';
 import { first, IBaseEventArgs, last, PlatformUtil } from 'igniteui-angular/core';
 import { CarouselAnimationDirection, IgxCarouselComponentBase } from './carousel-base';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
@@ -64,8 +64,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     private element = inject(ElementRef);
     private iterableDiffers = inject(IterableDiffers);
     private platformUtil = inject(PlatformUtil);
-    private dir = inject(ɵIgxDirectionality);
-    private document = inject(DOCUMENT);
+
 
 
     /**
@@ -725,21 +724,22 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     public handleKeydown(event: KeyboardEvent): void {
         const { key } = event;
         const slides = this.slides.toArray();
+        const isRTL = !isLeftToRight(this.nativeElement);
 
         switch (key) {
             case this.platformUtil.KEYMAP.ARROW_LEFT:
-                this.dir.rtl ? this.next() : this.prev();
+                isRTL ? this.next() : this.prev();
                 break;
             case this.platformUtil.KEYMAP.ARROW_RIGHT:
-                this.dir.rtl ? this.prev() : this.next();
+                isRTL ? this.prev() : this.next();
                 break;
             case this.platformUtil.KEYMAP.HOME:
                 event.preventDefault();
-                this.select(this.dir.rtl ? last(slides) : first(slides));
+                this.select(isRTL ? last(slides) : first(slides));
                 break;
             case this.platformUtil.KEYMAP.END:
                 event.preventDefault();
-                this.select(this.dir.rtl ? first(slides) : last(slides));
+                this.select(isRTL ? first(slides) : last(slides));
                 break;
         }
 

projects/igniteui-angular/core/src/core/utils.ts

@@ -8,6 +8,16 @@ import type { IgxTheme } from '../services/theme/theme.token';
 /** @hidden @internal */
 export const ELEMENTS_TOKEN = /*@__PURE__*/new InjectionToken<boolean>('elements environment');
 
+
+/**
+ * Returns true if the element's direction is left-to-right
+ *
+ * @hidden @internal
+ */
+export function isLeftToRight(element: Element): boolean {
+    return element?.matches(':dir(ltr)') ?? true;
+}
+
 /**
  * @hidden
  */

projects/igniteui-angular/core/src/services/direction/directionality.spec.ts

@@ -2,7 +2,6 @@
 export * from './animation/angular-animation-player';
 export * from './animation/angular-animation-service';
 export * from './animation/animation';
-export { Direction as ɵDirection, DIR_DOCUMENT as ɵDIR_DOCUMENT, IgxDirectionality as ɵIgxDirectionality } from './direction/directionality';
 export * from './overlay/overlay';
 export * from './overlay/position';
 export * from './overlay/scroll';

projects/igniteui-angular/core/src/services/direction/directionality.ts

@@ -12,12 +12,13 @@ import {
     booleanAttribute,
     effect,
     signal,
-    inject
+    inject,
+    ElementRef
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject, takeUntil } from 'rxjs';
 import { IgxRadioComponent } from '../radio.component';
-import { ɵIgxDirectionality } from 'igniteui-angular/core';
+import { isLeftToRight } from 'igniteui-angular/core';
 import { IChangeCheckboxEventArgs } from 'igniteui-angular/directives';
 /**
  * Determines the Radio Group alignment
@@ -60,8 +61,8 @@ let nextId = 0;
 })
 export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck {
     public ngControl = inject(NgControl, { optional: true, self: true });
-    private _directionality = inject(ɵIgxDirectionality);
     private cdr = inject(ChangeDetectorRef);
+    private readonly _element = inject<ElementRef<HTMLElement>>(ElementRef);
 
     private _radioButtons = signal<IgxRadioComponent[]>([]);
     private _radioButtonsList = new QueryList<IgxRadioComponent>();
@@ -259,7 +260,7 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy,
 
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
             let index = checked ? buttons.indexOf(checked) : -1;
-            const ltr = this._directionality.value === 'ltr';
+            const ltr = isLeftToRight(this._element.nativeElement);
 
             switch (key) {
                 case 'ArrowUp':

projects/igniteui-angular/core/src/services/public_api.ts

@@ -3,7 +3,6 @@ import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angul
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { By, HammerModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ɵDIR_DOCUMENT, ɵIgxDirectionality } from 'igniteui-angular/core';
 import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
 import { IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common';
 import { IgxSliderComponent } from './slider.component';
@@ -24,16 +23,8 @@ const SLIDER_TICK_LABELS_HIDDEN_CLASS = 'igx-slider__tick-label--hidden';
 const TOP_TO_BOTTOM_TICK_LABLES = '.igx-slider__tick-labels--top-bottom';
 const BOTTOM_TO_TOP_TICK_LABLES = '.igx-slider__tick-labels--bottom-top';
 
-interface FakeDoc {
-    body: { dir?: string };
-    documentElement: { dir?: string };
-}
-
 describe('IgxSlider', () => {
-    let fakeDoc: FakeDoc;
     beforeEach(waitForAsync(() => {
-        fakeDoc = { body: {}, documentElement: {} };
-
         TestBed.configureTestingModule({
             imports: [
                 NoopAnimationsModule, FormsModule, ReactiveFormsModule, HammerModule,
@@ -49,9 +40,6 @@ describe('IgxSlider', () => {
                 SliderTemplateFormComponent,
                 SliderReactiveFormComponent,
                 SliderWithValueAdjustmentComponent
-            ],
-            providers: [
-                { provide: ɵDIR_DOCUMENT, useFactory: () => fakeDoc }
             ]
         }).compileComponents();
     }));
@@ -1732,14 +1720,6 @@ describe('IgxSlider', () => {
     });
 
     describe('Slider RTL', () => {
-        beforeEach(() => {
-            fakeDoc.documentElement.dir = 'rtl';
-        });
-
-        afterEach(() => {
-            fakeDoc.documentElement.dir = 'ltr';
-        });
-
         it('should reflect on the right instead of the left css property of the slider handlers', () => {
             const fix = TestBed.createComponent(SliderRtlComponent);
             fix.detectChanges();
@@ -1748,8 +1728,6 @@ describe('IgxSlider', () => {
             const thumbs = fix.debugElement.queryAll(By.css(THUMB_TAG));
             const labels = fix.debugElement.queryAll(By.css(THUMB_LABEL));
 
-            expect(inst.dir.rtl).toEqual(true);
-
             expect(thumbs[0].nativeElement.style['right']).toEqual(`${fix.componentInstance.value.lower}%`);
             expect(thumbs[1].nativeElement.style['right']).toEqual(`${fix.componentInstance.value.upper}%`);
 
@@ -2061,13 +2039,11 @@ describe('IgxSlider', () => {
 @Component({
     selector: 'igx-slider-rtl',
     template: `
-        <igx-slider [type]="type" [value]="value"></igx-slider>
+        <div dir="rtl"><igx-slider [type]="type" [value]="value"></igx-slider></div>
     `,
     imports: [IgxSliderComponent]
 })
 export class SliderRtlComponent {
-    public dir = inject(ɵIgxDirectionality);
-
     @ViewChild(IgxSliderComponent)
     public slider: IgxSliderComponent;
 

projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentC
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { animationFrameScheduler, fromEvent, interval, merge, noop, Observable, Subject, timer } from 'rxjs';
 import { takeUntil, throttle, throttleTime } from 'rxjs/operators';
-import { EditorProvider, ɵIgxDirectionality, resizeObservable } from 'igniteui-angular/core';
+import { EditorProvider, isLeftToRight, resizeObservable } from 'igniteui-angular/core';
 import { IgxThumbLabelComponent } from './label/thumb-label.component';
 import {
     IgxSliderType, IgxThumbFromTemplateDirective,
@@ -47,7 +47,6 @@ export class IgxSliderComponent implements
     private _el = inject(ElementRef);
     private _cdr = inject(ChangeDetectorRef);
     private _ngZone = inject(NgZone);
-    private _dir = inject(ɵIgxDirectionality);
 
     /**
      * @hidden
@@ -1200,19 +1199,13 @@ export class IgxSliderComponent implements
         return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
     }
 
-    // private toggleThumb() {
-    //     return this.thumbFrom.isActive ?
-    //         this.thumbTo.nativeElement.focus() :
-    //         this.thumbFrom.nativeElement.focus();
-    // }
-
     private valueInRange(value, min = 0, max = 100) {
         return Math.max(Math.min(value, max), min);
     }
 
     private positionHandler(thumbHandle: ElementRef, labelHandle: ElementRef, position: number) {
         const percent = `${this.valueToFraction(position) * 100}%`;
-        const dir = this._dir.rtl ? 'right' : 'left';
+        const dir = !isLeftToRight(this._el.nativeElement) ? 'right' : 'left';
 
         if (thumbHandle) {
             thumbHandle.nativeElement.style[dir] = percent;
@@ -1368,7 +1361,8 @@ export class IgxSliderComponent implements
                 trackLeftIndention = Math.round((1 / positionGap * fromPosition) * 100);
             }
 
-            trackLeftIndention = this._dir.rtl ? -trackLeftIndention : trackLeftIndention;
+            const rtl = !isLeftToRight(this._el.nativeElement);
+            trackLeftIndention = rtl ? -trackLeftIndention : trackLeftIndention;
             this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${positionGap}) translateX(${trackLeftIndention}%)`);
         } else {
             this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${toPosition})`);