@vendasta/store/products-nav/products-nav.component.metadata.json

[{"__symbolic":"module","version":3,"metadata":{"VaProductsNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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; } "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hideItemsNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onItemSelected":[{"__symbolic":"method"}],"moveSlides":[{"__symbolic":"method"}],"pageNext":[{"__symbolic":"method"}],"pagePrev":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"VaProductsNavComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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; } "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hideItemsNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onItemSelected":[{"__symbolic":"method"}],"moveSlides":[{"__symbolic":"method"}],"pageNext":[{"__symbolic":"method"}],"pagePrev":[{"__symbolic":"method"}]}}}}]