@logo-software/image-slider/bundles/logo-software-image-slider.umd.min.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.

!function(o,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define("@logo-software/image-slider",["exports","@angular/core","@angular/platform-browser","@angular/common"],r):r(((o="undefined"!=typeof globalThis?globalThis:o||self)["logo-software"]=o["logo-software"]||{},o["logo-software"]["image-slider"]={}),o.ng.core,o.ng.platformBrowser,o.ng.common)}(this,(function(o,r,t,a){"use strict";
/**
     * @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.
     */var e=function(){function o(o){var t=this;this.domSanitizer=o,this.name="image-slider",this.onItemChange=new r.EventEmitter,this.itemCount=0,this.pos=0,this._media=[],this._texts=[],window.addEventListener("resize",(function(){return t.setTransform()}))}return Object.defineProperty(o.prototype,"media",{get:function(){return this._media},set:function(o){this._media=o,this.itemCount=this._media.length},enumerable:!1,configurable:!0}),Object.defineProperty(o.prototype,"texts",{get:function(){return this._texts},set:function(o){this._texts=o},enumerable:!1,configurable:!0}),o.prototype.sanitizer=function(o){return this.domSanitizer.bypassSecurityTrustStyle("url("+o+")")},o.prototype.setTransform=function(){this.items.nativeElement.style.transform="translate3d("+-this.pos*this.items.nativeElement.offsetWidth+"px,0,0)"},o.prototype.prev=function(){this.pos=0===this.pos?this.itemCount-1:Math.max(this.pos-1,0),this.setTransform(),this.onItemChange.emit(this.pos)},o.prototype.next=function(){this.pos=this.pos===this.itemCount-1?0:Math.min(this.pos+1,this.itemCount-1),this.setTransform(),this.onItemChange.emit(this.pos)},o.prototype.changeItem=function(o){this.onItemChange.emit(o)},o.prototype.move=function(o){this.pos=o,this.setTransform(),this.onItemChange.emit(this.pos)},o}();e.decorators=[{type:r.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)}']}]}],e.ctorParameters=function(){return[{type:t.DomSanitizer}]},e.propDecorators={name:[{type:r.HostBinding,args:["class"]}],onItemChange:[{type:r.Output}],wrap:[{type:r.ViewChild,args:["wrap",{read:r.ElementRef,static:!0}]}],items:[{type:r.ViewChild,args:["items",{read:r.ElementRef,static:!0}]}],scroller:[{type:r.ViewChild,args:["scroller",{read:r.ElementRef,static:!0}]}],media:[{type:r.Input}],texts:[{type:r.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.
     */
var n=function(){};n.decorators=[{type:r.NgModule,args:[{declarations:[e],imports:[a.CommonModule],exports:[e]}]}],o.ImageSliderComponent=e,o.ImageSliderModule=n,Object.defineProperty(o,"__esModule",{value:!0})}));
//# sourceMappingURL=logo-software-image-slider.umd.min.js.map