@vendasta/store
Version:
Components and data for Store
1 lines • 16.2 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"VaPackageDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-package-dropdown","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["listAnimationStart",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["*",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.25s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.25s ease"]}]]}]]}],"template":"<mat-card class=\"package-list-container\" *ngIf=\"salesPackages$ | async as salesPackages else loading\"> <mat-list> <div class=\"package-list\" *ngFor=\"let package of salesPackages; let packageIndex = index\"> <mat-list-item class=\"package-list-item\"> <va-icon mat-list-avatar [name]=\"package.name\" [iconUrl]=\"package.icon\" [diameter]=\"40\"> </va-icon> <h3 mat-line>{{package.name}}</h3> <p class=\"package-dropdown-font\" mat-line> <span>{{package.formattedPrices}}</span> </p> <span *ngIf=\"!package.activationStatus\" class=\"package-dropdown-layout\"> <p class=\"package-dropdown-font package-notice\">Contains {{package.products.length}} {{package.products.length === 1 ? \"Product\" : \"Products\"}}</p> <button *ngIf=\"package.products?.length > 0\" mat-icon-button type=\"button\" (click)=\"toggleProducts(packageIndex)\"> <mat-icon mat-list-icon class=\"dropdown-icon\" [ngClass]=\"{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}\"> keyboard_arrow_down </mat-icon> </button> </span> <span *ngIf=\"package.activationStatus\" class=\"package-dropdown-layout package-dropdown-status\"> <div [ngClass]=\"{ 'activated': isActivatedStatus(package.activationStatus.status), 'warning': isWarningStatus(package.activationStatus.status), 'error': isErrorStatus(package.activationStatus.status)}\"> <mat-icon>{{package.activationStatus.icon}}</mat-icon> </div> <p class=\"package-notice\" [ngClass]=\"{ 'activated': isActivatedStatus(package.activationStatus.status), 'warning': isWarningStatus(package.activationStatus.status), 'error': isErrorStatus(package.activationStatus.status)}\"> {{package.activationStatus.text}} </p> <button *ngIf=\"package.products?.length > 0\" mat-icon-button type=\"button\" (click)=\"toggleProducts(packageIndex)\"> <mat-icon mat-list-icon class=\"dropdown-icon\" [ngClass]=\"{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}\"> keyboard_arrow_down </mat-icon> </button> </span> </mat-list-item> <mat-list class=\"product-list package-dropdown-font\" *ngIf=\"dropdownToggles[packageIndex] === true\" [@listAnimationStart]> <div class=\"left-indent\" *ngFor=\"let product of package.products; let productIndex = index\"> <div *ngIf=\"product && (productIndex > 0)\"> </div> <mat-list-item> <va-icon mat-list-avatar [name]=\"product.name\" [iconUrl]=\"product.iconUrl\" [diameter]=\"40\"> </va-icon> <h3 mat-line>{{product.name}}</h3> <p class=\"package-dropdown-font\" mat-line> <span>{{product.tagline}}</span> </p> <div *ngIf=\"product.activationStatus\" class=\"package-dropdown-status\" > <div [ngClass]=\"{ 'activated': isActivatedStatus(product.activationStatus.status), 'warning': isWarningStatus(product.activationStatus.status), 'error': isErrorStatus(product.activationStatus.status)}\"> <mat-icon>{{product.activationStatus.icon}}</mat-icon> </div> <p [ngClass]=\"{ 'activated': isActivatedStatus(product.activationStatus.status), 'warning': isWarningStatus(product.activationStatus.status), 'error': isErrorStatus(product.activationStatus.status)}\"> {{product.activationStatus.text}} </p> </div> </mat-list-item> </div> </mat-list> </div> </mat-list> </mat-card> <ng-template #loading> <mat-card> <div class=\"package-dropdown-stencil-display\"> <va-icon [iconUrl]=\"\"></va-icon> <div class=\"stencil-text\"> <h1 class=\"stencil-title stencil-shimmer\"></h1> <span class=\"stencil-tagline stencil-shimmer\"></span> </div> </div> </mat-card> </ng-template> ","styles":[".package-dropdown-font { color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: 400; } .package-list-container { border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 0; } .package-list-container mat-list { padding: 0; } .package-list-container mat-list .package-list .package-list-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .package-list-container mat-list .package-list .product-list { background-color: rgba(0, 0, 0, 0.04); overflow: hidden; } .package-list-container mat-list .package-list .product-list .left-indent { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-left: 30px; } .package-dropdown-layout { display: flex; flex-direction: row; align-items: center; } .package-dropdown-layout .package-notice { width: max-content; font-style: italic; } @media screen and (max-width: 500px) { .package-dropdown-layout p { display: none; } } .package-dropdown-layout mat-icon { padding: 0; } .package-dropdown-layout button { padding: 0; min-width: 0; } .package-dropdown-layout button .dropdown-icon { color: rgba(0, 0, 0, 0.54); } .package-dropdown-layout button .dropdown-icon-rotate-down { transform: rotate(180deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-layout button .dropdown-icon-rotate-up { transform: rotate(0deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-stencil-display { display: flex; width: 100%; flex-grow: 1; } .package-dropdown-stencil-display va-icon { margin-right: 20px; } .package-dropdown-stencil-display .stencil-text { width: inherit; display: flex; flex-direction: column; justify-content: center; } .package-dropdown-stencil-display .stencil-text .stencil-title { height: 32px; width: 40%; margin-bottom: 5px !important; margin-top: 0 !important; } .package-dropdown-stencil-display .stencil-text .stencil-tagline { height: 32px; width: inherit; } .package-dropdown-status { display: flex; flex-direction: row; align-items: center; } .package-dropdown-status p { padding-left: 6px; font-size: 14px; white-space: nowrap; } .package-dropdown-status .activated { color: #4caf50; } .package-dropdown-status .warning { color: #ffa000; } .package-dropdown-status .error { color: #c62828; } "]}]}],"members":{"packages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"products":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"statuses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singularDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"toggleProducts":[{"__symbolic":"method"}],"isActivatedStatus":[{"__symbolic":"method"}],"isWarningStatus":[{"__symbolic":"method"}],"isErrorStatus":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"VaPackageDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-package-dropdown","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["listAnimationStart",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["*",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.25s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.25s ease"]}]]}]]}],"template":"<mat-card class=\"package-list-container\" *ngIf=\"salesPackages$ | async as salesPackages else loading\"> <mat-list> <div class=\"package-list\" *ngFor=\"let package of salesPackages; let packageIndex = index\"> <mat-list-item class=\"package-list-item\"> <va-icon mat-list-avatar [name]=\"package.name\" [iconUrl]=\"package.icon\" [diameter]=\"40\"> </va-icon> <h3 mat-line>{{package.name}}</h3> <p class=\"package-dropdown-font\" mat-line> <span>{{package.formattedPrices}}</span> </p> <span *ngIf=\"!package.activationStatus\" class=\"package-dropdown-layout\"> <p class=\"package-dropdown-font package-notice\">Contains {{package.products.length}} {{package.products.length === 1 ? \"Product\" : \"Products\"}}</p> <button *ngIf=\"package.products?.length > 0\" mat-icon-button type=\"button\" (click)=\"toggleProducts(packageIndex)\"> <mat-icon mat-list-icon class=\"dropdown-icon\" [ngClass]=\"{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}\"> keyboard_arrow_down </mat-icon> </button> </span> <span *ngIf=\"package.activationStatus\" class=\"package-dropdown-layout package-dropdown-status\"> <div [ngClass]=\"{ 'activated': isActivatedStatus(package.activationStatus.status), 'warning': isWarningStatus(package.activationStatus.status), 'error': isErrorStatus(package.activationStatus.status)}\"> <mat-icon>{{package.activationStatus.icon}}</mat-icon> </div> <p class=\"package-notice\" [ngClass]=\"{ 'activated': isActivatedStatus(package.activationStatus.status), 'warning': isWarningStatus(package.activationStatus.status), 'error': isErrorStatus(package.activationStatus.status)}\"> {{package.activationStatus.text}} </p> <button *ngIf=\"package.products?.length > 0\" mat-icon-button type=\"button\" (click)=\"toggleProducts(packageIndex)\"> <mat-icon mat-list-icon class=\"dropdown-icon\" [ngClass]=\"{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}\"> keyboard_arrow_down </mat-icon> </button> </span> </mat-list-item> <mat-list class=\"product-list package-dropdown-font\" *ngIf=\"dropdownToggles[packageIndex] === true\" [@listAnimationStart]> <div class=\"left-indent\" *ngFor=\"let product of package.products; let productIndex = index\"> <div *ngIf=\"product && (productIndex > 0)\"> </div> <mat-list-item> <va-icon mat-list-avatar [name]=\"product.name\" [iconUrl]=\"product.iconUrl\" [diameter]=\"40\"> </va-icon> <h3 mat-line>{{product.name}}</h3> <p class=\"package-dropdown-font\" mat-line> <span>{{product.tagline}}</span> </p> <div *ngIf=\"product.activationStatus\" class=\"package-dropdown-status\" > <div [ngClass]=\"{ 'activated': isActivatedStatus(product.activationStatus.status), 'warning': isWarningStatus(product.activationStatus.status), 'error': isErrorStatus(product.activationStatus.status)}\"> <mat-icon>{{product.activationStatus.icon}}</mat-icon> </div> <p [ngClass]=\"{ 'activated': isActivatedStatus(product.activationStatus.status), 'warning': isWarningStatus(product.activationStatus.status), 'error': isErrorStatus(product.activationStatus.status)}\"> {{product.activationStatus.text}} </p> </div> </mat-list-item> </div> </mat-list> </div> </mat-list> </mat-card> <ng-template #loading> <mat-card> <div class=\"package-dropdown-stencil-display\"> <va-icon [iconUrl]=\"\"></va-icon> <div class=\"stencil-text\"> <h1 class=\"stencil-title stencil-shimmer\"></h1> <span class=\"stencil-tagline stencil-shimmer\"></span> </div> </div> </mat-card> </ng-template> ","styles":[".package-dropdown-font { color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: 400; } .package-list-container { border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 0; } .package-list-container mat-list { padding: 0; } .package-list-container mat-list .package-list .package-list-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .package-list-container mat-list .package-list .product-list { background-color: rgba(0, 0, 0, 0.04); overflow: hidden; } .package-list-container mat-list .package-list .product-list .left-indent { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-left: 30px; } .package-dropdown-layout { display: flex; flex-direction: row; align-items: center; } .package-dropdown-layout .package-notice { width: max-content; font-style: italic; } @media screen and (max-width: 500px) { .package-dropdown-layout p { display: none; } } .package-dropdown-layout mat-icon { padding: 0; } .package-dropdown-layout button { padding: 0; min-width: 0; } .package-dropdown-layout button .dropdown-icon { color: rgba(0, 0, 0, 0.54); } .package-dropdown-layout button .dropdown-icon-rotate-down { transform: rotate(180deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-layout button .dropdown-icon-rotate-up { transform: rotate(0deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-stencil-display { display: flex; width: 100%; flex-grow: 1; } .package-dropdown-stencil-display va-icon { margin-right: 20px; } .package-dropdown-stencil-display .stencil-text { width: inherit; display: flex; flex-direction: column; justify-content: center; } .package-dropdown-stencil-display .stencil-text .stencil-title { height: 32px; width: 40%; margin-bottom: 5px !important; margin-top: 0 !important; } .package-dropdown-stencil-display .stencil-text .stencil-tagline { height: 32px; width: inherit; } .package-dropdown-status { display: flex; flex-direction: row; align-items: center; } .package-dropdown-status p { padding-left: 6px; font-size: 14px; white-space: nowrap; } .package-dropdown-status .activated { color: #4caf50; } .package-dropdown-status .warning { color: #ffa000; } .package-dropdown-status .error { color: #c62828; } "]}]}],"members":{"packages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"products":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"statuses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singularDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"toggleProducts":[{"__symbolic":"method"}],"isActivatedStatus":[{"__symbolic":"method"}],"isWarningStatus":[{"__symbolic":"method"}],"isErrorStatus":[{"__symbolic":"method"}]}}}}]