@eclipse-scout/core 22.0.0-beta.5 → 22.0.2

package/src/util/Device.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -267,7 +267,7 @@ export default class Device {
     let browsers = Device.Browser;
     return (browser === browsers.CHROME && version >= 69)
       || (browser === browsers.FIREFOX && version >= 62)
-      || (browser === browsers.SAFARI && version >= 12.1);
+      || (browser === browsers.SAFARI && version >= 12);
   }
 
   /**
@@ -364,6 +364,10 @@ export default class Device {
     } else if (this.browser === browsers.EDGE) {
       versionRegex = /Edge\/([0-9]+\.?[0-9]*)/;
     } else if (this.browser === browsers.SAFARI) {
+      if (this.isIos() && userAgent.indexOf('Version/') < 0) {
+        this.browserVersion = this.systemVersion;
+        return;
+      }
       versionRegex = /Version\/([0-9]+\.?[0-9]*)/;
     } else if (this.browser === browsers.FIREFOX) {
       versionRegex = /Firefox\/([0-9]+\.?[0-9]*)/;

package/src/util/arrays.js

@@ -206,6 +206,11 @@ export function containsAll(haystack, needles) {
   });
 }
 
+/**
+ * @template T
+ * @param {T[]} arr
+ * @return {T}
+ */
 export function first(arr) {
   if (Array.isArray(arr)) {
     return arr[0];
@@ -213,6 +218,11 @@ export function first(arr) {
   return arr;
 }
 
+/**
+ * @template T
+ * @param {T[]} arr
+ * @return {T}
+ */
 export function last(arr) {
   if (Array.isArray(arr)) {
     return arr[arr.length - 1];
@@ -285,8 +295,8 @@ export function union(array1, array2) {
   return result;
 }
 
-// noinspection DuplicatedCode
 export function equalsIgnoreOrder(arr, arr2) {
+  // noinspection DuplicatedCode
   if (arr === arr2) {
     return true;
   }
@@ -302,8 +312,8 @@ export function equalsIgnoreOrder(arr, arr2) {
   return containsAll(arr, arr2);
 }
 
-// noinspection DuplicatedCode
 export function equals(arr, arr2) {
+  // noinspection DuplicatedCode
   if (arr === arr2) {
     return true;
   }
@@ -600,6 +610,17 @@ export function toMap(array, keyMapper = (el => el), valueMapper = (el => el)) {
   }, {}));
 }
 
+/**
+ * If the argument is an empty array, null is returned. Otherwise, the argument is returned unchanged.
+ *
+ * @template T
+ * @param {T[]} array
+ * @return {T[]|null}
+ */
+export function nullIfEmpty(array) {
+  return empty(array) ? null : array;
+}
+
 export default {
   $indexOf,
   $remove,
@@ -638,6 +659,7 @@ export default {
   max,
   min,
   move,
+  nullIfEmpty,
   pushAll,
   pushIfDefined,
   pushSet,

package/src/util/dragAndDrop.js

@@ -175,13 +175,13 @@ export function _createDragAndDropHandlerOptions(target) {
     target: target,
     supportedScoutTypes: dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
     validateFiles: (files, defaultValidator) => defaultValidator(files),
-    onDrop: (files) => {
+    onDrop: files => {
     },
     dropType: () => dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
     dropMaximumSize: () => target.dropMaximumSize,
     doInstall: () => target.enabledComputed,
     container: () => target.$container,
-    additionalDropProperties: (event) => {
+    additionalDropProperties: event => {
     }
   };
 }
@@ -269,6 +269,7 @@ export default {
  * @property {String} [selector] CSS selector which will be added to the event source.
  * @property {dropType} [dropType] Returns the allowed drop type during a drop event. Default is {@link dragAndDrop.SCOUT_TYPES.FILE_TRANSFER}
  * @property {dropMaximumSize} [dropMaximumSize] Returns the maximum allowed size of a dropped object. Default is {@link DragAndDropTarget.dropMaximumSize}
- * @property {validateFiles} [validateFiles] An optional function to add a custom file validation logic. Throw a {@link dropValidationErrorMessage} to indicate a failed validation. if no custom validator is installed, the default maximum file size validator is invoked.
+ * @property {validateFiles} [validateFiles] An optional function to add a custom file validation logic. Throw a {@link dropValidationErrorMessage} to indicate a failed validation.
+ *           If no custom validator is installed, the default maximum file size validator is invoked.
  * @property {additionalDropProperties} [additionalDropProperties] Returns additional drop properties to be used in {@link DragAndDropHandler.uploadFiles} as uploadProperties
- */
+ */

package/src/util/events.js

@@ -220,7 +220,7 @@ export function onSwipe($element, id, onDown, onMove, onUp) {
       let pageX = events.pageX(event);
       let deltaX = pageX - origPageX;
       let newLeft = origPosLeft + deltaX;
-      if (newLeft != curPosLeft) {
+      if (newLeft !== curPosLeft) {
         // only update swipe direction if it actually changed
         direction = Math.sign(newLeft - curPosLeft);
       }

package/src/util/objects.js

@@ -693,11 +693,14 @@ export function resolveConstProperty(object, config) {
 /**
  * @param {object} obj
  * @returns {Boolean|undefined}
- *  - true if the obj is empty
+ *  - true if the obj is empty, null or undefined
  *  - false if the obj is not empty
  *  - nothing if the obj is not an object
  */
 export function isEmpty(obj) {
+  if (isNullOrUndefined(obj)) {
+    return true;
+  }
   if (!isPlainObject(obj)) {
     return;
   }

package/src/widget/FilterSupport.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -51,7 +51,7 @@ export default class FilterSupport extends WidgetSupport {
       scout.assertParameter('getElementsForFiltering', options.getElementsForFiltering);
       this._getElementsForFiltering = options.getElementsForFiltering;
     }
-    this._getElementText = options.getElementText || ((element) => $(element).text());
+    this._getElementText = options.getElementText || (element => $(element).text());
 
     if (options.createTextFilter) {
       scout.assertParameter('updateTextFilterText', options.updateTextFilterText);
@@ -126,10 +126,12 @@ export default class FilterSupport extends WidgetSupport {
     this._filterField.$field.attr('tabIndex', -1);
 
     let color = styles.getFirstOpaqueBackgroundColor(this._filterField.$container),
-      transparentColorRgba = $.extend(true, {}, styles.rgb(color), {alpha: 0.5}),
-      transparentColor = 'rgba(' + transparentColorRgba.red + ', ' + transparentColorRgba.green + ', ' + transparentColorRgba.blue + ', ' + transparentColorRgba.alpha + ')';
+      colorRgba = $.extend(true, {red: 0, green: 0, blue: 0, alpha: 1}, styles.rgb(color)),
+      transparent50Color = 'rgba(' + colorRgba.red + ', ' + colorRgba.green + ', ' + colorRgba.blue + ', ' + 0.5 + ')',
+      transparent80Color = 'rgba(' + colorRgba.red + ', ' + colorRgba.green + ', ' + colorRgba.blue + ', ' + 0.8 + ')';
     this._filterField.$container.css('--filter-field-background-color', color);
-    this._filterField.$container.css('--filter-field-transparent-background-color', transparentColor);
+    this._filterField.$container.css('--filter-field-transparent-50-background-color', transparent50Color);
+    this._filterField.$container.css('--filter-field-transparent-80-background-color', transparent80Color);
 
     this._textFilter = this._createTextFilter();
     this._textFilter.synthetic = true;

package/src/widget/FilterSupport.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -10,11 +10,12 @@
  */
 .filter-field {
   position: absolute;
+  --filter-field-height: @filter-field-height;
   --filter-field-bottom: @filter-field-bottom;
-  --filter-field-max-bottom: calc(~'50% - ' @filter-field-height / 2);
+  --filter-field-max-bottom: calc(~'50% - ' var(--filter-field-height) / 2);
   bottom: min(var(--filter-field-bottom), var(--filter-field-max-bottom));
   right: @filter-field-right;
-  height: @filter-field-height;
+  height: var(--filter-field-height);
   width: @filter-field-width;
   min-width: @filter-field-min-width;
   max-width: @filter-field-max-width;
@@ -25,6 +26,13 @@
   #scout.drop-shadow();
   background-color: var(--filter-field-background-color);
   opacity: 1;
+  visibility: visible;
+
+  // delay the "fade in" transition
+  --filter-field-opacity-transition-delay: 100ms;
+  // the visibility transition is not a smooth transition but allows to set the value visibility delayed
+  // set visibility to visible right before the "fade in" transition starts
+  --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
 
   transition: bottom @filter-field-transition-duration ease-in-out,
   right @filter-field-transition-duration ease-in-out,
@@ -33,10 +41,17 @@
   min-width @filter-field-transition-duration ease-in-out,
   max-width @filter-field-transition-duration ease-in-out,
   box-shadow @filter-field-transition-duration ease-in-out,
-  opacity @filter-field-transition-duration ease-in-out;
+  opacity @filter-field-transition-duration ease-in-out var(--filter-field-opacity-transition-delay),
+  visibility 0s var(--filter-field-visibility-transition-delay);
 
   :not(:hover) > &:not(.focused):not(.focus-inside-widget).empty {
     opacity: 0;
+    visibility: hidden;
+
+    // start the "fade out" transition right away
+    --filter-field-opacity-transition-delay: 0s;
+    // set visibility to hidden right after the "fade out" transition ends
+    --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
   }
 
   &::before {
@@ -46,7 +61,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    bottom: (@filter-field-height - @filter-field-icon-size) / 2;
+    bottom: calc((var(--filter-field-height) - @filter-field-icon-size) / 2);
     right: @text-field-icon-margin-x + 1px;
     height: @filter-field-icon-size;
     width: @filter-field-icon-size;
@@ -93,7 +108,7 @@
   }
 
   &:not(.focused).empty {
-    --filter-field-bottom: @filter-field-bottom + ((@filter-field-height - @filter-field-icon-size) / 2);
+    --filter-field-bottom: @filter-field-bottom + ((var(--filter-field-height) - @filter-field-icon-size) / 2);
     --filter-field-max-bottom: calc(~'50% - ' @filter-field-icon-size / 2);
     right: @filter-field-right + @text-field-icon-margin-x + 1px;
     height: @filter-field-icon-size;
@@ -101,7 +116,7 @@
     min-width: @filter-field-icon-size;
     max-width: @filter-field-icon-size;
     box-shadow: none;
-    #scout.backdrop-filter(@background-color: var(--filter-field-transparent-background-color), @backdrop-filter: blur(2px), @fallback-background-color: var(--filter-field-background-color));
+    #scout.backdrop-filter(@background-color: var(--filter-field-transparent-50-background-color), @backdrop-filter: blur(2px), @fallback-background-color: var(--filter-field-transparent-80-background-color));
 
     &::before {
       bottom: 0;
@@ -130,8 +145,9 @@
 
 .filter-field-container {
   position: sticky;
+  --filter-field-height: @filter-field-height;
   --filter-field-container-top: calc(~'100% - ' @filter-field-bottom);
-  --filter-field-container-min-top: calc(~'50% + ' @filter-field-height / 2);
+  --filter-field-container-min-top: calc(~'50% + ' var(--filter-field-height) / 2);
   top: max(var(--filter-field-container-top), var(--filter-field-container-min-top));
   left: calc(~'100% - ' @filter-field-right);
   width: 0;
@@ -143,6 +159,10 @@
 
   &:not(:hover) > .filter-field:not(.focused):not(.focus-inside-widget).empty {
     opacity: 1;
+    visibility: visible;
+
+    --filter-field-opacity-transition-delay: 100ms;
+    --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
   }
 
   & > .filter-field {
@@ -152,10 +172,14 @@
 
     :not(:hover) > &:not(.focused):not(.focus-inside-widget).empty {
       opacity: 0;
+      visibility: hidden;
+
+      --filter-field-opacity-transition-delay: 0s;
+      --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
     }
 
     &:not(.focused).empty {
-      bottom: ((@filter-field-height - @filter-field-icon-size) / 2);
+      bottom: calc((var(--filter-field-height) - @filter-field-icon-size) / 2);
       right: @text-field-icon-margin-x + 1px;
     }
   }
@@ -166,4 +190,9 @@
   .filter-field {
     .hidden();
   }
+}
+
+.dense .filter-field,
+.dense .filter-field-container {
+  --filter-field-height: @filter-field-height-dense;
 }

package/src/widget/Widget.js

@@ -39,7 +39,7 @@ export default class Widget {
     this.cloneOf = null;
 
     /**
-     * The 'rendering' flag is set the true while the _inital_ rendering is performed.
+     * The 'rendering' flag is set the true while the _initial_ rendering is performed.
      * It is used to to something different in a _render* method when the method is
      * called for the first time.
      */
@@ -124,6 +124,12 @@ export default class Widget {
     READ_ONLY: 1
   };
 
+  /**
+   * Initializes the widget instance. All properties of the model parameter (object) are set as properties on the widget instance.
+   * Calls {@link Widget#_init} and triggers an <em>init</em> event when initialization has been completed.
+   *
+   * @param {object} model
+   */
   init(model) {
     let staticModel = this._jsonModel();
     if (staticModel) {
@@ -148,9 +154,12 @@ export default class Widget {
   }
 
   /**
-   * @param {object} options
-   * - parent (required): The parent widget
-   * - session (optional): If not specified the session of the parent is used
+   * Initializes the widget instance. All properties of the model parameter (object) are set as properties on the widget instance.
+   * Override this function to initialize widget specific properties in sub-classes.
+   *
+   * @param {object} model Properties:<ul>
+   *   <li>parent (required): parent widget</li>
+   *   <li>session (optional): If not specified, session of parent widget is used</li></ul>
    */
   _init(model) {
     if (!model.parent) {
@@ -515,7 +524,8 @@ export default class Widget {
    * After the animation is executed, the element gets removed using this._removeInternal.
    */
   _removeAnimated() {
-    if (!Device.get().supportsCssAnimation() || !this.$container || this.$container.isDisplayNone()) {
+    let animateRemovalWhileRemovingParent = this._animateRemovalWhileRemovingParent();
+    if ((this.parent.removing && !animateRemovalWhileRemovingParent) || !Device.get().supportsCssAnimation() || !this.$container || this.$container.isDisplayNone()) {
       // Cannot remove animated, remove regularly
       this._removeInternal();
       return;
@@ -535,7 +545,7 @@ export default class Widget {
       if (!this.animateRemovalClass) {
         throw new Error('Missing animate removal class. Cannot remove animated.');
       }
-      if (!this.$container.isVisible() || !this.$container.isEveryParentVisible()) {
+      if (!this.$container.isVisible() || !this.$container.isEveryParentVisible() || !this.$container.isAttached()) {
         // If element is not visible, animationEnd would never fire -> remove it immediately
         this._removeInternal();
         return;
@@ -548,7 +558,14 @@ export default class Widget {
 
     // If the parent is being removed while the animation is running, the animationEnd event will never fire
     // -> Make sure remove is called nevertheless. Important: remove it before the parent is removed to maintain the regular remove order
-    this.parent.one('removing', this._parentRemovingWhileAnimatingHandler);
+    if (!animateRemovalWhileRemovingParent) {
+      this.parent.one('removing', this._parentRemovingWhileAnimatingHandler);
+    }
+  }
+
+  _animateRemovalWhileRemovingParent() {
+    // By default, remove animation is prevented when parent is being removed
+    return false;
   }
 
   _onParentRemovingWhileAnimating() {