@logo-software/image-slider/fesm2015/logo-software-image-slider.js

Image Slider is a image viewer library for cycling through a series of images. It also includes support for previous/next controls and thumbnails.

import { EventEmitter, Component, HostBinding, Output, ViewChild, ElementRef, Input, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
/**
 * Image Slider is a key to product showcases. With Image Slider Component you can easily add simple image gallery your page.
 * Add the below code to your code stack and give initializer parameters.
 *
 * <sub>app.component.html</sub>
 *
 * ```html
 * <logo-image-slider
 *  [media]="items"
 *  [texts]="captions"
 *  (onItemChange)="sampleChangeEvent($event)"
 * >
 * </logo-image-slider>
 * ```
 */
class ImageSliderComponent {
    constructor(domSanitizer) {
        this.domSanitizer = domSanitizer;
        this.name = 'image-slider';
        /**
         * Gives output when image slide changed with changing position.
         */
        this.onItemChange = new EventEmitter();
        this.itemCount = 0;
        this.pos = 0;
        this._media = [];
        this._texts = [];
        window.addEventListener('resize', () => this.setTransform());
    }
    get media() {
        return this._media;
    }
    /**
     * Import the images that will have shown at image slider. Media input will be string array.
     */
    set media(value) {
        this._media = value;
        this.itemCount = this._media.length;
    }
    /**
     * Import the images' captions that will have shown on images. Text input will be string array.
     */
    get texts() {
        return this._texts;
    }
    set texts(value) {
        this._texts = value;
    }
    sanitizer(image) {
        return this.domSanitizer.bypassSecurityTrustStyle(`url(${image})`);
    }
    setTransform() {
        this.items.nativeElement.style['transform'] = 'translate3d(' + (-this.pos * this.items.nativeElement.offsetWidth) + 'px,0,0)';
    }
    /**
     * Change image slider to previous image
     */
    prev() {
        this.pos = 0 === this.pos ? this.itemCount - 1 : Math.max(this.pos - 1, 0);
        this.setTransform();
        this.onItemChange.emit(this.pos);
    }
    /**
     * Change image slider to next image
     */
    next() {
        this.pos = this.pos === this.itemCount - 1 ? 0 : Math.min(this.pos + 1, this.itemCount - 1);
        this.setTransform();
        this.onItemChange.emit(this.pos);
    }
    /**
     * Change image slider to selected index
     * @param index
     */
    changeItem(index) {
        this.onItemChange.emit(index);
    }
    move(index) {
        this.pos = index;
        this.setTransform();
        this.onItemChange.emit(this.pos);
    }
}
ImageSliderComponent.decorators = [
    { type: Component, args: [{
                selector: 'logo-image-slider',
                template: "<div #imageSlider class=\"image-slider\">\n  <div #wrap class=\"base\">\n    <button (click)=\"prev()\" [hidden]=\"pos===0\" class=\"prev le-chevron_left\"></button>\n    <div #scroller (swipeleft)=\"next()\" (swiperight)=\"prev()\" class=\"scroller\">\n      <ul #items class=\"items\">\n        <ng-container>\n          <li\n            *ngFor=\"let item of media; let i=index\"\n            [ngClass]=\"{'slider-selected':i===pos}\"\n            [style.background-image]=\"sanitizer(item)\"\n            class=\"item\"\n          >\n            <span *ngIf=\"texts[i]\" [innerHTML]=\"texts[i]\" class=\"caption\"></span>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <button (click)=\"next()\" [hidden]=\"pos===itemCount-1\" class=\"next le-chevron_right\"></button>\n  </div>\n  <div class=\"thumbs\">\n    <ul class=\"thumb-list\">\n      <li\n        (click)=\"move(i)\"\n        *ngFor=\"let item of media; let i=index\"\n        [ngClass]=\"{'selected': i===pos}\"\n        [style.background-image]=\"sanitizer(item)\" class=\"move\"\n      >\n      </li>\n    </ul>\n  </div>\n</div>\n",
                styles: [".dotted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-tooltip .tip.on-bottom:after,.logo-tooltip .tip.on-top:after{border-left:7px solid transparent;border-right:7px solid transparent}.logo-tooltip .tip.on-left:after,.logo-tooltip .tip.on-right:after{border-top:7px solid transparent;border-bottom:7px solid transparent}.logo-tooltip{position:relative;color:#e94a34;cursor:pointer}.logo-tooltip .tip{position:absolute;width:180px;color:#fff;font-size:14px;font-style:normal;line-height:1.4;text-align:center;border-radius:3px;background:#333;padding:8px 12px;box-sizing:border-box;cursor:auto;z-index:10;opacity:0;visibility:hidden;transition:all .25s ease-in}.logo-tooltip .tip:after{position:absolute;width:0;height:0;content:\"\"}.logo-tooltip .tip.on-top{bottom:25px;left:0}.logo-tooltip .tip.on-top:after{bottom:-7px;left:10px;border-top:7px solid #333}.logo-tooltip .tip.on-right{top:-5px;left:103%}.logo-tooltip .tip.on-right:after{top:37%;left:-7px;border-right:7px solid #333}.logo-tooltip .tip.on-bottom{top:25px;left:0}.logo-tooltip .tip.on-bottom:after{top:-7px;left:10px;border-bottom:7px solid #333}.logo-tooltip .tip.on-left{top:-100%;right:103%}.logo-tooltip .tip.on-left:after{top:37%;right:-7px;border-left:7px solid #333}.logo-tooltip:hover .tip{opacity:1;visibility:visible}.logo-tooltip:hover .tip.on-top{transform:translateY(-15px)}.logo-tooltip:hover .tip.on-right{transform:translateX(15px)}.logo-tooltip:hover .tip.on-bottom{transform:translateY(15px)}.logo-tooltip:hover .tip.on-left{transform:translateX(-15px)}.test{content:\"a\";content:\"ba\";content:\"aa\";content:\"aade\";content:\"abde\"}:root .basic,:root .gray,:root .secondary{color:var(--leds-contrast-90pct)}:root .danger,:root .info,:root .success,:root .warning{color:var(--white)}:root .outline.primary,:root .outline.primary:active,:root .outline.primary:focus,:root .outline.primary:hover{border-color:var(--light-600)}:root .outline.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .outline.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .outline.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .outline.secondary{color:var(--leds-contrast-90pct)}:root .outline.secondary,:root .outline.secondary:active,:root .outline.secondary:focus,:root .outline.secondary:hover{border-color:var(--light-600)}:root .outline.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.basic{color:var(--leds-contrast-90pct)}:root .outline.basic,:root .outline.basic:active,:root .outline.basic:focus,:root .outline.basic:hover{border-color:var(--light-600)}:root .outline.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.neutral,:root .outline.neutral:active,:root .outline.neutral:focus,:root .outline.neutral:hover{border-color:var(--light-600)}:root .outline.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .outline.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .outline.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .outline.light{border-color:rgba(var(--light-rgb),.5)}:root .outline.light:active,:root .outline.light:focus,:root .outline.light:hover{border-color:var(--light)}:root .outline.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .outline.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .outline.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .outline.dark,:root .outline.dark:active,:root .outline.dark:focus,:root .outline.dark:hover{border-color:var(--light-600)}:root .outline.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .outline.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .outline.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .outline.gray{color:var(--leds-contrast-90pct)}:root .outline.gray,:root .outline.gray:active,:root .outline.gray:focus,:root .outline.gray:hover{border-color:var(--light-600)}:root .outline.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.info{color:var(--info)}:root .outline.info,:root .outline.info:active,:root .outline.info:focus,:root .outline.info:hover{border-color:var(--light-600)}:root .outline.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .outline.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .outline.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .outline.danger{color:var(--danger)}:root .outline.danger,:root .outline.danger:active,:root .outline.danger:focus,:root .outline.danger:hover{border-color:var(--light-600)}:root .outline.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .outline.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .outline.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .outline.warning{color:var(--warning)}:root .outline.warning,:root .outline.warning:active,:root .outline.warning:focus,:root .outline.warning:hover{border-color:var(--light-600)}:root .outline.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .outline.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .outline.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .outline.success{color:var(--success)}:root .outline.success,:root .outline.success:active,:root .outline.success:focus,:root .outline.success:hover{border-color:var(--light-600)}:root .outline.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .outline.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .outline.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:root .ghost.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .ghost.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .ghost.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .ghost.secondary,:root .ghost.secondary:hover{color:var(--leds-contrast-90pct)}:root .ghost.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus))}:root .ghost.basic,:root .ghost.basic:hover,:root .ghost.secondary:focus{color:var(--leds-contrast-90pct)}:root .ghost.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .ghost.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .ghost.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .ghost.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .ghost.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .ghost.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .ghost.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .ghost.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .ghost.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .ghost.gray,:root .ghost.gray:hover{color:var(--leds-contrast-90pct)}:root .ghost.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.info{color:var(--info)}:root .ghost.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .ghost.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .ghost.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .ghost.danger{color:var(--danger)}:root .ghost.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .ghost.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .ghost.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .ghost.warning{color:var(--warning)}:root .ghost.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .ghost.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .ghost.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .ghost.success{color:var(--success)}:root .ghost.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .ghost.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .ghost.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:host{position:relative}:host,:host .base,:host .image-slider{display:flex;flex-direction:column;height:100%}:host .base{position:relative;flex-grow:1;width:100%;margin:auto}:host .base:hover button{transition:all .1s linear;opacity:1;background:rgba(var(--primary-rgb),.5)}:host .base button{transition:all .1s linear;opacity:0;position:absolute;z-index:2;border:none;background:rgba(var(--primary-rgb),.8);padding:0;text-align:center;outline:none;transition:opacity .1s ease-out;width:50px;color:var(--white);font-size:32px;line-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;top:50%;transform:translateY(-50%);height:50px}:host .base button.prev{left:0}:host .base button.next{right:0}:host .base .scroller{display:flex;flex-grow:1;overflow:hidden;max-width:100%}:host .base .scroller .items{list-style-type:none;white-space:nowrap;font-size:0;line-height:0;transition:transform .4s ease-in-out;padding:0;margin:0;min-height:100%;display:flex;flex-direction:row;flex-grow:1;width:100%}:host .base .scroller .item{padding:30px 20px;height:100%;font-size:25px;line-height:1;background-size:contain;background-repeat:no-repeat;background-position:50% 50%;text-transform:uppercase;box-sizing:border-box;min-width:100%;display:flex;justify-content:center;flex-grow:1;position:relative}:host .base .scroller .item .caption{display:block;position:absolute;width:100%;left:0;bottom:0;background:rgba(var(--primary-rgb),.5);color:var(--white);font-size:14px;line-height:16px;padding:5px 10px}:host .base .scroller .item:nth-child(2){color:var(--white)}:host .thumbs{height:80px;width:100%;overflow-x:auto;box-sizing:border-box}:host .thumbs .thumb-list{display:flex;justify-content:flex-start;text-align:left;list-style:none;padding:10px 0;margin:0;height:100%;box-sizing:border-box}:host .thumbs .thumb-list li.move{transition:all .1s linear;width:90px;height:100%;background-clip:content-box;background-size:contain;margin-right:10px;cursor:pointer;box-sizing:border-box}:host .thumbs .thumb-list li.move:last-child{margin-right:0}:host .thumbs .thumb-list li.move.selected{transition:all .1s linear;border:1px solid rgba(var(--primary-rgb),.5)}"]
            },] }
];
ImageSliderComponent.ctorParameters = () => [
    { type: DomSanitizer }
];
ImageSliderComponent.propDecorators = {
    name: [{ type: HostBinding, args: ['class',] }],
    onItemChange: [{ type: Output }],
    wrap: [{ type: ViewChild, args: ['wrap', { read: ElementRef, static: true },] }],
    items: [{ type: ViewChild, args: ['items', { read: ElementRef, static: true },] }],
    scroller: [{ type: ViewChild, args: ['scroller', { read: ElementRef, static: true },] }],
    media: [{ type: Input }],
    texts: [{ type: Input }]
};

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
/**
 * Image Slider is a image viewer library for cycling through a series of images. It also includes support for previous/next controls and thumbnails.
 *
 * It comes with the features below:
 * * Thumbnail support.
 * * On Image change, image specific output.
 * * Auto scrollable thumbnails.
 * * Mobile support.
 *
 * @stacked-example(ImageSliderComponent, logo/image-slider-sample/image-slider-showcase/image-slider-showcase.component)
 *
 * ### Installation
 *
 * All public npm packages of Logo Software is at [https://www.npmjs.com/~logofe](https://www.npmjs.com/~logofe). To
 * install Image Slider Module:
 *
 * ```bash
 * $ npm set registry https://registry.npmjs.org/
 * $ npm install @logo-software/image-slider -s
 * ```
 *
 * Just import it to your project of `@NgModule` import section.
 *
 * ```typescript
 * @NgModule({
 *  imports: [CommonModule, ImageSliderModule],
 * })
 * export class AppModule {
 * }
 * ```
 */
class ImageSliderModule {
}
ImageSliderModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ImageSliderComponent],
                imports: [CommonModule],
                exports: [ImageSliderComponent],
            },] }
];

/*
 * Public API Surface of image-slider
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ImageSliderComponent, ImageSliderModule };
//# sourceMappingURL=logo-software-image-slider.js.map