@vendasta/store
Version:
Components and data for Store
109 lines • 10.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter } from '@angular/core';
var VaProductsNavComponent = /** @class */ (function () {
function VaProductsNavComponent() {
this.itemSelected = new EventEmitter();
this.selectedIndex = 0;
this.pageMarker = 0;
}
/**
* @param {?} index
* @return {?}
*/
VaProductsNavComponent.prototype.onItemSelected = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.selectedIndex = index;
this.itemSelected.emit(index);
};
/**
* @param {?} slides
* @return {?}
*/
VaProductsNavComponent.prototype.moveSlides = /**
* @param {?} slides
* @return {?}
*/
function (slides) {
/** @type {?} */
var sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
/** @type {?} */
var numSlides = Math.ceil(slides.children.length / sliderWidth);
if (numSlides === 0) {
return;
}
/** @type {?} */
var pageWidth = slides.offsetWidth;
/** @type {?} */
var 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 {?}
*/
VaProductsNavComponent.prototype.pageNext = /**
* @param {?} slides
* @return {?}
*/
function (slides) {
this.pageMarker++;
this.moveSlides(slides);
};
/**
* @param {?} slides
* @return {?}
*/
VaProductsNavComponent.prototype.pagePrev = /**
* @param {?} slides
* @return {?}
*/
function (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 }]
};
return VaProductsNavComponent;
}());
export { VaProductsNavComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdHMtbmF2LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B2ZW5kYXN0YS9zdG9yZS8iLCJzb3VyY2VzIjpbImxpYi9wcm9kdWN0cy1uYXYvcHJvZHVjdHMtbmF2LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUlyRTtJQUFBO1FBU1ksaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVDLGtCQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQ2xCLGVBQVUsR0FBRyxDQUFDLENBQUM7SUFzQ2pCLENBQUM7Ozs7O0lBcENDLCtDQUFjOzs7O0lBQWQsVUFBZSxLQUFVO1FBQ3ZCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Ozs7O0lBRUQsMkNBQVU7Ozs7SUFBVixVQUFXLE1BQXVCOztZQUMxQixXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDOztZQUM3RSxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sR0FBRyxXQUFXLENBQUM7UUFDakUsSUFBSSxTQUFTLEtBQUssQ0FBQyxFQUFFO1lBQ25CLE9BQU87U0FDUjs7WUFDSyxTQUFTLEdBQUcsTUFBTSxDQUFDLFdBQVc7O1lBQ2hDLElBQUksR0FBRyxDQUFDO1FBRVosSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQzFCLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxHQUFHLENBQUMsQ0FBQyxDQUFDLFlBQVk7WUFDN0MsSUFBSSxHQUFHLFNBQVMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO1lBQ25DLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLE1BQUksSUFBSSxPQUFJLENBQUM7U0FDbEM7YUFBTSxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksU0FBUyxFQUFFO1lBQ3ZDLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztZQUMxQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQyxDQUFDLFFBQVE7U0FDOUI7YUFBTTtZQUNMLElBQUksR0FBRyxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUNuQyxNQUFNLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxNQUFJLElBQUksT0FBSSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzs7Ozs7SUFFRCx5Q0FBUTs7OztJQUFSLFVBQVMsTUFBdUI7UUFDOUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7Ozs7SUFFRCx5Q0FBUTs7OztJQUFSLFVBQVMsTUFBdUI7UUFDOUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7Z0JBakRGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixveUNBQTRDOztpQkFFN0M7Ozt3QkFHRSxLQUFLOytCQUNMLEtBQUs7K0JBQ0wsTUFBTTs7SUF5Q1QsNkJBQUM7Q0FBQSxBQWxERCxJQWtEQztTQTVDWSxzQkFBc0I7OztJQUNqQyx1Q0FBcUM7O0lBQ3JDLDhDQUErQjs7SUFDL0IsOENBQTRDOztJQUU1QywrQ0FBa0I7O0lBQ2xCLDRDQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlcn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0FkZG9ufSBmcm9tICdAdmVuZGFzdGEvY29yZS9zaGFyZWQnO1xuaW1wb3J0IHtQcm9kdWN0fSBmcm9tICcuLi9zaGFyZWQvcHJvZHVjdCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhLXByb2R1Y3RzLW5hdicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0cy1uYXYuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wcm9kdWN0cy1uYXYuY29tcG9uZW50LnNjc3MnXVxufSlcblxuZXhwb3J0IGNsYXNzIFZhUHJvZHVjdHNOYXZDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtczogKEFkZG9uIHwgUHJvZHVjdCkgW107XG4gIEBJbnB1dCgpIGhpZGVJdGVtc05hdjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGl0ZW1TZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBzZWxlY3RlZEluZGV4ID0gMDtcbiAgcGFnZU1hcmtlciA9IDA7XG5cbiAgb25JdGVtU2VsZWN0ZWQoaW5kZXg6IGFueSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRJbmRleCA9IGluZGV4O1xuICAgIHRoaXMuaXRlbVNlbGVjdGVkLmVtaXQoaW5kZXgpO1xuICB9XG5cbiAgbW92ZVNsaWRlcyhzbGlkZXM6IEhUTUxCb2R5RWxlbWVudCk6IHZvaWQge1xuICAgIGNvbnN0IHNsaWRlcldpZHRoID0gTWF0aC5yb3VuZChzbGlkZXMub2Zmc2V0V2lkdGggLyBzbGlkZXMuY2hpbGRyZW5bMF0uY2xpZW50V2lkdGgpO1xuICAgIGNvbnN0IG51bVNsaWRlcyA9IE1hdGguY2VpbChzbGlkZXMuY2hpbGRyZW4ubGVuZ3RoIC8gc2xpZGVyV2lkdGgpO1xuICAgIGlmIChudW1TbGlkZXMgPT09IDApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgcGFnZVdpZHRoID0gc2xpZGVzLm9mZnNldFdpZHRoO1xuICAgIGxldCBtb3ZlID0gMDtcblxuICAgIGlmICh0aGlzLnBhZ2VNYXJrZXIgPT09IC0xKSB7XG4gICAgICB0aGlzLnBhZ2VNYXJrZXIgPSBudW1TbGlkZXMgLSAxOyAvLyBnbyB0byBlbmRcbiAgICAgIG1vdmUgPSBwYWdlV2lkdGggKiB0aGlzLnBhZ2VNYXJrZXI7XG4gICAgICBzbGlkZXMuc3R5bGUubGVmdCA9IGAtJHttb3ZlfXB4YDtcbiAgICB9IGVsc2UgaWYgKHRoaXMucGFnZU1hcmtlciA+PSBudW1TbGlkZXMpIHtcbiAgICAgIHNsaWRlcy5zdHlsZS5sZWZ0ID0gJzBweCc7XG4gICAgICB0aGlzLnBhZ2VNYXJrZXIgPSAwOyAvLyByZXNldFxuICAgIH0gZWxzZSB7XG4gICAgICBtb3ZlID0gcGFnZVdpZHRoICogdGhpcy5wYWdlTWFya2VyO1xuICAgICAgc2xpZGVzLnN0eWxlLmxlZnQgPSBgLSR7bW92ZX1weGA7XG4gICAgfVxuICB9XG5cbiAgcGFnZU5leHQoc2xpZGVzOiBIVE1MQm9keUVsZW1lbnQpOiB2b2lkIHtcbiAgICB0aGlzLnBhZ2VNYXJrZXIrKztcbiAgICB0aGlzLm1vdmVTbGlkZXMoc2xpZGVzKTtcbiAgfVxuXG4gIHBhZ2VQcmV2KHNsaWRlczogSFRNTEJvZHlFbGVtZW50KTogdm9pZCB7XG4gICAgdGhpcy5wYWdlTWFya2VyLS07XG4gICAgdGhpcy5tb3ZlU2xpZGVzKHNsaWRlcyk7XG4gIH1cbn1cbiJdfQ==