@oracle/oraclejet 14.0.6 → 14.1.0

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

@@ -2504,6 +2504,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
@@ -5677,6 +5768,50 @@ oj.__registerWidget('oj.ojGantt', $.oj.dvtTimeComponent, {
     }
   },
 
+  /**
+   * 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_esm/ojgauge.js

@@ -1584,8 +1584,8 @@ oj.__registerWidget('oj.ojLedGauge', $.oj.dvtBaseGauge, {
  * @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
  *
@@ -3396,12 +3396,13 @@ oj.__registerWidget('oj.ojStatusMeterGauge', $.oj.dvtBaseGauge, {
  * </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
  */
@@ -3734,6 +3735,7 @@ oj.__registerWidget('oj.ojStatusMeterGauge', $.oj.dvtBaseGauge, {
  * @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_esm/ojinputsearch.js

@@ -585,7 +585,7 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
         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);
@@ -922,11 +922,16 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
     }
     _renderDesktopMainTextFieldContainer(props, state, searchIcon, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
         const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
-        return (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), 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: [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 (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), 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: [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 (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), 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: 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 (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), 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: 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: jsx("div", { children: value || placeholder }) })) }))] })));
     }
     _renderMobileDropdownFilterField(props, state, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
         let classes = 'oj-text-field';
@@ -943,7 +948,7 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
             containerClasses += ' oj-text-field-has-end-slot';
             clearIcon = this._renderMobileDropdownClearIcon();
         }
-        return (jsx("div", Object.assign({ class: classes }, { children: jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [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] })), jsx("span", Object.assign({ class: "oj-text-field-end" }, { children: clearIcon }))] })) })));
+        return (jsx("div", Object.assign({ class: classes }, { children: jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [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] })), 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_esm/ojknockout.js

@@ -14,7 +14,8 @@ import { bindingHandlers, applyBindingsToDescendants, ignoreDependencies, comput
 import * as DomUtils from 'ojs/ojdomutils';
 import { setInKoCleanExternal, isTouchSupported } from 'ojs/ojdomutils';
 import $ from 'jquery';
-import { CustomElementUtils, AttributeUtils, JetElementError, ElementUtils } from 'ojs/ojcustomelement-utils';
+import { isElementRegistered, isComposite, isVComponent, getMetadata } from 'ojs/ojcustomelement-registry';
+import { AttributeUtils, CustomElementUtils, JetElementError, ElementUtils } from 'ojs/ojcustomelement-utils';
 import { getPropagationMetadataViaCache, ROOT_BINDING_PROPAGATION } from 'ojs/ojbindpropagation';
 import KeySetImpl from 'ojs/ojkeysetimpl';
 import Context from 'ojs/ojcontext';
@@ -1339,25 +1340,22 @@ BindingProviderImpl.addPostprocessor({
     if (!oj$1.BaseCustomElementBridge) {
       return wrappedReturn;
     }
-    return (
-      wrappedReturn ||
-      (node.nodeType === 1 && CustomElementUtils.isElementRegistered(node.nodeName))
-    );
+    return wrappedReturn || (node.nodeType === 1 && isElementRegistered(node.nodeName));
   },
 
   getBindingAccessors: function (node, bindingContext, wrappedReturn) {
     if (node.nodeType === 1) {
       var name = node.nodeName;
 
-      if (CustomElementUtils.isElementRegistered(name)) {
+      if (isElementRegistered(name)) {
         // eslint-disable-next-line no-param-reassign
         wrappedReturn = wrappedReturn || {};
 
         // eslint-disable-next-line no-param-reassign
         wrappedReturn._ojCustomElement = function () {
-          const isComposite = CustomElementUtils.isComposite(name);
-          const isVComponent = CustomElementUtils.isVComponent(name);
-          return { skipThrottling: isComposite || isVComponent };
+          const isComposite$1 = isComposite(name);
+          const isVComponent$1 = isVComponent(name);
+          return { skipThrottling: isComposite$1 || isVComponent$1 };
         };
       }
     }
@@ -2188,7 +2186,7 @@ const ExpressionPropertyUpdater = function (element, bindingContext, skipThrottl
       var attribute = AttributeUtils.propertyNameToAttribute(property);
       var message = `Invalid type '${typeof listener}' found for attribute '${attribute}'.\
  Expected value of type 'function'."`;
-      if (CustomElementUtils.isElementRegistered(element.tagName)) {
+      if (isElementRegistered(element.tagName)) {
         const elementState = CustomElementUtils.getElementState(element);
         elementState.rejectBindingProvider(message);
       }
@@ -2520,7 +2518,7 @@ oj._registerLegacyNamespaceProp('_KnockoutBindingProvider', _KnockoutBindingProv
       var _expressionHandler;
       var attributeListener;
 
-      const compMetadata = CustomElementUtils.getMetadata(element.tagName);
+      const compMetadata = getMetadata(element.tagName);
       const metadataProps = compMetadata.properties || {};
 
       // Compute data about the provided and consumed properties.
@@ -3420,10 +3418,7 @@ ComponentBinding.getDefaultInstance().setupManagedAttributes({
 
         // Handle event binding for native HTML elements.
         // The event binding for custom elements is handled by the bridge.
-        if (
-          !CustomElementUtils.isElementRegistered(node.nodeName) &&
-          attr.name.substring(0, 3) === 'on-'
-        ) {
+        if (!isElementRegistered(node.nodeName) && attr.name.substring(0, 3) === 'on-') {
           boundEvents.push(attr);
         }
       }

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

@@ -2391,8 +2391,7 @@ class Legend extends BaseComponent {
       // 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 @@ class Legend extends BaseComponent {
   }
 
   /**
-   * 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 @@ class Legend extends BaseComponent {
         item['categoryVisibility'] = null;
       }
     }
+    this.getCache().putToCache('hasCollapsible', hasCollapsible);
   }
 
   /**
@@ -2679,7 +2681,12 @@ class Legend extends BaseComponent {
       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(
           ResourceUtils.format(translations.labelAndValue, [

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

@@ -476,6 +476,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},
@@ -505,6 +506,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},
@@ -512,7 +518,6 @@ var __oj_legend_section_metadata =
  */
 
 // METHOD TYPEDEFS
-
 /**
  * @typedef {Object} oj.ojLegend.SectionContext
  * @ojtsignore
@@ -706,7 +711,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
@@ -967,6 +972,7 @@ oj.__registerWidget('oj.ojLegend', $.oj.dvtBaseComponent, {
      * @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>
@@ -1654,6 +1660,7 @@ setDefaultOptions({
  * @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>.
@@ -1666,6 +1673,7 @@ setDefaultOptions({
  * @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.
@@ -1676,6 +1684,7 @@ setDefaultOptions({
  * @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.
@@ -1687,6 +1696,7 @@ setDefaultOptions({
  * @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.
@@ -1717,6 +1727,7 @@ setDefaultOptions({
  * @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_esm/ojmenu.js

@@ -18,6 +18,7 @@ import { startAnimation } from 'ojs/ojanimation';
 import { warn } from 'ojs/ojlogger';
 import { getDeviceRenderMode } from 'ojs/ojconfig';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
+import { isElementRegistered } from 'ojs/ojcustomelement-registry';
 
 (function () {
   // -----------------------------------------------------------------------------
@@ -4327,7 +4328,7 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
     ojMenu: {
       openOptions: createDynamicPropertyGetter(function (context) {
         var position;
-        if (CustomElementUtils.isElementRegistered(context.element.tagName)) {
+        if (isElementRegistered(context.element.tagName)) {
           if (context.containers.indexOf('ojMenu') >= 0) {
             position = {
               my: { horizontal: 'start', vertical: 'top' },

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

@@ -1201,6 +1201,12 @@ MessageViewModel.prototype._computeCategory = function () {
   }
 
   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 =
@@ -1926,6 +1932,9 @@ var __oj_message_metadata =
             "info": {
               "type": "string"
             },
+            "none": {
+              "type": "string"
+            },
             "warning": {
               "type": "string"
             }

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

@@ -1139,17 +1139,23 @@ MessagesViewModel.prototype._handleOpen = function (event) {
 };
 
 MessagesViewModel.prototype._updateLiveRegionAndContainer = function (message) {
-  var translations = getComponentTranslations('oj-ojMessage').categories;
+  const 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.
@@ -2056,6 +2062,9 @@ var __oj_messages_metadata =
             },
             "newMessage": {
               "type": "string"
+            },
+            "noDetail": {
+              "type": "string"
             }
           }
         },

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

@@ -4495,8 +4495,10 @@ const DvtNBoxNodeRenderer = {
               : ' oj-avatar-bg-' + bgColor + ' oj-nbox-node-initials-' + bgColor)
         );
         if (hasSource) {
+          // for ios use a smaller cropped image JET-53563
+          var isIos = Agent.os === 'ios';
           var iconContainer = new Container(nbox.getCtx());
-          var iconBackgroundSize = icon['backgroundSize'];
+          var iconBackgroundSize = isIos ? icon['backgroundIosSize'] : icon['backgroundSize'];
           var backgroundMarker = new ImageMarker(
             nbox.getCtx(),
             iconX,
@@ -4511,7 +4513,11 @@ const DvtNBoxNodeRenderer = {
           );
           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_esm/ojnbox.js

@@ -2101,6 +2101,10 @@ oj.__registerWidget('oj.ojNBox', $.oj.dvtBaseComponent, {
       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'