@oracle/oraclejet 12.0.4 → 12.1.2

package/dist/js/libs/oj/debug_esm/ojconverter-datetime.js

@@ -504,7 +504,8 @@ const RelativeDateTimeFormatter = (function () {
         'year';
     }
     var intlRelativeCnv = new Intl.RelativeTimeFormat(getLocale(), { numeric: style });
-    var format = intlRelativeCnv.format(units[field], field);
+    var val = diff >= 0 ? units[field] : -units[field];
+    var format = intlRelativeCnv.format(val, field);
     return format;
   }
 

package/dist/js/libs/oj/debug_esm/ojcore-base.js

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '12.0.4',
+  version: '12.1.2',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-05-18_10-36-51',
+  revision: '2022-05-18_10-35-23',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate

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

@@ -22231,6 +22231,11 @@ DvtDataGrid.prototype.handleContextMenuResize = function (event, id, val, target
       if (this._getResizeHeaderMode(this.m_resizingElement) === 'column') {
         if (this._isDOMElementResizable(this.m_resizingElement)) {
           if (isHeaderLabel) {
+            if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+              this.getMappedStyle('columnendheaderlabel'))) {
+                // as resizing width on colEndHeaderLabel essentially changes rowHeader width and not rowEndHeader.
+                end = false;
+            }
             this.resizeRowWidth(value, value - initialWidth, end, isHeaderLabel);
             this._fireResizeEvent(event, initialWidth, initialHeight, value, initialHeight, value);
           } else {
@@ -22254,6 +22259,11 @@ DvtDataGrid.prototype.handleContextMenuResize = function (event, id, val, target
       } else if (this._isDOMElementResizable(this.m_resizingElement)) {
         let newElementHeight = this.getNewElementHeight('row', initialHeight, end, deltaHeight, isHeaderLabel);
         if (isHeaderLabel) {
+          if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+            this.getMappedStyle('rowendheaderlabel'))) {
+              // as resizing height on rowEndHeaderLabel essentially changes columnHeader height and not columnEndHeader.
+              end = false;
+          }
           this.resizeColHeight(newElementHeight, newElementHeight - initialHeight, end);
           this._fireResizeEvent(event, initialWidth, initialHeight, initialWidth, value, value);
         } else {

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

@@ -3440,6 +3440,7 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent,
        * @instance
        * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
        *               {target:"Type", value:"K1", for:"nodeId"}]
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-before-expand event has been deprecated.  Lazy loading of data can be done through the data provider.'}
        */
       beforeExpand: null,
       /**
@@ -3453,6 +3454,7 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent,
        * @instance
        * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
        *               {target:"Type", value:"K1", for:"nodeId"}]
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-expand event has been deprecated.  Use on-expanded-changed instead.'}
        */
       expand: null,
       /**
@@ -3467,6 +3469,7 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent,
        * @instance
        * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
        *               {target:"Type", value:"K1", for:"nodeId"}]
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-before-collapse event has been deprecated.  Lazy loading of data can be done through the data provider.'}
        */
       beforeCollapse: null,
       /**
@@ -3480,6 +3483,7 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent,
        * @instance
        * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
        *               {target:"Type", value:"K1", for:"nodeId"}]
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-collapse event has been deprecated.  Use on-expanded-changed instead.'}
        */
       collapse: null
     },

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

@@ -9,7 +9,7 @@ import { Root, customElement } from 'ojs/ojvcomponent';
 import { Component, createRef, h } from 'preact';
 import $ from 'jquery';
 import { expand, slideIn, collapse, slideOut } from 'ojs/ojanimation';
-import { addResizeListener, removeResizeListener } from 'ojs/ojdomutils';
+import { removeResizeListener, addResizeListener } from 'ojs/ojdomutils';
 import 'ojs/ojcore-base';
 import 'ojs/ojpopup';
 import { DrawerConstants, DrawerUtils } from 'ojs/ojdrawerutils';
@@ -32,20 +32,29 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         this.startRef = createRef();
         this.endWrapperRef = createRef();
         this.endRef = createRef();
+        this.bottomWrapperRef = createRef();
+        this.bottomRef = createRef();
+        this.middleSectionRef = createRef();
         this.mainSectionRef = createRef();
         this.startClosedWithEsc = false;
         this.endClosedWithEsc = false;
-        this.drawerResizeHandler = null;
+        this.bottomClosedWithEsc = false;
+        this.overlayDrawerResizeListener = null;
+        this.reflowDrawerResizeListener = null;
         this.handleResize = true;
         this.state = {
             startOpened: this.props.startOpened,
             endOpened: this.props.endOpened,
+            bottomOpened: this.props.bottomOpened,
             startDisplay: this.props.startDisplay,
             endDisplay: this.props.endDisplay,
+            bottomDisplay: this.props.bottomDisplay,
             startShouldChangeDisplayMode: false,
             endShouldChangeDisplayMode: false,
+            bottomShouldChangeDisplayMode: false,
             startStateToChangeTo: null,
             endStateToChangeTo: null,
+            bottomStateToChangeTo: null,
             viewportResolvedDisplayMode: this.getViewportResolvedDisplayMode(),
             lastlyOpenedDrawer: DrawerConstants.stringStart
         };
@@ -63,6 +72,15 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 ? this.getDrawerWrapperRef(edge)
                 : this.getDrawerRef(edge);
         };
+        this.overlayDrawerResizeCallback = (edge) => {
+            const $drawerElement = $(this.getDrawerRef(edge).current);
+            $drawerElement.position(this.getDrawerPosition(edge));
+        };
+        this.reflowDrawerResizeCallback = (edge) => {
+            if ([DrawerConstants.stringStart, DrawerConstants.stringEnd].indexOf(edge) > -1) {
+                this.setBottomOverlayDrawerWidth();
+            }
+        };
         this.lockResizeListener = () => {
             if (this.handleResize) {
                 this.handleResize = false;
@@ -86,11 +104,16 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
             if (this.handleResize) {
                 const prevViewportResolvedDisplayMode = this.state.viewportResolvedDisplayMode;
                 const nextViewportResolvedDisplayMode = this.getViewportResolvedDisplayMode();
+                this.setBottomOverlayDrawerWidth();
                 let atLeastOneOverlayDrawerNeedsToClose = false;
                 const updatedState = {};
                 if (prevViewportResolvedDisplayMode !== nextViewportResolvedDisplayMode) {
                     this.lockResizeListener();
-                    [DrawerConstants.stringStart, DrawerConstants.stringEnd].forEach((edge) => {
+                    [
+                        DrawerConstants.stringStart,
+                        DrawerConstants.stringEnd,
+                        DrawerConstants.stringBottom
+                    ].forEach((edge) => {
                         if (this.isDrawerOpened(edge) && this.state[this.edgeToDisplayName(edge)] === 'auto') {
                             atLeastOneOverlayDrawerNeedsToClose = true;
                             updatedState[this.edgeToShouldChangeDisplayMode(edge)] = true;
@@ -105,6 +128,20 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 }
             }
         };
+        this.getDrawerPosition = (edge) => {
+            const horizontal = edge === DrawerConstants.stringBottom ? DrawerConstants.stringStart : edge;
+            const vertical = edge === DrawerConstants.stringBottom
+                ? DrawerConstants.stringBottom
+                : DrawerConstants.stringTop;
+            const pos = `${horizontal} ${vertical}`;
+            let position = {
+                my: pos,
+                at: pos,
+                of: this.mainSectionRef.current,
+                collision: 'none'
+            };
+            return oj.PositionUtils.normalizeHorizontalAlignment(position, DrawerUtils.isRTL());
+        };
     }
     static getDerivedStateFromProps(props, state) {
         const derivedState = {};
@@ -116,10 +153,19 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 return derivedState;
             }
         }
-        const endStateToChangeTo = `${DrawerConstants.stringEnd}${DrawerConstants.stringStateToChangeTo}`;
-        if (state.endOpened && state[endStateToChangeTo] === null) {
+        if (state.endOpened) {
             if (props.endDisplay !== state.endDisplay) {
-                derivedState[endStateToChangeTo] = { endDisplay: props.endDisplay };
+                derivedState[`${DrawerConstants.stringEnd}${DrawerConstants.stringStateToChangeTo}`] = {
+                    endDisplay: props.endDisplay
+                };
+                return derivedState;
+            }
+        }
+        if (state.bottomOpened) {
+            if (props.bottomDisplay !== state.bottomDisplay) {
+                derivedState[`${DrawerConstants.stringBottom}${DrawerConstants.stringStateToChangeTo}`] = {
+                    bottomDisplay: props.bottomDisplay
+                };
                 return derivedState;
             }
         }
@@ -135,20 +181,32 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 derivedState.lastlyOpenedDrawer = DrawerConstants.stringEnd;
             }
         }
+        if (props.bottomOpened !== state.bottomOpened) {
+            derivedState.bottomOpened = props.bottomOpened;
+            if (props.bottomOpened) {
+                derivedState.lastlyOpenedDrawer = DrawerConstants.stringBottom;
+            }
+        }
         if (props.startDisplay !== state.startDisplay) {
             derivedState.startDisplay = props.startDisplay;
         }
         if (props.endDisplay !== state.endDisplay) {
             derivedState.endDisplay = props.endDisplay;
         }
+        if (props.bottomDisplay !== state.bottomDisplay) {
+            derivedState.bottomDisplay = props.bottomDisplay;
+        }
         return Object.keys(derivedState).length === 0 ? null : derivedState;
     }
     render(props) {
         let startDrawer = this.getDrawer(DrawerConstants.stringStart);
         let endDrawer = this.getDrawer(DrawerConstants.stringEnd);
+        let bottomDrawer = this.getDrawer(DrawerConstants.stringBottom);
         return (h(Root, { ref: this.rootRef },
             startDrawer,
-            h("div", { ref: this.mainSectionRef, class: DrawerConstants.mainContentSelector }, props.children),
+            h("div", { ref: this.middleSectionRef, class: DrawerConstants.middleSectionSelector },
+                h("div", { ref: this.mainSectionRef, class: DrawerConstants.mainContentSelector }, props.children),
+                bottomDrawer),
             endDrawer));
     }
     getDrawer(edge) {
@@ -175,13 +233,34 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         return this[this.edgeToClosedWithEsc(edge)];
     }
     getDrawerWrapperRef(edge) {
-        return edge === DrawerConstants.stringStart ? this.startWrapperRef : this.endWrapperRef;
+        switch (edge) {
+            case DrawerConstants.stringStart:
+                return this.startWrapperRef;
+            case DrawerConstants.stringEnd:
+                return this.endWrapperRef;
+            case DrawerConstants.stringBottom:
+                return this.bottomWrapperRef;
+        }
     }
     getDrawerRef(edge) {
-        return edge === DrawerConstants.stringStart ? this.startRef : this.endRef;
+        switch (edge) {
+            case DrawerConstants.stringStart:
+                return this.startRef;
+            case DrawerConstants.stringEnd:
+                return this.endRef;
+            case DrawerConstants.stringBottom:
+                return this.bottomRef;
+        }
     }
     getDrawerContent(edge) {
-        return edge === DrawerConstants.stringStart ? this.props.start : this.props.end;
+        switch (edge) {
+            case DrawerConstants.stringStart:
+                return this.props.start;
+            case DrawerConstants.stringEnd:
+                return this.props.end;
+            case DrawerConstants.stringBottom:
+                return this.props.bottom;
+        }
     }
     getDrawerWrapperStyleClasses(edge) {
         return (`${DrawerConstants.stringOjDrawer}${DrawerConstants.charDash}${DrawerConstants.stringReflow}-wrapper` +
@@ -240,13 +319,16 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         return DrawerConstants.stringFullOverlay;
     }
     selfClose(edge) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (edge === DrawerConstants.stringStart) {
             (_b = (_a = this.props).onStartOpenedChanged) === null || _b === void 0 ? void 0 : _b.call(_a, false);
         }
         if (edge === DrawerConstants.stringEnd) {
             (_d = (_c = this.props).onEndOpenedChanged) === null || _d === void 0 ? void 0 : _d.call(_c, false);
         }
+        if (edge === DrawerConstants.stringBottom) {
+            (_f = (_e = this.props).onBottomOpenedChanged) === null || _f === void 0 ? void 0 : _f.call(_e, false);
+        }
     }
     setDrawerFocus(edge) {
         const drawerRef = this.getDrawerRef(edge);
@@ -274,14 +356,17 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
     componentDidMount() {
         this.startOpenedPrevState = this.props.startOpened;
         this.endOpenedPrevState = this.props.endOpened;
+        this.bottomOpenedPrevState = this.props.bottomOpened;
         window.addEventListener(DrawerConstants.stringResize, () => {
             this.resizeHandler();
         });
         if (DrawerLayout_1.defaultProps.startOpened != this.props.startOpened ||
-            DrawerLayout_1.defaultProps.endOpened != this.props.endOpened) {
+            DrawerLayout_1.defaultProps.endOpened != this.props.endOpened ||
+            DrawerLayout_1.defaultProps.bottomOpened != this.props.bottomOpened) {
             const stateCopy = Object.assign({}, this.state);
             stateCopy.startOpened = false;
             stateCopy.endOpened = false;
+            stateCopy.bottomOpened = false;
             this.handleComponentUpdate(stateCopy);
         }
     }
@@ -291,10 +376,14 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         });
     }
     handleComponentUpdate(prevState) {
-        const firstDrawerToOpen = this.state.lastlyOpenedDrawer === DrawerConstants.stringStart
-            ? DrawerConstants.stringEnd
-            : DrawerConstants.stringStart;
-        this.openOrCloseDrawer(firstDrawerToOpen, prevState);
+        let sides = [
+            DrawerConstants.stringStart,
+            DrawerConstants.stringEnd,
+            DrawerConstants.stringBottom
+        ];
+        sides = sides.filter((side) => side != this.state.lastlyOpenedDrawer);
+        this.openOrCloseDrawer(sides[0], prevState);
+        this.openOrCloseDrawer(sides[1], prevState);
         this.openOrCloseDrawer(this.state.lastlyOpenedDrawer, prevState);
     }
     openOrCloseDrawer(edge, prevState) {
@@ -318,7 +407,10 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         if (this.isDrawerOpened(edge) === false ||
             this.shouldDrawerChangeDisplayMode(edge) ||
             this.getStateToChangeTo(edge)) {
-            this.animateClose(edge).then(() => {
+            this.animateClose(edge)
+                .then(() => {
+                removeResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener);
+                this.reflowDrawerResizeListener === null;
                 if (this.getStateToChangeTo(edge)) {
                     const updatedState = {};
                     const resetStateToChangeTo = {};
@@ -335,8 +427,14 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 else {
                     if (!this.wasDrawerOpenedInPrevState(edge)) {
                         this.forceUpdate();
+                        setTimeout(() => {
+                            this.setBottomOverlayDrawerWidth();
+                        }, 0);
                     }
                 }
+            })
+                .then(() => {
+                this.setBottomOverlayDrawerWidth();
             });
         }
         else {
@@ -344,7 +442,13 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 if (prevState[this.edgeToStateOpenedName(edge)] === false ||
                     prevState[this.edgeToShouldChangeDisplayMode(edge)] ||
                     prevState[this.edgeToDisplayName(edge)] != this.state[this.edgeToDisplayName(edge)]) {
-                    this.animateOpen(edge);
+                    this.animateOpen(edge).then(() => {
+                        this.setBottomOverlayDrawerWidth();
+                        if (this.reflowDrawerResizeListener === null) {
+                            this.reflowDrawerResizeListener = this.reflowDrawerResizeCallback.bind(this, edge);
+                        }
+                        addResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener, 50, true);
+                    });
                 }
             }
         }
@@ -423,7 +527,10 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
             [PSEvent.POPUP_AFTER_CLOSE]: () => this.afterCloseHandler(edge, prevState),
             [PSEvent.POPUP_REFRESH]: () => {
                 $drawerElement.position(this.getDrawerPosition(edge));
-                this.setOverlayDrawersHeight();
+                if ([DrawerConstants.stringStart, DrawerConstants.stringEnd].indexOf(edge) > -1) {
+                    this.setStartEndOverlayDrawersHeight();
+                }
+                this.setBottomOverlayDrawerWidth();
             }
         };
         return PSOptions;
@@ -432,29 +539,37 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         DrawerUtils.disableBodyOverflow();
         const $drawerElement = PSOptions[PopupService.OPTION.POPUP];
         const position = PSOptions[PopupService.OPTION.POSITION];
+        if (edge === DrawerConstants.stringBottom) {
+            this.setBottomOverlayDrawerWidth();
+        }
         $drawerElement.show();
         $drawerElement.position(position);
-        this.setOverlayDrawersHeight();
+        this.setStartEndOverlayDrawersHeight();
         return this.animateOpen(edge);
     }
+    setBottomOverlayDrawerWidth() {
+        if (this.isDrawerOpened(DrawerConstants.stringBottom) &&
+            this.getDrawerResolvedDisplayMode(DrawerConstants.stringBottom) !=
+                DrawerConstants.stringReflow) {
+            const width = this.middleSectionRef.current.getBoundingClientRect().width;
+            this.bottomRef.current.style.width = `${width}px`;
+        }
+    }
     afterOpenHandler(edge, prevState) {
         DrawerUtils.enableBodyOverflow();
         this.handleFocus(prevState);
         const $drawerElement = $(this.getDrawerRef(edge).current);
         const status = ZOrderUtils.getStatus($drawerElement);
-        if (this.drawerResizeHandler === null) {
-            this.drawerResizeHandler = this.drawerResizeCallback.bind(this, $drawerElement, edge);
+        if (this.overlayDrawerResizeListener === null) {
+            this.overlayDrawerResizeListener = this.overlayDrawerResizeCallback.bind(this, edge);
         }
-        addResizeListener(this.getDrawerRef(edge).current, this.drawerResizeHandler, 0, true);
+        addResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener, 50, true);
         if (status === ZOrderUtils.STATUS.OPEN && !this.isDrawerOpened(edge)) {
             const popupServiceInstance = PopupService.getInstance();
             const popupServiceOptions = this.getPopupServiceOptions(edge, prevState);
             popupServiceInstance.close(popupServiceOptions);
         }
     }
-    drawerResizeCallback($drawerElement, edge) {
-        $drawerElement.position(this.getDrawerPosition(edge));
-    }
     handleFocus(prevState) {
         if (this.state.startOpened && prevState.startOpened !== this.state.startOpened) {
             this.setDrawerFocus(DrawerConstants.stringStart);
@@ -462,10 +577,14 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         if (this.state.endOpened && prevState.endOpened !== this.state.endOpened) {
             this.setDrawerFocus(DrawerConstants.stringEnd);
         }
+        if (this.state.bottomOpened && prevState.bottomOpened !== this.state.bottomOpened) {
+            this.setDrawerFocus(DrawerConstants.stringBottom);
+        }
     }
     beforeCloseHandler(edge) {
         DrawerUtils.disableBodyOverflow();
-        removeResizeListener(this.rootRef.current, this.drawerResizeHandler);
+        removeResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener);
+        this.overlayDrawerResizeListener === null;
         return this.animateClose(edge);
     }
     afterCloseHandler(edge, prevState) {
@@ -500,35 +619,27 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
             this.forceUpdate();
         }
     }
-    getDrawerPosition(edge) {
-        const pos = `${edge} top`;
-        let position = {
-            my: pos,
-            at: pos,
-            of: this.rootRef.current,
-            collision: 'none'
-        };
-        return oj.PositionUtils.normalizeHorizontalAlignment(position, DrawerUtils.isRTL());
-    }
-    setOverlayDrawersHeight() {
-        const mainContentHeight = DrawerUtils.getElementHeight(this.mainSectionRef.current) + 'px';
+    setStartEndOverlayDrawersHeight() {
+        const middleSectionHeight = DrawerUtils.getElementHeight(this.middleSectionRef.current) + 'px';
         const startDrawerElement = this.startRef.current;
         if (startDrawerElement) {
-            startDrawerElement.style.height = mainContentHeight;
+            startDrawerElement.style.height = middleSectionHeight;
         }
         const endDrawerElement = this.endRef.current;
         if (endDrawerElement) {
-            endDrawerElement.style.height = mainContentHeight;
+            endDrawerElement.style.height = middleSectionHeight;
         }
     }
 };
 DrawerLayout.defaultProps = {
     startOpened: false,
     endOpened: false,
+    bottomOpened: false,
     startDisplay: 'auto',
-    endDisplay: 'auto'
+    endDisplay: 'auto',
+    bottomDisplay: 'auto'
 };
-DrawerLayout.metadata = { "slots": { "": {}, "start": {}, "end": {} }, "properties": { "startOpened": { "type": "boolean", "writeback": true }, "endOpened": { "type": "boolean", "writeback": true }, "startDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "endDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] } }, "extension": { "_WRITEBACK_PROPS": ["startOpened", "endOpened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["role"] } };
+DrawerLayout.metadata = { "slots": { "": {}, "start": {}, "end": {}, "bottom": {} }, "properties": { "startOpened": { "type": "boolean", "writeback": true }, "endOpened": { "type": "boolean", "writeback": true }, "bottomOpened": { "type": "boolean", "writeback": true }, "startDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "endDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "bottomDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] } }, "extension": { "_WRITEBACK_PROPS": ["startOpened", "endOpened", "bottomOpened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["role"] } };
 DrawerLayout = DrawerLayout_1 = __decorate([
     customElement('oj-drawer-layout')
 ], DrawerLayout);

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

@@ -32,6 +32,9 @@ class DrawerConstants {
     static get styleBottomDrawer() {
         return `${this.stringOjDrawer}${this.charDash}${this.stringBottom}`;
     }
+    static get middleSectionSelector() {
+        return `${this.stringOjDrawer}${this.charDash}${this.stringMiddleSection}`;
+    }
     static get mainContentSelector() {
         return `${this.stringOjDrawer}${this.charDash}${this.stringMainContent}`;
     }
@@ -51,6 +54,7 @@ DrawerConstants.stringStart = 'start';
 DrawerConstants.stringEnd = 'end';
 DrawerConstants.stringTop = 'top';
 DrawerConstants.stringBottom = 'bottom';
+DrawerConstants.stringMiddleSection = `layout-middle-section`;
 DrawerConstants.stringMainContent = `layout-main-content`;
 DrawerConstants.stringStyleClassDisableOverflow = `oj-drawer-disable-body-overflow`;
 DrawerConstants.stringSurrogate = 'surrogate';
@@ -72,6 +76,7 @@ DrawerConstants.stringClose = 'close';
 DrawerConstants.stringSlideIn = 'slideIn';
 DrawerConstants.stringSlideOut = 'slideOut';
 DrawerConstants.stringWidth = 'width';
+DrawerConstants.stringHeight = 'height';
 DrawerConstants.animationDuration = 300;
 DrawerConstants.keys = {
     ESC: 'Escape',
@@ -131,11 +136,15 @@ class DrawerUtils {
                 }
                 break;
             case DrawerConstants.stringBottom:
-                direction =
-                    actionType === DrawerConstants.stringSlideIn
-                        ? DrawerConstants.stringTop
-                        : DrawerConstants.stringBottom;
-                break;
+                if (actionType === DrawerConstants.stringSlideIn) {
+                    direction = DrawerConstants.stringTop;
+                }
+                else if (actionType === DrawerConstants.stringSlideOut) {
+                    direction = DrawerConstants.stringBottom;
+                }
+                else {
+                    direction = DrawerConstants.stringHeight;
+                }
         }
         return {
             direction,

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

@@ -11294,8 +11294,8 @@ TextUtils.getTextStringWidth = function (context, textString, cssStyle) {
       // Properties that are supported in <canvas> elements by browser
       // Chrome and Safari supports only supports fontVariantNumeric
       // Firefox supports none
-      if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
-          if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
+     if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
+        if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
           TextUtils._clearCanvasContext();
           TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);
         }
@@ -16972,7 +16972,11 @@ SelectionHandler.prototype.processClick = function (target, addToExisting) {
   else {
     if (target && target.isSelectable && target.isSelectable()) {
       // 3. Single select of selectable target
-      bChanged = this._addToSelection(target, false);
+      if (addToExisting && target.isSelected()) {
+        bChanged = this._removeFromSelection(target);
+      } else {
+        bChanged = this._addToSelection(target, false);
+      }
     } else {
       // 4. Single select of non-selectable target
       bChanged = this.clearSelection();
@@ -29496,25 +29500,31 @@ KeyboardHandler.prototype.processKeyDown = function (event) {
  * @param {Array} navigableItems An array of items that could receive focus next
  * @param {Boolean=} ignoreBounds Ignore the _isInBounds check when finding the next navigable
  * @param {dvt.Displayable=} targetCoordinateSpace The displayable defining the target coordinate space
+ * @param {Boolean=} use2d Whether or not to use perpendicular direction when comparing distance between logical objects
  * @return {DvtKeyboardNavigable} The next navigable
  */
-KeyboardHandler.getNextNavigable = function (
+ KeyboardHandler.getNextNavigable = function (
   currentNavigable,
   event,
   navigableItems,
   ignoreBounds,
-  targetCoordinateSpace
+  targetCoordinateSpace,
+  use2d
 ) {
+  if (!currentNavigable) {
+    if (!navigableItems || navigableItems.length < 1) return null;
+    else return navigableItems[0];
+  }
+
   var nextNavigable = null;
   var nextNavigableDelta = 0;
+  var nextNavigableDelta2 = 0;
   var delta = 0;
+  var delta2 = 0;
 
   var direction = event.keyCode;
+  var direction2 = use2d && KeyboardHandler.getPerpendicularDirection(event.keyCode);
 
-  if (!currentNavigable) {
-    if (!navigableItems || navigableItems.length < 1) return null;
-    else return navigableItems[0];
-  }
 
   // get the bounds of the current navigable
   var currentBounds = currentNavigable.getKeyboardBoundingBox(targetCoordinateSpace);
@@ -29529,6 +29539,8 @@ KeyboardHandler.getNextNavigable = function (
 
     if (ignoreBounds || KeyboardHandler._isInBounds(currentBounds, candidateBounds, direction)) {
       delta = KeyboardHandler._computeDelta(currentBounds, candidateBounds, direction);
+      // using Math.abs in order to equally favor equidistance items in either positive or negative dir2
+      delta2 = use2d && Math.abs(KeyboardHandler._computeDelta(currentBounds, candidateBounds, direction2));
 
       if (
         ((direction == KeyboardEvent.UP_ARROW || direction == KeyboardEvent.LEFT_ARROW) &&
@@ -29536,16 +29548,37 @@ KeyboardHandler.getNextNavigable = function (
           (!nextNavigable || delta > nextNavigableDelta)) ||
         ((direction == KeyboardEvent.DOWN_ARROW || direction == KeyboardEvent.RIGHT_ARROW) &&
           delta > 0 &&
-          (!nextNavigable || delta < nextNavigableDelta))
+          (!nextNavigable || delta < nextNavigableDelta)) ||
+        (use2d && (delta === nextNavigableDelta) && (delta2 < nextNavigableDelta2) && delta !== 0)
       ) {
         nextNavigable = navigable;
         nextNavigableDelta = delta;
+        nextNavigableDelta2 = delta2;
       }
     }
   }
   return nextNavigable ? nextNavigable : currentNavigable;
 };
 
+/**
+ * Returns the key code of the arrow key perpendicular to that of the passed arrow key code. Follows right hand
+ * screw rule to determine the perpendicular direction. i.e curl 4 fingers of right hand to point to direction
+ * and thumb points to perpendicular direction.
+ * @param {number} direction Integer key code of either up, down left or right arrow key.
+ * @returns {number} Integer key code.
+ */
+KeyboardHandler.getPerpendicularDirection = function (direction) {
+  if (direction === KeyboardEvent.UP_ARROW) {
+    return KeyboardEvent.RIGHT_ARROW;
+  } else if (direction === KeyboardEvent.RIGHT_ARROW) {
+    return KeyboardEvent.DOWN_ARROW;
+  } else if (direction === KeyboardEvent.DOWN_ARROW) {
+    return KeyboardEvent.LEFT_ARROW;
+  } else if (direction === KeyboardEvent.LEFT_ARROW) {
+    return KeyboardEvent.UP_ARROW;
+  }
+};
+
 /**
  * Returns a default keyboard navigable by selecting the upper left or lower right-most item in the navigableItems
  * array.  Utility method that can be called by classes that implement DvtKeyboardNavigable