calculator.component.html

<mat-card class="calculator-card" [id]="ID">

    <mat-card-header>

        <div class="hyd-window-btns">
            <!-- bouton d'aide -->
            <mat-icon *ngIf="enableHelpButton" (click)="openHelp()" color="accent">help</mat-icon>
            <!-- bouton de duplication -->
            <mat-icon id="clone-calc" (click)="cloneCalculator()">content_copy</mat-icon>
            <!-- bouton de sauvegarde -->
            <mat-icon id="save-calc" (click)="saveCalculator()">file_download</mat-icon>
            <!-- bouton de fermeture -->
            <mat-icon id="close-calc" (click)="closeCalculator()">close</mat-icon>
        </div>

        <!-- titre -->
        <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprétés correctement -->
        <mat-card-title>
            <h1 [innerHTML]="uitextTitre"></h1>
        </mat-card-title>

    </mat-card-header>

    <form>

        <mat-card-content>

            <!-- nom du module de calcul -->
            <calc-name id="calculator-name" [title]="uitextCalculatorName"></calc-name>

            <div id="calc-cards-container" class="container"
              [fxLayout]="isPAB ? 'column' : 'row wrap'"
              [fxLayoutAlign]="isPAB ? 'space-around stretch' : 'space-around start'">

                <!-- chapitres -->
                <mat-card id="calc-card-field-sets"
                  [class.pab-field-sets]="isPAB"
                  [fxFlex.gt-xs]="isPAB ? '1 0 auto' : '1 0 400px'"
                  [fxFlex.lt-sm]="isPAB ? '1 0 auto' : '1 0 300px'">

                    <ng-template ngFor let-fe [ngForOf]="formElements">
                        <field-set *ngIf="isFieldset(fe)" [style.display]="getFieldsetStyleDisplay(fe.id)" [fieldSet]=fe
                            (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                            (tabPressed)="onTabPressed($event)">
                        </field-set>

                        <fieldset-container *ngIf="isFieldsetContainer(fe)" [_container]=fe (radio)=onRadioClick($event)
                            (validChange)=onElementValid() (inputChange)=onInputChange($event)
                            (tabPressed)="onTabPressed($event)">
                        </fieldset-container>

                        <pab-table *ngIf="isPabTable(fe)" [pabTable]=fe (radio)=onRadioClick($event)
                            (validChange)=onElementValid() (inputChange)=onInputChange($event)>
                        </pab-table>
                    </ng-template>

                    <mat-card-actions>
                        <!-- bouton calculer -->
                        <button type="submit" id="trigger-calculate" mat-raised-button color="accent" name="Calculer" (click)="doCompute()" [disabled]="isCalculateDisabled">
                            {{ uitextCalculer }}
                        </button>
                    </mat-card-actions>
                </mat-card>

                <!-- résultats -->
                <mat-card id="calc-card-results"
                  [class.pab-results]="isPAB"
                  [fxFlex.gt-xs]="isPAB ? '1 0 auto' : '1 0 400px'"
                  [fxFlex.lt-sm]="isPAB ? '1 0 auto' : '1 0 300px'">