diff --git a/src/app/components/generic-calculator/calculator.component.html b/src/app/components/generic-calculator/calculator.component.html index 9cb4f5d2f295798df4edf3dcf0a50156f35c56bb..6ef040218a00bd45208397592bcdd13c851edcfa 100644 --- a/src/app/components/generic-calculator/calculator.component.html +++ b/src/app/components/generic-calculator/calculator.component.html @@ -70,19 +70,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"> @@ -92,19 +126,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> @@ -127,7 +148,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 6c19dd011dd7be1129dcac07abcfdc8bfa272821..da2c0f0217967cf1fe51a0b3517d6735e8770912 100644 --- a/src/app/components/generic-calculator/calculator.component.scss +++ b/src/app/components/generic-calculator/calculator.component.scss @@ -26,6 +26,10 @@ display: block; } +#pb-form-container { + display: block; +} + /** copy of quicknav style */ #pb-data-results-selector {