@oracle/oraclejet 15.0.2 → 15.0.4

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

@@ -1987,6 +1987,8 @@ var __oj_input_date_time_metadata =
     _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
     _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+    _INPUTDATE_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
     options: {
       /**
        * <p>
@@ -2900,7 +2902,7 @@ var __oj_input_date_time_metadata =
       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;
@@ -2920,6 +2922,7 @@ var __oj_input_date_time_metadata =
       this._nativePickerConverter = null;
 
       this._labelValueWrapper = null;
+      this._isMobile = Config.getDeviceRenderMode() === 'phone';
 
       var nodeName = this.element[0].nodeName.toLowerCase();
       this._isInLine = nodeName === 'div' || nodeName === 'span';
@@ -3237,6 +3240,9 @@ var __oj_input_date_time_metadata =
           this._resolveDateConverterBusyState();
           delete this._resolveDateConverterBusyState;
         }
+        if (this.options.readOnly !== true) {
+          this._attachClearIcon();
+        }
       }.bind(this);
 
       if (this._dateConverterPromise) {
@@ -3379,6 +3385,31 @@ var __oj_input_date_time_metadata =
       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
      */
@@ -3705,6 +3736,73 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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
@@ -3734,7 +3832,7 @@ var __oj_input_date_time_metadata =
       var self = this;
 
       this._datepickerWrapperTouchStartListener = function () {
-        self._isMobile = true;
+        self._hasTouch = true;
       };
       this._wrapper[0].addEventListener('touchstart', this._datepickerWrapperTouchStartListener, {
         passive: true
@@ -4439,6 +4537,15 @@ var __oj_input_date_time_metadata =
       }
 
       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();
@@ -5934,6 +6041,50 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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.
      *
@@ -6385,7 +6536,7 @@ var __oj_input_date_time_metadata =
       this._closeInProgress = true;
       try {
         const showOnIsFocusOrUserFocus = this._showOnIsFocusOrUserFocus();
-        if (this._isMobile && showOnIsFocusOrUserFocus) {
+        if (this._hasTouch && showOnIsFocusOrUserFocus) {
           this._inputContainer.focus();
         } else {
           if (showOnIsFocusOrUserFocus) {
@@ -6467,8 +6618,12 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    // 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 ojconverterDatetime.IntlDateTimeConverter(options);
@@ -8933,6 +9088,8 @@ var __oj_input_date_time_metadata =
     _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
@@ -9672,6 +9829,7 @@ var __oj_input_date_time_metadata =
         if (this.options.readOnly !== true) {
           if (this._isIndependentInput()) {
             this._attachTrigger();
+            this._attachClearIcon();
           }
         }
 
@@ -9844,6 +10002,31 @@ var __oj_input_date_time_metadata =
       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
@@ -10174,6 +10357,76 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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 = Config.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
@@ -10264,6 +10517,50 @@ var __oj_input_date_time_metadata =
         : 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
      *
@@ -10496,12 +10793,20 @@ var __oj_input_date_time_metadata =
      * @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
@@ -11494,17 +11799,6 @@ var __oj_input_date_time_metadata =
    * var node = myInputTime.getNodeBySubId( {'subId': 'oj-timepicker-now'} );
    */
 
-  /**
-   *
-   * @private
-   */
-  var dateSwitcherConverter;
-
-  /**
-   * @private
-   */
-  var timeSwitcherConverter;
-
   var _sDefaultDateTimeConverter;
 
   /**
@@ -12547,9 +12841,14 @@ var __oj_input_date_time_metadata =
                 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 && ojconverterutilsI18n.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
@@ -12577,6 +12876,11 @@ var __oj_input_date_time_metadata =
               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;
@@ -12965,38 +13269,43 @@ var __oj_input_date_time_metadata =
     },
 
     /**
+     * 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 ojconverterDatetime.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 ojconverterDatetime.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 ojconverterDatetime.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 ojconverterDatetime.IntlDateTimeConverter({
+            formatType: 'time',
+            timeFormat: 'short'
+          });
           switcherText = timeSwitcherConverter.format(this._getDefaultIsoDate());
         }
       }

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

@@ -307,7 +307,9 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
                 popupServiceInstance.open(popupServiceOptions);
             }
             else if (!this.wasDrawerOpenedInPrevState()) {
-                this.forceUpdate();
+                window.queueMicrotask(() => {
+                    this.forceUpdate();
+                });
             }
         }
         getDrawerSurrogateLayerSelectors() {

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

@@ -6252,10 +6252,17 @@ var __oj_tab_bar_metadata =
    * @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;
   };
 
@@ -6273,6 +6280,8 @@ var __oj_tab_bar_metadata =
       return;
     }
 
+    var display = this.m_widget.GetOption('display');
+
     if (!overflow) {
       // eslint-disable-next-line no-param-reassign
       overflow = this.m_widget.GetOption('overflow');
@@ -6282,7 +6291,13 @@ var __oj_tab_bar_metadata =
       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()) {
@@ -6717,7 +6732,7 @@ var __oj_tab_bar_metadata =
   _HorizontalNavListOverflowHandler.prototype.getOverflowThreshold = function () {
     var threshold = -1;
     if (this._overflow === 'popup') {
-      threshold = this._calculateThreshold(this._overflowData) - 1;
+      threshold = this._calculateThreshold(this._overflowData);
     }
     return threshold;
   };
@@ -6725,7 +6740,8 @@ var __oj_tab_bar_metadata =
   _HorizontalNavListOverflowHandler.prototype._collectOverflowData = function () {
     var itemNonTextWidth;
     var overflowItemWidth;
-    var edge = DomUtils.getReadingDirection() === 'ltr' ? 'right' : 'left';
+    var readingDirection = DomUtils.getReadingDirection();
+    var edge = readingDirection === 'ltr' ? 'right' : 'left';
     var container = this._getWidget().ojContext.element;
 
     var item = this._items.last();
@@ -6740,14 +6756,23 @@ var __oj_tab_bar_metadata =
     if (this._overflow === 'popup') {
       var overFlowMenuButton = this._getOverflowMenuButton()[0];
       var rect = overFlowMenuButton.getBoundingClientRect();
+      const overFlowMenuButtonComputedStyle = window.getComputedStyle(overFlowMenuButton);
       let margin = 0;
-      if (DomUtils.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 {
@@ -6811,7 +6836,8 @@ var __oj_tab_bar_metadata =
 
   _HorizontalNavListOverflowHandler.prototype._calculateThreshold = function (overflowData) {
     var items = this._items;
-    var edge = DomUtils.getReadingDirection() === 'ltr' ? 'right' : 'left';
+    var readingDirection = DomUtils.getReadingDirection();
+    var edge = readingDirection === 'ltr' ? 'right' : 'left';
     var index = items.length - 1;
     var itemEdge = items[index].getBoundingClientRect()[edge];
 
@@ -6821,7 +6847,22 @@ var __oj_tab_bar_metadata =
       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;