text: import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
  import { NavigationEvent } from './datepicker-view-model';
  import { NgbDate } from './ngb-date';
  import { NgbDatepickerI18n } from './datepicker-i18n';
  // The -ms- and -webkit- element for the CSS can be removed if we are generating the CSS using SASS.
  var NgbDatepickerNavigation = (function () {
      function NgbDatepickerNavigation(i18n) {
          this.i18n = i18n;
          this.navigation = NavigationEvent;
          this.months = [];
          this.navigate = new EventEmitter();
          this.select = new EventEmitter();
      }
      NgbDatepickerNavigation.decorators = [
          { type: Component, args: [{
                      selector: 'ngb-datepicker-navigation',
                      changeDetection: ChangeDetectionStrategy.OnPush,
                      styles: ["\n    :host {\n      height: 2rem;\n      line-height: 1.85rem;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n    }\n    .ngb-dp-navigation-chevron::before {\n      border-style: solid;\n      border-width: 0.2em 0.2em 0 0;\n      content: '';\n      display: inline-block;\n      width: 0.75em;\n      height: 0.75em;\n      transform: rotate(-135deg);\n      -webkit-transform: rotate(-135deg);\n      -ms-transform: rotate(-135deg);\n    }\n    .right .ngb-dp-navigation-chevron:before {\n      -webkit-transform: rotate(45deg);\n      -ms-transform: rotate(45deg);\n      transform: rotate(45deg);\n    }\n    .ngb-dp-arrow {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1 1 auto;\n      -ms-flex: 1 1 auto;\n      flex-basis: auto;\n      flex-grow: 1;\n      padding-right: 0px;\n      padding-left: 0px;\n      margin: 0px;\n      width: 2rem;\n      height: 2rem;\n    }\n    .ngb-dp-arrow.right {\n      -webkit-box-pack: end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n    }\n    .ngb-dp-arrow-btn {\n      padding: 0rem 1rem;\n    }\n    .ngb-dp-month-name {\n      font-size: larger;\n      height: 2rem;\n      line-height: 2rem;\n      text-align: center;\n    }\n    .ngb-dp-navigation-select {\n      -webkit-box-flex: 1 1 9rem;\n      -ms-flex:  1 1 9rem;\n      flex-grow: 1;\n      flex-basis: 9rem;\n    }\n  "],
                      template: "\n  <div class=\"ngb-dp-arrow\">\n    <button type=\"button\" class=\"btn btn-link ngb-dp-arrow-btn\"\n            (click)=\"!!navigate.emit(navigation.PREV)\" [disabled]=\"prevDisabled\" tabindex=\"-1\">\n      <span class=\"ngb-dp-navigation-chevron\"></span>\n    </button>\n  </div>\n    <ngb-datepicker-navigation-select *ngIf=\"showSelect\" class=\"d-block ngb-dp-navigation-select\"\n      [date]=\"date\"\n      [disabled] = \"disabled\"\n      [months]=\"selectBoxes.months\"\n      [years]=\"selectBoxes.years\"\n      (select)=\"select.emit($event)\">\n    </ngb-datepicker-navigation-select>\n\n    <ng-template *ngIf=\"!showSelect\" ngFor let-month [ngForOf]=\"months\" let-i=\"index\">\n      <div class=\"ngb-dp-arrow\" *ngIf=\"i > 0\"></div>\n      <div class=\"ngb-dp-month-name d-block\">\n        {{ i18n.getMonthFullName(month.number) }} {{ month.year }}\n      </div>\n      <div class=\"ngb-dp-arrow\" *ngIf=\"i !== months.length - 1\"></div>\n    </ng-template>\n    <div class=\"ngb-dp-arrow right\">\n    <button type=\"button\" class=\"btn btn-link ngb-dp-arrow-btn\"\n            (click)=\"!!navigate.emit(navigation.NEXT)\" [disabled]=\"nextDisabled\" tabindex=\"-1\">\n      <span class=\"ngb-dp-navigation-chevron\"></span>\n    </button>\n    </div>\n    "
                  },] },
      ];
      /** @nocollapse */
      NgbDatepickerNavigation.ctorParameters = function () { return [
          { type: NgbDatepickerI18n, },
      ]; };
      NgbDatepickerNavigation.propDecorators = {
          "date": [{ type: Input },],
          "disabled": [{ type: Input },],
          "months": [{ type: Input },],
          "showSelect": [{ type: Input },],
          "prevDisabled": [{ type: Input },],
          "nextDisabled": [{ type: Input },],
          "selectBoxes": [{ type: Input },],
          "navigate": [{ type: Output },],
          "select": [{ type: Output },],
      };
      return NgbDatepickerNavigation;
  }());
  export { NgbDatepickerNavigation };
  //# sourceMappingURL=datepicker-navigation.js.map