@oracle/oraclejet 11.1.7 → 11.1.10

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

@@ -1569,6 +1569,11 @@ var __oj_table_metadata =
    */
   Table.RESIZE_OFFSET = 10;
 
+  /**
+   * @private
+   */
+  Table.SIZING_ERROR_MARGIN = 0.05;
+
   /**
    * @private
    */
@@ -3202,10 +3207,11 @@ var __oj_table_metadata =
     if (!this._resizeListener) {
       this._resizeListener = function () {
         var layoutManager = this._getLayoutManager();
-        var tableContainer = this._getTableContainer();
+        var containerStyle = window.getComputedStyle(this._getTableContainer());
         // Check if the width and height values should result in a sizing refresh
-        if (layoutManager.isSizingRefreshRequired(tableContainer.offsetWidth,
-                                                  tableContainer.offsetHeight)) {
+        if (layoutManager.isSizingRefreshRequired(
+              layoutManager.getExactOffsetWidth(containerStyle),
+              layoutManager.getExactOffsetHeight(containerStyle))) {
           layoutManager.notifyTableUpdate(Table._UPDATE._RESIZE);
           // refresh dimensions if no tasks are pending since refresh dimensions runs during final task
           if (!this._hasPendingTasks()) {
@@ -6066,8 +6072,6 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scrollLeft) {
-    var tableContainer = this._table._getTableContainer();
-
     if (scrollTop != null) {
       var maxScrollTop = this.getScroller().scrollHeight - this.getScroller().clientHeight;
       var newScrollTop = scrollTop > maxScrollTop ? maxScrollTop : scrollTop;
@@ -6084,8 +6088,9 @@ var __oj_table_metadata =
 
     // cache the final dimensions
     var sizingState = this._getSizingState();
-    sizingState.outerWidth = tableContainer.offsetWidth;
-    sizingState.outerHeight = tableContainer.offsetHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    sizingState.outerWidth = this.getExactOffsetWidth(containerStyle);
+    sizingState.outerHeight = this.getExactOffsetHeight(containerStyle);
 
     this._clearTableUpdates();
     this._enableTableVisibility();
@@ -6258,7 +6263,16 @@ var __oj_table_metadata =
    * @return {Object} An object with boxSizing, borderWidth, and paddingWidth properties
    * @private
    */
-  TableLayoutManager.prototype._getBoxStyle = function (style) {
+  TableLayoutManager.prototype._getBoxStyle = function (style, isVert) {
+    if (isVert) {
+      return {
+        boxSizing: style[Table.CSS_PROP._BOX_SIZING],
+        borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_TOP_WIDTH]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._BORDER_BOTTOM_WIDTH]) || 0),
+        paddingWidth: (parseFloat(style[Table.CSS_PROP._PADDING_TOP]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._PADDING_BOTTOM]) || 0)
+      };
+    }
     return {
       boxSizing: style[Table.CSS_PROP._BOX_SIZING],
       borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_RIGHT_WIDTH]) || 0) +
@@ -6502,6 +6516,22 @@ var __oj_table_metadata =
     this._removeHeaderColumnAndCellColumnWidths();
   };
 
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype._getBottomSlotHeight = function () {
+    var tableBottomSlot = this._table._getTableBottomSlot();
+
+    // find Table's bottom slot height to use when determining if overflow if present
+    if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
+        tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
+      // offsetHeight does not include partial px values, so computed style should be used
+      var bottomSlotStyle = window.getComputedStyle(tableBottomSlot);
+      return this.getExactOffsetHeight(bottomSlotStyle);
+    }
+    return 0;
+  };
+
   /**
    * Returns an array describing the table container's scrollable state.
    * Index 0 describes the vertical state, while index 1 describeds the horizontal state.
@@ -6511,17 +6541,23 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._getTableContainerScrollableState = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
-    var tableElem = this._table._getTable();
+    // clientHeight and clientWidth do not include partial px values, so computed style should be used
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
+    var containerClientWidth = this.getExactClientWidth(containerStyle);
+
+    // offsetHeight and offsetWidth do not include partial px values, so computed style should be used
+    var tableElemStyle = window.getComputedStyle(this._table._getTable());
+    var tableElemHeight = this.getExactOffsetHeight(tableElemStyle);
+    var tableElemWidth = this.getExactOffsetWidth(tableElemStyle);
 
     var result = [];
-    if (tableContainer.clientHeight > 0) {
-      var innerHeight = tableElem.offsetHeight + bottomSlotHeight;
-      // don't use tableContainer[0].scrollHeight as it may not be accurate
-      if (innerHeight > tableContainer.clientHeight) {
+    if (containerClientHeight > 0) {
+      var innerHeight = tableElemHeight + bottomSlotHeight;
+      if (innerHeight - containerClientHeight > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[0] = 1;
-      } else if (tableContainer.clientHeight - innerHeight > 0) {
+      } else if (containerClientHeight - innerHeight > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[0] = -1;
       } else {
@@ -6531,11 +6567,11 @@ var __oj_table_metadata =
       result[0] = 0;
     }
 
-    if (tableContainer.clientWidth > 0) {
-      if (tableElem.offsetWidth > tableContainer.clientWidth) {
+    if (containerClientWidth > 0) {
+      if (tableElemWidth - containerClientWidth > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[1] = 1;
-      } else if (tableContainer.clientWidth - tableElem.offsetWidth > 0) {
+      } else if (containerClientWidth - tableElemWidth > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[1] = -1;
       } else {
@@ -6904,6 +6940,42 @@ var __oj_table_metadata =
     return 0;
   };
 
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactClientHeight = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle, true);
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactClientWidth = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle);
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetHeight = function (computedStyle) {
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]);
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetWidth = function (computedStyle) {
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]);
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
+
   /**
    * @private
    */
@@ -7352,9 +7424,7 @@ var __oj_table_metadata =
     this._verifyMinAndMaxWidths();
 
     // find Table's bottom slot height to use when determining if overflow if present
-    var bottomSlotHeight = (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-                            tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) ?
-          tableBottomSlot.offsetHeight : 0;
+    var bottomSlotHeight = this._getBottomSlotHeight();
 
     var tableContainerScrollableState = this._getTableContainerScrollableState(bottomSlotHeight);
     sizingState.hasVerticalOverflow = (tableContainerScrollableState[0] === 1);
@@ -7488,12 +7558,9 @@ var __oj_table_metadata =
         this._setColumnWidths(0);
       }
       // if bottom slot present, ensure bottom slot is pinned to bottom when underflow is present
-      if (bottomSlotHeight > 0) {
-        var availableHeight = tableContainer.clientHeight - bottomSlotHeight;
-        if (availableHeight !== tableElem.offsetHeight) {
-          tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
-          tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
-        }
+      if (bottomSlotHeight > 0 && tableContainerScrollableState[0] === -1) {
+        tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
+        tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
       }
     }
     if (this._table._isStatusMessageShown()) {
@@ -8240,17 +8307,7 @@ var __oj_table_metadata =
       scrollLeft = this._table._scrollLeft;
     }
 
-    var tableBottomSlot = this._table._getTableBottomSlot();
-
-    // find Table's bottom slot height to use when determining if overflow if present
-    var bottomSlotHeight;
-    if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-        tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
-      bottomSlotHeight = tableBottomSlot.offsetHeight;
-    } else {
-      bottomSlotHeight = 0;
-    }
-
+    var bottomSlotHeight = this._getBottomSlotHeight();
     var tableContainer = this._table._getTableContainer();
     var tableElem = this._table._getTable();
 
@@ -8313,16 +8370,19 @@ var __oj_table_metadata =
    * @private
    */
   TableStickyLayoutManager.prototype._setupTableHeight = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
     var tableScroller = this._table._getTableScroller();
 
     // clear any previous table scroller styling
     tableScroller.removeAttribute(Table.DOM_ATTR._STYLE);
 
     // Size the table scroller to fit in the container height
-    var containerClientHeight = tableContainer.clientHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
     var tableScrollerHeight = containerClientHeight - bottomSlotHeight;
-    if (tableScroller.offsetHeight !== tableScrollerHeight) {
+
+    var scrollerStyle = window.getComputedStyle(tableScroller);
+    var scrollerOffsetHeight = this.getExactOffsetHeight(scrollerStyle);
+    if (Math.abs(scrollerOffsetHeight - tableScrollerHeight) > Table.SIZING_ERROR_MARGIN) {
       tableScroller.style[Table.CSS_PROP._HEIGHT] = tableScrollerHeight + Table.CSS_VAL._PX;
     }
 
@@ -13486,6 +13546,7 @@ var __oj_table_metadata =
     _LEFT: 'left',
     _RIGHT: 'right',
     _PADDING_TOP: 'padding-top',
+    _PADDING_BOTTOM: 'padding-bottom',
     _PADDING_LEFT: 'padding-left',
     _PADDING_RIGHT: 'padding-right',
     _OVERFLOW: 'overflow',
@@ -13496,6 +13557,7 @@ var __oj_table_metadata =
     _MIN_HEIGHT: 'min-height',
     _FLOAT: 'float',
     _BORDER_TOP: 'border-top',
+    _BORDER_TOP_WIDTH: 'border-top-width',
     _BORDER_BOTTOM_WIDTH: 'border-bottom-width',
     _BORDER_LEFT_WIDTH: 'border-left-width',
     _BORDER_RIGHT_WIDTH: 'border-right-width',

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

@@ -1223,11 +1223,33 @@ var __oj_checkboxset_metadata =
    * @since 5.0.0
    */
       GetFocusElement: function () {
+        // JET-48463 - oj-table issue where focus is lost
+        // GetFocusElement() needs to return the correct readonly element
+        // If _GetReadonlyFocusElement() returns null, fallback to the
+        // enabled element logic.
+        if (this.options.readOnly === true) {
+          const readonlyFocusElement = this._GetReadonlyFocusElement();
+          if (readonlyFocusElement) {
+            return readonlyFocusElement;
+          }
+        }
         // We need :disabled here so that we don't try to focus on an element that isn't focusable.
         // :focusable doesn't work because this is called before the custom element is fully upgraded
         // and is still hidden in the DOM.
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-checkboxset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojCheckboxset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
   /**
    * Sets the disabled option onto the dom.
    * This is a no-op for checkboxset since its root dom element is a div, and disabled is

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

@@ -212,6 +212,34 @@ ComponentMessaging.prototype.close = function () {
   }
 };
 
+/**
+ * Releases resources that would otherwise leak memory if they were not released
+ * when the component's dom is removed.
+ * For example, Hammer events are put on the document and will result in
+ * detached dom memory leak if not removed.
+ * @private
+ */
+ ComponentMessaging.prototype.releaseResources = function () {
+  if (this._activated) {
+    $.each(this._strategies, function (i, strategy) {
+      strategy.releaseResources();
+    });
+  }
+};
+
+/**
+ * Symmetrical method to releaseResources. Sets up resources that get
+ * removed in releaseResources.
+ * @private
+ */
+ ComponentMessaging.prototype.setupResources = function () {
+  if (this._activated) {
+    $.each(this._strategies, function (i, strategy) {
+      strategy.setupResources();
+    });
+  }
+};
+
 /**
  * Creates a messaging strategy for the specified type, initializing it with the options provided.
  * @param {string|number} type defined by oj.ComponentMessaging._STRATEGY_TYPE. For example,
@@ -764,6 +792,20 @@ MessagingStrategy.prototype.deactivate = function () {
 MessagingStrategy.prototype.close = function () {
 };
 
+/**
+ *
+ * @private
+ */
+ MessagingStrategy.prototype.setupResources = function () {
+};
+
+/**
+ *
+ * @private
+ */
+ MessagingStrategy.prototype.releaseResources = function () {
+};
+
 /**
  * Reinitializes with the new display options and updates component messaging using the new content.
  *
@@ -2427,6 +2469,21 @@ const CustomElementBridge = {};
 CustomElementBridge.proto = Object.create(oj.BaseCustomElementBridge.proto);
 oj._registerLegacyNamespaceProp('CustomElementBridge', CustomElementBridge);
 
+const getFocusEventPropagator = function (element, type) {
+  return function (event) {
+    // Ensure that the target is the custom element, not the inner element, so create
+    // a new event and dispatch on the custom element.
+    element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
+  };
+};
+
+const getTeardownFunction = function (element, focusPropagator, blurPropagator) {
+  return function () {
+    element.removeEventListener('focus', focusPropagator);
+    element.removeEventListener('blur', blurPropagator);
+  };
+};
+
 oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
   // Provides a promise for JET's Knockout throttling timeout
   // when knockout is used for the component
@@ -2594,18 +2651,7 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     }
 
     // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
-    var getFocusEventPropagator = function (type) {
-      return function (event) {
-        // Ensure that the target is the custom element, not the inner element, so create
-        // a new event and dispatch on the custom element.
-        element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
-      };
-    };
-    var focusElem = this._WIDGET_INSTANCE.__getFocusElement();
-    if (focusElem && focusElem !== element) {
-      focusElem.addEventListener('focus', getFocusEventPropagator('focus'));
-      focusElem.addEventListener('blur', getFocusEventPropagator('blur'));
-    }
+    this._setupFocusPropagation(element);
   },
 
   DefineMethodCallback: function (proto, method, methodMeta) {
@@ -2728,12 +2774,16 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     if (Components.__GetWidgetConstructor(this._WIDGET_ELEM) && this._WIDGET_INSTANCE) {
       this._WIDGET_INSTANCE.__handleDisconnected();
     }
+
+    this._teardownFocusPropagation(element);
   },
 
   HandleReattached: function (element) {
     // Invoke callback on the superclass
     oj.BaseCustomElementBridge.proto.HandleReattached.call(this, element);
 
+    this._setupFocusPropagation(element);
+
     if (this._WIDGET_INSTANCE) {
       this._WIDGET_INSTANCE.__handleConnected();
     }
@@ -2928,6 +2978,25 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
       elem[prop] = value;
     }
     return isEvent;
+  },
+
+  _setupFocusPropagation: function (element) {
+    // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
+    const focusElem = this._WIDGET_INSTANCE.__getFocusElement();
+    if (focusElem && focusElem !== element) {
+      const focusPropagator = getFocusEventPropagator(element, 'focus');
+      const blurPropagator = getFocusEventPropagator(element, 'blur');
+      focusElem.addEventListener('focus', focusPropagator);
+      focusElem.addEventListener('blur', blurPropagator);
+      this._teardownFocus = getTeardownFunction(focusElem, focusPropagator, blurPropagator);
+    }
+  },
+
+  _teardownFocusPropagation: function () {
+    if (this._teardownFocus) {
+      this._teardownFocus();
+      this._teardownFocus = null;
+    }
   }
 });
 

package/dist/js/libs/oj/debug_esm/ojcore-base.js

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '11.1.7',
+  version: '11.1.10',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-03-24_17-33-33',
+  revision: '2022-07-05_18-01-38',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate

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

@@ -2727,7 +2727,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     childDiv.className = 'oj-datepicker-content';
     dpDiv.appendChild(childDiv);
     this._dpDiv = bindHover($(dpDiv));
-    document.body.appendChild(dpDiv); // @HTMLUpdateOK
+    // Append the dpDiv to the CE wrapper and for widgets simply to the body
+    if (this._IsCustomElement()) {
+      this._dpDiv.appendTo(this.OuterWrapper); // @HTMLUpdateOK
+    } else {
+      this._dpDiv.appendTo(document.body); // @HTMLUpdateOK
+    }
   },
 
   _createPopupDpDiv: function () {
@@ -2830,13 +2835,10 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       // Set display:block in place of inst._dpDiv.show() which won't work on disconnected elements
       // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
       this._dpDiv.css('display', 'block');
-
-      this._registerSwipeHandler();
     } else {
       this._processReadOnlyKeyboardEdit();
       if (this.options.readOnly !== true) {
         this._attachTrigger();
-        this._registerSwipeHandler();
       }
     }
 
@@ -2845,11 +2847,21 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // passing in true to indicate that we want to show the popup of showOn is set
     // to 'focus'. If this isn't a custom element, we don't want to override the
     // focus functions.
+    // Also, when readonly is true, we just want to focus on the readonly element,
+    // as the popup isn't an issue.
     if (this._IsCustomElement()) {
       let comp = this._getRootElement();
-      let inputElem = this.GetFocusElement();
-      comp.focus = function () {
-        inputElem.focus(true);
+      // We need the input element here regardless of readonly state.
+      let inputElem = this._GetContentElement()[0];
+      comp.focus = () => {
+        const focusElem = this.GetFocusElement();
+        // we only want to call .focus(true) if it's the input elem that we added
+        // the custom focus callback on.
+        if (focusElem === inputElem) {
+          inputElem.focus(true);
+        } else {
+          focusElem.focus();
+        }
       };
 
       let proto = Object.getPrototypeOf(inputElem);
@@ -3138,6 +3150,11 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._setupResizePopupBind();
       }
     }
+
+    if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+      this._registerSwipeHandler();
+    }
+
     return this._super();
   },
 
@@ -3184,6 +3201,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // for non custom element, this is done as first step in destroy
     if (this._IsCustomElement()) {
       this._cleanUpListeners();
+
+      this._unregisterSwipeHandler();
     }
     return this._super();
   },
@@ -4366,6 +4385,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _unregisterSwipeHandler: function () {
+    if (this._dpDiv) {
+      this._dpDiv.off('swiperight swipeleft').ojHammer('destroy');
+    }
+  },
+
   /**
    * If min or max lacks date portion and value contains it, then min + max should use
    * value's date portion
@@ -8755,8 +8780,9 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
     },
 
     _getPrependNode: function () {
+      const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
       return this._isIndependentInput() ?
-        $('body') :
+        independentPrependNode :
         $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
     },
 
@@ -8938,11 +8964,18 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
       // passing in true to indicate that we want to show the popup of showOn is set
       // to 'focus'.  If this isn't a custom element, we don't want to override the
       // focus functions.
+      // Also, when readonly is true, we just want to focus on the readonly element,
+      // as the popup isn't an issue.
       if (this._IsCustomElement()) {
         let comp = this._getRootElement();
-        let inputElem = this.GetFocusElement();
-        comp.focus = function () {
-          inputElem.focus(true);
+        // We need the input element here regardless of readonly state.
+        let inputElem = this._GetContentElement()[0];
+        comp.focus = () => {
+          if (this.options.readOnly === true) {
+            this.GetFocusElement().focus(); // This should be the readonly focus element.
+          } else {
+            inputElem.focus(true);
+          }
         };
 
         let proto = Object.getPrototypeOf(inputElem);
@@ -9210,6 +9243,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         var children = group.children;
         for (var index = 0; index < children.length; index++) {
           wheel = children[index];
+          // This calls Wheel#destroy() and this calls off on each
+          // event listener and destroys Hammer.
           wheel.ojDestroy();
         }
       }
@@ -9245,10 +9280,14 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
      * @override
      */
     _ReleaseResources: function () {
-      // for non custom element, this is done as first step in destroy
-      if (this._IsCustomElement()) {
-        this._cleanUpListeners();
-      }
+      // Since destroy calls _ReleaseResources, we do here for both CustomElement and non CustomElement
+      // instead of doing it here for CustomElement and in destroy which is only for non CustomElements.
+      this._removeResizePopupBind();
+      // Note: We do not have a symmetrical 'createHammer' call in SetupResources.
+      // We create the timepicker wheels that have the Hammer events
+      // when the user clicks on the timepicker icon, or when
+      // the component's options change.
+      this._destroyHammer();
       return this._super();
     },
 
@@ -9269,8 +9308,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9284,7 +9321,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -12020,6 +12057,53 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     return retVal;
   },
+
+  /**
+   * @ignore
+   * @protected
+   * @override
+   * @memberof oj.ojInputDateTime
+   */
+  _ReleaseResources: function () {
+    if (this._IsCustomElement()) {
+      // Trigger the ojInputTime's _ReleaseResources() using the ojInputTime instance.
+      // this._timePicker.ojInputTime('destroy') will not work.
+      // jqueryui-base#destroy will throw an error because IsCustomElement() is true
+      // and you cannot call destroy when IsCustomElement is true.
+      if (this._timePicker) {
+        const timePickerInstance = this._timePicker.ojInputTime('instance');
+        if (timePickerInstance) {
+          timePickerInstance._ReleaseResources();
+          this._timePickerResourcesReleased = true;
+        }
+      }
+    }
+    return this._super();
+  },
+
+  /**
+   * @protected
+   * @override
+   * @instance
+   * @memberof! oj.ojInputDateTime
+   */
+  _SetupResources: function () {
+    var ret = this._superApply(arguments);
+    if (this._IsCustomElement()) {
+      // oj-input-date-time's AfterCreate calls createTimepicker, which creates ojInputTime() which
+      // calls InputTime's _SetupResources.
+      // Then oj-input-date-time's SetupResources is called. Only call ojInputTime's _SetupResources
+      // if they were released in ReleaseResources, so check the flag.
+      if (this._timePickerResourcesReleased && this._timePicker) {
+        const timePickerInstance = this._timePicker.ojInputTime('instance');
+        if (timePickerInstance) {
+          timePickerInstance._SetupResources();
+          this._timePickerResourcesReleased = false;
+        }
+      }
+    }
+    return ret;
+  },
   /**
    * @ignore
    * @protected
@@ -12031,6 +12115,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
     return this._super();
   },
   /**
+   * Called from _destroy. This is for widgets. Cleaning up custom
+   * elements is done in ReleaseResources
    * @ignore
    * @private
    * @memberof oj.ojInputDateTime
@@ -12051,6 +12137,7 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
         this._switcherDiv.remove();
       }
   },
+
   /**
    * @ignore
    * @protected