inviton-powerduck 0.0.178 → 0.0.180

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%;
@@ -107,14 +111,6 @@
 	position: relative;
 }
 
-.date-range-picker-wrapper .month-wrapper-inner {
-	margin-top: -20px;
-}
-
-.date-range-picker-wrapper .month-wrapper-inner table {
-	margin-top: 20px;
-}
-
 .date-range-picker-root.date-range-picker-modalmode .date-range-picker-wrapper {
 	margin: auto;
 }
@@ -173,7 +169,7 @@
 	height: 20px;
 }
 
-.date-range-picker-wrapper .month-wrapper > table {
+.date-range-picker-wrapper .month-wrapper>table {
 	padding-top: 15px;
 }
 
@@ -272,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;
@@ -570,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;
@@ -627,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;
+}