Merge branch 'master' into bpachilova/feat-14011

Author: ddaribo

README.md

@@ -12,7 +12,7 @@
 [![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch, Adobe XD and Figma [UI kits](https://www.infragistics.com/products/appbuilder/ui-toolkit) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) using Google's [Angular](https://angular.io/) framework.
+[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete library of Angular-native, Material-based Angular UI components designed to enable developers to build enterprise-ready HTML5 & JavaScript apps for modern desktop browsers. It packs full-featured components, including Pivot Grids, Dock Manager, Hierarchical Grid, Bottom Navigation, etc., 60+ high-performance Angular Charts for all business needs and any app scenario, and more.
 
 You can find source files under the [`src`](https://github.com/IgniteUI/igniteui-angular/tree/master/src) folder, including samples and tests.
 Or visit [Ignite UI for Angular Discord](https://discord.com/channels/836634487483269200/836636712292581456) and join the dev community there.
@@ -64,11 +64,6 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t
 
 Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
 
-### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/appbuilder)
-![Health Vault AB Angular Create](https://github.com/IgniteUI/igniteui-angular/assets/52001020/8f40a0a6-44f8-43fa-8407-c8800a7eae89)
-### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/appbuilder)
-![Health Vault AB Angular Generate](https://github.com/IgniteUI/igniteui-angular/assets/52001020/78628738-6752-4ff3-b201-8a6b8cf279cf)
-
 ### Current List of Components Include:
 
 |Components|Status|||Added in|Directives|Status|||Added in|

ROADMAP.md

@@ -2,30 +2,28 @@
 
 # Current Milestone
 
-## Milestone 29, (Due by Feb, 2024)
+## Milestone 30, (Due by Apr, 2024)
 
-1. Improve package tree-shaking [#13562](https://github.com/IgniteUI/igniteui-angular/issues/13562)
-2. Deprecate rowID and rowData in interfaces [#10617](https://github.com/IgniteUI/igniteui-angular/issues/10617)
-3. Update calendar theme to match material [#10400](https://github.com/IgniteUI/igniteui-angular/issues/10400)
-4. Calendar: Default date formatting in the header [#13811](https://github.com/IgniteUI/igniteui-angular/issues/13811)
-5. Component: Icon Button [#13590](https://github.com/IgniteUI/igniteui-angular/issues/13590)  
+1. Update calendar theme to match material [#10400](https://github.com/IgniteUI/igniteui-angular/issues/10400)
+2. Calendar: Default date formatting in the header [#13811](https://github.com/IgniteUI/igniteui-angular/issues/13811)
+3. Button: States and size improvements request [#1033](https://github.com/IgniteUI/igniteui-angular/issues/1033)
+4. Provide a way to replace part of (or all) icons used by components with icons from other icon sets [#13987](https://github.com/IgniteUI/igniteui-angular/issues/13987)
+5. Date/datetime/time editors should accept the same formats that the angular pipes accept [#14011](https://github.com/IgniteUI/igniteui-angular/issues/14011)
 
 ## Going down the road
 
-1. Scheduler component [#8097](https://github.com/IgniteUI/igniteui-angular/issues/8097)
-2. Rework default sorting/filtering strategy's and their methods to be grid agnostic [#10922](https://github.com/IgniteUI/igniteui-angular/issues/10922) 
-3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-4. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
-5. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514) 
-6. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481) 
-7. Switch overlay service from angular animations to native Web Animations [#8780](https://github.com/IgniteUI/igniteui-angular/issues/8780)
-8. Suggestion for igx-grid group by row template [#12752](https://github.com/IgniteUI/igniteui-angular/issues/12752)
-9. Way to filter auto-generated columns [#12577](https://github.com/IgniteUI/igniteui-angular/issues/12577)
-10. IgxDateRangePicker UX improvement [#11994](https://github.com/IgniteUI/igniteui-angular/issues/11994)
-11. Resizing [IgxDrag] [#6283](https://github.com/IgniteUI/igniteui-angular/issues/6283)
+1. Grid: Remove deprecated usage of displayDensity [#14015](https://github.com/IgniteUI/igniteui-angular/issues/14015)
+2. Expose a header template for the chip area of the headers of the rows dimension in the pivot grid [#14016](https://github.com/IgniteUI/igniteui-angular/issues/14016)
 
 # Previous Milestone
 
+## Milestone 29, version 17.1 (Released Feb 26th, 2024)
+
+1. Improve package tree-shaking [#13562](https://github.com/IgniteUI/igniteui-angular/issues/13562)
+2. Deprecate rowID and rowData in interfaces [#10617](https://github.com/IgniteUI/igniteui-angular/issues/10617)
+3. Component: Icon Button [#13590](https://github.com/IgniteUI/igniteui-angular/issues/13590)
+4. HammerJS is now an optional dependency
+
 ## Milestone 28, version 17.0 (Released Nov 9th, 2023) [Release Blog 17.0](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-17-0-0)
 
 1. **[DONE]** Support of Angular 17

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -175,6 +175,7 @@
         flex-grow: 1;
         align-items: center;
         transition: all .2s $out-quad;
+        touch-action: pan-y pinch-zoom;
 
         &:hover {
             %igx-slider-track-fill {

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -9,10 +9,12 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common';
 import { IgxSliderComponent } from './slider.component';
 
-declare let Simulator: any;
 const SLIDER_CLASS = '.igx-slider';
+const THUMB_TAG = 'igx-thumb';
 const THUMB_TO_CLASS = '.igx-slider-thumb-to';
+const THUMB_TO_PRESSED_CLASS = '.igx-slider-thumb-to--pressed';
 const THUMB_FROM_CLASS = '.igx-slider-thumb-from';
+const THUMB_LABEL = 'igx-thumb-label';
 const SLIDER_TICKS_ELEMENT = '.igx-slider__ticks';
 const SLIDER_TICKS_TOP_ELEMENT = '.igx-slider__ticks--top';
 const SLIDER_PRIMARY_GROUP_TICKS_CLASS_NAME = 'igx-slider__ticks-group--tall';
@@ -415,46 +417,57 @@ describe('IgxSlider', () => {
             expect(sliderInstance.maxValue).toEqual(expectedMax);
         });
 
-        it('continuous(smooth) sliding should be allowed', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
+        it('continuous(smooth) sliding should be allowed', async() => {
             sliderInstance.continuous = true;
+            sliderInstance.thumbLabelVisibilityDuration = 10;
             fixture.detectChanges();
 
             expect(sliderInstance.continuous).toBe(true);
             expect(sliderInstance.value).toBe(150);
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1, clientX: 200 }));
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activeThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                expect(sliderInstance.value).toBeGreaterThan(150);
-                expect(activeThumb).toBeNull();
-                done();
-            });
+
+            (sliderInstance as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            let activeThumb = fixture.debugElement.query(By.css(THUMB_TO_PRESSED_CLASS));
+            expect(activeThumb).not.toBeNull();
+            expect(sliderInstance.value).toBeGreaterThan(sliderInstance.minValue);
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            await wait();
+
+            expect(sliderInstance.value).toEqual(sliderInstance.minValue);
         });
 
-        it('should not move thumb slider and value should remain the same when slider is disabled', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
+        it('should not move thumb slider and value should remain the same when slider is disabled', async() => {
             sliderInstance.disabled = true;
             fixture.detectChanges();
 
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent( new MouseEvent('mosedown'));
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activeThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                expect(activeThumb).toBeDefined();
-                expect(sliderInstance.value).toBe(sliderInstance.minValue);
-                done();
-            });
+
+            (sliderInstance as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            expect(sliderInstance.value).toBe(sliderInstance.minValue);
          });
     });
 
@@ -474,32 +487,27 @@ describe('IgxSlider', () => {
             expect((slider.value as IRangeSliderValue).upper).toBe(slider.upperBound);
         });
 
-        it('continuous(smooth) sliding should be allowed', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
-            const fromThumb = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+        it('continuous(smooth) sliding should be allowed', async() => {
             slider.continuous = true;
             fixture.detectChanges();
 
-            expect(slider.continuous).toBe(true);
+            const fromThumb = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = fromThumb.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
 
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
-            fixture.detectChanges();
             fromThumb.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
 
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activetoThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                const activefromThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-from--active'));
-                expect(slider.value).toEqual({ lower: 60, upper: 100 });
-                expect(activetoThumb).toBeNull();
-                expect(activefromThumb).toBeNull();
-                done();
-            });
+            (slider as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            await wait();
+
+            (slider as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            expect((slider.value as any).lower).toBeGreaterThan(slider.minValue);
+            expect((slider.value as any).upper).toEqual(slider.maxValue);
         });
 
         // K.D. Removing this functionality because of 0 benefit and lots of issues.
@@ -1750,8 +1758,8 @@ describe('IgxSlider', () => {
             fix.detectChanges();
 
             const inst = fix.componentInstance;
-            const thumbs = fix.debugElement.queryAll(By.css('igx-thumb'));
-            const labels = fix.debugElement.queryAll(By.css('igx-thumb-label'));
+            const thumbs = fix.debugElement.queryAll(By.css(THUMB_TAG));
+            const labels = fix.debugElement.queryAll(By.css(THUMB_LABEL));
 
             expect(inst.dir.rtl).toEqual(true);
 
@@ -1803,21 +1811,6 @@ describe('IgxSlider', () => {
         });
     });
 
-    const panRight = (element, elementHeight, elementWidth, duration) => {
-        const panOptions = {
-            deltaX: elementWidth * 0.6,
-            clientX: elementWidth * 0.6,
-            deltaY: 0,
-            duration,
-            pos: [element.offsetLeft, elementHeight * 0.5]
-        };
-
-        return new Promise<void>(resolve => {
-            Simulator.gestures.pan(element, panOptions, () => {
-                resolve(null);
-            });
-        });
-    };
 
     const verifySecondaryTicsLabelsAreHidden = (ticks, hidden) => {
         const allTicks = Array.from(ticks.nativeElement.querySelectorAll(`${SLIDER_GROUP_TICKS_CLASS}`));