fix(carousel): fix touch

src/app/components/carousel-demo/carousel-example-01/carousel-example-01.component.html

@@ -1,5 +1,6 @@
-<ly-carousel [withClass]="classes.carousel">
+<ly-carousel [withClass]="classes.carousel" [touch]="true">
   <ly-carousel-item [withClass]="classes.carouselItem" *ngFor="let item of items" [srcImg]="item.img">
     <h1>{{item.title}}</h1>
+    <button ly-button bg="background:primary">Button</button>
   </ly-carousel-item>
 </ly-carousel>

src/app/components/carousel-demo/carousel-example-01/carousel-example-01.component.ts

@@ -20,7 +20,7 @@ const styles = {
 })
 export class CarouselExample01Component {
   classes = this.theme.addStyleSheet(styles);
-  items: any[] = [
+  items = [
     {
       title: 'Mountains',
       img: 'https://firebasestorage.googleapis.com/v0/b/alyle-ui.appspot.com/o/img%2FMountains-Blue.jpg?alt=media&token=d04f0279-79c6-4752-8b5a-cccd73720243'

src/app/components/carousel-demo/carousel-example-01/carousel-example-01.module.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
 import { LyCarouselModule } from '@alyle/ui/carousel';
 
 import { CarouselExample01Component } from './carousel-example-01.component';
+import { LyButtonModule } from '@alyle/ui/button';
 
 @NgModule({
   imports: [
     CommonModule,
-    LyCarouselModule
+    LyCarouselModule,
+    LyButtonModule
   ],
   exports: [CarouselExample01Component],
   declarations: [CarouselExample01Component]

src/lib/carousel/carousel.html

@@ -1,7 +1,9 @@
 <div
-(slidestart)="slideEvent && onDragStart($event)"
-(slide)="slideEvent && onDrag($event)"
-(slideend)="slideEvent && onDragEnd($event)"
+(slidestart)="touch && onDragStart($event)"
+(slideleft)="touch && onDrag($event)"
+(slideright)="touch && onDrag($event)"
+(slidecancel)="touch && ondragCancel($event)"
+(slideend)="touch && onDragEnd($event)"
 #slideContainer
 >
   <div [className]="classes.slide" [style.transform]="_positionLeft">
@@ -16,7 +18,9 @@
       color="#000"
       bg="background:primary"
       [class.active]="selectedIndex==i"
-      [elevation]="6"></span>
+      [elevation]="8"
+      [shadowColor]="'text'"
+      ></span>
       </div>
   </div>
   <div class="ly-carousel-actions" (click)="prev()">

src/lib/carousel/carousel.ts

@@ -16,11 +16,15 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { Platform, LyTheme2, toBoolean } from '@alyle/ui';
+import { Platform, LyTheme2, toBoolean, ThemeVariables } from '@alyle/ui';
+import * as _chroma from 'chroma-js';
+
+/** @docs-private */
+const chroma = _chroma;
 
 const STYLE_PRIORITY = -2;
 
-const styles = ({
+const styles = (theme: ThemeVariables) => ({
   root: {
     display: 'block',
     '-webkit-user-select': 'none',
@@ -36,8 +40,8 @@ const styles = ({
       width: '1em',
       fontSize: '36px',
       cursor: 'pointer',
-      color: '#fff',
-      background: 'rgba(0, 0, 0, 0.11)',
+      color: theme.background.primary.default,
+      background: chroma(theme.text.primary).alpha(.25).css(),
       willChange: 'transform'
     },
     '& .ly-carousel-actions.right': {
@@ -55,7 +59,8 @@ const styles = ({
     display: 'block',
     width: '100%',
     height: '100%',
-    position: 'relative'
+    position: 'relative',
+    touchAction: 'pan-y !important'
   },
   slide: {
     display: 'flex',
@@ -65,7 +70,6 @@ const styles = ({
     '& > ly-carousel-item': {
       width: '100%',
       flexShrink: 0,
-      overflow: 'auto',
       position: 'relative',
       backgroundSize: 'cover',
       backgroundPosition: 'center',
@@ -114,10 +118,12 @@ const styles = ({
       transform: 'scale(.5)',
       borderRadius: '50%',
       willChange: 'transform',
-      display: 'block'
+      display: 'block',
+      opacity: .65
     },
     '&>div>span.active': {
-      transform: 'scale(1)'
+      transform: 'scale(1)',
+      opacity: 1
     }
   }
 });
@@ -148,28 +154,31 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   @Input() selectedIndex = 0;
   selectedElement: HTMLElement;
   classes = this.theme.addStyleSheet(styles, STYLE_PRIORITY);
-  private _slideEvent: boolean;
+  private _touch: boolean;
   @Input()
-  set slideEvent(val: boolean) {
+  set touch(val: boolean) {
     const newVal = toBoolean(val);
-    this._slideEvent = newVal;
+    this._touch = newVal;
     if (newVal) {
       this.renderer.removeClass(this.elementRef.nativeElement, this.classes.slideNoEvent);
     } else {
       this.renderer.addClass(this.elementRef.nativeElement, this.classes.slideNoEvent);
     }
   }
-  get slideEvent() {
-    return this._slideEvent;
+  get touch() {
+    return this._touch;
   }
   onDragStart(e) {
+    this.stop();
     this.renderer.removeClass(this.slideContainer.nativeElement, this.classes.slideAnim);
     this.selectedElement = this.lyItems.find((item, index) => index === this.selectedIndex)._nativeElement;
   }
   onDrag(e) {
     const rect = this.selectedElement.getBoundingClientRect();
     if (Math.abs(e.deltaX) < rect.width) {
       this._onPan(e.deltaX);
+    } else {
+      this._onPan(rect.width * Math.sign(e.deltaX));
     }
   }
   onDragEnd(e) {
@@ -191,28 +200,34 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
         this.prev();
       }
     }
+    this._resetInterval();
+  }
+  ondragCancel() {
+    this.renderer.addClass(this.slideContainer.nativeElement, this.classes.slideAnim);
+    this.select(this.selectedIndex);
+    this._resetInterval();
   }
   constructor(
     private elementRef: ElementRef,
     private sanitizer: DomSanitizer,
     private cd: ChangeDetectorRef,
     private theme: LyTheme2,
-    private renderer: Renderer2,
+    private renderer: Renderer2
   ) {
     this.renderer.addClass(elementRef.nativeElement, this.classes.root);
   }
 
   ngOnInit() {
-    if (!this.slideEvent) {
-      this.slideEvent = false;
+    if (!this.touch) {
+      this.touch = false;
     }
     if (Platform.isBrowser) {
       this._resetInterval();
     }
   }
 
   private _onPan(x) {
-    this._positionLeft = this.sanitizerStyle(`translate(calc(${-100 * this.selectedIndex }% + ${x}px), 0px)`) as any;
+    this._positionLeft = this.sanitizerStyle(`translate3d(calc(${-100 * this.selectedIndex }% + ${x}px), 0px, 0)`) as any;
   }
   private sanitizerStyle(val: any): SafeStyle {
     return this.sanitizer.bypassSecurityTrustStyle(val);
@@ -237,7 +252,7 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   select(val: number, notResetInterval?: boolean) {
     this.selectedIndex = val;
     if (this.mode === CarouselMode.default) {
-      this._positionLeft = `translate(${-100 * val}%, 0px)`;
+      this._positionLeft = `translate3d(${-100 * val}%, 0px, 0)`;
     }
     if (!notResetInterval) {
       this._resetInterval();

src/lib/public_api.ts

@@ -5,8 +5,6 @@ export * from './src/alyle-config-service';
 export * from './src/platform/index';
 export * from './src/theme/common.module';
 export * from './src/minimal/index';
-export * from './src/dom/dom.service';
-export * from './src/dom/lx-dom.module';
 export * from './src/focus-state/focus-state.module';
 export * from './src/version';
 export * from './src/gesture/gesture-config';

src/lib/src/gesture/gesture-config.ts

@@ -9,7 +9,8 @@ const HAMMER_GESTURES_EVENTS = [
   'slidestart',
   'slideend',
   'slideright',
-  'slideleft'
+  'slideleft',
+  'slidecancel'
 ];
 
 @Injectable()
@@ -22,7 +23,7 @@ export class LyHammerGestureConfig extends HammerGestureConfig {
   }
   buildHammer(element: HTMLElement): HammerInstance {
     const hammer = typeof window !== 'undefined' ? (window as any).Hammer : null;
-    const mc = new hammer(element, this._hammerOptions || undefined);
+    const mc = new hammer(element, this._hammerOptions || {});
 
     const pan = new hammer.Pan();
     const swipe = new hammer.Swipe();