@oracle/oraclejet-core-pack 16.1.3 → 17.0.0

package/oj-c/popup/component.json

@@ -0,0 +1,310 @@
+{
+  "name": "popup",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
+  "pack": "oj-c",
+  "type": "composite",
+  "dependencyScope": "runtime",
+  "license": "https://opensource.org/licenses/UPL",
+  "implements": [
+    "CPopupElement"
+  ],
+  "description": "A popup temporarily 'pops up' content in the foreground.",
+  "displayName": "Popup",
+  "help": "oj-c.Popup.html",
+  "main": "oj-c/popup",
+  "status": [
+    {
+      "type": "candidate",
+      "since": "17.0.0"
+    }
+  ],
+  "extension": {
+    "catalog": {
+      "category": "Layout & Nav"
+    },
+    "vbdt": {
+      "module": "oj-c/popup"
+    },
+    "oracle": {
+      "icon": "oj-ux-ico-popup",
+      "uxSpecs": [
+        "popup"
+      ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/PopupWebElement.html"
+    }
+  },
+  "propertyLayout": [
+    {
+      "propertyGroup": "common",
+      "items": [
+        "opened",
+        "anchor",
+        "launcher",
+        "placement",
+        "collision",
+        "modality",
+        "offset",
+        "initialFocus",
+        "autoDismiss",
+        "tail",
+        "onOpenedChanged",
+        "onOjOpen",
+        "onOjBeforeClose",
+        "onOjClose",
+        "onOjFocus",
+        "width",
+        "minWidth",
+        "maxWidth",
+        "height",
+        "minHeight",
+        "maxHeight"
+      ]
+    }
+  ],
+  "since": "17.0.0",
+  "slots": {
+    "": {
+      "description": "The default slot is the content of the Popup.",
+      "displayName": "default",
+      "help": "#Default"
+    }
+  },
+  "properties": {
+    "opened": {
+      "type": "boolean",
+      "description": "Specifies whether the Popup is open.",
+      "displayName": "opened",
+      "help": "#opened",
+      "writeback": true,
+      "value": false
+    },
+    "launcher": {
+      "type": "string|Element",
+      "description": "Specifies Popup's launcher. After Popup closes, it returns focus to the launcher.",
+      "displayName": "launcher",
+      "help": "#launcher"
+    },
+    "anchor": {
+      "type": "string|Element|object",
+      "description": "Specifies Popup's anchor. Popup is placed relatively to its anchor.",
+      "displayName": "anchor",
+      "help": "#anchor"
+    },
+    "placement": {
+      "type": "string",
+      "description": "Specifies displacement of the Popup from the anchor element placement along the specified axes.",
+      "displayName": "placement",
+      "help": "#placement",
+      "enumValues": [
+        "center",
+        "end",
+        "start",
+        "top",
+        "bottom",
+        "top-start",
+        "top-end",
+        "bottom-end",
+        "bottom-start",
+        "top-start-corner",
+        "top-end-corner",
+        "start-top",
+        "start-bottom",
+        "start-top-corner",
+        "start-bottom-corner",
+        "bottom-start-corner",
+        "bottom-end-corner",
+        "end-top",
+        "end-bottom",
+        "end-top-corner",
+        "end-bottom-corner"
+      ]
+    },
+    "modality": {
+      "type": "string",
+      "description": "Specifies modality of the Popup.",
+      "displayName": "modality",
+      "help": "#modality",
+      "enumValues": [
+        "modal",
+        "modeless"
+      ],
+      "value": "modeless"
+    },
+    "autoDismiss": {
+      "type": "string",
+      "description": "Specifies the auto dismissal behavior.",
+      "displayName": "Auto dismiss",
+      "help": "#autoDismiss",
+      "enumValues": [
+        "none",
+        "focusLoss"
+      ],
+      "value": "focusLoss"
+    },
+    "tail": {
+      "type": "string",
+      "description": "Specifies Popup's tail. Simple tail is an arrow pointing to Popup's anchor.",
+      "displayName": "Tail",
+      "help": "#tail",
+      "enumValues": [
+        "none",
+        "simple"
+      ],
+      "value": "none"
+    },
+    "initialFocus": {
+      "type": "string",
+      "description": "Specifies if the Popup sets focus to its content when initially open.",
+      "displayName": "initialFocus",
+      "help": "#initialFocus",
+      "enumValues": [
+        "auto",
+        "none",
+        "popup",
+        "firstFocusable"
+      ],
+      "value": "auto"
+    },
+    "offset": {
+      "type": "object",
+      "description": "Specifies displacement of the Popup from the anchor element placement along the specified axes.",
+      "displayName": "offset",
+      "help": "#offset",
+      "properties": {
+        "x": {
+          "type": "number"
+        },
+        "y": {
+          "type": "number"
+        }
+      }
+    },
+    "collision": {
+      "type": "string",
+      "description": "Specifies rule for alternate placement alignment.",
+      "displayName": "collision",
+      "help": "#collision",
+      "enumValues": [
+        "none",
+        "flip",
+        "fit",
+        "flipfit",
+        "flipcenter"
+      ],
+      "value": "fit"
+    },
+    "width": {
+      "type": "number|string",
+      "description": "Specifies width of the Popup content.",
+      "displayName": "width",
+      "help": "#width"
+    },
+    "minWidth": {
+      "type": "number|string",
+      "description": "Specifies minWidth of the Popup content.",
+      "displayName": "minWidth",
+      "help": "#minWidth"
+    },
+    "maxWidth": {
+      "type": "number|string",
+      "description": "Specifies maxWidth of the Popup content.",
+      "displayName": "maxWidth",
+      "help": "#maxWidth",
+      "value": "calc(100vw - 3rem)"
+    },
+    "height": {
+      "type": "number|string",
+      "description": "Specifies height of the Popup content.",
+      "displayName": "height",
+      "help": "#height"
+    },
+    "minHeight": {
+      "type": "number|string",
+      "description": "Specifies minHeight of the Popup content.",
+      "displayName": "minHeight",
+      "help": "#minHeight"
+    },
+    "maxHeight": {
+      "type": "number|string",
+      "description": "Specifies maxHeight of the Popup content.",
+      "displayName": "maxHeight",
+      "help": "#maxHeight",
+      "value": "calc(100vw - 3rem)"
+    }
+  },
+  "events": {
+    "ojOpen": {
+      "description": "Triggered immediately after the popup opens.",
+      "displayName": "open",
+      "help": "#event:open"
+    },
+    "ojBeforeClose": {
+      "cancelable": true,
+      "description": "Triggered immediately before the popup closes.",
+      "displayName": "beforeClose",
+      "help": "#event:beforeClose",
+      "detail": {
+        "accept": {
+          "description": "This method can be called with an application-created Promise to cancel this event asynchronously.  The Promise should be resolved or rejected to accept or cancel the event, respectively.",
+          "type": "function"
+        }
+      }
+    },
+    "ojClose": {
+      "description": "Triggered immediately after the popup closes.",
+      "displayName": "close",
+      "help": "#event:close"
+    },
+    "ojFocus": {
+      "description": "Triggered immediately after the popup receives focus.",
+      "displayName": "onOjFocus",
+      "help": "#event:onOjFocus"
+    }
+  },
+  "methods": {
+    "setProperty": {
+      "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
+      "help": "#setProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to set. Supports dot notation for subproperty access.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The new value to set the property to.",
+          "type": "any"
+        }
+      ],
+      "return": "void"
+    },
+    "getProperty": {
+      "description": "Retrieves the value of a property or a subproperty.",
+      "help": "#getProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to get. Supports dot notation for subproperty access.",
+          "type": "string"
+        }
+      ],
+      "return": "any"
+    },
+    "setProperties": {
+      "description": "Performs a batch set of properties.",
+      "help": "#setProperties",
+      "params": [
+        {
+          "name": "properties",
+          "description": "An object containing the property and value pairs to set.",
+          "type": "object"
+        }
+      ],
+      "return": "void"
+    }
+  }
+}

package/oj-c/popup/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "./popup"], function (require, exports, popup_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Popup = void 0;
+    Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
+});

package/oj-c/popup/popup-styles.css

@@ -0,0 +1,12 @@
+oj-c-popup:not(.oj-complete){
+  visibility: hidden;
+}
+
+oj-c-popup {
+  display: none;
+}
+
+oj-c-popup[hidden]
+{
+  display: none;
+}

package/oj-c/popup/popup.js

@@ -0,0 +1,127 @@
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent", "preact/hooks", "@oracle/oraclejet-preact/UNSAFE_Popup", "css!oj-c/popup/popup-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_1, hooks_1, UNSAFE_Popup_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Popup = void 0;
+    exports.Popup = (0, ojvcomponent_1.registerCustomElement)('oj-c-popup', ({ opened = false, children, anchor, launcher, placement, collision = 'fit', modality = 'modeless', offset, initialFocus = 'auto', autoDismiss = 'focusLoss', tail = 'none', onOpenedChanged, onOjOpen, onOjBeforeClose, onOjClose, onOjFocus, width, minWidth, maxWidth = 'calc(100vw - 3rem)', height, minHeight, maxHeight = 'calc(100vw - 3rem)', ...otherProps }) => {
+        const rootRef = (0, hooks_1.useRef)(null);
+        const anchorRef = (0, hooks_1.useRef)(null);
+        const launcherRef = (0, hooks_1.useRef)(null);
+        let defaultPlacement = placement;
+        if (!launcherRef.current) {
+            if (typeof launcher === 'string') {
+                const launcherEl = document.querySelector(launcher);
+                if (launcherEl) {
+                    launcherRef.current = launcherEl;
+                }
+            }
+            else if (launcher instanceof HTMLElement) {
+                if (document.body.contains(launcher)) {
+                    launcherRef.current = launcher;
+                }
+            }
+            else {
+                launcherRef.current = document.activeElement;
+            }
+        }
+        const isObject = (value) => {
+            return typeof value === 'object' && !Array.isArray(value) && value !== null;
+        };
+        if (!anchorRef.current) {
+            if (!anchor) {
+                anchorRef.current = launcherRef.current;
+            }
+            else if (anchor instanceof Window || anchor === 'window') {
+                anchorRef.current = 'window';
+            }
+            else if (typeof anchor === 'string') {
+                const queriedAnchor = document.querySelector(anchor);
+                anchorRef.current = queriedAnchor || launcherRef.current;
+            }
+            else if (anchor instanceof Element) {
+                anchorRef.current = document.body.contains(anchor) ? anchor : launcherRef.current;
+            }
+            else if (isObject(anchor)) {
+                if (typeof anchor.x === 'number' && typeof anchor.y === 'number') {
+                    anchorRef.current = anchor;
+                }
+                else {
+                    anchorRef.current = launcherRef.current;
+                }
+            }
+        }
+        if (!placement) {
+            if (anchorRef.current === 'window') {
+                defaultPlacement = 'center';
+            }
+            else {
+                defaultPlacement = 'bottom-start';
+            }
+        }
+        const flipOptions = { mainAxis: true, crossAxis: true };
+        const shiftOptions = { mainAxis: false, crossAxis: false };
+        switch (collision) {
+            case 'none': {
+                flipOptions.mainAxis = false;
+                flipOptions.crossAxis = false;
+                break;
+            }
+            case 'fit': {
+                flipOptions.mainAxis = false;
+                flipOptions.crossAxis = false;
+                shiftOptions.mainAxis = true;
+                shiftOptions.crossAxis = true;
+                break;
+            }
+            case 'flipcenter':
+            case 'flipfit': {
+                shiftOptions.mainAxis = true;
+                shiftOptions.crossAxis = true;
+                break;
+            }
+            default:
+            case 'flip': {
+                break;
+            }
+        }
+        const isMainAxisVertical = (placement) => {
+            return ['top', 'bottom'].indexOf(placement.split('-')[0]) > -1;
+        };
+        const verticalMainAxis = placement ? isMainAxisVertical(placement) : true;
+        const derivedOffset = {
+            mainAxis: verticalMainAxis ? offset?.y : offset?.x,
+            crossAxis: verticalMainAxis ? offset?.x : offset?.y
+        };
+        const handleOnClickOutside = async () => {
+            if (autoDismiss === 'focusLoss') {
+                return dispatchBeforeClose({ reason: 'outsideClick' });
+            }
+        };
+        const handleOnClose = async (detail) => {
+            if (detail.reason === 'escapeKey') {
+                return dispatchBeforeClose(detail);
+            }
+        };
+        const dispatchBeforeClose = async (detail) => {
+            try {
+                await onOjBeforeClose?.({ detail });
+                onOpenedChanged?.(false);
+            }
+            catch (_) {
+            }
+        };
+        const handleOnTransitionEnd = async (value) => {
+            if (value) {
+                onOjOpen?.();
+            }
+            else {
+                onOjClose?.();
+            }
+        };
+        const handleOnFocus = () => {
+            onOjFocus?.();
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(UNSAFE_Popup_1.Popup, { isOpen: opened, anchorRef: anchorRef.current === 'window' ? undefined : anchorRef, launcherRef: launcherRef, placement: placement ?? defaultPlacement, offset: derivedOffset, flipOptions: flipOptions, shiftOptions: shiftOptions, modality: modality, initialFocus: initialFocus, tail: tail, onClose: handleOnClose, onClickOutside: handleOnClickOutside, onTransitionEnd: handleOnTransitionEnd, onFocusSet: handleOnFocus, width: width, minWidth: minWidth, maxWidth: maxWidth, height: height, minHeight: minHeight, maxHeight: maxHeight, "aria-describedby": otherProps['aria-describedby'], "aria-label": otherProps['aria-label'], "aria-labelledby": otherProps['aria-labelledby'], children: children }) }));
+    }, "Popup", { "slots": { "": {} }, "properties": { "opened": { "type": "boolean", "writeback": true }, "launcher": { "type": "string|Element" }, "anchor": { "type": "string|Element|object" }, "placement": { "type": "string", "enumValues": ["center", "end", "start", "top", "bottom", "top-start", "top-end", "bottom-end", "bottom-start", "top-start-corner", "top-end-corner", "start-top", "start-bottom", "start-top-corner", "start-bottom-corner", "bottom-start-corner", "bottom-end-corner", "end-top", "end-bottom", "end-top-corner", "end-bottom-corner"] }, "modality": { "type": "string", "enumValues": ["modal", "modeless"] }, "autoDismiss": { "type": "string", "enumValues": ["none", "focusLoss"] }, "tail": { "type": "string", "enumValues": ["none", "simple"] }, "initialFocus": { "type": "string", "enumValues": ["auto", "none", "popup", "firstFocusable"] }, "offset": { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" } } }, "collision": { "type": "string", "enumValues": ["none", "flip", "fit", "flipfit", "flipcenter"] }, "width": { "type": "number|string" }, "minWidth": { "type": "number|string" }, "maxWidth": { "type": "number|string" }, "height": { "type": "number|string" }, "minHeight": { "type": "number|string" }, "maxHeight": { "type": "number|string" } }, "events": { "ojOpen": {}, "ojBeforeClose": { "cancelable": true }, "ojClose": {}, "ojFocus": {} }, "extension": { "_WRITEBACK_PROPS": ["opened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label", "aria-labelledby"] } }, { "opened": false, "collision": "fit", "modality": "modeless", "initialFocus": "auto", "autoDismiss": "focusLoss", "tail": "none", "maxWidth": "calc(100vw - 3rem)", "maxHeight": "calc(100vw - 3rem)" }, {
+        '@oracle/oraclejet-preact': translationBundle_1.default
+    });
+});

package/oj-c/popup/resources/nls/popup-strings.js

@@ -0,0 +1,10 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    return {
+        "root": {
+            popup: {
+                sampleString: 'The strings file can be used to manage translatable resources'
+            }
+        },
+    };
+});

package/oj-c/popup/themes/base/_popup.scss

@@ -0,0 +1,22 @@
+
+@import "oj/utilities/_oj.utilities.modules.scss";
+
+// This file is where css selectors shared by all themes go.
+// There will be hard code properties and properties controlled by variables, for example
+//
+// oj-c-popup .oj-c-popup-value-text {
+// color: var(--oj-c-popup-value-text-color);
+// display: inline-block;
+// }
+
+// Even if this file is imported many times 'module-include-once' ensures the content is included just once .
+@include module-include-once("oj-c-popup.base") {
+  oj-c-popup:not(.oj-complete){
+    visibility: hidden;
+  }
+  
+  oj-c-popup{
+  	min-height: 50px;
+  	width: 50px;
+  }
+}

package/oj-c/popup/themes/redwood/_popup.scss

@@ -0,0 +1,19 @@
+
+@import "oj/utilities/_oj.utilities.modules.scss";
+
+// You may import variables from JET like so:
+// @import "oj/core/themes/redwood/_oj-core.cssvars.scss";
+// @import "oj/core/themes/redwood/_oj-palette.cssvars.scss";
+
+// import the css common to all themes
+@import "../base/_popup.scss";
+
+// Even if this file is imported many times 'module-include-once' ensures the content is included just once .
+@include module-include-once("_popup.redwood") {
+:root {
+  
+  // set your variables inside of :root, an example:
+  //  --oj-c-popup-value-text-color: var(--oj-palette-red-140);
+
+}
+} 

package/oj-c/popup/themes/stable/_popup.scss

@@ -0,0 +1,19 @@
+
+@import "oj/utilities/_oj.utilities.modules.scss";
+
+// You may import variables from JET like so:
+// @import "oj/core/themes/stable/_oj-core.cssvars.scss";
+// @import "oj/core/themes/stable/_oj-palette.cssvars.scss";
+
+// import the css common to all themes
+@import "../base/_popup.scss";
+
+// Even if this file is imported many times 'module-include-once' ensures the content is included just once .
+@include module-include-once("_popup.stable") {
+:root {
+  
+  // set your variables inside of :root, an example:
+  //  --oj-c-popup-value-text-color: var(--oj-palette-red-140);
+
+}
+} 

package/oj-c/popup.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "oj-c/popup/popup"], function (require, exports, popup_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Popup = void 0;
+    Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
+});

package/oj-c/progress-bar/component.json

@@ -1,7 +1,7 @@
 {
   "name": "progress-bar",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -34,6 +34,9 @@
       "uxSpecs": [
         "progress-indicator"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/ProgressBarWebElement.html"
     }
   },
   "propertyLayout": [

package/oj-c/progress-bar.js

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

package/oj-c/progress-circle/component.json

@@ -1,7 +1,7 @@
 {
   "name": "progress-circle",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -34,6 +34,9 @@
       "uxSpecs": [
         "progress-indicator"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/ProgressCircleWebElement.html"
     }
   },
   "propertyLayout": [

package/oj-c/progress-circle.js

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

package/oj-c/radioset/component.json

@@ -1,7 +1,7 @@
 {
   "name": "radioset",
-  "version": "16.1.3",
-  "jetVersion": "^16.1.3",
+  "version": "17.0.0",
+  "jetVersion": "^17.0.0",
   "pack": "oj-c",
   "type": "composite",
   "dependencyScope": "runtime",
@@ -34,6 +34,9 @@
       "uxSpecs": [
         "radioset"
       ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet-1700/cpwdtsdoc/classes/RadiosetWebElement.html"
     }
   },
   "propertyLayout": [
@@ -296,8 +299,7 @@
         "consume": {
           "name": "containerReadonly"
         }
-      },
-      "value": false
+      }
     },
     "required": {
       "type": "boolean",
@@ -320,15 +322,15 @@
       "help": "#userAssistanceDensity",
       "propertyEditorValues": {
         "reflow": {
-          "description": "Messages, help, hints, and required are all shown inline under the field with no reserved space.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with no reserved space.",
           "displayName": "Reflow"
         },
         "efficient": {
-          "description": "Messages, help, hints, and required are all shown inline under the field with reserved space.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with reserved space.",
           "displayName": "Efficient"
         },
         "compact": {
-          "description": "Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.",
+          "description": "Help and hints are shown above the field. Messages and required are shown inline under the field with reserved space.",
           "displayName": "Compact"
         }
       },
@@ -341,8 +343,7 @@
         "consume": {
           "name": "containerUserAssistanceDensity"
         }
-      },
-      "value": "reflow"
+      }
     },
     "value": {
       "type": "any",