@oracle/oraclejet 14.0.6 → 14.1.0

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

@@ -1094,6 +1094,12 @@ var __oj_table_metadata =
   /**
    * <p>Named slot for the Table's default row template. The slot content must be a &lt;template> element. The content of the template should include the &lt;tr> element.</p>
    *
+   * <p>If using a rowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+   * to a dnd operation internally. Any application logic behind rowTemplate definitions should not dynamically respond to
+   * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+   * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+   * and any relevant changes in logic needed for the rowTemplate definitions must be handled by the application.</p>
+   *
    * @ojslot rowTemplate
    * @memberof oj.ojTable
    * @ojtemplateslotprops oj.ojTable.RowTemplateContext
@@ -1129,6 +1135,12 @@ var __oj_table_metadata =
    * <p>Named slot used to render add new row at the top of the table. The slot content must be a &lt;template> element.
    * The content of the template should include the &lt;tr> element.</p>
    *
+   * <p>If using an addRowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+   * to a dnd operation internally. Any application logic behind addRowTemplate definitions should not dynamically respond to
+   * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+   * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+   * and any relevant changes in logic needed for the addRowTemplate definitions must be handled by the application.</p>
+   *
    * @ojslot addRowTemplate
    * @memberof oj.ojTable
    * @ojtemplateslotprops oj.ojTable.AddRowTemplateContext
@@ -2159,6 +2171,8 @@ var __oj_table_metadata =
     this._unregisterDomScroller();
     // clear the current layout manager, and any listeners it has setup
     this._clearLayoutManager();
+    // clear the current internal acc state
+    this._cleanAccStatus();
 
     if (isDestroy) {
       // cleanup needed for 'destroy()' call only
@@ -2449,6 +2463,12 @@ var __oj_table_metadata =
     this._refreshTableStatusMessage();
     this._clearIdleCallback();
 
+    // update edit state based on row removals before rows are removed to ensure row context is available
+    if (this._hasEditableRow()) {
+      // exit edit mode if editable row is deleted - treat as cancelling the edit
+      this._setTableEditable(false, true);
+    }
+
     if (initFetch) {
       return this._initFetch();
     }
@@ -3237,6 +3257,14 @@ var __oj_table_metadata =
           // eslint-disable-next-line no-param-reassign
           placeHolderRow = docFrag.children[0];
         }
+        // make sure to honor any reordered columns when re-rendering the add row content from a row template
+        if (this._columnsDestMap != null) {
+          var renderedCells = this._getPlaceHolderRowCells(placeHolderRow);
+          for (let i = 0; i < this._columnsDestMap.length; i++) {
+            var moveAddRowCell = renderedCells[this._columnsDestMap[i]];
+            moveAddRowCell.parentNode.appendChild(moveAddRowCell); // @HTMLUpdateOK
+          }
+        }
       } else if (addRowCellTemplate !== null && this._isDefaultAddRowCellTemplateSlotValid()) {
         var columns = this._getColumnDefs();
         var columnsCount = columns.length;
@@ -6391,11 +6419,7 @@ var __oj_table_metadata =
         columnIdx += 1;
       }
       if (this._dragStartColumnIdxs.indexOf(columnIdx) === -1) {
-        this.component._columnsDestMap = this.component._moveTableHeaderColumn(
-          this._dragStartColumnIdxs,
-          columnIdx,
-          event
-        );
+        this.component._moveTableHeaderColumn(this._dragStartColumnIdxs, columnIdx, event);
       }
     }
     event.preventDefault();
@@ -7410,16 +7434,23 @@ var __oj_table_metadata =
     );
   };
 
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.initializeDefaultScrollBarSize = function (element) {
+    // cache browser scroll bar width for future sizing of table scrolling element
+    this._table._defaultScrollBarSize = DataCollectionUtils.getDefaultScrollBarWidth(element);
+  };
+
   /**
    * Returns the default scrollbar size for the table when visible
    * @private
    */
   TableLayoutManager.prototype._getDefaultScrollBarSize = function () {
-    // cache browser scroll bar width for future sizing of table body element
-    if (this._defaultScrollBarSize == null) {
-      this._defaultScrollBarSize = DataCollectionUtils.getDefaultScrollBarWidth(this.getScroller());
+    if (this._table._defaultScrollBarSize == null) {
+      this.initializeDefaultScrollBarSize(this.getScroller());
     }
-    return this._defaultScrollBarSize;
+    return this._table._defaultScrollBarSize;
   };
 
   /**
@@ -11125,8 +11156,8 @@ var __oj_table_metadata =
     var stateInfo = '';
     var tableHeaderColumn;
 
-    // status info only reflects an active element, and is not used for iOS voiceover
-    if (this._active == null || DataCollectionUtils.isIos()) {
+    // status info only reflects an active element, only applies if the table is focused, and is not used for iOS voiceover
+    if (this._active == null || !this._hasFocus() || DataCollectionUtils.isIos()) {
       return;
     }
 
@@ -11628,6 +11659,11 @@ var __oj_table_metadata =
     if (this._lastSelectedRowIdxArray != null) {
       this._lastSelectedRowIdxArray = [];
     }
+    // update edit state based on row removals before rows are removed to ensure row context is available
+    if (this._hasEditableRow()) {
+      // exit edit mode if editable row is deleted - treat as cancelling the edit
+      this._setTableEditable(false, true);
+    }
     // reset selection validation state if data refreshed or changed
     this._initialSelectionStateValidated = false;
   };
@@ -11643,6 +11679,13 @@ var __oj_table_metadata =
     }
     var lastValidItemIdx = this._getRowIdxForRowKey(lastValidKey);
     if (lastValidItemIdx >= 0) {
+      // update edit state based on row removals before rows are removed to ensure row context is available
+      if (this._hasEditableRow()) {
+        if (this._getEditableRowIdx() > lastValidItemIdx) {
+          // exit edit mode if editable row is deleted - treat as cancelling the edit
+          this._setTableEditable(false, true);
+        }
+      }
       var tableBodyRows = this._getTableBodyRows();
       var tableBodyRowsCount = tableBodyRows.length;
       for (var i = tableBodyRowsCount - 1; i > lastValidItemIdx; i--) {
@@ -13339,6 +13382,9 @@ var __oj_table_metadata =
     this.element[0].parentNode.replaceChild(tableScroller, this.element[0]);
     tableScroller.insertBefore(this.element[0], tableScroller.firstChild); // @HTMLUpdateOK
 
+    // determine default scrollbar size at initial creation time to avoid layout changes later on
+    this._getLayoutManager().initializeDefaultScrollBarSize(tableScroller);
+
     return tableScroller;
   };
 
@@ -16346,7 +16392,7 @@ var __oj_table_metadata =
                   if (this._isGutterStartColumnEnabled()) {
                     targetColumnIndex -= 1;
                   }
-                  this._scrollColumnIntoViewport(targetColumnIndex);
+                  this._scrollColumnIntoViewport(targetColumnIndex, cell);
                   break;
                 }
               }
@@ -16395,7 +16441,7 @@ var __oj_table_metadata =
             for (let i = 0; i < focusedRowCells.length; i++) {
               const cell = focusedRowCells[i];
               if ($(cell).has(event.target).length > 0) {
-                this._scrollColumnIntoViewport(i);
+                this._scrollColumnIntoViewport(i, cell);
                 break;
               }
             }
@@ -17893,28 +17939,35 @@ var __oj_table_metadata =
   /**
    * Scroll column into viewport
    * @param {number} columnIdx  row index
+   * @param {Element=} cellElement optional cell element that should be scrolled into view
    * @private
    */
-  Table.prototype._scrollColumnIntoViewport = function (columnIdx) {
+  Table.prototype._scrollColumnIntoViewport = function (columnIdx, cellElement) {
     var layoutManager = this._getLayoutManager();
     if (!layoutManager.hasRenderedSize()) {
       return;
     }
 
-    var tableHeaderColumn;
-    if (columnIdx === -1) {
-      tableHeaderColumn = this._getTableSelectorColumn();
+    // if cell is provided, then focus is really on a body cell that could have colspans
+    // otherwise, use the header cell corresponding to the column index value
+    var targetElement;
+    if (cellElement != null) {
+      targetElement = cellElement;
     } else {
-      tableHeaderColumn = this._getTableHeaderColumn(columnIdx);
-    }
-    if (!tableHeaderColumn) {
-      return;
+      if (columnIdx === -1) {
+        targetElement = this._getTableSelectorColumn();
+      } else {
+        targetElement = this._getTableHeaderColumn(columnIdx);
+      }
+      if (!targetElement) {
+        return;
+      }
     }
 
     var scrollingElement = layoutManager.getScroller();
     var $scrollingElement = $(scrollingElement);
 
-    var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(tableHeaderColumn, columnIdx);
+    var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(targetElement, columnIdx);
     var leftOverflowDiff = horOverflowDiff.left;
     var rightOverflowDiff = horOverflowDiff.right;
     var hasLeftOverflow = leftOverflowDiff >= 0;
@@ -18174,7 +18227,7 @@ var __oj_table_metadata =
         if (typeof firstElem.select === 'function') {
           firstElem.select();
         }
-        this._scrollColumnIntoViewport(columnIdx);
+        this._scrollColumnIntoViewport(columnIdx, tableBodyCell);
         return true;
       }
     }
@@ -21474,7 +21527,7 @@ var __oj_table_metadata =
         }
       }
       if (this._isDefaultSelectorEnabled()) {
-        this._updateSelector(selected.row);
+        this._updateSelectors(selected.row);
       }
       this._applySelected(selected);
 
@@ -22171,15 +22224,10 @@ var __oj_table_metadata =
           Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
         )[0];
         if (headerSelectorElement) {
-          let tableBodyRows = this._getTableBodyRows();
           let keySetSize = rowSelectedKeySet.values
             ? rowSelectedKeySet.values().size
             : rowSelectedKeySet.deletedValues().size;
-          if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-            headerSelectorElement.indeterminate = true;
-          } else {
-            headerSelectorElement.indeterminate = false;
-          }
+          headerSelectorElement.indeterminate = keySetSize !== 0;
         }
         this._setSelected({ row: rowSelectedKeySet, column: new ojkeyset.KeySetImpl() }, false, true);
       }
@@ -22191,52 +22239,38 @@ var __oj_table_metadata =
    * @param {Object} selected the selected key set
    * @private
    */
-  Table.prototype._updateSelector = function (selected) {
+  Table.prototype._updateSelectors = function (selected) {
     let table = this._getTable();
     let headerSelectorElements = table.getElementsByClassName(
       Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
     );
     if (headerSelectorElements.length > 0) {
       headerSelectorElements[0].selectedKeys = selected;
-      let tableBodyRows = this._getTableBodyRows();
       let keySetSize = selected.values ? selected.values().size : selected.deletedValues().size;
-      if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-        headerSelectorElements[0].indeterminate = true;
-      } else {
-        headerSelectorElements[0].indeterminate = false;
-      }
+      headerSelectorElements[0].indeterminate = keySetSize !== 0;
     }
 
-    let selectedSelectorCells = table.querySelectorAll(`
-  .${Table.CSS_CLASSES._TABLE_DATA_ROW_CLASS}.${Table.MARKER_STYLE_CLASSES._SELECTED} >
-  .${Table.CSS_CLASSES._TABLE_SELECTOR_CELL}`);
-    if (!selected.isAddAll()) {
-      selectedSelectorCells.forEach((selectorCell) => {
-        let selector = selectorCell.firstChild;
-        if (selected.has(selector.rowKey)) {
-          selected.delete([selector.rowKey]);
-        } else {
-          selector.selectedKeys = new ojkeyset.KeySetImpl([]);
-        }
-      });
-      let selectors = Array.from(
-        table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-      );
-      for (let i = 0; i < selectors.length; i++) {
-        if (selected.has(selectors[i].rowKey)) {
-          selectors[i].selectedKeys = new ojkeyset.KeySetImpl([selectors[i].rowKey]);
-        }
-      }
-    } else {
-      let selectors = Array.from(
-        table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-      );
-      for (let i = 0; i < selectors.length; i++) {
-        if (selected.has(selectors[i].rowKey)) {
-          selectors[i].selectedKeys = new ojkeyset.KeySetImpl([selectors[i].rowKey]);
-        } else {
-          selectors[i].selectedKeys = new ojkeyset.KeySetImpl([]);
+    let selectedSelectors = [];
+    // this relies on the inner dom structure and selected state markup of oj-selector - would be better
+    // to avoid this internal knowledge in the future if possible
+    let selectedSelectorSpans = table.querySelectorAll(`
+    .${Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS} >
+    .${Table.MARKER_STYLE_CLASSES._SELECTED}`);
+    for (let i = 0; i < selectedSelectorSpans.length; i++) {
+      selectedSelectors.push(selectedSelectorSpans[i].parentElement);
+    }
+    let selectors = Array.from(
+      table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
+    );
+    for (let i = 0; i < selectors.length; i++) {
+      let selector = selectors[i];
+      let hasSelectedState = selectedSelectors.indexOf(selector) !== -1;
+      if (selected.has(selector.rowKey)) {
+        if (!hasSelectedState) {
+          selector.selectedKeys = new ojkeyset.KeySetImpl([selector.rowKey]);
         }
+      } else if (hasSelectedState) {
+        selector.selectedKeys = new ojkeyset.KeySetImpl([]);
       }
     }
   };
@@ -22846,11 +22880,22 @@ var __oj_table_metadata =
        * @ojsignature {target:"Type", value:"?"}
        */
       reorder: {
+        // in general it does not seem great that any rowTemplate, rowRenderer, and addRowTemplate logic shouldn't be dynamic
+        // and respond to dnd column reorder operations... the doc below concerning this is just to make it clear HOW things
+        // work today - at this point this is not something that can change without potentially breaking every single row-based
+        // content definition existing applications may already be using combined with the Table's internal column reordering...
+
         /**
          * Enable or disable reordering the columns within the same table using drag and drop.<br><br>
          * Re-ordering is supported one column at a time. In addition, re-ordering will not re-order
          * any cells which have the colspan attribute with value > 1. Such cells will need to be re-ordered manually by listening to
-         * the property change event on the columns property.
+         * the property change event on the columns property.<br><br>
+         * If using a rowTemplate, rowRenderer, or addRowTemplate to configure the display of rows, the Table will handle
+         * any change in column reordering due to a dnd operation internally. Any application logic behind rowTemplate,
+         * rowRenderer, or addRowTemplate definitions should not dynamically respond to 'columns' change notifications pushed
+         * due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute
+         * though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes
+         * in logic needed for the rowTemplate, rowRenderer, or addRowTemplate definitions must be handled by the application.<br><br>
          *
          * <p>See the <a href="#dnd">dnd</a> attribute for usage examples.
          *
@@ -23118,7 +23163,14 @@ var __oj_table_metadata =
      * The function returns either a String or
      * a DOM element of the content inside the row. If the developer chooses
      * to manipulate the row element directly, the function should return
-     * nothing.
+     * nothing.<br><br>
+     *
+     * <p>If using a rowRenderer to configure the display of rows, the Table will handle any change in column reordering due
+     * to a dnd operation internally. Any application logic behind rowRenderer definitions should not dynamically respond to
+     * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+     * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+     * and any relevant changes in logic needed for the rowRenderer definitions must be handled by the application.</p>
+     *
      * @expose
      * @public
      * @instance
@@ -24872,7 +24924,11 @@ var __oj_table_metadata =
       var key = keys[i];
       var value = options[key];
       if (this._isTableRefreshNeeded(key, value, flags)) {
-        if (key === 'columns' || (key === 'selectionMode' && value.row !== undefined)) {
+        if (key === 'columns') {
+          // an external change in 'columns' must reset any previous column reorder operations
+          this._columnsDestMap = null;
+          requiresHeaderRefresh = true;
+        } else if (key === 'selectionMode' && value.row !== undefined) {
           requiresHeaderRefresh = true;
         } else if (key === 'data') {
           requiresDataRefresh = true;

package/dist/js/libs/oj/debug/ojtemplateengine-utils.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'ojs/ojmetadatautils', 'ojs/ojlogger'], function (exports, preact, oj, ojcustomelementUtils, ojmetadatautils, Logger) { 'use strict';
+define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry', 'ojs/ojmetadatautils', 'ojs/ojlogger'], function (exports, preact, oj, ojcustomelementUtils, ojcustomelementRegistry, ojmetadatautils, Logger) { 'use strict';
 
     oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
 
@@ -100,7 +100,7 @@ define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'oj
             };
         }
         static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
-            const metadata = ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(elementTagName);
+            const metadata = ojcustomelementRegistry.getPropertiesForElementTag(elementTagName);
             const [cache, deleteEntry] = PreactTemplate.extendTemplate(template, PreactTemplate._COMPUTED_PROPS_CACHE_FACTORY, (recalc) => {
                 for (const observable of cache) {
                     observable.recalculateValue(recalc);

package/dist/js/libs/oj/debug/ojtimeline-toolkit.js

@@ -1225,6 +1225,14 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       return 8;
     },
 
+    /**
+     * Returns minimum gap between items horizontally
+     * @return {number} The minimum gap
+     */
+    getMinHorizontalBubbleSpacing: () => {
+      return 16;
+    },
+
     /**
      * Returns size for content bubble arrow
      * @return {number} The size of the content bubble arrow
@@ -1257,6 +1265,14 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       return 36;
     },
 
+    /**
+     * Returns the padding for the nav arrow button
+     * @returns {number} The padding of the nav arrow button
+     */
+    getNavButtonPadding: () => {
+      return 8;
+    },
+
     /**
      * Returns bgcolor for content bubble
      * @return {string} The bgcolor of the content bubble
@@ -1690,16 +1706,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     hideKeyboardFocusEffect() {
       this._isShowingKeyboardFocusEffect = false;
       this.hideHoverEffect();
-
-      // turn off actionable mode if it is enabled
-      /* TODO https://jira.oraclecorp.com/jira/browse/JET-48114
-      if (this._timeline.activeInnerElems) {
-        this._timeline.activeInnerElems = null;
-        this._disableAllTabElements();
-        this._timeline._context._parentDiv.focus();
-        this.hasActiveInnerElems = false;
-        this._timeline.getEventManager().ShowFocusEffect(null, this);
-      }*/
     }
 
     /**
@@ -1821,7 +1827,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         previousState: this._previousState,
         state: this._state,
         durationWidth: durationWidth,
-        contentWidth: this.getAvailableContentWidth()
+        contentWidth: this.getAvailableContentWidth(),
+        maxAvailableWidth: this.getMaxAvailableWidth()
       };
     }
 
@@ -1841,9 +1848,53 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         : 0;
       var contentWidth =
         this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT
-          ? bubbleWidth - artifactWidth
+          ? Math.floor(bubbleWidth - artifactWidth)
           : null;
-      return Math.floor(contentWidth);
+      return contentWidth;
+    }
+
+    /**
+     * Gets the largest available width on the right, left or within the bubble in a duration event.
+     * This is only for discrete viewport navigation mode.
+     * @return {number|null} The largest available width in pixels, or null if not duration event.
+     */
+    getMaxAvailableWidth() {
+      var durationEvent = this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT;
+      if (!durationEvent) return null;
+
+      var timeline = this._timeline;
+      var itemStartTime = this.getStartTime();
+      var itemEndTime = this.getEndTime();
+      var discreteNavMode = timeline.isDiscreteNavigationMode();
+      var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+      var edgeOffset;
+      var startTime;
+      var endTime;
+      if (discreteNavMode) {
+        var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+        edgeOffset = navButtonBackgroundWidth - padding;
+        var viewportIndexScroll = Math.floor(
+          (itemStartTime - timeline._viewStartTime) / timeline._initialViewportTimeDuration
+        );
+        var discreteViewportOffsetPos =
+          timeline.getDiscreteViewportDateOffsetPos(viewportIndexScroll);
+        startTime = discreteViewportOffsetPos.startDate;
+        endTime = discreteViewportOffsetPos.endDate;
+      } else {
+        edgeOffset = -padding;
+        startTime = timeline._start;
+        endTime = timeline._end;
+      }
+      var startLoc = timeline.getDatePos(startTime);
+      var endLoc = timeline.getDatePos(endTime);
+      var availableWidthInside =
+        timeline.getDatePos(itemEndTime) - timeline.getDatePos(itemStartTime);
+      var contentBubbleSpacing = DvtTimelineStyleUtils.getContentBubbleSpacing();
+      var availableWidthLeft =
+        timeline.getDatePos(itemStartTime) - contentBubbleSpacing - startLoc + edgeOffset;
+      var availableWidthRight =
+        endLoc - timeline.getDatePos(itemEndTime) - contentBubbleSpacing + edgeOffset;
+      return Math.floor(Math.max(availableWidthInside, availableWidthLeft, availableWidthRight));
     }
 
     /**
@@ -2035,8 +2086,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       this._draggedObj = draggedObj;
     }
 
-    ///
-
     /**
      * Show the drag feedbacks accordingly; called by DnD handlers.
      * @param {dvt.MouseEvent|dvt.KeyboardEvent|dvt.ComponentTouchEvent} event DnD dragOver event, keyboard, or touch event that triggered the feedback
@@ -2648,7 +2697,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
 
       // check viewport collision
       DvtTimelineSeriesItemRenderer.checkEndViewportCollision(item, series, isRTL, width);
-
       // for collision, need the start position to be -contentWidth
       if (item.getEndViewportCollision() && durationWidth === null) {
         width = 2 * width + DvtTimelineStyleUtils.getContentBubbleSpacing();
@@ -3750,6 +3798,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         item._content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
         contentContainer.addChild(item._content);
       }
+
       DvtTimelineSeriesItemRenderer._setupBubble(item, item._content, series);
 
       var nodeWidth, content, contentBubbleArray;
@@ -4176,11 +4225,13 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
       var startTime = item.getDragStartTime();
       var loc = item._timeline.getDatePos(startTime);
-      var navMode = item._timeline.isDiscreteNavigationMode();
-      var length = navMode ? item._timeline._discreteContentLength : series._length;
+      var discreteNavMode = item._timeline.isDiscreteNavigationMode();
+      var length = discreteNavMode ? item._timeline._discreteContentLength : series._length;
       // use viewport end time vs timeline end time if in discrete navigation mode
       var endViewportDate = item._timeline.getDiscreteViewportEndDate();
-      var endViewportPos = item._timeline.getDatePos(item._timeline._viewEndTime);
+      var endViewportPos = item._timeline.getDatePos(
+        discreteNavMode ? endViewportDate : item._timeline._end
+      );
       item.setEndViewportCollision(false);
 
       // no collision behavior if not duration-event
@@ -4188,22 +4239,21 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         return;
       }
 
-      // add half the preview wings to make it look more natural if it would be slightly too long
-      var collisionAdjustment = navButtonBackgroundWidth / 2;
+      // Allow content to extend up to the end edge (the viewport end in discrete nav mode, the time axis end in continuous) minus some padding.
+      // The same padding is used for both discrete and continuous nav mode, and it's equivalent to the padding around the nav button in discrete nav mode.
+      var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+      var collisionAdjustment = discreteNavMode ? navButtonBackgroundWidth - padding : -padding;
       if (!isRTL) {
-        renderEnd = loc + DvtTimelineStyleUtils.getContentBubbleSpacing() + width;
+        renderEnd = loc + width;
 
         if (renderEnd > endViewportPos + collisionAdjustment) {
           // need to use overflow
           item.setEndViewportCollision(true);
         }
       } else {
-        renderEnd = length - loc - width - DvtTimelineStyleUtils.getContentBubbleSpacing();
+        renderEnd = length - loc - width;
         var startViewportPos = length - endViewportPos;
-        if (navMode) {
-          startViewportPos = startViewportPos - navButtonBackgroundWidth;
-        }
-        if (startViewportPos + collisionAdjustment > renderEnd) {
+        if (startViewportPos - collisionAdjustment > renderEnd) {
           item.setEndViewportCollision(true);
         }
       }
@@ -7632,6 +7682,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
       var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
       var navButtonWidth = DvtTimelineStyleUtils.getNavButtonWidth();
+      var navButtonPadding = DvtTimelineStyleUtils.getNavButtonPadding();
       var axisStart =
         seriesCount === 1
           ? timeline._canvasSize - axisVisibleSize
@@ -7675,7 +7726,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
           'prevNavContainer_i'
         );
         prevArrowButton.setCornerRadius(4);
-        prevArrowButton.setTranslate(8, 8);
+        prevArrowButton.setTranslate(navButtonPadding, navButtonPadding);
         prevContainerBackground.addChild(prevArrowButton);
         prevArrowContainer.addChild(prevContainerBackground);
         prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
@@ -7724,7 +7775,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
           'nextNavContainer_i'
         );
         nextArrowButton.setCornerRadius(4);
-        nextArrowButton.setTranslate(16, 8);
+        nextArrowButton.setTranslate(16, navButtonPadding);
         nextContainerBackground.addChild(nextArrowButton);
         nextArrowContainer.addChild(nextContainerBackground);
         nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
@@ -9837,12 +9888,12 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       if (!this._isVertical) {
         var endViewportCollisionOffset = item.getEndViewportCollision() ? item.getContentWidth() : 0;
         var x = item.getLoc() - endViewportCollisionOffset;
-        var width = item.getWidth() + 16;
+        var width = item.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
         var hOffset = DvtTimelineStyleUtils.getBubbleSpacing();
         var overlappingItems = [];
         for (i = 0; i < index; i++) {
           currItem = this._items[i];
-          currWidth = currItem.getWidth() + 16;
+          currWidth = currItem.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
           endViewportCollisionOffset = currItem.getEndViewportCollision()
             ? currItem.getContentWidth()
             : 0;

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

@@ -1178,10 +1178,10 @@ var __oj_timeline_series_metadata =
    * @property {boolean}  previousState.hovered True if the item was previously hovered.
    * @property {boolean}  previousState.selected True if the item was previously selected.
    * @property {boolean}  previousState.focused True if the item was previously focused.
-   * @property {Number}  durationWidth width of the duration-event bubble or null if not duration-event
-   * @property {Number}  contentWidth The available width in px for content.
-   * If the item is not a duration-event, then this is null, and the component will automatically allocate enough width space to accommodate the content.
-   *
+   * @property {Number}  durationWidth width of the duration-event bubble or null if not duration-event.
+   * @property {Number}  contentWidth The available width in pixels for content inside the duration-event bubble, or null if the item is not a duration-event.
+   * @property {Number}  maxAvailableWidth The largest value in pixels among the available width on the right, on the left, and within the duration event bubble.
+   * If the item is not a duration-event, then this is null.
    * @ojdeprecated {target: "property", for: "durationWidth", since:"13.1.0", description: "The durationWidth property is deprecated. Please use the contentWidth property instead."}
    * @ojsignature [{target: "Type", value: "oj.ojTimeline.SeriesItem<K>", for: "data"},
    *               {target: "Type", value: "oj.ojTimeline.Series<K>", for: "seriesData"},

package/dist/js/libs/oj/debug/ojvcomponent-template.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils', 'preact', 'preact/jsx-runtime', 'ojs/ojcontext', 'ojs/ojdataproviderhandler', 'ojs/ojbindpropagation', 'ojs/ojconfig', 'ojs/ojmetadatautils', 'ojs/ojcspexpressionevaluator-internal'], function (exports, Logger, HtmlUtils, ojcustomelementUtils, preact, jsxRuntime, Context, ojdataproviderhandler, ojbindpropagation, ojconfig, ojmetadatautils, ojcspexpressionevaluatorInternal) { 'use strict';
+define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry', 'preact', 'preact/jsx-runtime', 'ojs/ojcontext', 'ojs/ojdataproviderhandler', 'ojs/ojbindpropagation', 'ojs/ojconfig', 'ojs/ojmetadatautils', 'ojs/ojcspexpressionevaluator-internal'], function (exports, Logger, HtmlUtils, ojcustomelementUtils, ojcustomelementRegistry, preact, jsxRuntime, Context, ojdataproviderhandler, ojbindpropagation, ojconfig, ojmetadatautils, ojcspexpressionevaluatorInternal) { 'use strict';
 
     Context = Context && Object.prototype.hasOwnProperty.call(Context, 'default') ? Context['default'] : Context;
 
@@ -406,7 +406,7 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils
             var props = this._getElementProps(engineContext, node);
             const tagName = node.tagName;
             const localName = tagName.toLowerCase();
-            const compMetadata = ojcustomelementUtils.CustomElementUtils.getMetadata(tagName);
+            const compMetadata = ojcustomelementRegistry.getMetadata(tagName);
             return this._createHFunctionCallNode(localName, [
                 this._createPossiblyProvidedAndConsumedProperties(localName, engineContext, compMetadata, props),
                 this._createAst(engineContext, Array.from(node.childNodes))
@@ -602,7 +602,7 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils
                         if (expValue.expr) {
                             const propName = ojcustomelementUtils.AttributeUtils.attributeToPropertyName(name);
                             const propNamePath = propName.split('.');
-                            const propMeta = ojmetadatautils.getPropertyMetadata(propNamePath[0], ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(node.tagName));
+                            const propMeta = ojmetadatautils.getPropertyMetadata(propNamePath[0], ojcustomelementRegistry.getPropertiesForElementTag(node.tagName));
                             if (!(propMeta === null || propMeta === void 0 ? void 0 : propMeta.readOnly)) {
                                 if (propNamePath.length > 1) {
                                     dottedExpressions.push({ subProps: propName, expr: expValue.expr });