all files / schedule/renderer/ header-renderer.js

94.95% Statements 395/416
85.33% Branches 256/300
95.12% Functions 39/41
95.18% Lines 395/415
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707                   978× 978× 978× 978×   978×   978×   81× 81× 81× 81×                                   81×   79×   245×     978× 978× 978× 978× 978×   978× 978×   978× 978×                 978× 978× 978× 978× 978× 978× 977×   978× 978× 977×   978× 978× 978×     11× 11× 10× 10× 10× 10× 10×       10×     1808× 30× 30×     571× 29× 29×     1853× 30× 30× 30×     32×   24×     23×     318× 22× 22× 22× 22×     1296× 1296× 1296× 1038×     1932× 1932×     1932× 1932× 1932× 37× 37×       37× 37× 37× 37×     1895× 1895× 1895×   1932×   1939× 1939×     990× 990× 73×     72×       988×     988×   23× 23×   23×   23×   23×   23×   23×   23×   23×   23×   23×   23× 14×   23×   23×   23×   23×   23×   23×   23×   23× 23× 23× 23× 23×                                                                 985× 985×       985×       985×         985× 71×       71×           914×       914× 735×     985× 793× 3406× 3406×     985×   3414× 3414× 3414× 3232× 3232×     182× 182×   3414× 3414× 3414× 3414×   544×       544×   540×       540×   478×       478×   521×       521×           486×       486×   40×       40×   230×       230×   225×       225×   203×       203×   104×       104×   35× 35×       35×   3414×   10× 10× 10× 10× 10×             10× 10×   10×                       10× 10× 10×   12×   12×   15× 10×     57× 57× 57×   978×         290×   289× 289× 289× 289× 289×   32× 10×   32× 12×     20×   32×     20× 20×                     10× 10×               73× 73×   116× 116×           289×     289× 289× 33×             3239×   1930× 1930× 1930× 1930× 1926× 13×     1913×     1930× 1926× 13×     1913×     1930× 1929× 13×     1916×       1853×   1853× 1853× 1853× 1853× 1853× 199× 199×   1654× 225×   225× 225×     1853× 1850×   1853× 1850×   1853×     979× 10× 10×   979× 10× 10×   979× 978× 978× 978× 978×   979× 979× 979×        
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "@syncfusion/ej2-calendars", "@syncfusion/ej2-popups", "../base/constant", "../base/util", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_navigations_1, ej2_calendars_1, ej2_popups_1, events, util, cls) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var HeaderRenderer = (function () {
        function HeaderRenderer(parent) {
            this.parent = parent;
            this.l10n = this.parent.localeObj;
            this.renderHeader();
            this.addEventListener();
        }
        HeaderRenderer.prototype.addEventListener = function () {
            this.parent.on(events.documentClick, this.closeHeaderPopup, this);
        };
        HeaderRenderer.prototype.removeEventListener = function () {
            this.parent.off(events.documentClick, this.closeHeaderPopup);
        };
        HeaderRenderer.prototype.closeHeaderPopup = function (e) {
            var closestEle = ej2_base_1.closest(e.event.target, '.e-date-range,.e-header-popup,.e-day,.e-selected');
            var closestPop = ej2_base_1.closest(e.event.target, '.e-hor-nav,.e-toolbar-pop');
            var contentWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
            Iif (this.parent.isAdaptive) {
                if (!ej2_base_1.isNullOrUndefined(closestPop) && (closestPop.classList.contains('e-toolbar-pop') ||
                    closestPop.classList.contains('e-hor-nav')) && !(closestPop.classList.contains('e-hor-nav') &&
                    this.element.querySelector('.e-toolbar-pop').classList.contains(cls.POPUP_OPEN))) {
                    ej2_base_1.addClass([contentWrap], cls.SCROLL_HIDDEN);
                }
                else {
                    ej2_base_1.removeClass([contentWrap], cls.SCROLL_HIDDEN);
                    var popupEle = this.element.querySelector('.e-toolbar-pop');
                    if (!ej2_base_1.isNullOrUndefined(popupEle)) {
                        var popupObj = popupEle.ej2_instances[0];
                        if (popupObj && !(!ej2_base_1.isNullOrUndefined(closestPop) && closestPop.classList.contains('e-hor-nav') &&
                            popupEle.classList.contains(cls.POPUP_OPEN))) {
                            popupObj.hide();
                        }
                    }
                }
            }
            if (!ej2_base_1.isNullOrUndefined(closestEle)) {
                return;
            }
            this.hideHeaderPopup();
        };
        HeaderRenderer.prototype.hideHeaderPopup = function () {
            if (this.headerPopup) {
                this.headerPopup.hide();
            }
        };
        HeaderRenderer.prototype.renderHeader = function () {
            this.element = ej2_base_1.createElement('div', { className: cls.TOOLBAR_CONTAINER });
            var toolbarEle = ej2_base_1.createElement('div', { className: cls.HEADER_TOOLBAR });
            this.element.appendChild(toolbarEle);
            this.parent.element.insertBefore(this.element, this.parent.element.firstElementChild);
            this.renderToolbar();
        };
        HeaderRenderer.prototype.renderToolbar = function () {
            var _this = this;
            var items = (this.parent.toolbarItems && this.parent.toolbarItems.length > 0) ?
                this.getToolbarItems() : this.getItems();
            this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {
                _this.toolbarObj = new ej2_navigations_1.Toolbar({
                    items: args.items,
                    overflowMode: 'Popup',
                    clicked: _this.toolbarClickHandler.bind(_this),
                    created: _this.toolbarCreateHandler.bind(_this),
                    enableRtl: _this.parent.enableRtl,
                    enableHtmlSanitizer: _this.parent.enableHtmlSanitizer,
                    locale: _this.parent.locale
                });
                _this.toolbarObj.isStringTemplate = true;
                _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent;
                _this.toolbarObj.appendTo(_this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));
                _this.toolbarObj.element.setAttribute('aria-label', 'Scheduler');
                var prevNavEle = _this.toolbarObj.element.querySelector('.e-prev');
                if (prevNavEle) {
                    prevNavEle.firstElementChild.setAttribute('title', _this.l10n.getConstant('previous'));
                }
                var nextNavEle = _this.toolbarObj.element.querySelector('.e-next');
                if (nextNavEle) {
                    nextNavEle.firstElementChild.setAttribute('title', _this.l10n.getConstant('next'));
                }
                _this.updateAddIcon();
                _this.updateActiveView();
                _this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: _this.toolbarObj.items });
            });
        };
        HeaderRenderer.prototype.updateItems = function () {
            var _this = this;
            if (this.toolbarObj) {
                var items = this.getItems();
                this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {
                    _this.toolbarObj.items = args.items;
                    _this.toolbarObj.dataBind();
                    _this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: _this.toolbarObj.items });
                });
            }
        };
        HeaderRenderer.prototype.getPopUpRelativeElement = function () {
            if (this.parent.isAdaptive) {
                return this.toolbarObj.element;
            }
            return this.element.querySelector('.e-date-range');
        };
        HeaderRenderer.prototype.setDayOfWeek = function (index) {
            if (this.headerCalendar) {
                this.headerCalendar.firstDayOfWeek = index;
                this.headerCalendar.dataBind();
            }
        };
        HeaderRenderer.prototype.setCalendarDate = function (date) {
            if (this.headerCalendar) {
                this.headerCalendar.value = date;
                this.headerCalendar.dataBind();
            }
        };
        HeaderRenderer.prototype.setCalendarMinMaxDate = function () {
            if (this.headerCalendar) {
                this.headerCalendar.min = this.parent.minDate;
                this.headerCalendar.max = this.parent.maxDate;
                this.headerCalendar.dataBind();
            }
        };
        HeaderRenderer.prototype.getCalendarView = function () {
            if (['Month', 'MonthAgenda', 'TimelineMonth'].indexOf(this.parent.currentView) > -1) {
                return 'Year';
            }
            else if (['Year', 'TimelineYear'].indexOf(this.parent.currentView) > -1) {
                return 'Decade';
            }
            else {
                return 'Month';
            }
        };
        HeaderRenderer.prototype.setCalendarView = function () {
            if (this.headerCalendar) {
                var calendarView = this.getCalendarView();
                this.headerCalendar.depth = calendarView;
                this.headerCalendar.start = calendarView;
                this.headerCalendar.refresh();
            }
        };
        HeaderRenderer.prototype.updateActiveView = function () {
            var selEle = [].slice.call(this.toolbarObj.element.querySelectorAll('.e-views'));
            ej2_base_1.removeClass(selEle, ['e-active-view']);
            if (selEle.length > 0 && selEle[this.parent.viewIndex]) {
                ej2_base_1.addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
            }
        };
        HeaderRenderer.prototype.updateDateRange = function (date) {
            var selEle = this.toolbarObj.element.querySelector('.e-date-range');
            Iif (!selEle) {
                return;
            }
            selEle.firstElementChild.setAttribute('aria-haspopup', 'true');
            var textEle = selEle.querySelector('.e-tbar-btn-text');
            if (this.parent.activeViewOptions.dateRangeTemplate) {
                textEle.textContent = '';
                var args = {
                    startDate: this.parent.activeView.getStartDate(),
                    endDate: this.parent.activeView.getEndDate(), currentView: this.parent.currentView
                };
                var viewName = this.parent.activeViewOptions.dateRangeTemplateName;
                var templateId = this.parent.element.id + '_' + viewName + 'dateRangeTemplate';
                var dateTemplate = [].slice.call(this.parent.getDateRangeTemplate()(args, this.parent, 'dateRangeTemplate', templateId, false, undefined, undefined, this.parent.root));
                ej2_base_1.append(dateTemplate, textEle);
            }
            else {
                var text = this.parent.activeView.getDateRangeText(date);
                selEle.firstElementChild.setAttribute('aria-label', text);
                textEle.textContent = text;
            }
            this.refresh();
        };
        HeaderRenderer.prototype.refresh = function () {
            Eif (this.toolbarObj) {
                this.toolbarObj.refreshOverflow();
            }
        };
        HeaderRenderer.prototype.updateAddIcon = function () {
            var addEle = this.toolbarObj.element.querySelector('.e-add');
            if (addEle) {
                if (!this.parent.eventSettings.allowAdding) {
                    ej2_base_1.addClass([addEle], cls.HIDDEN_CLASS);
                }
                else {
                    ej2_base_1.removeClass([addEle], cls.HIDDEN_CLASS);
                }
            }
        };
        HeaderRenderer.prototype.getDateRangeText = function () {
            var dateString = this.parent.globalize.formatDate(this.parent.selectedDate, {
                format: 'MMMM y', calendar: this.parent.getCalendarMode()
            });
            return util.capitalizeFirstWord(dateString, 'single');
        };
        HeaderRenderer.prototype.getItemModel = function (propItem) {
            var item = {};
            if (propItem.id) {
                item.id = propItem.id;
            }
            if (propItem.text) {
                item.text = propItem.text;
            }
            if (propItem.tooltipText) {
                item.tooltipText = propItem.tooltipText;
            }
            if (propItem.prefixIcon) {
                item.prefixIcon = propItem.prefixIcon;
            }
            if (propItem.cssClass) {
                item.cssClass = propItem.cssClass;
            }
            if (propItem.showTextOn !== 'Both') {
                item.showTextOn = propItem.showTextOn;
            }
            if (propItem.template) {
                item.template = propItem.template;
            }
            if (propItem.disabled) {
                item.disabled = propItem.disabled;
            }
            if (propItem.width !== 'auto') {
                item.width = propItem.width;
            }
            if (propItem.suffixIcon) {
                item.suffixIcon = propItem.suffixIcon;
            }
            if (propItem.align !== 'Left') {
                item.align = propItem.align;
            }
            if (propItem.overflow !== 'None') {
                item.overflow = propItem.overflow;
            }
            if (propItem.htmlAttributes) {
                item.htmlAttributes = propItem.htmlAttributes;
            }
            if (propItem.type !== 'Button') {
                item.type = propItem.type;
            }
            if (propItem.visible !== true) {
                item.visible = propItem.visible;
            }
            if (propItem.showAlwaysInPopup) {
                item.showAlwaysInPopup = propItem.showAlwaysInPopup;
            }
            if (propItem.tabIndex !== -1) {
                item.tabIndex = propItem.tabIndex;
            }
            return item;
        };
        HeaderRenderer.prototype.getToolbarItems = function () {
            var items = [];
            var propItem;
            for (var _i = 0, _a = this.parent.toolbarItems; _i < _a.length; _i++) {
                var item = _a[_i];
                propItem = this.getItemModel(item);
                var tbItem = void 0;
                Eif (item.name) {
                    switch (item.name) {
                        case 'Today':
                            tbItem = {
                                showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
                                text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
                            };
                            tbItem.align = propItem.align ? propItem.align : item.align;
                            items.push(__assign({}, tbItem, propItem));
                            break;
                        case 'Previous':
                            tbItem = {
                                prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
                                cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
                            };
                            tbItem.align = propItem.align ? propItem.align : item.align;
                            items.push(__assign({}, tbItem, propItem));
                            break;
                        case 'Next':
                            tbItem = {
                                prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
                                cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
                            };
                            tbItem.align = propItem.align ? propItem.align : item.align;
                            items.push(__assign({}, tbItem, propItem));
                            break;
                        case 'DateRangeText':
                            tbItem = {
                                text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
                                overflow: 'Show',
                                htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
                            };
                            tbItem.align = propItem.align ? propItem.align : item.align;
                            items.push(__assign({}, tbItem, propItem));
                            break;
                        case 'NewEvent':
                            tbItem = {
                                showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
                                text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
                            };
                            tbItem.align = propItem.align ? propItem.align : item.align;
                            items.push(__assign({}, tbItem, propItem));
                            break;
                        case 'Views':
                            Eif (!ej2_base_1.isNullOrUndefined(this.parent.views) && this.parent.views.length > 1) {
                                for (var _b = 0, _c = this.parent.views; _b < _c.length; _b++) {
                                    var view = _c[_b];
                                    tbItem = this.getItemObject(view);
                                    tbItem.align = propItem.align ? propItem.align : item.align;
                                    items.push(__assign({}, tbItem, propItem));
                                }
                            }
                            break;
                        case 'Custom':
                            items.push(item);
                            break;
                    }
                }
                else {
                    items.push(item);
                }
            }
            return items;
        };
        HeaderRenderer.prototype.getItems = function () {
            var items = [];
            items.push({
                align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
                cssClass: 'e-prev'
            });
            items.push({
                align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
                cssClass: 'e-next'
            });
            items.push({
                align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
                overflow: 'Show',
                htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive' }
            });
            if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {
                items.push({
                    align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
                    text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
                });
                items.push({
                    align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
                    text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
                });
            }
            else {
                items.push({
                    align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
                    text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
                });
                if (!ej2_base_1.isNullOrUndefined(this.parent.views) && this.parent.views.length > 1) {
                    items.push({ align: 'Right', type: 'Separator', cssClass: 'e-schedule-seperator' });
                }
            }
            if (!ej2_base_1.isNullOrUndefined(this.parent.views) && this.parent.views.length > 1) {
                for (var _i = 0, _a = this.parent.views; _i < _a.length; _i++) {
                    var item = _a[_i];
                    items.push(this.getItemObject(item));
                }
            }
            return items;
        };
        HeaderRenderer.prototype.getItemObject = function (item) {
            var viewName;
            var displayName;
            if (typeof (item) === 'string') {
                viewName = item.toLowerCase();
                displayName = null;
            }
            else {
                viewName = item.option.toLowerCase();
                displayName = item.displayName;
            }
            var view;
            var orientationClass;
            var isItemInsidePopup = this.parent.isAdaptive || this.parent.enableAdaptiveUI;
            switch (viewName) {
                case 'day':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-day',
                        text: displayName || this.l10n.getConstant('day'), cssClass: 'e-views e-day'
                    };
                    break;
                case 'week':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-week',
                        text: displayName || this.l10n.getConstant('week'), cssClass: 'e-views e-week'
                    };
                    break;
                case 'workweek':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-workweek',
                        text: displayName || this.l10n.getConstant('workWeek'), cssClass: 'e-views e-work-week'
                    };
                    break;
                case 'month':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-month',
                        text: displayName || this.l10n.getConstant('month'), cssClass: 'e-views e-month'
                    };
                    break;
                case 'year':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-year',
                        text: displayName || this.l10n.getConstant('year'), cssClass: 'e-views e-year'
                    };
                    break;
                case 'agenda':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-agenda',
                        text: displayName || this.l10n.getConstant('agenda'), cssClass: 'e-views e-agenda'
                    };
                    break;
                case 'monthagenda':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-month-agenda',
                        text: displayName || this.l10n.getConstant('monthAgenda'), cssClass: 'e-views e-month-agenda'
                    };
                    break;
                case 'timelineday':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-day',
                        text: displayName || this.l10n.getConstant('timelineDay'), cssClass: 'e-views e-timeline-day'
                    };
                    break;
                case 'timelineweek':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-week',
                        text: displayName || this.l10n.getConstant('timelineWeek'), cssClass: 'e-views e-timeline-week'
                    };
                    break;
                case 'timelineworkweek':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-workweek',
                        text: displayName || this.l10n.getConstant('timelineWorkWeek'), cssClass: 'e-views e-timeline-work-week'
                    };
                    break;
                case 'timelinemonth':
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-month',
                        text: displayName || this.l10n.getConstant('timelineMonth'), cssClass: 'e-views e-timeline-month'
                    };
                    break;
                case 'timelineyear':
                    orientationClass = (item.orientation === 'Vertical') ? 'vertical' : 'horizontal';
                    view = {
                        align: 'Right', showAlwaysInPopup: isItemInsidePopup, prefixIcon: 'e-icon-timeline-year-' + orientationClass,
                        text: displayName || this.l10n.getConstant('timelineYear'), cssClass: 'e-views e-timeline-year'
                    };
                    break;
            }
            return view;
        };
        HeaderRenderer.prototype.renderHeaderPopup = function () {
            var headerPopupEle = ej2_base_1.createElement('div', { className: cls.HEADER_POPUP_CLASS });
            var headerCalendarEle = ej2_base_1.createElement('div', { className: cls.HEADER_CALENDAR_CLASS });
            headerPopupEle.appendChild(headerCalendarEle);
            this.element.appendChild(headerPopupEle);
            this.headerPopup = new ej2_popups_1.Popup(headerPopupEle, {
                actionOnScroll: 'hide',
                targetType: 'relative',
                relateTo: this.getPopUpRelativeElement(),
                position: { X: 'left', Y: 'bottom' },
                enableRtl: this.parent.enableRtl
            });
            var calendarView = this.getCalendarView();
            var isDisplayDate = this.parent.currentView === 'Month' &&
                !ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.displayDate) && !this.hasSelectedDate();
            this.headerCalendar = new ej2_calendars_1.Calendar({
                value: isDisplayDate ? this.parent.activeViewOptions.displayDate : this.parent.selectedDate,
                min: this.parent.minDate,
                max: this.parent.maxDate,
                firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
                enableRtl: this.parent.enableRtl,
                locale: this.parent.locale,
                depth: calendarView,
                start: calendarView,
                calendarMode: this.parent.calendarMode,
                change: this.calendarChange.bind(this)
            });
            this.setCalendarTimezone();
            this.headerCalendar.appendTo(headerCalendarEle);
            this.headerPopup.hide();
        };
        HeaderRenderer.prototype.calendarChange = function (args) {
            if (args.value.getTime() !== this.parent.selectedDate.getTime()) {
                var calendarDate = util.resetTime(new Date(args.value));
                this.parent.changeDate(calendarDate);
            }
            this.headerPopup.hide();
        };
        HeaderRenderer.prototype.setCalendarTimezone = function () {
            if (this.headerCalendar) {
                this.headerCalendar.timezone = this.parent.timezone || this.parent.tzModule.getLocalTimezoneName();
            }
        };
        HeaderRenderer.prototype.calculateViewIndex = function (args) {
            var target = ej2_base_1.closest(args.originalEvent.target, '.e-views');
            var views = [].slice.call(this.element.querySelectorAll('.e-views'));
            return views.indexOf(target);
        };
        HeaderRenderer.prototype.toolbarCreateHandler = function () {
            Iif (this.parent && this.parent.portals && this.toolbarObj && this.toolbarObj.portals) {
                this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals);
                this.parent['renderReactTemplates']();
            }
        };
        HeaderRenderer.prototype.toolbarClickHandler = function (args) {
            if (!args.item) {
                return;
            }
            var strClass = args.item.cssClass.replace('e-views ', '');
            var data;
            var isSameTime;
            var currentTime;
            switch (strClass) {
                case 'e-date-range':
                    if (!this.headerPopup) {
                        this.renderHeaderPopup();
                    }
                    if (this.headerPopup.element.classList.contains(cls.POPUP_OPEN)) {
                        this.headerPopup.hide();
                    }
                    else {
                        this.headerPopup.show();
                    }
                    break;
                case 'e-day':
                    this.parent.changeView('Day', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-week':
                    this.parent.changeView('Week', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-work-week':
                    this.parent.changeView('WorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-month':
                    this.parent.changeView('Month', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-year':
                    this.parent.changeView('Year', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-agenda':
                    this.parent.changeView('Agenda', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-month-agenda':
                    this.parent.changeView('MonthAgenda', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-timeline-day':
                    this.parent.changeView('TimelineDay', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-timeline-week':
                    this.parent.changeView('TimelineWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-timeline-work-week':
                    this.parent.changeView('TimelineWorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-timeline-month':
                    this.parent.changeView('TimelineMonth', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-timeline-year':
                    this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                    break;
                case 'e-today':
                    currentTime = util.resetTime(this.parent.getCurrentTime());
                    Eif (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda' || !this.parent.isSelectedDate(currentTime) ||
                        this.parent.currentView === 'Month' && this.parent.activeViewOptions.displayDate && !this.hasSelectedDate() &&
                            util.resetTime(this.parent.activeViewOptions.displayDate) !== currentTime || this.parent.currentView === 'Month' &&
                        this.parent.activeViewOptions.numberOfWeeks > 0 && !this.hasSelectedDate()
                        && util.resetTime(util.firstDateOfMonth(this.parent.selectedDate)) !== currentTime) {
                        this.parent.changeDate(currentTime, args.originalEvent);
                    }
                    break;
                case 'e-prev':
                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), args.originalEvent);
                    break;
                case 'e-next':
                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), args.originalEvent);
                    break;
                case 'e-add':
                    isSameTime = this.parent.activeCellsData.startTime.getTime() === this.parent.activeCellsData.endTime.getTime();
                    if (this.parent.activeCellsData && !isSameTime) {
                        data = this.parent.activeCellsData;
                    }
                    else {
                        var interval = this.parent.activeViewOptions.timeScale.interval;
                        var slotCount = this.parent.activeViewOptions.timeScale.slotCount;
                        var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;
                        var startTime = new Date(this.parent.selectedDate.getTime());
                        var currentTime_1 = this.parent.getCurrentTime();
                        startTime.setHours(currentTime_1.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
                        var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
                        data = { startTime: startTime, endTime: endTime, isAllDay: false };
                    }
                    this.parent.eventWindow.openEditor(ej2_base_1.extend(data, { cancel: false, event: args.originalEvent }), 'Add');
                    break;
            }
            Iif (ej2_base_1.isNullOrUndefined(this.toolbarObj)) {
                return;
            }
            var toolbarPopUp = this.toolbarObj.element.querySelector('.e-toolbar-pop');
            if (toolbarPopUp && args.item.type !== 'Input') {
                toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
            }
        };
        HeaderRenderer.prototype.hasSelectedDate = function () {
            var selectedTime = util.resetTime(this.parent.selectedDate).getTime();
            return selectedTime >= this.parent.activeView.getStartDate().getTime() &&
                selectedTime <= this.parent.activeView.getEndDate().getTime();
        };
        HeaderRenderer.prototype.getHeaderElement = function () {
            return this.toolbarObj.element;
        };
        HeaderRenderer.prototype.updateHeaderItems = function (classType) {
            var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
            var nextNavEle = this.toolbarObj.element.querySelector('.e-next');
            var dateRangeEle = this.toolbarObj.element.querySelector('.e-date-range');
            if (prevNavEle) {
                if (classType === 'add') {
                    ej2_base_1.addClass([prevNavEle], cls.HIDDEN_CLASS);
                }
                else {
                    ej2_base_1.removeClass([prevNavEle], cls.HIDDEN_CLASS);
                }
            }
            if (nextNavEle) {
                if (classType === 'add') {
                    ej2_base_1.addClass([nextNavEle], cls.HIDDEN_CLASS);
                }
                else {
                    ej2_base_1.removeClass([nextNavEle], cls.HIDDEN_CLASS);
                }
            }
            if (dateRangeEle) {
                if (classType === 'add') {
                    ej2_base_1.addClass([dateRangeEle], cls.TEXT_ELLIPSIS);
                }
                else {
                    ej2_base_1.removeClass([dateRangeEle], cls.TEXT_ELLIPSIS);
                }
            }
        };
        HeaderRenderer.prototype.previousNextIconHandler = function () {
            var dates = (this.parent.currentView === 'Agenda' ?
                [this.parent.getCurrentViewDates()[0]] : this.parent.getCurrentViewDates());
            var prevNavEle = this.toolbarObj.element.querySelector('.' + cls.PREVIOUS_DATE_CLASS);
            var nextNavEle = this.toolbarObj.element.querySelector('.' + cls.NEXT_DATE_CLASS);
            var firstDate = new Date(dates[0].getTime());
            var lastDate = new Date(dates[dates.length - 1].getTime());
            if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek') {
                firstDate = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.activeViewOptions.firstDayOfWeek);
                lastDate = util.addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
            }
            else if (this.parent.currentView === 'Month') {
                var isCustomMonth = !ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.displayDate) ||
                    this.parent.activeViewOptions.numberOfWeeks > 0;
                firstDate = isCustomMonth ? this.parent.activeView.getStartDate() : util.firstDateOfMonth(this.parent.selectedDate);
                lastDate = isCustomMonth ? this.parent.activeView.getEndDate() :
                    util.lastDateOfMonth(util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1));
            }
            if (!ej2_base_1.isNullOrUndefined(prevNavEle)) {
                this.toolbarObj.enableItems(prevNavEle, firstDate > util.resetTime(this.parent.minDate));
            }
            if (!ej2_base_1.isNullOrUndefined(nextNavEle)) {
                this.toolbarObj.enableItems(nextNavEle, lastDate < util.resetTime(this.parent.maxDate));
            }
            this.setCalendarMinMaxDate();
        };
        HeaderRenderer.prototype.getModuleName = function () {
            return 'headerbar';
        };
        HeaderRenderer.prototype.destroy = function () {
            if (this.headerPopup && !this.headerPopup.isDestroyed) {
                this.headerPopup.destroy();
                this.headerPopup = null;
            }
            if (this.headerCalendar && !this.headerCalendar.isDestroyed) {
                this.headerCalendar.destroy();
                this.headerCalendar = null;
            }
            if (this.toolbarObj && !this.toolbarObj.isDestroyed) {
                this.toolbarObj.destroy();
                this.removeEventListener();
                ej2_base_1.remove(this.element);
                this.toolbarObj = null;
            }
            this.element = null;
            this.parent = null;
            this.l10n = null;
        };
        return HeaderRenderer;
    }());
    exports.HeaderRenderer = HeaderRenderer;
});