@logo-software/image-slider/logo-software-image-slider.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"ImageSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"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)}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":34,"character":3},"arguments":["class"]}]}],"onItemChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"wrap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":3},"arguments":["wrap",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":28},"static":true}]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["items",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":40,"character":29},"static":true}]}]}],"scroller":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":["scroller",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":41,"character":32},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":45,"character":36}]}],"media":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"sanitizer":[{"__symbolic":"method"}],"setTransform":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"changeItem":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}]}},"ImageSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ImageSliderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":48,"character":12}],"exports":[{"__symbolic":"reference","name":"ImageSliderComponent"}]}]}],"members":{}}},"origins":{"ImageSliderComponent":"./lib/image-slider.component","ImageSliderModule":"./lib/image-slider.module"},"importAs":"@logo-software/image-slider"}