@oracle/oraclejet 15.0.2 → 15.0.4

package/dist/js/libs/oj/debug_esm/ojdatetimepicker.js

@@ -2001,6 +2001,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
   _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
   _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+  _INPUTDATE_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
   options: {
     /**
      * <p>
@@ -2914,7 +2916,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._triggerNode = null;
     this._inputContainer = null;
     this._redirectFocusToInputContainer = false;
-    this._isMobile = false;
+    this._hasTouch = false;
 
     // only case is when of showOn of focus and one hides the element [need to avoid showing]
     this._ignoreDatePickerShow = false;
@@ -2934,6 +2936,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._nativePickerConverter = null;
 
     this._labelValueWrapper = null;
+    this._isMobile = getDeviceRenderMode() === 'phone';
 
     var nodeName = this.element[0].nodeName.toLowerCase();
     this._isInLine = nodeName === 'div' || nodeName === 'span';
@@ -3251,6 +3254,9 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._resolveDateConverterBusyState();
         delete this._resolveDateConverterBusyState;
       }
+      if (this.options.readOnly !== true) {
+        this._attachClearIcon();
+      }
     }.bind(this);
 
     if (this._dateConverterPromise) {
@@ -3393,6 +3399,31 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     return retVal;
   },
 
+  /**
+   * Performs post processing after _SetOption() calls _superApply(). Different options, when changed, perform
+   * different tasks.
+   *
+   * @param {string} option
+   * @param {Object=} flags
+   * @protected
+   * @memberof oj.ojInputDate
+   * @instance
+   */
+  _AfterSetOption: function (option, flags) {
+    this._super(option, flags);
+
+    switch (option) {
+      case 'disabled':
+      case 'readOnly':
+      case 'value':
+        this._attachClearIcon();
+        break;
+
+      default:
+        break;
+    }
+  },
+
   /**
    * @ignore
    */
@@ -3719,6 +3750,73 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Render or remove the clear icon
+   * We don't render the clear icon for non-mobile or required fields.
+   * @ignore
+   * @private
+   * @memberof oj.ojInputDate
+   * @instance
+   */
+  _attachClearIcon: function () {
+    if (this._isMobile && !this.options.required) {
+      var contentWrapper = this._GetContentWrapper();
+      // content wrapper is undefined when the component is inline or is not a
+      // custom element, so we don't need a clear icon in that case.
+      if (contentWrapper) {
+        var wrapperElem = contentWrapper.parentElement;
+        var clearIconBtn = wrapperElem.querySelector('a.oj-inputdatetime-clear-icon-btn');
+
+        if (this.options.disabled || this.options.readOnly) {
+          // remove the icon if it is there
+          if (clearIconBtn) {
+            wrapperElem.removeChild(clearIconBtn);
+          }
+
+          // if the clearIcon is not rendered, we shouldn't have this class
+          wrapperElem.classList.remove('oj-inputdatetime-clearicon-mobile');
+        } else {
+          // Only add the clear icon for mobile
+          if (clearIconBtn === null) {
+            var clearIcon;
+            clearIconBtn = document.createElement('a');
+            clearIconBtn.className =
+              'oj-inputdatetime-clear-icon-btn oj-component-icon oj-clickable-icon-nocontext';
+            clearIconBtn.setAttribute('tabindex', '-1');
+            clearIconBtn.setAttribute(
+              'aria-label',
+              this.getTranslatedString(this._INPUTDATE_CLEAR_ICON_LABEL_KEY)
+            );
+
+            clearIconBtn.setAttribute('target', '_blank');
+            clearIcon = document.createElement('span');
+            clearIcon.className = 'oj-inputdatetime-clear-icon';
+
+            clearIconBtn.appendChild(clearIcon);
+            wrapperElem.insertBefore(clearIconBtn, this._labelValueWrapper.nextElementSibling); // @HTMLUpdateOK
+
+            clearIconBtn.addEventListener(
+              this._CLICK_HANDLER_KEY,
+              this._onClearIconClickHandler.bind(this)
+            );
+          }
+
+          // clear icon is only rendered for mobile at this time.
+          // For mobile, we render oj-form-control-empty-clearicon if the input doesn't
+          // have a value, as we always want the clear icon hidden for this case.
+          wrapperElem.classList.add('oj-inputdatetime-clearicon-mobile');
+
+          var val = this._GetDisplayValue();
+
+          if (val && val !== '') {
+            wrapperElem.classList.remove('oj-form-control-empty-clearicon');
+          } else {
+            wrapperElem.classList.add('oj-form-control-empty-clearicon');
+          }
+        }
+      }
+    }
+  },
   /**
    * This function will create the necessary calendar trigger container [i.e. image to launch the calendar]
    * and perform any attachment to events
@@ -3748,7 +3846,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     var self = this;
 
     this._datepickerWrapperTouchStartListener = function () {
-      self._isMobile = true;
+      self._hasTouch = true;
     };
     this._wrapper[0].addEventListener('touchstart', this._datepickerWrapperTouchStartListener, {
       passive: true
@@ -4453,6 +4551,15 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
 
     this._setDisplayAndValue(value, {});
+    // remove this class, since we have a value now.
+    // Only do this for oj-input-date, since oj-input-date-time doesn't
+    // update its value until done is pressed.
+    if (this.OuterWrapper.tagName === 'OJ-INPUT-DATE') {
+      let contentWrapper = this._GetContentWrapper();
+      if (contentWrapper) {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      }
+    }
 
     if (this._isDateTimeSwitcher()) {
       this._placeFocusOnCalendar();
@@ -5948,6 +6055,50 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Invoked when the input event happens
+   *
+   * @ignore
+   * @protected
+   * @memberof! oj.ojInputDate
+   * @param {Event} event
+   */
+  _onInputHandler: function (event) {
+    this._super(event);
+    var inputNode = event.target;
+    let contentWrapper = this._GetContentWrapper();
+
+    if (contentWrapper && this._isMobile) {
+      if (inputNode.value !== '') {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
+
+  /**
+   * The handler clears the value of the input element and sets the focus on the input container
+   * since this is only used for mobile.
+   *
+   * @ignore
+   * @private
+   * @memberof! oj.ojInputDate
+   * @param {Event} event
+   */
+  _onClearIconClickHandler: function (event) {
+    var elem = this.element[0];
+
+    elem.value = '';
+    // we need to update the raw value to keep it in sync
+    this._SetRawValue('', event);
+    elem.focus();
+    let contentWrapper = this._GetContentWrapper();
+    if (contentWrapper) {
+      contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+    }
+  },
+
   /**
    * This handler will set the value from the input text element.
    *
@@ -6399,7 +6550,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._closeInProgress = true;
     try {
       const showOnIsFocusOrUserFocus = this._showOnIsFocusOrUserFocus();
-      if (this._isMobile && showOnIsFocusOrUserFocus) {
+      if (this._hasTouch && showOnIsFocusOrUserFocus) {
         this._inputContainer.focus();
       } else {
         if (showOnIsFocusOrUserFocus) {
@@ -6481,8 +6632,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  // If the inputConverter is not one with isoStrFormat offset, then create a new converter
+  // based on the options of the inputConverter but with isoStrFormat: 'offset'.
   _createOffsetConverter: function (inputConverter) {
     var resolvedOptions = inputConverter.resolvedOptions();
+    const isoStrFormat = resolvedOptions.isoStrFormat;
+    if (isoStrFormat === 'offset') return inputConverter;
     var options = {};
     $.extend(options, resolvedOptions, { isoStrFormat: 'offset' });
     return new IntlDateTimeConverter(options);
@@ -8947,6 +9102,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
   _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
   _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+  _INPUTTIME_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
   options: {
     /**
      * A datetime converter instance or a Promise to a datetime converter instance
@@ -9686,6 +9843,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
       if (this.options.readOnly !== true) {
         if (this._isIndependentInput()) {
           this._attachTrigger();
+          this._attachClearIcon();
         }
       }
 
@@ -9858,6 +10016,31 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
     return retVal;
   },
 
+  /**
+   * Performs post processing after _SetOption() calls _superApply(). Different options, when changed, perform
+   * different tasks.
+   *
+   * @param {string} option
+   * @param {Object=} flags
+   * @protected
+   * @memberof oj.ojInputTime
+   * @instance
+   */
+  _AfterSetOption: function (option, flags) {
+    this._super(option, flags);
+
+    switch (option) {
+      case 'disabled':
+      case 'readOnly':
+      case 'value':
+        this._attachClearIcon();
+        break;
+
+      default:
+        break;
+    }
+  },
+
   /**
    * @ignore
    * @protected
@@ -10188,6 +10371,76 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Render or remove the clear icon
+   * @ignore
+   * @private
+   * @memberof oj.ojInputTime
+   * @instance
+   */
+  _attachClearIcon: function () {
+    var labelValueWrapper = this.element[0].parentNode;
+    let wrapperElem = labelValueWrapper.parentNode;
+    var clearIconBtn = wrapperElem.querySelector('a.oj-inputdatetime-clear-icon-btn');
+
+    let isMobile = getDeviceRenderMode() === 'phone';
+
+    if (!isMobile || this.options.disabled || this.options.readOnly || this.options.required) {
+      // remove the icon if it is there
+      if (clearIconBtn) {
+        wrapperElem.removeChild(clearIconBtn);
+      }
+
+      // if the clearIcon is not rendered, we shouldn't have this class
+      wrapperElem.classList.remove('oj-inputdatetime-clearicon-mobile');
+    } else {
+      // Only add the clear icon for mobile
+      if (clearIconBtn === null) {
+        var clearIcon;
+        clearIconBtn = document.createElement('a');
+        clearIconBtn.className =
+          'oj-inputdatetime-clear-icon-btn oj-component-icon oj-clickable-icon-nocontext';
+        clearIconBtn.setAttribute('tabindex', '-1');
+        clearIconBtn.setAttribute(
+          'aria-label',
+          this.getTranslatedString(this._INPUTTIME_CLEAR_ICON_LABEL_KEY)
+        );
+
+        clearIconBtn.setAttribute('target', '_blank');
+        clearIcon = document.createElement('span');
+        clearIcon.className = 'oj-inputdatetime-clear-icon';
+
+        clearIconBtn.appendChild(clearIcon);
+        wrapperElem.insertBefore(clearIconBtn, labelValueWrapper.nextElementSibling); // @HTMLUpdateOK
+
+        clearIconBtn.addEventListener(
+          this._CLICK_HANDLER_KEY,
+          this._onClearIconClickHandler.bind(this)
+        );
+      }
+
+      // clear icon is only rendered for mobile at this time.
+      // For mobile, we render oj-form-control-empty-clearicon if the input doesn't
+      // have a value, as we always want the clear icon hidden for this case.
+      wrapperElem.classList.add('oj-inputdatetime-clearicon-mobile');
+
+      var val;
+
+      // if the component is not fully rendered, then we need to use the value option's value
+      // instead of the input element's value
+      if (wrapperElem.classList.contains('oj-complete')) {
+        val = this.element[0].value;
+      } else {
+        val = this.options.value;
+      }
+
+      if (val && val !== '') {
+        wrapperElem.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        wrapperElem.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
   /**
    * This function will create the necessary time trigger container [i.e. image to launch the time drop down]
    * and perform any attachment to events
@@ -10278,6 +10531,50 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
       : this.options.value;
   },
 
+  /**
+   * Invoked when the input event happens
+   *
+   * @ignore
+   * @protected
+   * @memberof! oj.ojInputTime
+   * @param {Event} event
+   */
+  _onInputHandler: function (event) {
+    this._super(event);
+    var inputNode = event.target;
+    let contentWrapper = this._GetContentWrapper();
+
+    if (contentWrapper && this._isMobile) {
+      if (inputNode.value !== '') {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
+
+  /**
+   * The handler clears the value of the input element and sets the focus on the input container
+   * since this is only used for mobile.
+   *
+   * @ignore
+   * @private
+   * @memberof! oj.ojInputTime
+   * @param {Event} event
+   */
+  _onClearIconClickHandler: function (event) {
+    var elem = this.element[0];
+
+    elem.value = '';
+    // we need to update the raw value to keep it in sync
+    this._SetRawValue('', event);
+    elem.focus();
+    let contentWrapper = this._GetContentWrapper();
+    if (contentWrapper) {
+      contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+    }
+  },
+
   /**
    * Invoked when blur is triggered of the this.element
    *
@@ -10510,12 +10807,20 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
    * @instance
    * @memberof! oj.ojInputTime
    */
-  // eslint-disable-next-line no-unused-vars
   _SetDisplayValue: function (displayValue) {
     // When not part of datePickerComp or of inline should update input element
     if (this._isIndependentInput()) {
       this._superApply(arguments);
     }
+    // remove this class, since we have a value now.
+    let elem = this.element[0];
+    if (elem) {
+      if (displayValue) {
+        elem.parentElement.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        elem.parentElement.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
 
     // so this is a change in behavior from original design. Previously it was decided that app developer
     // would have to invoke refresh to render the calendar after setting the new value programatically; however now it is
@@ -11508,17 +11813,6 @@ setDefaultOptions({
  * var node = myInputTime.getNodeBySubId( {'subId': 'oj-timepicker-now'} );
  */
 
-/**
- *
- * @private
- */
-var dateSwitcherConverter;
-
-/**
- * @private
- */
-var timeSwitcherConverter;
-
 var _sDefaultDateTimeConverter;
 
 /**
@@ -12561,9 +12855,14 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
               newVal = self._switcherDateValue;
             } else {
               // dateIso could be this._switcherDateValue, this.options.value, or this._getDefaultIsoDate();
+              // if local, don't change it
               const dateIso = self._getDateIso();
-              const converter = self._GetConverter();
-              newVal = self._parseValueToSubstituteDateOrTimePiece(converter, dateIso);
+              if (dateIso && IntlConverterUtils._getISOStrFormatType(dateIso) === 'local') {
+                newVal = dateIso;
+              } else {
+                const converter = self._GetConverter();
+                newVal = self._parseValueToSubstituteDateOrTimePiece(converter, dateIso);
+              }
             }
 
             // If the user changed the time in the datetime picker, we will
@@ -12591,6 +12890,11 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
             self._switcherPrevYear = null;
             self._switcherPrevValue = null;
             self._hide(self._ON_CLOSE_REASON_SELECTION);
+            // remove this class, since we have a value now.
+            let contentWrapper = self._GetContentWrapper();
+            if (contentWrapper) {
+              contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+            }
             return false;
           }
           return undefined;
@@ -12979,38 +13283,43 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
   },
 
   /**
+   * In the UI, the switcher text shows the date when the timepicker is up and it shows the time when the
+   * datepicker is up.
    * @ignore
    */
   _updateSwitcherText: function () {
     if (!this._switcherDiv) {
       return;
     }
-    // create a converter to format the picker text
-    if (!dateSwitcherConverter) {
-      dateSwitcherConverter = new IntlDateTimeConverter({
-        dateStyle: 'short'
-      });
-    }
+
     var switcherText = '';
     if (this._isShowingDatePickerSwitcher()) {
+      // create the date switcher converter we use to format the switcher text
+      // copy timezone and isoStrFormat from the component's converter.
+      const componentConverter = this._GetConverter();
+      const timeZone = _getConverterTimezone(componentConverter);
+      const isoStrFormat = componentConverter.resolvedOptions().isoStrFormat;
+      const dateSwitcherConverter = new IntlDateTimeConverter({
+        dateStyle: 'short',
+        timeZone,
+        isoStrFormat
+      });
       try {
         switcherText = dateSwitcherConverter.format(this._switcherDateValue || this._getDateIso());
       } catch (e) {
         switcherText = dateSwitcherConverter.format(this._getDefaultIsoDate());
       }
     } else {
-      // create a converter to format the picker text
-      if (!timeSwitcherConverter) {
-        timeSwitcherConverter = new IntlDateTimeConverter({
-          formatType: 'time',
-          timeFormat: 'short'
-        });
-      }
       try {
         switcherText = this._getTimePickerConverter().format(
           this._switcherTimeValue || this._getDateIso()
         );
       } catch (e) {
+        // create a converter to format the picker text
+        const timeSwitcherConverter = new IntlDateTimeConverter({
+          formatType: 'time',
+          timeFormat: 'short'
+        });
         switcherText = timeSwitcherConverter.format(this._getDefaultIsoDate());
       }
     }

package/dist/js/libs/oj/debug_esm/ojdrawerpopup.js

@@ -312,7 +312,9 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
             popupServiceInstance.open(popupServiceOptions);
         }
         else if (!this.wasDrawerOpenedInPrevState()) {
-            this.forceUpdate();
+            window.queueMicrotask(() => {
+                this.forceUpdate();
+            });
         }
     }
     getDrawerSurrogateLayerSelectors() {

package/dist/js/libs/oj/debug_esm/ojnavigationlist.js

@@ -6258,10 +6258,17 @@ HorizontalNavListHandler.prototype.IsOptionUpdateAllowed = function (key, value,
  * @ignore
  * @private
  */
-var _HorizontalNavListOverflowHandler = function (items, overflow, truncation, navlistHandler) {
+var _HorizontalNavListOverflowHandler = function (
+  items,
+  overflow,
+  truncation,
+  display,
+  navlistHandler
+) {
   this._overflow = overflow;
   this._truncation = truncation;
   this._items = items;
+  this._display = display;
   this._navlistHandler = navlistHandler;
 };
 
@@ -6279,6 +6286,8 @@ HorizontalNavListHandler.prototype._handleOverflow = function (overflow, truncat
     return;
   }
 
+  var display = this.m_widget.GetOption('display');
+
   if (!overflow) {
     // eslint-disable-next-line no-param-reassign
     overflow = this.m_widget.GetOption('overflow');
@@ -6288,7 +6297,13 @@ HorizontalNavListHandler.prototype._handleOverflow = function (overflow, truncat
     truncation = this.m_widget.GetOption('truncation');
   }
 
-  var overflowHandler = new _HorizontalNavListOverflowHandler(items, overflow, truncation, this);
+  var overflowHandler = new _HorizontalNavListOverflowHandler(
+    items,
+    overflow,
+    truncation,
+    display,
+    this
+  );
 
   // Return if there is no truncation or overflow handling needed
   if (!overflowHandler.shouldHandleOverflow()) {
@@ -6723,7 +6738,7 @@ _HorizontalNavListOverflowHandler.prototype.applyTruncation = function () {
 _HorizontalNavListOverflowHandler.prototype.getOverflowThreshold = function () {
   var threshold = -1;
   if (this._overflow === 'popup') {
-    threshold = this._calculateThreshold(this._overflowData) - 1;
+    threshold = this._calculateThreshold(this._overflowData);
   }
   return threshold;
 };
@@ -6731,7 +6746,8 @@ _HorizontalNavListOverflowHandler.prototype.getOverflowThreshold = function () {
 _HorizontalNavListOverflowHandler.prototype._collectOverflowData = function () {
   var itemNonTextWidth;
   var overflowItemWidth;
-  var edge = getReadingDirection() === 'ltr' ? 'right' : 'left';
+  var readingDirection = getReadingDirection();
+  var edge = readingDirection === 'ltr' ? 'right' : 'left';
   var container = this._getWidget().ojContext.element;
 
   var item = this._items.last();
@@ -6746,14 +6762,23 @@ _HorizontalNavListOverflowHandler.prototype._collectOverflowData = function () {
   if (this._overflow === 'popup') {
     var overFlowMenuButton = this._getOverflowMenuButton()[0];
     var rect = overFlowMenuButton.getBoundingClientRect();
+    const overFlowMenuButtonComputedStyle = window.getComputedStyle(overFlowMenuButton);
     let margin = 0;
-    if (getReadingDirection() === 'ltr') {
-      margin = window.getComputedStyle(overFlowMenuButton).marginRight;
-    } else {
-      margin = window.getComputedStyle(overFlowMenuButton).marginLeft;
+    // NavigationList overflow icon has a left margin in ltr and right margin in rtl
+    // NavigationList overflow "more" item has no margin in any case so this calculated margin= 0px.
+    if (!this._navlistHandler._isTabBar() && this._display === 'icons') {
+      margin =
+        readingDirection === 'ltr'
+          ? overFlowMenuButtonComputedStyle.marginLeft
+          : overFlowMenuButtonComputedStyle.marginRight;
+    }
+    // TabBar overflow menu cases (icon and "more" item) has a right margin only in rtl
+    if (this._navlistHandler._isTabBar() && readingDirection === 'rtl') {
+      margin = overFlowMenuButtonComputedStyle.marginRight;
     }
     overflowItemWidth = rect.width + parseInt(margin, 10);
   }
+  // Since this is last item it does not have a margin added to item edge
   var itemEdge = item[0].getBoundingClientRect()[edge];
 
   return {
@@ -6817,7 +6842,8 @@ _HorizontalNavListOverflowHandler.prototype._isOverflowed = function (
 
 _HorizontalNavListOverflowHandler.prototype._calculateThreshold = function (overflowData) {
   var items = this._items;
-  var edge = getReadingDirection() === 'ltr' ? 'right' : 'left';
+  var readingDirection = getReadingDirection();
+  var edge = readingDirection === 'ltr' ? 'right' : 'left';
   var index = items.length - 1;
   var itemEdge = items[index].getBoundingClientRect()[edge];
 
@@ -6827,7 +6853,22 @@ _HorizontalNavListOverflowHandler.prototype._calculateThreshold = function (over
     index > 0
   ) {
     index -= 1;
-    itemEdge = items[index].getBoundingClientRect()[edge];
+    // NavigationList item icons have a left margin hence for icon-only cases item edge is sufficient
+    if (!this._navlistHandler._isTabBar() && this._display === 'icons') {
+      itemEdge = items[index].getBoundingClientRect()[edge];
+    } else {
+      // Non icon-only case items have a right margin except for the last one.
+      const itemComputedStyle = window.getComputedStyle(items[index]);
+      let itemMargin = 0;
+      // TabBar has right margin for all items in ltr and rtl mode.
+      if (this._navlistHandler._isTabBar() || readingDirection === 'ltr') {
+        itemMargin = itemComputedStyle.marginRight;
+      } else {
+        // Navigationlist non icon-only case items have a right margin (covered by if above) in ltr and left margin in rtl
+        itemMargin = itemComputedStyle.marginLeft;
+      }
+      itemEdge = items[index].getBoundingClientRect()[edge] + parseInt(itemMargin, 10);
+    }
   }
 
   return index + 1;