@oracle/oraclejet 15.1.1 → 15.1.3

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

@@ -429,6 +429,10 @@ define(['exports', 'ojs/ojcore-base', 'jquery', 'ojs/ojcomponentcore', 'ojs/ojlo
     _NotifyDetached: function () {
       this._invokeBeforeDestroy();
       this._super();
+    },
+    // This method is designed to be triggered by jquery cleanData override.
+    $$cleanElement: function () {
+      this._invokeBeforeDestroy();
     }
   });
 
@@ -438,6 +442,9 @@ define(['exports', 'ojs/ojcore-base', 'jquery', 'ojs/ojcomponentcore', 'ojs/ojlo
         type: 'function'
       }
     },
+    methods: {
+      $$cleanElement: {}
+    },
     extension: {
       _WIDGET_NAME: 'ojSurrogate'
     }

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;