inviton-powerduck 0.0.187 → 0.0.188

package/components/dropdown/css/dropdown.css

@@ -84,7 +84,7 @@
 	width: 100%;
 }
 
-.input-group > .s2-fw-root {
+.input-group>.s2-fw-root {
 	position: relative;
 	-ms-flex: 1 1 auto;
 	flex: 1 1 auto;
@@ -92,19 +92,14 @@
 	margin-bottom: 0;
 }
 
-.s2-fw-root.s2-append-icon
-	.select2.select2-container.select2-container--default
-	> .selection
-	> .select2-selection--single,
-.s2-fw-root.s2-append-icon.select2.select2-container.select2-container--default
-	> .selection
-	> .select2-selection--single {
+.s2-fw-root.s2-append-icon .select2.select2-container.select2-container--default>.selection>.select2-selection--single,
+.s2-fw-root.s2-append-icon.select2.select2-container.select2-container--default>.selection>.select2-selection--single {
 	border-bottom-right-radius: 0;
 	border-top-right-radius: 0;
 	border-right: 0;
 }
 
-.select2-container.select2-container--default.select2-container--open > .select2-dropdown {
+.select2-container.select2-container--default.select2-container--open>.select2-dropdown {
 	border-color: #8a8a8a;
 	border-top: 1px solid #8a8a8a;
 	-webkit-box-shadow:
@@ -126,11 +121,18 @@
 	font-size: 16px;
 }
 
-.ddl-mobile-placeholder {
+.ddl-mobile-placeholder {}
+
+.dropdownlist-inline-mode .s2-fw-root>.select2-container,
+.dropdownlist-inline-mode .s2-fw-root>.select2-container>.select2-dropdown {
+	display: block !important;
+	position: static !important;
+	top: 0 !important;
+	left: 0 !important;
 }
 
 .imgddl-result-remove.imgddl-result-button.select2-selection__choice__remove,
-.imgddl-selected-item .imgddl-dropdown-resultroot .imgddl-dropdown-resultwrap > .imgddl-result-button {
+.imgddl-selected-item .imgddl-dropdown-resultroot .imgddl-dropdown-resultwrap>.imgddl-result-button {
 	color: #eaeaea;
 	cursor: pointer;
 	font-weight: bold;
@@ -144,4 +146,4 @@
 	display: inline-block;
 	vertical-align: top;
 	padding-top: 1px;
-}
+}

package/components/dropdown/index.tsx

@@ -65,6 +65,7 @@ interface DropdownListArgs extends FormItemWrapperArgs {
 	containerCssClass?: string;
 	options: Array<string> | Array<DropdownOptionGroup> | Array<any>;
 	selected: string | any | Array<string> | Array<any>;
+	displayMode?: 'default' | 'inline'
 	displayMember?: string | RowToString;
 	valueMember?: string | RowToString;
 	multiselect?: boolean;
@@ -143,6 +144,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	@Prop() displayMember!: (row) => string | string;
 	@Prop() valueMember!: (row) => string | string;
 	@Prop() selected!: string | any | Array<string> | Array<any>;
+	@Prop() displayMode?: 'default' | 'inline'
 	@Prop() changed: (newValue: string | any | Array<string> | Array<any>, exclusivity?: MultiSelectExclusivity) => void;
 	@Prop() afterBound: (elem: JQuery<Element>, select2Instance: any) => void;
 	@Prop() maxWidth?: number;
@@ -380,13 +382,17 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 
 	render(h) {
 		// Dummy stuff to ensure reactivity
-		let dummyCss: string = '';
+		let cssBuilder: string = '';
 		if (this.selected != null) {
-			dummyCss += `ddl-dummy-selected${this.selected.toString().substring(0, 1)}`;
+			cssBuilder += `ddl-dummy-selected${this.selected.toString().substring(0, 1)}`;
+		}
+
+		if (this.displayInline()) {
+			cssBuilder += ` dropdownlist-inline-mode `;
 		}
 
 		if (this.options != null) {
-			dummyCss += 'opts';
+			cssBuilder += 'opts';
 		}
 
 		return (
@@ -402,7 +408,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				marginType={this.marginType}
 				maxWidth={this.maxWidth}
 				validationState={this.validationState}
-				cssClass={dummyCss}
+				cssClass={cssBuilder}
 				subtitle={this.subtitle}
 				labelButtons={this.labelButtons}
 				appendIconClicked={this.appendIconClicked}
@@ -456,10 +462,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			const self = this;
 			return (row) => {
 				const retVal = $(`<span class="s2-ri-withtb">${row.text
-				}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
-				} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
-				}${self.trailingButton.text || ''
-				}</button></span>`);
+					}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
+					} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
+					}${self.trailingButton.text || ''
+					}</button></span>`);
 				retVal.find('button').click((e) => {
 					try {
 						clearTimeout(self.preventDefaultTimeout);
@@ -550,10 +556,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			useListviewBuilder: false,
 			formatSelection: this.customRenderSelectionResult != null
 				? this.handleCustomRenderResult(
-						h,
-						this.customRenderSelectionResult,
-						'mobile',
-					)
+					h,
+					this.customRenderSelectionResult,
+					'mobile',
+				)
 				: null,
 			formatResult: this.getCustomFormatOptions(h, 'mobile'),
 			onItemSelected: (items, exclusivity) => {
@@ -624,6 +630,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	}
 
 	useMobile() {
+		if (this.displayInline()) {
+			return false;
+		}
+
 		return PortalUtils.treatAsMobileDevice() && !this.tags && !PortalUtils.isInIframe();
 	}
 
@@ -749,6 +759,14 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		}
 	}
 
+	displayInline(): boolean {
+		if (this.displayMode == null && this.displayMode == 'default') {
+			return false;
+		}
+
+		return true;
+	}
+
 	updateSelect2() {
 		if (this.useSelect2()) {
 			const self = this;
@@ -756,6 +774,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			const s2Constructor: 'select2MultiCheckboxes' | 'select2' = this.useMultiCheckboxes() ? 'select2MultiCheckboxes' : 'select2';
 			const selected = this.getSelectedItems();
 			const s2Elem = this.getSelect2RootElement();
+			const isInline = this.displayInline();
 			let alreadyBound = true;
 
 			if (this.disabled == true) {
@@ -824,6 +843,11 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 						}
 					})
 					.on('select2:closing', (e) => {
+						if (isInline) {
+							e.preventDefault();
+							return;
+						}
+
 						if (self.trailingButton) {
 							if (self.preventDefaultTrigger == false) {
 								self.preventDefaultTrigger = null;
@@ -922,7 +946,8 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			const s2Args: any = {
 				allowExclusiveSearch: this.allowExclusiveSearch == true,
 				minimumResultsForSearch: this.disableSearch == true ? -1 : 0,
-				closeOnSelect: this.closeOnSelect != false && !this.useMultiCheckboxes(),
+				dropdownParent: isInline ? s2Elem.parent() : undefined,
+				closeOnSelect: isInline ? false : (this.closeOnSelect != false && !this.useMultiCheckboxes()),
 				placeholder: this.placeholder,
 				selectionCssClass: ':all:',
 				allowClear: this.placeholder != null && this.placeholder.length > 0,
@@ -1273,6 +1298,24 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 						this.bindSelect2TagsButton(DropdownSelect2Helper.getSelect2Instance(s2Elem));
 					}
 				}
+
+				if (isInline) {
+					instance.dropdown._attachPositioningHandler = () => { };
+					instance.results.ensureHighlightVisible = () => { };
+
+					const oldTrigger = instance.dropdown.$search.trigger;
+					instance.dropdown.$search.trigger = (ev: string) => {
+						if (ev == 'focus') {
+							return;
+						}
+
+						oldTrigger.call(instance.dropdown.$search, ev);
+					}
+
+					setTimeout(() => {
+						instance.open();
+					}, 0);
+				}
 			}
 
 			DropdownSelect2Helper.getSelect2Instance(s2Elem).dataAccessor.getData = () => opts;

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

@@ -127,6 +127,7 @@ import { PortalUtils } from '../../../common/utils/utils';
 				},
 			},
 			language: options.language,
+			dropdownParent: options.dropdownParent,
 			dropdownAutoWidth: options.dropdownAutoWidth == true,
 			minimumResultsForSearch: options.minimumResultsForSearch,
 			placeholder: options.placeholder,

package/package.json

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