@vendasta/store
Version:
Components and data for Store
1 lines • 113 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@vendasta/core/shared"),require("@angular/common"),require("@vendasta/core/image-transformation"),require("@angular/material"),require("@vendasta/uikit"),require("@angular/forms"),require("@vendasta/core/billing"),require("@vendasta/forms"),require("@angular/material/progress-spinner"),require("util"),require("rxjs"),require("rxjs/operators"),require("@angular/animations")):"function"==typeof define&&define.amd?define("@vendasta/store",["exports","@angular/core","@vendasta/core/shared","@angular/common","@vendasta/core/image-transformation","@angular/material","@vendasta/uikit","@angular/forms","@vendasta/core/billing","@vendasta/forms","@angular/material/progress-spinner","util","rxjs","rxjs/operators","@angular/animations"],t):t((e.vendasta=e.vendasta||{},e.vendasta.store={}),e.ng.core,e.shared,e.ng.common,e.imageTransformation,e.ng.material,e.vendasta.uikit,e.ng.forms,e.billing,e.vendasta.forms,e.ng.material["progress-spinner"],e.util,e.rxjs,e.rxjs.operators,e.ng.animations)}(this,function(e,i,r,t,n,o,a,s,d,c,l,p,u,g,m){"use strict";var f=function(){function e(){this.pricing=null,this.wrapFrequency=!1,this.isAddon=!1,this.hasVerifiedContract=!1,this.highlightPrice=!0,this.loaded=!0}return Object.defineProperty(e.prototype,"isFree",{get:function(){var e=function(e){return!!e&&e.some(function(e){return 0===e.price||e.price===undefined})};return this.hasVerifiedContract&&this.billedProduct?1===this.billedProduct.pricingTiers.length&&e(this.billedProduct.pricingTiers):!(!this.pricing||!e(this.pricing.prices))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"shouldContactSales",{get:function(){var e=function(e){return!(e&&0<e.length)||e.some(function(e){return null===e.price||e.price<0})};return this.hasVerifiedContract&&this.billedProduct?!!e(this.billedProduct.pricingTiers):!this.pricing||e(this.pricing.prices)},enumerable:!0,configurable:!0}),e.prototype.isFlatPrice=function(e){return 1===e.pricingTiers.length},e.prototype.buildPricingTierString=function(e){var t=String(e.rangeMax);return-1===e.rangeMax&&(t="∞",0===e.rangeMin||1===e.rangeMin)?"":String(e.rangeMin)+" to "+t},e.prototype.buildPricingTierForProduct=function(e,t){var n=this.buildPricingTierString(e),i=r.formatBillingFrequency(t);return n?n+" accounts "+i:i},e.prototype.buildPricingTierForAddon=function(e){var t=this.buildPricingTierString(e);return t||""},e.prototype.buildPriceStringForPricing=function(e,t,n){return r.formatDisplayPrice(e.price,t,n?"":e.frequency,!0,!0,!0,e.isStartingPrice)},e.prototype.buildPriceStringForTier=function(e,t,n){return r.formatDisplayPrice(e.price,this.billedProduct.currency,t,undefined,undefined,undefined,n)},e.prototype.buildFrequencyString=function(e){return r.formatBillingFrequency(e)},e.prototype.buildCommitmentMessage=function(){var e=this.billedProduct?this.billedProduct.billingFrequency.toString().toLowerCase():this.pricing&&0<this.pricing.prices.length?this.pricing.prices[0].frequency.toLowerCase():"",t="";if("yearly"===e?t="year":"monthly"===e&&(t="month"),!t||this.isFree||this.shouldContactSales)return"";if(this.billedProduct&&this.billedProduct.commitment){var n=this.billedProduct.commitment.initial,i=this.billedProduct.commitment.recurring;return this.highlightPrice?"*"+n+" "+t+" minimum, renews for "+i+" "+t+" periods":n+" "+t+" commitment"}return""},e.decorators=[{type:i.Component,args:[{selector:"va-pricing",template:'<ng-container *ngIf="highlightPrice">\n <highlight-pricing [pricing]="pricing"\n [billedProduct]="billedProduct"\n [highlightPrice]="highlightPrice"\n [isAddon]="isAddon"\n [hasVerifiedContract]="hasVerifiedContract"\n [wrapFrequency]="wrapFrequency"\n [loaded]="loaded">\n </highlight-pricing>\n</ng-container>\n<ng-container *ngIf="!highlightPrice">\n <table-pricing [pricing]="pricing"\n [highlightPrice]="highlightPrice"\n [billedProduct]="billedProduct"\n [hasVerifiedContract]="hasVerifiedContract"\n [loaded]="loaded">\n </table-pricing>\n</ng-container>\n',styles:[""]}]}],e.propDecorators={pricing:[{type:i.Input}],billedProduct:[{type:i.Input}],wrapFrequency:[{type:i.Input}],isAddon:[{type:i.Input}],hasVerifiedContract:[{type:i.Input}],highlightPrice:[{type:i.Input}],loaded:[{type:i.Input}]},e}(),h=function(e,t){return(h=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function v(e,t){function n(){this.constructor=e}h(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function x(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,o,r=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(i=r.next()).done;)a.push(i.value)}catch(s){o={error:s}}finally{try{i&&!i.done&&(n=r["return"])&&n.call(r)}finally{if(o)throw o.error}}return a}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(x(arguments[t]));return e}var y=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return v(t,e),t.decorators=[{type:i.Component,args:[{selector:"highlight-pricing",template:'<ng-container *ngIf="loaded; else loading">\n <div class="no-price" *ngIf="shouldContactSales; else dontContactSales">\n Contact Sales\n </div>\n <ng-template #dontContactSales>\n <div class="no-price" *ngIf="isFree; else notFree">\n <b>Free</b>\n </div>\n <ng-template #notFree>\n <ng-container *ngIf="!isAddon">\n <ng-container *ngIf="hasVerifiedContract && billedProduct; else usePricing">\n <div *ngFor="let tier of billedProduct.pricingTiers" class="price-box">\n <span>\n <span *ngIf="tier.isStartingPrice" class="starting-at">Starting at</span>\n <b class="price-number">{{buildPriceStringForTier(tier)}}</b>\n </span>\n <span class="tier-billing-freq" [ngClass]="{\'va-wrap\': wrapFrequency}">\n {{buildPricingTierForProduct(tier, billedProduct.billingFrequency)}}\n </span>\n </div>\n </ng-container>\n <ng-template #usePricing>\n <ng-container *ngIf="pricing?.prices">\n <div *ngFor="let price of pricing.prices; let i = index" class="price-box">\n <span>\n <span *ngIf="price?.isStartingPrice" class="starting-at">Starting at</span>\n <b class="price-number">\n <ng-container *ngIf="i == 1">+</ng-container>\n {{buildPriceStringForPricing(price, pricing?.currency, true)}}\n </b>\n </span>\n <span *ngIf="price.frequency as frequency" class="billing-freq" [ngClass]="{\'va-wrap\': wrapFrequency}">\n {{buildFrequencyString(frequency)}}\n </span>\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf="isAddon">\n <div *ngIf="hasVerifiedContract && billedProduct; else useAddonPricing">\n <div *ngFor="let tier of billedProduct.pricingTiers" class="price-box">\n <span class="addon-billing-freq">\n {{buildPricingTierForAddon(tier)}}\n </span>\n <span>\n <span *ngIf="tier.isStartingPrice" class="starting-at">Starting at</span>\n <b class="price-number">\n {{buildPriceStringForTier(tier, billedProduct.billingFrequency)}}\n </b>\n </span>\n\n </div>\n </div>\n <ng-template #useAddonPricing>\n <div class="price-box">\n <span *ngIf="pricing?.prices[0].frequency" class="addon-billing-freq">\n {{buildFrequencyString(pricing.prices[0].frequency)}}\n </span>\n <span>\n <span *ngIf="pricing?.prices[0]?.isStartingPrice" class="starting-at">Starting at</span>\n <b class="price-number">\n {{buildPriceStringForPricing(pricing?.prices[0], pricing?.currency, true)}}\n </b>\n </span>\n </div>\n </ng-template>\n </ng-container>\n <div class="commitment" *ngIf="billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1">\n {{ buildCommitmentMessage() }}\n </div>\n </ng-template>\n </ng-template>\n</ng-container>\n<ng-template #loading>\n <div class="stencil-pricing stencil-shimmer"></div>\n</ng-template>\n',styles:[":host{color:#9e9e9e}.starting-at{margin-right:5px}.price-box{display:flex;align-items:baseline;flex-direction:row-reverse}.no-price{text-align:center}b{color:#212121;font-size:20px}@media screen and (max-width:600px){.no-price,.price-box,b{font-size:16px}}.billing-freq{text-transform:capitalize;flex:1}.tier-billing-freq{flex:1}.addon-billing-freq{padding-left:5px}.va-wrap{display:block}.stencil-pricing{height:1em}.commitment{color:#9e9e9e;font-size:12px;font-style:italic}"]}]}],t}(f),w=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return v(t,e),t.decorators=[{type:i.Component,args:[{selector:"table-pricing",template:'<ng-container *ngIf="loaded; else loading">\n <div *ngIf="hasVerifiedContract && billedProduct; else usePricing">\n <div class="price-container" *ngIf="isFlatPrice(billedProduct); else notFlatPrice">\n <div class="price">\n {{buildPriceStringForTier(billedProduct.pricingTiers[0], billedProduct.billingFrequency, billedProduct.pricingTiers[0].isStartingPrice)}}\n </div>\n </div>\n <ng-template #notFlatPrice>\n <div class="price-container--tiered" *ngIf="!isFlatPrice(billedProduct)">\n <div class="pricing-tier" *ngFor="let tier of billedProduct.pricingTiers">\n <div class="pricing-tier__range">{{buildPricingTierString(tier)}}</div>\n <div class="pricing-tier__price">\n {{buildPriceStringForTier(tier, billedProduct.billingFrequency, tier.isStartingPrice)}}\n </div>\n </div>\n </div>\n </ng-template>\n <div class="commitment" *ngIf="billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1">\n {{ buildCommitmentMessage() }}\n </div>\n </div>\n <ng-template #usePricing>\n <div class="gray-font">\n <ng-container *ngIf="shouldContactSales; else dontContactSales">\n Contact Sales\n </ng-container>\n <ng-template #dontContactSales>\n <ng-container *ngIf="isFree; else notFree">\n Free\n </ng-container>\n <ng-template #notFree>\n {{buildPriceStringForPricing(pricing?.prices[0], pricing?.currency)}}\n <div class="commitment" *ngIf="billedProduct && billedProduct.commitment && billedProduct.commitment.initial > 1">\n {{ buildCommitmentMessage() }}\n </div>\n </ng-template>\n </ng-template>\n </div>\n </ng-template>\n</ng-container>\n<ng-template #loading>\n <div class="stencil-pricing stencil-shimmer"></div>\n</ng-template>\n',styles:[":host{color:#616161}.price-container--tiered{font-size:12px;flex-direction:column;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.price-container--tiered .pricing-tier{border-bottom:1px solid #e0e0e0;padding:5px 0;display:flex}.price-container--tiered .pricing-tier:first-child{padding-top:0}.price-container--tiered .pricing-tier:last-child{padding-bottom:0;border-bottom:none}.price-container--tiered .pricing-tier .pricing-tier__range{padding-right:20px;flex:1}.stencil-pricing{height:1em}.commitment{color:#9e9e9e;font-size:12px;font-style:italic}"]}]}],t}(f),I=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule],declarations:[f,y,w],exports:[f]}]}],e}(),P=function(){function e(e){this.imageTransformationService=e,this.purchasedClicked=new i.EventEmitter,this.cardClicked=new i.EventEmitter,this.descriptionClicked=new i.EventEmitter,this.bannerClicked=new i.EventEmitter}return e.prototype.getBannerColorForName=function(){var e=["#EF5350","#42A5F5","#66BB6A","#FFA726","#AB47BC","#FFCA28","#EC407A","#26C6DA","#FF7B57"],t=0;if(!this.item.name)return"#808080";for(var n=0;n<this.item.name.length;n++)t+=this.item.name[n].charCodeAt(0);return e[t%e.length]},e.prototype.getSrcsetHeaderUrls=function(e){return this.imageTransformationService.getSrcSetForImage(e,[680,1360,2720])},e.decorators=[{type:i.Component,args:[{selector:"va-store-card",template:'\n<mat-card class="hover-card" *ngIf="item" (click)="cardClicked.emit(item)">\n<div class="hover-area">\n <div class="product-banner" (click)="bannerClicked.emit(item)"\n [style.background-color]="item.headerImageUrl ? \'\': getBannerColorForName()">\n <img class="img-container" *ngIf="item.headerImageUrl"\n [src]="item.headerImageUrl" [srcset]="getSrcsetHeaderUrls(item.headerImageUrl)">\n </div>\n\n <div class="description" (click)="descriptionClicked.emit(item)">\n <mat-card-header>\n <va-icon mat-card-avatar [diameter]="40" [name]="item.name" [iconUrl]="item.iconUrl"></va-icon>\n <mat-card-title>{{item.name}}</mat-card-title>\n <mat-card-subtitle>\n <ng-container *ngIf="item.pricing; else formatted">\n <va-pricing [pricing]="item.pricing"\n [highlightPrice]="false"></va-pricing>\n </ng-container>\n <ng-template #formatted>{{item.formattedPrice}}</ng-template>\n </mat-card-subtitle>\n </mat-card-header>\n <mat-card-content> {{ item.tagline }}\n </mat-card-content>\n </div>\n\n <button *ngIf="item.purchased !== undefined"\n mat-button color="primary" class="enabled-indicator" (click)="purchasedClicked.emit(item)" [disabled]="item.purchased">\n <i *ngIf="!item.purchased" class="material-icons">add</i>\n <i *ngIf="item.purchased" class="material-icons" style="color: #39B74A">check</i>\n <span>{{(item.purchased) ? \'ENABLED\' : \'ENABLE\'}}</span>\n </button>\n </div>\n</mat-card>\n ',styles:[":host{position:relative}::ng-deep .mat-card-header-text{width:100%}mat-card.hover-card{overflow:hidden;padding:0;margin-bottom:0}mat-card.hover-card mat-card-subtitle,mat-card.hover-card mat-card-title{margin:0 80px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}mat-card.hover-card mat-card-subtitle{font-size:12px;margin-top:4px}.hover-area{position:relative;cursor:pointer}.product-banner{max-height:133px;overflow:hidden;display:flex;width:100%;height:100px;align-items:center;justify-content:center}.product-banner img{max-width:100%}@media screen and (min-width:480px){.hover-area{padding-top:55%}.hover-area:hover .description{top:0}.hover-area:hover .enabled-indicator span{width:70px}.product-banner{max-height:none;position:absolute;height:60%;top:0}}.description{box-sizing:border-box;padding:10px 16px 0;overflow:hidden;background:#fff;color:#212121;transition:.3s}.description:after{content:'';display:block;width:100%;height:40%;position:absolute;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,0) 40%,#fff 70%)}mat-card-header{box-sizing:border-box;padding-bottom:16px;margin:0;height:40%;display:flex;align-items:center}mat-card-content{min-height:40px;max-height:80px;padding:16px;margin:0 -16px;border-top:1px solid #e0e0e0;font-size:12px}.enabled-indicator{position:absolute;right:8px;bottom:8px}.enabled-indicator span{display:inline-block;width:70px;overflow:hidden;transition:.3s}@media screen and (min-width:480px){.description{position:absolute;top:60%;width:100%;height:100%}.description:after{height:70%}mat-card-content{min-height:0;max-height:none}.enabled-indicator span{width:0}}button[mat-button]{padding:0 8px;min-width:0}mat-card-actions{position:relative;padding:8px!important;margin:0!important;text-align:right;border-top:1px solid #e0e0e0;background-color:#fff;color:#212121}.status{font-size:14px}.img-container{height:100%;width:100%}"]}]}],e.ctorParameters=function(){return[{type:n.ImageTransformationService}]},e.propDecorators={item:[{type:i.Input}],purchasedClicked:[{type:i.Output}],cardClicked:[{type:i.Output}],descriptionClicked:[{type:i.Output}],bannerClicked:[{type:i.Output}]},e}(),k=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,a.VaIconModule,o.MatCardModule,o.MatButtonModule,o.MatIconModule,o.MatMenuModule,n.ImageTransformationModule,I],declarations:[P],exports:[P]}]}],e}(),C=function(){function e(){this.items=[],this.searchable=!0,this.itemClicked=new i.EventEmitter}return Object.defineProperty(e.prototype,"filteredItems",{get:function(){var t=this;return this.filterTerm?this.items.filter(function(e){return-1!==e.name.toLowerCase().indexOf(t.filterTerm.toLowerCase())}):this.items},enumerable:!0,configurable:!0}),e.decorators=[{type:i.Component,args:[{selector:"va-store",template:'\n <div class="toolbar">\n <div *ngIf="searchable" class="table-controls-row">\n <va-search-box (update)="filterTerm = $event"></va-search-box>\n </div>\n </div>\n <div class="row row-gutters">\n <div *ngFor="let item of filteredItems" class="col-flex">\n <va-store-card [item]="item" (cardClicked)="this.itemClicked.emit(item)"></va-store-card>\n </div>\n </div>\n ',styles:[".flex-row{display:flex;flex-direction:row}.toolbar{padding:0;background-color:#fff;color:#616161}.toolbar .disabled{cursor:default}.toolbar .disabled mat-icon{cursor:default;color:#9e9e9e}.toolbar va-search-box{margin-right:10px;width:350px}.toolbar .table-controls-row{padding:0 10px 10px;display:flex;flex-direction:row;align-items:center}.toolbar .table-controls-row:first-of-type{padding-top:10px}.top-border{border-top:1px solid #fff}.selected{background-color:#fff}.row{display:flex;flex-wrap:wrap}.row+.row-gutters{margin-top:0}.row-gutters{margin-top:-20px;margin-left:-20px}.row-gutters>.col-flex{padding-top:20px;padding-left:20px}.col-flex{position:relative;max-width:100%;box-sizing:border-box;flex:0 0 auto;width:100%}@media screen and (min-width:480px){.col-flex{width:50%}}@media screen and (min-width:1200px){.col-flex{width:33.333333%}}"]}]}],e.propDecorators={items:[{type:i.Input}],searchable:[{type:i.Input}],itemClicked:[{type:i.Output}]},e}(),S=function(){function e(){this.startOpen=!1,this.displayAutoTitle=!1,this.titleText="",this.displayAutoDescription=!0,this.descriptionText="",this.editingHint="",this.expandable=!0,this.autoDescriptionText="",this.iconName="help_outline",this.subscriptions=[],this.uniqueIndex=1,this.autoTitleText=""}return e.prototype.ngOnInit=function(){for(var o=this;this.parentForm.controls.hasOwnProperty(this.titleText+this.uniqueIndex);)this.uniqueIndex+=1;this.parentForm.addControl(this.titleText+this.uniqueIndex,this.toFormGroup(this.fields));var i=this.parentForm.controls[this.titleText+this.uniqueIndex];for(var e in i.controls)i.controls.hasOwnProperty(e)&&null!=this.prepopulatedData&&this.prepopulatedData.hasOwnProperty(e)&&i.controls[e].setValue(this.prepopulatedData[e]);this.subscriptions.push(i.statusChanges.subscribe(function(e){var t=!1;for(var n in i.controls)if(!i.controls[n].value||i.controls[n].value.constructor===Array&&!i.controls[n].value[0])if(o.iconName="help_outline",t=!0,"INVALID"===e){if(o.autoTitleText="* Please fill out all required fields",i.controls[n].dirty||i.controls[n].touched){o.iconName="warning";break}}else o.autoTitleText="Optional fields unanswered";t||(o.iconName="check_circle",o.autoTitleText="Complete")})),this.displayAutoDescription&&this.subscriptions.push(i.valueChanges.subscribe(function(e){var t="";for(var n in e)if(e.hasOwnProperty(n)&&null!==e[n]&&0<e[n].length)if(e[n][0].name)for(var i in e[n])null!=e[n][i]&&(t+=e[n][i].name,t+=", ");else t+=e[n],t+=", ";o.autoDescriptionText=t.substring(0,t.length-2)})),i.updateValueAndValidity({onlySelf:!1,emitEvent:!0})},e.prototype.toFormGroup=function(e){var n=this,i={};return e.forEach(function(t){var e;e="checkbox"===t.controlType?new s.FormControl(t.value):t.required?new s.FormControl(t.value,s.Validators.required):new s.FormControl(t.value),i[t.id]=e,n.subscriptions.push(e.valueChanges.subscribe(function(e){return t.value=e}))}),new s.FormGroup(i)},e.prototype.ngOnDestroy=function(){this.subscriptions.forEach(function(e){return e.unsubscribe()})},e.decorators=[{type:i.Component,args:[{selector:"va-dropdown-form-section",template:'\n <mat-card *ngIf="!expandable && !(expandable == undefined)" class="not-expandable-card">\n <mat-icon class="not-expandable-icon valid"> check_circle</mat-icon>\n <mat-card-header *ngIf="!displayAutoTitle" class="not-expandable-header">\n {{ titleText }}\n </mat-card-header>\n <mat-card-header *ngIf="displayAutoTitle" class="not-expandable-header valid">\n <div class="title"> {{ titleText }}</div>\n <div *ngIf="titleText && autoTitleText"> </div>\n <ng-container><i> Complete </i></ng-container>\n </mat-card-header>\n <mat-panel-description class="not-expandable-description">\n {{ descriptionText }}\n </mat-panel-description>\n </mat-card>\n <mat-expansion-panel *ngIf="expandable || expandable == undefined" [expanded]="startOpen">\n <mat-expansion-panel-header>\n <div class="dropdown-form-header">\n <mat-icon\n [ngClass]="{invalid: iconName==\'warning\', valid: iconName==\'check_circle\', question: iconName==\'help_outline\'}">\n {{ iconName }}\n </mat-icon>\n <mat-panel-title *ngIf="!displayAutoTitle">\n {{ titleText }}\n </mat-panel-title>\n <mat-panel-title *ngIf="displayAutoTitle"\n [ngClass]="{valid: iconName==\'check_circle\', invalid: iconName==\'warning\'}">\n <div class="title"> {{ titleText }}</div>\n <div *ngIf="titleText && autoTitleText"> </div>\n <ng-container><i> {{autoTitleText}} </i></ng-container>\n </mat-panel-title>\n <mat-panel-description *ngIf="displayAutoDescription" [ngClass]="{invalid: iconName==\'warning\'}">\n {{ autoDescriptionText }}\n </mat-panel-description>\n <mat-panel-description *ngIf="!displayAutoDescription" [ngClass]="{invalid: iconName==\'warning\'}">\n <i> {{descriptionText}} </i>\n </mat-panel-description>\n </div>\n </mat-expansion-panel-header>\n <div class="expansion-panel-body">\n <va-field *ngFor="let field of fields" [field]="field"\n [form]="parentForm.controls[titleText + uniqueIndex]"></va-field>\n <p *ngIf="editingHint != \'\'" class="editing-hint"><i>{{ editingHint }}</i></p>\n </div>\n </mat-expansion-panel>\n ',styles:[":host-context(va-dropdown-form-section){font-size:14px}:host-context(va-dropdown-form-section) .expansion-panel-body{margin-top:-10px;display:block;width:60%}.mat-expanded,.mat-expansion-panel{transition:margin .4s}.dropdown-form-header{width:100%;display:flex}mat-panel-description{align-self:center;flex:inherit;display:initial;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}mat-panel-description.invalid{color:#c62828}mat-icon{margin-right:7px;-ms-grid-row-align:center;align-self:center}mat-icon.valid{color:#4caf50}mat-icon.invalid{color:#c62828}mat-icon.question{color:#9e9e9e}mat-panel-title{-ms-grid-row-align:center;align-self:center;flex:none;margin-right:20px}mat-panel-title.valid{color:#4caf50}mat-panel-title.invalid{color:#c62828}.editing-hint{color:#9e9e9e}.title{color:#212121}.not-expandable-card{background:#fff;cursor:default;font-size:15px;display:flex;height:48px;align-items:center;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.not-expandable-card .not-expandable-icon{margin-left:24px}.not-expandable-card .not-expandable-header{display:flex}.not-expandable-card .not-expandable-description{margin-left:22px}.not-expandable-card .valid{color:#4caf50}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={prepopulatedData:[{type:i.Input}],startOpen:[{type:i.Input}],parentForm:[{type:i.Input}],displayAutoTitle:[{type:i.Input}],titleText:[{type:i.Input}],displayAutoDescription:[{type:i.Input}],descriptionText:[{type:i.Input}],fields:[{type:i.Input}],editingHint:[{type:i.Input}],expandable:[{type:i.Input}]},e}(),M=function(){function e(){}return Object.defineProperty(e.prototype,"isValid",{get:function(){return this.form.controls[this.field.id].valid||this.form.controls[this.field.id].pristine},enumerable:!0,configurable:!0}),e.decorators=[{type:i.Component,args:[{selector:"va-field",template:'<ng-container [ngSwitch]="field.controlType" [formGroup]="form">\n\n <ng-container *ngSwitchCase="\'dropdown\'">\n <mat-form-field class="form-field-container">\n <mat-select matInput [formControlName]="field.id" [id]="field.id" [placeholder]="field.getLabel()" [disabled]="field.disabled">\n <mat-option *ngFor="let option of field.options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</mat-option>\n </mat-select>\n <mat-hint *ngIf="field.description"> {{ field.description }} </mat-hint>\n </mat-form-field>\n </ng-container>\n\n <ng-container *ngSwitchCase="\'textbox\'">\n <mat-form-field class="form-field-container">\n <span matPrefix *ngIf="field.prefix"> {{ field.prefix}} </span>\n <input matInput [type]="field.textboxType" [id]="field.id" [formControlName]="field.id" [placeholder]="field.getLabel()" [pattern]="field.regexValidator || \'\'" [readonly]="field.disabled">\n <span matSuffix *ngIf="field.suffix"> {{ field.suffix }} </span>\n <mat-hint *ngIf="field.description"> {{ field.description }} </mat-hint>\n <mat-error *ngIf="form.controls[field.id].hasError(\'pattern\')"> {{field.regexErrorMessage}} </mat-error>\n </mat-form-field>\n </ng-container>\n\n <ng-container *ngSwitchCase="\'checkbox\'">\n <div class="form-field-container checkbox">\n <mat-checkbox [formControlName]="field.id" [id]="field.id" ngControlDefault [disabled]="field.disabled"></mat-checkbox>\n <div class="checkbox-placeholder"> {{field.label}}</div>\n </div>\n <div class="checkbox-description" *ngIf="field.description">{{ field.description }}</div>\n </ng-container>\n\n <ng-container *ngSwitchCase="\'textarea\'">\n <mat-form-field class="form-field-container">\n <textarea matInput [formControlName]="field.id" [placeholder]="field.getLabel()" [id]="field.id" [readonly]="field.disabled"></textarea>\n <mat-hint *ngIf="field.description"> {{ field.description }} </mat-hint>\n </mat-form-field>\n </ng-container>\n\n <ng-container *ngSwitchCase="\'file\'">\n <div class="form-field-container">\n <file-group-uploader [uploadUrl]="field.uploadUrl" [label]="field.getLabel()" [description]="field.description" [formGroup]="form" [formControlName]="field.id" [disabled]="field.disabled"\n [numFiles]="field.numFiles" class="form-field-container"></file-group-uploader>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase="\'vbcuser\'">\n <mat-form-field class="form-field-container">\n <mat-select matInput [formControlName]="field.id" [id]="field.id" [placeholder]="field.getLabel()" [disabled]="field.disabled">\n <mat-option *ngFor="let option of field.options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</mat-option>\n </mat-select>\n <mat-hint *ngIf="field.description"> {{ field.description }} </mat-hint>\n </mat-form-field>\n </ng-container>\n\n</ng-container>\n',styles:[".form-field-container{font-size:16px;width:100%;margin:10px 0}.checkbox{display:flex;padding:5px 0;color:rgba(0,0,0,.54);margin-top:24px}.checkbox .checkbox-placeholder{margin-left:10px}.checkbox-description{margin-top:-14px;margin-left:32px;color:rgba(0,0,0,.54);font-size:12px}"]}]}],e.propDecorators={field:[{type:i.Input}],form:[{type:i.Input}]},e}(),A=function(){function e(){}return e.prototype.createFormControl=function(e){return e.required?new s.FormControl(e.value,s.Validators.required):new s.FormControl(e.value)},e.prototype.toFormGroup=function(e,n){var i=this,o={};return e.forEach(function(t){var e;e="checkbox"===t.controlType?new s.FormControl(t.value):i.createFormControl(t),o[t.id]=e,n&&n.push(e.valueChanges.subscribe(function(e){return t.value=e}))}),new s.FormGroup(o)},e.decorators=[{type:i.Injectable}],e}(),F=function(){function e(){this.loaded=!0,this.showEnableAddon=!1,this.prerequisiteSelected=new i.EventEmitter,this.actionSelected=new i.EventEmitter,this.pricingActionSelected=new i.EventEmitter}return e.prototype.onActionSelected=function(){this.actionSelected.emit()},e.prototype.onPrerequisiteSelected=function(){this.prerequisiteSelected.emit()},e.prototype.showPricingModel=function(e){return e&&[d.BillingModel.Tiered,d.BillingModel.Stairstep].includes(e.billingModel)},e.prototype.getPricingModelTooltips=function(e){switch(e){case d.BillingModel.Stairstep:return"Price applies per unit within a range";case d.BillingModel.Tiered:return"Price applies to all units once range is met";default:return""}},e.decorators=[{type:i.Component,args:[{selector:"va-header-container",template:'<div class="header-container">\n <div class="product-overview">\n <div class="product-id">\n\n <va-icon [iconUrl]="iconUrl" [name]="title" [diameter]="120"></va-icon>\n\n <div class="product-id-text">\n\n <h1 [ngClass]="{\'stencil-title stencil-shimmer\': !title, \'product-title\': title}">\n {{ title }}\n </h1>\n\n <span [ngClass]="{\'stencil-tagline stencil-shimmer\': !title && !tagline, \'tagline\': tagline}">\n {{ tagline }}\n </span>\n\n <div *ngIf="prerequisite" class="prerequisite">\n <span class="requires-text">Requires </span>\n <span>{{ prerequisite }}</span>\n </div>\n\n <mat-chip-list>\n <mat-chip *ngFor="let chip of chipLabels">{{ chip }}</mat-chip>\n </mat-chip-list>\n\n </div>\n </div>\n\n <div class="pricing">\n\n <button *ngIf="showAction && !showEnableAddon" mat-raised-button class="app-enable-button" [disabled]="!actionEnabled" (click)="onActionSelected()">\n {{ actionLabel }}\n </button>\n\n <button *ngIf="showEnableAddon && !showAction" mat-raised-button class="app-enable-button" [disabled]="!showEnableAddon" (click)="onActionSelected()">\n {{ actionLabel }}\n </button>\n\n <div *ngIf="prerequisiteLabel && !showEnableAddon" class="addon-enable" (click)="onPrerequisiteSelected()">\n Enabled with {{prerequisiteLabel}}\n </div>\n\n <div *ngIf="showPricing" class="price-box">\n <div *ngIf="pricing?.prices?.length" class="wholesale-price">{{ pricingLabel }}\n <div *ngIf="showPricingModel(billedProduct) && hasVerifiedContract"\n class="pricing-model"\n matTooltip="{{getPricingModelTooltips(billedProduct.billingModel)}}">({{ billedProduct.billingModel }})\n </div>\n </div>\n <va-pricing [pricing]="pricing"\n [billedProduct]="billedProduct"\n [hasVerifiedContract]="hasVerifiedContract"\n [loaded]="loaded"></va-pricing>\n </div>\n\n <p *ngIf="pricingActionEnabled" class="pricing-action-container">\n <a (click)="pricingActionSelected.emit()">{{ pricingActionLabel }}</a>\n </p>\n\n </div>\n\n </div>\n</div>\n',styles:[":host{font-size:16px}.product-title{font-size:24px}.product-overview{display:flex;flex-wrap:wrap;border-bottom:1px solid #e0e0e0}.product-overview h1{margin:0;font-weight:400;line-height:1.2}.product-overview mat-chip{margin-bottom:3px}.product-id{display:flex;width:100%;padding:24px;flex-grow:1}.product-id va-icon{margin-right:20px}@media screen and (max-width:600px){.product-id va-icon ::ng-deep .va-icon-container{width:40px!important;height:40px!important}.product-id va-icon ::ng-deep .va-icon-container span{line-height:40px!important;font-size:15px!important}}.product-id .product-id-text{display:flex;flex-direction:column;justify-content:center}.product-id span{overflow:hidden}.product-id .tagline{color:#616161;margin:.5em 0 1em;font-size:16px}@media screen and (min-width:600px){.product-title{font-size:32px}.product-id .tagline{font-size:20px}.product-id{width:66%;padding-right:20px}}.product-id .prerequisite{margin:.5em 0 1em;font-size:14px}.product-id .requires-text{color:#9e9e9e}.inline-link{display:inline-flex!important;color:#1e88e5;cursor:pointer;padding-top:5px}.pricing{display:flex;flex-direction:column;width:100%;padding:0 24px 24px;color:#616161}@media screen and (min-width:600px){.pricing{width:34%;padding-top:24px;padding-left:20px}}.pricing span{display:block}.pricing span:nth-child(2){margin:.5em 0 1em}.pricing .price{font-size:24px;font-weight:700;line-height:1;color:#4caf50}.pricing .price-box{padding-top:10px}.pricing .pricing-action-container{margin:8px 0}.pricing .pricing-action-container mat-icon{vertical-align:middle;margin-right:6px}.pricing .pricing-action-container a{cursor:pointer}.pricing .pricing-model{display:inline-block;font-size:.8rem;color:#9e9e9e;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.app-enable-button{height:inherit;color:#fff;background-color:#4caf50;font-size:20px;padding:14px 16px;line-height:1}.addon-enable{height:inherit;background-color:#e0e0e0;font-size:14px;padding:14px 16px;line-height:1;color:#1e88e5;cursor:pointer;text-align:center}.wholesale-price{margin-top:0;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid #e0e0e0}.stencil-title{height:32px;width:200px;margin-bottom:5px!important}.stencil-tagline{height:32px;width:250px}"]}]}],e.propDecorators={iconUrl:[{type:i.Input}],title:[{type:i.Input}],tagline:[{type:i.Input}],prerequisite:[{type:i.Input}],chipLabels:[{type:i.Input}],pricing:[{type:i.Input}],billedProduct:[{type:i.Input}],loaded:[{type:i.Input}],hasVerifiedContract:[{type:i.Input}],pricingLabel:[{type:i.Input}],pricingActionLabel:[{type:i.Input}],pricingActionEnabled:[{type:i.Input}],actionEnabled:[{type:i.Input}],actionLabel:[{type:i.Input}],showAction:[{type:i.Input}],showPricing:[{type:i.Input}],showEnableAddon:[{type:i.Input}],prerequisiteLabel:[{type:i.Input}],prerequisiteSelected:[{type:i.Output}],actionSelected:[{type:i.Output}],pricingActionSelected:[{type:i.Output}]},e}(),q=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,o.MatIconModule,I,a.VaIconModule,o.MatChipsModule,o.MatButtonModule,o.MatTooltipModule],declarations:[F],exports:[F]}]}],e}(),T=function(){function e(){}return e.prototype.ngOnInit=function(){var e=this.getTopSection();e&&(e.startOpen=!0)},e.prototype.getTopSection=function(){return this.data?this.data.primarySection?this.data.primarySection:this.data.subsections&&0<this.data.subsections.length?this.data.subsections[0]:null:null},e.decorators=[{type:i.Component,args:[{selector:"va-order-form-section",template:'<div>\n <mat-card class="va-order-form-section-header mat-card">\n <div class="product-overview">\n <div class="product-id">\n <va-icon [iconUrl]="data.iconUrl" [name]="data.titleText" [diameter]="45"></va-icon>\n <div class="product-id-text">\n <h1 class="product-title">{{ data.titleText }}</h1>\n <span *ngIf="data.subtitleText" class="tagline">{{ data.subtitleText }}</span>\n </div>\n </div>\n <div class="description" *ngIf="data.descriptionText">\n <span>{{ data.descriptionText }}</span>\n </div>\n </div>\n </mat-card>\n <va-dropdown-form-section class="va-primary-form-section" *ngIf="data.primarySection"\n [titleText]="data.primarySection.titleText"\n [editingHint]="data.primarySection.editingHint"\n [displayAutoDescription]="data.primarySection.displayAutoDescription"\n [descriptionText]="data.primarySection.descriptionText"\n [displayAutoTitle]="data.primarySection.displayAutoTitle"\n [prepopulatedData]="data.primarySection.prepopulatedData"\n [parentForm]="data.parentForm"\n [fields]="data.primarySection.fields"\n [startOpen]="data.primarySection.startOpen"\n [expandable]="data.primarySection.expandable">\n </va-dropdown-form-section>\n <ng-container *ngIf="data.subsections?.length > 0">\n <va-dropdown-form-section class="va-secondary-form-section" *ngFor="let addon of data.subsections"\n [titleText]="addon.titleText"\n [editingHint]="addon.editingHint"\n [displayAutoDescription]="addon.displayAutoDescription"\n [descriptionText]="addon.descriptionText"\n [displayAutoTitle]="addon.displayAutoTitle"\n [prepopulatedData]="addon.prepopulatedData"\n [parentForm]="data.parentForm"\n [fields]="addon.fields"\n [startOpen]="addon.startOpen"\n [expandable]="addon.expandable">\n </va-dropdown-form-section>\n </ng-container>\n <ng-container *ngIf="!data.primarySection && !(data.subsections?.length > 0)">\n <mat-card class="not-expandable-card">\n <ng-content></ng-content>\n </mat-card>\n </ng-container>\n</div>\n',styles:[":host{font-size:16px}mat-card.va-order-form-section-header{margin-bottom:0;border-bottom-color:#e0e0e0;border-bottom-width:1px;box-shadow:0 0 1px -2px rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.14),0 0 5px 0 rgba(0,0,0,.12)}.product-title{font-size:16px}va-mat-card{margin-bottom:24px}.product-overview{display:flex;flex-wrap:wrap}.product-overview h1{margin:0;font-weight:700}.product-id{display:flex;width:100%;flex-grow:1}.product-id va-icon{margin-right:20px}@media screen and (max-width:600px){.product-id va-icon ::ng-deep .va-icon-container{width:40px!important;height:40px!important}}.product-id .product-id-text{display:flex;flex-direction:column;justify-content:center}.product-id span{display:block;overflow:hidden}.product-id .tagline{color:#616161;margin-top:8px;font-size:16px}@media screen and (min-width:600px){.product-id{width:66%;padding-right:16px}}.description{padding-top:16px;width:100%;color:#616161}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={data:[{type:i.Input}]},e}(),N=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,s.FormsModule,o.MatButtonModule,o.MatCheckboxModule,o.MatExpansionModule,o.MatIconModule,o.MatInputModule,o.MatOptionModule,o.MatProgressSpinnerModule,o.MatSelectModule,o.MatCardModule,s.ReactiveFormsModule,c.VaFormsModule,q,a.VaIconModule],declarations:[S,M,T],exports:[S,M,T],providers:[A]}]}],e}(),_=function(){function e(){}return e.prototype.markFormsAsTouched=function(e){for(var t in e.controls)e.controls[t]instanceof s.FormGroup?this.markFormsAsTouched(e.controls[t]):(e.controls[t].markAsTouched(),e.controls[t].updateValueAndValidity())},e.decorators=[{type:i.Injectable}],e}(),E=function(){function e(){this.hasVerifiedContract=!1,this.loaded=!0,this.showPricing=!0,this.showEnableAddon=!1,this.actionEnabled=!1,this.prerequisiteSelected=new i.EventEmitter,this.actionSelected=new i.EventEmitter}return e.prototype.onPrerequisiteSelected=function(){this.prerequisiteSelected.emit()},e.prototype.onActionSelected=function(){this.actionSelected.emit()},e.prototype.getPricing=function(e,t){return{currency:e.currency,prices:[{price:t.price,frequency:t.billingFrequency?t.billingFrequency:"Monthly"}]}},Object.defineProperty(e.prototype,"pricingLabel",{get:function(){return this.reseller?"Wholesale Pricing":"Pricing"},enumerable:!0,configurable:!0}),e.decorators=[{type:i.Component,args:[{selector:"addon-details",template:'<div class="addon-page">\n <va-header-container [iconUrl]="addon.icon"\n [title]="addon.title"\n [tagline]="addon.tagline"\n [chipLabels]="product.getLmiCategoryNames()"\n [pricing]="getPricing(product, addon)"\n [pricingLabel]="pricingLabel"\n [prerequisiteLabel]="product.name"\n [billedProduct]="billedProduct"\n [hasVerifiedContract]="hasVerifiedContract"\n [loaded]="loaded"\n [showPricing]="showPricing"\n [actionLabel]="\'Enable Add-on\'"\n [showEnableAddon]="showEnableAddon"\n (actionSelected)="onActionSelected()"\n (prerequisiteSelected)="onPrerequisiteSelected()">\n </va-header-container>\n\n <div class="addon-details addon-content">\n <ng-container *ngIf="reseller">\n <div class="left-column">\n <div *ngIf="addon.resellerMarketing?.description || addon.resellerMarketing?.keySellingPoints">\n <va-selling-info [description]="addon.resellerMarketing?.description"\n [keySellingPoints]="addon.resellerMarketing?.keySellingPoints"></va-selling-info>\n </div>\n <section *ngIf="addon.resellerMarketing?.faqs?.length > 0 && addon.resellerMarketing?.faqs[0].question">\n <h2 class="va-addon-title">FAQs</h2>\n <va-faqs [faqs]="addon.resellerMarketing?.faqs"></va-faqs>\n </section>\n </div>\n <div class="right-column">\n <section *ngIf="addon.restrictions?.country?.whitelist">\n <supported-countries [countryCodes]="addon.restrictions.country.whitelist"></supported-countries>\n </section>\n <section *ngIf="addon.screenshots?.length > 0">\n <h2 class="va-addon-title">Gallery</h2>\n <va-image-gallery [imageUrls]="addon.screenshots"></va-image-gallery>\n </section>\n <section *ngIf="addon.resellerMarketing?.files?.length > 0">\n <h2 class="va-addon-title">Files</h2>\n <va-files [files]="addon.resellerMarketingFiles"></va-files>\n </section>\n </div>\n </ng-container>\n\n <ng-container *ngIf="!reseller">\n <div class="left-column">\n <div *ngIf="addon.endUserMarketing?.description || addon.endUserMarketing?.keySellingPoints">\n <va-selling-info [description]="addon.endUserMarketing?.description"\n [keySellingPoints]="addon.endUserMarketing?.keySellingPoints"></va-selling-info>\n </div>\n <section *ngIf="addon.endUserMarketing?.faqs?.length > 0 && addon.endUserMarketing?.faqs[0].question">\n <h2 class="va-addon-title">FAQs</h2>\n <va-faqs [faqs]="addon.endUserMarketing?.faqs"></va-faqs>\n </section>\n </div>\n\n <div class="right-column">\n <section *ngIf="addon.restrictions?.country?.whitelist?.length > 0">\n <supported-countries [countryCodes]="addon.restrictions.country.whitelist"></supported-countries>\n </section>\n <section *ngIf="addon.screenshots?.length > 0">\n <h2 class="va-addon-title">Gallery</h2>\n <va-image-gallery [imageUrls]="addon.screenshots"></va-image-gallery>\n </section>\n <section *ngIf="addon.endUserMarketing?.files?.length > 0">\n <h2 class="va-addon-title">Files</h2>\n <va-files [files]="addon.endUserMarketingFiles"></va-files>\n </section>\n </div>\n </ng-container>\n </div>\n\n</div>\n',styles:[":host{display:block;font-size:14px;line-height:1.4}:host *{box-sizing:border-box}.va-addon-title{font-size:32px;font-weight:300;margin-top:0;color:#212121}@media screen and (min-width:600px){.va-addon-title{font-size:32px}}img{max-width:100%}va-icon{display:inline-block}.addon-page{position:relative;margin:0 auto 20px;background:#fff;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px;color:#212121}.addon-page .item-amount{color:#999;font-size:14px;text-align:right;margin:0 24px 8px}section{padding:24px}.left-column{width:66%}@media screen and (max-width:600px){.left-column{width:100%}}.right-column{width:34%}.addon-content{display:flex}@media screen and (max-width:600px){.right-column{width:100%}.addon-content{flex-direction:column}}"]}]}],e.propDecorators={product:[{type:i.Input}],addon:[{type:i.Input}],reseller:[{type:i.Input}],billedProduct:[{type:i.Input}],hasVerifiedContract:[{type:i.Input}],loaded:[{type:i.Input}],showPricing:[{type:i.Input}],showEnableAddon:[{type:i.Input}],actionEnabled:[{type:i.Input}],prerequisiteSelected:[{type:i.Output}],actionSelected:[{type:i.Output}]},e}(),O=function(){function e(){}return e.decorators=[{type:i.Component,args:[{selector:"va-files",template:'\n <div class="va-files file-list-container" *ngFor="let file of files">\n <mat-icon class="file-icon">insert_drive_file</mat-icon>\n <a [href]="file.url" target="_blank">{{ file.name }}</a>\n </div>',styles:[".va-files{display:inline-flex;margin-bottom:16px}.va-files a{color:#212121;font-size:16px;font-weight:700;-ms-grid-row-align:center;align-self:center;padding-left:8px;text-decoration:none}.va-files .file-icon{vertical-align:middle}.va-files .file-list-container{display:flex}"]}]}],e.propDecorators={files:[{type:i.Input}]},e}(),U=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,o.MatIconModule],declarations:[O],exports:[O]}]}],e}(),D=function(){function e(){this.openFaqs=[]}return e.prototype.toggleFaq=function(e){0<=this.openFaqs.indexOf(e)?this.openFaqs.splice(this.openFaqs.indexOf(e),1):this.openFaqs.push(e)},e.prototype.isFaqOpen=function(e){return 0<=this.openFaqs.indexOf(e)},e.prototype.faqIcon=function(e){return this.isFaqOpen(e)?"keyboard_arrow_up":"keyboard_arrow_down"},e.decorators=[{type:i.Component,args:[{selector:"va-faqs",template:'\n <div class="va-faq" *ngFor="let faq of faqs; let i = index;" (click)="toggleFaq(i)">\n <div class="question">\n <span>{{ faq.question }}</span>\n <mat-icon>{{ faqIcon(i) }}</mat-icon>\n </div>\n <span class="answer" [ngClass]="{\'show\': isFaqOpen(i) }" [innerHtml]="faq.answer | vaSafeHtml"></span>\n </div>',styles:[".va-faq{font-size:16px;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 0;border-bottom:1px solid #e0e0e0}.va-faq:first-of-type{border-top:1px solid #e0e0e0}.va-faq .question{display:flex;justify-content:space-between;align-items:center;color:#212121}.va-faq .answer{color:#616161;height:0;overflow:hidden}.va-faq .show{padding-top:12px;height:inherit}"]}]}],e.propDecorators={faqs:[{type:i.Input}]},e}(),V=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,o.MatIconModule,a.VaSafeHtmlModule],declarations:[D],exports:[D]}]}],e}(),L=function(){function e(){}return Object.defineProperty(e.prototype,"filterDescription",{get:function(){var e=this.description.replace(/max-width:\d*[^\"]/i,"max-width:100%");if(-1===e.indexOf('"max-width:100%"')&&-1!==e.indexOf("<iframe ")){var t=e.indexOf("<iframe ")+7;return e.substr(0,t)+' style="max-width:100%"'+e.substr(t)}return String(e)},enumerable:!0,configurable:!0}),e.decorators=[{type:i.Component,args:[{selector:"va-selling-info",template:'\n <section *ngIf="description" class="resize" [innerHtml]="filterDescription | vaSafeHtml"></section>\n <section *ngIf="keySellingPoints && keySellingPoints.length > 0" class="key-selling-points">\n <div *ngFor="let ksp of keySellingPoints" class="key-selling-point">\n <mat-icon>check_circle</mat-icon>\n {{ ksp }}\n </div>\n </section>\n ',styles:["section{padding:24px}section ::ng-deep>:first-child{margin-top:0;padding-top:0}#description *{max-width:100%!important}.key-selling-point{display:flex;align-items:center;padding-bottom:24px;font-size:16px}@media screen and (max-width:600px){.resize{font-size:16px}.key-selling-point{align-items:flex-start}}.key-selling-point:last-of-type{padding-bottom:0}.key-selling-point mat-icon{color:#4caf50;font-size:32px;width:32px;height:32px;margin-right:20px}"]}]}],e.propDecorators={description:[{type:i.Input}],keySellingPoints:[{type:i.Input}]},e}(),$=function(){function e(){}return e.