import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
var ProductsNavV2Component = /** @class */ (function () {
    function ProductsNavV2Component() {
        this.itemSelected = new EventEmitter();
        this.selected_id = '';
        this.pageMarker = 0;
    }
    ProductsNavV2Component.prototype.onItemSelected = function (id) {
        this.selected_id = id;
        this.itemSelected.emit(id);
    };
    ProductsNavV2Component.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";
        }
    };
    ProductsNavV2Component.prototype.pageNext = function (slides) {
        this.pageMarker++;
        this.moveSlides(slides);
    };
    ProductsNavV2Component.prototype.pagePrev = function (slides) {
        this.pageMarker--;
        this.moveSlides(slides);
    };
    __decorate([
        Input(),
        __metadata("design:type", Array)
    ], ProductsNavV2Component.prototype, "items", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ProductsNavV2Component.prototype, "hideItemsNav", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], ProductsNavV2Component.prototype, "itemSelected", void 0);
    ProductsNavV2Component = __decorate([
        Component({
            selector: 'va-products-nav-v2',
            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 lineItem of items;\" (click)=\"onItemSelected(lineItem?.item?.id)\">\n        <a [ngClass]=\"{'active': lineItem?.item?.id === selected_id}\">\n          <span class=\"icon-area\">\n            <va-icon [iconUrl]=\"lineItem?.item?.icon\" [name]=\"lineItem?.item?.name\" [diameter]=\"80\"></va-icon>\n            <va-icon *ngIf=\"lineItem?.parent?.id\" class=\"addon-indicator\" [iconUrl]=\"lineItem?.parent?.icon\" [name]=\"lineItem?.parent?.name\"\n                     [diameter]=\"24\"></va-icon>\n          </span>\n          <div class=\"name-container\">\n            <div>{{ lineItem?.item?.name }}</div>\n            <div *ngIf=\"lineItem?.item?.editionName\" class=\"edition-name\">{{ lineItem.item.editionName }}</div>\n          </div>\n          <div *ngIf=\"lineItem?.parent?.id\">\n            <span class=\"requires-text\">{{ 'FRONTEND.STORE.REQUIRES' | translate }} </span>\n            <span>{{lineItem?.parent.name}}</span>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </nav>\n</div>\n",
            styles: [".name-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.name-container va-badge{margin-top:12px;margin-left:6px}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}.edition-name{color:#9e9e9e;font-style:italic;text-align:center;width:100%;font-size:16px;margin-bottom:4px}"]
        })
    ], ProductsNavV2Component);
    return ProductsNavV2Component;
}());
export { ProductsNavV2Component };
//# sourceMappingURL=data:application/json;base64, 