import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
var VaProductsNavComponent = /** @class */ (function () {
    function VaProductsNavComponent() {
        this.itemSelected = new EventEmitter();
        this.selectedIndex = 0;
        this.pageMarker = 0;
    }
    VaProductsNavComponent.prototype.onItemSelected = function (index) {
        this.selectedIndex = index;
        this.itemSelected.emit(index);
    };
    VaProductsNavComponent.prototype.moveSlides = function (slides) {
        var sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
        var numSlides = Math.ceil(slides.children.length / sliderWidth);
        if (numSlides === 0) {
            return;
        }
        var pageWidth = slides.offsetWidth;
        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";
        }
    };
    VaProductsNavComponent.prototype.pageNext = function (slides) {
        this.pageMarker++;
        this.moveSlides(slides);
    };
    VaProductsNavComponent.prototype.pagePrev = function (slides) {
        this.pageMarker--;
        this.moveSlides(slides);
    };
    __decorate([
        Input(),
        __metadata("design:type", Array)
    ], VaProductsNavComponent.prototype, "items", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], VaProductsNavComponent.prototype, "hideItemsNav", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], VaProductsNavComponent.prototype, "itemSelected", void 0);
    VaProductsNavComponent = __decorate([
        Component({
            selector: 'va-products-nav',
            template: "<p *ngIf=\"items?.length > 1\" class=\"item-amount\">{{ 'FRONTEND.STORE.CONTAINS_NUM_ITEMS' | translate: {itemCount: items.length}  }}</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\">{{ 'FRONTEND.STORE.REQUIRES' | translate }}</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);
    return VaProductsNavComponent;
}());
export { VaProductsNavComponent };
//# sourceMappingURL=data:application/json;base64, 