@vendasta/store/order-form/dropdown-form-section/dropdown-form-section.component.metadata.json

[{"__symbolic":"module","version":3,"metadata":{"DropDownFormSectionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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\">&nbsp;</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\"> &nbsp;</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 { transition: margin 400ms; } .mat-expansion-panel { transition: margin 400ms; } .dropdown-form-header { width: 100%; display: flex; } mat-panel-description { align-self: center; display: flex; flex: inherit; } mat-panel-description.invalid { color: #c62828; } mat-icon { margin-right: 7px; align-self: center; } mat-icon.valid { color: #4caf50; } mat-icon.invalid { color: #c62828; } mat-icon.question { color: #9e9e9e; } mat-panel-description { display: initial; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } mat-panel-title { 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: white; cursor: default; font-size: 15px; display: flex; height: 48px; align-items: center; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 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; } "]}]}],"members":{"prepopulatedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"parentForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayAutoTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayAutoDescription":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"descriptionText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"editingHint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expandable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toFormGroup":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropDownFormSectionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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\">&nbsp;</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\"> &nbsp;</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 { transition: margin 400ms; } .mat-expansion-panel { transition: margin 400ms; } .dropdown-form-header { width: 100%; display: flex; } mat-panel-description { align-self: center; display: flex; flex: inherit; } mat-panel-description.invalid { color: #c62828; } mat-icon { margin-right: 7px; align-self: center; } mat-icon.valid { color: #4caf50; } mat-icon.invalid { color: #c62828; } mat-icon.question { color: #9e9e9e; } mat-panel-description { display: initial; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } mat-panel-title { 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: white; cursor: default; font-size: 15px; display: flex; height: 48px; align-items: center; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 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; } "]}]}],"members":{"prepopulatedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"parentForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayAutoTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayAutoDescription":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"descriptionText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"editingHint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expandable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toFormGroup":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]