@oracle/oraclejet 11.0.6 → 11.1.1

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

@@ -136,7 +136,7 @@ import { TagCloud } from 'ojs/ojtagcloud-toolkit';
  * @ojsignature [{target: "Type", value: "K", for: "id"},
  *               {target: "Type", value: "<K>", for: "genericTypeParameters"},
  *               {target: "Type", value: "?(string | ((context: oj.ojTagCloud.ItemShortDescContext<K>) => string))", jsdocOverride: true, for: "shortDesc"},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride:true}]
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride:true}]
  */
 /**
  * @typedef {Object} oj.ojTagCloud.TooltipContext
@@ -418,7 +418,7 @@ import { TagCloud } from 'ojs/ojtagcloud-toolkit';
  * @memberof! oj.ojTagCloudItem
  * @instance
  * @type {Object=}
- * @ojsignature [{target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}]
+ * @ojsignature [{target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}]
  * @default {}
  *
  * @example <caption>Initialize tag cloud item with the
@@ -1273,7 +1273,7 @@ oj.__registerWidget('oj.ojTagCloud', $.oj.dvtBaseComponent,
          * @instance
          * @type {Object=}
          * @default {}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          *
          * @example <caption>See the <a href="#styleDefaults">styleDefaults</a> attribute for usage examples.</caption>
          */

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

@@ -13,16 +13,33 @@ import { info } from 'ojs/ojlogger';
 import { CACHED_BINDING_PROVIDER, AttributeUtils } from 'ojs/ojcustomelement-utils';
 import { render } from 'preact';
 import oj from 'ojs/ojcore-base';
+import Context from 'ojs/ojcontext';
 
 const ROW = Symbol('row');
 class PreactTemplate {
     static executeVDomTemplate(templateElement, context) {
+        const busyContext = Context.getContext(templateElement).getBusyContext();
+        const customThrottle = (callback, timeout) => {
+            let timeoutInstance;
+            return () => {
+                if (!timeoutInstance) {
+                    const busyStateResolve = busyContext.addBusyState({
+                        description: 'pending changes for the template element'
+                    });
+                    timeoutInstance = setTimeout(() => {
+                        timeoutInstance = undefined;
+                        callback();
+                        busyStateResolve();
+                    }, timeout);
+                }
+            };
+        };
         const computedVNode = pureComputed({
             read: () => {
                 return templateElement.render(context.$current);
             }
         })
-            .extend({ rateLimit: 0 });
+            .extend({ rateLimit: { timeout: 0, method: customThrottle } });
         const vNode = computedVNode();
         PreactTemplate._extendTemplate(templateElement, PreactTemplate._ROW_CACHE_FACTORY, (renderer) => {
             templateElement._cachedRows.forEach((rowItem) => {
@@ -49,16 +66,12 @@ class PreactTemplate {
     }
     static _renderNodes(vnode, row) {
         const parentStub = row.parentStub;
-        let reparentNodes;
+        let retrieveNodes = () => Array.from(parentStub.childNodes);
         if (row.nodes) {
-            const oldNodes = row.nodes;
-            reparentNodes = PreactTemplate._getInsertNodesFunction(oldNodes);
-            oldNodes.forEach((node) => {
-                parentStub.appendChild(node);
-            });
+            retrieveNodes = PreactTemplate._getRetrieveNodesFunction(row.nodes);
         }
         render(vnode, parentStub);
-        const nodes = Array.from(parentStub.childNodes);
+        const nodes = retrieveNodes();
         nodes.forEach((node) => {
             var _a;
             (_a = node.classList) === null || _a === void 0 ? void 0 : _a.add('oj-vdom-template-root');
@@ -67,7 +80,6 @@ class PreactTemplate {
         });
         row.vnode = vnode;
         row.nodes = nodes;
-        reparentNodes === null || reparentNodes === void 0 ? void 0 : reparentNodes(nodes);
     }
     static clean(node) {
         const row = node[ROW];
@@ -90,6 +102,21 @@ class PreactTemplate {
             nodes.forEach((node) => parentNode.insertBefore(node, nextSibling));
         };
     }
+    static _getRetrieveNodesFunction(oldNodes) {
+        const firstNode = oldNodes[0];
+        const lastNode = oldNodes[oldNodes.length - 1];
+        const parentNode = firstNode.parentNode;
+        const previousSibling = firstNode.previousSibling;
+        const nextSibling = lastNode.nextSibling;
+        const firstNewNode = () => previousSibling ? previousSibling.nextSibling : parentNode.firstChild;
+        return () => {
+            const nodes = [];
+            for (let node = firstNewNode(); node !== nextSibling; node = node.nextSibling) {
+                nodes.push(node);
+            }
+            return nodes;
+        };
+    }
     static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
         const [cache, deleteEntry] = PreactTemplate._extendTemplate(template, PreactTemplate._COMPUTED_PROPS_CACHE_FACTORY, (recalc) => {
             for (const observable of cache) {

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

@@ -1625,7 +1625,7 @@ oj.__registerWidget('oj.ojThematicMap', $.oj.dvtBaseComponent,
          * @memberof! oj.ojThematicMap
          * @instance
          * @type {Object=}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          * @default {}
          *
          * @example <caption>See the <a href="#styleDefaults">styleDefaults</a> attribute for usage examples.</caption>
@@ -1798,7 +1798,7 @@ oj.__registerWidget('oj.ojThematicMap', $.oj.dvtBaseComponent,
            * @instance
            * @type {Object=}
            * @default  {}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            *
            * @example <caption>See the <a href="#styleDefaults">styleDefaults</a> attribute for usage examples.</caption>
            *
@@ -1873,7 +1873,7 @@ oj.__registerWidget('oj.ojThematicMap', $.oj.dvtBaseComponent,
          * @instance
          * @type {Object=}
          * @default  {}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          *
          * @example <caption>See the <a href="#styleDefaults">styleDefaults</a> attribute for usage examples.</caption>
          */
@@ -3253,8 +3253,8 @@ setDefaultOptions({
  * @property {string=}       svgClassName The CSS style class defining the style of the area.
  * @property {Object=}       svgStyle The CSS style object defining the style of the area. Only SVG CSS style properties are supported.
  * @ojsignature [{target: "Type", value: "K", for: "id"},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "labelStyle", jsdocOverride: true},
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true},
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "labelStyle", jsdocOverride: true},
  *               {target: "Type", value: "?(string | ((context: oj.ojThematicMap.AreaShortDescContext<K,D>) => string))", jsdocOverride: true, for: "shortDesc"},
  *               {target: "Type", value: "<K,D=any>", for: "genericTypeParameters"}]
  */
@@ -3280,7 +3280,7 @@ setDefaultOptions({
  * @property {number=}       width The link width in pixels.
  * @ojsignature [{target: "Type", value: "K2", for: "endLocation.id"},
  *               {target: "Type", value: "K1", for: "id"},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true},
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true},
  *               {target: "Type", value: "K2", for: "startLocation.id"},
  *               {target: "Type", value: "?(string | ((context: oj.ojThematicMap.LinkShortDescContext<K1,K2,D1>) => string))", jsdocOverride: true, for: "shortDesc"},
  *               {target: "Type", value: "<K1,K2,D1=any>", for:"genericTypeParameters"}]
@@ -3319,8 +3319,8 @@ setDefaultOptions({
  * @property {number=}       x The x coordinate of the marker transformed using the map projection, which can be null if location is set instead.
  * @property {number=}       y The y coordinate of the marker transformed using the map projection, which can be null if location is set instead.
  * @ojsignature [{target: "Type", value: "K3", for: "id"},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "labelStyle", jsdocOverride: true},
- *               {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true},
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "labelStyle", jsdocOverride: true},
+ *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true},
  *               {target: "Type", value: "?(string | ((context: oj.ojThematicMap.MarkerShortDescContext<K3,D3>) => string))", jsdocOverride: true, for: "shortDesc"},
  *               {target: "Type", value: "<K3,D3=any>", for: "genericTypeParameters"}]
  */
@@ -3806,7 +3806,7 @@ setDefaultOptions({
  * @memberof! oj.ojThematicMapArea
  * @instance
  * @type {object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default null
  *
  * @example <caption>Initialize the thematic map area with the
@@ -3893,7 +3893,7 @@ setDefaultOptions({
  * @memberof! oj.ojThematicMapArea
  * @instance
  * @type {object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  *
  * @example <caption>Initialize the thematic map area with the
@@ -4141,7 +4141,7 @@ setDefaultOptions({
  * @memberof! oj.ojThematicMapLink
  * @instance
  * @type {object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  *
  * @example <caption>Initialize the thematic map link with the
@@ -4338,7 +4338,7 @@ setDefaultOptions({
  * @memberof! oj.ojThematicMapMarker
  * @instance
  * @type {object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default null
  *
  * @example <caption>Initialize the thematic map marker with the
@@ -4507,7 +4507,7 @@ setDefaultOptions({
  * @memberof! oj.ojThematicMapMarker
  * @instance
  * @type {object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  *
  * @example <caption>Initialize the thematic map marker with the

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

@@ -144,6 +144,7 @@ DvtTimeAxisDefaults.VERSION_1 = {
  */
 DvtTimeAxisDefaults.prototype.getNoCloneObject = function () {
   return {
+    _secondaryAxis: true,
     // Don't clone areas where app may pass in an instance of DvtTimeComponentScales
     // If the instance is a class, class methods may not be cloned for some reason.
     scale: true,
@@ -434,8 +435,46 @@ DvtTimeAxisRenderer.renderTimeAxis = function (timeAxis, viewStartTime, viewEndT
           timeAxis._start, timeAxis._end, date.getTime(), timeAxis._contentLength)
       };
     });
+    let tickDates = dates;
+
+    // Determine whether to render secondary major ticks
+    let showMajorTicks = false;
+    const majorAxis = timeAxis.Options._secondaryAxis;
+    let majorViewportDates = majorAxis ? majorAxis.getViewportDates(majorAxis.getScale(), viewStartTime, viewEndTime) : [];
+    if (majorAxis && timeAxis.getCtx().getThemeBehavior() !== 'alta') {
+      // TODO: Unify this logic with the similar part in DvtGanttRenderer._renderVerticalGridline.
+      // This is a "nice to have" implementation detail. Tracked by JET-46323.
+      // We can't easily do this right now because timeaxis rendering is virtualized, but vertical gridlines are not.
+      // In the future also virtualize vertical gridlines rendering and drive both from a single source of truth.
+      const minorViewportDates = dates;
+      // If major dates is a subset of minor dates, then the two grids line up. Don't render the minor dates at overlap (due to opacity, minor line would show through major line otherwise).
+      // Otherwise the major and minor axis do not "line up" (e.g. months and weeks scale together). Render minor lines only.
+      const majorViewportDatesSet = new Set(majorViewportDates.map(d => d.getTime()));
+      const minorViewportDatesSet = new Set(minorViewportDates.map(d => d.getTime()));
+      // only consider major dates that are in range (e.g. first and/or last ticks may be out of range)
+      showMajorTicks = majorViewportDates.filter(d => (d.getTime() > viewStartTime && d.getTime() < viewEndTime) && !minorViewportDatesSet.has(d.getTime())).length === 0;
+      tickDates = showMajorTicks ? minorViewportDates.filter(d => !majorViewportDatesSet.has(d.getTime())) : minorViewportDates;
+    }
 
-    DvtTimeAxisRenderer._renderTicks(tickLabelsContainer, timeAxis, datePositions);
+    const tickDatePositions = tickDates.map(function (date) {
+      return {
+        date: date,
+        pos: TimeAxisUtils.getDatePosition(
+          timeAxis._start, timeAxis._end, date.getTime(), timeAxis._contentLength)
+      };
+    });
+    DvtTimeAxisRenderer._renderTicks(tickLabelsContainer, timeAxis, tickDatePositions);
+
+    if (showMajorTicks) {
+      const majorDatePositions = majorViewportDates.map(function (date) {
+        return {
+          date: date,
+          pos: TimeAxisUtils.getDatePosition(
+            timeAxis._start, timeAxis._end, date.getTime(), timeAxis._contentLength)
+        };
+      });
+      DvtTimeAxisRenderer._renderTicks(tickLabelsContainer, majorAxis, majorDatePositions);
+    }
 
     // We don't need the label of the last tick.
     const labelTexts = timeAxis.getDateLabelTexts(dates,
@@ -589,40 +628,73 @@ DvtTimeAxisRenderer._renderLabels = function (container, timeAxis, datePositions
   const isRTL = Agent.isRightToLeft(context);
   const labelStyle = DvtTimeAxisStyleUtils.getAxisLabelStyle(timeAxis.Options);
   const labelClass = DvtTimeAxisStyleUtils.getAxisLabelClass(timeAxis.Options) || '';
+  const scale = timeAxis.getScale();
+  const labelPosition = timeAxis.Options._scaleLabelPosition[timeAxis.isTimeComponentScale(scale) ? scale.name : scale];
 
   for (let i = 0; i < datePositions.length - 1; i++) {
     const currentPos = datePositions[i].pos;
     const nextPos = datePositions[i + 1].pos;
 
-    const timePos = !isRTL
+    const label = new OutputText(context, labelTexts[i], 0, 0);
+    label.setCSSStyle(labelStyle);
+    label.getElem().setAttribute('class', labelClass);
+
+    const timeCenterPos = !isRTL
       ? currentPos + ((nextPos - currentPos) / 2)
       : timeAxis._contentLength - (currentPos + ((nextPos - currentPos) / 2));
-    const sizePos = axisStart + ((axisEnd - axisStart) / 2);
+    const sizeCenterPos = axisStart + ((axisEnd - axisStart) / 2);
+    let y = timeAxis.isVertical() ? timeCenterPos : sizeCenterPos;
+    let x;
+    switch (labelPosition) {
+      case 'start':
+        if (timeAxis.isVertical()) {
+          x = sizeCenterPos;
+          label.alignCenter();
+        } else if (isRTL) {
+          x = timeAxis._contentLength - (currentPos + DvtTimeAxisStyleUtils.DEFAULT_INTERVAL_PADDING * 2);
+          label.alignRight();
+        } else {
+          // In 11.0.0, padding is 2px on both sides, center positioning.
+          // In 11.1 minor release, positioning is "start". To preserve original width while increasing
+          // label start padding, the padding is 4px on the left and 0px on the right.
+          x = currentPos + DvtTimeAxisStyleUtils.DEFAULT_INTERVAL_PADDING * 2;
+          label.alignLeft();
+        }
+        break;
+      case 'center':
+      default:
+        x = timeAxis.isVertical() ? sizeCenterPos : timeCenterPos;
+        label.alignCenter();
+    }
+
+    label.setX(x);
+    TextUtils.centerTextVertically(label, y);
 
-    const x = timeAxis.isVertical() ? sizePos : timePos;
-    const y = timeAxis.isVertical() ? timePos : sizePos;
     const maxSize = timeAxis.getContentSize();
     const maxLength = nextPos - currentPos;
     const maxLabelWidth = timeAxis.isVertical() ? maxSize : maxLength;
     const maxLabelHeight = timeAxis.isVertical() ? maxLength : maxSize;
 
-    const label = new OutputText(context, labelTexts[i], x, 0);
-    label.setCSSStyle(labelStyle);
-    label.getElem().setAttribute('class', labelClass);
-    label.alignCenter();
-    TextUtils.centerTextVertically(label, y);
     TextUtils.fitText(label, maxLabelWidth, maxLabelHeight, container);
 
-    // Truncate first/last labels overlapping overall start/end if needed
+    // Truncate first/last labels overlapping overall start/end if needed:
+    // To take into account the case where the interval is not fully shown due to start/end edge and label is truncated,
+    // we need to manually calculate label placement
     if (!timeAxis.isVertical()) {
       if (i === 0 && datePositions[i].date.getTime() < timeAxis._start) {
         if (label.isTruncated()) {
           label.setTextString(label.getUntruncatedTextString());
         }
         const labelWidth = label.getDimensions().w;
-        const adjustedMaxLength = nextPos - Math.max(0, ((nextPos - currentPos - labelWidth) / 2));
-        // Can't simply take center of inter-tick region and alignCenter() for first label treatment if the label is going to be truncated
-        // Instead, align right and manually calculate label placement
+        let adjustedMaxLength;
+        switch (labelPosition) {
+          case 'start':
+            adjustedMaxLength = nextPos - Math.max(0, nextPos - currentPos - labelWidth - DvtTimeAxisStyleUtils.DEFAULT_INTERVAL_PADDING * 2);
+            break;
+          case 'center':
+          default:
+            adjustedMaxLength = nextPos - Math.max(0, ((nextPos - currentPos - labelWidth) / 2));
+        }
         const horizPos = Math.max(0, adjustedMaxLength);
         if (!isRTL) {
           label.alignRight();
@@ -651,14 +723,25 @@ DvtTimeAxisRenderer._renderLabels = function (container, timeAxis, datePositions
         if (label.isTruncated()) {
           label.setTextString(label.getUntruncatedTextString());
         }
-        const labelWidth = label.getDimensions().w;
-        const adjustedMaxLength = timeAxis._contentLength
-          - currentPos
-          - Math.max(0, ((nextPos - currentPos - labelWidth) / 2));
-        // Can't simply take center of inter-tick region and alignCenter() for last label treatment if the label is going to be truncated
-        // Instead, align right and manually calculate label placement
-        const horizPos = Math.max(currentPos,
-          (currentPos + ((nextPos - currentPos) / 2)) - (labelWidth / 2));
+        let adjustedMaxLength;
+        let horizPos;
+        switch (labelPosition) {
+          case 'start':
+            adjustedMaxLength = timeAxis._contentLength
+              - currentPos
+              - DvtTimeAxisStyleUtils.DEFAULT_INTERVAL_PADDING * 2;
+            horizPos = currentPos + DvtTimeAxisStyleUtils.DEFAULT_INTERVAL_PADDING * 2;
+            break;
+          case 'center':
+          default: {
+            const labelWidth = label.getDimensions().w;
+            adjustedMaxLength = timeAxis._contentLength
+              - currentPos
+              - Math.max(0, ((nextPos - currentPos - labelWidth) / 2));
+            horizPos = Math.max(currentPos,
+              (currentPos + ((nextPos - currentPos) / 2)) - (labelWidth / 2));
+          }
+        }
         if (!isRTL) {
           label.alignLeft();
           label.setX(horizPos);
@@ -839,6 +922,7 @@ TimeAxis.prototype.isVertical = function()
  *         1. Initial render: options is available.
  *         2. Rerenders (e.g. due to resize): options is null.
  *     Inside Gantt/Timeline:
+ *         1. Initial prep: options is the bundled options contructured by the parent time component.
  *         1. Initial render: options only contains _viewStartTime and _viewEndTime that defines the visible viewport.
  *              and _throttle to signify whether render should be throttled with requestAnimationFrame.
  *         2. Rerenders: Same, options contains only _viewStartTime, _viewEndTime, _throttle.

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

@@ -573,6 +573,19 @@ oj.__registerWidget('oj.ojTimeAxis', $.oj.dvtBaseComponent,
 
       processRootDateOptions('start');
       processRootDateOptions('end');
+
+      // Set label position.
+      const scale = this.options.scale;
+      if (scale) {
+        this.options._scaleLabelPosition = {};
+        if (scale.name) {
+          const labelPosition = scale.labelPosition || 'auto';
+          const effectiveLabelPosition = labelPosition === 'auto' ? 'center' : labelPosition;
+          this.options._scaleLabelPosition[scale.name] = effectiveLabelPosition;
+        } else {
+          this.options._scaleLabelPosition[scale] = 'center';
+        }
+      }
     },
 
     // @inheritdoc