@vendasta/store/products-nav/products-nav.component.js

import { Component, Input, Output, EventEmitter } from '@angular/core';
var VaProductsNavComponent = (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);
    };
    VaProductsNavComponent.decorators = [
        { type: Component, args: [{
                    selector: 'va-products-nav',
                    template: "<p *ngIf=\"items?.length > 1\" class=\"item-amount\">Contains {{items.length}} items</p> <div class=\"wrapper\"> <nav *ngIf=\"items && !hideItemsNav\" (swipeleft)=\"pageNext(slides)\" (swiperight)=\"pagePrev(slides)\"> <div [ngClass]=\"{'hide-arrows': items && items.length < 5}\"> <span class=\"prev\" (click)=\"pagePrev(slides)\"><md-icon>keyboard_arrow_left</md-icon></span> <span class=\"next\" (click)=\"pageNext(slides)\"><md-icon>keyboard_arrow_right</md-icon></span> </div> <ul class=\"slides\" #slides> <li *ngFor=\"let item of items; index as i;\" (click)=\"onItemSelected(i)\"> <a [ngClass]=\"{'active': i === selectedIndex}\"> <span class=\"icon-area\"> <va-icon [iconUrl]=\"item.icon || item.iconUrl\" [name]=\"item.name\" [diameter]=\"80\"></va-icon> <va-icon *ngIf=\"item.addonId\" class=\"addon-indicator\" [iconUrl]=\"item.productIcon\" [name]=\"item.productName\" [diameter]=\"24\"></va-icon> </span> <p>{{ item.name }}</p> <div *ngIf=\"item.addonId\"> <span class=\"requires-text\">Requires</span> <span>{{item.productName}}</span> </div> </a> </li> </ul> </nav> </div> ",
                    styles: ["nav { position: relative; width: 350px; margin: 0 auto; background: #ffffff; 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: 0.3s left ease; 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: 0.3s background; align-items: center; border-right: 1px solid #e0e0e0; cursor: pointer; } nav a:hover { background-color: rgba(255, 255, 255, 0.6); } nav a.active { background-color: #ffffff; } nav a.active:after { content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #ffffff; } nav p { margin-bottom: 0; } nav .icon img { width: 80px; min-width: 80px; height: 80px; } nav .prev, nav .next { position: absolute; height: 100%; width: 50px; top: 0; background: rgba(33, 33, 33, 0.1); cursor: pointer; text-align: center; opacity: 1; transition: 0.3s opacity ease; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } nav .prev:not(.disabled):hover, nav .next:not(.disabled):hover { background: rgba(33, 33, 33, 0.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; } } @media screen and (min-width: 600px) { 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 #ffffff; border-radius: 50%; bottom: -2px; right: -2px; } "]
                },] },
    ];
    /** @nocollapse */
    VaProductsNavComponent.ctorParameters = function () { return []; };
    VaProductsNavComponent.propDecorators = {
        'items': [{ type: Input },],
        'hideItemsNav': [{ type: Input },],
        'itemSelected': [{ type: Output },],
    };
    return VaProductsNavComponent;
}());
export { VaProductsNavComponent };