primeng 11.4.4 → 12.0.1

package/fesm2015/primeng-calendar.js

@@ -1,10 +1,15 @@
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import * as i4 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { TranslationKeys, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
+import * as i1 from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const CALENDAR_VALUE_ACCESSOR = {
@@ -1930,10 +1935,166 @@ class Calendar {
         this.onOverlayHide();
     }
 }
-Calendar.decorators = [
-    { type: Component, args: [{
-                selector: 'p-calendar',
-                template: `
+Calendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Calendar, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", numberOfMonths: "numberOfMonths", view: "view", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", firstDayOfWeek: "firstDayOfWeek", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" } }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: `
+        <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">
+            <ng-template [ngIf]="!inline">
+                <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)"
+                    [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
+                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy"
+                    ><button type="button" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
+                    [disabled]="disabled" tabindex="0"></button>
+            </ng-template>
+            <div #contentWrapper [class]="panelStyleClass" [ngStyle]="panelStyle" [ngClass]="{'p-datepicker p-component': true, 'p-datepicker-inline':inline,
+                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}"
+                [@overlayAnimation]="touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:
+                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
+                                            [@.disabled]="inline === true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)" *ngIf="inline || overlayVisible">
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <ng-container *ngIf="!timeOnly">
+                    <div class="p-datepicker-group-container">
+                        <div class="p-datepicker-group" *ngFor="let month of months; let i = index;">
+                            <div class="p-datepicker-header">
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
+                                    <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
+                                </button>
+                                <div class="p-datepicker-title">
+                                    <span class="p-datepicker-month" *ngIf="!monthNavigator && (view !== 'month')">{{getTranslation('monthNames')[month.month]}}</span>
+                                    <select tabindex="0" class="p-datepicker-month" *ngIf="monthNavigator && (view !== 'month') && numberOfMonths === 1" (change)="onMonthDropdownChange($event.target.value)">
+                                        <option [value]="i" *ngFor="let monthName of getTranslation('monthNames');let i = index" [selected]="i === month.month">{{monthName}}</option>
+                                    </select>
+                                    <select tabindex="0" class="p-datepicker-year" *ngIf="yearNavigator && numberOfMonths === 1" (change)="onYearDropdownChange($event.target.value)">
+                                        <option [value]="year" *ngFor="let year of yearOptions" [selected]="year === currentYear">{{year}}</option>
+                                    </select>
+                                    <span class="p-datepicker-year" *ngIf="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                                </div>
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)" type="button" pRipple>
+                                    <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
+                                </button>
+                            </div>
+                            <div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
+                                <table class="p-datepicker-calendar">
+                                    <thead>
+                                        <tr>
+                                            <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
+                                                <span>{{getTranslation('weekHeader')}}</span>
+                                            </th>
+                                            <th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
+                                                <span>{{weekDay}}</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let week of month.dates; let j = index;">
+                                            <td *ngIf="showWeek" class="p-datepicker-weeknumber">
+                                                <span class="p-disabled">
+                                                    {{month.weekNumbers[j]}}
+                                                </span>
+                                            </td>
+                                            <td *ngFor="let date of week" [ngClass]="{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}">
+                                                <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
+                                                    <span [ngClass]="{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}"
+                                                        (click)="onDateSelect($event,date)" draggable="false" (keydown)="onDateCellKeydown($event,date,i)" pRipple>
+                                                        <ng-container *ngIf="!dateTemplate">{{date.day}}</ng-container>
+                                                        <ng-container *ngTemplateOutlet="dateTemplate; context: {$implicit: date}"></ng-container>
+                                                    </span>
+                                                </ng-container>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-monthpicker" *ngIf="view === 'month'">
+                        <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>
+                            {{m}}
+                        </span>
+                    </div>
+                </ng-container>
+                <div class="p-timepicker" *ngIf="showTime||timeOnly">
+                    <div class="p-hour-picker">
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-up"></span>
+                        </button>
+                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-down"></span>
+                        </button>
+                    </div>
+                    <div class="p-separator">
+                        <span>{{timeSeparator}}</span>
+                    </div>
+                    <div class="p-minute-picker">
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-up"></span>
+                        </button>
+                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-down"></span>
+                        </button>
+                    </div>
+                    <div class="p-separator" *ngIf="showSeconds">
+                        <span>{{timeSeparator}}</span>
+                    </div>
+                    <div class="p-second-picker" *ngIf="showSeconds">
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-up"></span>
+                        </button>
+                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                            <span class="pi pi-chevron-down"></span>
+                        </button>
+                    </div>
+                    <div class="p-ampm-picker" *ngIf="hourFormat=='12'">
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                            <span class="pi pi-chevron-up"></span>
+                        </button>
+                        <span>{{pm ? 'PM' : 'AM'}}</span>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                            <span class="pi pi-chevron-down"></span>
+                        </button>
+                    </div>
+                </div>
+                <div class="p-datepicker-buttonbar" *ngIf="showButtonBar">
+                    <button type="button" [label]="getTranslation('today')" (keydown)="onContainerButtonKeydown($event)" (click)="onTodayButtonClick($event)" pButton pRipple [ngClass]="[todayButtonStyleClass]"></button>
+                    <button type="button" [label]="getTranslation('clear')" (keydown)="onContainerButtonKeydown($event)" (click)="onClearButtonClick($event)" pButton pRipple [ngClass]="[clearButtonStyleClass]"></button>
+                </div>
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
+        </span>
+    `, isInline: true, styles: [".p-calendar{position:relative;display:inline-flex}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-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{width:auto;position:absolute}.p-datepicker-inline{position:static}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-next,.p-datepicker-prev{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;margin:0 auto}.p-datepicker td>span,.p-monthpicker-month{justify-content:center;align-items:center;cursor:pointer;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker,.p-timepicker button{display:flex;justify-content:center;align-items:center}.p-timepicker button{cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-calendar .p-datepicker-touch-ui,.p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i4.Ripple, selector: "[pRipple]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+        trigger('overlayAnimation', [
+            state('visibleTouchUI', style({
+                transform: 'translate(-50%,-50%)',
+                opacity: 1
+            })),
+            transition('void => visible', [
+                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))
+            ]),
+            transition('visible => void', [
+                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+            ]),
+            transition('void => visibleTouchUI', [
+                style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
+                animate('{{showTransitionParams}}')
+            ]),
+            transition('visibleTouchUI => void', [
+                animate(('{{hideTransitionParams}}'), style({
+                    opacity: 0,
+                    transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
+                }))
+            ])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: Calendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-calendar',
+                    template: `
         <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">
             <ng-template [ngIf]="!inline">
                 <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)"
@@ -2063,134 +2224,208 @@ Calendar.decorators = [
             </div>
         </span>
     `,
-                animations: [
-                    trigger('overlayAnimation', [
-                        state('visibleTouchUI', style({
-                            transform: 'translate(-50%,-50%)',
-                            opacity: 1
-                        })),
-                        transition('void => visible', [
-                            style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                            animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))
-                        ]),
-                        transition('visible => void', [
-                            animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-                        ]),
-                        transition('void => visibleTouchUI', [
-                            style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
-                            animate('{{showTransitionParams}}')
-                        ]),
-                        transition('visibleTouchUI => void', [
-                            animate(('{{hideTransitionParams}}'), style({
-                                opacity: 0,
-                                transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
-                            }))
+                    animations: [
+                        trigger('overlayAnimation', [
+                            state('visibleTouchUI', style({
+                                transform: 'translate(-50%,-50%)',
+                                opacity: 1
+                            })),
+                            transition('void => visible', [
+                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))
+                            ]),
+                            transition('visible => void', [
+                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+                            ]),
+                            transition('void => visibleTouchUI', [
+                                style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
+                                animate('{{showTransitionParams}}')
+                            ]),
+                            transition('visibleTouchUI => void', [
+                                animate(('{{hideTransitionParams}}'), style({
+                                    opacity: 0,
+                                    transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
+                                }))
+                            ])
                         ])
-                    ])
-                ],
-                host: {
-                    '[class.p-inputwrapper-filled]': 'filled',
-                    '[class.p-inputwrapper-focus]': 'focus'
-                },
-                providers: [CALENDAR_VALUE_ACCESSOR],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: 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{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 = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ChangeDetectorRef },
-    { type: NgZone },
-    { type: PrimeNGConfig }
-];
-Calendar.propDecorators = {
-    style: [{ type: Input }],
-    styleClass: [{ type: Input }],
-    inputStyle: [{ type: Input }],
-    inputId: [{ type: Input }],
-    name: [{ type: Input }],
-    inputStyleClass: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    ariaLabelledBy: [{ type: Input }],
-    disabled: [{ type: Input }],
-    dateFormat: [{ type: Input }],
-    multipleSeparator: [{ type: Input }],
-    rangeSeparator: [{ type: Input }],
-    inline: [{ type: Input }],
-    showOtherMonths: [{ type: Input }],
-    selectOtherMonths: [{ type: Input }],
-    showIcon: [{ type: Input }],
-    icon: [{ type: Input }],
-    appendTo: [{ type: Input }],
-    readonlyInput: [{ type: Input }],
-    shortYearCutoff: [{ type: Input }],
-    monthNavigator: [{ type: Input }],
-    yearNavigator: [{ type: Input }],
-    hourFormat: [{ type: Input }],
-    timeOnly: [{ type: Input }],
-    stepHour: [{ type: Input }],
-    stepMinute: [{ type: Input }],
-    stepSecond: [{ type: Input }],
-    showSeconds: [{ type: Input }],
-    required: [{ type: Input }],
-    showOnFocus: [{ type: Input }],
-    showWeek: [{ type: Input }],
-    dataType: [{ type: Input }],
-    selectionMode: [{ type: Input }],
-    maxDateCount: [{ type: Input }],
-    showButtonBar: [{ type: Input }],
-    todayButtonStyleClass: [{ type: Input }],
-    clearButtonStyleClass: [{ type: Input }],
-    autoZIndex: [{ type: Input }],
-    baseZIndex: [{ type: Input }],
-    panelStyleClass: [{ type: Input }],
-    panelStyle: [{ type: Input }],
-    keepInvalid: [{ type: Input }],
-    hideOnDateTimeSelect: [{ type: Input }],
-    numberOfMonths: [{ type: Input }],
-    view: [{ type: Input }],
-    touchUI: [{ type: Input }],
-    timeSeparator: [{ type: Input }],
-    focusTrap: [{ type: Input }],
-    firstDayOfWeek: [{ type: Input }],
-    showTransitionOptions: [{ type: Input }],
-    hideTransitionOptions: [{ type: Input }],
-    onFocus: [{ type: Output }],
-    onBlur: [{ type: Output }],
-    onClose: [{ type: Output }],
-    onSelect: [{ type: Output }],
-    onInput: [{ type: Output }],
-    onTodayClick: [{ type: Output }],
-    onClearClick: [{ type: Output }],
-    onMonthChange: [{ type: Output }],
-    onYearChange: [{ type: Output }],
-    onClickOutside: [{ type: Output }],
-    onShow: [{ type: Output }],
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
-    tabindex: [{ type: Input }],
-    containerViewChild: [{ type: ViewChild, args: ['container', { static: false },] }],
-    inputfieldViewChild: [{ type: ViewChild, args: ['inputfield', { static: false },] }],
-    content: [{ type: ViewChild, args: ['contentWrapper', { static: false },] }],
-    defaultDate: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    disabledDates: [{ type: Input }],
-    disabledDays: [{ type: Input }],
-    yearRange: [{ type: Input }],
-    showTime: [{ type: Input }],
-    locale: [{ type: Input }]
-};
+                    ],
+                    host: {
+                        '[class.p-inputwrapper-filled]': 'filled',
+                        '[class.p-inputwrapper-focus]': 'focus'
+                    },
+                    providers: [CALENDAR_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['./calendar.css']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.PrimeNGConfig }]; }, propDecorators: { style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], inputStyle: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], inputStyleClass: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], multipleSeparator: [{
+                type: Input
+            }], rangeSeparator: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], showOtherMonths: [{
+                type: Input
+            }], selectOtherMonths: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], readonlyInput: [{
+                type: Input
+            }], shortYearCutoff: [{
+                type: Input
+            }], monthNavigator: [{
+                type: Input
+            }], yearNavigator: [{
+                type: Input
+            }], hourFormat: [{
+                type: Input
+            }], timeOnly: [{
+                type: Input
+            }], stepHour: [{
+                type: Input
+            }], stepMinute: [{
+                type: Input
+            }], stepSecond: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], showOnFocus: [{
+                type: Input
+            }], showWeek: [{
+                type: Input
+            }], dataType: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], maxDateCount: [{
+                type: Input
+            }], showButtonBar: [{
+                type: Input
+            }], todayButtonStyleClass: [{
+                type: Input
+            }], clearButtonStyleClass: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], keepInvalid: [{
+                type: Input
+            }], hideOnDateTimeSelect: [{
+                type: Input
+            }], numberOfMonths: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], touchUI: [{
+                type: Input
+            }], timeSeparator: [{
+                type: Input
+            }], focusTrap: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onInput: [{
+                type: Output
+            }], onTodayClick: [{
+                type: Output
+            }], onClearClick: [{
+                type: Output
+            }], onMonthChange: [{
+                type: Output
+            }], onYearChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }], tabindex: [{
+                type: Input
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container', { static: false }]
+            }], inputfieldViewChild: [{
+                type: ViewChild,
+                args: ['inputfield', { static: false }]
+            }], content: [{
+                type: ViewChild,
+                args: ['contentWrapper', { static: false }]
+            }], defaultDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], disabledDays: [{
+                type: Input
+            }], yearRange: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }] } });
 class CalendarModule {
 }
-CalendarModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ButtonModule, SharedModule, RippleModule],
-                exports: [Calendar, ButtonModule, SharedModule],
-                declarations: [Calendar]
-            },] }
-];
+CalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule], exports: [Calendar, ButtonModule, SharedModule] });
+CalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CalendarModule, imports: [[CommonModule, ButtonModule, SharedModule, RippleModule], ButtonModule, SharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: CalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ButtonModule, SharedModule, RippleModule],
+                    exports: [Calendar, ButtonModule, SharedModule],
+                    declarations: [Calendar]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.