primeng 11.3.1 → 11.4.2

package/bundles/primeng-button.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app/components/button/button.ts"],"names":["ButtonDirective","el","this","iconPos","prototype","ngAfterViewInit","_initialStyleClass","nativeElement","className","DomHandler","addMultipleClasses","getStyleClass","icon","iconElement","document","createElement","setAttribute","iconPosClass","label","addClass","appendChild","labelElement","createTextNode","initialized","styleClass","setStyleClass","Object","defineProperty","_label","val","findSingle","textContent","_icon","ngOnDestroy","Directive","args","selector","ElementRef","Input","Button","type","onClick","EventEmitter","onFocus","onBlur","ngAfterContentInit","_this","templates","forEach","item","getType","contentTemplate","template","badgeStyleClass","p-badge p-component","p-badge-no-gutter","badge","String","length","Component","changeDetection","ChangeDetectionStrategy","OnPush","encapsulation","ViewEncapsulation","None","ContentChildren","PrimeTemplate","Output","NgModule","imports","CommonModule","RippleModule","exports","declarations"],"mappings":"0kBAqBI,SAAAA,EAAmBC,GAAAC,KAAAD,GAAAA,EAVVC,KAAAC,QAA+C,cAYxDH,EAAAI,UAAAC,gBAAA,WAII,GAHAH,KAAKI,mBAAqBJ,KAAKD,GAAGM,cAAcC,UAChDC,EAAAA,WAAWC,mBAAmBR,KAAKD,GAAGM,cAAeL,KAAKS,iBAEtDT,KAAKU,KAAM,CACX,IAAIC,EAAcC,SAASC,cAAc,QACzCF,EAAYL,UAAY,gBACxBK,EAAYG,aAAa,cAAe,QACxC,IAAIC,EAAef,KAAKgB,MAAQ,iBAAmBhB,KAAKC,QAAU,KAC9Dc,GACAR,EAAAA,WAAWU,SAASN,EAAaI,GAErCR,EAAAA,WAAWC,mBAAmBG,EAAaX,KAAKU,MAChDV,KAAKD,GAAGM,cAAca,YAAYP,GAGtC,IAAIQ,EAAeP,SAASC,cAAc,QACtCb,KAAKU,OAASV,KAAKgB,OACnBG,EAAaL,aAAa,cAAe,QAE7CK,EAAab,UAAY,iBACzBa,EAAaD,YAAYN,SAASQ,eAAepB,KAAKgB,OAAO,WAC7DhB,KAAKD,GAAGM,cAAca,YAAYC,GAClCnB,KAAKqB,aAAc,GAGvBvB,EAAAI,UAAAO,cAAA,WACI,IAAIa,EAAa,uBAKjB,OAJItB,KAAKU,OAASV,KAAKgB,QACnBM,GAA0B,uBAGvBA,GAGXxB,EAAAI,UAAAqB,cAAA,WACI,IAAID,EAAatB,KAAKS,gBACtBT,KAAKD,GAAGM,cAAcC,UAAYgB,EAAa,IAAMtB,KAAKI,oBAG9DoB,OAAAC,eAAa3B,EAAAI,UAAA,QAAK,KAAlB,WACI,OAAOF,KAAK0B,YAGhB,SAAUC,GACN3B,KAAK0B,OAASC,EAEV3B,KAAKqB,cACLd,EAAAA,WAAWqB,WAAW5B,KAAKD,GAAGM,cAAe,mBAAmBwB,YAAc7B,KAAK0B,QAAU,SAC7F1B,KAAKuB,kDAIbC,OAAAC,eAAa3B,EAAAI,UAAA,OAAI,KAAjB,WACI,OAAOF,KAAK8B,WAGhB,SAASH,GACL3B,KAAK8B,MAAQH,EAET3B,KAAKqB,cACDrB,KAAKC,QACLM,EAAAA,WAAWqB,WAAW5B,KAAKD,GAAGM,cAAe,kBAAkBC,UAAY,+BAAiCN,KAAKC,QAAU,IAAMD,KAAK8B,MAEtIvB,EAAAA,WAAWqB,WAAW5B,KAAKD,GAAGM,cAAe,kBAAkBC,UAAY,iBAAmBN,KAAK8B,MAEvG9B,KAAKuB,kDAIbzB,EAAAI,UAAA6B,YAAA,WACI/B,KAAKqB,aAAc,4BAxF1BW,EAAAA,UAASC,KAAA,CAAC,CACPC,SAAU,yDAPuBC,EAAAA,+CAWhCC,EAAAA,qBAoDAA,EAAAA,oBAaAA,EAAAA,0BAsBL,SAAAC,IAyBarC,KAAAsC,KAAe,SAEftC,KAAAC,QAAkB,OAoBjBD,KAAAuC,QAA6B,IAAIC,EAAAA,aAEjCxC,KAAAyC,QAA6B,IAAID,EAAAA,aAEjCxC,KAAA0C,OAA4B,IAAIF,EAAAA,oBAE1CH,EAAAnC,UAAAyC,mBAAA,WAAA,IAAAC,EAAA5C,KACIA,KAAK6C,UAAUC,SAAQ,SAACC,GACpB,OAAOA,EAAKC,WACR,IAAK,UAIL,QACIJ,EAAKK,gBAAkBF,EAAKG,cAM5Cb,EAAAnC,UAAAiD,gBAAA,WACI,MAAO,CACHC,uBAAuB,EACvBC,oBAAqBrD,KAAKsD,OAAuC,IAA9BC,OAAOvD,KAAKsD,OAAOE,kCAtEjEC,EAAAA,UAASxB,KAAA,CAAC,CACPC,SAAU,WACVgB,SAAU,0vCAkBVQ,gBAAiBC,EAAAA,wBAAwBC,OACzCC,cAAeC,EAAAA,kBAAkBC,uCAIhC3B,EAAAA,uBAEAA,EAAAA,oBAEAA,EAAAA,qBAEAA,EAAAA,qBAEAA,EAAAA,wBAEAA,EAAAA,qBAEAA,EAAAA,0BAEAA,EAAAA,0BAEAA,EAAAA,yBAIA4B,EAAAA,gBAAe/B,KAAA,CAACgC,EAAAA,gCAEhBC,EAAAA,wBAEAA,EAAAA,uBAEAA,EAAAA,gBA6BL,iCALCC,EAAAA,SAAQlC,KAAA,CAAC,CACNmC,QAAS,CAACC,EAAAA,aAAaC,EAAAA,cACvBC,QAAS,CAACzE,EAAgBuC,GAC1BmC,aAAc,CAAC1E,EAAgBuC","sourcesContent":["import {NgModule,Directive,Component,ElementRef,EventEmitter,AfterViewInit,Output,OnDestroy,Input,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, AfterContentInit, TemplateRef, QueryList} from '@angular/core';\nimport {DomHandler} from 'primeng/dom';\nimport {CommonModule} from '@angular/common';\nimport {RippleModule} from 'primeng/ripple'; \nimport {PrimeTemplate} from 'primeng/api'; \n\n@Directive({\n    selector: '[pButton]'\n})\nexport class ButtonDirective implements AfterViewInit, OnDestroy {\n\n    @Input() iconPos: 'left' | 'right' | 'top' | 'bottom' = 'left';\n            \n    public _label: string;\n    \n    public _icon: string;\n            \n    public initialized: boolean;\n    \n    public _initialStyleClass: string;\n\n    constructor(public el: ElementRef) {}\n    \n    ngAfterViewInit() {\n        this._initialStyleClass = this.el.nativeElement.className;\n        DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());\n\n        if (this.icon) {\n            let iconElement = document.createElement(\"span\");\n            iconElement.className = 'p-button-icon';\n            iconElement.setAttribute(\"aria-hidden\", \"true\");\n            let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;\n            if (iconPosClass) {\n                DomHandler.addClass(iconElement, iconPosClass);\n            }\n            DomHandler.addMultipleClasses(iconElement, this.icon);\n            this.el.nativeElement.appendChild(iconElement);\n        }\n        \n        let labelElement = document.createElement(\"span\");\n        if (this.icon && !this.label) {\n            labelElement.setAttribute('aria-hidden', 'true');\n        }\n        labelElement.className = 'p-button-label';\n        labelElement.appendChild(document.createTextNode(this.label||'&nbsp;'));\n        this.el.nativeElement.appendChild(labelElement);\n        this.initialized = true;\n    }\n        \n    getStyleClass(): string {\n        let styleClass = 'p-button p-component';\n        if (this.icon && !this.label) {\n            styleClass = styleClass + ' p-button-icon-only';\n        }\n        \n        return styleClass;\n    }\n\n    setStyleClass() {\n        let styleClass = this.getStyleClass();\n        this.el.nativeElement.className = styleClass + ' ' + this._initialStyleClass;\n    }\n    \n    @Input() get label(): string {\n        return this._label;\n    }\n\n    set label(val: string) {\n        this._label = val;\n        \n        if (this.initialized) {\n            DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || '&nbsp;';\n            this.setStyleClass();\n        }\n    }\n    \n    @Input() get icon(): string {\n        return this._icon;\n    }\n\n    set icon(val: string) {\n        this._icon = val;\n        \n        if (this.initialized) {\n            if (this.iconPos)\n                DomHandler.findSingle(this.el.nativeElement, '.p-button-icon').className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this._icon;\n            else\n                DomHandler.findSingle(this.el.nativeElement, '.p-button-icon').className = 'p-button-icon ' + this._icon;\n\n            this.setStyleClass();\n        }\n    }\n    \n    ngOnDestroy() {\n        this.initialized = false;\n    }\n}\n\n@Component({\n    selector: 'p-button',\n    template: `\n        <button [attr.type]=\"type\" [class]=\"styleClass\" [ngStyle]=\"style\" [disabled]=\"disabled\"\n            [ngClass]=\"{'p-button p-component':true,\n                        'p-button-icon-only': (icon && !label),\n                        'p-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label}\"\n                        (click)=\"onClick.emit($event)\" (focus)=\"onFocus.emit($event)\" (blur)=\"onBlur.emit($event)\" pRipple>\n            <ng-content></ng-content>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            <span [ngClass]=\"{'p-button-icon': true,\n                        'p-button-icon-left': iconPos === 'left' && label,\n                        'p-button-icon-right': iconPos === 'right' && label,\n                        'p-button-icon-top': iconPos === 'top' && label,\n                        'p-button-icon-bottom': iconPos === 'bottom' && label}\"\n                        [class]=\"icon\" *ngIf=\"icon\" [attr.aria-hidden]=\"true\"></span>\n            <span class=\"p-button-label\" [attr.aria-hidden]=\"icon && !label\">{{label||'&nbsp;'}}</span>\n            <span [ngClass]=\"badgeStyleClass()\" *ngIf=\"badge\" [class]=\"badgeClass\">{{badge}}</span>\n        </button>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class Button implements AfterContentInit {\n\n    @Input() type: string = \"button\";\n\n    @Input() iconPos: string = 'left';\n\n    @Input() icon: string;\n\n    @Input() badge: string;\n\n    @Input() label: string;\n\n    @Input() disabled: boolean;\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() badgeClass: string;\n\n    contentTemplate: TemplateRef<any>;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    @Output() onFocus: EventEmitter<any> = new EventEmitter();\n\n    @Output() onBlur: EventEmitter<any> = new EventEmitter();\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                break;\n                \n                default:\n                    this.contentTemplate = item.template;\n                break;\n            }\n        });\n    }\n\n    badgeStyleClass() {\n        return {\n            'p-badge p-component': true,\n            'p-badge-no-gutter': this.badge && String(this.badge).length === 1\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RippleModule],\n    exports: [ButtonDirective,Button],\n    declarations: [ButtonDirective,Button]\n})\nexport class ButtonModule { }\n"]}
+{"version":3,"sources":["../../src/app/components/button/button.ts"],"names":["ButtonDirective","el","this","iconPos","loadingIcon","_loading","prototype","ngAfterViewInit","_initialStyleClass","nativeElement","className","DomHandler","addMultipleClasses","getStyleClass","icon","createIconEl","labelElement","document","createElement","label","setAttribute","appendChild","createTextNode","innerHTML","initialized","styleClass","loading","setStyleClass","iconElement","iconPosClass","addClass","getIconClass","labelEl","findSingle","insertBefore","_icon","setIconClass","removeIconElement","removeChild","Object","defineProperty","_label","val","textContent","ngOnDestroy","Directive","args","selector","ElementRef","Input","Button","type","onClick","EventEmitter","onFocus","onBlur","ngAfterContentInit","_this","templates","forEach","item","getType","contentTemplate","template","badgeStyleClass","p-badge p-component","p-badge-no-gutter","badge","String","length","Component","changeDetection","ChangeDetectionStrategy","OnPush","encapsulation","ViewEncapsulation","None","ContentChildren","PrimeTemplate","Output","NgModule","imports","CommonModule","RippleModule","exports","declarations"],"mappings":"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","sourcesContent":["import {NgModule,Directive,Component,ElementRef,EventEmitter,AfterViewInit,Output,OnDestroy,Input,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, AfterContentInit, TemplateRef, QueryList} from '@angular/core';\nimport {DomHandler} from 'primeng/dom';\nimport {CommonModule} from '@angular/common';\nimport {RippleModule} from 'primeng/ripple'; \nimport {PrimeTemplate} from 'primeng/api'; \n\n@Directive({\n    selector: '[pButton]'\n})\nexport class ButtonDirective implements AfterViewInit, OnDestroy {\n\n    @Input() iconPos: 'left' | 'right' | 'top' | 'bottom' = 'left';\n            \n    @Input() loadingIcon: string = \"pi pi-spinner pi-spin\";\n\n    public _label: string;\n    \n    public _icon: string;\n\n    public _loading: boolean = false;\n            \n    public initialized: boolean;\n    \n    public _initialStyleClass: string;\n\n    constructor(public el: ElementRef) {}\n    \n    ngAfterViewInit() {\n        this._initialStyleClass = this.el.nativeElement.className;\n        DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());\n\n        if (this.icon) {\n            this.createIconEl();\n        }\n        \n        let labelElement = document.createElement(\"span\");\n        if (this.icon && !this.label) {\n            labelElement.setAttribute('aria-hidden', 'true');\n        }\n        labelElement.className = 'p-button-label';\n\n        if (this.label)\n            labelElement.appendChild(document.createTextNode(this.label));\n        else \n            labelElement.innerHTML = '&nbsp;';\n        \n        this.el.nativeElement.appendChild(labelElement);\n        this.initialized = true;\n    }\n        \n    getStyleClass(): string {\n        let styleClass = 'p-button p-component';\n        if (this.icon && !this.label) {\n            styleClass = styleClass + ' p-button-icon-only';\n        }\n\n        if (this.loading) {\n            styleClass = styleClass + ' p-disabled p-button-loading';\n            if (!this.icon && this.label)\n                styleClass = styleClass + ' p-button-loading-label-only';\n        }\n        \n        return styleClass;\n    }\n\n    setStyleClass() {\n        let styleClass = this.getStyleClass();\n        this.el.nativeElement.className = styleClass + ' ' + this._initialStyleClass;\n    }\n\n    createIconEl() {\n        let iconElement = document.createElement(\"span\");\n        iconElement.className = 'p-button-icon';\n        iconElement.setAttribute(\"aria-hidden\", \"true\");\n        let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;\n        \n        if (iconPosClass) {\n            DomHandler.addClass(iconElement, iconPosClass);\n        }\n\n        DomHandler.addMultipleClasses(iconElement, this.getIconClass());\n        let labelEl = DomHandler.findSingle(this.el.nativeElement, '.p-button-label')\n\n        if (labelEl)\n            this.el.nativeElement.insertBefore(iconElement, labelEl);\n        else\n            this.el.nativeElement.appendChild(iconElement)\n    }\n\n    getIconClass() {\n        return this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this._icon;\n    }\n\n    setIconClass() {\n        let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');\n        if (iconElement) {\n            if (this.iconPos) \n                iconElement.className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this.getIconClass();\n            else \n                iconElement.className = 'p-button-icon ' + this.getIconClass();\n        }\n        else {\n            this.createIconEl();\n        }\n    }\n\n    removeIconElement() {\n        let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');\n        this.el.nativeElement.removeChild(iconElement)\n    }\n    \n    @Input() get label(): string {\n        return this._label;\n    }\n\n    set label(val: string) {\n        this._label = val;\n        \n        if (this.initialized) {\n            DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || '&nbsp;';\n            this.setStyleClass();\n        }\n    }\n    \n    @Input() get icon(): string {\n        return this._icon;\n    }\n\n    set icon(val: string) {\n        this._icon = val;\n        \n        if (this.initialized) {\n            this.setIconClass();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() get loading(): boolean {\n        return this._loading;\n    }\n\n    set loading(val: boolean) {\n        this._loading = val;\n        \n        if (this.initialized) {\n            if (this.loading || this.icon)\n                this.setIconClass();\n            else \n                this.removeIconElement();\n            \n            this.setStyleClass();\n        }\n    }\n    \n    ngOnDestroy() {\n        this.initialized = false;\n    }\n}\n\n@Component({\n    selector: 'p-button',\n    template: `\n        <button [attr.type]=\"type\" [class]=\"styleClass\" [ngStyle]=\"style\" [disabled]=\"disabled || loading\"\n            [ngClass]=\"{'p-button p-component':true,\n                        'p-button-icon-only': (icon && !label),\n                        'p-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label,\n                        'p-disabled': this.disabled || this.loading,\n                        'p-button-loading': this.loading,\n                        'p-button-loading-label-only': this.loading && !this.icon && this.label}\"\n                        (click)=\"onClick.emit($event)\" (focus)=\"onFocus.emit($event)\" (blur)=\"onBlur.emit($event)\" pRipple>\n            <ng-content></ng-content>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            <span [ngClass]=\"{'p-button-icon': true,\n                        'p-button-icon-left': iconPos === 'left' && label,\n                        'p-button-icon-right': iconPos === 'right' && label,\n                        'p-button-icon-top': iconPos === 'top' && label,\n                        'p-button-icon-bottom': iconPos === 'bottom' && label}\"\n                        [class]=\"loading ? 'p-button-loading-icon ' + loadingIcon : icon\" *ngIf=\"!contentTemplate && (icon||loading)\" [attr.aria-hidden]=\"true\"></span>\n            <span class=\"p-button-label\" [attr.aria-hidden]=\"icon && !label\" *ngIf=\"!contentTemplate\">{{label||'&nbsp;'}}</span>\n            <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"!contentTemplate && badge\">{{badge}}</span>\n        </button>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class Button implements AfterContentInit {\n\n    @Input() type: string = \"button\";\n\n    @Input() iconPos: string = 'left';\n\n    @Input() icon: string;\n\n    @Input() badge: string;\n\n    @Input() label: string;\n\n    @Input() disabled: boolean;\n\n    @Input() loading: boolean = false;\n\n    @Input() loadingIcon: string = \"pi pi-spinner pi-spin\";\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() badgeClass: string;\n\n    contentTemplate: TemplateRef<any>;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    @Output() onFocus: EventEmitter<any> = new EventEmitter();\n\n    @Output() onBlur: EventEmitter<any> = new EventEmitter();\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                break;\n                \n                default:\n                    this.contentTemplate = item.template;\n                break;\n            }\n        });\n    }\n\n    badgeStyleClass() {\n        return {\n            'p-badge p-component': true,\n            'p-badge-no-gutter': this.badge && String(this.badge).length === 1\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RippleModule],\n    exports: [ButtonDirective,Button],\n    declarations: [ButtonDirective,Button]\n})\nexport class ButtonModule { }\n"]}

package/bundles/primeng-calendar.umd.js

@@ -299,18 +299,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var CALENDAR_VALUE_ACCESSOR = {
@@ -510,6 +513,7 @@
             configurable: true
         });
         Calendar.prototype.ngOnInit = function () {
+            var _this = this;
             var date = this.defaultDate || new Date();
             this.currentMonth = date.getMonth();
             this.currentYear = date.getFullYear();
@@ -522,6 +526,9 @@
             else if (this.view === 'month') {
                 this.createMonthPickerValues();
             }
+            this.translationSubscription = this.config.translationObserver.subscribe(function () {
+                _this.createWeekDays();
+            });
             this.initialized = true;
         };
         Calendar.prototype.ngAfterContentInit = function () {
@@ -1544,7 +1551,7 @@
                 this.updateTime();
             }
         };
-        Calendar.prototype.onTimePickerElementMouseOut = function (event) {
+        Calendar.prototype.onTimePickerElementMouseLeave = function () {
             if (!this.disabled && this.timePickerTimer) {
                 this.clearTimePickerTimer();
                 this.updateTime();
@@ -1583,6 +1590,7 @@
         Calendar.prototype.clearTimePickerTimer = function () {
             if (this.timePickerTimer) {
                 clearTimeout(this.timePickerTimer);
+                this.timePickerTimer = null;
             }
         };
         Calendar.prototype.decrementHour = function (event) {
@@ -2304,6 +2312,9 @@
                 this.scrollHandler.destroy();
                 this.scrollHandler = null;
             }
+            if (this.translationSubscription) {
+                this.translationSubscription.unsubscribe();
+            }
             this.clearTimePickerTimer();
             this.restoreOverlayAppend();
             this.onOverlayHide();
@@ -2313,7 +2324,7 @@
     Calendar.decorators = [
         { type: core.Component, args: [{
                     selector: 'p-calendar',
-                    template: "\n        <span #container [ngClass]=\"{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-focus': focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [attr.aria-required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick()\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\" autocomplete=\"off\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"p-datepicker-trigger\"\n                    [disabled]=\"disabled\" tabindex=\"0\"></button>\n            </ng-template>\n            <div #contentWrapper [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'p-datepicker p-component': true, 'p-datepicker-inline':inline,\n                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:\n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index;\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-prev-icon pi pi-chevron-left\"></span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <span class=\"p-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{getTranslation('monthNames')[month.month]}}</span>\n                                    <select tabindex=\"0\" class=\"p-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                        <option [value]=\"i\" *ngFor=\"let monthName of getTranslation('monthNames');let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                    </select>\n                                    <select tabindex=\"0\" class=\"p-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                        <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                    </select>\n                                    <span class=\"p-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                                </div>\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-next p-link\" (click)=\"onNextButtonClick($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-next-icon pi pi-chevron-right\"></span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{getTranslation('weekHeader')}}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of getTranslation('dayNamesMin');let begin = first; let end = last\">\n                                                <span>{{weekDay}}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index;\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{month.weekNumbers[j]}}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span [ngClass]=\"{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}\"\n                                                        (click)=\"onDateSelect($event,date)\" draggable=\"false\" (keydown)=\"onDateCellKeydown($event,date,i)\" pRipple>\n                                                        <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"view === 'month'\">\n                        <span *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event,i)\" class=\"p-monthpicker-month\" [ngClass]=\"{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}\" pRipple>\n                            {{m}}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"p-hour-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{currentHour}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{currentMinute}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{currentSecond}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseout)=\"onTimePickerElementMouseOut($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    ",
+                    template: "\n        <span #container [ngClass]=\"{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [attr.aria-required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick()\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\" autocomplete=\"off\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"p-datepicker-trigger\"\n                    [disabled]=\"disabled\" tabindex=\"0\"></button>\n            </ng-template>\n            <div #contentWrapper [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'p-datepicker p-component': true, 'p-datepicker-inline':inline,\n                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:\n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index;\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-prev-icon pi pi-chevron-left\"></span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <span class=\"p-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{getTranslation('monthNames')[month.month]}}</span>\n                                    <select tabindex=\"0\" class=\"p-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                        <option [value]=\"i\" *ngFor=\"let monthName of getTranslation('monthNames');let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                    </select>\n                                    <select tabindex=\"0\" class=\"p-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                        <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                    </select>\n                                    <span class=\"p-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                                </div>\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-next p-link\" (click)=\"onNextButtonClick($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-next-icon pi pi-chevron-right\"></span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{getTranslation('weekHeader')}}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                                <span>{{weekDay}}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index;\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{month.weekNumbers[j]}}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span [ngClass]=\"{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}\"\n                                                        (click)=\"onDateSelect($event,date)\" draggable=\"false\" (keydown)=\"onDateCellKeydown($event,date,i)\" pRipple>\n                                                        <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"view === 'month'\">\n                        <span *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event,i)\" class=\"p-monthpicker-month\" [ngClass]=\"{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}\" pRipple>\n                            {{m}}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"p-hour-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{currentHour}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{currentMinute}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{currentSecond}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    ",
                     animations: [
                         animations.trigger('overlayAnimation', [
                             animations.state('visibleTouchUI', animations.style({
@@ -2346,7 +2357,7 @@
                     providers: [CALENDAR_VALUE_ACCESSOR],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".p-calendar{display:inline-flex;position:relative}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-bottom-right-radius:0;border-top-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-bottom-left-radius:0;border-top-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{position:absolute;width:auto}.p-datepicker-inline{display:inline-flex;position:static}.p-datepicker-header{align-items:center;display:flex;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-next,.p-datepicker-prev{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{border-collapse:collapse;width:100%}.p-datepicker td>span{display:flex;margin:0 auto}.p-datepicker td>span,.p-monthpicker-month{align-items:center;cursor:pointer;justify-content:center;overflow:hidden;position:relative}.p-monthpicker-month{display:inline-flex;width:33.3%}.p-datepicker-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-timepicker,.p-timepicker button{align-items:center;display:flex;justify-content:center}.p-timepicker button{cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{align-items:center;display:flex;flex-direction:column}.p-calendar .p-datepicker-touch-ui,.p-datepicker-touch-ui{left:50%;min-width:80vw;position:fixed;top:50%;transform:translate(-50%,-50%)}"]
+                    styles: [".p-calendar{display:inline-flex;position:relative}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-bottom-right-radius:0;border-top-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-bottom-left-radius:0;border-top-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{position:absolute;width:auto}.p-datepicker-inline{position:static}.p-datepicker-header{align-items:center;display:flex;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-next,.p-datepicker-prev{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{border-collapse:collapse;width:100%}.p-datepicker td>span{display:flex;margin:0 auto}.p-datepicker td>span,.p-monthpicker-month{align-items:center;cursor:pointer;justify-content:center;overflow:hidden;position:relative}.p-monthpicker-month{display:inline-flex;width:33.3%}.p-datepicker-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-timepicker,.p-timepicker button{align-items:center;display:flex;justify-content:center}.p-timepicker button{cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{align-items:center;display:flex;flex-direction:column}.p-calendar .p-datepicker-touch-ui,.p-datepicker-touch-ui{left:50%;min-width:80vw;position:fixed;top:50%;transform:translate(-50%,-50%)}"]
                 },] }
     ];
     Calendar.ctorParameters = function () { return [