inviton-powerduck 0.0.101 → 0.0.104

package/components/dropdown/index.tsx

@@ -13,6 +13,7 @@ import { PortalUtils } from "../../common/utils/utils";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 import { capitalize } from "../../common/utils/capitalize-string";
 import PowerduckState from "../../app/powerduck-state";
+import { arrayRemove } from "../../common/utils/array-remove";
 
 type RowToString = (row) => string;
 export enum MultiselectMode {
@@ -164,8 +165,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	@Prop() containerCssClass?: string
 	@Prop() customIdProperty?: string;
 
-	currentSelected: string | any | Array<string> | Array<any> = this.selected;
-	pendingChangeTimeout: any = null;
+	pendingChange: { timeout: any, data: any } = null;
 	preventDefaultTimeout: any = null;
 	preventDefaultTrigger: boolean = null;
 	currentExclusivity: MultiSelectExclusivity = null;
@@ -180,7 +180,6 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			selVal = selVal[0];
 		}
 
-		this.currentSelected = selVal;
 		if (this.changed != null) {
 			this.changed(selVal, this.currentExclusivity);
 		}
@@ -286,12 +285,12 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 
 	getSelectedItems(): DropdownDisplayArgs[] {
 		var opts = this.getOptions();
-		if (this.currentSelected == null || opts.length == 0) {
+		if (this.selected == null || opts.length == 0) {
 			return [];
 		}
 
 		var retArr: DropdownDisplayArgs[] = [];
-		var selItemArr: Array<string> = PortalUtils.isArray(this.currentSelected) ? this.currentSelected : [this.currentSelected];
+		var selItemArr: Array<string> = PortalUtils.isArray(this.selected) ? this.selected : [this.selected];
 
 		selItemArr.forEach((arrItem) => {
 			var selItem: string;
@@ -342,8 +341,8 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	render(h) {
 		//Dummy stuff to ensure reactivity
 		let dummyCss: string = "";
-		if (this.currentSelected != null) {
-			dummyCss += "ddl-dummy-selected" + this.currentSelected.toString().substring(0, 1);
+		if (this.selected != null) {
+			dummyCss += "ddl-dummy-selected" + this.selected.toString().substring(0, 1);
 		}
 		if (this.options != null) {
 			dummyCss += "opts";
@@ -384,7 +383,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 
 	renderSelectComponent(h) {
 		return (
-			<div class={this.getRootBaseCssClass() + (this.useMultiCheckbxoes() ? " s2-multi-chb" : "")}>
+			<div class={this.getRootBaseCssClass() + (this.useMultiCheckboxes() ? " s2-multi-chb" : "")}>
 				<LoadingIndicator visible={this.blocked} />
 				<select name={this.name} autocomplete={this.autocomplete} class={PowerduckState.getFormControlCssClass() + " make-select2"}></select>
 			</div>
@@ -560,18 +559,27 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		return !this.useMobile();
 	}
 
-	useMultiCheckbxoes() {
+	useMultiCheckboxes() {
 		return this.multiselect == true && this.multiselectMode == MultiselectMode.Checkboxes;
 	}
 
-	getCurrentSelect2Data(): DropdownCurrentData {
+	handleChange(data: any) {
+		if (this.skipChange) {
+			this.skipChange = false;
+			return;
+		}
+
+		if (this.pendingChange?.timeout != null) {
+			clearTimeout(this.pendingChange.timeout);
+			this.pendingChange = null;
+		}
+
 		var selArr: DropdownDisplayArgs[] = [];
 		var addArr: string[] = [];
 		var cOpts = this.getOptions();
-		var currData = $(this.$el).find(".make-select2")["select2"]("data");
 		this.currentExclusivity = ($(this.$el).find(".make-select2").data("select2") as any).exclusivity;
 
-		currData.forEach((item) => {
+		(data || []).forEach((item) => {
 			var optItem = cOpts.filter((p) => p.id == item.id)[0];
 			if (optItem != null) {
 				selArr.push(optItem);
@@ -580,10 +588,51 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			}
 		});
 
-		return {
-			data: selArr,
+		let currentData = {
 			added: addArr,
+			data: selArr
 		};
+
+		let forceClose = false;
+		if (this.tags == true) {
+			if (!isNullOrEmpty(currentData.added) && this.tagsAdded != null) {
+				let eventArgs: DropdownListTagAddedArgs = {
+					closeSelection: false,
+					tagArr: currentData.added,
+				};
+
+				this.tagsAdded(eventArgs);
+				forceClose = eventArgs.closeSelection;
+			}
+		}
+
+		try {
+			let searchElem = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement()).selection.$search[0];
+			if (searchElem != null) {
+				this.searchWasActive = searchElem == document.activeElement;
+			} else {
+				this.searchWasActive = false;
+			}
+		} catch (e) {
+			this.searchWasActive = false;
+		}
+
+		if (forceClose) {
+			this.searchWasActive = false;
+		}
+
+		if (this.changedEventDelay == null || this.changedEventDelay == 0) {
+			this.raiseChangedEvent(currentData.data, false);
+		} else {
+			this.pendingChange = {
+				data: currentData.data,
+				timeout: setTimeout(() => {
+					const data = this.pendingChange?.data;
+					this.pendingChange = null;
+					this.raiseChangedEvent(data, false);
+				}, this.changedEventDelay)
+			}
+		}
 	}
 
 	getSelect2AddResource(): string {
@@ -617,7 +666,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		if (this.useSelect2()) {
 			var self = this;
 			var opts = this.getOptions();
-			var s2Constructor: "select2MultiCheckboxes" | "select2" = this.useMultiCheckbxoes() ? "select2MultiCheckboxes" : "select2";
+			var s2Constructor: "select2MultiCheckboxes" | "select2" = this.useMultiCheckboxes() ? "select2MultiCheckboxes" : "select2";
 			var selected = this.getSelectedItems();
 			var s2Elem = this.getSelect2RootElement();
 			var alreadyBound = true;
@@ -632,59 +681,11 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				alreadyBound = false;
 				s2Elem
 					.attr("data-vebound", "true")
-					.change(function (e) {
-						if (self.skipChange) {
-							self.skipChange = false;
-							return;
-						}
-
-						if (self.pendingChangeTimeout != null) {
-							clearTimeout(self.pendingChangeTimeout);
-						}
-
-						let forceClose = false;
-						if (self.tags == true) {
-							let currentData = self.getCurrentSelect2Data();
-							if (!isNullOrEmpty(currentData.added) && self.tagsAdded != null) {
-								let eventArgs: DropdownListTagAddedArgs = {
-									closeSelection: false,
-									tagArr: currentData.added,
-								};
-
-								self.tagsAdded(eventArgs);
-								forceClose = eventArgs.closeSelection;
-							}
-						}
-
-						try {
-							let searchElem = DropdownSelect2Helper.getSelect2Instance(s2Elem).selection.$search[0];
-							if (searchElem != null) {
-								self.searchWasActive = searchElem == document.activeElement;
-							} else {
-								self.searchWasActive = false;
-							}
-						} catch (e) {
-							self.searchWasActive = false;
-						}
-
-						if (forceClose) {
-							self.searchWasActive = false;
-						}
-
-						if (self.changedEventDelay == null || self.changedEventDelay == 0) {
-							self.raiseChangedEvent(self.getCurrentSelect2Data().data, false);
-						} else {
-							self.pendingChangeTimeout = setTimeout(function () {
-								self.pendingChangeTimeout = null;
-								self.raiseChangedEvent(self.getCurrentSelect2Data().data, false);
-							}, self.changedEventDelay);
-						}
-					})
 					.on("select2:close", function () {
-						if (self.pendingChangeTimeout != null) {
-							clearTimeout(self.pendingChangeTimeout);
-							self.pendingChangeTimeout = null;
-							self.raiseChangedEvent(self.getCurrentSelect2Data().data, false);
+						if (self.pendingChange != null) {
+							const data = self.pendingChange?.data;
+							self.pendingChange = null;
+							self.raiseChangedEvent(data, false);
 						}
 					})
 					.on("select2:opening", function (e) {
@@ -724,6 +725,12 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							}
 						}
 					});
+
+				if (this.useMultiCheckboxes()) {
+					s2Elem.on('change', (e) => {
+						this.handleChange($(this.$el).find(".make-select2")["select2"]("data"));
+					});
+				}
 			}
 
 			let dataChanged = false;
@@ -800,10 +807,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				$(l).remove();
 			});
 
-			var s2Args = {
+			var s2Args: any = {
 				allowExclusiveSearch: this.allowExclusiveSearch == true,
 				minimumResultsForSearch: this.disableSearch == true ? -1 : 0,
-				closeOnSelect: this.closeOnSelect != false && !this.useMultiCheckbxoes(),
+				closeOnSelect: this.closeOnSelect != false && !this.useMultiCheckboxes(),
 				placeholder: this.placeholder,
 				allowClear: this.placeholder != null && this.placeholder.length > 0,
 				multiple: this.multiselect == true,
@@ -821,6 +828,23 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				},
 			};
 
+			if (!this.useMultiCheckboxes()) {
+				s2Args.data = null
+				s2Args.ajax = {
+					transport: function (params, success, failure) {
+						let resData: any;
+						const instance = DropdownSelect2Helper.getSelect2Instance(self.getSelect2RootElement());
+						if (instance?.dataAccessor != null) {
+							resData = instance.dataAccessor.getData();
+						} else {
+							resData = opts;
+						}
+
+						success({ results: resData });
+					}
+				};
+			}
+
 			var formatResult = this.getFormatResult();
 			if (formatResult != null) {
 				s2Args["templateResult"] = formatResult;
@@ -893,87 +917,207 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				}
 			}
 
-			s2Elem[s2Constructor](s2Args);
+			let instance = DropdownSelect2Helper.getSelect2Instance(s2Elem);
+			if (instance == null || this.useMultiCheckboxes()) {
+				s2Elem[s2Constructor](s2Args);
 
-			if (this.containerCssClass?.length > 0) {
-				DropdownSelect2Helper.getSelect2Instance(s2Elem).$dropdown.addClass(this.containerCssClass);
-			}
+				instance = DropdownSelect2Helper.getSelect2Instance(s2Elem)
+				instance.dataAccessor = {};
+
+				if (!this.useMultiCheckboxes()) {
+					const currentMethod = instance.dataAdapter.current;
+					const getCurrentData = () => {
+						return instance.dataAccessor?.getData();
+					}
+
+					const getSelected = () => {
+						let retArr = [];
+						const data = getCurrentData();
+
+						if (data != null) {
+							const recCheck = (arr: any[]) => {
+								for (const item of arr) {
+									if (item.selected == true) {
+										retArr.push(item);
+									}
+
+									if (item.children?.length > 0) {
+										recCheck(item.children);
+									}
+								}
+							}
+							recCheck(data);
+						}
+
+						return retArr;
+					}
+
+					const unselectOthers = (data, validIds: any[]) => {
+						let retArr = [];
+						validIds = validIds || [];
+						if (data != null) {
+							const recCheck = (arr: any[]) => {
+								for (const item of arr) {
+									if (item.selected == true && validIds.indexOf(item.id) == -1) {
+										item.selected = false;
+									}
+
+									if (item.children?.length > 0) {
+										recCheck(item.children);
+									}
+								}
+							}
+							recCheck(data);
+						}
+
+						return retArr;
+					}
 
-			if (s2Args.tags) {
-				if (!isNullOrEmpty(tagsTemplate)) {
-					DropdownSelect2Helper.getSelect2Instance(s2Elem).selection.selectionContainer = function () {
-						let retVal = $(tagsTemplate);
-						if (self.tagsShouldPrependContent != false) {
-							let oldAppend = retVal.append;
-							retVal.append = function (elem) {
-								retVal.prepend(elem);
-								retVal.append = oldAppend;
-							} as any;
+					instance.dataAdapter.current = (cb) => {
+						const instance = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement());
+						const currData = getCurrentData();
+
+						if (currData != null) {
+							cb.call(instance.dataAdapter, getSelected());
+						} else {
+							currentMethod.call(instance.dataAdapter, cb);
 						}
+					}
 
-						return retVal;
+					instance.dataAdapter.select = (data) => {
+						const adapter = instance.dataAdapter;
+						if (adapter.$element.prop('multiple')) {
+							adapter.current(function (currentData) {
+								data = [data];
+								data.push.apply(data, currentData);
+								unselectOthers(getCurrentData(), data.map(p => p.id));
+								self.handleChange(data);
+							});
+						} else {
+							if (data == null) {
+								unselectOthers(getCurrentData(), []);
+								self.handleChange([]);
+							} else {
+								unselectOthers(getCurrentData(), [data.id]);
+								self.handleChange([data]);
+							}
+						}
 					};
-				}
 
-				if (this.tagsSortable == true) {
-					var ul = $(this.$el).find(".select2-container ul");
-					if (ul.length > 0) {
-						new Sortable(ul[0], {
-							animation: 150,
-							handle: ".select2-selection__choice",
-							onEnd: (evt) => {
-								const oldIndex = evt.oldIndex;
-								let newIndex = evt.newIndex;
-
-								if (newIndex > oldIndex) {
-									newIndex -= 1;
+					instance.dataAdapter.unselect = (data) => {
+						const adapter = instance.dataAdapter;
+						if (!adapter.$element.prop('multiple')) {
+							return;
+						}
+
+						const selected = getSelected();
+						for (let i = 0, len = selected.length; i < len; i++) {
+							const item = selected[i];
+							if (item.id == data.id) {
+								arrayRemove(selected, item);
+								break;
+							}
+
+						}
+
+						data.selected = false;
+						unselectOthers(getCurrentData(), selected.map(p => p.id));
+						self.handleChange(selected);
+					}
+
+					if (s2Args.tags) {
+						instance.dataAdapter._removeOldTags = () => {
+							const data = getCurrentData();
+							if (data.length > 0) {
+								for (let i = data.length - 1; i >= 0; i--) {
+									const item = data[i];
+									if (item?.newTag == true) {
+										data.splice(i, 1);
+									}
 								}
+							}
+						};
 
-								const sel = this.currentSelected as any[];
-								if (sel == null || sel[oldIndex] == null) {
-									return;
+						if (!isNullOrEmpty(tagsTemplate)) {
+							DropdownSelect2Helper.getSelect2Instance(s2Elem).selection.selectionContainer = function () {
+								let retVal = $(tagsTemplate);
+								if (self.tagsShouldPrependContent != false) {
+									let oldAppend = retVal.append;
+									retVal.append = function (elem) {
+										retVal.prepend(elem);
+										retVal.append = oldAppend;
+									} as any;
 								}
 
-								const clonedArr = [...sel];
-								const removedItems = clonedArr.splice(oldIndex, 1);
-								clonedArr.splice(newIndex, 0, removedItems[0]);
-								this.changed(clonedArr);
-							},
-						});
+								return retVal;
+							};
+						}
+
+						if (this.tagsSortable == true) {
+							var ul = $(this.$el).find(".select2-container ul");
+							if (ul.length > 0) {
+								new Sortable(ul[0], {
+									animation: 150,
+									handle: ".select2-selection__choice",
+									onEnd: (evt) => {
+										const oldIndex = evt.oldIndex;
+										let newIndex = evt.newIndex;
+
+										if (newIndex > oldIndex) {
+											newIndex -= 1;
+										}
+
+										const sel = this.selected as any[];
+										if (sel == null || sel[oldIndex] == null) {
+											return;
+										}
+
+										const clonedArr = [...sel];
+										const removedItems = clonedArr.splice(oldIndex, 1);
+										clonedArr.splice(newIndex, 0, removedItems[0]);
+										this.changed(clonedArr);
+									},
+								});
+							}
+						}
+
+						// var ul = selectElem.prev('.select2-container').first('ul');
+						// ul.sortable({
+						//     placeholder: 'ui-state-highlight',
+						//     items: 'li:not(.select2-search-field)',
+						//     tolerance: 'pointer',
+						//     stop: function () {
+						//         onElementValueChange(element, valueAccessor, allBindingsAccessor, viewModel);
+						//     }
+						// });
 					}
-				}
 
-				// var ul = selectElem.prev('.select2-container').first('ul');
-				// ul.sortable({
-				//     placeholder: 'ui-state-highlight',
-				//     items: 'li:not(.select2-search-field)',
-				//     tolerance: 'pointer',
-				//     stop: function () {
-				//         onElementValueChange(element, valueAccessor, allBindingsAccessor, viewModel);
-				//     }
-				// });
-			}
+					if (this.afterBound != null) {
+						this.afterBound(s2Elem, DropdownSelect2Helper.getSelect2Instance(s2Elem));
+					}
 
-			if (this.afterBound != null) {
-				this.afterBound(s2Elem, DropdownSelect2Helper.getSelect2Instance(s2Elem));
+					if (validTagsButtons) {
+						this.bindSelect2TagsButton(DropdownSelect2Helper.getSelect2Instance(s2Elem));
+					}
+				}
 			}
 
-			if (validTagsButtons) {
-				this.bindSelect2TagsButton(DropdownSelect2Helper.getSelect2Instance(s2Elem));
+			DropdownSelect2Helper.getSelect2Instance(s2Elem).dataAccessor.getData = () => {
+				return opts;
 			}
 
-			if (selected.length > 0) {
-				let selectedIds = selected.map((p) => p.id);
-				if (self.multiselect) {
-					s2Elem.val(selectedIds);
-				} else {
-					s2Elem.val(selectedIds[0]);
-				}
-			} else {
-				s2Elem.val(null);
-				s2Elem[s2Constructor]("val", "");
+			if (this.containerCssClass?.length > 0) {
+				DropdownSelect2Helper.getSelect2Instance(s2Elem).$dropdown.addClass(this.containerCssClass);
 			}
 
+
+
+			DropdownSelect2Helper.getSelect2Instance(s2Elem).dataAdapter.current((initialData) => {
+				DropdownSelect2Helper.getSelect2Instance(s2Elem).trigger('selection:update', {
+					data: initialData
+				});
+			});
+
 			if (self.searchWasActive == true) {
 				self.searchWasActive = false;
 
@@ -983,9 +1127,6 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 					}, 0);
 				});
 			}
-
-			self.skipChange = true;
-			s2Elem.trigger("change");
 		}
 	}
 
@@ -998,19 +1139,12 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	}
 
 	mounted() {
-		this.currentSelected = this.selected;
 		this.updateSelect2();
-
 		this.$nextTick(() => {
 			this.setMobilePickerInputText(this.getSelectedItems());
 		});
 	}
 
-	@Watch("selected")
-	updateValue() {
-		this.currentSelected = this.selected;
-	}
-
 	updated() {
 		this.updateSelect2();
 	}

package/components/dropdown/ts/select2-multi-checkboxes.ts

@@ -40,7 +40,7 @@ import { PortalUtils } from "../../../common/utils/utils";
 	var flattenData = (data): any[] => {
 		const retArr = [];
 		const recCheck = (arr: any[]) => {
-			for (const item of arr) {
+			for (const item of arr || []) {
 				if (item.id != null) {
 					retArr.push(item);
 				}
@@ -86,7 +86,7 @@ import { PortalUtils } from "../../../common/utils/utils";
 			allowClear: true,
 			ajax: {
 				transport: function (params, success, failure) {
-					success({ results: self.currentData });
+					success({ results: self.currentData || [] });
 				}
 			},
 			language: options.language,

package/components/dropzone/gallery-dropzone.tsx

@@ -63,6 +63,12 @@ class DropzoneGalleryComponent extends TsxComponent<DropzoneGalleryArgs> impleme
         this.bindScript();
     }
 
+    beforeUnmount() {
+        try {
+            (this.$refs.galleryDropzone as any).dropzone.destroy();
+        } catch (error) { }
+    }
+
     updateSortOrder(itemArr?: DropzoneGalleryItem[]) {
         let applySort = false;
         if (itemArr == null) {

package/components/input/wysiwig.tsx

@@ -76,6 +76,7 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
         elem["trumbowyg"]({
             autogrow: true,
             lang: PowerduckState.getCurrentLanguage(),
+            imageWidthModalEdit: true,
             svgPath: EsModuleImportHelper.getObj(svgIcons), //FIXME: chcek if working
             tagsToRemove: ["script", "link"],
             plugins: {

package/components/long-content-container/index.tsx

@@ -1,6 +1,7 @@
 import { toNative, Prop } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
 import './css/index.css';
+import { ModalUtils } from "../modal/modal-utils";
 
 interface LongContentContainerArgs {
 	maxHeight?: string
@@ -21,11 +22,15 @@ class LongContentContainerComponent extends TsxComponent<LongContentContainerArg
 	isExpanded: boolean = false;
 
 	mounted() {
-		this.reMeasure();
+		ModalUtils.handleModalMountDelay(this, () => {
+			this.reMeasure();
+		})
 	}
 
 	updated() {
-		this.reMeasure();
+		ModalUtils.handleModalMountDelay(this, () => {
+			this.reMeasure();
+		})
 	}
 
 	getRootStyle() {

package/components/modal/modal-utils.ts

@@ -4,123 +4,137 @@ type VueType = typeof Vue.prototype;
 
 interface IVue extends VueType { }
 interface ModalDisplayArgs<T> {
-    modal: BootstrapModal;
-    data?: T;
-    onHidden?: (response: ModalResponseData<T>) => void;
-    onShown?: (e: ModalOnShownArgs) => void;
-    onBeforeShown?: (e: ModalOnBeforeShownArgs) => void;
+	modal: BootstrapModal;
+	data?: T;
+	onHidden?: (response: ModalResponseData<T>) => void;
+	onShown?: (e: ModalOnShownArgs) => void;
+	onBeforeShown?: (e: ModalOnBeforeShownArgs) => void;
 }
 
 interface ModalHideArgs {
-    modal: BootstrapModal;
+	modal: BootstrapModal;
 }
 
 interface ModalResponseData<T> {
-    data?: T;
+	data?: T;
 }
 
 export interface ModalOnBeforeShownArgs {
-    instance: IVue;
+	instance: IVue;
 }
 
 export interface ModalOnShownArgs {
-    instance: IVue;
+	instance: IVue;
 }
 
 export class ModalUtils {
-    private static _onBeforeShownHandlers: ((args: { modalHandler: any, modalSelector: JQuery }) => void)[]
-
-    static addOnBeforeShownHandler(handler: (args: { modalHandler: any, modalSelector: JQuery }) => void) {
-        if (ModalUtils._onBeforeShownHandlers == null) {
-            ModalUtils._onBeforeShownHandlers = [];
-        }
-
-        ModalUtils._onBeforeShownHandlers.push(handler);
-    }
-
-    static showModal<T>(instance: IVue, dataArgs: ModalDisplayArgs<T> | IVue | Element): void {
-        var args: ModalDisplayArgs<T> = dataArgs as any;
-        if (args.modal == null) {
-            args = { modal: args as any } as ModalDisplayArgs<T>;
-        }
-
-        var modalContext = args.modal;
-        if (modalContext == null) {
-            console.error("Modal context not specified");
-            return;
-        }
-
-        let nextTick = instance?.$nextTick;
-        if (nextTick == null) {
-            nextTick = (cb) => { cb(); }
-        }
-
-        nextTick(() => {
-            var modalSelector = this._getModalJquery(modalContext["_element"]);
-            modalSelector.off("hidden.bs.modal");
-            modalSelector.off("shown.bs.modal");
-
-            if (args.onHidden != null) {
-                modalSelector.on("hidden.bs.modal", function () {
-                    args.onHidden({
-                        data: args.data,
-                    });
-                });
-            }
-
-            if (args.onShown != null) {
-                modalSelector.on("shown.bs.modal", function () {
-                    args.onShown({
-                        instance: instance,
-                    });
-                });
-            }
-
-            if (args.onBeforeShown != null) {
-                args.onBeforeShown({
-                    instance: instance,
-                });
-            }
-
-            if ((args.modal as any)._config == null) {
-                args.modal = BootstrapModal.getOrCreateInstance((args.modal as any)?.length > 0 ? (args.modal as any)[0] : (args.modal as any) as Element)
-            }
-
-            if (ModalUtils._onBeforeShownHandlers) {
-                const modalHandler = args.modal;
-                for (const hook of ModalUtils._onBeforeShownHandlers) {
-                    hook({ modalHandler, modalSelector });
-                }
-
-                args.modal.show();
-            } else {
-                args.modal.show();
-            }
-        });
-    }
-
-    static hideModal(dataArgs: ModalHideArgs | IVue | Element): void {
-        var args: ModalHideArgs = dataArgs as any;
-        if (args.modal == null) {
-            args = { modal: args as any } as ModalHideArgs;
-        }
-
-        var modalContext = args.modal;
-        if (modalContext == null) {
-            console.error("Modal context not found");
-            return;
-        }
-
-        if ((args.modal as any)._config == null) {
-            args.modal = BootstrapModal.getOrCreateInstance((args.modal as any)?.length > 0 ? (args.modal as any)[0] : (args.modal as any) as Element)
-        }
-
-        setTimeout(() => {
-            args.modal.hide();
-        }, 1);
-    }
-
-    private static _getModalJquery(modalElem: Element | IVue): JQuery {
-        return window["jQuery"](modalElem as any);
-    }
+	private static _onBeforeShownHandlers: ((args: { modalHandler: any, modalSelector: JQuery }) => void)[]
+
+	static addOnBeforeShownHandler(handler: (args: { modalHandler: any, modalSelector: JQuery }) => void) {
+		if (ModalUtils._onBeforeShownHandlers == null) {
+			ModalUtils._onBeforeShownHandlers = [];
+		}
+
+		ModalUtils._onBeforeShownHandlers.push(handler);
+	}
+
+	static showModal<T>(instance: IVue, dataArgs: ModalDisplayArgs<T> | IVue | Element): void {
+		var args: ModalDisplayArgs<T> = dataArgs as any;
+		if (args.modal == null) {
+			args = { modal: args as any } as ModalDisplayArgs<T>;
+		}
+
+		var modalContext = args.modal;
+		if (modalContext == null) {
+			console.error("Modal context not specified");
+			return;
+		}
+
+		let nextTick = instance?.$nextTick;
+		if (nextTick == null) {
+			nextTick = (cb) => { cb(); }
+		}
+
+		nextTick(() => {
+			var modalSelector = this._getModalJquery(modalContext["_element"]);
+			modalSelector.off("hidden.bs.modal");
+			modalSelector.off("shown.bs.modal");
+
+			if (args.onHidden != null) {
+				modalSelector.on("hidden.bs.modal", function () {
+					args.onHidden({
+						data: args.data,
+					});
+				});
+			}
+
+			if (args.onShown != null) {
+				modalSelector.on("shown.bs.modal", function () {
+					args.onShown({
+						instance: instance,
+					});
+				});
+			}
+
+			if (args.onBeforeShown != null) {
+				args.onBeforeShown({
+					instance: instance,
+				});
+			}
+
+			if ((args.modal as any)._config == null) {
+				args.modal = BootstrapModal.getOrCreateInstance((args.modal as any)?.length > 0 ? (args.modal as any)[0] : (args.modal as any) as Element)
+			}
+
+			if (ModalUtils._onBeforeShownHandlers) {
+				const modalHandler = args.modal;
+				for (const hook of ModalUtils._onBeforeShownHandlers) {
+					hook({ modalHandler, modalSelector });
+				}
+
+				args.modal.show();
+			} else {
+				args.modal.show();
+			}
+		});
+	}
+
+	static hideModal(dataArgs: ModalHideArgs | IVue | Element): void {
+		var args: ModalHideArgs = dataArgs as any;
+		if (args.modal == null) {
+			args = { modal: args as any } as ModalHideArgs;
+		}
+
+		var modalContext = args.modal;
+		if (modalContext == null) {
+			console.error("Modal context not found");
+			return;
+		}
+
+		if ((args.modal as any)._config == null) {
+			args.modal = BootstrapModal.getOrCreateInstance((args.modal as any)?.length > 0 ? (args.modal as any)[0] : (args.modal as any) as Element)
+		}
+
+		setTimeout(() => {
+			args.modal.hide();
+		}, 1);
+	}
+
+	static handleModalMountDelay(instance: IVue, cb: () => void) {
+		if (instance?.$el?.closest('.modal-dialog')) {
+			instance.$nextTick(() => {
+				instance.$nextTick(() => {
+					setTimeout(() => {
+						cb();
+					}, 100);
+				});
+			});
+		} else {
+			cb();
+		}
+	}
+
+	private static _getModalJquery(modalElem: Element | IVue): JQuery {
+		return window["jQuery"](modalElem as any);
+	}
 }

package/components/open-street-map/open-street-map.tsx

@@ -8,6 +8,7 @@ import * as LCluster from "leaflet.markercluster";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 import iconUrl from './img/marker-icon.png';
 import GestureHandling from "./ts/gesture-handling/gesture-handling";
+import { ModalUtils } from "../modal/modal-utils";
 
 interface OpenStreetMapClusterOptions {
 	//A cluster will cover at most this many pixels from its center
@@ -122,11 +123,13 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 	mounted() {
 		this.initIcon()
 		this.waitForLeaflet().then(() => {
-			this.initGestureHandling();
-			this.invalidateSize()
-			if (this.initComplete != null) {
-				this.initComplete(this.getLeaflet(), this.getMap())
-			}
+			ModalUtils.handleModalMountDelay(this, () => {
+				this.initGestureHandling();
+				this.invalidateSize()
+				if (this.initComplete != null) {
+					this.initComplete(this.getLeaflet(), this.getMap())
+				}
+			});
 		})
 	}
 

package/components/swiper/css/swiper.css

@@ -0,0 +1,4 @@
+.swiper {
+	width: 100%;
+	overflow: hidden;
+}

package/components/swiper/swiper-slide.tsx

@@ -4,9 +4,9 @@ interface SwiperSlideArgs { }
 
 @Component
 class SwiperSlideComponent extends TsxComponent<SwiperSlideArgs> implements SwiperSlideArgs {
-    render(h) {
-        return (<div class="swiper-slide">{this.$slots.default}</div>)
-    }
+	render(h) {
+		return (<div class="swiper-slide">{this.$slots?.default()}</div>)
+	}
 }
 
 const SwiperSlide = toNative(SwiperSlideComponent)

package/components/swiper/swiper.tsx

@@ -1,134 +1,202 @@
 import { toNative, Prop } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
 import SwiperCore from 'swiper';
+import type { Vue } from 'vue-facing-decorator';
+import { Navigation, Pagination } from 'swiper/modules';
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
+import './css/swiper.css';
 
+type VueType = typeof Vue.prototype;
+interface IVue extends VueType { }
+SwiperCore.use([Navigation, Pagination]);
 
 interface SwiperArgs {
-    hasPagination?: boolean
-    direction?: 'horizontal' | 'vertical'
-    spaceBetween?: number
-    slideChanged?: (e?: SwiperSlideChangedArgs) => void,
-    zoomChanged?: (scale: number) => void
-    zoom?: boolean | SwiperZoomArgs
+	hasPagination?: boolean
+	direction?: 'horizontal' | 'vertical'
+	slidesPerView?: 'auto' | number
+	slidesPerGroup?: number
+	spaceBetween?: number
+	freeMode?: boolean
+	grabCursor?: boolean
+	speed?: number
+	autoplay?: boolean
+	preventClicks?: boolean
+	navigation?: { nextEl: () => HTMLElement | string | IVue, prevEl: () => HTMLElement | string | IVue }
+	slideChanged?: (e?: SwiperSlideChangedArgs) => void,
+	zoomChanged?: (scale: number) => void
+	zoom?: boolean | SwiperZoomArgs
 
 }
 
 export interface SwiperSlideChangedArgs {
-    activeIndex: number
-    previousIndex: number
-    swiper: any
+	activeIndex: number
+	previousIndex: number
+	swiper: any
 }
 
 export interface SwiperZoomArgs {
-    enabled: boolean
-    maxRatio?: number
-    minRatio?: number
+	enabled: boolean
+	maxRatio?: number
+	minRatio?: number
 }
 
 
 @Component
 class SwiperComponent extends TsxComponent<SwiperArgs> implements SwiperArgs {
-    @Prop() key: string;
-    @Prop() hasPagination?: boolean
-    @Prop() direction?: 'horizontal' | 'vertical'
-    @Prop() spaceBetween?: number
-    @Prop() zoom?: boolean | SwiperZoomArgs
-    @Prop() slideChanged?: (e?: SwiperSlideChangedArgs) => void
-    @Prop() zoomChanged?: (scale: number) => void
-    zoomed: boolean = false;
-
-    mounted() {
-        const rootElem = this.$el;
-        if (rootElem != null) {
-            let existingInstance = (rootElem as any).swiper;
-            if (existingInstance == null) {
-                let args: any = {
-                    zoom: this.getZoomArgs(),
-                    direction: this.direction || 'horizontal',
-                    spaceBetween: this.spaceBetween > 0 ? this.spaceBetween : 0,
-                    pagination: this.shouldRenderPagination() ? {
-                        el: this.$refs.swiperPagination,
-                        type: 'bullets',
-                    } : {
-                        el: null
-                    }
-                };
-
-                if (this.slideChanged != null) {
-                    args.on = {
-                        slideChange: (swiper: any) => {
-                            this.slideChanged({
-                                activeIndex: swiper.activeIndex,
-                                previousIndex: swiper.previousIndex,
-                                swiper: swiper
-                            });
-                        }
-                    }
-                }
-
-                if (this.zoomChanged != null) {
-                    args.on = {
-                        ...args.on,
-                        zoomChange: (swiperEvent: any, scale: number) => {
-                            this.zoomed = scale > 1 ? true : false;
-                            this.zoomChanged(scale)
-                        }
-                    }
-                }
-
-                new SwiperCore(rootElem as any, args);
-            }
-        }
-    }
-
-    getSwiperInstance() {
-        const rootElem = this.$el;
-        if (rootElem != null) {
-            return (rootElem as any).swiper;
-        }
-
-        return null;
-    }
-
-    getZoomArgs(): SwiperZoomArgs {
-        if (this.zoom == true) {
-            return {
-                enabled: true
-            }
-        }
-
-        return this.zoom as SwiperZoomArgs;
-    }
-
-    shouldRenderPagination(): boolean {
-        return this.hasPagination != false;
-    }
-
-
-
-    render(h) {
-        const zoomEnabled = (this.zoom == true || (this.zoom as SwiperZoomArgs)?.enabled == true);
-
-        return (
-
-            <div class="swiper">
-
-                {this.shouldRenderPagination() &&
-                    <div ref="swiperPagination" class={`swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal ${this.zoomed ?
-                        "hide-swiper-pagination-bulets" :
-                        ""}`
-                    }></div>
-                }
-
-                <div class="swiper-wrapper">
-                    {this.$slots.default}
-                </div>
-            </div>
-        )
-    }
+	@Prop() key: string;
+	@Prop() hasPagination?: boolean
+	@Prop() direction?: 'horizontal' | 'vertical'
+	@Prop() slidesPerView?: 'auto' | number
+	@Prop() slidesPerGroup?: number
+	@Prop() spaceBetween?: number
+	@Prop() freeMode?: boolean
+	@Prop() grabCursor?: boolean
+	@Prop() speed: number
+	@Prop() autoplay: boolean
+	@Prop() preventClicks: boolean
+	@Prop() navigation?: { nextEl: () => HTMLElement | string | IVue, prevEl: () => HTMLElement | string | IVue }
+	@Prop() zoom?: boolean | SwiperZoomArgs
+	@Prop() slideChanged?: (e?: SwiperSlideChangedArgs) => void
+	@Prop() zoomChanged?: (scale: number) => void
+	zoomed: boolean = false;
+
+	mounted() {
+		const rootElem = this.$el;
+		if (rootElem != null) {
+			let existingInstance = (rootElem as any).swiper;
+			if (existingInstance == null) {
+				let args: any = {
+					zoom: this.getZoomArgs(),
+					direction: this.direction || 'horizontal',
+					spaceBetween: this.spaceBetween > 0 ? this.spaceBetween : 0,
+					pagination: this.shouldRenderPagination() ? {
+						el: this.$refs.swiperPagination,
+						type: 'bullets',
+					} : {
+						el: null
+					}
+				};
+
+				if (this.slidesPerView != null) {
+					args.slidesPerView = this.slidesPerView;
+				}
+
+				if (this.slidesPerGroup != null) {
+					args.slidesPerGroup = this.slidesPerGroup;
+				}
+
+				if (this.freeMode != null) {
+					args.freeMode = this.freeMode;
+				}
+
+				if (this.grabCursor != null) {
+					args.grabCursor = this.grabCursor;
+				}
+
+				if (this.speed != null) {
+					args.speed = this.speed;
+				}
+
+				if (this.autoplay != null) {
+					args.autoplay = this.autoplay;
+				}
+
+				if (this.preventClicks != null) {
+					args.preventClicks = this.preventClicks;
+				}
+
+				if (this.navigation != null) {
+					const getForProp = (prop) => {
+						if (prop == null) {
+							return null;
+						}
+
+						const propVal = prop();
+						if (propVal == null) {
+							return null;
+						}
+
+						return propVal.$el ?? propVal;
+					}
+
+					args.navigation = {
+						prevEl: getForProp(this.navigation.prevEl),
+						nextEl: getForProp(this.navigation.nextEl),
+					}
+				}
+
+				if (this.slideChanged != null) {
+					args.on = {
+						slideChange: (swiper: any) => {
+							this.slideChanged({
+								activeIndex: swiper.activeIndex,
+								previousIndex: swiper.previousIndex,
+								swiper: swiper
+							});
+						}
+					}
+				}
+
+				if (this.zoomChanged != null) {
+					args.on = {
+						...args.on,
+						zoomChange: (swiperEvent: any, scale: number) => {
+							this.zoomed = scale > 1 ? true : false;
+							this.zoomChanged(scale)
+						}
+					}
+				}
+
+				new SwiperCore(rootElem as any, args);
+			}
+		}
+	}
+
+	getSwiperInstance() {
+		const rootElem = this.$el;
+		if (rootElem != null) {
+			return (rootElem as any).swiper;
+		}
+
+		return null;
+	}
+
+	getZoomArgs(): SwiperZoomArgs {
+		if (this.zoom == true) {
+			return {
+				enabled: true
+			}
+		}
+
+		return this.zoom as SwiperZoomArgs;
+	}
+
+	shouldRenderPagination(): boolean {
+		return this.hasPagination != false;
+	}
+
+
+
+	render(h) {
+		const zoomEnabled = (this.zoom == true || (this.zoom as SwiperZoomArgs)?.enabled == true);
+
+		return (
+			<div class="swiper">
+				{this.shouldRenderPagination() &&
+					<div ref="swiperPagination" class={`swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal ${this.zoomed ?
+						"hide-swiper-pagination-bulets" :
+						""}`
+					}></div>
+				}
+
+				<div class="swiper-wrapper">
+					{this.$slots?.default()}
+				</div>
+			</div>
+		)
+	}
 }
 
 const Swiper = toNative(SwiperComponent)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inviton-powerduck",
-  "version": "0.0.101",
+  "version": "0.0.104",
   "type": "module",
   "scripts": {
     "build": " vite build && vue-tsc  --declaration --emitDeclarationOnly",