1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
|
2 | var VaProductsNavComponent = (function () {
|
3 | function VaProductsNavComponent() {
|
4 | this.itemSelected = new EventEmitter();
|
5 | this.selectedIndex = 0;
|
6 | this.pageMarker = 0;
|
7 | }
|
8 | VaProductsNavComponent.prototype.onItemSelected = function (index) {
|
9 | this.selectedIndex = index;
|
10 | this.itemSelected.emit(index);
|
11 | };
|
12 | VaProductsNavComponent.prototype.moveSlides = function (slides) {
|
13 | var sliderWidth = Math.round(slides.offsetWidth / slides.children[0].clientWidth);
|
14 | var numSlides = Math.ceil(slides.children.length / sliderWidth);
|
15 | if (numSlides === 0) {
|
16 | return;
|
17 | }
|
18 | var pageWidth = slides.offsetWidth;
|
19 | var move = 0;
|
20 | if (this.pageMarker === -1) {
|
21 | this.pageMarker = numSlides - 1;
|
22 | move = pageWidth * this.pageMarker;
|
23 | slides.style.left = "-" + move + "px";
|
24 | }
|
25 | else if (this.pageMarker >= numSlides) {
|
26 | slides.style.left = '0px';
|
27 | this.pageMarker = 0;
|
28 | }
|
29 | else {
|
30 | move = pageWidth * this.pageMarker;
|
31 | slides.style.left = "-" + move + "px";
|
32 | }
|
33 | };
|
34 | VaProductsNavComponent.prototype.pageNext = function (slides) {
|
35 | this.pageMarker++;
|
36 | this.moveSlides(slides);
|
37 | };
|
38 | VaProductsNavComponent.prototype.pagePrev = function (slides) {
|
39 | this.pageMarker--;
|
40 | this.moveSlides(slides);
|
41 | };
|
42 | VaProductsNavComponent.decorators = [
|
43 | { type: Component, args: [{
|
44 | selector: 'va-products-nav',
|
45 | 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)\"><mat-icon>keyboard_arrow_left</mat-icon></span> <span class=\"next\" (click)=\"pageNext(slides)\"><mat-icon>keyboard_arrow_right</mat-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 || item.title\" [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 || item.title }}</p> <div *ngIf=\"item.addonId\"> <span class=\"requires-text\">Requires</span> <span>{{item.productName}}</span> </div> </a> </li> </ul> </nav> </div> ",
|
46 | 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; } "]
|
47 | },] },
|
48 | ];
|
49 |
|
50 | VaProductsNavComponent.ctorParameters = function () { return []; };
|
51 | VaProductsNavComponent.propDecorators = {
|
52 | "items": [{ type: Input },],
|
53 | "hideItemsNav": [{ type: Input },],
|
54 | "itemSelected": [{ type: Output },],
|
55 | };
|
56 | return VaProductsNavComponent;
|
57 | }());
|
58 | export { VaProductsNavComponent };
|