diff --git a/src/app/components/generic-calculator/calculator.component.html b/src/app/components/generic-calculator/calculator.component.html index 24f7b44e4eea9e9c0009b739d3bef2beeb25703c..ff30b8e8116508b09f108a0a77be4edbcdb8236e 100644 --- a/src/app/components/generic-calculator/calculator.component.html +++ b/src/app/components/generic-calculator/calculator.component.html @@ -74,19 +74,53 @@ [fxFlex.lt-sm]="isWide ? '1 0 auto' : '1 0 300px'"> <div id="calc-card-field-sets-container" [fxLayout]="isPB ? 'row wrap' : 'column'"> - - <ng-template ngFor let-fe [ngForOf]="formElements"> + + <!-- PB specific template --> + <div *ngIf="isPB" id="pb-schema-container" + fxFlex.gt-sm="1 0 400px" + fxFlex.lt-md="1 0 500px" + fxFlex.lt-sm="1 0 300px"> + + <pb-schema [pbSchema]="formElements[0]" (radio)=onRadioClick($event) + (validChange)=onElementValid() (nodeSelected)="onPBNodeSelected($event)"> + </pb-schema> + + <div fxHide.sm fxFlex.gt-sm="0 0 16px"></div> + </div> + <!-- PB specific template (2) --> + <div *ngIf="isPB" id="pb-form-container" [hidden]="! showPBInputData" + fxFlex.gt-sm="1 0 400px" + fxFlex.lt-md="1 0 500px" + fxFlex.lt-sm="1 0 300px"> + + <ng-template ngFor let-fe [ngForOf]="formElements"> + <field-set *ngIf="isFieldset(fe)" + [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe + (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event) + (tabPressed)="onTabPressed($event)"> + </field-set> + + <fieldset-container *ngIf="isFieldsetContainer(fe)" + [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe + (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event) + (tabPressed)="onTabPressed($event)"> + </fieldset-container> + </ng-template> + </div> + + <!-- generic template --> + <ng-template *ngIf="! isPB" ngFor let-fe [ngForOf]="formElements"> <field-set *ngIf="isFieldset(fe)" - [hidden]="isPB && ! showPBInputData" [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe + [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event) (tabPressed)="onTabPressed($event)" - [fxFlex.gt-sm]="isPB ? '1 0 400px' : '1 0 auto'" - [fxFlex.lt-md]="isPB ? '1 0 500px' : '1 0 auto'" - [fxFlex.lt-sm]="isPB ? '1 0 300px' : '1 0 auto'"> + fxFlex.gt-sm="1 0 auto" + fxFlex.lt-md="1 0 auto" + fxFlex.lt-sm="1 0 auto"> </field-set> <fieldset-container *ngIf="isFieldsetContainer(fe)" - [hidden]="isPB && ! showPBInputData" [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe + [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event) (tabPressed)="onTabPressed($event)" fxFlex="1 0 auto"> @@ -96,19 +130,6 @@ (validChange)=onElementValid() (inputChange)=onInputChange($event) fxFlex="1 0 auto"> </pab-table> - - <div *ngIf="isPbSchema(fe)" id="pb-schema-container" - [fxFlex.gt-sm]="isPB ? '1 0 400px' : '1 0 auto'" - [fxFlex.lt-md]="isPB ? '1 0 500px' : '1 0 auto'" - [fxFlex.lt-sm]="isPB ? '1 0 300px' : '1 0 auto'"> - - <pb-schema *ngIf="isPbSchema(fe)" [pbSchema]=fe (radio)=onRadioClick($event) - (validChange)=onElementValid() (nodeSelected)="onPBNodeSelected($event)"> - </pb-schema> - - <div fxHide.sm fxFlex.gt-sm="0 0 16px"></div> - </div> - </ng-template> </div> @@ -133,7 +154,7 @@ <quicknav *ngIf="! isPB" [ngClass.lt-xs]="'extraSmall'" [fxHide.gt-sm]="! isWide" [items]="quicknavItems" [currentItem]="'results'" [align]="'left'"></quicknav> - <mat-card-header *ngIf="! isWide" [fxHide.lt-md]="! isWide"> + <mat-card-header *ngIf="! isWide" [fxHide.lt-md]="! isPB && ! isWide"> <mat-card-title> <h1 [innerHTML]="uitextResultsTitle"></h1> </mat-card-title> diff --git a/src/app/components/generic-calculator/calculator.component.scss b/src/app/components/generic-calculator/calculator.component.scss index 2062925a9eeb28270188868a831e88214cf2be1e..635d9782ee63da029e6e9dc4023a9cfbc2ff18b8 100644 --- a/src/app/components/generic-calculator/calculator.component.scss +++ b/src/app/components/generic-calculator/calculator.component.scss @@ -30,6 +30,10 @@ display: block; } +#pb-form-container { + display: block; +} + /** copy of quicknav style */ #pb-data-results-selector {