@vendasta/store/addon-list/addon-list.component.metadata.json

Components and data for Store

[{"__symbolic":"module","version":3,"metadata":{"VaAddonListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-addon-list","template":"\n        <mat-list *ngIf=\"addons\" class=\"addon-list\">\n            <mat-list-item class=\"addon-list-item\" (click)=\"onClick(addon.addonId)\" *ngFor=\"let addon of addons\">\n              <img *ngIf=\"addon.icon\" class=\"addon-icon\" [src]=\"addon.icon\" mat-list-avatar/>\n              <mat-icon *ngIf=\"!addon.icon\" class=\"addon-default-icon\" mat-list-icon>add_circle</mat-icon>\n              <p class=\"addon-title\" matLine>{{ addon.title }}\n                  <span *ngIf=\"showPricing\">\n                    &mdash; <va-pricing [pricing]=\"getDisplayPricing(addon)\" [isAddon]=\"true\" class=\"price-section\"></va-pricing>\n                  </span>\n              </p>\n              <p class=\"addon-tagline\" matLine> {{ addon.tagline }} </p>\n            </mat-list-item>\n        </mat-list>\n    ","styles":[":host { display: block; } h2 + :host { margin: -12px 0 -12px; } .price-section { display: inline-block; } .price-section ::ng-deep > div { display: inline-block; } .price-section ::ng-deep .price-number { font-size: 16px; font-weight: normal; } .price-section ::ng-deep .billing-freq { color: #212121; } .addon-list-item .addon-title { color: #212121; font-size: 16px; margin: 4px 0 0; } .addon-list-item .addon-tagline { color: #616161; font-size: 14px; margin: 0 0 4px; white-space: normal; } .addon-list-item .addon-default-icon { color: #4caf50; } .addon-list-item .addon-icon { width: 32px !important; height: 32px !important; } .addon-list-item:hover { background-color: #fafafa !important; } ::ng-deep .mat-list .mat-list-item.mat-2-line .mat-list-item-content { height: auto !important; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; } "]}]}],"members":{"addons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"product":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showPricing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"addonSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method"}],"instanceOfPricing":[{"__symbolic":"method"}],"getDisplayPricing":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"VaAddonListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"va-addon-list","template":"\n        <mat-list *ngIf=\"addons\" class=\"addon-list\">\n            <mat-list-item class=\"addon-list-item\" (click)=\"onClick(addon.addonId)\" *ngFor=\"let addon of addons\">\n              <img *ngIf=\"addon.icon\" class=\"addon-icon\" [src]=\"addon.icon\" mat-list-avatar/>\n              <mat-icon *ngIf=\"!addon.icon\" class=\"addon-default-icon\" mat-list-icon>add_circle</mat-icon>\n              <p class=\"addon-title\" matLine>{{ addon.title }}\n                  <span *ngIf=\"showPricing\">\n                    &mdash; <va-pricing [pricing]=\"getDisplayPricing(addon)\" [isAddon]=\"true\" class=\"price-section\"></va-pricing>\n                  </span>\n              </p>\n              <p class=\"addon-tagline\" matLine> {{ addon.tagline }} </p>\n            </mat-list-item>\n        </mat-list>\n    ","styles":[":host { display: block; } h2 + :host { margin: -12px 0 -12px; } .price-section { display: inline-block; } .price-section ::ng-deep > div { display: inline-block; } .price-section ::ng-deep .price-number { font-size: 16px; font-weight: normal; } .price-section ::ng-deep .billing-freq { color: #212121; } .addon-list-item .addon-title { color: #212121; font-size: 16px; margin: 4px 0 0; } .addon-list-item .addon-tagline { color: #616161; font-size: 14px; margin: 0 0 4px; white-space: normal; } .addon-list-item .addon-default-icon { color: #4caf50; } .addon-list-item .addon-icon { width: 32px !important; height: 32px !important; } .addon-list-item:hover { background-color: #fafafa !important; } ::ng-deep .mat-list .mat-list-item.mat-2-line .mat-list-item-content { height: auto !important; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; } "]}]}],"members":{"addons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"product":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showPricing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"addonSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method"}],"instanceOfPricing":[{"__symbolic":"method"}],"getDisplayPricing":[{"__symbolic":"method"}]}}}}]