pb-schema.component.html

<mat-card-header class="mat-card-header-text-margin-0 bg-accent-light" [ngClass]="{'side': ! showInputData}">
    <mat-card-title>
        {{ title }}
    </mat-card-title>
</mat-card-header>

<mat-card-content>

    <div #pbSchemaContainer id="pb-schema-inner-container">
        <div id="pb-schema-toolbar">

            <button type="button" *ngIf="enableAddItems" id="add-basin" mat-raised-button color="accent" (click)="onAddBasinClick()">
                {{ uitextAddBasin }}
            </button>

            <button type="button" *ngIf="enableAddItems" id="add-wall" mat-raised-button color="accent" (click)="onAddWallClick()" [disabled]="! enableAddWallButton">
                {{ uitextAddWall }}
            </button>

            <div class="hyd-window-btns">
                <span class="related-entity-title">
                    {{ prefixedItemDescription }}
                </span>
                <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()"
                [title]="uitextCopy">
                    <mat-icon>content_copy</mat-icon>
                </button>
            |
                <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()"
                [title]="uitextRemove">
                    <mat-icon>delete</mat-icon>
                </button>
                <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveBasinUpClick()" [title]="uitextMoveBasinUp">
                    <mat-icon>arrow_upward</mat-icon>
                </button>
                <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveBasinDownClick()" [title]="uitextMoveBasinDown">
                    <mat-icon>arrow_downward</mat-icon>
                </button>
                |
                <button type="button" mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(pbSchemaContainer)" [title]="uitextEnterFSTitle">
                    <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
                </button>
                <button type="button" mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                    <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
                </button>
            </div>
        </div>

        <div id="schema" #schema></div>

        <pre id="debug">{{ graphDef }} </pre>
    </div>

</mat-card-content>