@vendasta/store
Version:
Components and data for Store
39 lines (38 loc) • 4.1 kB
JavaScript
import { Component, Input } from '@angular/core';
var OrderFormSectionComponent = /** @class */ (function () {
function OrderFormSectionComponent() {
}
OrderFormSectionComponent.prototype.ngOnInit = function () {
// The first section should always be expanded.
var topSection = this.getTopSection();
if (topSection) {
topSection.startOpen = true;
}
};
OrderFormSectionComponent.prototype.getTopSection = function () {
if (!this.data) {
return null;
}
if (this.data.primarySection) {
return this.data.primarySection;
}
if (this.data.subsections && this.data.subsections.length > 0) {
return this.data.subsections[0];
}
return null;
};
OrderFormSectionComponent.decorators = [
{ type: Component, args: [{
selector: 'va-order-form-section',
template: "<div> <mat-card class=\"va-order-form-section-header mat-card\"> <div class=\"product-overview\"> <div class=\"product-id\"> <va-icon [iconUrl]=\"data.iconUrl\" [name]=\"data.titleText\" [diameter]=\"45\"></va-icon> <div class=\"product-id-text\"> <h1 class=\"product-title\">{{ data.titleText }}</h1> <span *ngIf=\"data.subtitleText\" class=\"tagline\">{{ data.subtitleText }}</span> </div> </div> <div class=\"description\" *ngIf=\"data.descriptionText\"> <span>{{ data.descriptionText }}</span> </div> </div> </mat-card> <va-dropdown-form-section class=\"va-primary-form-section\" *ngIf=\"data.primarySection\" [titleText]=\"data.primarySection.titleText\" [editingHint]=\"data.primarySection.editingHint\" [displayAutoDescription]=\"data.primarySection.displayAutoDescription\" [descriptionText]=\"data.primarySection.descriptionText\" [displayAutoTitle]=\"data.primarySection.displayAutoTitle\" [prepopulatedData]=\"data.primarySection.prepopulatedData\" [parentForm]=\"data.parentForm\" [fields]=\"data.primarySection.fields\" [startOpen]=\"data.primarySection.startOpen\" [expandable]=\"data.primarySection.expandable\"> </va-dropdown-form-section> <ng-container *ngIf=\"data.subsections?.length > 0\"> <va-dropdown-form-section class=\"va-secondary-form-section\" *ngFor=\"let addon of data.subsections\" [titleText]=\"addon.titleText\" [editingHint]=\"addon.editingHint\" [displayAutoDescription]=\"addon.displayAutoDescription\" [descriptionText]=\"addon.descriptionText\" [displayAutoTitle]=\"addon.displayAutoTitle\" [prepopulatedData]=\"addon.prepopulatedData\" [parentForm]=\"data.parentForm\" [fields]=\"addon.fields\" [startOpen]=\"addon.startOpen\" [expandable]=\"addon.expandable\"> </va-dropdown-form-section> </ng-container> </div> ",
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, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 0 5px 0 rgba(0, 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: bold; } .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: 0.5em 0 1em; font-size: 16px; } @media screen and (min-width: 600px) { .product-id { width: 66%; padding-right: 16px; } } .description { width: 100%; color: #616161; } "],
},] },
];
/** @nocollapse */
OrderFormSectionComponent.ctorParameters = function () { return []; };
OrderFormSectionComponent.propDecorators = {
'data': [{ type: Input },],
};
return OrderFormSectionComponent;
}());
export { OrderFormSectionComponent };