@vendasta/store
Version:
Components and data for Store
112 lines (108 loc) • 12.9 kB
JavaScript
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/card";
export class DetailsStencilComponent {
}
DetailsStencilComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DetailsStencilComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DetailsStencilComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: DetailsStencilComponent, selector: "app-store-details-stencil", ngImport: i0, template: `
<div class="details">
<mat-card class="details-header">
<div class="details-column-0">
<div class="details-column-0-1">
<div class="details-icon stencil-shimmer"></div>
</div>
<div class="details-column-0-2">
<div class="details-title stencil-shimmer"></div>
<div class="details-title stencil-shimmer"></div>
</div>
</div>
<div class="details-column-1">
<div class="details-column-1-0 stencil-shimmer"></div>
<div class="details-column-1-1 stencil-shimmer"></div>
</div>
</mat-card>
<mat-card>
<div class="details-box-large stencil-shimmer"></div>
</mat-card>
<mat-card class="details-body">
<div class="details-body-column-0">
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
</div>
<div class="details-body-column-1">
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
</div>
<div class="details-body-column-2">
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
</div>
</mat-card>
</div>
`, isInline: true, styles: [".details{position:relative;margin:0 auto 20px;background:#ffffff;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.details-header{display:flex;height:180px}.details-column-0{display:flex;width:66%}@media screen and (max-width: 600px){.details-column-0{width:100%}}.details-column-0-1{display:flex;width:25%;min-width:120px}@media screen and (max-width: 600px){.details-column-0-1{width:50%}}.details-icon{height:120px;width:120px;border-radius:50%}.details-title{margin:20px 0 20px 20px;height:32px;width:250px}@media screen and (max-width: 600px){.details-title{width:120px}}.details-column-1{width:34%;display:flex;flex-direction:column}@media screen and (max-width: 1100px){.details-column-1{width:0}}.details-column-1-0{height:32px;margin:10px 0}@media screen and (max-width: 600px){.details-column-1-0{width:0;margin:0}}.details-column-1-1{height:70px}@media screen and (max-width: 600px){.details-column-1-1{height:0}}.details-box-large{display:flex;width:650px;height:150px}@media screen and (max-width: 1100px){.details-box-large{width:100%}}.details-body{display:flex;height:500px;width:100%}.details-body-column-0{width:10%;display:flex;flex-direction:column}@media screen and (max-width: 600px){.details-body-column-0{width:0%}}.details-body-column-1{width:56%;display:flex;flex-direction:column}@media screen and (max-width: 600px){.details-body-column-1{width:100%}}.details-icon-small{margin-bottom:24px;display:flex;height:32px;width:32px;border-radius:50%}.details-line{margin-bottom:24px;height:32px;width:400px}@media screen and (max-width: 600px){.details-line{width:100%;margin-right:10px}}.details-body-column-2{width:34%;display:flex;flex-direction:column}@media screen and (max-width: 1100px){.details-body-column-2{width:0}}.details-box{height:70px;margin-bottom:10px}@media screen and (max-width: 600px){.details-box{width:0;margin:0}}\n"], components: [{ type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DetailsStencilComponent, decorators: [{
type: Component,
args: [{ selector: 'app-store-details-stencil', template: `
<div class="details">
<mat-card class="details-header">
<div class="details-column-0">
<div class="details-column-0-1">
<div class="details-icon stencil-shimmer"></div>
</div>
<div class="details-column-0-2">
<div class="details-title stencil-shimmer"></div>
<div class="details-title stencil-shimmer"></div>
</div>
</div>
<div class="details-column-1">
<div class="details-column-1-0 stencil-shimmer"></div>
<div class="details-column-1-1 stencil-shimmer"></div>
</div>
</mat-card>
<mat-card>
<div class="details-box-large stencil-shimmer"></div>
</mat-card>
<mat-card class="details-body">
<div class="details-body-column-0">
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
<div class="details-icon-small stencil-shimmer"></div>
</div>
<div class="details-body-column-1">
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
<div class="details-line stencil-shimmer"></div>
</div>
<div class="details-body-column-2">
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
<div class="details-box stencil-shimmer"></div>
</div>
</mat-card>
</div>
`, styles: [".details{position:relative;margin:0 auto 20px;background:#ffffff;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}.details-header{display:flex;height:180px}.details-column-0{display:flex;width:66%}@media screen and (max-width: 600px){.details-column-0{width:100%}}.details-column-0-1{display:flex;width:25%;min-width:120px}@media screen and (max-width: 600px){.details-column-0-1{width:50%}}.details-icon{height:120px;width:120px;border-radius:50%}.details-title{margin:20px 0 20px 20px;height:32px;width:250px}@media screen and (max-width: 600px){.details-title{width:120px}}.details-column-1{width:34%;display:flex;flex-direction:column}@media screen and (max-width: 1100px){.details-column-1{width:0}}.details-column-1-0{height:32px;margin:10px 0}@media screen and (max-width: 600px){.details-column-1-0{width:0;margin:0}}.details-column-1-1{height:70px}@media screen and (max-width: 600px){.details-column-1-1{height:0}}.details-box-large{display:flex;width:650px;height:150px}@media screen and (max-width: 1100px){.details-box-large{width:100%}}.details-body{display:flex;height:500px;width:100%}.details-body-column-0{width:10%;display:flex;flex-direction:column}@media screen and (max-width: 600px){.details-body-column-0{width:0%}}.details-body-column-1{width:56%;display:flex;flex-direction:column}@media screen and (max-width: 600px){.details-body-column-1{width:100%}}.details-icon-small{margin-bottom:24px;display:flex;height:32px;width:32px;border-radius:50%}.details-line{margin-bottom:24px;height:32px;width:400px}@media screen and (max-width: 600px){.details-line{width:100%;margin-right:10px}}.details-body-column-2{width:34%;display:flex;flex-direction:column}@media screen and (max-width: 1100px){.details-body-column-2{width:0}}.details-box{height:70px;margin-bottom:10px}@media screen and (max-width: 600px){.details-box{width:0;margin:0}}\n"] }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlscy1zdGVuY2lsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3RvcmUvc3JjL2xpYi9zdGVuY2lscy9kZXRhaWxzLXN0ZW5jaWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQXlEMUMsTUFBTSxPQUFPLHVCQUF1Qjs7b0hBQXZCLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLGlFQXJEeEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0RUOzJGQUdVLHVCQUF1QjtrQkF2RG5DLFNBQVM7K0JBQ0UsMkJBQTJCLFlBQzNCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtEVCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc3RvcmUtZGV0YWlscy1zdGVuY2lsJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwiZGV0YWlsc1wiPlxuICAgICAgPG1hdC1jYXJkIGNsYXNzPVwiZGV0YWlscy1oZWFkZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtY29sdW1uLTBcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1jb2x1bW4tMC0xXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1pY29uIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWNvbHVtbi0wLTJcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLXRpdGxlIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtdGl0bGUgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1jb2x1bW4tMVwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWNvbHVtbi0xLTAgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtY29sdW1uLTEtMSBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L21hdC1jYXJkPlxuXG4gICAgICA8bWF0LWNhcmQ+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWJveC1sYXJnZSBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgIDwvbWF0LWNhcmQ+XG5cbiAgICAgIDxtYXQtY2FyZCBjbGFzcz1cImRldGFpbHMtYm9keVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1ib2R5LWNvbHVtbi0wXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtaWNvbi1zbWFsbCBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1pY29uLXNtYWxsIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWljb24tc21hbGwgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtaWNvbi1zbWFsbCBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1pY29uLXNtYWxsIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWljb24tc21hbGwgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtaWNvbi1zbWFsbCBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWJvZHktY29sdW1uLTFcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1saW5lIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWxpbmUgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtbGluZSBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1saW5lIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWxpbmUgc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtbGluZSBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1saW5lIHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtYm9keS1jb2x1bW4tMlwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWJveCBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1ib3ggc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRldGFpbHMtYm94IHN0ZW5jaWwtc2hpbW1lclwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxzLWJveCBzdGVuY2lsLXNoaW1tZXJcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlscy1ib3ggc3RlbmNpbC1zaGltbWVyXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9tYXQtY2FyZD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVVcmxzOiBbJy4vZGV0YWlscy1zdGVuY2lsLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERldGFpbHNTdGVuY2lsQ29tcG9uZW50IHt9XG4iXX0=