@vendasta/store
Version:
Components and data for Store
91 lines • 9.95 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter } from '@angular/core';
export class VaProductsNavComponent {
constructor() {
this.itemSelected = new EventEmitter();
this.selectedIndex = 0;
this.pageMarker = 0;
}
/**
* @param {?} index
* @return {?}
*/
onItemSelected(index) {
this.selectedIndex = index;
this.itemSelected.emit(index);
}
/**
* @param {?} slides
* @return {?}
*/
moveSlides(slides) {
/** @type {?} */
const sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
/** @type {?} */
const numSlides = Math.ceil(slides.children.length / sliderWidth);
if (numSlides === 0) {
return;
}
/** @type {?} */
const pageWidth = slides.offsetWidth;
/** @type {?} */
let move = 0;
if (this.pageMarker === -1) {
this.pageMarker = numSlides - 1; // go to end
move = pageWidth * this.pageMarker;
slides.style.left = `-${move}px`;
}
else if (this.pageMarker >= numSlides) {
slides.style.left = '0px';
this.pageMarker = 0; // reset
}
else {
move = pageWidth * this.pageMarker;
slides.style.left = `-${move}px`;
}
}
/**
* @param {?} slides
* @return {?}
*/
pageNext(slides) {
this.pageMarker++;
this.moveSlides(slides);
}
/**
* @param {?} slides
* @return {?}
*/
pagePrev(slides) {
this.pageMarker--;
this.moveSlides(slides);
}
}
VaProductsNavComponent.decorators = [
{ type: Component, args: [{
selector: 'va-products-nav',
template: "<p *ngIf=\"items?.length > 1\" class=\"item-amount\">Contains {{items.length}} items</p>\n<div class=\"wrapper\">\n <nav *ngIf=\"items && !hideItemsNav\" (swipeleft)=\"pageNext(slides)\" (swiperight)=\"pagePrev(slides)\">\n <div [ngClass]=\"{'hide-arrows': items && items.length < 5}\">\n <span class=\"prev\" (click)=\"pagePrev(slides)\"><mat-icon>keyboard_arrow_left</mat-icon></span>\n <span class=\"next\" (click)=\"pageNext(slides)\"><mat-icon>keyboard_arrow_right</mat-icon></span>\n </div>\n <ul class=\"slides\" #slides>\n <li *ngFor=\"let item of items; index as i;\" (click)=\"onItemSelected(i)\">\n <a [ngClass]=\"{'active': i === selectedIndex}\">\n <span class=\"icon-area\">\n <va-icon [iconUrl]=\"item.icon || item.iconUrl\" [name]=\"item.name || item.title\" [diameter]=\"80\"></va-icon>\n <va-icon *ngIf=\"item.addonId\" class=\"addon-indicator\" [iconUrl]=\"item.productIcon\" [name]=\"item.productName\" [diameter]=\"24\"></va-icon>\n </span>\n <p>{{ item.name || item.title }}</p>\n <div *ngIf=\"item.addonId\">\n <span class=\"requires-text\">Requires </span>\n <span>{{item.productName}}</span>\n </div>\n </a>\n </li>\n </ul>\n </nav>\n</div>\n",
styles: ["nav{position:relative;width:350px;margin:0 auto;background:#fff;border:1px solid #e0e0e0;border-width:1px 0;overflow:hidden}nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0 50px;padding:0;position:relative;left:0;transition:left .3s;word-break:break-word}nav li{min-width:100%;flex:1 0 25%;text-align:center;font-size:14px}nav li:first-child a{border-right:1px solid #e0e0e0}nav a{position:relative;display:block;height:100%;padding:20px;text-decoration:none;color:#212121;transition:background .3s;align-items:center;border-right:1px solid #e0e0e0;cursor:pointer}nav a:hover{background-color:rgba(255,255,255,.6)}nav a.active{background-color:#fff}nav a.active:after{content:'';display:block;position:absolute;bottom:-1px;left:0;width:100%;height:1px;background-color:#fff}nav p{margin-bottom:0}nav .icon img{width:80px;min-width:80px;height:80px}nav .next,nav .prev{position:absolute;height:100%;width:50px;top:0;background:rgba(33,33,33,.1);cursor:pointer;text-align:center;opacity:1;transition:opacity .3s;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1}nav .next:not(.disabled):hover,nav .prev:not(.disabled):hover{background:rgba(33,33,33,.3)}nav .prev{left:0}nav .next{right:0}nav .disabled{cursor:default;opacity:0}@media screen and (min-width:600px){nav{width:auto;overflow:initial}nav li{min-width:0;width:25%;flex-grow:0}nav .hide-arrows{display:none}nav .hide-arrows+.slides{margin:0}}va-icon{display:inline-block}.item-amount{color:#9e9e9e;font-size:14px;text-align:right;margin:0 24px 8px}.wrapper{overflow:hidden}.requires-text{color:#9e9e9e}.icon-area{position:relative;display:inline-block}.addon-indicator{position:absolute;border:2px solid #fff;border-radius:50%;bottom:-2px;right:-2px}"]
}] }
];
VaProductsNavComponent.propDecorators = {
items: [{ type: Input }],
hideItemsNav: [{ type: Input }],
itemSelected: [{ type: Output }]
};
if (false) {
/** @type {?} */
VaProductsNavComponent.prototype.items;
/** @type {?} */
VaProductsNavComponent.prototype.hideItemsNav;
/** @type {?} */
VaProductsNavComponent.prototype.itemSelected;
/** @type {?} */
VaProductsNavComponent.prototype.selectedIndex;
/** @type {?} */
VaProductsNavComponent.prototype.pageMarker;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdHMtbmF2LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B2ZW5kYXN0YS9zdG9yZS8iLCJzb3VyY2VzIjpbImxpYi9wcm9kdWN0cy1uYXYvcHJvZHVjdHMtbmF2LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBQyxNQUFNLGVBQWUsQ0FBQztBQVVyRSxNQUFNLE9BQU8sc0JBQXNCO0lBTm5DO1FBU1ksaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVDLGtCQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQ2xCLGVBQVUsR0FBRyxDQUFDLENBQUM7SUFzQ2pCLENBQUM7Ozs7O0lBcENDLGNBQWMsQ0FBQyxLQUFVO1FBQ3ZCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Ozs7O0lBRUQsVUFBVSxDQUFDLE1BQXVCOztjQUMxQixXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDOztjQUM3RSxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sR0FBRyxXQUFXLENBQUM7UUFDakUsSUFBSSxTQUFTLEtBQUssQ0FBQyxFQUFFO1lBQ25CLE9BQU87U0FDUjs7Y0FDSyxTQUFTLEdBQUcsTUFBTSxDQUFDLFdBQVc7O1lBQ2hDLElBQUksR0FBRyxDQUFDO1FBRVosSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQzFCLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxHQUFHLENBQUMsQ0FBQyxDQUFDLFlBQVk7WUFDN0MsSUFBSSxHQUFHLFNBQVMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO1lBQ25DLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLElBQUksSUFBSSxJQUFJLENBQUM7U0FDbEM7YUFBTSxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksU0FBUyxFQUFFO1lBQ3ZDLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztZQUMxQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQyxDQUFDLFFBQVE7U0FDOUI7YUFBTTtZQUNMLElBQUksR0FBRyxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUNuQyxNQUFNLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxJQUFJLElBQUksSUFBSSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxRQUFRLENBQUMsTUFBdUI7UUFDOUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7Ozs7SUFFRCxRQUFRLENBQUMsTUFBdUI7UUFDOUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7O1lBakRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixveUNBQTRDOzthQUU3Qzs7O29CQUdFLEtBQUs7MkJBQ0wsS0FBSzsyQkFDTCxNQUFNOzs7O0lBRlAsdUNBQXFDOztJQUNyQyw4Q0FBK0I7O0lBQy9CLDhDQUE0Qzs7SUFFNUMsK0NBQWtCOztJQUNsQiw0Q0FBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXJ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtBZGRvbn0gZnJvbSAnQHZlbmRhc3RhL2NvcmUvc2hhcmVkJztcbmltcG9ydCB7UHJvZHVjdH0gZnJvbSAnLi4vc2hhcmVkL3Byb2R1Y3QnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YS1wcm9kdWN0cy1uYXYnLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdHMtbmF2LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZHVjdHMtbmF2LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5cbmV4cG9ydCBjbGFzcyBWYVByb2R1Y3RzTmF2Q29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbXM6IChBZGRvbiB8IFByb2R1Y3QpIFtdO1xuICBASW5wdXQoKSBoaWRlSXRlbXNOYXY6IGJvb2xlYW47XG4gIEBPdXRwdXQoKSBpdGVtU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgc2VsZWN0ZWRJbmRleCA9IDA7XG4gIHBhZ2VNYXJrZXIgPSAwO1xuXG4gIG9uSXRlbVNlbGVjdGVkKGluZGV4OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBpbmRleDtcbiAgICB0aGlzLml0ZW1TZWxlY3RlZC5lbWl0KGluZGV4KTtcbiAgfVxuXG4gIG1vdmVTbGlkZXMoc2xpZGVzOiBIVE1MQm9keUVsZW1lbnQpOiB2b2lkIHtcbiAgICBjb25zdCBzbGlkZXJXaWR0aCA9IE1hdGgucm91bmQoc2xpZGVzLm9mZnNldFdpZHRoIC8gc2xpZGVzLmNoaWxkcmVuWzBdLmNsaWVudFdpZHRoKTtcbiAgICBjb25zdCBudW1TbGlkZXMgPSBNYXRoLmNlaWwoc2xpZGVzLmNoaWxkcmVuLmxlbmd0aCAvIHNsaWRlcldpZHRoKTtcbiAgICBpZiAobnVtU2xpZGVzID09PSAwKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGNvbnN0IHBhZ2VXaWR0aCA9IHNsaWRlcy5vZmZzZXRXaWR0aDtcbiAgICBsZXQgbW92ZSA9IDA7XG5cbiAgICBpZiAodGhpcy5wYWdlTWFya2VyID09PSAtMSkge1xuICAgICAgdGhpcy5wYWdlTWFya2VyID0gbnVtU2xpZGVzIC0gMTsgLy8gZ28gdG8gZW5kXG4gICAgICBtb3ZlID0gcGFnZVdpZHRoICogdGhpcy5wYWdlTWFya2VyO1xuICAgICAgc2xpZGVzLnN0eWxlLmxlZnQgPSBgLSR7bW92ZX1weGA7XG4gICAgfSBlbHNlIGlmICh0aGlzLnBhZ2VNYXJrZXIgPj0gbnVtU2xpZGVzKSB7XG4gICAgICBzbGlkZXMuc3R5bGUubGVmdCA9ICcwcHgnO1xuICAgICAgdGhpcy5wYWdlTWFya2VyID0gMDsgLy8gcmVzZXRcbiAgICB9IGVsc2Uge1xuICAgICAgbW92ZSA9IHBhZ2VXaWR0aCAqIHRoaXMucGFnZU1hcmtlcjtcbiAgICAgIHNsaWRlcy5zdHlsZS5sZWZ0ID0gYC0ke21vdmV9cHhgO1xuICAgIH1cbiAgfVxuXG4gIHBhZ2VOZXh0KHNsaWRlczogSFRNTEJvZHlFbGVtZW50KTogdm9pZCB7XG4gICAgdGhpcy5wYWdlTWFya2VyKys7XG4gICAgdGhpcy5tb3ZlU2xpZGVzKHNsaWRlcyk7XG4gIH1cblxuICBwYWdlUHJldihzbGlkZXM6IEhUTUxCb2R5RWxlbWVudCk6IHZvaWQge1xuICAgIHRoaXMucGFnZU1hcmtlci0tO1xuICAgIHRoaXMubW92ZVNsaWRlcyhzbGlkZXMpO1xuICB9XG59XG4iXX0=