primeng 20.0.0-rc.1 → 20.0.0-rc.3

package/fesm2022/primeng-datepicker.mjs

@@ -15,16 +15,15 @@ import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, Time
 import { InputText } from 'primeng/inputtext';
 import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
-import { css, dt } from '@primeuix/styled';
 import { style } from '@primeuix/styles/datepicker';
 import { BaseStyle } from 'primeng/base';
 
-const theme = css `
+const theme = /*css*/ `
     ${style}
 
     /* For PrimeNG */
     .p-datepicker.ng-invalid.ng-dirty .p-inputtext {
-        border-color: ${dt('inputtext.invalid.border.color')};
+        border-color: dt('inputtext.invalid.border.color');
     }
 `;
 const inlineStyles = {
@@ -51,7 +50,7 @@ const classes = {
         {
             'p-datepicker-panel p-component': true,
             'p-datepicker-panel-inline': instance.inline,
-            'p-disabled': instance.disabled(),
+            'p-disabled': instance.$disabled(),
             'p-datepicker-timeonly': instance.timeOnly
         }
     ],
@@ -89,7 +88,7 @@ const classes = {
         return {
             'p-datepicker-day': true,
             'p-datepicker-day-selected': !instance.isRangeSelection() && instance.isSelected(date) && date.selectable,
-            'p-disabled': instance.disabled() || !date.selectable,
+            'p-disabled': instance.$disabled() || !date.selectable,
             [selectedDayClass]: true
         };
     },
@@ -805,8 +804,6 @@ class DatePicker extends BaseInput {
     responsiveStyleElement;
     overlayVisible;
     $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
-    onModelChange = () => { };
-    onModelTouched = () => { };
     calendarElement;
     timePickerTimer;
     documentClickListener;
@@ -964,7 +961,7 @@ class DatePicker extends BaseInput {
         super.ngAfterViewInit();
         if (this.inline) {
             this.contentViewChild && this.contentViewChild.nativeElement.setAttribute(this.attributeSelector, '');
-            if (!this.disabled() && !this.inline) {
+            if (!this.$disabled() && !this.inline) {
                 this.initFocusableCell();
                 if (this.numberOfMonths === 1) {
                     if (this.contentViewChild && this.contentViewChild.nativeElement) {
@@ -1165,7 +1162,7 @@ class DatePicker extends BaseInput {
         }
     }
     navBackward(event) {
-        if (this.disabled()) {
+        if (this.$disabled()) {
             event.preventDefault();
             return;
         }
@@ -1195,7 +1192,7 @@ class DatePicker extends BaseInput {
         }
     }
     navForward(event) {
-        if (this.disabled()) {
+        if (this.$disabled()) {
             event.preventDefault();
             return;
         }
@@ -1255,7 +1252,7 @@ class DatePicker extends BaseInput {
         event.preventDefault();
     }
     onDateSelect(event, dateMeta) {
-        if (this.disabled() || !dateMeta.selectable) {
+        if (this.$disabled() || !dateMeta.selectable) {
             event.preventDefault();
             return;
         }
@@ -1688,7 +1685,7 @@ class DatePicker extends BaseInput {
         this.onModelTouched();
     }
     onButtonClick(event, inputfield = this.inputfieldViewChild?.nativeElement) {
-        if (this.disabled()) {
+        if (this.$disabled()) {
             return;
         }
         if (!this.overlayVisible) {
@@ -1720,7 +1717,7 @@ class DatePicker extends BaseInput {
         return this.currentView === 'month' ? this.currentYear : month.year;
     }
     switchViewButtonDisabled() {
-        return this.numberOfMonths > 1 || this.disabled();
+        return this.numberOfMonths > 1 || this.$disabled();
     }
     onPrevButtonClick(event) {
         this.navigationState = { backward: true, button: true };
@@ -2221,7 +2218,7 @@ class DatePicker extends BaseInput {
             cell.tabIndex = '0';
             if (!this.preventFocus && (!this.navigationState || !this.navigationState.button)) {
                 setTimeout(() => {
-                    if (!this.disabled()) {
+                    if (!this.$disabled()) {
                         cell.focus();
                     }
                 }, 1);
@@ -2396,19 +2393,19 @@ class DatePicker extends BaseInput {
         }
     }
     onTimePickerElementMouseDown(event, type, direction) {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.repeat(event, null, type, direction);
             event.preventDefault();
         }
     }
     onTimePickerElementMouseUp(event) {
-        if (!this.disabled()) {
+        if (!this.$disabled()) {
             this.clearTimePickerTimer();
             this.updateTime();
         }
     }
     onTimePickerElementMouseLeave() {
-        if (!this.disabled() && this.timePickerTimer) {
+        if (!this.$disabled() && this.timePickerTimer) {
             this.clearTimePickerTimer();
             this.updateTime();
         }
@@ -2802,28 +2799,6 @@ class DatePicker extends BaseInput {
             this.animationEndListener = null;
         }
     }
-    writeValue(value) {
-        this.value = value;
-        if (this.value && typeof this.value === 'string') {
-            try {
-                this.value = this.parseValueFromString(this.value);
-            }
-            catch {
-                if (this.keepInvalid) {
-                    this.value = value;
-                }
-            }
-        }
-        this.updateInputfield();
-        this.updateUI();
-        this.cd.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
-    }
     getDateFormat() {
         return this.dateFormat || this.getTranslation('dateFormat');
     }
@@ -3245,6 +3220,28 @@ class DatePicker extends BaseInput {
         this.unbindScrollListener();
         this.overlay = null;
     }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value) {
+        this.value = value;
+        if (this.value && typeof this.value === 'string') {
+            try {
+                this.value = this.parseValueFromString(this.value);
+            }
+            catch {
+                if (this.keepInvalid) {
+                    this.value = value;
+                }
+            }
+        }
+        this.updateInputfield();
+        this.updateUI();
+        this.cd.markForCheck();
+    }
     ngOnDestroy() {
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -3288,7 +3285,7 @@ class DatePicker extends BaseInput {
                 (blur)="onInputBlur($event)"
                 [attr.required]="required() ? '' : undefined"
                 [attr.readonly]="readonlyInput ? '' : undefined"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 (input)="onUserInput($event)"
                 [ngStyle]="inputStyle"
                 [class]="cn(cx('pcInputText'), inputStyleClass)"
@@ -3301,8 +3298,8 @@ class DatePicker extends BaseInput {
                 [fluid]="hasFluid"
                 [invalid]="invalid()"
             />
-            <ng-container *ngIf="showClear && !disabled() && value != null">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
+            <ng-container *ngIf="showClear && !$disabled() && value != null">
+                <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
                 <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()">
                     <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
                 </span>
@@ -3316,18 +3313,18 @@ class DatePicker extends BaseInput {
                 *ngIf="showIcon && iconDisplay === 'button'"
                 (click)="onButtonClick($event, inputfield)"
                 [class]="cx('dropdown')"
-                [disabled]="disabled()"
+                [disabled]="$disabled()"
                 tabindex="0"
             >
                 <span *ngIf="icon" [ngClass]="icon"></span>
                 <ng-container *ngIf="!icon">
-                    <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
+                    <svg data-p-icon="calendar" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </ng-container>
             </button>
             <ng-container *ngIf="iconDisplay === 'input' && showIcon">
                 <span [class]="cx('inputIconContainer')">
-                    <CalendarIcon (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [styleClass]="cx('inputIcon')" />
+                    <svg data-p-icon="calendar" (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [class]="cx('inputIcon')" />
 
                     <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                 </span>
@@ -3369,11 +3366,11 @@ class DatePicker extends BaseInput {
                                 [ariaLabel]="prevIconAriaLabel"
                             >
                                 <ng-template #icon>
-                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                    <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                    </span>
                                 </ng-template>
-                                <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                    <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                </span>
                             </p-button>
                             <div [class]="cx('title')">
                                 <button
@@ -3416,12 +3413,11 @@ class DatePicker extends BaseInput {
                                 [ariaLabel]="nextIconAriaLabel"
                             >
                                 <ng-template #icon>
-                                    <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                    <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                    <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
+                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                    </ng-container>
                                 </ng-template>
-
-                                <span *ngIf="nextIconTemplate || _nextIconTemplate">
-                                    <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                </span>
                             </p-button>
                         </div>
                         <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'">
@@ -3484,8 +3480,8 @@ class DatePicker extends BaseInput {
                 <div [class]="cx('hourPicker')">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementHour($event)"
@@ -3497,15 +3493,16 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextHour')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementHour($event)"
@@ -3517,9 +3514,10 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevHour')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div class="p-datepicker-separator">
@@ -3528,8 +3526,8 @@ class DatePicker extends BaseInput {
                 <div [class]="cx('minutePicker')">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementMinute($event)"
@@ -3541,15 +3539,16 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextMinute')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementMinute($event)"
@@ -3561,10 +3560,10 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevMinute')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                        <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-container>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div [class]="cx('separator')" *ngIf="showSeconds">
@@ -3573,8 +3572,8 @@ class DatePicker extends BaseInput {
                 <div [class]="cx('secondPicker')" *ngIf="showSeconds">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementSecond($event)"
@@ -3586,15 +3585,16 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextSecond')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementSecond($event)"
@@ -3606,23 +3606,46 @@ class DatePicker extends BaseInput {
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevSecond')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div [class]="cx('separator')" *ngIf="hourFormat == '12'">
                     <span>{{ timeSeparator }}</span>
                 </div>
                 <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'">
-                    <p-button size="small" text rounded [styleClass]="cx('pcIncrementButton')" (keydown)="onContainerButtonKeydown($event)" (onClick)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')">
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    <p-button
+                        text
+                        rounded
+                        severity="secondary"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (onClick)="toggleAMPM($event)"
+                        (keydown.enter)="toggleAMPM($event)"
+                        [attr.aria-label]="getTranslation('am')"
+                    >
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span>{{ pm ? 'PM' : 'AM' }}</span>
-                    <p-button size="small" text rounded [styleClass]="cx('pcDecrementButton')" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')">
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    <p-button
+                        text
+                        rounded
+                        severity="secondary"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (click)="toggleAMPM($event)"
+                        (keydown.enter)="toggleAMPM($event)"
+                        [attr.aria-label]="getTranslation('pm')"
+                    >
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
             </div>
@@ -3653,7 +3676,7 @@ class DatePicker extends BaseInput {
             <ng-content select="p-footer"></ng-content>
             <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CalendarIcon, selector: "CalendarIcon" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "ngmodule", type: SharedModule }], animations: [
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: CalendarIcon, selector: "[data-p-icon=\"calendar\"]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('overlayAnimation', [
                 state('visibleTouchUI', style$1({
                     transform: 'translate(-50%,-50%)',
@@ -3702,7 +3725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 (blur)="onInputBlur($event)"
                 [attr.required]="required() ? '' : undefined"
                 [attr.readonly]="readonlyInput ? '' : undefined"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
                 (input)="onUserInput($event)"
                 [ngStyle]="inputStyle"
                 [class]="cn(cx('pcInputText'), inputStyleClass)"
@@ -3715,8 +3738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 [fluid]="hasFluid"
                 [invalid]="invalid()"
             />
-            <ng-container *ngIf="showClear && !disabled() && value != null">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
+            <ng-container *ngIf="showClear && !$disabled() && value != null">
+                <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
                 <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()">
                     <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
                 </span>
@@ -3730,18 +3753,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 *ngIf="showIcon && iconDisplay === 'button'"
                 (click)="onButtonClick($event, inputfield)"
                 [class]="cx('dropdown')"
-                [disabled]="disabled()"
+                [disabled]="$disabled()"
                 tabindex="0"
             >
                 <span *ngIf="icon" [ngClass]="icon"></span>
                 <ng-container *ngIf="!icon">
-                    <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
+                    <svg data-p-icon="calendar" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </ng-container>
             </button>
             <ng-container *ngIf="iconDisplay === 'input' && showIcon">
                 <span [class]="cx('inputIconContainer')">
-                    <CalendarIcon (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [styleClass]="cx('inputIcon')" />
+                    <svg data-p-icon="calendar" (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [class]="cx('inputIcon')" />
 
                     <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                 </span>
@@ -3783,11 +3806,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 [ariaLabel]="prevIconAriaLabel"
                             >
                                 <ng-template #icon>
-                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                    <svg data-p-icon="chevron-left" *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                    </span>
                                 </ng-template>
-                                <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                    <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                </span>
                             </p-button>
                             <div [class]="cx('title')">
                                 <button
@@ -3830,12 +3853,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 [ariaLabel]="nextIconAriaLabel"
                             >
                                 <ng-template #icon>
-                                    <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                    <svg data-p-icon="chevron-right" *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                    <ng-container *ngIf="nextIconTemplate || _nextIconTemplate">
+                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                    </ng-container>
                                 </ng-template>
-
-                                <span *ngIf="nextIconTemplate || _nextIconTemplate">
-                                    <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                </span>
                             </p-button>
                         </div>
                         <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'">
@@ -3898,8 +3920,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 <div [class]="cx('hourPicker')">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementHour($event)"
@@ -3911,15 +3933,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextHour')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementHour($event)"
@@ -3931,9 +3954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevHour')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div class="p-datepicker-separator">
@@ -3942,8 +3966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 <div [class]="cx('minutePicker')">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementMinute($event)"
@@ -3955,15 +3979,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextMinute')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementMinute($event)"
@@ -3975,10 +4000,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevMinute')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                        <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </ng-container>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div [class]="cx('separator')" *ngIf="showSeconds">
@@ -3987,8 +4012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 <div [class]="cx('secondPicker')" *ngIf="showSeconds">
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcIncrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="incrementSecond($event)"
@@ -4000,15 +4025,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('nextSecond')"
                     >
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
                     <p-button
                         rounded
-                        text
-                        size="small"
+                        variant="text"
+                        severity="secondary"
                         [styleClass]="cx('pcDecrementButton')"
                         (keydown)="onContainerButtonKeydown($event)"
                         (keydown.enter)="decrementSecond($event)"
@@ -4020,23 +4046,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         (mouseleave)="onTimePickerElementMouseLeave()"
                         [attr.aria-label]="getTranslation('prevSecond')"
                     >
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
                 <div [class]="cx('separator')" *ngIf="hourFormat == '12'">
                     <span>{{ timeSeparator }}</span>
                 </div>
                 <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'">
-                    <p-button size="small" text rounded [styleClass]="cx('pcIncrementButton')" (keydown)="onContainerButtonKeydown($event)" (onClick)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')">
-                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    <p-button
+                        text
+                        rounded
+                        severity="secondary"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (onClick)="toggleAMPM($event)"
+                        (keydown.enter)="toggleAMPM($event)"
+                        [attr.aria-label]="getTranslation('am')"
+                    >
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-up" *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                     <span>{{ pm ? 'PM' : 'AM' }}</span>
-                    <p-button size="small" text rounded [styleClass]="cx('pcDecrementButton')" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')">
-                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    <p-button
+                        text
+                        rounded
+                        severity="secondary"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (click)="toggleAMPM($event)"
+                        (keydown.enter)="toggleAMPM($event)"
+                        [attr.aria-label]="getTranslation('pm')"
+                    >
+                        <ng-template #icon>
+                            <svg data-p-icon="chevron-down" *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-template>
                     </p-button>
                 </div>
             </div>