app.component.html

<div class="main-div" [class.top-notification-panel-visible]="isTopNotificationPanelVisible()">
    <app-update-available *ngIf="showUpdateAvailable"
                          [@topNotificationPanelVisible]
                          (updateApp)="updateApp()"
                          (doNotUpdateApp)="doNotUpdateApp()">
    </app-update-available>
    <ble-pairing-panel *ngIf="newPairedDevicesState?.showNewPairedDevicesPanel"
                       [@topNotificationPanelVisible]
                       [state]="newPairedDevicesState"
                       (addNewPairedDevices)="addPairedDevicesToHostConnections()"
    />
    <dongle-pairing-panel *ngIf="donglePairingState?.showDonglePairingPanel"
                          [@topNotificationPanelVisible]
                          [state]="donglePairingState.state"
                          (pairDongle)="startDonglePairing()"
    />
    <firmware-upgrade-panel *ngIf="showFirmwareUpgradePanel"
                            [@topNotificationPanelVisible]
                            (updateFirmware)="updateFirmware()"
    >
    </firmware-upgrade-panel>


    <side-menu [deviceConfigurationLoaded] = "deviceConfigurationLoaded$ | async"
    ></side-menu>

    <div class="secondary-menu-wrapper"
         [class.visible]="secondSideMenuVisible">
        <second-side-menu-container>
        </second-side-menu-container>
    </div>

    <div class="inner-content"
         [class.top-notification-panel-visible]="isTopNotificationPanelVisible()"
         [class.second-menu-visible]="secondSideMenuVisible">
        <as-split direction="vertical"
                  [useTransition]="true"
                  (dragEnd)="errorPanelSizeDragEndHandler($event)">
            <as-split-area [size]="splitSizes.top">
                <router-outlet></router-outlet>
            </as-split-area>
            <as-split-area *ngIf="statusBuffer" [size]="splitSizes.bottom" class="error-panel" [@errorPanel]>
                <button type="button" class="btn-close" aria-label="Close" (click)="closeErrorPanel()"></button>
                <div class="error-panel-content">
                    <pre [innerHTML]="statusBuffer | newLineToBr | safeHtml"></pre>
                </div>
            </as-split-area>
        </as-split>
    </div>
</div>
<notifier-container></notifier-container>
<highlight-arrow *ngIf="firstAttemptOfSaveToKeyboard$ | async" [@highlightArrow]></highlight-arrow>
<button *ngIf="isStatusBufferErrorHidden$ | async"
        type="button" aria-label="Show error panel"
        class="show-error-panel-button"
        ngbTooltip="Show error panel"
        (click)="showErrorPanel()"
        >
    <fa-icon [icon]="faArrowUp"></fa-icon>
</button>
<progress-button class="save-to-keyboard-button"
                 *ngIf="saveToKeyboardState.showButton"
                 [@showSaveToKeyboardButton]
                 [state]="saveToKeyboardState"
                 (clicked)="clickedOnProgressButton($event)"></progress-button>
<out-of-space-warning *ngIf="outOfSpaceWarning.show"
                      [@showOutOfSpaceWarning]
                      [state]="outOfSpaceWarning"></out-of-space-warning>
<ng-template #manuallyUpdateNotification>
    <p class="notifier__notification-message">
    Agent's digital signature has changed. Please  <a href="https://uhk.io/agent" class="alert-link" externalUrl>update it manually</a> this time. Agent will auto-update afterward.
    </p>
    <button
        class="notifier__notification-button"
        type="button"
        title="dismiss"
        (click)="dismissUpdateErrorNotification()"
    >
        <svg class="notifier__notification-button-icon" viewBox="0 0 24 24" width="20" height="20">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        </svg>
    </button>
</ng-template>