primeng 22.1.2 → 22.1.3

package/fesm2022/primeng-datepicker.mjs

@@ -8,7 +8,7 @@ import { ChevronLeft } from "@primeicons/angular/chevron-left";
 import { ChevronRight } from "@primeicons/angular/chevron-right";
 import { ChevronUp } from "@primeicons/angular/chevron-up";
 import { Times } from "@primeicons/angular/times";
-import { absolutePosition, addClass, addStyle, appendChild, find, findSingle, getFocusableElements, getIndex, getOuterWidth, hasClass, isDate, isNotEmpty, isTouchDevice, relativePosition, setAttribute, uuid } from "@primeuix/utils";
+import { absolutePosition, addClass, addStyle, appendChild, find, findSingle, getFocusableElements, getIndex, getOuterWidth, hasClass, isDate, isNotEmpty, isTouchDevice, relativePosition, setAttribute } from "@primeuix/utils";
 import { OverlayService, SharedModule, TranslationKeys } from "primeng/api";
 import { AutoFocus } from "primeng/autofocus";
 import { PARENT_INSTANCE } from "primeng/basecomponent";
@@ -16,7 +16,7 @@ import { BaseInput } from "primeng/baseinput";
 import * as i1 from "primeng/bind";
 import { Bind, BindModule } from "primeng/bind";
 import { ButtonDirective } from "primeng/button";
-import { ConnectedOverlayScrollHandler, blockBodyScroll, unblockBodyScroll } from "primeng/dom";
+import { ConnectedOverlayScrollHandler, getEventTarget, getShadowRoot } from "primeng/dom";
 import { InputText } from "primeng/inputtext";
 import * as i2 from "primeng/motion";
 import { MotionModule } from "primeng/motion";
@@ -109,7 +109,7 @@ var DatePickerStyle = class DatePickerStyle extends BaseStyle {
 	inlineStyles = inlineStyles;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePickerStyle,
 		deps: null,
@@ -117,14 +117,14 @@ var DatePickerStyle = class DatePickerStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePickerStyle
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: DatePickerStyle,
 	decorators: [{ type: Injectable }]
@@ -543,10 +543,10 @@ var DatePicker = class DatePicker extends BaseInput {
 		};
 	}
 	dayClass(date) {
-		return this._componentStyle.classes.day({
+		return this.pcn(this._componentStyle.classes.day({
 			instance: this,
 			date
-		});
+		}));
 	}
 	getPrevButtonStyle(index) {
 		return { visibility: index === 0 ? "visible" : "hidden" };
@@ -555,7 +555,7 @@ var DatePicker = class DatePicker extends BaseInput {
 		return { visibility: index === this.months().length - 1 ? "visible" : "hidden" };
 	}
 	onInit() {
-		this.attributeSelector = uuid("pn_id_");
+		this.attributeSelector = this.$useId.next("pn_id_");
 		this.panelId = this.attributeSelector + "_panel";
 		const date = this.defaultDate() || /* @__PURE__ */ new Date();
 		this.createResponsiveStyle();
@@ -1187,14 +1187,14 @@ var DatePicker = class DatePicker extends BaseInput {
 	focusAdjacentRowDayCell(cell, backward, groupIndex) {
 		const targetRow = backward ? cell.parentElement.previousElementSibling : cell.parentElement.nextElementSibling;
 		const targetCell = targetRow ? backward ? this.getLastDayCellOfRow(targetRow) : this.getFirstDayCellOfRow(targetRow) : null;
-		if (targetCell && !hasClass(targetCell, "p-disabled")) {
+		if (targetCell && !hasClass(targetCell, this.pcn("p-disabled"))) {
 			targetCell.tabIndex = "0";
 			targetCell.focus();
 		} else this.navigateToMonth(backward, groupIndex);
 	}
 	getFirstDayCellOfRow(row) {
 		const cells = row.children;
-		for (let i = 0; i < cells.length; i++) if (!hasClass(cells[i], "p-datepicker-weeknumber")) return cells[i].children[0];
+		for (let i = 0; i < cells.length; i++) if (!hasClass(cells[i], this.pcn("p-datepicker-weeknumber"))) return cells[i].children[0];
 		return null;
 	}
 	getLastDayCellOfRow(row) {
@@ -1222,7 +1222,7 @@ var DatePicker = class DatePicker extends BaseInput {
 			case 9:
 				if (!this.inline()) this.trapFocus(event);
 				if (this.inline()) {
-					const headerElements = findSingle(this.el?.nativeElement, ".p-datepicker-header");
+					const headerElements = findSingle(this.el?.nativeElement, this.psel(".p-datepicker-header"));
 					const element = event.target;
 					if (this.timeOnly()) return;
 					else if (element == headerElements?.children[(headerElements?.children?.length ?? 0) - 1]) this.initFocusableCell();
@@ -1264,7 +1264,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				let nextRow = cell.parentElement.nextElementSibling;
 				if (nextRow) {
 					let focusCell = nextRow.children[cellIndex].children[0];
-					if (hasClass(focusCell, "p-disabled")) {
+					if (hasClass(focusCell, this.pcn("p-disabled"))) {
 						this.navigationState = { backward: false };
 						this.navForward(event);
 					} else {
@@ -1284,7 +1284,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				let prevRow = cell.parentElement.previousElementSibling;
 				if (prevRow) {
 					let focusCell = prevRow.children[cellIndex].children[0];
-					if (hasClass(focusCell, "p-disabled")) {
+					if (hasClass(focusCell, this.pcn("p-disabled"))) {
 						this.navigationState = { backward: true };
 						this.navBackward(event);
 					} else {
@@ -1301,9 +1301,9 @@ var DatePicker = class DatePicker extends BaseInput {
 			case 37: {
 				cellContent.tabIndex = "-1";
 				let prevCell = cell.previousElementSibling;
-				if (prevCell && !hasClass(prevCell, "p-datepicker-weeknumber")) {
+				if (prevCell && !hasClass(prevCell, this.pcn("p-datepicker-weeknumber"))) {
 					let focusCell = prevCell.children[0];
-					if (hasClass(focusCell, "p-disabled")) this.navigateToMonth(true, groupIndex);
+					if (hasClass(focusCell, this.pcn("p-disabled"))) this.navigateToMonth(true, groupIndex);
 					else {
 						focusCell.tabIndex = "0";
 						focusCell.focus();
@@ -1317,7 +1317,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				let nextCell = cell.nextElementSibling;
 				if (nextCell) {
 					let focusCell = nextCell.children[0];
-					if (hasClass(focusCell, "p-disabled")) this.navigateToMonth(false, groupIndex);
+					if (hasClass(focusCell, this.pcn("p-disabled"))) this.navigateToMonth(false, groupIndex);
 					else {
 						focusCell.tabIndex = "0";
 						focusCell.focus();
@@ -1343,7 +1343,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				cellContent.tabIndex = "-1";
 				const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 				const focusKey = this.formatDateKey(dateToFocus);
-				this.navigateToMonth(true, groupIndex, `span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`);
+				this.navigateToMonth(true, groupIndex, this.psel(`span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`));
 				event.preventDefault();
 				break;
 			}
@@ -1351,7 +1351,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				cellContent.tabIndex = "-1";
 				const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
 				const focusKey = this.formatDateKey(dateToFocus);
-				this.navigateToMonth(false, groupIndex, `span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`);
+				this.navigateToMonth(false, groupIndex, this.psel(`span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`));
 				event.preventDefault();
 				break;
 			}
@@ -1359,7 +1359,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				cellContent.tabIndex = "-1";
 				const firstDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
 				const firstDayDateKey = this.formatDateKey(firstDayDate);
-				const firstDayCell = findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`);
+				const firstDayCell = findSingle(cellContent.offsetParent, this.psel(`span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`));
 				if (firstDayCell) {
 					firstDayCell.tabIndex = "0";
 					firstDayCell.focus();
@@ -1371,7 +1371,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				cellContent.tabIndex = "-1";
 				const lastDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
 				const lastDayDateKey = this.formatDateKey(lastDayDate);
-				const lastDayCell = findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`);
+				const lastDayCell = findSingle(cellContent.offsetParent, this.psel(`span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`));
 				if (lastDayDate) {
 					lastDayCell.tabIndex = "0";
 					lastDayCell.focus();
@@ -1504,7 +1504,7 @@ var DatePicker = class DatePicker extends BaseInput {
 					firstDayCell.tabIndex = "0";
 					firstDayCell.focus();
 				} else {
-					let cells = find(prevMonthContainer, ".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)");
+					let cells = find(prevMonthContainer, this.psel(".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)"));
 					let focusCell = cells[cells.length - 1];
 					focusCell.tabIndex = "0";
 					focusCell.focus();
@@ -1521,7 +1521,7 @@ var DatePicker = class DatePicker extends BaseInput {
 				firstDayCell.tabIndex = "0";
 				firstDayCell.focus();
 			} else {
-				let focusCell = findSingle(nextMonthContainer, ".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)");
+				let focusCell = findSingle(nextMonthContainer, this.psel(".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)"));
 				focusCell.tabIndex = "0";
 				focusCell.focus();
 			}
@@ -1532,18 +1532,18 @@ var DatePicker = class DatePicker extends BaseInput {
 		if (this.navigationState) {
 			if (this.navigationState.button) {
 				this.initFocusableCell();
-				if (this.navigationState.backward) findSingle(this.contentViewChild().nativeElement, ".p-datepicker-prev-button").focus();
-				else findSingle(this.contentViewChild().nativeElement, ".p-datepicker-next-button").focus();
+				if (this.navigationState.backward) findSingle(this.contentViewChild().nativeElement, this.psel(".p-datepicker-prev-button")).focus();
+				else findSingle(this.contentViewChild().nativeElement, this.psel(".p-datepicker-next-button")).focus();
 			} else {
 				if (this.navigationState.backward) {
 					let cells;
-					if (this.currentView() === "month") cells = find(this.contentViewChild().nativeElement, ".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)");
-					else if (this.currentView() === "year") cells = find(this.contentViewChild().nativeElement, ".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)");
-					else cells = find(this.contentViewChild().nativeElement, this._focusKey || ".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)");
+					if (this.currentView() === "month") cells = find(this.contentViewChild().nativeElement, this.psel(".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)"));
+					else if (this.currentView() === "year") cells = find(this.contentViewChild().nativeElement, this.psel(".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)"));
+					else cells = find(this.contentViewChild().nativeElement, this._focusKey || this.psel(".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)"));
 					if (cells && cells.length > 0) cell = cells[cells.length - 1];
-				} else if (this.currentView() === "month") cell = findSingle(this.contentViewChild().nativeElement, ".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)");
-				else if (this.currentView() === "year") cell = findSingle(this.contentViewChild().nativeElement, ".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)");
-				else cell = findSingle(this.contentViewChild().nativeElement, this._focusKey || ".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)");
+				} else if (this.currentView() === "month") cell = findSingle(this.contentViewChild().nativeElement, this.psel(".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)"));
+				else if (this.currentView() === "year") cell = findSingle(this.contentViewChild().nativeElement, this.psel(".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)"));
+				else cell = findSingle(this.contentViewChild().nativeElement, this._focusKey || this.psel(".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)"));
 				if (cell) {
 					cell.tabIndex = "0";
 					cell.focus();
@@ -1557,23 +1557,23 @@ var DatePicker = class DatePicker extends BaseInput {
 		const contentEl = this.contentViewChild()?.nativeElement;
 		let cell;
 		if (this.currentView() === "month") {
-			let cells = find(contentEl, ".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)");
-			let selectedCell = findSingle(contentEl, ".p-datepicker-month-view .p-datepicker-month.p-highlight");
+			let cells = find(contentEl, this.psel(".p-datepicker-month-view .p-datepicker-month:not(.p-disabled)"));
+			let selectedCell = findSingle(contentEl, this.psel(".p-datepicker-month-view .p-datepicker-month.p-highlight"));
 			cells.forEach((cell) => cell.tabIndex = -1);
 			cell = selectedCell || cells[0];
-			if (cells.length === 0) find(contentEl, ".p-datepicker-month-view .p-datepicker-month.p-disabled[tabindex = \"0\"]").forEach((cell) => cell.tabIndex = -1);
+			if (cells.length === 0) find(contentEl, this.psel(".p-datepicker-month-view .p-datepicker-month.p-disabled[tabindex = \"0\"]")).forEach((cell) => cell.tabIndex = -1);
 		} else if (this.currentView() === "year") {
-			let cells = find(contentEl, ".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)");
-			let selectedCell = findSingle(contentEl, ".p-datepicker-year-view .p-datepicker-year.p-highlight");
+			let cells = find(contentEl, this.psel(".p-datepicker-year-view .p-datepicker-year:not(.p-disabled)"));
+			let selectedCell = findSingle(contentEl, this.psel(".p-datepicker-year-view .p-datepicker-year.p-highlight"));
 			cells.forEach((cell) => cell.tabIndex = -1);
 			cell = selectedCell || cells[0];
-			if (cells.length === 0) find(contentEl, ".p-datepicker-year-view .p-datepicker-year.p-disabled[tabindex = \"0\"]").forEach((cell) => cell.tabIndex = -1);
+			if (cells.length === 0) find(contentEl, this.psel(".p-datepicker-year-view .p-datepicker-year.p-disabled[tabindex = \"0\"]")).forEach((cell) => cell.tabIndex = -1);
 		} else {
-			cell = findSingle(contentEl, "span.p-highlight");
+			cell = findSingle(contentEl, this.psel("span.p-highlight"));
 			if (!cell) {
-				let todayCell = findSingle(contentEl, "td.p-datepicker-today span:not(.p-disabled):not(.p-ink)");
+				let todayCell = findSingle(contentEl, this.psel("td.p-datepicker-today span:not(.p-disabled):not(.p-ink)"));
 				if (todayCell) cell = todayCell;
-				else cell = findSingle(contentEl, ".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)");
+				else cell = findSingle(contentEl, this.psel(".p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)"));
 			}
 		}
 		if (cell) {
@@ -1685,6 +1685,10 @@ var DatePicker = class DatePicker extends BaseInput {
 		return returnTimeTriple;
 	}
 	incrementHour(event) {
+		if (this.minDate() || this.maxDate()) {
+			this.stepHourWithinBounds(this.stepHour(), event);
+			return;
+		}
 		const prevHour = this.currentHour() ?? 0;
 		let newHour = (this.currentHour() ?? 0) + this.stepHour();
 		let newPM = this.pm();
@@ -1751,23 +1755,16 @@ var DatePicker = class DatePicker extends BaseInput {
 		}
 	}
 	decrementHour(event) {
-		const cur24 = this.convertTo24Hour(this.currentHour() ?? 0, this.pm());
-		let value = this.value;
-		if (this.isRangeSelection()) value = this.value?.[1] || this.value?.[0];
-		else if (this.isMultipleSelection()) value = this.value?.[this.value.length - 1];
-		const dayString = value ? value.toDateString() : null;
-		const onMinDay = this.minDate() && dayString && this.minDate().toDateString() === dayString;
-		const onMaxDay = this.maxDate() && dayString && this.maxDate().toDateString() === dayString;
-		const minHour = onMinDay ? this.minDate().getHours() : 0;
-		const maxHour = onMaxDay ? this.maxDate().getHours() : 23;
-		let next24 = cur24 - this.stepHour();
-		if (next24 < minHour) next24 = maxHour;
-		let newHour = next24;
+		if (this.minDate() || this.maxDate()) {
+			this.stepHourWithinBounds(-this.stepHour(), event);
+			return;
+		}
+		let newHour = (this.currentHour() ?? 0) - this.stepHour();
 		let newPM = this.pm();
-		if (this.hourFormat() == "12") {
-			newPM = next24 >= 12;
-			newHour = next24 % 12;
-			if (newHour === 0) newHour = 12;
+		if (this.hourFormat() == "24") newHour = newHour < 0 ? 24 + newHour : newHour;
+		else if (this.hourFormat() == "12") {
+			if (this.currentHour() === 12) newPM = !this.pm();
+			newHour = newHour <= 0 ? 12 + newHour : newHour;
 		}
 		this.toggleAMPMIfNotMinDate(newPM);
 		const [hour, minute, second] = this.constrainTime(newHour, this.currentMinute(), this.currentSecond(), newPM);
@@ -1776,6 +1773,24 @@ var DatePicker = class DatePicker extends BaseInput {
 		this.currentSecond.set(second);
 		event.preventDefault();
 	}
+	stepHourWithinBounds(step, event) {
+		let value = this.value;
+		if (this.isRangeSelection()) value = this.value?.[1] || this.value?.[0];
+		else if (this.isMultipleSelection()) value = this.value?.[this.value.length - 1];
+		const next = value ? new Date(value.getTime()) : /* @__PURE__ */ new Date();
+		const minDate = this.minDate();
+		const maxDate = this.maxDate();
+		next.setHours(Math.min(23, Math.max(0, this.convertTo24Hour(this.currentHour() ?? 0, !!this.pm()) + step)), this.currentMinute() ?? 0, this.currentSecond() ?? 0, 0);
+		if (minDate && minDate.toDateString() === next.toDateString() && next < minDate) next.setHours(minDate.getHours(), minDate.getMinutes(), minDate.getSeconds(), 0);
+		if (maxDate && maxDate.toDateString() === next.toDateString() && next > maxDate) next.setHours(maxDate.getHours(), maxDate.getMinutes(), maxDate.getSeconds(), 0);
+		if (this.hourFormat() == "12") {
+			this.pm.set(next.getHours() >= 12);
+			this.currentHour.set(next.getHours() % 12 || 12);
+		} else this.currentHour.set(next.getHours());
+		this.currentMinute.set(next.getMinutes());
+		this.currentSecond.set(next.getSeconds());
+		event.preventDefault();
+	}
 	incrementMinute(event) {
 		let newMinute = (this.currentMinute() ?? 0) + this.stepMinute();
 		newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
@@ -1945,7 +1960,7 @@ var DatePicker = class DatePicker extends BaseInput {
 	}
 	onOverlayBeforeEnter(event) {
 		this.overlay = event.element;
-		if (this.$attrSelector) this.overlay.setAttribute(this.$attrSelector, "");
+		if (this.$attrSelector) this.$markInstance(this.overlay);
 		const styles = !this.inline() ? {
 			position: "absolute",
 			top: "0",
@@ -1969,8 +1984,8 @@ var DatePicker = class DatePicker extends BaseInput {
 	}
 	appendOverlay() {
 		if (isPlatformBrowser(this.platformId) && this.$appendTo() && this.$appendTo() !== "self") {
-			if (this.$appendTo() === "body") this.document.body.appendChild(this.overlay);
-			else appendChild(this.$appendTo(), this.overlay);
+			if (this.$appendTo() === "body") this.$overlayParent(this.document.body, this.overlay).appendChild(this.overlay);
+			else appendChild(this.$overlayParent(this.$appendTo(), this.overlay), this.overlay);
 		}
 	}
 	restoreOverlayAppend() {
@@ -1998,18 +2013,19 @@ var DatePicker = class DatePicker extends BaseInput {
 		if (!this.mask && this.touchUI()) {
 			this.mask = this.renderer.createElement("div");
 			this.renderer.setStyle(this.mask, "zIndex", String(parseInt(element.style.zIndex) - 1));
-			addClass(this.mask, "p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter-active");
+			let maskStyleClass = this.pcn("p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter-active");
+			addClass(this.mask, maskStyleClass);
 			this.maskClickListener = this.renderer.listen(this.mask, "click", () => {
 				this.disableModality();
 				this.overlayVisible.set(false);
 			});
-			this.renderer.appendChild(this.document.body, this.mask);
-			blockBodyScroll();
+			this.renderer.appendChild(this.$overlayParent(this.document.body, this.mask), this.mask);
+			this.$blockBodyScroll();
 		}
 	}
 	disableModality() {
 		if (this.mask) {
-			addClass(this.mask, "p-overlay-mask-leave");
+			addClass(this.mask, this.pcn("p-overlay-mask-leave"));
 			if (!this.animationEndListener) this.animationEndListener = this.renderer.listen(this.mask, "animationend", this.destroyMask.bind(this));
 		}
 	}
@@ -2020,12 +2036,12 @@ var DatePicker = class DatePicker extends BaseInput {
 		let hasBlockerMasks;
 		for (let i = 0; i < bodyChildren.length; i++) {
 			let bodyChild = bodyChildren[i];
-			if (hasClass(bodyChild, "p-datepicker-mask-scrollblocker")) {
+			if (hasClass(bodyChild, this.pcn("p-datepicker-mask-scrollblocker"))) {
 				hasBlockerMasks = true;
 				break;
 			}
 		}
-		if (!hasBlockerMasks) unblockBodyScroll();
+		if (!hasBlockerMasks) this.$unblockBodyScroll();
 		this.unbindAnimationEndListener();
 		this.unbindMaskClickListener();
 		this.mask = null;
@@ -2265,11 +2281,12 @@ var DatePicker = class DatePicker extends BaseInput {
 	}
 	createResponsiveStyle() {
 		if (isPlatformBrowser(this.platformId) && this.numberOfMonths() > 1 && this.responsiveOptions()) {
-			if (!this.responsiveStyleElement) {
+			if (!this.responsiveStyleElement && !this.$styleScope.isolated) {
 				this.responsiveStyleElement = this.renderer.createElement("style");
 				this.responsiveStyleElement.type = "text/css";
 				setAttribute(this.responsiveStyleElement, "nonce", this.config?.csp()?.nonce);
-				this.renderer.appendChild(this.document.body, this.responsiveStyleElement);
+				const appendTo = this.$appendTo();
+				this.renderer.appendChild(getShadowRoot(this.inline() || !appendTo || appendTo === "self" ? this.el.nativeElement : appendTo) ?? this.document.body, this.responsiveStyleElement);
 			}
 			let innerHTML = "";
 			if (this.responsiveOptions()) {
@@ -2293,11 +2310,16 @@ var DatePicker = class DatePicker extends BaseInput {
                     `;
 				}
 			}
-			this.responsiveStyleElement.innerHTML = innerHTML;
+			if (this.$styleScope.isolated) {
+				this.$isolatedStyle("responsive", this.psel(innerHTML));
+				return;
+			}
+			this.responsiveStyleElement.innerHTML = this.psel(innerHTML);
 			setAttribute(this.responsiveStyleElement, "nonce", this.config?.csp()?.nonce);
 		}
 	}
 	destroyResponsiveStyleElement() {
+		if (this.$styleScope.isolated) this.$isolatedStyle("responsive", null);
 		if (this.responsiveStyleElement) {
 			this.responsiveStyleElement.remove();
 			this.responsiveStyleElement = null;
@@ -2339,10 +2361,12 @@ var DatePicker = class DatePicker extends BaseInput {
 		if (this.scrollHandler) this.scrollHandler.unbindScrollListener();
 	}
 	isOutsideClicked(event) {
-		return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || this.overlay && this.overlay.contains(event.target));
+		const node = getEventTarget(event, this.el.nativeElement);
+		return !(this.el.nativeElement.isSameNode(node) || this.isNavIconClicked(event) || this.el.nativeElement.contains(node) || this.overlay && this.overlay.contains(getEventTarget(event, this.overlay)));
 	}
 	isNavIconClicked(event) {
-		return hasClass(event.target, "p-datepicker-prev-button") || hasClass(event.target, "p-datepicker-prev-icon") || hasClass(event.target, "p-datepicker-next-button") || hasClass(event.target, "p-datepicker-next-icon");
+		const node = getEventTarget(event, this.overlay ?? this.el.nativeElement);
+		return hasClass(node, this.pcn("p-datepicker-prev-button")) || hasClass(node, this.pcn("p-datepicker-prev-icon")) || hasClass(node, this.pcn("p-datepicker-next-button")) || hasClass(node, this.pcn("p-datepicker-next-icon"));
 	}
 	onWindowResize() {
 		if (this.overlayVisible() && !isTouchDevice()) this.hideOverlay();
@@ -2379,7 +2403,7 @@ var DatePicker = class DatePicker extends BaseInput {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePicker,
 		deps: [],
@@ -2387,7 +2411,7 @@ var DatePicker = class DatePicker extends BaseInput {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: DatePicker,
 		isStandalone: true,
 		selector: "p-datepicker, p-date-picker",
@@ -3012,7 +3036,7 @@ var DatePicker = class DatePicker extends BaseInput {
                 (click)="onOverlayClick($event)"
                 [pBind]="ptm('panel')"
                 [pMotion]="isOverlayVisible()"
-                [pMotionName]="'p-anchored-overlay'"
+                [pMotionName]="pcn('p-anchored-overlay')"
                 [pMotionAppear]="!inline()"
                 [pMotionOptions]="computedMotionOptions()"
                 (pMotionOnBeforeEnter)="onOverlayBeforeEnter($event)"
@@ -3161,7 +3185,7 @@ var DatePicker = class DatePicker extends BaseInput {
                                                                     }
                                                                 </span>
                                                                 @if (isSelected(date)) {
-                                                                    <div class="p-hidden-accessible" aria-live="polite">
+                                                                    <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                                                         {{ date.day }}
                                                                     </div>
                                                                 }
@@ -3182,7 +3206,7 @@ var DatePicker = class DatePicker extends BaseInput {
                                 <span (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
                                     {{ m }}
                                     @if (isMonthSelected(i)) {
-                                        <div class="p-hidden-accessible" aria-live="polite">
+                                        <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                             {{ m }}
                                         </div>
                                     }
@@ -3196,7 +3220,7 @@ var DatePicker = class DatePicker extends BaseInput {
                                 <span (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
                                     {{ y }}
                                     @if (isYearSelected(y)) {
-                                        <div class="p-hidden-accessible" aria-live="polite">
+                                        <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                             {{ y }}
                                         </div>
                                     }
@@ -3260,7 +3284,7 @@ var DatePicker = class DatePicker extends BaseInput {
                                 <ng-template *ngTemplateOutlet="decrementIconTemplate()"></ng-template>
                             </button>
                         </div>
-                        <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
+                        <div [class]="pcn('p-datepicker-separator')" [pBind]="ptm('separatorContainer')">
                             <span [pBind]="ptm('separator')">{{ timeSeparator() }}</span>
                         </div>
                         <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
@@ -3618,7 +3642,7 @@ var DatePicker = class DatePicker extends BaseInput {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: DatePicker,
 	decorators: [{
@@ -3737,7 +3761,7 @@ i0.ɵɵngDeclareClassMetadata({
                 (click)="onOverlayClick($event)"
                 [pBind]="ptm('panel')"
                 [pMotion]="isOverlayVisible()"
-                [pMotionName]="'p-anchored-overlay'"
+                [pMotionName]="pcn('p-anchored-overlay')"
                 [pMotionAppear]="!inline()"
                 [pMotionOptions]="computedMotionOptions()"
                 (pMotionOnBeforeEnter)="onOverlayBeforeEnter($event)"
@@ -3886,7 +3910,7 @@ i0.ɵɵngDeclareClassMetadata({
                                                                     }
                                                                 </span>
                                                                 @if (isSelected(date)) {
-                                                                    <div class="p-hidden-accessible" aria-live="polite">
+                                                                    <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                                                         {{ date.day }}
                                                                     </div>
                                                                 }
@@ -3907,7 +3931,7 @@ i0.ɵɵngDeclareClassMetadata({
                                 <span (click)="onMonthSelect($event, i)" (keydown)="onMonthCellKeydown($event, i)" [class]="cx('month', { month: m, index: i })" pRipple [pBind]="ptm('month')">
                                     {{ m }}
                                     @if (isMonthSelected(i)) {
-                                        <div class="p-hidden-accessible" aria-live="polite">
+                                        <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                             {{ m }}
                                         </div>
                                     }
@@ -3921,7 +3945,7 @@ i0.ɵɵngDeclareClassMetadata({
                                 <span (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple [pBind]="ptm('year')">
                                     {{ y }}
                                     @if (isYearSelected(y)) {
-                                        <div class="p-hidden-accessible" aria-live="polite">
+                                        <div [class]="pcn('p-hidden-accessible')" aria-live="polite">
                                             {{ y }}
                                         </div>
                                     }
@@ -3985,7 +4009,7 @@ i0.ɵɵngDeclareClassMetadata({
                                 <ng-template *ngTemplateOutlet="decrementIconTemplate()"></ng-template>
                             </button>
                         </div>
-                        <div class="p-datepicker-separator" [pBind]="ptm('separatorContainer')">
+                        <div [class]="pcn('p-datepicker-separator')" [pBind]="ptm('separatorContainer')">
                             <span [pBind]="ptm('separator')">{{ timeSeparator() }}</span>
                         </div>
                         <div [class]="cx('minutePicker')" [pBind]="ptm('minutePicker')">
@@ -4824,7 +4848,7 @@ i0.ɵɵngDeclareClassMetadata({
 var DatePickerModule = class DatePickerModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePickerModule,
 		deps: [],
@@ -4832,7 +4856,7 @@ var DatePickerModule = class DatePickerModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePickerModule,
 		imports: [DatePicker, SharedModule],
@@ -4840,7 +4864,7 @@ var DatePickerModule = class DatePickerModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: DatePickerModule,
 		imports: [
@@ -4852,7 +4876,7 @@ var DatePickerModule = class DatePickerModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: DatePickerModule,
 	decorators: [{
@@ -4865,4 +4889,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { DATEPICKER_VALUE_ACCESSOR, DatePicker, DatePickerClasses, DatePickerModule, DatePickerStyle };
 
-//# sourceMappingURL=primeng-datepicker.mjs.map