calendar-nav.component.html

<div class="dp-calendar-nav-container">
  <div class="dp-nav-header">
    <span [hidden]="isLabelClickable"
          [attr.data-hidden]="isLabelClickable"
          [innerText]="label">
    </span>
    <button type="button"
            class="dp-nav-header-btn"
            [hidden]="!isLabelClickable"
            [attr.data-hidden]="!isLabelClickable"
            (click)="labelClicked()"
            [innerText]="label | pNumber">
    </button>
  </div>

  <div class="dp-nav-btns-container">
    <div class="dp-calendar-nav-container-left">
      <button type="button"
              class="dp-calendar-secondary-nav-left"
              *ngIf="showLeftSecondaryNav"
              [disabled]="leftSecondaryNavDisabled"
              (click)="leftSecondaryNavClicked()">
      </button>
      <button type="button"
              class="dp-calendar-nav-left"
              [hidden]="!showLeftNav"
              [attr.data-hidden]="!showLeftNav"
              [disabled]="leftNavDisabled"
              (click)="leftNavClicked()">
      </button>
    </div>
    <button type="button"
            class="dp-current-location-btn"
            *ngIf="showGoToCurrent"
            (click)="goToCurrent.emit()">
    </button>
    <div class="dp-calendar-nav-container-right">
      <button type="button"
              class="dp-calendar-nav-right"
              [hidden]="!showRightNav"
              [attr.data-hidden]="!showRightNav"
              [disabled]="rightNavDisabled"
              (click)="rightNavClicked()">
      </button>
      <button type="button"
              class="dp-calendar-secondary-nav-right"
              *ngIf="showRightSecondaryNav"
              [disabled]="rightSecondaryNavDisabled"
              (click)="rightSecondaryNavClicked()">
      </button>
    </div>
  </div>
</div>