inviton-powerduck 0.0.159 → 0.0.160

package/app/css/input-effects.css

@@ -0,0 +1,77 @@
+.pd-dropdown-open-animation {
+    animation: pdInputShowAnimationIn 180ms cubic-bezier(.2, .8, .2, 1);
+    transform-origin: top center;
+}
+
+.pd-dropdown-open-animation-above {
+    animation: pdInputShowAnimationInAbove 180ms cubic-bezier(.2, .8, .2, 1);
+    transform-origin: bottom center;
+}
+
+.pd-dropdown-close-animation {
+    animation: pdInputHideAnimationInAbove 160ms cubic-bezier(.4, .2, .2, 1);
+    transform-origin: top center;
+}
+
+.pd-dropdown-close-animation-above {
+    animation: pdInputHideAnimationInAboveAbove 160ms cubic-bezier(.4, .2, .2, 1);
+    transform-origin: bottom center;
+}
+
+
+@keyframes pdInputShowAnimationIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-6px) scale(.95);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes pdInputShowAnimationInAbove {
+    0% {
+        opacity: 0;
+        transform: translateY(6px) scale(.95);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes pdInputHideAnimationInAbove {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-6px) scale(.96);
+    }
+}
+
+@keyframes pdInputHideAnimationInAboveAbove {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(6px) scale(.96);
+    }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+
+    .pd-dropdown-open-animation,
+    .pd-dropdown-open-animation-above-above {
+        animation: none;
+    }
+}

package/components/dropdown/index.tsx

@@ -14,6 +14,7 @@ import FilterableSelect from './mobile/legacy_fdd';
 import 'select2';
 import './ts/select2-multi-checkboxes';
 import 'select2/dist/css/select2.css';
+import './../../app/css/input-effects.css';
 import './css/dropdown.css';
 import { capitalize } from '../../common/extensions/string-extensions';
 
@@ -447,10 +448,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);
@@ -541,10 +542,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) => {
@@ -759,6 +760,21 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				s2Elem
 					.attr('data-vebound', 'true')
 					.on('select2:close', () => {
+						const $container = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement()).$dropdown;
+						$container.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above');
+						$container[0].offsetWidth;
+
+						if ($container.hasClass('select2-container--above')) {
+							$container.addClass('pd-dropdown-close-animation-above');
+						} else {
+							$container.addClass('pd-dropdown-close-animation');
+						}
+
+						$container.one('animationend', function () {
+							$container.removeClass('pd-dropdown-close-animation pd-dropdown-close-animation-above');
+						});
+
+
 						if (self.pendingChange != null) {
 							const data = self.pendingChange?.data;
 							self.pendingChange = null;
@@ -772,6 +788,17 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							e.stopPropagation();
 						}
 					})
+					.on('select2:open', () => {
+						const $container = DropdownSelect2Helper.getSelect2Instance(this.getSelect2RootElement()).$dropdown;
+						$container.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+						$container[0].offsetWidth; // reflow
+
+						if ($container.hasClass('select2-container--above')) {
+							$container.addClass('pd-dropdown-open-animation-above');
+						} else {
+							$container.addClass('pd-dropdown-open-animation');
+						}
+					})
 					.on('select2:unselect', (e) => {
 						(self as any).preventOpen = true;
 						setTimeout(() => {

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

@@ -1069,11 +1069,15 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 					});
 				});
 			} else {
-				box[isModalDisplayMode() ? 'fadeIn' : 'slideDown'](animationTime, () => {
-					$(self).trigger('datepicker-opened', {
-						relatedTarget: box,
-					});
-				});
+				box.show();
+				box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above');
+				box[0].offsetWidth; // reflow
+
+				if (box.hasClass('select2-container--above')) {
+					box.addClass('pd-dropdown-open-animation-above');
+				} else {
+					box.addClass('pd-dropdown-open-animation');
+				}
 			}
 
 			$(self).trigger('datepicker-open', {
@@ -1932,7 +1936,9 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 		}
 
 		function closeDatePicker(): void {
-			if (opt.alwaysOpen) { return; }
+			if (opt.alwaysOpen) {
+				return;
+			}
 
 			const afterAnim = function () {
 				$(self).data('date-picker-opened', false);
@@ -1943,7 +1949,14 @@ import { utcEpochMilliseconds } from '../../../../common/extensions/temporal-ext
 			if (opt.customCloseAnimation) {
 				opt.customCloseAnimation.call(box.get(0), afterAnim);
 			} else {
-				$(box)[isModalDisplayMode() ? 'fadeOut' : 'slideUp'](opt.duration, afterAnim);
+				box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+				box[0].offsetWidth; // reflow
+				box.addClass('pd-dropdown-close-animation');
+
+				box.one('animationend', function () {
+					box.hide();
+					box.removeClass('pd-dropdown-open-animation pd-dropdown-open-animation-above pd-dropdown-close-animation pd-dropdown-close-animation-above');
+				});
 			}
 
 			$(self).trigger('datepicker-close', {

package/package.json

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