inviton-powerduck 0.0.164 → 0.0.166

package/components/dropdown/mobile/legacy_fdd.ts

@@ -1,7 +1,8 @@
+import { globalState } from '../../../app/global-state';
+import { latinize } from '../../../common/extensions/string-extensions';
 import TemporalUtils from '../../../common/utils/temporal-utils';
 import ListviewBuilder from './legacy_lvb';
 import './legacy_fdd.css';
-import { latinize } from '../../../common/extensions/string-extensions';
 
 const $ = jQuery;
 
@@ -42,11 +43,11 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 	let contextWindow, contextBody;
 
 	if (iframeTopMode) {
-		contextWindow = window.top;
+		contextWindow = globalState.top;
 		contextBody = contextWindow.document.body;
 	} else {
-		contextWindow = window;
-		contextBody = window.document.body;
+		contextWindow = globalState;
+		contextBody = globalState.document.body;
 	}
 
 	args = args || ({} as any);
@@ -459,7 +460,7 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 				$(contextBody).find('#filterableSelectOverlay').addClass('fdd-anim-shown');
 				$(contextBody).find('#filterableSelectDropDown').addClass('fdd-anim-shown');
 
-				const availableHeight = $(window).height() - 100;
+				const availableHeight = $(globalState).height() - 100;
 				const scrollTarget = $('#filterableSelectDropDownInner');
 				const selectedTop = $('.filterabledd-item.fdd-selected').offset()?.top - scrollTarget.offset().top + availableHeight;
 
@@ -472,10 +473,10 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 		currentContext.find('.paginator-container').attr('style', 'margin-top:20px;margin-bottom:10px;');
 		openClickTime = TemporalUtils.dateNowMs();
 
-		if (useIscroll) {
-			contextWindow._filterableIscroll = (window as any).utils.bindIscroll($(contextBody).find('#filterableSelectDropWrap'));
-			currentContext.find('.paginator-container').attr('style', 'margin-top:10px;margin-bottom:10px;');
-		}
+		// if (useIscroll) {
+		// 	contextWindow._filterableIscroll = globalState.utils.bindIscroll($(contextBody).find('#filterableSelectDropWrap'));
+		// 	currentContext.find('.paginator-container').attr('style', 'margin-top:10px;margin-bottom:10px;');
+		// }
 
 		$(contextBody).find('#btn_fdd_FddCancel').click(() => {
 			this.hide();

package/components/dropdown/mobile/legacy_lvb.ts

@@ -1,3 +1,5 @@
+import { globalState } from '../../../app/global-state';
+
 const $ = jQuery;
 
 export default function ListviewBuilder(this: any): void {
@@ -269,7 +271,7 @@ export default function ListviewBuilder(this: any): void {
 			setTimeout(() => {
 				currentContext.changePagination(newIndex);
 				currentContext.buildRows();
-				window.scrollTo(0, 0);
+				globalState.scrollTo(0, 0);
 				self.targetElem.trigger('pagination-end', null);
 			}, 200);
 		};

package/components/file-downloader/index.tsx

@@ -1,4 +1,5 @@
 import { toNative } from 'vue-facing-decorator';
+import { globalState } from '../../app/global-state';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { PortalUtils } from '../../common/utils/utils';
@@ -63,11 +64,11 @@ class FileDownloadDialogComponent extends TsxComponent<FileDownloadDialogBinding
 			}
 		};
 
-		function innerDownload() {
+		const innerDownload = () => {
 			const currentFile = fileArr.shift();
 			if (currentFile != null) {
 				let downloadMethod;
-				if (window.fetch) {
+				if (globalState.fetch) {
 					downloadMethod = mySelf.downloadUsingFetch;
 				} else {
 					downloadMethod = mySelf.downloadUsingXMLHTTP;
@@ -111,7 +112,7 @@ class FileDownloadDialogComponent extends TsxComponent<FileDownloadDialogBinding
 								document.getElementById(randomId).click();
 
 								setTimeout(() => {
-									window.URL.revokeObjectURL(_OBJECT_URL);
+									globalState.URL.revokeObjectURL(_OBJECT_URL);
 									document.body.removeChild(dummyLink);
 								}, 5000);
 
@@ -134,7 +135,7 @@ class FileDownloadDialogComponent extends TsxComponent<FileDownloadDialogBinding
 					},
 				);
 			}
-		}
+		};
 
 		mySelf.getModal().show({
 			onShown() {
@@ -179,7 +180,7 @@ class FileDownloadDialogComponent extends TsxComponent<FileDownloadDialogBinding
 		callback: (response: any) => void,
 		error: () => void,
 	): void {
-		const winFetch = window.fetch as any;
+		const winFetch = globalState.fetch as any;
 		winFetch(file.url, {
 			method: 'get',
 			headers: {},

package/components/google/maps.tsx

@@ -1,4 +1,5 @@
 import { Prop, toNative } from 'vue-facing-decorator';
+import { globalState } from '../../app/global-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { PortalUtils } from '../../common/utils/utils';
@@ -39,8 +40,8 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 	}
 
 	getLocPoint() {
-		if ((window as any).google?.maps?.LatLng) {
-			return new (window as any).google.maps.LatLng(this.latitude as any, this.longitude as any);
+		if (globalState.google?.maps?.LatLng) {
+			return new globalState.google.maps.LatLng(this.latitude as any, this.longitude as any);
 		}
 
 		return {
@@ -50,8 +51,12 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 	}
 
 	mounted() {
+		// eslint-disable-next-line ts/no-this-alias
 		const mySelf = this;
-		(window as any).mapInst = mySelf;
+		globalState.mapInst = mySelf;
+		if (!globalState.windowExists) {
+			return;
+		}
 
 		GoogleMapsApiLoader.load().then((result) => {
 			if (result) {
@@ -65,12 +70,13 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 					gmapArgs.zoom = 16;
 				}
 
-				mySelf.map = new (window as any).google.maps.Map(mySelf.$refs.mapWrapper as any, gmapArgs);
+				mySelf.map = new globalState.google.maps.Map(mySelf.$refs.mapWrapper as any, gmapArgs);
+				// eslint-disable-next-line no-useless-call
 				mySelf.refreshMapItems.call(mySelf);
-				(window as any).mapInstance = mySelf.map;
+				globalState.mapInstance = mySelf.map;
 
 				if (this.initComplete != null) {
-					this.initComplete(mySelf.map, (window as any).google.maps);
+					this.initComplete(mySelf.map, globalState.google.maps);
 				}
 			}
 		});
@@ -89,6 +95,10 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 	}
 
 	refreshMapItems(args?: GoogleMapRefreshArgs) {
+		if (!globalState.windowExists) {
+			return;
+		}
+
 		const map = this.map;
 		const locPoint = this.getLocPoint();
 		const newState = this.getCurrentState();
@@ -102,7 +112,7 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 		}
 
 		if (this.infoWindow == null && !isNullOrEmpty(this.name)) {
-			this.infoWindow = new (window as any).google.maps.InfoWindow({
+			this.infoWindow = new globalState.google.maps.InfoWindow({
 				content: '',
 			});
 		}
@@ -113,7 +123,7 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
 		}
 
 		if (this.marker == null) {
-			this.marker = new (window as any).google.maps.Marker({
+			this.marker = new globalState.google.maps.Marker({
 				position: locPoint,
 				title: PortalUtils.htmlEscape(this.name),
 				visible: true,

package/components/google/places-autocomplete.tsx

@@ -1,6 +1,7 @@
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
 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 { AppHttpProvider } from '../../common/api-http';
@@ -304,7 +305,11 @@ class GooglePlacesAutocompleteWrapper {
 			};
 		}
 
-		const autocomplete = new (window as any).google.maps.places.Autocomplete(args.element as any, acArgs);
+		if (!globalState.windowExists) {
+			return;
+		}
+
+		const autocomplete = new globalState.google.maps.places.Autocomplete(args.element as any, acArgs);
 		autocomplete.addListener('place_changed', () => {
 			const place = autocomplete.getPlace();
 			const name = GooglePlacesUtils.getName(place, args.resultType);

package/components/google/ts/google-maps-api.ts

@@ -1,3 +1,4 @@
+import { globalState } from '../../../app/global-state';
 import PowerduckState from '../../../app/powerduck-state';
 
 export default class GoogleMapsApiLoader {
@@ -35,7 +36,7 @@ export default class GoogleMapsApiLoader {
 			};
 			script.onerror = function (e) {
 				delete GoogleMapsApiLoader._loading;
-				reject(false);
+				reject(e);
 			};
 			script.src = `https://maps.googleapis.com/maps/api/js?key=${PowerduckState.getGoogleMapsApiKey()}&libraries=places`;
 			document.head.appendChild(script);
@@ -43,6 +44,6 @@ export default class GoogleMapsApiLoader {
 	}
 
 	private static apiLoaded(): boolean {
-		return ((window as any).google && (window as any).google.maps && (window as any).google.maps.places && (window as any).google.maps.places.Autocomplete) != null;
+		return (globalState.google && globalState.google.maps && globalState.google.maps.places && globalState.google.maps.places.Autocomplete) != null;
 	}
 }

package/components/image-crop/image-cropping-modal.tsx

@@ -1,4 +1,5 @@
 import { 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';
@@ -72,8 +73,12 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 	}
 
 	public show(args: ImageCropModalShowArgs): void {
-		if ((window as any).currentJCrop != null) {
-			(window as any).currentJCrop.destroy();
+		if (!globalState.windowExists) {
+			return;
+		}
+
+		if (globalState.currentJCrop != null) {
+			globalState.currentJCrop.destroy();
 		}
 
 		this.blocked = true;
@@ -90,7 +95,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 
 		(this.$refs.imageCropModal as typeof Modal.prototype).show();
 
-		const containerWidth = $(window).width() - 62;
+		const containerWidth = $(globalState).width() - 62;
 		let maxWidth = 780;
 		if (containerWidth < maxWidth) {
 			maxWidth = containerWidth;
@@ -114,7 +119,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 			waitForLoad(() => {
 				const height = img.height;
 				const width = img.width;
-				const maxHeight = $(window).height() - 140;
+				const maxHeight = $(globalState).height() - 140;
 				const imgRatio = height / width;
 				const possibleHeight = maxWidth * imgRatio;
 
@@ -139,7 +144,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 				($ as any).Jcrop.component.DragState.prototype.touch = false;
 
 				(imgElem as any).Jcrop(cropParams, function (this: any) {
-					(window as any).currentJCrop = this;
+					globalState.currentJCrop = this;
 					mySelf.blocked = false;
 				});
 			});
@@ -326,7 +331,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		dataParam.TargetContainer = 'savethedate';
 
 		try {
-			const selectedBounds = (window as any).currentJCrop.getSelection();
+			const selectedBounds = globalState.currentJCrop.getSelection();
 			dataParam.SelectionX = Math.round(selectedBounds.x);
 			dataParam.SelectionY = Math.round(selectedBounds.y);
 			dataParam.SelectionHeight = Math.round(selectedBounds.h);

package/components/image-crop/upload-and-crop.tsx

@@ -2,187 +2,188 @@ import type { _ButtonArgsBase, ButtonLayout, ButtonSize } from '../button/button
 import type { UploadButtonFileObtainedArgs } from '../button/upload-button';
 import type { ImageCroppedUploadArgs } from './image-cropping-modal';
 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 { format } from '../../common/extensions/string-extensions';
 import { BrowserImageCompression } from '../../common/utils/broswer-image-compression';
 import { PortalUtils } from '../../common/utils/utils';
 import UploadButton from '../button/upload-button';
 import LoadingIndicator from '../loading-indicator';
 import NotificationProvider from '../ui/notification';
 import ImageCropModal from './image-cropping-modal';
-import { format } from '../../common/extensions/string-extensions';
 
 export interface UploadImageAndCropFileCompleteArgs {
-    imageSrc: string;
-    fileName: string;
+	imageSrc: string;
+	fileName: string;
 }
 
 export interface UploadImageAndCropUploadEventArgs extends ImageCroppedUploadArgs { }
 
 interface UploadImageAndCropButtonArgs extends _ButtonArgsBase {
-    title?: string;
-    aspectRatio?: number;
-    useCropper?: boolean;
-    uploadUrl?: string;
-    targetBlobContainer: string;
-    imageCropperTitleMessage?: string;
-    uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
-    uploadComplete: (args: any) => void;
-    autoCommit?: boolean;
-    disableCompression?: boolean;
-    allowedTypes?: string[];
-    compressionMaxSizeMb?: number;
-    isLoading?: boolean;
+	title?: string;
+	aspectRatio?: number;
+	useCropper?: boolean;
+	uploadUrl?: string;
+	targetBlobContainer: string;
+	imageCropperTitleMessage?: string;
+	uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
+	uploadComplete: (args: any) => void;
+	autoCommit?: boolean;
+	disableCompression?: boolean;
+	allowedTypes?: string[];
+	compressionMaxSizeMb?: number;
+	isLoading?: boolean;
 }
 
 @Component
 class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropButtonArgs> implements UploadImageAndCropButtonArgs {
-    @Prop() cssClass!: string;
-    @Prop() layout!: ButtonLayout;
-    @Prop() text!: string;
-    @Prop() size!: ButtonSize;
-    @Prop() round!: boolean;
-    @Prop() outlined!: boolean;
-    @Prop() dismissModal!: boolean;
-    @Prop() icon!: string;
-    @Prop() disabled!: boolean;
-    @Prop() useCropper!: boolean;
-    @Prop() fullWidth!: boolean;
-    @Prop() title!: string;
-    @Prop() aspectRatio!: number;
-    @Prop() uploadUrl: string;
-    @Prop() isLoading?: boolean;
-    @Prop() targetBlobContainer: string;
-    @Prop() imageCropperTitleMessage!: string;
-    @Prop() uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
-    @Prop() uploadComplete: (args: any) => void;
-    @Prop() autoCommit: boolean;
-    @Prop() disableCompression: boolean;
-    @Prop() allowedTypes: string[];
-    @Prop() compressionMaxSizeMb?: number;
-    isInternalLoading: boolean = false;
-
-    handleFileObtained(e: UploadButtonFileObtainedArgs): void {
-        const urlCreator = window.URL || window.webkitURL;
-        const imgUrl = urlCreator.createObjectURL(e.file);
-
-        if (this.allowedTypes?.length > 0 && !this.allowedTypes.includes(e.file.type)) {
-            NotificationProvider.showErrorMessage(PowerduckState.getResourceValue('uploadImageInvalidFileType')[format](PortalUtils.htmlEscape(this.allowedTypes.join(', '))));
-            return;
-        }
-
-        if (this.useCropper != false) {
-            (this.$refs.imgCrop as typeof ImageCropModal.prototype).show({
-                fileName: e.file.name,
-                imageSrc: imgUrl,
-                aspectRatio: (this.aspectRatio || (5 / 3)),
-                title: null,
-                titleMessageHtml: this.imageCropperTitleMessage,
-                handleCropUpload: (e) => {
-                    return this.getUploadPromise(e);
-                },
-            });
-        } else {
-            this.isInternalLoading = true;
-            this.getUploadPromise({
-                file: e.file,
-                fileName: e.file.name,
-                dataUrl: null,
-            }).then(() => {
-                this.isInternalLoading = false;
-            }).catch((_err) => {
-                this.isInternalLoading = false;
-            });
-        }
-    }
-
-    getUploadButton() {
-        return this.$refs.uploadButton as typeof UploadButton.prototype;
-    }
-
-    async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
-        if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
-            args.file = await BrowserImageCompression.compress(args.file, {
-                maxSizeMB: this.compressionMaxSizeMb,
-            });
-        }
-
-        return new Promise((resolve, reject) => {
-            const formData = new FormData();
-            if (this.uploadArgs != null) {
-                const argsVal = this.uploadArgs(args);
-                if (argsVal != null) {
-                    for (const key in argsVal) {
-                        formData.append(key, argsVal[key]);
-                    }
-                }
-            }
-
-            if (this.autoCommit === true) {
-                const request = new XMLHttpRequest();
-                request.open('POST', this.uploadUrl);
-                request.onreadystatechange = () => {
-                    if (request.readyState == 4) {
-                        let response;
-                        try {
-                            response = JSON.parse(request.responseText);
-                        } catch (e) {
-                            response = request.responseText;
-                        }
-
-                        if (request.status == 200) {
-                            if (this.uploadComplete) {
-                                this.uploadComplete(response);
-                            }
-
-                            resolve(response);
-                        } else {
-                            try {
-                                if (response.responseText) {
-                                    NotificationProvider.showErrorMessage(response.responseText);
-                                } else {
-                                    NotificationProvider.showErrorMessage(response);
-                                }
-                            } catch (e) { }
-
-                            reject(response);
-                        }
-                    }
-                };
-
-                request.send(formData);
-            } else {
-                const argsVal = this.uploadArgs(args);
-                this.uploadComplete(argsVal);
-                resolve(formData);
-            }
-        });
-    }
-
-    render(h) {
-        return (
-            <span style="position:relative;">
-                <LoadingIndicator visible={(this.isLoading || this.isInternalLoading)} />
-                <UploadButton
-                    ref="uploadButton"
-                    fileObtained={async (e) => {
-                        await this.handleFileObtained(e);
-                    }}
-                    onlyImages={true}
-                    cssClass={this.cssClass}
-                    layout={this.layout}
-                    text={this.text}
-                    size={this.size}
-                    round={this.round}
-                    outlined={this.outlined}
-                    icon={this.icon}
-                    disabled={this.disabled}
-                />
-
-                <ImageCropModal ref="imgCrop" />
-            </span>
-        );
-    }
+	@Prop() cssClass!: string;
+	@Prop() layout!: ButtonLayout;
+	@Prop() text!: string;
+	@Prop() size!: ButtonSize;
+	@Prop() round!: boolean;
+	@Prop() outlined!: boolean;
+	@Prop() dismissModal!: boolean;
+	@Prop() icon!: string;
+	@Prop() disabled!: boolean;
+	@Prop() useCropper!: boolean;
+	@Prop() fullWidth!: boolean;
+	@Prop() title!: string;
+	@Prop() aspectRatio!: number;
+	@Prop() uploadUrl: string;
+	@Prop() isLoading?: boolean;
+	@Prop() targetBlobContainer: string;
+	@Prop() imageCropperTitleMessage!: string;
+	@Prop() uploadArgs: (e: UploadImageAndCropUploadEventArgs) => any;
+	@Prop() uploadComplete: (args: any) => void;
+	@Prop() autoCommit: boolean;
+	@Prop() disableCompression: boolean;
+	@Prop() allowedTypes: string[];
+	@Prop() compressionMaxSizeMb?: number;
+	isInternalLoading: boolean = false;
+
+	handleFileObtained(e: UploadButtonFileObtainedArgs): void {
+		const urlCreator = globalState.URL || globalState.webkitURL;
+		const imgUrl = urlCreator.createObjectURL(e.file);
+
+		if (this.allowedTypes?.length > 0 && !this.allowedTypes.includes(e.file.type)) {
+			NotificationProvider.showErrorMessage(PowerduckState.getResourceValue('uploadImageInvalidFileType')[format](PortalUtils.htmlEscape(this.allowedTypes.join(', '))));
+			return;
+		}
+
+		if (this.useCropper != false) {
+			(this.$refs.imgCrop as typeof ImageCropModal.prototype).show({
+				fileName: e.file.name,
+				imageSrc: imgUrl,
+				aspectRatio: (this.aspectRatio || (5 / 3)),
+				title: null,
+				titleMessageHtml: this.imageCropperTitleMessage,
+				handleCropUpload: (e) => {
+					return this.getUploadPromise(e);
+				},
+			});
+		} else {
+			this.isInternalLoading = true;
+			this.getUploadPromise({
+				file: e.file,
+				fileName: e.file.name,
+				dataUrl: null,
+			}).then(() => {
+				this.isInternalLoading = false;
+			}).catch((_err) => {
+				this.isInternalLoading = false;
+			});
+		}
+	}
+
+	getUploadButton() {
+		return this.$refs.uploadButton as typeof UploadButton.prototype;
+	}
+
+	async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
+		if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
+			args.file = await BrowserImageCompression.compress(args.file, {
+				maxSizeMB: this.compressionMaxSizeMb,
+			});
+		}
+
+		return new Promise((resolve, reject) => {
+			const formData = new FormData();
+			if (this.uploadArgs != null) {
+				const argsVal = this.uploadArgs(args);
+				if (argsVal != null) {
+					for (const key in argsVal) {
+						formData.append(key, argsVal[key]);
+					}
+				}
+			}
+
+			if (this.autoCommit === true) {
+				const request = new XMLHttpRequest();
+				request.open('POST', this.uploadUrl);
+				request.onreadystatechange = () => {
+					if (request.readyState == 4) {
+						let response;
+						try {
+							response = JSON.parse(request.responseText);
+						} catch (e) {
+							response = request.responseText;
+						}
+
+						if (request.status == 200) {
+							if (this.uploadComplete) {
+								this.uploadComplete(response);
+							}
+
+							resolve(response);
+						} else {
+							try {
+								if (response.responseText) {
+									NotificationProvider.showErrorMessage(response.responseText);
+								} else {
+									NotificationProvider.showErrorMessage(response);
+								}
+							} catch (e) { }
+
+							reject(response);
+						}
+					}
+				};
+
+				request.send(formData);
+			} else {
+				const argsVal = this.uploadArgs(args);
+				this.uploadComplete(argsVal);
+				resolve(formData);
+			}
+		});
+	}
+
+	render(h) {
+		return (
+			<span style="position:relative;">
+				<LoadingIndicator visible={(this.isLoading || this.isInternalLoading)} />
+				<UploadButton
+					ref="uploadButton"
+					fileObtained={async (e) => {
+						await this.handleFileObtained(e);
+					}}
+					onlyImages={true}
+					cssClass={this.cssClass}
+					layout={this.layout}
+					text={this.text}
+					size={this.size}
+					round={this.round}
+					outlined={this.outlined}
+					icon={this.icon}
+					disabled={this.disabled}
+				/>
+
+				<ImageCropModal ref="imgCrop" />
+			</span>
+		);
+	}
 }
 
 const UploadImageAndCropButton = toNative(UploadImageAndCropButtonComponent);

package/components/input/daterange-picker.tsx

@@ -2,6 +2,7 @@ import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
 import { Temporal } from '@js-temporal/polyfill';
 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 { utcEpochMilliseconds } from '../../common/extensions/temporal-extensions';
@@ -159,6 +160,10 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	}
 
 	mounted() {
+		if (!globalState.windowExists) {
+			return;
+		}
+
 		const self = this;
 		const $elem = this.getInputElement();
 		const now = Temporal.Now.plainDateTimeISO();
@@ -261,6 +266,10 @@ class DaterangePickerComponent extends TsxComponent<DaterangePickerArgs> impleme
 	}
 
 	beforeUpdate() {
+		if (!globalState.windowExists) {
+			return;
+		}
+
 		this.handleModelValueChange();
 	}