@oracle/oraclejet 14.0.10 → 14.1.1

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

@@ -2497,6 +2497,97 @@ var __oj_gantt_reference_object_metadata =
    * <oj-gantt-reference-object short-desc="[[$current.data.shortDesc]]"></oj-gantt-reference-object>
    */
 
+  /**
+   * Class to help set css properties on the component root options object
+   * @param {Object} object The root options object from which this path should be resolved
+   * @param {string} path The string path within the options object to resolve
+   * @protected
+   * @constructor
+   * @ignore
+   */
+  const DvtJsonPath = function (object, path) {
+    this._path = path;
+    this._root = object;
+    this._delimiter = '/';
+  };
+
+  /**
+   * Resolves the parameter of the leaf object and the leaf object itself
+   * @param {Object} root The root object to update
+   * @param {string} path The string path within the root object to resolve
+   * @param {string} delimiter The string delimiter for the path string
+   * @param {boolean} createIfMissing Flag to create the hierarchy of the namespaces if they do not exist
+   * @return {Object} The resolved parameter
+   * @private
+   */
+  DvtJsonPath.prototype._resolveLeafObjectAndProperty = function (
+    root,
+    path,
+    delimiter,
+    createIfMissing
+  ) {
+    var result = {};
+    while (root && path.indexOf(delimiter) > -1) {
+      var subProperty = path.substring(0, path.indexOf(delimiter));
+      if (createIfMissing && root[subProperty] === undefined) {
+        // eslint-disable-next-line no-param-reassign
+        root[subProperty] = {};
+      }
+      // eslint-disable-next-line no-param-reassign
+      root = root[subProperty];
+      // eslint-disable-next-line no-param-reassign
+      path = path.substring(path.indexOf(delimiter) + 1, path.length);
+    }
+
+    if (root) {
+      result.object = root;
+      result.parameter = path;
+    }
+
+    return result;
+  };
+
+  /**
+   * Resolves path to the leaf object and parameter of this object
+   * @param {boolean} createIfMissing Flag to create the hierarchy of the namespaces if they do not exist
+   * @private
+   */
+  DvtJsonPath.prototype._resolvePath = function (createIfMissing) {
+    if (this._leaf === undefined) {
+      var result = this._resolveLeafObjectAndProperty(
+        this._root,
+        this._path,
+        this._delimiter,
+        createIfMissing
+      );
+
+      this._leaf = result.object;
+      this._param = result.parameter;
+    }
+  };
+
+  /**
+   * Returns value of the leaf element of the path.
+   * @return {Object} value The value of the leaf element or undefined if path structure is not yet created
+   */
+  DvtJsonPath.prototype.getValue = function () {
+    this._resolvePath(false);
+    return this._leaf === undefined ? undefined : this._leaf[this._param];
+  };
+
+  /**
+   * Sets value of the leaf element of the path.
+   * @param {Object} value The value of the leaf element
+   * @param {boolean} bOverride Whether to override the original value
+   */
+  DvtJsonPath.prototype.setValue = function (value, bOverride) {
+    this._resolvePath(true);
+
+    if (bOverride || !this._leaf[this._param]) {
+      this._leaf[this._param] = value;
+    }
+  };
+
   /**
    * For default date converter
    * @static
@@ -5670,6 +5761,50 @@ var __oj_gantt_reference_object_metadata =
       }
     },
 
+    /**
+     * Recalculate styles on the given childStyleClasses and update the given
+     * options object.
+     * @param {Object} options options object
+     * @param {Array<string>} childStyleClassKeys subset of keys from _GetChildStyleClasses() to target
+     * @private
+     * @instance
+     * @memberof oj.ojGantt
+     */
+    _updateStyles: function (options, childStyleClassKeys) {
+      var childStyleClasses = this._GetChildStyleClasses();
+      var targetChildStyleClasses = {};
+      childStyleClassKeys.forEach((key) => {
+        var definitions = childStyleClasses[key];
+        targetChildStyleClasses[key] = definitions;
+        if (!(definitions instanceof Array)) {
+          definitions = [definitions];
+        }
+        // Clear previous values from options
+        definitions.forEach((definition) => {
+          var stylePath = definition.path;
+          var path = new DvtJsonPath(options, stylePath);
+          path.setValue(undefined, true);
+        });
+        // Clear cached styles
+        this._styleProcessor.clearCache(key);
+      });
+
+      this._styleProcessor.processStyles(
+        this.element,
+        options,
+        this._GetComponentStyleClasses(),
+        targetChildStyleClasses
+      );
+    },
+
+    // inheritdoc
+    _BeforeResizeRender: function () {
+      // JET-54524
+      // We need to recalculate padding related styles during resize
+      var options = this._component.getOptions();
+      this._updateStyles(options, ['oj-gantt-container', 'oj-gantt-row-label']);
+    },
+
     // @inheritdoc
     _GetComponentRendererOptions: function () {
       return [

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

@@ -1581,8 +1581,8 @@ var __oj_status_meter_gauge_metadata =
    * @ojrole img
    * @ojrole application
    *
-   * @ojpropertylayout [ {propertyGroup: "common", items: ["selectedState.shape", "unselectedState.shape", "hoverState.shape", "changedState.shape", "style"]},
-   *                     {propertyGroup: "data", items: ["value", "min", "max", "step"]} ]
+   * @ojpropertylayout [ {propertyGroup: "common", items: ["style"]},
+   *                     {propertyGroup: "data", items: ["value", "max", "step"]} ]
    * @ojvbdefaultcolumns 4
    * @ojvbmincolumns 1
    *
@@ -3393,12 +3393,13 @@ var __oj_status_meter_gauge_metadata =
    * </p>
    * <h5>track-resize attribute</h5>
    * <p>track-resize attribute is no longer supported. Rating gauges now have fixed sizes. Since we are not supporting the 'fit' enum value for the 'size' api, we no longer need 'track-resize'. </p>
-   * <h5>thresholds attribute</h5>
-   * <p>For the initial release of the oj-c-rating-gauge, we are not supporting thresholds. We plan on supporting this use case in a future release.</p>
    * <h5>tooltip attribute and tooltipTemplate slot </h5>
    * <p> The support for this feature has been split into two attributes, tooltip and datatip. The datatip will be used for interactive gauges only and it will be a function that takes datatipDetail as argument.
    * Tooltip attribute, which will be a string instead of a function, will be used for readonly rating gauge.
    * </p>
+   * <h5>title support</h5>
+   * <p>title will no longer be required to make your rating gauge accessible. Use the datatip or tooltip APIs or the aria-label attribute instead.
+   * </p>
    * @ojfragment migrationDoc
    * @memberof oj.ojRatingGauge
    */
@@ -3731,6 +3732,7 @@ var __oj_status_meter_gauge_metadata =
    * @property {number=} lineWidth=2  The width of the reference line.
    * @property {("dashed"|"dotted"|"solid")=} lineStyle="solid" The line style of the reference line.
    * @ojdeprecated {since: '14.0.0', description: 'This is not recommended in the Redwood design system', target: 'property', for: 'lineStyle' }
+   * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system', target: 'property', for: 'lineWidth' }
    */
   /**
    * @typedef {Object} oj.ojStatusMeterGauge.Threshold

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

@@ -575,7 +575,7 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojdomutils', 'ojs/ojlistdataprovid
             if (state.fullScreenPopup) {
                 rootClasses += ' oj-inputsearch-mobile';
             }
-            const inputClasses = 'oj-inputsearch-input oj-text-field-input';
+            const inputClasses = 'oj-inputsearch-input oj-text-field-input ';
             const iconClasses = 'oj-text-field-start-end-icon oj-inputsearch-search-icon oj-component-icon';
             const displayValue = state.displayValue || '';
             return this._renderEnabled(props, state, rootClasses, iconClasses, displayValue, inputClasses);
@@ -912,11 +912,16 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojdomutils', 'ojs/ojlistdataprovid
         }
         _renderDesktopMainTextFieldContainer(props, state, searchIcon, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
             const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
-            return (jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxRuntime.jsxs("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: [jsxRuntime.jsx(ComposingInput, Object.assign({ type: inputType, inputRef: this._setMainInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, "aria-activedescendant": this._dataProvider ? state.activeDescendantId : null, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleDesktopMainInputKeydown })), autocompleteFloatingElem] }))] })));
+            return (jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxRuntime.jsxs("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: [jsxRuntime.jsx(ComposingInput, { type: inputType, inputRef: this._setMainInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, "aria-activedescendant": this._dataProvider ? state.activeDescendantId : null, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleDesktopMainInputKeydown }), autocompleteFloatingElem] }))] })));
         }
         _renderMobileMainTextFieldContainer(props, state, searchIcon, inputClasses, ariaLabel, listboxId) {
+            const { placeholder, value } = props;
+            const { dropdownOpen, loading } = state;
             const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
-            return (jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxRuntime.jsx("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: jsxRuntime.jsx("input", Object.assign({ readOnly: true, ref: this._setMainInputElem, value: props.value, class: inputClasses, placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout })) }))] })));
+            const mobileInputClasses = inputClasses +
+                ' oj-inputsearch-input-displayonly ' +
+                (value ? '' : ' oj-inputsearch-placeholder');
+            return (jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxRuntime.jsx("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": dropdownOpen ? 'true' : 'false' }, { children: jsxRuntime.jsx("div", Object.assign({ ref: this._setMainInputElem, class: mobileInputClasses, "aria-label": ariaLabel, "aria-controls": listboxId, "aria-busy": dropdownOpen && loading, tabIndex: 0, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout }, { children: jsxRuntime.jsx("div", { children: value || placeholder }) })) }))] })));
         }
         _renderMobileDropdownFilterField(props, state, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
             let classes = 'oj-text-field';
@@ -933,7 +938,7 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojdomutils', 'ojs/ojlistdataprovid
                 containerClasses += ' oj-text-field-has-end-slot';
                 clearIcon = this._renderMobileDropdownClearIcon();
             }
-            return (jsxRuntime.jsx("div", Object.assign({ class: classes }, { children: jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxRuntime.jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [jsxRuntime.jsx(ComposingInput, Object.assign({ type: inputType, inputRef: this._setMobileFilterInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-busy": state.loading, "aria-activedescendant": state.activeDescendantId, onfocusin: this._handleMobileFilterInputFocusin, onfocusout: this._handleMobileFilterInputFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleMobileFilterInputKeydown, onMouseDown: this._handleFilterInputMousedown })), autocompleteFloatingElem] })), jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-end" }, { children: clearIcon }))] })) })));
+            return (jsxRuntime.jsx("div", Object.assign({ class: classes }, { children: jsxRuntime.jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxRuntime.jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [jsxRuntime.jsx(ComposingInput, { type: inputType, inputRef: this._setMobileFilterInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-busy": state.loading, "aria-activedescendant": state.activeDescendantId, onfocusin: this._handleMobileFilterInputFocusin, onfocusout: this._handleMobileFilterInputFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleMobileFilterInputKeydown, onMouseDown: this._handleFilterInputMousedown }), autocompleteFloatingElem] })), jsxRuntime.jsx("span", Object.assign({ class: "oj-text-field-end" }, { children: clearIcon }))] })) })));
         }
         _renderMobileDropdownBackIcon() {
             const backIconClasses = 'oj-inputsearch-back-icon oj-inputsearch-icon oj-component-icon oj-clickable-icon-nocontext';

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

@@ -518,11 +518,6 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojkeysetimpl'], function (exports, oj
                 keys: undefined
             };
             this.keys.keys = new Set(keys);
-            Object.defineProperty(this, '_keys', {
-                get: () => {
-                    return this.keys.keys;
-                }
-            });
         }
         has(key) {
             return _has(this.keys.keys, key);
@@ -576,11 +571,6 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojkeysetimpl'], function (exports, oj
                 deletedKeys: undefined
             };
             this.keys.deletedKeys = new Set(keys);
-            Object.defineProperty(this, '_keys', {
-                get: () => {
-                    return this.keys.deletedKeys;
-                }
-            });
         }
         has(key) {
             return !_has(this.keys.deletedKeys, key);

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', 'knockout', 'ojs/ojdomutils', 'jquery', 'ojs/ojcustomelement-utils', 'ojs/ojbindpropagation', 'ojs/ojkeysetimpl', 'ojs/ojcontext', 'ojs/ojtemplateengine-ko', 'ojs/ojcore-base', 'ojs/ojknockouttemplateutils', 'ojs/ojresponsiveknockoututils'], function (widget, BindingProviderImpl, oj$1, Logger, ko, DomUtils, $, ojcustomelementUtils, ojbindpropagation, KeySetImpl, Context, templateEngine, oj$2, KnockoutTemplateUtils, ResponsiveKnockoutUtils) { 'use strict';
+define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', 'knockout', 'ojs/ojdomutils', 'jquery', 'ojs/ojcustomelement-registry', 'ojs/ojcustomelement-utils', 'ojs/ojbindpropagation', 'ojs/ojkeysetimpl', 'ojs/ojcontext', 'ojs/ojtemplateengine-ko', 'ojs/ojcore-base', 'ojs/ojknockouttemplateutils', 'ojs/ojresponsiveknockoututils'], function (widget, BindingProviderImpl, oj$1, Logger, ko, DomUtils, $, ojcustomelementRegistry, ojcustomelementUtils, ojbindpropagation, KeySetImpl, Context, templateEngine, oj$2, KnockoutTemplateUtils, ResponsiveKnockoutUtils) { 'use strict';
 
   BindingProviderImpl = BindingProviderImpl && Object.prototype.hasOwnProperty.call(BindingProviderImpl, 'default') ? BindingProviderImpl['default'] : BindingProviderImpl;
   oj$1 = oj$1 && Object.prototype.hasOwnProperty.call(oj$1, 'default') ? oj$1['default'] : oj$1;
@@ -1331,24 +1331,21 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
       if (!oj$1.BaseCustomElementBridge) {
         return wrappedReturn;
       }
-      return (
-        wrappedReturn ||
-        (node.nodeType === 1 && ojcustomelementUtils.CustomElementUtils.isElementRegistered(node.nodeName))
-      );
+      return wrappedReturn || (node.nodeType === 1 && ojcustomelementRegistry.isElementRegistered(node.nodeName));
     },
 
     getBindingAccessors: function (node, bindingContext, wrappedReturn) {
       if (node.nodeType === 1) {
         var name = node.nodeName;
 
-        if (ojcustomelementUtils.CustomElementUtils.isElementRegistered(name)) {
+        if (ojcustomelementRegistry.isElementRegistered(name)) {
           // eslint-disable-next-line no-param-reassign
           wrappedReturn = wrappedReturn || {};
 
           // eslint-disable-next-line no-param-reassign
           wrappedReturn._ojCustomElement = function () {
-            const isComposite = ojcustomelementUtils.CustomElementUtils.isComposite(name);
-            const isVComponent = ojcustomelementUtils.CustomElementUtils.isVComponent(name);
+            const isComposite = ojcustomelementRegistry.isComposite(name);
+            const isVComponent = ojcustomelementRegistry.isVComponent(name);
             return { skipThrottling: isComposite || isVComponent };
           };
         }
@@ -2180,7 +2177,7 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
         var attribute = ojcustomelementUtils.AttributeUtils.propertyNameToAttribute(property);
         var message = `Invalid type '${typeof listener}' found for attribute '${attribute}'.\
  Expected value of type 'function'."`;
-        if (ojcustomelementUtils.CustomElementUtils.isElementRegistered(element.tagName)) {
+        if (ojcustomelementRegistry.isElementRegistered(element.tagName)) {
           const elementState = ojcustomelementUtils.CustomElementUtils.getElementState(element);
           elementState.rejectBindingProvider(message);
         }
@@ -2512,7 +2509,7 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
         var _expressionHandler;
         var attributeListener;
 
-        const compMetadata = ojcustomelementUtils.CustomElementUtils.getMetadata(element.tagName);
+        const compMetadata = ojcustomelementRegistry.getMetadata(element.tagName);
         const metadataProps = compMetadata.properties || {};
 
         // Compute data about the provided and consumed properties.
@@ -3412,10 +3409,7 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
 
           // Handle event binding for native HTML elements.
           // The event binding for custom elements is handled by the bridge.
-          if (
-            !ojcustomelementUtils.CustomElementUtils.isElementRegistered(node.nodeName) &&
-            attr.name.substring(0, 3) === 'on-'
-          ) {
+          if (!ojcustomelementRegistry.isElementRegistered(node.nodeName) && attr.name.substring(0, 3) === 'on-') {
             boundEvents.push(attr);
           }
         }

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

@@ -2391,8 +2391,7 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
         // Combine the user options with the defaults and store
         this.Options = this.Defaults.calcOptions(options);
 
-        // Transfer the category visibility properties to the hiddenCategories.
-        this._transferVisibilityProps(this.Options['sections']);
+        this._processData(this.Options['sections']);
       } else if (!this.Options)
         // Create a default options object if none has been specified
         this.Options = this.GetDefaults();
@@ -2641,24 +2640,26 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
     }
 
     /**
-     * Transfer categoryVisibility property from legend item to hiddenCategories on the legend.
+     * Processes the sections data. Transfers categoryVisibility property from legend item to hiddenCategories on the legend.
      * @param {array} sections The array of legend section definitions
      * @private
      */
-    _transferVisibilityProps(sections) {
+    _processData(sections) {
+      let hasCollapsible = false;
       if (!sections || sections.length <= 0) return;
 
       var hiddenCategories = this.getOptions()['hiddenCategories'];
       for (var i = 0; i < sections.length; i++) {
         var section = sections[i];
-
+        hasCollapsible = hasCollapsible || section.collapsible === 'on';
         // If this section has nested sections, recurse.
-        if (section['sections']) this._transferVisibilityProps(section['sections']);
+        if (section['sections']) this._processData(section['sections']);
 
         // Iterate through the items and transfer properties.
         var items = section['items'];
         if (!items || items.length <= 0) continue;
 
+        // Transfer the category visibility properties to the hiddenCategories.
         for (var j = 0; j < items.length; j++) {
           var item = items[j];
           var itemCategory = DvtLegendUtils.getItemCategory(item, this);
@@ -2669,6 +2670,7 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
           item['categoryVisibility'] = null;
         }
       }
+      this.getCache().putToCache('hasCollapsible', hasCollapsible);
     }
 
     /**
@@ -2679,7 +2681,12 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
         var options = this.getOptions();
         var translations = options.translations;
         var hideAndShow = options['hideAndShowBehavior'];
-        if ((hideAndShow != 'off' && hideAndShow != 'none') || options['hoverBehavior'] == 'dim') {
+        const hasCollapsible = this.getCache().getFromCache('hasCollapsible');
+        if (
+          (hideAndShow != 'off' && hideAndShow != 'none') ||
+          options['hoverBehavior'] == 'dim' ||
+          hasCollapsible
+        ) {
           this.getCtx().setAriaRole('application');
           this.getCtx().setAriaLabel(
             dvt.ResourceUtils.format(translations.labelAndValue, [

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

@@ -475,6 +475,7 @@ var __oj_legend_section_metadata =
    * @property {string=} title The title of the legend section.
    * @property {"center"|"end"|"start"} [titleHalign="start"] The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
    * @property {Object=} titleStyle The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
+   * @ojdeprecated {since: '14.1.0', description: 'This attribute is deprecated. Applications should use the expanded API on oj-legend instead', target: 'property', for: 'expanded' }
    * @ojsignature [{target: "Type", value: "K", for: "id"},
    *               {target: "Type", value: "Array.<oj.ojLegend.Item<K>>", for: "items", jsdocOverride: true},
    *               {target: "Type", value: "Array.<oj.ojLegend.Section<K>>", for: "sections", jsdocOverride: true},
@@ -504,6 +505,11 @@ var __oj_legend_section_metadata =
    * @property {Object=} svgStyle The inline style to apply to the legend item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the color attribute. Only SVG CSS style properties are supported.
    * @property {"image"|"line"|"lineWithMarker"|"marker"} [symbolType="marker"] The type of legend symbol to display.
    * @property {string} text The legend item text.
+   * @ojdeprecated [{since: '14.1.0', description: 'This is not recommended in the Redwood design system.', target: 'property', for: 'svgStyle'},
+   *                {since: '14.1.0', description: 'This is not recommended in the Redwood design system.', target: 'property', for: 'svgClassName'},
+   *                {since: '14.1.0', description: 'This is not recommended in the Redwood design system.', target: 'property', for: 'markerSvgClassName'},
+   *                {since: '14.1.0', description: 'This is not recommended in the Redwood design system.', target: 'property', for: 'markerSvgStyle'},
+   *                {since: '14.1.0', description: 'This api is deprecated. Use hidden-categories in oj-legend instead.', target: 'property', for: 'categoryVisibility'}]
    * @ojsignature [{target: "Type", value: "K", for: "id"},
    *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true},
    *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "markerSvgStyle", jsdocOverride: true},
@@ -511,7 +517,6 @@ var __oj_legend_section_metadata =
    */
 
   // METHOD TYPEDEFS
-
   /**
    * @typedef {Object} oj.ojLegend.SectionContext
    * @ojtsignore
@@ -705,7 +710,7 @@ var __oj_legend_section_metadata =
    *               }
    *              ]
    *
-   * @ojpropertylayout {propertyGroup: "common", items: ["orientation", "halign", "valign", "hoverBehavior", "hoverBehaviorDelay", "style"]}
+   * @ojpropertylayout {propertyGroup: "common", items: ["orientation", "halign", "valign", "hoverBehavior", "style"]}
    * @ojpropertylayout {propertyGroup: "data", items: ["data"]}
    * @ojvbdefaultcolumns 2
    * @ojvbmincolumns 1
@@ -966,6 +971,7 @@ var __oj_legend_section_metadata =
        * @ojunits milliseconds
        * @ojmin 0
        * @default 200
+       * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system.'}
        *
        * @example <caption>Initialize the Legend with the <code class="prettyprint">hover-behavior-delay</code> attribute specified:</caption>
        * &lt;oj-legend hover-behavior-delay="150">&lt;/oj-legend>
@@ -1653,6 +1659,7 @@ var __oj_legend_section_metadata =
    * @instance
    * @type {string=}
    * @default ""
+   * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system.'}
    */
   /**
    * The inline style to apply to the legend item symbol. This inline style and <code> svg-class-name </code> will override any other styling specified through the options except for <code>marker-svg-style</code> and <code>marker-svg-class-name</code>.
@@ -1665,6 +1672,7 @@ var __oj_legend_section_metadata =
    * @instance
    * @type {Object=}
    * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
+   * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system.'}
    */
   /**
    * The CSS style class to apply to the marker of the legend item symbol. This style class and <code> marker-svg-style </code> will override any other styling specified for the marker. For tooltips and hover interactivity, it's recommended to also pass a representative color to the markerColor attribute.
@@ -1675,6 +1683,7 @@ var __oj_legend_section_metadata =
    * @instance
    * @type {string=}
    * @default ""
+   * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system.'}
    */
   /**
    * The inline style to apply to the marker of the legend item symbol. This inline style and <code> marker-svg-class-name </code> will override any other styling specified for the marker. For tooltips and hover interactivity, it's recommended to also pass a representative color to the markerColor attribute.
@@ -1686,6 +1695,7 @@ var __oj_legend_section_metadata =
    * @instance
    * @type {Object=}
    * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
+   * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system.'}
    */
   /**
    * The shape of the marker. Only applies if symbolType is "marker" or "lineWithMarker". Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
@@ -1716,6 +1726,7 @@ var __oj_legend_section_metadata =
    * @ojvalue {string} "hidden" Legend item will have a hollow symbol.
    * @ojvalue {string} "visible" Legend item will be filled.
    * @default "visible"
+   * @ojdeprecated {since: '14.1.0', description: 'This attribute is deprecated. Use hidden-categories on oj-legend instead'}
    */
   /**
    *  Whether drilling is enabled on the legend item. Drillable objects will show a pointer cursor on hover and fire <code class="prettyprint">ojDrill</code> event on click. To enable drilling for all legend items at once, use the drilling attribute in the top level.

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['jquery', 'ojs/ojjquery-hammer', 'ojs/ojpopupcore', 'ojs/ojoption', 'ojs/ojcore-base', 'hammerjs', 'ojs/ojcontext', 'ojs/ojthemeutils', 'ojs/ojcomponentcore', 'ojs/ojanimation', 'ojs/ojlogger', 'ojs/ojconfig', 'ojs/ojcustomelement-utils'], function ($, ojjqueryHammer, ojpopupcore, ojoption, oj, Hammer, Context, ThemeUtils, Components, AnimationUtils, Logger, Config, ojcustomelementUtils) { 'use strict';
+define(['jquery', 'ojs/ojjquery-hammer', 'ojs/ojpopupcore', 'ojs/ojoption', 'ojs/ojcore-base', 'hammerjs', 'ojs/ojcontext', 'ojs/ojthemeutils', 'ojs/ojcomponentcore', 'ojs/ojanimation', 'ojs/ojlogger', 'ojs/ojconfig', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry'], function ($, ojjqueryHammer, ojpopupcore, ojoption, oj, Hammer, Context, ThemeUtils, Components, AnimationUtils, Logger, Config, ojcustomelementUtils, ojcustomelementRegistry) { 'use strict';
 
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
@@ -4319,7 +4319,7 @@ define(['jquery', 'ojs/ojjquery-hammer', 'ojs/ojpopupcore', 'ojs/ojoption', 'ojs
       ojMenu: {
         openOptions: Components.createDynamicPropertyGetter(function (context) {
           var position;
-          if (ojcustomelementUtils.CustomElementUtils.isElementRegistered(context.element.tagName)) {
+          if (ojcustomelementRegistry.isElementRegistered(context.element.tagName)) {
             if (context.containers.indexOf('ojMenu') >= 0) {
               position = {
                 my: { horizontal: 'start', vertical: 'top' },

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

@@ -1209,6 +1209,12 @@ define(['require', 'exports', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojbutton', 'o
     }
 
     var severity = this._computeSeverity();
+
+    // If severity is none, return undefined as we do not want to show the category
+    if (severity === 'none') {
+      return undefined;
+    }
+
     var translations = this._properties.translations;
 
     var translatedCategory =
@@ -1934,6 +1940,9 @@ var __oj_message_metadata =
             "info": {
               "type": "string"
             },
+            "none": {
+              "type": "string"
+            },
             "warning": {
               "type": "string"
             }

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

@@ -1128,17 +1128,23 @@ define(['ojs/ojcore-base', 'jquery', 'knockout', 'ojs/ojanimation', 'ojs/ojconte
   };
 
   MessagesViewModel.prototype._updateLiveRegionAndContainer = function (message) {
-    var translations = Translations.getComponentTranslations('oj-ojMessage').categories;
+    const translations = Translations.getComponentTranslations('oj-ojMessage').categories;
 
     // oj.Message has 'fatal' severity which is no different from 'error', oj-message does not support
     //  'fatal' for this reason. Map 'fatal' to 'error' just to be compatible with cases where the
     //  message stream could come from existing oj.Message sources.
-    var severity = message.severity === 'fatal' ? 'error' : message.severity;
-    var category = !message.category ? translations[severity] : message.category;
-    var options = { category: category, summary: message.summary, detail: message.detail };
-
-    var liveRegion = this._getLiveRegion();
-    var text = this._getTranslationsDefault('ariaLiveRegion.newMessage', options);
+    const severity = (message.severity === 'fatal' ? 'error' : message.severity) || 'none';
+    const category = !message.category ? translations[severity] : message.category;
+    // check if the message has detail text or not (as it is an optional property)
+    // and determine which translation resource needs to be used.
+    const options = {
+      category: category,
+      summary: message.summary,
+      detail: message.detail || this._getTranslationsDefault('ariaLiveRegion.noDetail')
+    };
+
+    const liveRegion = this._getLiveRegion();
+    const text = this._getTranslationsDefault('ariaLiveRegion.newMessage', options);
     liveRegion.announce(text);
 
     this._refresh(); // re-evaluate the position as the overlay size can change.
@@ -2045,6 +2051,9 @@ var __oj_messages_metadata =
             },
             "newMessage": {
               "type": "string"
+            },
+            "noDetail": {
+              "type": "string"
             }
           }
         },

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

@@ -4494,8 +4494,10 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojtranslation'], function (exports,
                 : ' oj-avatar-bg-' + bgColor + ' oj-nbox-node-initials-' + bgColor)
           );
           if (hasSource) {
+            // for ios use a smaller cropped image JET-53563
+            var isIos = dvt.Agent.os === 'ios';
             var iconContainer = new dvt.Container(nbox.getCtx());
-            var iconBackgroundSize = icon['backgroundSize'];
+            var iconBackgroundSize = isIos ? icon['backgroundIosSize'] : icon['backgroundSize'];
             var backgroundMarker = new dvt.ImageMarker(
               nbox.getCtx(),
               iconX,
@@ -4510,7 +4512,11 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojtranslation'], function (exports,
             );
             iconContainer.addChild(iconMarker);
             iconContainer.addChild(backgroundMarker);
-            backgroundMarker.setClassName('oj-nbox-node-initials-background-pattern');
+            backgroundMarker.setClassName(
+              isIos
+                ? 'oj-nbox-node-initials-background-pattern oj-nbox-ios'
+                : 'oj-nbox-node-initials-background-pattern'
+            );
             iconMarker = iconContainer;
           }
 

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

@@ -2101,6 +2101,10 @@ var __oj_n_box_node_metadata =
         path: 'styleDefaults/nodeDefaults/iconDefaults/backgroundSize',
         property: 'width'
       };
+      styleClasses['oj-nbox-node-initials-background oj-nbox-ios'] = {
+        path: 'styleDefaults/nodeDefaults/iconDefaults/backgroundIosSize',
+        property: 'width'
+      };
       styleClasses['oj-nbox-node-categorylabel'] = {
         path: 'styleDefaults/_categoryNodeDefaults/labelStyle',
         property: 'TEXT'