| 1 | [{"__symbolic":"module","version":4,"metadata":{"VaPackageDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"va-package-dropdown","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":24,"character":8},"arguments":["listAnimationStart",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":25,"character":12},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":25,"character":26},"arguments":[{"height":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":26,"character":12},"arguments":["*",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":26,"character":23},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":27,"character":12},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":28,"character":16},"arguments":["0.25s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":30,"character":12},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":31,"character":16},"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>{{package.formattedPrices}}</p> <span *ngIf=\"!package.activationStatus\" class=\"package-dropdown-layout\"> <p class=\"package-dropdown-font package-notice\"> <span *ngIf=\"(package.products?.length > 0) || (package.totalAddons > 0)\">Contains </span> <span *ngIf=\"package.products?.length > 0\"> {{package.products.length}} {{package.products.length === 1 ? \"Product\" : \"Products\"}} </span> <span *ngIf=\"(package.products?.length > 0) && (package.totalAddons > 0)\"> & </span> <span *ngIf=\"package.totalAddons > 0\"> {{package.totalAddons}} {{package.totalAddons === 1 ? \"Addon\" : \"Addons\"}} </span> <span *ngIf=\"(package.products?.length === 0) && (package.totalAddons === 0)\"> No Items in Package </span> </p> <button *ngIf=\"package.products?.length > 0 || package.addonsWithNoParent?.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 || package.addonsWithNoParent?.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-or-addon-list package-dropdown-font\" *ngIf=\"dropdownToggles[packageIndex]\" [@listAnimationStart]> <div *ngFor=\"let product of package.products\"> <mat-list-item class=\"product-or-addon-item\"> <va-icon mat-list-avatar [name]=\"product.name\" [iconUrl]=\"product.icon\" [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> <mat-list-item *ngFor=\"let addon of product.addons\" class=\"product-or-addon-item addon-with-product\"> <va-icon mat-list-avatar [name]=\"addon.name\" [iconUrl]=\"addon.icon\" [diameter]=\"40\"></va-icon> <h3 mat-line>{{addon.name}}</h3> <p class=\"package-dropdown-font\" mat-line>{{addon.tagline}}</p> <div *ngIf=\"addon.activationStatus\" class=\"package-dropdown-status\"> <div [ngClass]=\"{ 'activated': isActivatedStatus(addon.activationStatus.status), 'warning': isWarningStatus(addon.activationStatus.status), 'error': isErrorStatus(addon.activationStatus.status)}\"> <mat-icon>{{addon.activationStatus.icon}}</mat-icon> </div> <p [ngClass]=\"{ 'activated': isActivatedStatus(addon.activationStatus.status), 'warning': isWarningStatus(addon.activationStatus.status), 'error': isErrorStatus(addon.activationStatus.status)}\"> {{addon.activationStatus.text}} </p> </div> </mat-list-item> </div> <mat-list-item *ngFor=\"let addon of package.addonsWithNoParent\" class=\"product-or-addon-item\"> <div class=\"icon-area\"> <va-icon mat-list-avatar [iconUrl]=\"addon.icon\" [name]=\"addon.name\" [diameter]=\"40\"></va-icon> <va-icon mat-list-avatar class=\"addon-indicator\" [iconUrl]=\"addon.parentIcon\" [diameter]=\"20\" [name]=\"addon.parentName\"></va-icon> </div> <h3 mat-line >{{addon.name}} <span class=\"required-product\">(Requires {{addon.parentName || ''}})</span></h3> <p class=\"package-dropdown-font\" mat-line> <span>{{addon.tagline}}</span> </p> <div *ngIf=\"addon.activationStatus\" class=\"package-dropdown-status\"> <div [ngClass]=\"{ 'activated': isActivatedStatus(addon.activationStatus.status), 'warning': isWarningStatus(addon.activationStatus.status), 'error': isErrorStatus(addon.activationStatus.status)}\"> <mat-icon>{{addon.activationStatus.icon}}</mat-icon> </div> <p [ngClass]=\"{ 'activated': isActivatedStatus(addon.activationStatus.status), 'warning': isWarningStatus(addon.activationStatus.status), 'error': isErrorStatus(addon.activationStatus.status)}\"> {{addon.activationStatus.text}} </p> </div> </mat-list-item> </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-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; } .icon-area { position: relative; display: inline-block; order: -1; margin-right: 16px; } .icon-area .addon-indicator { position: absolute; border-radius: 50%; bottom: -24px; right: -24px; } .product-or-addon-list { background-color: rgba(0, 0, 0, 0.04); overflow: hidden; } .product-or-addon-list .product-or-addon-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-left: 30px; } .product-or-addon-list .product-or-addon-item .required-product { font-size: 11px; font-weight: bold; font-style: italic; } .addon-with-product .mat-list-avatar { margin-left: 40px; } "]}]}],"members":{"packages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"products":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"statuses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"addons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"singularDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"toggleProducts":[{"__symbolic":"method"}],"isActivatedStatus":[{"__symbolic":"method"}],"isWarningStatus":[{"__symbolic":"method"}],"isErrorStatus":[{"__symbolic":"method"}]}}}}] |