@eclipse-scout/core 22.0.1 → 22.0.11

package/src/desktop/notification/DesktopNotification.js

@@ -160,18 +160,17 @@ export default class DesktopNotification extends ScoutNotification {
       return;
     }
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.NONE) {
+      this._hideLaterIfNativeOnly();
       return;
     }
 
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.BACKGROUND && !this._isDocumentHidden()) {
+      this._hideLaterIfNativeOnly();
       return;
     }
 
     if (window.Notification && Notification.permission === 'denied') {
-      if (this.nativeOnly) {
-        // If native notifications are not allowed, there is no need to keep the (invisible) desktop notification open
-        this.hide();
-      }
+      this._hideLaterIfNativeOnly();
       return;
     }
     if (this._checkNotificationPromise()) {
@@ -182,6 +181,14 @@ export default class DesktopNotification extends ScoutNotification {
     }
   }
 
+  _hideLaterIfNativeOnly() {
+    if (!this.nativeOnly) {
+      return;
+    }
+    // If native notifications are not shown, there is no need to keep the (invisible) desktop notification open (prevent dom-leak)
+    setTimeout(() => this.hide()); // async because this method is called in render and removing the notification within render throws exception
+  }
+
   /**
    * Checks if browser supports the promise-based version of the method requestPermission. Safari only supports the older callback version.
    */

package/src/desktop/notification/DesktopNotification.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
@@ -12,12 +12,14 @@
 @desktop-notification-margin-bottom: 10px;
 
 .desktop-notifications {
+  @desktop-notifications-margin-top: @desktop-header-height + 8px;
+
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(~'100% - ' @desktop-notifications-margin-top);
   width: @desktop-notification-width;
-  margin-top: @desktop-header-height + 8px;
+  margin-top: @desktop-notifications-margin-top;
   pointer-events: none; /* Don't block access to the elements in the background */
 }
 

package/src/desktop/outline/Outline.less

@@ -58,10 +58,6 @@
         line-height: @outline-node-control-line-height;
         color: @outline-node-control-color;
 
-        &::before {
-          font-size: @outline-node-control-size;
-        }
-
         &:hover {
           color: @highlight-color;
         }
@@ -77,6 +73,10 @@
 
         & > .tree-node-control {
           color: @outline-node-selected-control-color;
+
+          &:hover {
+            color: @highlight-color;
+          }
         }
 
         & > .font-icon {

package/src/desktop/viewbutton/ViewButton.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 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
@@ -70,14 +70,12 @@
 
         &.left {
           visibility: hidden;
-          left: 0;
-          animation: show-view-tab-left-edge @view-tab-transition-duration ease-out 0s forwards;
+          animation: show-view-tab-left-edge 40ms ease-out 160ms forwards;
         }
 
         &.right {
           visibility: hidden;
-          right: 0;
-          animation: show-view-tab-right-edge @view-tab-transition-duration ease-out 0s forwards;
+          animation: show-view-tab-right-edge 40ms ease-out 160ms forwards;
         }
       }
     }
@@ -132,15 +130,21 @@
 }
 
 @keyframes show-view-tab-left-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(-24px);
+    left: -5px;
+  }
+  100% {
+    left: -12px;
   }
 }
 
 @keyframes show-view-tab-right-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(24px);
+    right: -5px;
+  }
+  100% {
+    right: -12px;
   }
 }

package/src/desktop/viewbutton/ViewMenuPopupEnterKeyStroke.js

@@ -9,7 +9,7 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 
-import {KeyStroke, keys} from '../../index';
+import {keys, KeyStroke} from '../../index';
 
 export default class ViewMenuPopupEnterKeyStroke extends KeyStroke {
 
@@ -24,6 +24,7 @@ export default class ViewMenuPopupEnterKeyStroke extends KeyStroke {
         return tile.$container;
       }
     };
+    this.inheritAccessibility = false;
   }
 
   accept(event) {

package/src/desktop/viewbutton/ViewMenuTab.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 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
@@ -19,11 +19,11 @@
     align-items: center;
     justify-content: center;
     background-color: transparent;
+    cursor: pointer;
 
     &:hover {
       background-color: @view-menu-tab-hover-background-color;
       color: inherit;
-      cursor: pointer;
     }
 
     &.disabled {
@@ -158,6 +158,7 @@
       & > .view-button {
         padding-left: @view-tab-margin;
         width: @view-tab-selected-width;
+        cursor: default;
       }
 
       .selected-button-invisible& > .view-menu {

package/src/filechooser/FileChooser.js

@@ -118,7 +118,7 @@ export default class FileChooser extends Widget {
     this.$container.addClass('calc-helper');
     let windowSize = this.$container.windowSize();
     // Use css width, but ensure that it is not larger than the window (mobile)
-    let w = Math.min(this.$container.width(), windowSize.width - 20);
+    let w = Math.min(this.$container.width(), windowSize.width);
     this.$container.css('min-width', w);
     this.$container.css('max-width', w);
     this.$container.removeClass('calc-helper');

package/src/filechooser/FileChooser.less

@@ -1,9 +1,9 @@
 /*
- * 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -51,7 +51,7 @@
   text-align: center;
   word-wrap: break-word;
   #scout.font-text-large(@font-weight-bold);
-  color: @active-color;
+  color: @info-color;
 }
 
 .file-chooser-label {
@@ -100,14 +100,19 @@
 
 @media (max-width: @filechooser-max-width) {
   .file-chooser {
-    /* reduce message box width on small screens */
-    max-width: 330px;
-    /* no need to have a margin on small screens */
-    margin: 0;
-
-    & > .box-buttons > .box-button {
-      margin-right: 4px;
-      min-width: 70px; /* less min width for buttons on small screens */
+    margin: 0; /* no need to have a margin on small screens */
+
+    & > .box-buttons {
+      padding: 0 13px 26px 13px; /* use less x-padding for buttons so that more text can be shown */
+
+      & > .box-button {
+        margin-right: 4px;
+        min-width: 70px; /* less min width for buttons on small screens */
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
     }
   }
 }

package/src/focus/FocusContext.js

@@ -121,7 +121,7 @@ export default class FocusContext {
     this.focusedElement = event.target;
 
     // Do not update current focus context nor validate focus if target is $entryPoint.
-    // That is because focusing the $entryPoint is done whenever no control is currently focusable, e.g. due to glasspanes.
+    // That is because focusing the $entryPoint is done whenever no control is currently focusable, e.g. due to glass panes.
     if (event.target === this.$container.entryPoint(true)) {
       return;
     }
@@ -166,12 +166,12 @@ export default class FocusContext {
   /**
    * Focuses the given element if being a child of this context's container and matches the given filter (if provided).
    *
-   * @param element
-   *        the element to gain focus, or null to focus the context's first focusable element matching the given filter.
-   * @param filter
-   *        filter to control which element to gain focus, or null to accept all focusable candidates.
+   * @param {HTMLElement|$} [element]
+   *        the element to focus, or null to focus the context's first focusable element matching the given filter.
+   * @param {function} [filter]
+   *        filter that controls which element should be focused, or null to accept all focusable candidates.
    * @param {object} [options]
-   * @param {boolean} [options.preventScroll] a boolean whether to prevent scrolling to focused element or not (defaults to false)
+   * @param {boolean} [options.preventScroll] prevents scrolling to new focused element (defaults to false)
    */
   validateAndSetFocus(element, filter, options) {
     // Ensure the element to be a child element, or set it to null otherwise.
@@ -213,8 +213,11 @@ export default class FocusContext {
 
   /**
    * Focuses the requested element.
+   *
+   * @param {HTMLElement} element
+   *        the element to focus, or null to focus the context's first focusable element matching the given filter.
    * @param {object} [options]
-   * @param {boolean} [options.preventScroll] a boolean whether to prevent scrolling to focused element or not (defaults to false)
+   * @param {boolean} [options.preventScroll] prevents scrolling to new focused element (defaults to false)
    */
   _focus(elementToFocus, options) {
     options = options || {};
@@ -237,7 +240,7 @@ export default class FocusContext {
       elementToFocus = null;
     }
 
-    // Focus $entryPoint if current focus is to be blured.
+    // Focus $entryPoint if current focus is to be blurred.
     // Otherwise, the HTML body would be focused which makes global keystrokes (like backspace) not to work anymore.
     elementToFocus = elementToFocus || this.$container.entryPoint(true);
 

package/src/focus/FocusManager.js

@@ -27,7 +27,8 @@ export default class FocusManager {
       // Auto focusing of elements is bad with on screen keyboards -> deactivate to prevent unwanted popping up of the keyboard
       active: !Device.get().supportsOnlyTouch(),
       // Preventing blur is bad on touch devices because every touch on a non input field is supposed to close the keyboard which does not happen if preventDefault is used on mouse down
-      restrictedFocusGain: !Device.get().supportsOnlyTouch()
+      restrictedFocusGain: !Device.get().supportsOnlyTouch(),
+      session: null
     };
     $.extend(this, defaults, options);
 
@@ -251,15 +252,33 @@ export default class FocusManager {
   }
 
   requestFocusIfReady(element, filter) {
-    return this.requestFocus(element, filter, true);
+    return this.requestFocus(element, filter, {
+      onlyIfReady: true
+    });
   }
 
   /**
    * Requests the focus for the given element, but only if being a valid focus location.
    *
+   * @param {HTMLElement|$} [element]
+   *        the element to focus, or null to focus the context's first focusable element matching the given filter.
+   * @param {function} [filter]
+   *        filter that controls which element should be focused, or null to accept all focusable candidates.
+   * @param {object|boolean} [options]
+   *        Use object, boolean is deprecated
+   * @param {boolean} [options.preventScroll] prevents scrolling to new focused element (defaults to false)
+   * @param {boolean} [options.onlyIfReady] prevents focusing if not ready
    * @return {boolean} true if focus was gained, false otherwise.
    */
-  requestFocus(element, filter, onlyIfReady) {
+  requestFocus(element, filter, options) {
+    // backward compatibility
+    if (typeof options === 'boolean') {
+      options = {
+        onlyIfReady: options
+      };
+    } else {
+      options = options || {};
+    }
     element = element instanceof $ ? element[0] : element;
     if (!element) {
       return false;
@@ -267,10 +286,10 @@ export default class FocusManager {
 
     let context = this._findFocusContextFor(element);
     if (context) {
-      if (onlyIfReady && !context.prepared) {
+      if (scout.nvl(options.onlyIfReady, false) && !context.prepared) {
         return false;
       }
-      context.validateAndSetFocus(element, filter);
+      context.validateAndSetFocus(element, filter, options);
     }
 
     return focusUtils.isActiveElement(element);

package/src/form/Form.less

@@ -125,6 +125,7 @@
     #scout.overflow-ellipsis-nowrap();
     font-size: @font-size-large;
     color: @title-color;
+    margin-top: @text-margin-top;
   }
 
   & > .sub-title {

package/src/form/fields/LookupBox.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2017 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -19,6 +19,7 @@ export default class LookupBox extends ValueField {
     this.gridDataHints.weightY = 1.0;
     this.gridDataHints.h = 2;
     this.value = [];
+    this.clearable = ValueField.Clearable.NEVER;
 
     this.lookupCall = null;
     this._pendingLookup = null;
@@ -66,6 +67,8 @@ export default class LookupBox extends ValueField {
     this.$field.addDeviceClass();
     this.$field.addClass('structure');
     this._renderFilterBox();
+
+    this.$container.css('--inactive-lookup-row-suffix-text', `'${this.session.text('InactiveState')}'`);
   }
 
   _renderFilterBox() {

package/src/form/fields/LookupBox.less

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2017 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -43,6 +43,32 @@
         top: 0;
         height: 100%;
       }
+
+      &.inactive {
+        font-style: italic;
+
+        & > .table-cell.last > .text::after {
+          content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+        }
+      }
+
+      // necessary for Scout Classic as row passes the css classes to its cells
+      & > .table-cell.last.inactive {
+        font-style: italic;
+
+        & > .text::after {
+          content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+        }
+      }
+    }
+
+    & > .tree-data > .tree-node.inactive,
+    & > .tree-data > .animation-wrapper > .tree-node.inactive {
+      font-style: italic;
+
+      & > .text::after {
+        content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+      }
     }
   }
 }

package/src/form/fields/TextFieldIcon.less

@@ -16,7 +16,7 @@
 
   &::before {
     #scout.font-icon();
-    font-size: 14px;
+    font-size: @font-size-icon-small;
     color: @text-field-icon-color;
     border-radius: @control-border-radius;
     width: @text-field-icon-size;
@@ -39,4 +39,4 @@
       background-color: @hover-background-color;
     }
   }
-}
+}

package/src/form/fields/ValueField.js

@@ -28,6 +28,7 @@ export default class ValueField extends FormField {
     this.value = null;
     this.validators = [];
     this.validators.push(this._validateValue.bind(this));
+    this._updateDisplayTextPending = false;
 
     this.$clearIcon = null;
 
@@ -517,16 +518,24 @@ export default class ValueField extends FormField {
     }
     value = scout.nvl(value, this.value);
     let returned = this.formatValue(value);
-    if (returned && $.isFunction(returned.promise)) {
+    if (objects.isPromise(returned)) {
+      this._updateDisplayTextPending = true;
       // Promise is returned -> set display text later
       returned
         .done(this.setDisplayText.bind(this))
         .fail(() => {
-          this.setDisplayText('');
+          // If display text was updated in the meantime, don't override the text with an empty string
+          if (this._updateDisplayTextPending) {
+            this.setDisplayText('');
+          }
           $.log.isInfoEnabled() && $.log.info('Could not resolve display text for value: ' + value);
+        })
+        .always(() => {
+          this._updateDisplayTextPending = false;
         });
     } else {
       this.setDisplayText(returned);
+      this._updateDisplayTextPending = false;
     }
   }
 

package/src/form/fields/breadcrumbbarfield/BreadcrumbBarField.less

@@ -0,0 +1,20 @@
+/*
+ * 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
+ * https://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+
+  // BreadCrumbItem uses 14px instead of 13px font size
+  padding-bottom: @breadcrumb-bar-field-padding-bottom;
+
+  .dense & {
+    // But it uses normal 13px in dense mode
+    padding-bottom: @breadcrumb-bar-field-padding-bottom-dense;
+  }
+}

package/src/form/fields/button/ButtonKeyStroke.js

@@ -20,9 +20,6 @@ export default class ButtonKeyStroke extends KeyStroke {
     this.stopImmediatePropagation = true;
 
     this.renderingHints.hAlign = HAlign.RIGHT;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
-      return this.field.$container;
-    }.bind(this);
   }
 
   /**

package/src/form/fields/datefield/DateField.js

@@ -8,29 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  arrays,
-  DateFormat,
-  DatePickerPopup,
-  DatePredictionFailedStatus,
-  dates,
-  DateTimeCompositeLayout,
-  Device,
-  fields,
-  focusUtils,
-  FormField,
-  HtmlComponent,
-  InputFieldKeyStrokeContext,
-  keys,
-  objects,
-  ParsingFailedStatus,
-  scout,
-  Status,
-  strings,
-  styles,
-  TimePickerPopup,
-  ValueField
-} from '../../../index';
+import {arrays, DateFormat, DatePickerPopup, DatePredictionFailedStatus, dates, DateTimeCompositeLayout, Device, fields, focusUtils, FormField, HtmlComponent, InputFieldKeyStrokeContext, keys, objects, ParsingFailedStatus, scout, Status, strings, styles, TimePickerPopup, ValueField} from '../../../index';
 import $ from 'jquery';
 
 export default class DateField extends ValueField {
@@ -695,7 +673,7 @@ export default class DateField extends ValueField {
   }
 
   _renderDateClearable() {
-    if (this.hasDate || this.isClearable()) {
+    if (this.hasDate && this.isClearable()) {
       if (!this.$dateClearIcon) {
         // date clear icon
         this.$dateClearIcon = this.$field.appendSpan('icon date-clear unfocusable text-field-icon action')
@@ -711,14 +689,18 @@ export default class DateField extends ValueField {
   }
 
   _renderTimeClearable() {
-    if (this.hasTime && this.isClearable() && !this.$timeClearIcon) {
-      // date clear icon
-      this.$timeClearIcon = this.$field.appendSpan('icon time-clear unfocusable text-field-icon action')
-        .on('mousedown', this._onTimeClearIconMouseDown.bind(this));
-    } else if ((!this.hasTime || !this.isClearable()) && this.$timeClearIcon) {
-      // Remove $dateField
-      this.$timeClearIcon.remove();
-      this.$timeClearIcon = null;
+    if (this.hasTime && this.isClearable()) {
+      if (!this.$timeClearIcon) {
+        // time clear icon
+        this.$timeClearIcon = this.$field.appendSpan('icon time-clear unfocusable text-field-icon action')
+          .on('mousedown', this._onTimeClearIconMouseDown.bind(this));
+      }
+    } else {
+      if (this.$timeClearIcon) {
+        // Remove clear icon
+        this.$timeClearIcon.remove();
+        this.$timeClearIcon = null;
+      }
     }
   }
 
@@ -1192,21 +1174,19 @@ export default class DateField extends ValueField {
   }
 
   _onDatePickerDateSelect(event) {
-    this._setDateValid(true);
-    this._setTimeValid(true);
-    let newValue = this._newTimestampAsDate(event.date, this.value);
-    this.setValue(newValue);
-    this.closePopup();
-    this._triggerAcceptInput();
+    this._setNewDateTimeValue(this._newTimestampAsDate(event.date, this.value));
   }
 
   _onTimePickerTimeSelect(event) {
+    this._setNewDateTimeValue(this._newTimestampAsDate(this.value, event.time));
+  }
+
+  _setNewDateTimeValue(newValue) {
     this._setDateValid(true);
     this._setTimeValid(true);
-    let newValue = this._newTimestampAsDate(this.value, event.time);
     this.setValue(newValue);
-    this.closePopup();
     this._triggerAcceptInput();
+    this.closePopup();
   }
 
   _createPredictionField($inputField) {
@@ -1385,10 +1365,12 @@ export default class DateField extends ValueField {
     this.popup = this.createDatePopup();
     this.popup.open();
     this.$dateField.addClass('focused');
-    this.popup.on('remove', event => {
-      this._onPopupRemove(event);
-      this.popup = null;
+    this.popup.one('destroy', event => {
+      // Removing the class must happen before _onPopupDestroy() is called, otherwise the date field no longer exists,
+      // because in touch mode _onPopupDestroy() destroys the date field.
       this.$dateField.removeClass('focused');
+      this._onPopupDestroy(event);
+      this.popup = null;
     });
     this.getDatePicker().on('dateSelect', this._onDatePickerDateSelect.bind(this));
   }
@@ -1416,10 +1398,12 @@ export default class DateField extends ValueField {
     this.popup = this.createTimePopup();
     this.popup.open();
     this.$timeField.addClass('focused');
-    this.popup.on('remove', event => {
-      this._onPopupRemove(event);
-      this.popup = null;
+    this.popup.one('destroy', event => {
+      // Removing the class must happen before _onPopupDestroy() is called, otherwise the date field no longer exists,
+      // because in touch mode _onPopupDestroy() destroys the date field.
       this.$timeField.removeClass('focused');
+      this._onPopupDestroy(event);
+      this.popup = null;
     });
     this.getTimePicker().on('timeSelect', this._onTimePickerTimeSelect.bind(this));
   }
@@ -1686,7 +1670,7 @@ export default class DateField extends ValueField {
     }
   }
 
-  _onPopupRemove(event) {
+  _onPopupDestroy(event) {
     if (!this.touchMode || !this._cellEditorPopup) {
       return;
     }

package/src/form/fields/filechooserfield/FileChooserFieldBrowseKeyStroke.js

@@ -19,9 +19,7 @@ export default class FileChooserFieldBrowseKeyStroke extends KeyStroke {
     this.stopPropagation = true;
 
     this.renderingHints.hAlign = HAlign.LEFT;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
-      return this.field.$fieldContainer;
-    }.bind(this);
+    this.renderingHints.$drawingArea = ($drawingArea, event) => this.field.$fieldContainer;
   }
 
   /**

package/src/form/fields/filechooserfield/FileChooserFieldDeleteKeyStroke.js

@@ -20,9 +20,7 @@ export default class FileChooserFieldDeleteKeyStroke extends KeyStroke {
 
     this.renderingHints.offset = 25;
     this.renderingHints.hAlign = HAlign.RIGHT;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
-      return this.field.$fieldContainer;
-    }.bind(this);
+    this.renderingHints.$drawingArea = ($drawingArea, event) => this.field.$fieldContainer;
   }
 
   /**