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" [title]="uitextOpenHelp">
                help
            </mat-icon>
            <!-- bouton de duplication -->
            <mat-icon id="clone-calc" (click)="cloneCalculator()" [title]="uitextCloneCalculator">
                content_copy
            </mat-icon>
            <!-- bouton de sauvegarde -->
            <mat-icon id="save-calc" (click)="saveCalculator()" [title]="uitextSaveCalculator">
                file_download
            </mat-icon>
            <!-- bouton de fermeture -->
            <mat-icon id="close-calc" (click)="closeCalculator()" [title]="uitextCloseCalculator">
                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>
            <div id="calculator-used-by" *ngIf="calculatorsUsingThisOne.length > 0">
                {{ uitextUsedBy }}
                <span *ngFor="let c of calculatorsUsingThisOne; let i = index" >
                    <a class="used-by-item" (click)="toCalc(c.uid)">
                        {{ c.label }}
                    </a>
                    <span *ngIf="i < calculatorsUsingThisOne.length - 1">, </span>
                </span>
            </div>
        </mat-card-title>

    </mat-card-header>

    <quicknav [fxHide.gt-sm]="! isWide" [items]="quicknavItems" [currentItem]="'input'" [align]="'left'"></quicknav>

    <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]="isWide ? 'column' : 'row wrap'"
              [fxLayoutAlign]="isWide ? 'space-around stretch' : 'space-around start'">

                <!-- chapitres -->
                <mat-card id="calc-card-field-sets"
                  [class.pab-field-sets]="isWide"
                  [fxFlex.gt-sm]="isWide ? '1 0 auto' : '1 0 400px'"
                  [fxFlex.lt-md]="isWide ? '1 0 auto' : '1 0 500px'"
                  [fxFlex.lt-sm]="isWide ? '1 0 auto' : '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>