Merge pull request #6230 from IgniteUI/slider-ticks-refactoring

Slider ticks enhancements

Author: kdinev

CHANGELOG.md

@@ -66,6 +66,7 @@ All notable changes for each version of this project will be documented in this
     - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
+    - `isContinuous` - input has been deleted. The option is not supported anymore.
 
 - `IgxCarousel`:
     - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation

projects/igniteui-angular/migrations/update-9_0_0/changes/inputs.json

@@ -0,0 +1,13 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "isContinuous",
+            "replaceWith": "continuous",
+            "owner": {
+                "selector": "igx-slider",
+                "type": "component"
+            }
+        }
+    ]
+}

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

@@ -1,5 +1,7 @@
 import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import { Observable } from 'rxjs';
+import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  *@hidden
@@ -321,3 +323,20 @@ export const NAVIGATION_KEYS = new Set([
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
 export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'enter', 'f2', 'escape', 'esc']);
+
+/**
+ * @hidden
+ * @internal
+ *
+ * Creates a new ResizeObserver on `target` and returns it as an Observable.
+ */
+export function resizeObservable(target: HTMLElement): Observable<ResizeObserverEntry[]> {
+    return new Observable((observer) => {
+        const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            observer.next(entries);
+        });
+        instance.observe(target);
+        const unsubscribe = () => instance.disconnect();
+        return unsubscribe;
+    });
+}

projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgModule, Input, TemplateRef, HostBinding, ElementRef } from '@angular/core';
+import { Component, Input, TemplateRef, HostBinding, ElementRef } from '@angular/core';
 import { SliderHandle } from '../slider.common';
 
 @Component({

projects/igniteui-angular/src/lib/slider/slider.common.ts

@@ -73,16 +73,16 @@ export enum SliderHandle {
  * Slider Tick labels Orientation
  */
 export enum TickLabelsOrientation {
-    horizontal,
-    toptobottom,
-    bottomtotop
+    Horizontal,
+    TopToBottom,
+    BottomToTop
 }
 
 /**
  * Slider Ticks orientation
  */
 export enum TicksOrientation {
-    top,
-    bottom,
-    mirror
+    Top,
+    Bottom,
+    Mirror
 }

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

@@ -1400,7 +1400,7 @@ describe('IgxSlider', () => {
             expect(ticksTop).toBeNull();
 
             fixture.componentInstance.showTicks = true;
-            fixture.componentInstance.ticksOrientation = TicksOrientation.mirror;
+            fixture.componentInstance.ticksOrientation = TicksOrientation.Mirror;
             fixture.detectChanges();
 
             ticks = fixture.debugElement.nativeElement.querySelector(SLIDER_TICKS_ELEMENT);
@@ -1470,7 +1470,7 @@ describe('IgxSlider', () => {
 
             expect(bottomTicks).not.toBeNull();
 
-            fixture.componentInstance.ticksOrientation = TicksOrientation.top;
+            fixture.componentInstance.ticksOrientation = TicksOrientation.Top;
             fixture.detectChanges();
 
             let topTIcks = fixture.debugElement.nativeElement.querySelector(SLIDER_TICKS_TOP_ELEMENT);
@@ -1479,7 +1479,7 @@ describe('IgxSlider', () => {
             expect(topTIcks).not.toBeNull();
             expect(bottomTicks).toBeNull();
 
-            fixture.componentInstance.ticksOrientation = TicksOrientation.mirror;
+            fixture.componentInstance.ticksOrientation = TicksOrientation.Mirror;
             fixture.detectChanges();
 
             topTIcks = fixture.debugElement.nativeElement.querySelector(SLIDER_TICKS_TOP_ELEMENT);
@@ -1499,15 +1499,15 @@ describe('IgxSlider', () => {
             expect(labelsBottomTop).toBeNull();
             expect(labelsTopBottom).toBeNull();
 
-            fixture.componentInstance.tickLabelsOrientation = TickLabelsOrientation.bottomtotop;
+            fixture.componentInstance.tickLabelsOrientation = TickLabelsOrientation.BottomToTop;
             fixture.detectChanges();
 
             labelsBottomTop = nativeElem.querySelector(BOTTOM_TO_TOP_TICK_LABLES);
             labelsTopBottom = nativeElem.querySelector(TOP_TO_BOTTOM_TICK_LABLES);
             expect(labelsBottomTop).not.toBeNull();
             expect(labelsTopBottom).toBeNull();
 
-            fixture.componentInstance.tickLabelsOrientation = TickLabelsOrientation.toptobottom;
+            fixture.componentInstance.tickLabelsOrientation = TickLabelsOrientation.TopToBottom;
             fixture.detectChanges();
 
             labelsBottomTop = nativeElem.querySelector(BOTTOM_TO_TOP_TICK_LABLES);
@@ -1596,10 +1596,10 @@ export class SliderTicksComponent {
     public primaryTicks = 0;
     public secondaryTicks = 0;
     public showTicks = true;
-    public ticksOrientation = TicksOrientation.bottom;
+    public ticksOrientation = TicksOrientation.Bottom;
     public primaryTickLabels = true;
     public secondaryTickLabels = true;
-    public tickLabelsOrientation = TickLabelsOrientation.horizontal;
+    public tickLabelsOrientation = TickLabelsOrientation.Horizontal;
 }
 @Component({
     selector: 'igx-slider-test-component',