@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/menu-button/component.json

@@ -1,7 +1,7 @@
 {
   "name": "menu-button",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -25,6 +25,9 @@
       "uxSpecs": [
         "menu-button"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/MenuButtonWebElement.html"
     }
   },
   "propertyLayout": [
@@ -32,15 +35,16 @@
       "propertyGroup": "common",
       "items": [
         "label",
-        "suffix",
         "tooltip",
-        "items",
-        "selection",
         "display",
-        "disabled",
+        "chroming",
         "size",
         "width",
-        "chroming"
+        "edge",
+        "disabled",
+        "suffix",
+        "items",
+        "selection"
       ]
     }
   ],
@@ -59,7 +63,6 @@
     "label": {
       "type": "string",
       "description": "Text to show in the button.",
-      "displayName": "label",
       "help": "#label",
       "required": true,
       "translatable": true,
@@ -68,35 +71,30 @@
     "suffix": {
       "type": "string",
       "description": "Suffix appended to menu label to indicate last selection.",
-      "displayName": "suffix",
       "help": "#label",
       "translatable": true
     },
     "tooltip": {
       "type": "string",
       "description": "Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.",
-      "displayName": "tooltip",
       "help": "#tooltip",
       "translatable": true
     },
     "items": {
       "type": "Array<object>",
       "description": "Items describe the menu items rendered by the menu button.",
-      "displayName": "items",
       "help": "#items",
       "value": []
     },
     "selection": {
       "type": "object",
       "description": "An array containing key/value objects for menu selection groups.",
-      "displayName": "Selection",
       "help": "#selection",
       "writeback": true
     },
     "display": {
       "type": "string",
       "description": "Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.",
-      "displayName": "display",
       "help": "#display",
       "propertyEditorValues": {
         "all": {
@@ -129,9 +127,12 @@
     "size": {
       "type": "string",
       "description": "Size of button",
-      "displayName": "size",
       "help": "#size",
       "propertyEditorValues": {
+        "xs": {
+          "description": "Display an extra small button.  Only suppported for component developers with ghost chroming in icon display mode.",
+          "displayName": "Extra Small"
+        },
         "sm": {
           "description": "Display a small button.",
           "displayName": "Small"
@@ -145,8 +146,8 @@
           "displayName": "Large"
         }
       },
-      "translatable": true,
       "enumValues": [
+        "xs",
         "sm",
         "md",
         "lg"
@@ -165,6 +166,10 @@
       "displayName": "chroming",
       "help": "#chroming",
       "propertyEditorValues": {
+        "ghost": {
+          "description": "Ghost buttons are the least prominent variation. Ghost buttons are useful for performing low-priority tasks, such as manipulating the UI.",
+          "displayName": "Ghost"
+        },
         "borderless": {
           "description": "Borderless buttons are a more prominent variation. Borderless buttons are useful for supplemental actions that require minimal emphasis.",
           "displayName": "Borderless"
@@ -180,6 +185,7 @@
       },
       "enumValues": [
         "solid",
+        "ghost",
         "borderless",
         "outlined"
       ],
@@ -199,7 +205,6 @@
     },
     "endIcon": {
       "description": "The endIcon slot is the button's end icon. The oj-c-menu-button element accepts DOM nodes as children with the endIcon slot.",
-      "displayName": "endIcon",
       "help": "#endIcon"
     }
   },
@@ -208,7 +213,6 @@
       "bubbles": true,
       "description": "Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events. Detail indicates which menu item was clicked.",
       "eventGroup": "common",
-      "displayName": "onOjMenuAction",
       "help": "#event:ojMenuAction",
       "detail": {
         "key": {

package/oj-c/menu-button/menu-button.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_MenuButton", "@oracle/oraclejet-preact/UNSAFE_IconMenuButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useToggle", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "preact", "preact/hooks", "@oracle/oraclejet-preact/utils/UNSAFE_mergeProps", "preact/compat", "ojs/ojvcomponent", "ojs/ojvcomponent-binding", "oj-c/utils/PRIVATE_ItemsMenu/items-menu", "css!oj-c/menu-button/menu-button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_MenuButton_1, UNSAFE_IconMenuButton_1, UNSAFE_useToggle_1, UNSAFE_useTabbableMode_1, UNSAFE_useTooltip_1, preact_1, hooks_1, UNSAFE_mergeProps_1, compat_1, ojvcomponent_1, ojvcomponent_binding_1, items_menu_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_MenuButton", "@oracle/oraclejet-preact/UNSAFE_IconMenuButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "@oracle/oraclejet-preact/utils/UNSAFE_mergeProps", "@oracle/oraclejet-preact/hooks/UNSAFE_useToggle", "oj-c/utils/PRIVATE_ItemsMenu/items-menu", "preact", "preact/hooks", "preact/compat", "css!oj-c/menu-button/menu-button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_binding_1, ojvcomponent_1, UNSAFE_MenuButton_1, UNSAFE_IconMenuButton_1, UNSAFE_useTabbableMode_1, UNSAFE_useTooltip_1, UNSAFE_mergeProps_1, UNSAFE_useToggle_1, items_menu_1, preact_1, hooks_1, compat_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MenuButton = void 0;
@@ -16,13 +16,10 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
                 return (0, jsx_runtime_1.jsx)("span", { class: "oj-ux-ico-overflow-h" });
             };
         }
-        render(props) {
-            const { chroming, label, disabled, suffix, size, items, display, startIcon, endIcon, selection, onSelectionChanged, onOjMenuAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, ...otherProps } = { ...props };
+        render({ chroming, label, tooltip, disabled, suffix, size, items, display, startIcon, endIcon, selection, onSelectionChanged, onOjMenuAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width }) {
             const { bool: isOpen, toggle: toggleOpen } = (0, UNSAFE_useToggle_1.useToggle)();
-            const widthProps = props.width ? { style: { width: props.width } } : {};
-            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, children: display !== 'icons' || (startIcon && endIcon) ? ((0, jsx_runtime_1.jsx)(FunctionalMenuButton, { isMenuOpen: isOpen, onToggleMenu: toggleOpen, label: display === 'icons' ? (!startIcon ? label : '') : label, suffix: display === 'icons' ? (!startIcon ? suffix : '') : suffix, ref: this.buttonRef, variant: chroming, size: size, width: '100%', "aria-label": accessibleLabel, "aria-describedby": ariaDescribedBy, icon: display !== 'label' ? props.startIcon : null, isDisabled: disabled, ...otherProps, children: (0, jsx_runtime_1.jsx)(items_menu_1.ItemsMenu, { items: items, selection: selection, onSelectionChanged: onSelectionChanged, onOjMenuAction: onOjMenuAction }) })) : ((0, jsx_runtime_1.jsx)(FunctionalIconMenuButton, { isMenuOpen: isOpen, width: '100%', onToggleMenu: toggleOpen, ref: this.buttonRef, variant: chroming, isDisabled: disabled, tooltip: props.tooltip, accessibleLabel: accessibleLabel && accessibleLabel !== '' ? accessibleLabel : props.label, "aria-describedby": ariaDescribedBy, size: props.size, isIconOnly: (!props.startIcon && props.endIcon) || (!props.startIcon && !props.endIcon)
-                        ? display === 'icons'
-                        : false, ...otherProps, icon: props.startIcon ?? (props.endIcon ? props.endIcon : (0, jsx_runtime_1.jsx)(this.OverFlowIcon, {})), children: (0, jsx_runtime_1.jsx)(items_menu_1.ItemsMenu, { items: items, selection: selection, onSelectionChanged: onSelectionChanged, onOjMenuAction: onOjMenuAction }) })) }));
+            const widthProps = width ? { style: { width: width } } : {};
+            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, children: display !== 'icons' || (startIcon && endIcon) ? ((0, jsx_runtime_1.jsx)(FunctionalMenuButton, { isMenuOpen: isOpen, onToggleMenu: toggleOpen, label: display === 'icons' ? (!startIcon ? label : '') : label, suffix: display === 'icons' ? (!startIcon ? suffix : '') : suffix, ref: this.buttonRef, variant: chroming, size: size, tooltip: tooltip, width: '100%', "aria-label": accessibleLabel, "aria-describedby": ariaDescribedBy, icon: display !== 'label' ? startIcon : null, isDisabled: disabled, children: (0, jsx_runtime_1.jsx)(items_menu_1.ItemsMenu, { items: items, selection: selection, onSelectionChanged: onSelectionChanged, onOjMenuAction: onOjMenuAction }) })) : ((0, jsx_runtime_1.jsx)(FunctionalIconMenuButton, { isMenuOpen: isOpen, width: '100%', onToggleMenu: toggleOpen, ref: this.buttonRef, variant: chroming, isDisabled: disabled, tooltip: tooltip, accessibleLabel: accessibleLabel && accessibleLabel !== '' ? accessibleLabel : label, "aria-describedby": ariaDescribedBy, size: size, isIconOnly: (!startIcon && endIcon) || (!startIcon && !endIcon) ? display === 'icons' : false, icon: startIcon ?? (endIcon ? endIcon : (0, jsx_runtime_1.jsx)(this.OverFlowIcon, {})), children: (0, jsx_runtime_1.jsx)(items_menu_1.ItemsMenu, { items: items, selection: selection, onSelectionChanged: onSelectionChanged, onOjMenuAction: onOjMenuAction }) })) }));
         }
         blur() {
             this.buttonRef.current?.blur();
@@ -40,7 +37,7 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
         display: 'all',
         items: []
     };
-    MenuButton._metadata = { "properties": { "label": { "type": "string" }, "suffix": { "type": "string" }, "tooltip": { "type": "string" }, "items": { "type": "Array<object>" }, "selection": { "type": "object", "writeback": true }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "disabled": { "type": "boolean" }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "width": { "type": "number|string" }, "chroming": { "type": "string", "enumValues": ["solid", "borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "events": { "ojMenuAction": { "bubbles": true } }, "extension": { "_WRITEBACK_PROPS": ["selection"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "blur": {}, "focus": {} } };
+    MenuButton._metadata = { "properties": { "label": { "type": "string" }, "suffix": { "type": "string" }, "tooltip": { "type": "string" }, "items": { "type": "Array<object>" }, "selection": { "type": "object", "writeback": true }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "disabled": { "type": "boolean" }, "size": { "type": "string", "enumValues": ["xs", "sm", "md", "lg"] }, "width": { "type": "number|string" }, "chroming": { "type": "string", "enumValues": ["solid", "ghost", "borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "events": { "ojMenuAction": { "bubbles": true } }, "extension": { "_WRITEBACK_PROPS": ["selection"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "blur": {}, "focus": {} } };
     MenuButton._translationBundleMap = {
         '@oracle/oraclejet-preact': translationBundle_1.default
     };

package/oj-c/menu-button.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./menu-button/menu-button"], function (require, exports, menu_button_1) {
+define(["require", "exports", "oj-c/menu-button/menu-button"], function (require, exports, menu_button_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MenuButton = void 0;

package/oj-c/message-banner/__webdriver__/MessageBannerWebElementBase.d.ts

@@ -20,4 +20,11 @@ export declare class MessageBannerWebElementBase extends OjWebElement {
      *
      */
     getDetailTemplateValue(): Promise<string | null>;
+    /**
+     * Gets the value of <code>sorting</code> property.
+     * Specifies how to sort the messages from the dataprovider.
+     * @return The value of <code>sorting</code> property.
+     *
+     */
+    getSorting(): Promise<string>;
 }

package/oj-c/message-banner/__webdriver__/MessageBannerWebElementBase.js

@@ -27,6 +27,15 @@ class MessageBannerWebElementBase extends elements_1.OjWebElement {
     getDetailTemplateValue() {
         return this.getProperty('detailTemplateValue');
     }
+    /**
+     * Gets the value of <code>sorting</code> property.
+     * Specifies how to sort the messages from the dataprovider.
+     * @return The value of <code>sorting</code> property.
+     *
+     */
+    getSorting() {
+        return this.getProperty('sorting');
+    }
 }
 exports.MessageBannerWebElementBase = MessageBannerWebElementBase;
 //# sourceMappingURL=MessageBannerWebElementBase.js.map

package/oj-c/message-banner/__webdriver__/MessageBannerWebElementBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBannerWebElementBase.js","sourceRoot":"","sources":["MessageBannerWebElementBase.ts"],"names":[],"mappings":";;;AAAA,iEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,2BAA4B,SAAQ,uBAAY;IAC3D;;;;;OAKG;IACI,OAAO;QACZ,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,sBAAsB;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAgB,qBAAqB,CAAC,CAAC;IAChE,CAAC;CACF;AApBD,kEAoBC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-message-banner WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, MessageBannerWebElement.ts.\n */\nexport class MessageBannerWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>type</code> property.\n   * The type of the Banner message.\n   * @return The value of <code>type</code> property.\n   *\n   */\n  public getType(): Promise<string> {\n    return this.getProperty<string>('type');\n  }\n\n  /**\n   * Gets the value of <code>detailTemplateValue</code> property.\n   * The function that determines the detail template for the current row.\n   * @return The value of <code>detailTemplateValue</code> property.\n   *\n   */\n  public getDetailTemplateValue(): Promise<string | null> {\n    return this.getProperty<string | null>('detailTemplateValue');\n  }\n}\n"]}
+{"version":3,"file":"MessageBannerWebElementBase.js","sourceRoot":"","sources":["MessageBannerWebElementBase.ts"],"names":[],"mappings":";;;AAAA,iEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,2BAA4B,SAAQ,uBAAY;IAC3D;;;;;OAKG;IACI,OAAO;QACZ,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,sBAAsB;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAgB,qBAAqB,CAAC,CAAC;IAChE,CAAC;IAED;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAS,SAAS,CAAC,CAAC;IAC7C,CAAC;CACF;AA9BD,kEA8BC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-message-banner WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, MessageBannerWebElement.ts.\n */\nexport class MessageBannerWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>type</code> property.\n   * The type of the Banner message.\n   * @return The value of <code>type</code> property.\n   *\n   */\n  public getType(): Promise<string> {\n    return this.getProperty<string>('type');\n  }\n\n  /**\n   * Gets the value of <code>detailTemplateValue</code> property.\n   * The function that determines the detail template for the current row.\n   * @return The value of <code>detailTemplateValue</code> property.\n   *\n   */\n  public getDetailTemplateValue(): Promise<string | null> {\n    return this.getProperty<string | null>('detailTemplateValue');\n  }\n\n  /**\n   * Gets the value of <code>sorting</code> property.\n   * Specifies how to sort the messages from the dataprovider.\n   * @return The value of <code>sorting</code> property.\n   *\n   */\n  public getSorting(): Promise<string> {\n    return this.getProperty<string>('sorting');\n  }\n}\n"]}

package/oj-c/message-banner/component.json

@@ -1,7 +1,7 @@
 {
   "name": "message-banner",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -27,6 +27,9 @@
       "defaultColumns": "2",
       "minColumns": "1",
       "module": "oj-c/message-banner"
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/MessageBannerWebElement.html"
     }
   },
   "propertyLayout": [
@@ -96,7 +99,29 @@
       "description": "The function that determines the detail template for the current row.",
       "displayName": "Current Detail Template",
       "help": "#detailTemplateValue",
-      "dynamicSlotDef": "MessageBannerTemplateContext"
+      "dynamicSlotDef": "MessageBannerTemplateContext",
+      "templateSlotRenderType": "RenderDetailTemplate"
+    },
+    "sorting": {
+      "type": "string",
+      "description": "Specifies how to sort the messages from the dataprovider.",
+      "displayName": "Sorting",
+      "help": "#sorting",
+      "propertyEditorValues": {
+        "severity": {
+          "description": "Sort the messages in the decreasing order of severity: error, warning, info, confirmation, and none. Then sort the messages of the same severity in reverse chronological order using the timestamp property.",
+          "displayName": "Severity"
+        },
+        "off": {
+          "description": "Messages appear in the order they are supplied with no additional sorting.",
+          "displayName": "Off"
+        }
+      },
+      "enumValues": [
+        "off",
+        "severity"
+      ],
+      "value": "severity"
     }
   },
   "dynamicSlots": {

package/oj-c/message-banner/message-banner.js

@@ -2,7 +2,28 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MessageBanner = void 0;
-    function MessageBannerImpl({ data, detailTemplateValue, messageTemplates, type = 'section', onOjClose }) {
+    const severityOrder = {
+        error: 0,
+        warning: 1,
+        info: 2,
+        confirmation: 3,
+        none: 4
+    };
+    const severityLevels = Object.keys(severityOrder).length;
+    const severitySort = ({ data: dataA }, { data: dataB }) => {
+        const severityA = dataA.severity ? severityOrder[dataA.severity] : severityLevels;
+        const severityB = dataB.severity ? severityOrder[dataB.severity] : severityLevels;
+        if (severityA !== severityB) {
+            return severityA - severityB;
+        }
+        if (dataA.timestamp && dataB.timestamp) {
+            const valueA = new Date(dataA.timestamp).valueOf();
+            const valueB = new Date(dataB.timestamp).valueOf();
+            return valueB - valueA;
+        }
+        return 0;
+    };
+    function MessageBannerImpl({ data, detailTemplateValue, messageTemplates, type = 'section', sorting = 'severity', onOjClose }) {
         const prevData = (0, hooks_1.useRef)(data);
         const rootRef = (0, hooks_1.useRef)();
         const [dpKey, setDpKey] = (0, hooks_1.useState)(0);
@@ -20,9 +41,15 @@ define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/tr
             data,
             addBusyState
         });
-        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_useMessagesContext_1.MessagesContext.Provider, { value: messagesContext, children: (0, jsx_runtime_1.jsx)(UNSAFE_MessageBanner_1.MessageBanner, { data: dataArr, detailRendererKey: detailTemplateValue, renderers: messageTemplates, variant: type, onClose: onOjClose }, `dp-${dpKey}`) }) }));
+        const sortedData = (0, hooks_1.useMemo)(() => {
+            if (sorting === 'off')
+                return dataArr;
+            const dataCopy = [...dataArr];
+            return dataCopy.sort(severitySort);
+        }, [dataArr, sorting]);
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_useMessagesContext_1.MessagesContext.Provider, { value: messagesContext, children: (0, jsx_runtime_1.jsx)(UNSAFE_MessageBanner_1.MessageBanner, { data: sortedData, detailRendererKey: detailTemplateValue, renderers: messageTemplates, variant: type, onClose: onOjClose }, `dp-${dpKey}`) }) }));
     }
-    exports.MessageBanner = (0, ojvcomponent_1.registerCustomElement)('oj-c-message-banner', MessageBannerImpl, "MessageBanner", { "properties": { "data": { "type": "DataProvider" }, "type": { "type": "string", "enumValues": ["page", "section"] }, "detailTemplateValue": { "type": "string|function" } }, "extension": { "_DYNAMIC_SLOT": { "prop": "messageTemplates", "isTemplate": 1 } }, "events": { "ojClose": {} } }, { "type": "section" }, {
+    exports.MessageBanner = (0, ojvcomponent_1.registerCustomElement)('oj-c-message-banner', MessageBannerImpl, "MessageBanner", { "properties": { "data": { "type": "DataProvider" }, "type": { "type": "string", "enumValues": ["page", "section"] }, "detailTemplateValue": { "type": "string|function" }, "sorting": { "type": "string", "enumValues": ["off", "severity"] } }, "extension": { "_DYNAMIC_SLOT": { "prop": "messageTemplates", "isTemplate": 1 } }, "events": { "ojClose": {} } }, { "type": "section", "sorting": "severity" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
     });
 });

package/oj-c/message-banner.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./message-banner/message-banner"], function (require, exports, message_banner_1) {
+define(["require", "exports", "oj-c/message-banner/message-banner"], function (require, exports, message_banner_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MessageBanner = void 0;

package/oj-c/message-toast/component.json

@@ -1,7 +1,7 @@
 {
   "name": "message-toast",
-  "version": "16.1.4",
-  "jetVersion": "^16.1.4",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -27,6 +27,9 @@
       "uxSpecs": [
         "toast-messages"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/MessageToastWebElement.html"
     }
   },
   "propertyLayout": [
@@ -70,14 +73,16 @@
       "description": "A dynamic template key or a function that determines the detail template for the current row.",
       "displayName": "Current Detail Template",
       "help": "#detailTemplateValue",
-      "dynamicSlotDef": "MessageToastTemplateContext"
+      "dynamicSlotDef": "MessageToastTemplateContext",
+      "templateSlotRenderType": "RenderDetailTemplate"
     },
     "iconTemplateValue": {
       "type": "string|function",
       "description": "A dynamic template key or a function that determines the icon template for the current row.",
       "displayName": "Current Icon Template",
       "help": "#iconTemplateValue",
-      "dynamicSlotDef": "MessageToastTemplateContext"
+      "dynamicSlotDef": "MessageToastTemplateContext",
+      "templateSlotRenderType": "RenderIconTemplate"
     },
     "offset": {
       "type": "number|object",

package/oj-c/message-toast.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./message-toast/message-toast"], function (require, exports, message_toast_1) {
+define(["require", "exports", "oj-c/message-toast/message-toast"], function (require, exports, message_toast_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MessageToast = void 0;