first commit

.gitignore

@@ -0,0 +1 @@
+dist

.npmignore

@@ -0,0 +1 @@
+node_modules

arrow/arrow.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+
+@Component({
+    selector: 'arrow',
+    template: `
+        <div class="arrow" (click)="onClick()" 
+        [ngClass]="{ left : dir === 'left', right : dir === 'right', disabled  : disabled}"></div>
+    `,
+    styles: [`
+        .arrow{
+            position: absolute;
+            height: 50px;
+            width: 30px;
+            opacity: .6;
+            user-select: none;
+            -moz-user-select: none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+            -o-user-select: none;
+            z-index: 1000;
+        }
+        .arrow.right{
+            right: 5px;
+            top: 50%;
+         
+            transform: scaleX(-1) translateY(-50%);
+            -moz-transform: scaleX(-1) translateY(-50%);
+            -o-transform: scaleX(-1) translateY(-50%);
+            -webkit-transform: scaleX(-1) translateY(-50%);
+            -ms-transform: scaleX(-1) translateY(-50%);
+            filter: FlipH;
+            -ms-filter: "FlipH";
+        }
+        
+        .arrow.left{
+            left: 5px;
+            top: 50%;
+            transform: translateY(-50%);
+            -moz-transform: translateY(-50%);
+            -webkit-transform: translateY(-50%);
+            -o-transform: translateY(-50%);
+            -ms-transform: translateY(-50%);
+        }
+        .arrow:hover{
+            opacity: .8;
+            cursor: pointer;
+        }
+        
+        .arrow:before{
+            content: "";
+            height: 3px;
+            width: 30px;
+            background: #fff;
+            display: block;
+            position: absolute;
+            top: 14px;
+            transform: rotate(-45deg);
+            -moz-transform: rotate(-45deg);
+            -webkit-transform: rotate(-45deg);
+            -o-transform: rotate(-45deg);
+            -ms-transform: rotate(-45deg);
+        }
+        .arrow:after{
+            content: "";
+            height: 3px;
+            width: 30px;
+            background: #fff;
+            display: block;
+            transform: rotate(45deg);
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            position: absolute;
+            bottom: 14px;
+        }
+        .arrow.disabled{
+            opacity: .4;
+        }
+        .arrow.disabled:hover{
+            opacity: .4;
+            cursor: pointer;
+        }
+    `]
+})
+
+export class ArrowComponent {
+    @Input() dir: string;
+
+    @Input("disabled")
+    disabled: boolean = true;
+
+    @Output('on-click') click: EventEmitter<any> = new EventEmitter<any>();
+
+
+    constructor() { }
+
+    onClick() {
+        if (!this.disabled)
+            this.click.emit();
+    }
+}

directives/swiper.directive.ts

@@ -0,0 +1,139 @@
+import { Directive, HostListener, ElementRef, Renderer2, Output, EventEmitter, Input } from '@angular/core';
+
+const ZERO = 0.000000000001;
+
+@Directive({
+    selector: '[swiper]',
+    exportAs: 'swiper'
+})
+export class SwiperDirective {
+    isDown: boolean = false;
+    initialPos: number = ZERO;
+    lastPos: number = ZERO;
+    swipeDistance: number = ZERO;
+    firstSwipeDate = Date.now();
+    static canISwipe: boolean = true;
+
+    @Output() onSwipeRight: EventEmitter<any> = new EventEmitter<any>();
+    @Output() onSwipeLeft: EventEmitter<any> = new EventEmitter<any>();
+    @Output() onSwipeStart: EventEmitter<any> = new EventEmitter<any>();
+    @Output() onSwipeEnd: EventEmitter<any> = new EventEmitter<any>();
+    @Output() swipeLeft: EventEmitter<any> = new EventEmitter<any>();
+    @Output() swipeRight: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor(
+        private el: ElementRef,
+        private renderer: Renderer2
+    ) { }
+
+
+    ngOnInit() {
+        this.onSwipeEnd.subscribe(() => {
+
+        })
+        this.swipeLeft.subscribe(() => {
+            SwiperDirective.canISwipe = false;
+            setTimeout(() => {
+                SwiperDirective.canISwipe = true;
+            }, 350);
+        });
+        this.swipeRight.subscribe(() => {
+            SwiperDirective.canISwipe = false;
+            setTimeout(() => {
+                SwiperDirective.canISwipe = true;
+            }, 350);
+        });
+    }
+
+
+
+    @HostListener("mousedown", ["$event"])
+    onMouseDown(event: any) {
+        if (!SwiperDirective.canISwipe) {
+            return;
+        }
+        this.firstSwipeDate = Date.now()
+        this.isDown = true;
+        this.initialPos = event.clientX;
+        this.swipeDistance = 0;
+        this.onSwipeStart.emit();
+    }
+
+    @HostListener("document:mouseup", ["$event"])
+    onMouseUp(event: any) {
+        if (!this.isDown)
+            return;
+        this.initialPos = this.lastPos = ZERO;
+        this.isDown = false;
+
+        if (this.swipeDistance > 100) {
+            this.swipeLeft.emit();
+        } else if (this.swipeDistance < -100) {
+            this.swipeRight.emit();
+        } else {
+            this.onSwipeEnd.emit();
+        }
+        this.swipeDistance = ZERO;
+    }
+
+    @HostListener("mousemove", ["$event"])
+    onMouseMove(event: any) {
+        if (this.isDown) {
+            let swipeFrameDistance = event.clientX - this.initialPos - this.lastPos;
+            this.swipeDistance += swipeFrameDistance;
+            this.lastPos = event.clientX - this.initialPos;
+
+            if (swipeFrameDistance > 0) {
+                this.onSwipeLeft.emit(swipeFrameDistance);
+            }
+            else {
+                this.onSwipeRight.emit(swipeFrameDistance);
+            }
+        }
+    }
+
+    @HostListener('touchmove', ['$event'])
+    onTouchMove(event: any) {
+        if (!SwiperDirective.canISwipe) {
+            return;
+        }
+        let touch = event.touches[0] || event.changedTouches[0];
+        let swipeFrameDistance = touch.clientX - this.initialPos - this.lastPos;
+        swipeFrameDistance = swipeFrameDistance < 30 ? swipeFrameDistance : 30;
+        this.swipeDistance += swipeFrameDistance;
+        this.lastPos = touch.clientX - this.initialPos;
+
+        if (swipeFrameDistance > 0) {
+            this.onSwipeLeft.emit(swipeFrameDistance);
+        }
+        else {
+            this.onSwipeRight.emit(swipeFrameDistance);
+        }
+    }
+
+    @HostListener("touchstart", ["$event"])
+    onTouchStart(event: any) {
+        if (!SwiperDirective.canISwipe) {
+            return;
+        }
+        let touch = event.touches[0] || event.changedTouches[0];
+        this.firstSwipeDate = Date.now()
+        this.initialPos = touch.clientX;
+        this.swipeDistance = ZERO;
+        this.onSwipeStart.emit();
+    }
+
+    @HostListener("touchend", ["$event"])
+    onTouchEnd(event: any) {
+        this.initialPos = this.lastPos = ZERO;
+        if (this.swipeDistance > 100) {
+            this.swipeLeft.emit();
+        } else if (this.swipeDistance < -100) {
+            this.swipeRight.emit();
+        } else {
+            this.onSwipeEnd.emit();
+        }
+        this.swipeDistance = ZERO;
+    }
+
+}

directives/ui-lazy-load.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
+import { UICarouselItemComponent } from "../ui-carousel-item/ui-carousel-item.component";
+@Directive({ selector: '[ui-lazy-load]' })
+export class UILazyloadDirective {
+    @Input("ui-lazy-load") uiLazyLoad: string;
+    constructor(
+        private el: ElementRef,
+        private renderer: Renderer2,
+    ) { }
+
+    load() {
+        let img = this.el.nativeElement;
+        if (img.src)
+            return;
+        img.src = this.uiLazyLoad;
+        // this.renderer.listen(img, "load", (event) => { });
+    }
+}

dots/dots.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+
+@Component({
+    selector: 'dots',
+    template: `
+    <div class="dot" *ngFor="let index of numbers" (click)="click(index)" [class.active]="activeDot === index"></div>
+    `,
+    styles : [`
+        :host{
+            position: absolute;
+            display: inline-block;
+            z-index: 1000;
+        }
+        
+        :host(.left){
+            bottom: 10px;
+            left: 10px;
+        }
+        
+        :host(.right){
+            bottom: 10px;
+            right: 10px;
+        }
+        
+        :host(.middle){
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            -moz-transform: translateX(-50%);
+            -o-transform: translateX(-50%);
+            -ms-transform: translateX(-50%);
+        }
+        
+        .dot{
+            height: 10px;
+            width: 10px;
+            border-radius: 5px;
+            background: white;
+            opacity: .6;
+            margin: 0 4px;
+            display: inline-block;
+        }
+        
+        .dot:hover{
+            opacity: .8;
+            cursor: pointer;
+        }
+        
+        .dot.active{
+            opacity: .8;
+        }
+    `]
+})
+
+export class DotsComponent implements OnInit {
+    numbers: Array<number>;
+
+    @Input("active-dot") activeDot: number = 0;
+    @Input("dots-count") dotsCount: number;
+
+    @HostBinding("class")
+    @Input() position: string = "left";
+
+    @Output("on-click") onClick: EventEmitter<number> = new EventEmitter<number>();
+
+    constructor() {
+    }
+
+    ngOnInit() {
+        this.numbers = Array(this.dotsCount).fill(0).map((x, i) => i);
+    }
+
+    click(index: any) {
+        this.onClick.emit(index);
+        this.activeDot = index;
+    }
+}

index.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UICarouselComponent } from './ui-carousel/ui-carousel.component';
+import { UICarouselItemComponent } from './ui-carousel-item/ui-carousel-item.component';
+import { SwiperDirective } from './directives/swiper.directive';
+import { UILazyloadDirective } from './directives/ui-lazy-load.directive';
+import { DotsComponent } from './dots/dots.component';
+import { ArrowComponent } from './arrow/arrow.component';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        UICarouselComponent,
+        UICarouselItemComponent,
+        UILazyloadDirective
+    ],
+    declarations: [
+        UICarouselComponent,
+        UICarouselItemComponent,
+        DotsComponent,
+        ArrowComponent,
+        SwiperDirective,
+        UILazyloadDirective
+    ],
+    providers: [
+    ],
+})
+export class UICarouselModule { }