@oracle/oraclejet 15.1.0 → 15.1.2

package/dist/css/stable/oj-stable.css

@@ -333,7 +333,7 @@
   visibility: hidden; }
 
 .oj-theme-json {
-  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v15.1.0"}' !important; }
+  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v15.1.2"}' !important; }
 
 .oj-helper-hidden-accessible {
   border: 0;
@@ -22572,7 +22572,8 @@ html[dir="rtl"]
 
 /* Styling for the status message. */
 .oj-table-status-message {
-  position: absolute; }
+  position: absolute;
+  background-color: inherit; }
 
 /* Styling for the status message text. */
 .oj-table-status-message-text {

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

@@ -43,7 +43,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/oj
     return composite;
   };
 
-  class CompositeState extends ojcustomelementUtils.ElementState {
+  class CompositeState extends ojcustomelementUtils.LifecycleElementState {
       getTrackChildrenOption() {
           return 'immediate';
       }
@@ -80,6 +80,9 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/oj
   /** @ignore */
   CompositeElementBridge.SUBID_MAP = 'data-oj-subid-map';
 
+  CompositeElementBridge.DisconnectedState = 0;
+  CompositeElementBridge.ConnectedState = 1;
+
   oj.CollectionUtils.copyInto(CompositeElementBridge.proto, {
     beforePropertyChangedEvent: function (element, property, detail) {
       var vmContext = { property: property };
@@ -318,6 +321,11 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/oj
       oj.CompositeTemplateRenderer.invokeViewModelMethod(element, this._VIEW_MODEL, 'disconnected', [
         element
       ]);
+      this._verifyConnectDisconnect(element, CompositeElementBridge.DisconnectedState);
+    },
+
+    HandleAttached: function (element) {
+      this._verifyConnectDisconnect(element, CompositeElementBridge.ConnectedState);
     },
 
     HandleReattached: function (element) {
@@ -334,6 +342,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/oj
           this._VM_CONTEXT
         ]);
       }
+      this._verifyConnectDisconnect(element, CompositeElementBridge.ConnectedState);
     },
 
     InitializeElement: function (element) {
@@ -542,6 +551,34 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/oj
       return this._VIEW_MODEL;
     },
 
+    // Called from HandleAttached, HandleReattached, HandleDetached in order
+    // to cleanup a composite on a true disconnect.
+    _verifyConnectDisconnect: function (element, state) {
+      if (this._verifyingState === undefined) {
+        window.queueMicrotask(() => {
+          if (this._verifyingState === state) {
+            if (this._verifyingState === CompositeElementBridge.ConnectedState) {
+              this._verifiedConnect(element);
+            } else {
+              this._verifiedDisconnect(element);
+            }
+            this._verifyingState = undefined;
+          }
+        });
+      }
+      this._verifyingState = state;
+    },
+
+    _verifiedConnect: function (element) {
+      const state = ojcustomelementUtils.CustomElementUtils.getElementState(element);
+      state.executeLifecycleCallbacks(true);
+    },
+
+    _verifiedDisconnect: function (element) {
+      const state = ojcustomelementUtils.CustomElementUtils.getElementState(element);
+      state.executeLifecycleCallbacks(false);
+    },
+
     _processCompositeTemplate: function (element) {
       // Skip rendering the composite template since the it is not attached to the DOM.
       // The template will be rendered if and when the component will be reattached.

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

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '15.1.0',
+    version: '15.1.2',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2023-10-06_04-39-53',
+    revision: '2023-11-02_05-11-27',
 
     // This function is only meant to be used outside the library, so quoting the name
     // to avoid renaming is appropriate
@@ -274,7 +274,8 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
     if (
       userAgent.indexOf('iphone') > -1 ||
       userAgent.indexOf('ipad') > -1 ||
-      (navigator.platform === 'MacIntel' && typeof navigator.standalone !== 'undefined')
+      // handle iPad/iPhone safari requesting desktop version of site
+      (userAgent.indexOf('macintosh') > -1 && navigator.maxTouchPoints > 0)
     ) {
       os = AgentUtils.OS.IOS;
     } else if (userAgent.indexOf('mac') > -1) {

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

@@ -762,6 +762,34 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcustomelement-registry', 'ojs/ojcon
         ComponentState[ComponentState["BindingsDisposed"] = 8] = "BindingsDisposed";
     })(ComponentState || (ComponentState = {}));
 
+    class LifecycleElementState extends ElementState {
+        constructor() {
+            super(...arguments);
+            this._connectCallbacks = [];
+            this._disconnectCallbacks = [];
+        }
+        addLifecycleCallbacks(connectFunc, disconnectFunc) {
+            if (connectFunc) {
+                this._connectCallbacks.push(connectFunc);
+            }
+            if (disconnectFunc) {
+                this._disconnectCallbacks.push(disconnectFunc);
+            }
+        }
+        removeLifecycleCallbacks(connectFunc, disconnectFunc) {
+            if (connectFunc) {
+                this._connectCallbacks = this._connectCallbacks.filter((item) => item != connectFunc);
+            }
+            if (disconnectFunc) {
+                this._disconnectCallbacks = this._disconnectCallbacks.filter((item) => item != disconnectFunc);
+            }
+        }
+        executeLifecycleCallbacks(isConnected) {
+            const callbacks = isConnected ? this._connectCallbacks : this._disconnectCallbacks;
+            callbacks.forEach((callback) => callback());
+        }
+    }
+
     const NULL_SYMBOL = Symbol('custom element null');
     const EMPTY_STRING_SYMBOL = Symbol('custom element empty string');
     const toSymbolizedValue = (value) => {
@@ -809,6 +837,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcustomelement-registry', 'ojs/ojcon
     exports.ElementState = ElementState;
     exports.ElementUtils = ElementUtils;
     exports.JetElementError = JetElementError;
+    exports.LifecycleElementState = LifecycleElementState;
     exports.OJ_BIND_CONVERTED_NODE = OJ_BIND_CONVERTED_NODE;
     exports.toSymbolizedValue = toSymbolizedValue;
     exports.transformPreactValue = transformPreactValue;

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

@@ -260,6 +260,9 @@ define(['ojs/ojcore', 'ojs/ojlogger', 'ojs/ojcustomelement-utils', 'ojs/ojcustom
     // eslint-disable-next-line no-unused-vars
     HandleBindingsApplied: function (element, bindingContext) {},
 
+    // eslint-disable-next-line no-unused-vars
+    HandleAttached: function (element) {},
+
     // eslint-disable-next-line no-unused-vars
     HandleDetached: function (element) {},
 

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

@@ -62,32 +62,6 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
                     }
                 }
             };
-            this.handleOnBlur = (event) => {
-                if (this.props.modality === 'modal') {
-                    const zorderLayer = this.rootRef.current.parentNode;
-                    let isTargetWithin = false;
-                    if (event.relatedTarget) {
-                        if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, event.relatedTarget)) {
-                            isTargetWithin = true;
-                        }
-                    }
-                    else {
-                        if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, document.activeElement)) {
-                            isTargetWithin = true;
-                        }
-                    }
-                    if (!isTargetWithin && this.props.opened) {
-                        const focusables = ojdrawerutils.DrawerUtils.getFocusables(this.rootRef.current);
-                        event.preventDefault();
-                        if (focusables.length) {
-                            focusables[0].focus();
-                        }
-                        else {
-                            this.rootRef.current.focus();
-                        }
-                    }
-                }
-            };
             this.autoDismissHandler = (event) => {
                 const focusables = ojdrawerutils.DrawerUtils.getFocusables(this.rootRef.current);
                 const zorderLayer = this.rootRef.current.parentNode;
@@ -185,7 +159,7 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
         }
         render(props) {
             if (this.isDrawerOpened() || this.wasDrawerOpenedInPrevState()) {
-                return (jsxRuntime.jsx(ojvcomponent.Root, { ref: this.rootRef, class: this.getPopupStyleClasses(this.props.edge), tabIndex: -1, role: this.props.role || 'dialog', onKeyDown: this.handleKeyDown, onBlur: this.handleOnBlur, children: jsxRuntime.jsx("div", { class: "oj-drawer-full-height", children: props.children }) }));
+                return (jsxRuntime.jsx(ojvcomponent.Root, { ref: this.rootRef, class: this.getPopupStyleClasses(this.props.edge), tabIndex: -1, role: this.props.role || 'dialog', onKeyDown: this.handleKeyDown, children: jsxRuntime.jsx("div", { class: "oj-drawer-full-height", children: props.children }) }));
             }
             return jsxRuntime.jsx(ojvcomponent.Root, {});
         }

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

@@ -1474,7 +1474,7 @@ var __oj_list_view_metadata =
     // template engine should have already been loaded
     var templateEngine = this.getTemplateEngine();
     if (templateEngine) {
-      templateEngine.clean(item.get(0), this.m_widget.GetRootElement());
+      templateEngine.clean(item.get(0), this.m_widget.GetRootElement().get(0));
     }
 
     // remove all children nodes
@@ -1614,7 +1614,7 @@ var __oj_list_view_metadata =
       if (contentNode) {
         // explicit clean when inline template is used
         if (templateEngine) {
-          templateEngine.clean(groupItem, this.m_widget.GetRootElement());
+          templateEngine.clean(groupItem, this.m_widget.GetRootElement().get(0));
         }
         cellNode.removeChild(contentNode);
 
@@ -1699,7 +1699,7 @@ var __oj_list_view_metadata =
           var groupItem = elem.querySelector('.' + groupItemStyleClass);
           if (group != null && groupItem != null) {
             if (templateEngine != null) {
-              templateEngine.clean(group, this.m_widget.GetRootElement());
+              templateEngine.clean(group, this.m_widget.GetRootElement().get(0));
             }
             group.innerHTML = ''; // @HTMLUpdateOK
 
@@ -4135,7 +4135,7 @@ var __oj_list_view_metadata =
         var elem = document.getElementById(this._createSubId('empty'));
         if (elem) {
           if (this.m_engine) {
-            this.m_engine.clean(elem, this.GetRootElement());
+            this.m_engine.clean(elem, this.GetRootElement().get(0));
           }
           elem.parentNode.removeChild(elem);
         }

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

@@ -5,56 +5,12 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojcore-base', 'knockout', 'jquery', 'ojs/ojresponsiveutils'], function (exports, oj, ko, $, ResponsiveUtils) { 'use strict';
+define(['exports', 'ojs/ojcore-base', 'ojs/ojcustomelement-registry', 'knockout', 'jquery', 'ojs/ojresponsiveutils', 'ojs/ojcustomelement-utils'], function (exports, oj, ojcustomelementRegistry, ko, $, ResponsiveUtils, ojcustomelementUtils) { 'use strict';
 
   oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
 
-  /**
-   * @namespace oj.ResponsiveKnockoutUtils
-   * @classdesc Utilities for creating knockout observables to implement responsive pages.
-   * For example you could use oj.ResponsiveKnockoutUtils.createMediaQueryObservable to
-   * create an observable based on the screen width and then bind the tab bar's
-   * orientation attribute to it. See the method doc below for specific examples.
-   * @since 1.1.0
-   * @export
-   * @hideconstructor
-   * @ojtsmodule
-   * @ojtsimport knockout
-   * @ojtsimport {module: "ojresponsiveutils", type:"AMD", importName: "ResponsiveUtils"}
-   *
-   */
-
-  const ResponsiveKnockoutUtils = {};
-  oj._registerLegacyNamespaceProp('ResponsiveKnockoutUtils', ResponsiveKnockoutUtils);
-  /**
-   * <p>creates an observable that
-   * returns true or false based on a media query string.
-   * Can be used in conjuntion with {@link ResponsiveUtils.getFrameworkQuery}
-   * to create an observable based on a framework media query.</p>
-   *
-   * <p>Example:</p>
-   * <pre class="prettyprint">
-   * <code>
-   *    var customQuery = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
-   *                                         '(min-width: 400px)');
-   *
-   *    var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
-   *                             oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
-   *
-   *    self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
-   * </code></pre>
-   *
-   * @param {string} queryString media query string, for example '(min-width: 400px)'
-   * @return a knockout observable  that
-   *              returns true or false based on a media query string.
-   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<boolean>"}
-   * @export
-   * @static
-   * @method createMediaQueryObservable
-   * @memberof oj.ResponsiveKnockoutUtils
-   */
-  ResponsiveKnockoutUtils.createMediaQueryObservable = function (queryString) {
+  const _createMediaQueryObservableInternal = function (queryString, componentElement) {
     if (queryString == null) {
       throw new Error(
         'ResponsiveKnockoutUtils.createMediaQueryObservable: aborting, queryString is null'
@@ -65,10 +21,34 @@ define(['exports', 'ojs/ojcore-base', 'knockout', 'jquery', 'ojs/ojresponsiveuti
 
     var observable = ko.observable(query.matches);
 
-    // add a listener for future changes
-    query.addListener(function (_query) {
+    const listener = function listener(_query) {
       observable(_query.matches);
-    });
+    };
+
+    let resumeCallback;
+    let suspendCallback;
+    if (componentElement) {
+      resumeCallback = () => {
+        query.addListener(listener);
+      };
+      suspendCallback = () => {
+        query.removeListener(listener);
+      };
+
+      const state = ojcustomelementUtils.CustomElementUtils.getElementState(componentElement);
+      state.addLifecycleCallbacks(resumeCallback, suspendCallback);
+    }
+
+    // add a listener for future changes
+    query.addListener(listener);
+
+    observable.dispose = function () {
+      query.removeListener(listener);
+      if (suspendCallback && resumeCallback) {
+        const state = ojcustomelementUtils.CustomElementUtils.getElementState(componentElement);
+        state.removeLifecycleCallbacks(resumeCallback, suspendCallback);
+      }
+    };
 
     // There is a major bug in webkit, tested on ios 7 going from
     // landscape to portrait.
@@ -112,47 +92,7 @@ define(['exports', 'ojs/ojcore-base', 'knockout', 'jquery', 'ojs/ojresponsiveuti
     return observable;
   };
 
-  /**
-   * This function creates a computed observable, the
-   * value of which is one of the {@link ResponsiveUtils.SCREEN_RANGE} constants.
-   * For example when the width is in the
-   * range defined by the sass variable $mediumScreenRange then
-   * the observable returns <code>oj.ResponsiveUtils.SCREEN_RANGE.MD</code>,
-   * but if it's in the range defined by $largeScreenRange then
-   * it returns <code>oj.ResponsiveUtils.SCREEN_RANGE.LG</code>, etc.
-   *
-   *
-   *
-   * <p>Example:</p>
-   * <pre class="prettyprint">
-   * <code>
-   *        // create an observable which returns the current screen range
-   *        self.screenRange = oj.ResponsiveKnockoutUtils.createScreenRangeObservable();
-   *
-   *        self.label2 = ko.computed(function() {
-   *          var range = self.screenRange();
-   *
-   *          if ( oj.ResponsiveUtils.compare(
-   *                       range, oj.ResponsiveUtils.SCREEN_RANGE.MD) <= 0)
-   *          {
-   *            // code for when screen is in small or medium range
-   *          }
-   *          else if (range == oj.ResponsiveUtils.SCREEN_RANGE.XL)
-   *          {
-   *            // code for when screen is in XL range
-   *          }
-   *        });
-   * </code></pre>
-   *
-   * @return a knockout observable the value of which is one of the
-   *  screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD
-   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<ResponsiveUtils.ScreenRange>"}
-   * @export
-   * @static
-   * @memberof oj.ResponsiveKnockoutUtils
-   * @method createScreenRangeObservable
-   */
-  ResponsiveKnockoutUtils.createScreenRangeObservable = function () {
+  const _createScreenRangeObservableInternal = function (componentElement) {
     // queryies
     var xxlQuery = ResponsiveUtils.getFrameworkQuery(ResponsiveUtils.FRAMEWORK_QUERY_KEY.XXL_UP);
 
@@ -166,21 +106,21 @@ define(['exports', 'ojs/ojcore-base', 'knockout', 'jquery', 'ojs/ojresponsiveuti
 
     // observables
     var xxlObservable =
-      xxlQuery == null ? null : ResponsiveKnockoutUtils.createMediaQueryObservable(xxlQuery);
+      xxlQuery == null ? null : _createMediaQueryObservableInternal(xxlQuery, componentElement);
 
     var xlObservable =
-      xlQuery == null ? null : ResponsiveKnockoutUtils.createMediaQueryObservable(xlQuery);
+      xlQuery == null ? null : _createMediaQueryObservableInternal(xlQuery, componentElement);
 
     var lgObservable =
-      lgQuery == null ? null : ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
+      lgQuery == null ? null : _createMediaQueryObservableInternal(lgQuery, componentElement);
 
     var mdObservable =
-      mdQuery == null ? null : ResponsiveKnockoutUtils.createMediaQueryObservable(mdQuery);
+      mdQuery == null ? null : _createMediaQueryObservableInternal(mdQuery, componentElement);
 
     var smObservable =
-      smQuery == null ? null : ResponsiveKnockoutUtils.createMediaQueryObservable(smQuery);
+      smQuery == null ? null : _createMediaQueryObservableInternal(smQuery, componentElement);
 
-    return ko.computed(function () {
+    var screenRange = ko.pureComputed(function () {
       if (xxlObservable && xxlObservable()) {
         return ResponsiveUtils.SCREEN_RANGE.XXL;
       }
@@ -203,11 +143,238 @@ define(['exports', 'ojs/ojcore-base', 'knockout', 'jquery', 'ojs/ojresponsiveuti
 
       throw new Error(' NO MATCH in ResponsiveKnockoutUtils.createScreenRangeObservable');
     });
+
+    screenRange.subscribe(
+      () => {
+        if (smObservable) smObservable.dispose();
+        if (mdObservable) mdObservable.dispose();
+        if (lgObservable) lgObservable.dispose();
+        if (xlObservable) xlObservable.dispose();
+        if (xxlObservable) xxlObservable.dispose();
+      },
+      null,
+      'asleep'
+    );
+
+    return screenRange;
+  };
+
+  /**
+   * @namespace oj.ResponsiveKnockoutUtils
+   * @classdesc Utilities for creating knockout observables to implement responsive pages.
+   * For example you could use oj.ResponsiveKnockoutUtils.createMediaQueryObservable to
+   * create an observable based on the screen width and then bind the tab bar's
+   * orientation attribute to it. See the method doc below for specific examples.
+   * @since 1.1.0
+   * @export
+   * @hideconstructor
+   * @ojtsmodule
+   * @ojtsimport knockout
+   * @ojtsimport {module: "ojresponsiveutils", type:"AMD", importName: "ResponsiveUtils"}
+   *
+   */
+
+  const ResponsiveKnockoutUtils = {};
+  oj._registerLegacyNamespaceProp('ResponsiveKnockoutUtils', ResponsiveKnockoutUtils);
+  /**
+   * <p>Creates an observable that
+   * returns true or false based on a media query string.
+   * Can be used in conjunction with {@link ResponsiveUtils.getFrameworkQuery}
+   * to create an observable based on a framework media query.</p>
+   *
+   * <p>In order to avoid leaking memory, any explicit subscribe() calls on this observable
+   * should be paired with corresponding dispose() calls when the observable is no longer needed.
+   * The observable returned by this method should not be used (directly or indirectly) in an expression
+   * within the view of a custom composite element. See {@link oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable} instead.</p>
+   *
+   * <p>Example:</p>
+   * <pre class="prettyprint">
+   * <code>
+   *    var customQuery = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
+   *                                         '(min-width: 400px)');
+   *
+   *    var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
+   *                             oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
+   *
+   *    self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
+   * </code></pre>
+   *
+   * @param {string} queryString media query string, for example '(min-width: 400px)'
+   * @return a knockout observable  that
+   *              returns true or false based on a media query string.
+   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<boolean>"}
+   * @export
+   * @static
+   * @method createMediaQueryObservable
+   * @memberof oj.ResponsiveKnockoutUtils
+   */
+  ResponsiveKnockoutUtils.createMediaQueryObservable = function (queryString) {
+    return _createMediaQueryObservableInternal(queryString);
+  };
+
+  /**
+   * <p>
+   * This method creates an observable that returns true or false based on a media query string.
+   * It is specifically designed to be used within composite elements.
+   * The componentElement argument is used to clean up media query listeners when the composite element
+   * is disconnected from DOM.
+   * Can be used in conjunction with {@link ResponsiveUtils.getFrameworkQuery}
+   * to create an observable based on a framework media query.
+   * </p>
+   *
+   * <p>
+   * This method can be safely used within composite elements to create an observable that can be used within view expressions
+   * or explicitly subscribed to within the view model. Do not call dispose() on the observable.
+   * The internal media query listeners will automatically be cleaned up when the element is disconnected from the DOM,
+   * and garbage collection will take care of the rest.
+   * </p>
+   *
+   * <p>Example:</p>
+   * <pre class="prettyprint">
+   * <code>
+   *    var customQuery = oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable(
+   *                                         '(min-width: 400px)', modelContext.element);
+   *
+   *    var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
+   *                             oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
+   *
+   *    self.large = oj.ResponsiveKnockoutUtils.createCompositeMediaQueryObservable(lgQuery, modelContext.element);
+   * </code></pre>
+   * @param {string} queryString media query string, for example '(min-width: 400px)'
+   * @param { Element } componentElement composite element that calls the utility in its view or view model
+   * @returns a knockout observable  that
+   *              returns true or false based on a media query string.
+   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<boolean>"}
+   * @export
+   * @static
+   * @method createCompositeMediaQueryObservable
+   * @memberof oj.ResponsiveKnockoutUtils
+   */
+  ResponsiveKnockoutUtils.createCompositeMediaQueryObservable = function (
+    queryString,
+    componentElement
+  ) {
+    const name = componentElement?.nodeName;
+    if (!(componentElement && ojcustomelementRegistry.isComposite(name))) {
+      throw new Error(
+        `Incorrect usage of createCompositeMediaQueryObservable for ${name} - the method should be used on the composite components and componentElement should be given as a method argument.`
+      );
+    }
+    return _createMediaQueryObservableInternal(queryString, componentElement);
+  };
+
+  /**
+   * <p>
+   * This method creates a computed observable, the
+   * value of which is one of the {@link ResponsiveUtils.SCREEN_RANGE} constants.
+   * For example when the width is in the
+   * range defined by the sass variable $mediumScreenRange then
+   * the observable returns <code>oj.ResponsiveUtils.SCREEN_RANGE.MD</code>,
+   * but if it's in the range defined by $largeScreenRange then
+   * it returns <code>oj.ResponsiveUtils.SCREEN_RANGE.LG</code>, etc.
+   * </p>
+   * <p>
+   * In order to avoid leaking memory, any explicit subscribe() calls on this observable should be paired
+   * with corresponding dispose() calls when the observable is no longer needed. The observable
+   * returned by this method should not be used (directly or indirectly) in
+   * an expression within the view of a custom composite element. See {@link oj.ResponsiveKnockoutUtils.createCompositeScreenRangeObservable} instead.
+   * </p>
+   *
+   * <p>Example:</p>
+   * <pre class="prettyprint">
+   * <code>
+   *        // create an observable which returns the current screen range
+   *        self.screenRange = oj.ResponsiveKnockoutUtils.createScreenRangeObservable();
+   *
+   *        self.label2 = ko.computed(function() {
+   *          var range = self.screenRange();
+   *
+   *          if ( oj.ResponsiveUtils.compare(
+   *                       range, oj.ResponsiveUtils.SCREEN_RANGE.MD) <= 0)
+   *          {
+   *            // code for when screen is in small or medium range
+   *          }
+   *          else if (range == oj.ResponsiveUtils.SCREEN_RANGE.XL)
+   *          {
+   *            // code for when screen is in XL range
+   *          }
+   *        });
+   * </code></pre>
+   *
+   * @return A knockout observable the value of which is one of the
+   *  screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD.
+   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<ResponsiveUtils.ScreenRange>"}
+   * @export
+   * @static
+   * @memberof oj.ResponsiveKnockoutUtils
+   * @method createScreenRangeObservable
+   */
+  ResponsiveKnockoutUtils.createScreenRangeObservable = function () {
+    return _createScreenRangeObservableInternal();
+  };
+
+  /**
+   * <p>
+   * The method creates a computed observable, the value of which is one of the {@link ResponsiveUtils.SCREEN_RANGE} constants.
+   * For example when the width is in the range defined by the sass variable $mediumScreenRange then
+   * the observable returns <code>oj.ResponsiveUtils.SCREEN_RANGE.MD</code>,
+   * but if it's in the range defined by $largeScreenRange then
+   * it returns <code>oj.ResponsiveUtils.SCREEN_RANGE.LG</code>, etc.
+   * This method is designed to be used within composite element view expressions.
+   * The componentElement argument is used to clean up media query listeners when the composite element
+   * is disconnected from DOM.
+   * </p>
+   *
+   * <p>
+   * This method can be safely used within composite elements to create an observable that can be used within view expressions
+   * or explicitly subscribed to within the view model. Do not call dispose() on the observable.
+   * The internal media query listeners will automatically be cleaned up when the element is disconnected from the DOM,
+   * and garbage collection will take care of the rest.
+   * </p>
+   *
+   * <p>Example:</p>
+   * <pre class="prettyprint">
+   * <code>
+   *        // create an observable which returns the current screen range
+   *        self.screenRange = oj.ResponsiveKnockoutUtils.createCompositeScreenRangeObservable();
+   *
+   *        self.label2 = ko.computed(function() {
+   *          var range = self.screenRange();
+   *
+   *          if ( oj.ResponsiveUtils.compare(
+   *                       range, oj.ResponsiveUtils.SCREEN_RANGE.MD) <= 0)
+   *          {
+   *            // code for when screen is in small or medium range
+   *          }
+   *          else if (range == oj.ResponsiveUtils.SCREEN_RANGE.XL)
+   *          {
+   *            // code for when screen is in XL range
+   *          }
+   *        });
+   * </code></pre>
+   * @param { Element } componentElement composite element that calls the utility in its view or view model
+   * @returns A knockout observable the value of which is one of the
+   *  screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD.
+   * @ojsignature {target: "Type", for: "returns", value: "ko.Observable<ResponsiveUtils.ScreenRange>"}
+   * @export
+   * @static
+   * @memberof oj.ResponsiveKnockoutUtils
+   * @method createCompositeScreenRangeObservable
+   */
+  ResponsiveKnockoutUtils.createCompositeScreenRangeObservable = function (componentElement) {
+    const name = componentElement?.nodeName;
+    if (!(componentElement && ojcustomelementRegistry.isComposite(name))) {
+      throw new Error(
+        `Incorrect usage of createCompositeScreenRangeObservable for ${name} - the method should be used on the composite components and componentElement should be given as a method argument.`
+      );
+    }
+    return _createScreenRangeObservableInternal(componentElement);
   };
 
-  const createScreenRangeObservable = ResponsiveKnockoutUtils.createScreenRangeObservable;
-  const createMediaQueryObservable = ResponsiveKnockoutUtils.createMediaQueryObservable;
+  const { createScreenRangeObservable, createMediaQueryObservable, createCompositeScreenRangeObservable, createCompositeMediaQueryObservable } = ResponsiveKnockoutUtils;
 
+  exports.createCompositeMediaQueryObservable = createCompositeMediaQueryObservable;
+  exports.createCompositeScreenRangeObservable = createCompositeScreenRangeObservable;
   exports.createMediaQueryObservable = createMediaQueryObservable;
   exports.createScreenRangeObservable = createScreenRangeObservable;