inviton-powerduck 0.0.195 → 0.0.199

package/components/input/daterange-picker.tsx

@@ -178,8 +178,8 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			return;
 		}
 
-		const $elem = this.getInputElement();
 		if (!this.useModalMode()) {
+			const $elem = this.getInputElement();
 			this.bindDateRangePicker(
 				$elem,
 				this.calendarPlacement,
@@ -190,29 +190,7 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 			);
 		} 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,
-				);
+				this.openInModal();
 			});
 		}
 	}
@@ -375,6 +353,37 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 		}, 0);
 	}
 
+	async openInModal(args?: { title: string }) {
+		const uuid = `drp-modal-${PortalUtils.randomString(6)}`;
+		const handle = await DialogUtils.showDialogEx({
+			title: args?.title ?? this.label ?? '',
+			cssClass: 'daterangepicker-modal pd-modal-mobile-input',
+			message: `<div><div id="${uuid}"></div></div>`,
+			buttons: [],
+			onHidden: () => {
+				this.tryDestroyPickerInstance();
+			},
+		});
+
+		setTimeout(() => {
+			this.$nextTick(() => {
+				const $elem = this.getInputElement();
+				const $modalRoot = $(document.getElementById(uuid));
+				this.bindDateRangePicker(
+					$elem,
+					'inline',
+					true,
+					true,
+					() => {
+						this.raiseChangedEvent();
+						handle.hideModal();
+					},
+					$modalRoot,
+				);
+			});
+		}, 1);
+	}
+
 	close(ms?: number): void {
 		const $elem = this.getInputElement();
 

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

@@ -600,9 +600,7 @@ import { globalState } from '../../../../app/global-state';
 
 		init_datepicker.call(this);
 
-		if (opt.alwaysOpen) {
-			open(0);
-		}
+
 
 		// expose some api
 		$(this).data('dateRangePicker', {
@@ -1272,6 +1270,10 @@ import { globalState } from '../../../../app/global-state';
 					min,
 				);
 			});
+
+			if (opt.alwaysOpen) {
+				open(0);
+			}
 		}
 
 		function calcPosition() {

package/components/mobile-optimized-hero-filter/index.tsx

@@ -1,6 +1,7 @@
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
+import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import Button from '../button/button';
 import { ButtonLayout } from '../button/button-layout';
 import FlexContainer from '../form/flex-container';
@@ -9,13 +10,13 @@ import Modal, { ModalSize } from '../modal/modal';
 import ModalBody from '../modal/modal-body';
 import ModalFooter from '../modal/modal-footer';
 import './css/mobile-optimized-hero-filter.css';
-import { isNullOrEmpty } from '@powerduck/common/utils/is-null-or-empty';
 
 interface MobileOptimizedHeroFilterArgs {
 	caption: string;
 	isLoading?: boolean;
 	cssClass?: string;
-	placeholder?: string
+	placeholder?: string;
+	useIntersectionObserver?: boolean;
 	clearFilterText?: string;
 	submitText?: string;
 	clickedClear?: () => void;
@@ -34,7 +35,8 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 	@Prop() caption: string;
 	@Prop() isLoading: boolean;
 	@Prop() cssClass?: string;
-	@Prop() placeholder?: string
+	@Prop() placeholder?: string;
+	@Prop() useIntersectionObserver?: boolean;
 	@Prop() clearFilterText?: string;
 	@Prop() clickedClear?: () => void;
 	@Prop() clickedSubmit?: () => void;
@@ -45,6 +47,26 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 	@Prop() mobileSecondLineText: string;
 	@Prop() mobileModalSize?: ModalSize;
 
+	mounted() {
+		if (this.useIntersectionObserver) {
+			this.$nextTick(() => {
+				const observer = new IntersectionObserver(([e]) => {
+					e.target.toggleAttribute('data-stuck', e.intersectionRatio < 1);
+				}, { threshold: [1] });
+
+				observer.observe(this.$el);
+				(this as any)._observer = observer;
+			});
+		}
+	}
+
+	beforeUnmount(): void {
+		if ((this as any)._observer != null) {
+			((this as any)._observer as IntersectionObserver).disconnect();
+			(this as any)._observer = null;
+		}
+	}
+
 	showFilterModal() {
 		this.getModal().show();
 	}
@@ -83,7 +105,7 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 											<div class="mohf-input-first-line-text">{firstLine}</div>
 
 											{this.mobileSecondLineText?.length > 0
-												&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
+											&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}
 
 										</div>
 									</FlexFormItem>
@@ -108,16 +130,16 @@ class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHer
 					</ModalBody>
 					<ModalFooter>
 						{this.mobileShowClearFilters
-							&& (
-								<Button
-									layout={ButtonLayout.Secondary}
-									text={this.clearFilterText}
-									fullWidth={true}
-									clicked={() => {
-										this.clickedClear();
-									}}
-								/>
-							)}
+						&& (
+							<Button
+								layout={ButtonLayout.Secondary}
+								text={this.clearFilterText}
+								fullWidth={true}
+								clicked={() => {
+									this.clickedClear();
+								}}
+							/>
+						)}
 						<Button
 							layout={ButtonLayout.Primary}
 							text={PowerduckState.getResourceValue('search')}

package/components/modal/modal.tsx

@@ -1,11 +1,10 @@
 import type { VNode } from 'vue';
 import type { ModalOnBeforeShownArgs, ModalOnShownArgs } from './modal-utils';
-import { isNullOrEmpty } from '@powerduck/common/utils/is-null-or-empty';
 import { Modal as BootstrapModal } from 'bootstrap';
 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 { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { PortalUtils } from '../../common/utils/utils';
 import LoadingIndicator from '../loading-indicator';
 import Teleport from '../teleport/teleport';

package/package.json

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