inviton-powerduck 0.0.179 → 0.0.181

package/common/dialog-utils.ts

@@ -2,6 +2,7 @@ import { Modal as BootstrapModal } from 'bootstrap';
 import { globalState } from '../app/global-state';
 import PowerduckState from '../app/powerduck-state';
 import { ButtonLayout } from '../components/button/button-layout';
+import { ModalUtils } from '../components/modal/modal-utils';
 import { DialogIcons } from './enums/dialog-icons';
 import { isNullOrEmpty } from './utils/is-null-or-empty';
 import { PortalUtils } from './utils/utils';
@@ -54,6 +55,7 @@ export interface AppDialogButton {
 export interface AppDialogArgs {
 	title: string;
 	message: string;
+	mobileMode?: 'default' | 'bottom-sheet' | 'fullscreen';
 	icon?: DialogIcons;
 	autoHide?: boolean;
 	boxColor?: string;
@@ -123,10 +125,11 @@ class DialogBuilder {
 		this.builder
 			+= `<div id="${this.id}" key="${this.id
 			}" tabindex="-1" role="dialog" aria-labelledby="${this.labelId
-			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade${args.cssClass ? ` ${args.cssClass}` : ''
+			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade modal-bottom-sheet${args.cssClass ? ` ${args.cssClass}` : ''
 			}">`;
 		this.builder += `  <div role="document" class="modal-dialog${args.size != null ? ` ${args.size}` : ''}">`;
 		this.builder += '    <div class="modal-content">';
+		this.builder += '      <div class="drag-handle text-center"><div class="handle-bar"></div></div>';
 
 		this.builder += this._getHeader();
 		this.builder += this._getBody();
@@ -240,6 +243,11 @@ export class DialogUtils {
 				}, 50);
 			});
 
+		if (args.mobileMode == null || args.mobileMode == 'bottom-sheet') {
+			const modal = document.getElementById(builder.id);
+			ModalUtils.bindModalBottomSheetHandle(() => modal, () => ModalUtils.hideModal(modalContext));
+		}
+
 		const ensureIconAnimation = function (
 			selector: string,
 			icon: DialogIcons,

package/components/_common/css/modal-mobile-control.css

@@ -0,0 +1,3 @@
+.pd-modal-mobile-input .modal-content {
+	padding-bottom: 0;
+}

package/components/input/daterange-picker.tsx

@@ -5,6 +5,7 @@ import { Prop, toNative } from 'vue-facing-decorator';
 import { globalState } from '../../app/global-state';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
+import { DialogUtils } from '../../common/dialog-utils';
 import { utcEpochMilliseconds } from '../../common/extensions/temporal-extensions';
 import DateUtils from '../../common/utils/date-utils';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
@@ -13,6 +14,7 @@ import { PortalUtils } from '../../common/utils/utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import DateInputHelper from './ts/dateInputHelper';
 import './plugins/daterangepicker/jquery.daterangepicker';
+import './../_common/css/modal-mobile-control.css';
 import './css/daterange-picker.css';
 
 export interface DaterangePickerArgsCustomCellRenderArgs {
@@ -31,6 +33,8 @@ export interface DaterangePickerArgsCustomCellRenderDay {
 	valid: boolean;
 }
 
+type CalendarPlacement = 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
+
 interface DaterangePickerArgs extends FormItemWrapperArgs {
 	disabled?: boolean;
 	value?: DaterangeChangedArgs;
@@ -48,7 +52,7 @@ interface DaterangePickerArgs extends FormItemWrapperArgs {
 	nextIcon?: string;
 	hideYearInMonthName?: boolean;
 	singleMonth?: boolean;
-	calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
+	calendarPlacement?: CalendarPlacement;
 	ensureMonthContinuity?: boolean;
 	monthSelect?: boolean;
 	yearSelect?: boolean;
@@ -107,7 +111,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	@Prop() prependIconClicked: () => void;
 	@Prop() appendIconClicked: () => void;
 	@Prop() marginType?: MarginType;
-	@Prop() calendarPlacement?: 'body' | 'inline' | 'input-container-leftalign' | 'input-container-rightalign';
+	@Prop() calendarPlacement?: CalendarPlacement;
 	@Prop() changed: (newValue: DaterangeChangedArgs) => void;
 	@Prop() format?: string;
 	@Prop() showClearValueButton!: boolean;
@@ -155,6 +159,10 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	}
 
 	beforeUnmount() {
+		this.tryDestroyPickerInstance();
+	}
+
+	tryDestroyPickerInstance() {
 		try {
 			this.getInputElement().data('dateRangePicker').destroy();
 		} catch (error) { }
@@ -165,13 +173,71 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			return;
 		}
 
-		const self = this;
 		const $elem = this.getInputElement();
+		if (!this.useModalMode()) {
+			this.bindDateRangePicker(
+				$elem,
+				this.calendarPlacement,
+				this.singleMonth,
+				this.alwaysOpen,
+				() => this.raiseChangedEvent(),
+				(this.calendarPlacement == null || this.calendarPlacement == 'body') ? 'body' : $elem.parent(),
+			);
+		} else {
+			this.getInputElement().parent().on('click', async () => {
+				const uuid = `drp-modal-${PortalUtils.randomString(6)}`;
+				const handle = await DialogUtils.showDialogEx({
+					title: this.label || '',
+					cssClass: 'daterangepicker-modal pd-modal-mobile-input',
+					message: `<div><div id="${uuid}"></div></div>`,
+					buttons: [],
+					onHidden: () => {
+						this.tryDestroyPickerInstance();
+					},
+				});
+
+				const $modalRoot = $(document.getElementById(uuid));
+				this.bindDateRangePicker(
+					$elem,
+					'inline',
+					true,
+					true,
+					() => {
+						this.raiseChangedEvent();
+						handle.hideModal();
+					},
+					$modalRoot,
+				);
+			});
+		}
+	}
+
+	beforeUpdate() {
+		if (!globalState.windowExists) {
+			return;
+		}
+
+		this.handleModelValueChange();
+	}
+
+	useModalMode(): boolean {
+		return PortalUtils.treatAsMobileDevice();
+	}
+
+	bindDateRangePicker(
+		$elem: JQuery<HTMLElement>,
+		calendarPlacement: CalendarPlacement,
+		singleMonth: boolean,
+		alwaysOpen: boolean,
+		raiseChangedEvent: () => void,
+		container: JQuery<HTMLElement> | string,
+	) {
+		const self = this;
 		const now = Temporal.Now.plainDateTimeISO();
 
 		($elem as any).dateRangePicker({
-			singleMonth: this.singleMonth == true,
-			alwaysOpen: this.alwaysOpen == true,
+			singleMonth: singleMonth == true,
+			alwaysOpen: alwaysOpen == true,
 			singleDate: this.singleDate == true,
 			startOfWeek: DateInputHelper.getStartOfWeek() == 0 ? 'sunday' : 'monday',
 			separator: self.getSeparator(),
@@ -185,13 +251,9 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			yearSelect: this.yearSelect != false,
 			getCellHtml: this.getCellHtml,
 			maxDaysTooltip: this.maxDaysTooltip,
-			calendarPlacement: this.calendarPlacement,
-			container: (this.calendarPlacement == null || this.calendarPlacement == 'body') ? 'body' : $elem.parent(),
+			calendarPlacement,
+			container,
 			displayMode: () => {
-				if (PortalUtils.treatAsMobileDevice() && this.alwaysOpen != true) {
-					return 'modal';
-				}
-
 				return 'below-input';
 			},
 			leftOffset: () => {
@@ -244,8 +306,8 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			self._endDate = obj.date2 || obj.date1;
 			self._changed = true;
 
-			if (this.alwaysOpen) {
-				self.raiseChangedEvent();
+			if (alwaysOpen) {
+				raiseChangedEvent();
 			}
 		}).bind('datepicker-closed', () => {
 			const val = $elem.val() as string;
@@ -262,18 +324,10 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			}
 
 			self._opened = false;
-			self.raiseChangedEvent();
+			raiseChangedEvent();
 		});
 	}
 
-	beforeUpdate() {
-		if (!globalState.windowExists) {
-			return;
-		}
-
-		this.handleModelValueChange();
-	}
-
 	handleModelValueChange() {
 		if (this.value?.endTime && this.value?.startTime) {
 			if (this.enableTime) {
@@ -525,9 +579,6 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	render(h) {
 		return (
 			<FormItemWrapper label={this.label} cssClass={this.getCssClass()} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle}>
-				{this.shouldAddModalClick()
-				&& <div class="pd-daterange-picker-modalclick" onClick={(e) => { this.handleModalOpenClick(e); }}></div>}
-
 				<div style="position: relative; display: flex; align-items: center; flex-grow:1">
 					{' '}
 					{/* Added a wrapper for input and clear button */}

package/components/input/plugins/daterangepicker/daterangepicker.css

@@ -91,6 +91,10 @@
 	pointer-events: none;
 }
 
+.date-range-picker-root.inline-wrapper.drpc-inline {
+	position: static;
+}
+
 .date-range-picker-root.inline-wrapper.drpc-input-container-leftalign,
 .date-range-picker-root.inline-wrapper.drpc-input-container-rightalign {
 	top: 100%;
@@ -165,7 +169,7 @@
 	height: 20px;
 }
 
-.date-range-picker-wrapper .month-wrapper > table {
+.date-range-picker-wrapper .month-wrapper>table {
 	padding-top: 15px;
 }
 
@@ -264,15 +268,6 @@
 	background-color: rgb(112, 204, 213);
 }
 
-.date-range-picker-wrapper table .caption {
-	height: 40px;
-	color: #393562;
-	height: 36px;
-	font-size: 18px;
-	font-weight: 500;
-	font-family: sans-serif;
-}
-
 .date-range-picker-wrapper table .caption .next,
 .date-range-picker-wrapper table .caption .prev {
 	padding: 0 5px;
@@ -562,7 +557,7 @@
 	border-right: 0.667px solid #dfe3f1;
 }
 
-.date-range-picker-wrapper .month-wrapper table td > div {
+.date-range-picker-wrapper .month-wrapper table td>div {
 	background-color: inherit !important;
 	line-height: 1.9;
 	margin-left: 5px;
@@ -619,9 +614,83 @@
 	background-color: #b94c4c;
 }
 
+.date-range-picker-root .select-wrapper-selected-month {
+	display: none;
+}
+
 .drp-date-switch.month-name {
 	border: 0;
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 }
+
+
+.date-range-picker-wrapper table .caption,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span.select-wrapper,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span.select-wrapper select {
+	height: 40px;
+	color: #393562;
+	height: 36px;
+	font-size: 18px;
+	font-weight: 400;
+	font-family: sans-serif;
+	background: white;
+}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline {
+	border: 0;
+	background: transparent;
+	box-shadow: none;
+}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper {
+	padding-left: 0;
+	padding-right: 0;
+	border: 0;
+	width: 100% !important;
+	padding: 0;
+	vertical-align: top;
+}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common {}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table {
+	width: 100%;
+}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th {
+	width: 99999px;
+	text-align: center;
+	font-weight: 400;
+}
+
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td>div,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>div,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table td>span,
+.daterangepicker-modal .date-range-picker-root.inline-wrapper.drpc-inline .month-wrapper .month-wrapper-inner-common table th>span {
+	margin: 0;
+	margin: auto;
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.daterangepicker-modal .date-range-picker-root .select-wrapper {
+	position: relative;
+}
+
+
+.daterangepicker-modal .date-range-picker-root .select-wrapper-selected-month {
+	display: inline-block;
+}
+
+.daterangepicker-modal .date-range-picker-root select {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: auto !important;
+	opacity: 0.001;
+}

package/components/input/plugins/daterangepicker/jquery.daterangepicker.ts

@@ -260,6 +260,16 @@ import { globalState } from '../../../../app/global-state';
 		},
 	};
 
+	const MS_PER_DAY = 86_400_000;
+
+	// 1970 01 01 bol štvrtok. Pre weekday v rozsahu 0..6 kde 0 nedeľa:
+	const weekdayFromEpochDay = (epochDay: number) => (epochDay + 4) % 7; // 0 št 1 pia 2 so 3 ne 4 po 5 ut 6 st
+	// ak chceš 0 nedeľa:
+	const weekdaySun0 = (epochDay: number) => (epochDay + 4 + 3) % 7; // posun na nedeľu
+
+	const toEpochDayUTC = (msUTC: number) => Math.floor(msUTC / MS_PER_DAY);
+	const fromEpochDayUTC = (epochDay: number) => epochDay * MS_PER_DAY;
+
 	const dateNow = () => Temporal.Now.plainDateTimeISO();
 	const ensureTemporal = (date: Temporal.PlainDateTime | number | string): Temporal.PlainDateTime => {
 		if (date == null) {
@@ -441,7 +451,21 @@ import { globalState } from '../../../../app/global-state';
 			opt = {} as any
 		}
 
+		const getStartMs = () => {
+			if (opt.start) {
+				return opt.start[utcEpochMilliseconds]();
+			}
 
+			return 0;
+		}
+
+		const getEndMs = () => {
+			if (opt.end) {
+				return opt.end[utcEpochMilliseconds]();
+			}
+
+			return 0;
+		}
 
 		opt = $.extend(
 			true,
@@ -509,7 +533,7 @@ import { globalState } from '../../../../app/global-state';
 				customArrowNextSymbol: null,
 				monthSelect: false,
 				yearSelect: false,
-				enableSwipeDebug: false, // Enable mouse dragging to simulate touch swipe (for debugging)
+				enableSwipeDebug: location.href.includes('localhost'), // Enable mouse dragging to simulate touch swipe (for debugging)
 			},
 			opt,
 		);
@@ -533,9 +557,9 @@ import { globalState } from '../../../../app/global-state';
 			singleMonth = ($(window).width() < 480) as any;
 		}
 
-        if (($(window).width() < 480)) {
-            singleMonth = true;
-        }
+		if (($(window).width() < 480)) {
+			singleMonth = true;
+		}
 
 		if (singleMonth) {
 			opt.stickyMonths = false;
@@ -579,22 +603,6 @@ import { globalState } from '../../../../app/global-state';
 			open(0);
 		}
 
-		const getStartMs = () => {
-			if (opt.start) {
-				return opt.start[utcEpochMilliseconds]();
-			}
-
-			return 0;
-		}
-
-		const getEndMs = () => {
-			if (opt.end) {
-				return opt.end[utcEpochMilliseconds]();
-			}
-
-			return 0;
-		}
-
 		// expose some api
 		$(this).data('dateRangePicker', {
 			setStart(d1) {
@@ -658,7 +666,7 @@ import { globalState } from '../../../../app/global-state';
 		return this;
 
 		function isModalDisplayMode() {
-			return (box != null && box.hasClass('date-range-picker-modalmode')) || $(window).width() <= 992;
+			return (box != null && box.hasClass('date-range-picker-modalmode'))
 		}
 
 		function IsOwnDatePickerClicked(evt, selfObj) {
@@ -1303,12 +1311,7 @@ import { globalState } from '../../../../app/global-state';
 
 			const winWidth = $(window).width();
 			const timeEnabled = opt.time.enabled == true;
-
-			if (winWidth <= 992 && opt.alwaysOpen != true) {
-				setModalDisplayMode();
-			} else {
-				setDisplayMode();
-			}
+			setDisplayMode();
 
 			if ($(window).height() < 550 && winWidth < DaterangePickerConfig.calendarsOneColThreshold && !timeEnabled) {
 				singleMonth = true;
@@ -1818,6 +1821,76 @@ import { globalState } from '../../../../app/global-state';
 			return true;
 		}
 
+		function isValidTimeDate(date: Date) {
+			// --- lokálne inliny bez sub-metód ---
+			// prevod PlainDate na epochDay (UTC) bez časovej zóny
+			const epochDay = (y, m, d) => Math.floor(Date.UTC(y, m - 1, d) / MS_PER_DAY);
+
+			// pomocné vyčítanie čísla dňa z Temporal.PlainDateTime-like objektu
+			const d_epoch = epochDay(date.getFullYear(), date.getMonth() + 1, date.getDate());
+
+			// hranice
+			const hasStartDate = !!opt.startDate;
+			const hasEndDate = !!opt.endDate;
+			const startDate_epoch = hasStartDate ? epochDay(opt.startDate.year, opt.startDate.month, opt.startDate.day) : 0;
+			const endDate_epoch = hasEndDate ? epochDay(opt.endDate.year, opt.endDate.month, opt.endDate.day) : 0;
+
+			// 1) mimo absolútnych hraníc
+			if (hasStartDate && d_epoch < startDate_epoch) return false;
+			if (hasEndDate && d_epoch > endDate_epoch) return false;
+
+			// Ak ešte nie je zvolený koniec a nie je singleDate, platia ďalšie pravidlá
+			if (opt.start && !opt.end && !opt.singleDate) {
+				const s = opt.start;
+				const s_epoch = epochDay(s.year, s.month, s.day);
+
+				// 2) minDays / maxDays (počítané ako rozdiel v celých dňoch)
+				if (opt.maxDays > 0) {
+					const diff = Math.abs(d_epoch - s_epoch);
+					if (diff > opt.maxDays) return false;
+				}
+				if (opt.minDays > 0) {
+					const diff = Math.abs(d_epoch - s_epoch);
+					if (diff < opt.minDays) return false;
+				}
+
+				// 3) forward / backward
+				if (opt.selectForward && d_epoch < s_epoch) return false;
+				if (opt.selectBackward && d_epoch > s_epoch) return false;
+
+				// 4) disabled days cez beforeShowDay medzi start a date
+				//    Prechádzame smerom k start po 1 dni, ale bez volania ak je to zbytočné.
+				if (opt.beforeShowDay && typeof opt.beforeShowDay === 'function') {
+					// krok +1 alebo -1 podľa smeru
+					const step = d_epoch === s_epoch ? 0 : (d_epoch > s_epoch ? -1 : +1);
+					if (step !== 0) {
+						let cur = d_epoch;
+						// pôvodná logika mala while (countDays(...) > 1):
+						// tu to čítaj ako "kým je medzi nimi aspoň 2-dňová vzdialenosť"
+						while (Math.abs(cur - s_epoch) > 1) {
+							cur += step;
+
+							// z cur vyrobíme PlainDateTime len vtedy keď ho naozaj voláme
+							// inferuj rok-mesiac-deň cez dočasný Date, bez extra helperov
+							const ms = cur * MS_PER_DAY;
+							const tmp = new Date(ms);
+							const y = tmp.getUTCFullYear();
+							const m = tmp.getUTCMonth() + 1;
+							const d = tmp.getUTCDate();
+
+							// PlainDateTime s nulovým časom pre kompatibilitu s existujúcim hookom
+							const pdt = Temporal.PlainDateTime.from({ year: y, month: m, day: d, hour: 0, minute: 0, second: 0, millisecond: 0 });
+
+							const arr: any = opt.beforeShowDay(pdt);
+							if (arr && arr[0] === false) return false;
+						}
+					}
+				}
+			}
+
+			return true;
+		}
+
 		function updateSelectableRange() {
 			box.find('.day.invalid.tmp').removeClass('tmp invalid').addClass('valid');
 			if (opt.start && !opt.end) {
@@ -2137,54 +2210,69 @@ import { globalState } from '../../../../app/global-state';
 		}
 
 		function showSelectedDays() {
-			if (!opt.start && !opt.end) { return; }
-
-			box.find('.day').each(function (this: any) {
-				let time = parseInt($(this).attr('time'));
-				let start = opt.start;
-				let end = opt.end;
-				if (opt.time.enabled) {
-					time = startOfDay(time)[utcEpochMilliseconds]();
-					start = startOfDay(start);
-					end = startOfDay(end);
-				}
-
-				if (
-					(opt.start && opt.end && end[utcEpochMilliseconds]() >= time && start[utcEpochMilliseconds]() <= time)
-					|| (opt.start && !opt.end && DateUtils.formatDate(start, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd'))
-				) {
-					$(this).addClass('checked');
+			const tz = 'UTC';
+			const toStartOfDayMs = (dt: Temporal.PlainDateTime) =>
+				dt.with({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+					.toZonedDateTime(tz).epochMilliseconds;
+
+			const toEndOfDayMs = (dt: Temporal.PlainDateTime) =>
+				dt.with({ hour: 23, minute: 59, second: 59, millisecond: 999 })
+					.toZonedDateTime(tz).epochMilliseconds;
+
+			const hasStart = !!opt.start;
+			const hasEnd = !!opt.end;
+			const startDayStartMs = hasStart ? toStartOfDayMs(opt.start) : NaN;
+			const startDayEndMs = hasStart ? toEndOfDayMs(opt.start) : NaN;
+			const endDayStartMs = hasEnd ? toStartOfDayMs(opt.end) : NaN;
+			const endDayEndMs = hasEnd ? toEndOfDayMs(opt.end) : NaN;
+
+			const rangeStartMs = hasStart ? startDayStartMs : NaN;
+			const rangeEndMs = hasEnd ? endDayEndMs : startDayEndMs; // ak nie je end, berie sa len deň start
+
+			const $days = box.find('.day');
+			for (let i = 0; i < $days.length; i++) {
+				const el = $days[i];
+				const timeAttr = (el as HTMLElement).getAttribute('time');
+				if (!timeAttr) continue;
+
+				const timeMs = Number(timeAttr); // očakáva sa epoch ms
+
+				const isInRange =
+					hasStart && hasEnd
+						? (timeMs >= rangeStartMs && timeMs <= rangeEndMs)
+						: hasStart
+							? (timeMs >= startDayStartMs && timeMs <= startDayEndMs)
+							: false;
+
+				const isStartDay = hasStart && timeMs >= startDayStartMs && timeMs <= startDayEndMs;
+				const isEndDay = hasEnd && timeMs >= endDayStartMs && timeMs <= endDayEndMs;
+
+				const $el = $(el);
+				$el.toggleClass('checked', isInRange || isStartDay || isEndDay);
+				$el.toggleClass('first-date-selected', isStartDay);
+				$el.toggleClass('last-date-selected', isEndDay);
+			}
+
+			// ——— výpočet pre .week-number ———
+			const startWeekNum = Number(opt.startWeek);
+			const $weeks = box.find('.week-number');
+			for (let i = 0; i < $weeks.length; i++) {
+				const el = $weeks[i];
+				const w = Number((el as HTMLElement).getAttribute('data-start-time'));
+				if (w === startWeekNum) {
+					$(el).addClass('week-number-selected');
 				} else {
-					$(this).removeClass('checked');
+					$(el).removeClass('week-number-selected');
 				}
-
-				// add first-date-selected class name to the first date selected
-				if (opt.start && DateUtils.formatDate(start, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd')) {
-					$(this).addClass('first-date-selected');
-				} else {
-					$(this).removeClass('first-date-selected');
-				}
-
-				// add last-date-selected
-				if (opt.end && DateUtils.formatDate(end, 'yyyyMMdd') == DateUtils.formatDate(time, 'yyyyMMdd')) {
-					$(this).addClass('last-date-selected');
-				} else {
-					$(this).removeClass('last-date-selected');
-				}
-			});
-
-			box.find('.week-number').each(function (this: any) {
-				if ($(this).attr('data-start-time') == opt.startWeek) {
-					$(this).addClass('week-number-selected');
-				}
-			});
+			}
 		}
 
 		function showMonth(date: Temporal.PlainDateTime, month: 'month1' | 'month2') {
 			const monthName = nameMonth(date.month);
 			var selectableMonthElement = generateSelectableMonthElement(date, month);
 			var selectableYearElement = generateSelectableYearElement(date, month);
-			box.find(`.${month} .month-name`).html(`${opt.monthSelect ? selectableMonthElement : monthName}${opt.hideYearInMonthName ? '' : ` ${opt.yearSelect ? selectableYearElement : date.year}`}`);
+			const html = `${opt.monthSelect ? selectableMonthElement : monthName}${opt.hideYearInMonthName ? '' : ` ${opt.yearSelect ? selectableYearElement : date.year}`}`;
+			box.find(`.${month} .month-name`).first().html(html);
 			box.find(`.${month} tbody`).html(createMonthHTML(date));
 			opt[month] = date;
 			updateSelectableRange();
@@ -2284,7 +2372,8 @@ import { globalState } from '../../../../app/global-state';
 			return data;
 		}
 		function generateSelect(name: string, data: Array<{ value: number, text: string | number, selected: boolean, disabled: boolean }>): string {
-			var select = '<span class="select-wrapper"><select class="drp-date-switch month-name ' + name + '" name="' + name + '">';
+			const selectedItem = data.find(p => p.selected == true);
+			var select = '<span class="select-wrapper">' + (selectedItem != null ? '<span class="select-wrapper-selected-month">' + selectedItem.text + '</span>' : '') + '<select class="drp-date-switch month-name ' + name + '" name="' + name + '">';
 			var current: string | number = '';
 
 			for (var i = 0, l = data.length; i < l; i++) {
@@ -2747,98 +2836,148 @@ import { globalState } from '../../../../app/global-state';
 		}
 
 		function createMonthHTML(d: Temporal.PlainDateTime) {
-			const days: DaterangePickerArgsCustomCellRenderDay[] = [];
-			d = d.with({ day: 1 });
-			const lastMonth = d.subtract({ days: 1 });
-			const now = dateNow();
-
-			let dayOfWeek = getJsDateDay(d);
-			if ((dayOfWeek === 0) && (opt.startOfWeek === 'monday')) {
-				// add one week
-				dayOfWeek = 7;
-			}
-
-			if (dayOfWeek > 0) {
-				for (let i: number = dayOfWeek; i > 0; i--) {
-					let day = d.subtract({ milliseconds: 86400000 * i });
-					let valid = isValidTime(day);
-					if (opt.startDate && compare_day(day, opt.startDate) < 0) {
-						valid = false;
-					} else if (opt.endDate && compare_day(day, opt.endDate) > 0) {
-						valid = false;
-					}
+			// vstup prevedieme len raz na UTC Date bez časovej zóny
+			// beriem prvý deň v mesiaci
+			const y = d.year, m = d.month; // 1..12
+			const firstMs = Date.UTC(y, m - 1, 1);
+			const firstEpochDay = toEpochDayUTC(firstMs);
+
+			// start týždňa
+			const weekStartsMonday = opt.startOfWeek === 'monday';
+			const dowSun0 = weekdaySun0(firstEpochDay); // 0 nedeľa 1 pondelok ...
+			const backDays = weekStartsMonday ? ((dowSun0 + 6) % 7) : dowSun0;
+			const gridStartEpochDay = firstEpochDay - backDays;
+
+			// hranice iba ako čísla dní
+			const hasStart = !!opt.startDate;
+			const hasEnd = !!opt.endDate;
+			const startEpochDay = hasStart ? toEpochDayUTC(Date.UTC(opt.startDate.year, opt.startDate.month - 1, opt.startDate.day)) : 0;
+			const endEpochDay = hasEnd ? toEpochDayUTC(Date.UTC(opt.endDate.year, opt.endDate.month - 1, opt.endDate.day)) : 0;
+
+			// dnes
+			const now = dateNow(); // očakávam Temporal.PlainDateTime
+			const nowEpochDay = toEpochDayUTC(Date.UTC(now.year, now.month - 1, now.day));
+
+			// pomocná mutovateľná Date v UTC. Nepoužívaj ju na porovnávanie. Iba ak potrebuješ time alebo hooky
+			const tmp = new Date(firstMs);
+
+			// zisti mesiac pre typ bunky rýchlo
+			// posledný deň mesiaca
+			const nextMonthMs = Date.UTC(y, m, 1);
+			const thisMonthEndEpochDay = toEpochDayUTC(nextMonthMs - 1); // posledný deň
+
+			let sawToMonth = false;
+			let weekCount = 0;
+			const html: string[] = [];
 
-					days.push({
-						date: day,
-						type: 'lastMonth',
-						day: day.day,
-						time: day[utcEpochMilliseconds](),
-						valid,
-					});
-				}
-			}
+			for (let week = 0; week < 6; week++) {
+				const rowStart = gridStartEpochDay + week * 7;
 
-			const toMonth = d.month;
-			for (let i: number = 0; i < 40; i++) {
-				let today = d.add({ milliseconds: (86400000 * i) });
-				let valid = isValidTime(today);
-				if (opt.startDate && compare_day(today, opt.startDate) < 0) {
-					valid = false;
-				} else if (opt.endDate && compare_day(today, opt.endDate) > 0) {
-					valid = false;
-				}
+				// ak prvá bunka riadku je po mesiaci a už sme mali toMonth ukonči
+				if (week > 0 && rowStart > thisMonthEndEpochDay && sawToMonth) break;
 
-				days.push({
-					date: today,
-					type: today.month == toMonth ? 'toMonth' : 'nextMonth',
-					day: today.day,
-					time: today[utcEpochMilliseconds](),
-					valid,
-				});
-			}
+				html.push('<tr>');
 
-			const html = [];
-			for (let week = 0; week < 6; week++) {
-				if (days[week * 7].type == 'nextMonth') {
-					break;
-				}
+				for (let wd = 0; wd < 7; wd++) {
+					const epochDay = rowStart + wd;
 
-				html.push('<tr>');
+					// čísla na rýchle rozhodnutia
+					const inMonth = epochDay >= firstEpochDay && epochDay <= thisMonthEndEpochDay;
+					if (inMonth) sawToMonth = true;
+
+					const type = inMonth ? 'toMonth' : (epochDay < firstEpochDay ? 'lastMonth' : 'nextMonth');
 
-				for (var day: any = 0; day < 7; day++) {
-					const _day: any = (opt.startOfWeek == 'monday') ? day + 1 : day;
-					const today = days[week * 7 + _day];
-					const highlightToday = (Temporal.PlainDateTime.compare(today.date.toPlainDate(), now.toPlainDate()) == 0);
-					today.extraClass = '';
-					today.tooltip = '';
-
-					if (today.valid && opt.beforeShowDay && typeof opt.beforeShowDay == 'function') {
-						const _r = opt.beforeShowDay(today.date);
-						today.valid = _r[0];
-						today.extraClass = _r[1] || '';
-						today.tooltip = _r[2] || '';
-						if (today.tooltip !== '') { today.extraClass += ' has-tooltip '; }
+					// validácia bez Temporal
+					let valid = true;
+					if (hasStart && epochDay < startEpochDay) valid = false;
+					if (valid && hasEnd && epochDay > endEpochDay) valid = false;
+					if (valid) {
+						// pre isValidTime potrebujeme skutočný čas. Použijeme tmp iba raz
+						tmp.setTime(fromEpochDayUTC(epochDay));
+						// ak vieš spraviť rýchlu vetvu pre isValidTime z čísel, urob to. Inak toto:
+						valid = isValidTimeDate(tmp);
 					}
 
-					const todayDivAttr = {
-						'time': today.time,
-						'data-tooltip': today.tooltip,
-						'class': `day ${today.type} ${today.extraClass} ${today.valid ? 'valid' : 'invalid'} ${highlightToday ? 'real-today' : ''}`,
-					};
+					// week number bunku vlož ešte pred TD dňa
+					if (wd === 0 && opt.showWeekNumbers) {
+						tmp.setTime(fromEpochDayUTC(epochDay));
+						const wn = opt.getWeekNumber ? opt.getWeekNumber(Temporal.PlainDate.from({
+							year: tmp.getUTCFullYear(),
+							month: tmp.getUTCMonth() + 1,
+							day: tmp.getUTCDate()
+						}) as any) : '';
+						html.push('<td><div class="week-number" data-start-time="', String(tmp.getTime()), '">', String(wn), '</div></td>');
+					}
 
-					if (day === 0 && opt.showWeekNumbers) {
-						html.push(`<td><div class="week-number" data-start-time="${today.time}">${opt.getWeekNumber(today.date)}</div></td>`);
+					// hook beforeShowDay len ak valid
+					let extraClass = '';
+					let tooltip = '';
+					if (valid && opt.beforeShowDay) {
+						// vytvor Temporal iba tu kde to naozaj treba
+						const tpd = Temporal.PlainDate.from(epochDayToYMD(epochDay));
+						const tdt = Temporal.PlainDateTime.from({ ...tpd, hour: 0, minute: 0, second: 0, millisecond: 0 });
+						const _r = opt.beforeShowDay(tdt);
+						valid = !!_r[0];
+						if (_r[1]) extraClass = _r[1];
+						if (_r[2]) tooltip = _r[2];
 					}
+					if (tooltip !== '') extraClass += ' has-tooltip';
+
+					const isToday = epochDay === nowEpochDay;
+
+					// priprava údajov pre TD a vnútro
+					// tmp nastavíme na koniec dňa aby bol time konzistentný ak to tak používaš
+					tmp.setTime(fromEpochDayUTC(epochDay));
+					const ms = tmp.getTime();
+					const dayNumber = utcDayOfMonth(tmp);
+
+					const divClass =
+						'day ' + type +
+						(extraClass ? ' ' + extraClass : '') +
+						(valid ? ' valid' : ' invalid') +
+						(isToday ? ' real-today' : '');
+
+					const tdAttrs = attributesCallbacks({}, opt.dayTdAttrs, {
+						date: null, // ak front nepotrebuje Temporal ušetríš. Inak si sem vieš dohnať PlainDate len na klikanie
+						type,
+						day: dayNumber,
+						time: ms,
+						valid,
+						extraClass,
+						tooltip
+					} as any);
 
-					html.push(`<td ${attributesCallbacks(
-						{},
-						opt.dayTdAttrs,
-						today,
-					)}>${getInnerDayHtml(todayDivAttr, today)}</td>`);
+					const inner = getInnerDayHtml(
+						{ 'time': String(ms), 'data-tooltip': tooltip, 'class': divClass },
+						{ day: dayNumber, type, time: ms, valid } as any
+					);
+
+					html.push('<td ', tdAttrs, '>', inner, '</td>');
 				}
+
+				weekCount += 1;
 				html.push('</tr>');
 			}
+
+			while (weekCount < 6) {
+				html.push('<tr><td colspan="7"><div color="transparent" class="day daterangepicker-dummy-row-item" time="-1" style="visibility:hidden;">42</div></td></tr>');
+				weekCount += 1;
+			}
+
 			return html.join('');
+
+			// pomôcky
+			function utcDayOfMonth(dt: Date) { return dt.getUTCDate(); }
+
+			function epochDayToYMD(epochDay: number) {
+				const ms = fromEpochDayUTC(epochDay);
+				tmp.setTime(ms);
+				return {
+					year: tmp.getUTCFullYear(),
+					month: tmp.getUTCMonth() + 1,
+					day: tmp.getUTCDate()
+				};
+			}
 		}
 
 		function getInnerDayHtml(attributes: any, today: any) {

package/components/modal/modal-utils.ts

@@ -136,6 +136,100 @@ export class ModalUtils {
 		}
 	}
 
+	static bindModalBottomSheetHandle(getModal: () => HTMLElement, hideModal: () => void) {
+		if ((getModal() as any)?._dragBound) {
+			return;
+		}
+
+		setTimeout(() => {
+			const modal = getModal() as HTMLElement;
+			const modalDialog = modal.querySelector('.modal-dialog') as HTMLElement;
+			const dragHandle = modal.querySelector('.drag-handle');
+
+			let startY = 0;
+			let currentY = 0;
+			let isDragging = false;
+			const threshold = 100;
+			const cancelDragging = () => {
+				isDragging = false;
+				modal.classList.remove('modal-is-dragging');
+			};
+
+			const startDragging = () => {
+				isDragging = true;
+				modal.classList.add('modal-is-dragging');
+			};
+
+			const onMove = (y) => {
+				const translateY = Math.max(y - startY, 0);
+				modalDialog.style.transform = `translateY(${translateY}px)`;
+			};
+
+			const endDrag = () => {
+				cancelDragging();
+				const dragDistance = currentY - startY;
+
+				if (dragDistance > threshold) {
+					hideModal();
+				} else {
+					modalDialog.style.transform = 'translateY(0)';
+				}
+			};
+
+			// Touch events
+			dragHandle.addEventListener('touchstart', (e) => {
+				startY = (e as TouchEvent).touches[0].clientY;
+				startDragging();
+			});
+
+			dragHandle.addEventListener('touchmove', (e) => {
+				if (!isDragging) {
+					return;
+				}
+
+				currentY = (e as TouchEvent).touches[0].clientY;
+				onMove(currentY);
+			});
+
+			dragHandle.addEventListener('touchend', endDrag);
+
+			// Mouse events
+			dragHandle.addEventListener('mousedown', (e) => {
+				startY = (e as MouseEvent).clientY;
+				startDragging();
+
+				const onMouseMove = (e) => {
+					if (!isDragging) {
+						return;
+					}
+
+					currentY = e.clientY;
+					onMove(currentY);
+					e.preventDefault();
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				};
+
+				const onMouseUp = () => {
+					endDrag();
+					globalState.removeEventListener('mousemove', onMouseMove);
+					globalState.removeEventListener('mouseup', onMouseUp);
+				};
+
+				globalState.addEventListener('mousemove', onMouseMove);
+				globalState.addEventListener('mouseup', onMouseUp);
+			});
+
+			// Reset on modal hide
+			modal.addEventListener('hidden.bs.modal', () => {
+				cancelDragging();
+				modalDialog.style.transform = '';
+			});
+
+			(modal as any)._dragBound = true;
+		}, 100);
+	}
+
 	private static _getModalJquery(modalElem: Element | IVue): JQuery {
 		return globalState.jQuery(modalElem as any);
 	}

package/components/modal/modal.tsx

@@ -122,98 +122,10 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 			return;
 		}
 
-		const modal = this.$refs.modalRoot as HTMLElement;
-		if ((modal as any)?._dragBound) {
-			return;
-		}
-
-		setTimeout(() => {
-			const modal = this.$refs.modalRoot as HTMLElement;
-			const modalDialog = modal.querySelector('.modal-dialog') as HTMLElement;
-			const dragHandle = modal.querySelector('.drag-handle');
-
-			let startY = 0;
-			let currentY = 0;
-			let isDragging = false;
-			const threshold = 100;
-			const cancelDragging = () => {
-				isDragging = false;
-				modal.classList.remove('modal-is-dragging');
-			};
-
-			const startDragging = () => {
-				isDragging = true;
-				modal.classList.add('modal-is-dragging');
-			};
-
-			const onMove = (y) => {
-				const translateY = Math.max(y - startY, 0);
-				modalDialog.style.transform = `translateY(${translateY}px)`;
-			};
-
-			const endDrag = () => {
-				cancelDragging();
-				const dragDistance = currentY - startY;
-
-				if (dragDistance > threshold) {
-					this.hide();
-				} else {
-					modalDialog.style.transform = 'translateY(0)';
-				}
-			};
-
-			// Touch events
-			dragHandle.addEventListener('touchstart', (e) => {
-				startY = (e as TouchEvent).touches[0].clientY;
-				startDragging();
-			});
-
-			dragHandle.addEventListener('touchmove', (e) => {
-				if (!isDragging) {
-					return;
-				}
-
-				currentY = (e as TouchEvent).touches[0].clientY;
-				onMove(currentY);
-			});
-
-			dragHandle.addEventListener('touchend', endDrag);
-
-			// Mouse events
-			dragHandle.addEventListener('mousedown', (e) => {
-				startY = (e as MouseEvent).clientY;
-				startDragging();
-
-				const onMouseMove = (e) => {
-					if (!isDragging) {
-						return;
-					}
-
-					currentY = e.clientY;
-					onMove(currentY);
-					e.preventDefault();
-					e.stopPropagation();
-					e.stopImmediatePropagation();
-				};
-
-				const onMouseUp = () => {
-					endDrag();
-					globalState.removeEventListener('mousemove', onMouseMove);
-					globalState.removeEventListener('mouseup', onMouseUp);
-				};
-
-				globalState.addEventListener('mousemove', onMouseMove);
-				globalState.addEventListener('mouseup', onMouseUp);
-			});
-
-			// Reset on modal hide
-			modal.addEventListener('hidden.bs.modal', () => {
-				cancelDragging();
-				modalDialog.style.transform = '';
-			});
-
-			(modal as any)._dragBound = true;
-		}, 100);
+		ModalUtils.bindModalBottomSheetHandle(
+			() => this.$refs.modalRoot as HTMLElement,
+			() => this.hide()
+		)
 	}
 
 	treatMobileAsBottomSheet(): boolean {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.179",
+	"version": "0.0.181",
 	"files": [
 		"app/",
 		"common/",