@conduction/nextcloud-vue 2.92.0 → 2.94.0

package/dist/esm/components/CnDashboardPage/CnDashboardPage.vue3.js

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, withCtx, createTextVNode, renderSlot, Fragment, createVNode, createSlots, renderList, mergeProps } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, withCtx, createTextVNode, renderSlot, createVNode, Fragment, createSlots, renderList, mergeProps } from 'vue';
 
 const _hoisted_1 = {
   key: 0,
@@ -17,94 +17,105 @@ const _hoisted_4 = {
 };
 const _hoisted_5 = {
   key: 1,
-  class: "cn-dashboard-page__description",
+  class: "cn-dashboard-page__description cn-dashboard-page__description--with-period",
   "data-testid": "cn-dashboard-page-subtitle"
 };
-const _hoisted_6 = { class: "cn-dashboard-page__header-actions" };
+const _hoisted_6 = { key: 0 };
 const _hoisted_7 = {
+  key: 1,
+  "aria-hidden": "true"
+};
+const _hoisted_8 = {
+  key: 2,
+  class: "cn-dashboard-page__description",
+  "data-testid": "cn-dashboard-page-subtitle"
+};
+const _hoisted_9 = { class: "cn-dashboard-page__header-actions" };
+const _hoisted_10 = {
   key: 2,
   class: "cn-dashboard-page__switch-row",
   "data-testid": "cn-dashboard-page-switch-row"
 };
-const _hoisted_8 = {
+const _hoisted_11 = {
   key: 0,
   class: "cn-dashboard-page__date-segmented",
   "data-testid": "cn-dashboard-page-date-segmented"
 };
-const _hoisted_9 = ["aria-label"];
-const _hoisted_10 = ["aria-pressed", "data-testid", "onClick"];
-const _hoisted_11 = {
+const _hoisted_12 = ["aria-label"];
+const _hoisted_13 = ["aria-pressed", "data-testid", "onClick"];
+const _hoisted_14 = {
   key: 4,
   class: "cn-dashboard-page__page-filters",
   "data-testid": "cn-dashboard-page-page-filters"
 };
-const _hoisted_12 = {
+const _hoisted_15 = {
   key: 0,
   class: "cn-dashboard-page__page-filter-label"
 };
-const _hoisted_13 = {
+const _hoisted_16 = {
   key: 8,
   class: "cn-dashboard-page__empty"
 };
-const _hoisted_14 = {
+const _hoisted_17 = {
   key: 9,
   class: "cn-dashboard-page__content"
 };
-const _hoisted_15 = ["data-testid"];
-const _hoisted_16 = {
+const _hoisted_18 = ["data-testid"];
+const _hoisted_19 = {
   key: 0,
   class: "cn-dashboard-page__widget-note",
   "data-testid": "cn-dashboard-widget-header-note"
 };
-const _hoisted_17 = ["onClick"];
-const _hoisted_18 = { class: "cn-dashboard-page__unknown" };
-const _hoisted_19 = {
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = { class: "cn-dashboard-page__unknown" };
+const _hoisted_22 = {
   key: 11,
   class: "cn-dashboard-page__view-switch"
 };
-const _hoisted_20 = {
+const _hoisted_23 = {
   key: 0,
   class: "cn-dashboard-page__widget-edit"
 };
-const _hoisted_21 = {
+const _hoisted_24 = {
   class: "cn-dashboard-page__requires-app cn-requires-app cn-requires-app--compact",
   "data-testid": "cn-requires-app"
 };
-const _hoisted_22 = { class: "cn-requires-app__description" };
-const _hoisted_23 = ["title"];
-const _hoisted_24 = {
+const _hoisted_25 = { class: "cn-requires-app__description" };
+const _hoisted_26 = ["title"];
+const _hoisted_27 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_25 = ["title"];
-const _hoisted_26 = {
+const _hoisted_28 = ["title"];
+const _hoisted_29 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_27 = {
+const _hoisted_30 = {
   key: 2,
   class: "cn-dashboard-page__unknown"
 };
-const _hoisted_28 = {
+const _hoisted_31 = {
   key: 0,
   class: "cn-dashboard-page__widget-count",
   "data-testid": "cn-dashboard-widget-header-count"
 };
-const _hoisted_29 = ["title"];
-const _hoisted_30 = {
+const _hoisted_32 = ["title"];
+const _hoisted_33 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_31 = {
+const _hoisted_34 = {
   key: 0,
   class: "cn-dashboard-page__widget-note",
   "data-testid": "cn-dashboard-widget-header-note"
 };
-const _hoisted_32 = ["onClick"];
-const _hoisted_33 = { class: "cn-dashboard-page__unknown" };
-const _hoisted_34 = ["id", "aria-label"];
+const _hoisted_35 = ["onClick"];
+const _hoisted_36 = { class: "cn-dashboard-page__unknown" };
+const _hoisted_37 = ["id", "aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnHeaderTrail = resolveComponent("CnHeaderTrail");
   const _component_CnSegmentedControl = resolveComponent("CnSegmentedControl");
   const _component_CnActionButtons = resolveComponent("CnActionButtons");
   const _component_Pencil = resolveComponent("Pencil");
@@ -140,6 +151,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["cn-dashboard-page", { 'cn-dashboard-page--board': $options.isBoardLook }]),
+    style: normalizeStyle({ '--cn-dashboard-grid-margin': `${$props.gridMargin}px` }),
     "data-testid": "cn-dashboard-page"
   }, [
     (!$props.showHeader && $props.title)
@@ -164,11 +176,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   renderSlot(_ctx.$slots, "title-meta")
                 ]))
               : createCommentVNode("v-if", true),
-            ($options.subtitleText)
-              ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($options.subtitleText), 1 /* TEXT */))
-              : createCommentVNode("v-if", true)
+            createVNode(_component_CnHeaderTrail, {
+              breadcrumb: $props.breadcrumb,
+              current: $props.title ? $options.resolvedTitle : '',
+              meta: $props.headerMeta ? $options.effectiveTranslate($props.headerMeta) : ''
+            }, null, 8 /* PROPS */, ["breadcrumb", "current", "meta"]),
+            ($options.datePeriodInDescription)
+              ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  ($options.subtitleText)
+                    ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString($options.subtitleText), 1 /* TEXT */))
+                    : createCommentVNode("v-if", true),
+                  ($options.subtitleText)
+                    ? (openBlock(), createElementBlock("span", _hoisted_7, "·"))
+                    : createCommentVNode("v-if", true),
+                  createVNode(_component_CnSegmentedControl, {
+                    size: "compact",
+                    mode: "toggle",
+                    options: $options.segmentedOptions,
+                    modelValue: $options.segmentedValue,
+                    ariaLabel: $options.datePeriodLabel,
+                    "data-testid": "cn-dashboard-page-date-segmented",
+                    "onUpdate:modelValue": $options.onSegmentPick
+                  }, null, 8 /* PROPS */, ["options", "modelValue", "ariaLabel", "onUpdate:modelValue"])
+                ]))
+              : ($options.subtitleText)
+                ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString($options.subtitleText), 1 /* TEXT */))
+                : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("div", _hoisted_6, [
+          createElementVNode("div", _hoisted_9, [
             (_ctx.showsPageViewSwitch && !$options.switchInRow)
               ? (openBlock(), createBlock(_component_CnSegmentedControl, {
                   key: 0,
@@ -288,7 +323,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ]))
       : createCommentVNode("v-if", true),
     ($props.showHeader && ($options.switchInRow || $options.resolvedViewLinks.length > 0))
-      ? (openBlock(), createElementBlock("div", _hoisted_7, [
+      ? (openBlock(), createElementBlock("div", _hoisted_10, [
           ($options.switchInRow)
             ? (openBlock(), createBlock(_component_CnSegmentedControl, {
                 key: 0,
@@ -325,7 +360,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128 /* KEYED_FRAGMENT */))
         ]))
       : createCommentVNode("v-if", true),
-    ($options.showHeaderDateRange)
+    ($options.showHeaderDateRange && !$options.datePeriodInDescription)
       ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: normalizeClass(["cn-dashboard-page__date-range", {
@@ -335,7 +370,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-testid": "cn-dashboard-page-date-range"
         }, [
           ($options.dateRangeControl === 'segmented')
-            ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            ? (openBlock(), createElementBlock("div", _hoisted_11, [
                 createVNode(_component_CnSegmentedControl, {
                   size: "compact",
                   mode: "toggle",
@@ -391,7 +426,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       "aria-pressed": String(Boolean($data.currentRange && $data.currentRange.preset === preset.id)),
                       "data-testid": `cn-dashboard-page-date-pill-${preset.id}`,
                       onClick: $event => ($options.onPillPick(preset))
-                    }, toDisplayString(preset.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_10))
+                    }, toDisplayString(preset.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_13))
                   }), 128 /* KEYED_FRAGMENT */)),
                   ($options.hasCustomPreset)
                     ? (openBlock(), createBlock(_component_NcActions, {
@@ -425,7 +460,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         _: 1 /* STABLE */
                       }))
                     : createCommentVNode("v-if", true)
-                ], 8 /* PROPS */, _hoisted_9))
+                ], 8 /* PROPS */, _hoisted_12))
               : (openBlock(), createBlock(_component_CnDateRangePicker, {
                   key: 2,
                   value: $data.currentRange,
@@ -435,14 +470,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 2 /* CLASS */))
       : createCommentVNode("v-if", true),
     ($props.pageFilters && $props.pageFilters.length)
-      ? (openBlock(), createElementBlock("div", _hoisted_11, [
+      ? (openBlock(), createElementBlock("div", _hoisted_14, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($props.pageFilters, (pf) => {
             return (openBlock(), createElementBlock("label", {
               key: pf.key,
               class: "cn-dashboard-page__page-filter"
             }, [
               (pf.label)
-                ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(pf.label), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(pf.label), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
               createVNode(_component_NcSelect, {
                 modelValue: $options.selectedPageFilterOption(pf),
@@ -471,7 +506,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : (!$data.widgetConditionsSettled && !$options.gridEditable)
         ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 7 }))
         : (!$options.hasWidgets && !$options.hasBodyWidgets && !_ctx.hasViews)
-          ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          ? (openBlock(), createElementBlock("div", _hoisted_16, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 createVNode(_component_CnEmptyContent, { description: $props.emptyLabel }, {
                   icon: withCtx(() => [
@@ -482,7 +517,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ]))
           : ($options.widgetRefItems.length > 0)
-            ? (openBlock(), createElementBlock("div", _hoisted_14, [
+            ? (openBlock(), createElementBlock("div", _hoisted_17, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetRefItems, (item, idx) => {
                   return (openBlock(), createBlock(_component_CnWidgetRefItem, {
                     key: item.ref + '-' + idx,
@@ -546,7 +581,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               name: "actions",
                               fn: withCtx(() => [
                                 ($options.widgetHeaderNote(item))
-                                  ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString($options.widgetHeaderNote(item)), 1 /* TEXT */))
+                                  ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString($options.widgetHeaderNote(item)), 1 /* TEXT */))
                                   : createCommentVNode("v-if", true),
                                 ($options.widgetHeaderAction(item))
                                   ? (openBlock(), createElementBlock("button", {
@@ -555,7 +590,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       class: "cn-dashboard-page__widget-action",
                                       "data-testid": "cn-dashboard-widget-header-action",
                                       onClick: $event => ($options.widgetHeaderAction(item).run())
-                                    }, toDisplayString($options.widgetHeaderAction(item).label), 9 /* TEXT, PROPS */, _hoisted_17))
+                                    }, toDisplayString($options.widgetHeaderAction(item).label), 9 /* TEXT, PROPS */, _hoisted_20))
                                   : createCommentVNode("v-if", true)
                               ]),
                               key: "0"
@@ -582,22 +617,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           key: 3,
                           title: $options.getWidgetTitle(item),
                           eyebrow: $options.getWidgetEyebrow(item),
+                          subtitle: $options.getWidgetSubtitle(item),
                           showTitle: false,
                           showRefresh: false
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("div", _hoisted_18, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
+                            createElementVNode("div", _hoisted_21, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
                           ]),
                           _: 1 /* STABLE */
-                        }, 8 /* PROPS */, ["title", "eyebrow"]))
-              ], 8 /* PROPS */, _hoisted_15))
+                        }, 8 /* PROPS */, ["title", "eyebrow", "subtitle"]))
+              ], 8 /* PROPS */, _hoisted_18))
             }), 128 /* KEYED_FRAGMENT */))
           ]),
           _: 3 /* FORWARDED */
         }))
       : createCommentVNode("v-if", true),
     ($options.gridSectionsShown && !$props.showHeader && _ctx.showsPageViewSwitch)
-      ? (openBlock(), createElementBlock("div", _hoisted_19, [
+      ? (openBlock(), createElementBlock("div", _hoisted_22, [
           createVNode(_component_CnSegmentedControl, {
             class: "cn-page-view-switch",
             options: _ctx.viewSwitchOptions,
@@ -624,7 +660,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), {
         widget: withCtx(({ item }) => [
           ($options.gridEditable)
-            ? (openBlock(), createElementBlock("div", _hoisted_20, [
+            ? (openBlock(), createElementBlock("div", _hoisted_23, [
                 createVNode(_component_NcButton, {
                   variant: "tertiary",
                   "aria-label": _ctx.t('nextcloud-vue', 'Configure widget'),
@@ -642,11 +678,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 1,
                 title: $options.getWidgetTitle(item),
                 eyebrow: $options.getWidgetEyebrow(item),
+                subtitle: $options.getWidgetSubtitle(item),
                 showTitle: $options.widgetShowTitle(item)
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_21, [
-                    createElementVNode("p", _hoisted_22, toDisplayString(_ctx.t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.')), 1 /* TEXT */),
+                  createElementVNode("div", _hoisted_24, [
+                    createElementVNode("p", _hoisted_25, toDisplayString(_ctx.t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.')), 1 /* TEXT */),
                     createVNode(_component_NcButton, {
                       variant: "primary",
                       href: $options.appInstallUrl($options.missingRequiredApp(item))
@@ -662,7 +699,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 ]),
                 _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "eyebrow", "showTitle"]))
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "eyebrow", "subtitle", "showTitle"]))
             : ($options.isTile(item))
               ? (openBlock(), createBlock(_component_CnTileWidget, {
                   key: 2,
@@ -674,6 +711,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     widgetId: item.widgetId,
                     title: $options.getWidgetTitle(item),
                     eyebrow: $options.getWidgetEyebrow(item),
+                    subtitle: $options.getWidgetSubtitle(item),
                     iconUrl: $options.getWidgetIconUrl(item),
                     iconClass: $options.getWidgetIconClass(item),
                     showTitle: $options.widgetShowTitle(item),
@@ -740,7 +778,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 createElementVNode("span", {
                                   class: "cn-dashboard-page__date-chip",
                                   title: $data.dateChipTitle
-                                }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_23)
+                                }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_26)
                               ]),
                               default: withCtx(() => [
                                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
@@ -755,7 +793,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                             key: 0,
                                             size: 16
                                           }))
-                                        : (openBlock(), createElementBlock("span", _hoisted_24))
+                                        : (openBlock(), createElementBlock("span", _hoisted_27))
                                     ]),
                                     default: withCtx(() => [
                                       createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
@@ -785,7 +823,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           key: "2"
                         }
                       : undefined
-                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "showActions", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "subtitle", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "showActions", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                 : ($options.isChart(item))
                   ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
                       key: 4,
@@ -793,6 +831,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       class: normalizeClass({ 'cn-dashboard-page__chart-fit': $options.isChartFitted(item) }),
                       title: $options.getWidgetTitle(item),
                       eyebrow: $options.getWidgetEyebrow(item),
+                      subtitle: $options.getWidgetSubtitle(item),
                       iconUrl: $options.getWidgetIconUrl(item),
                       iconClass: $options.getWidgetIconClass(item),
                       showTitle: $options.widgetShowTitle(item),
@@ -835,7 +874,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   createElementVNode("span", {
                                     class: "cn-dashboard-page__date-chip",
                                     title: $data.dateChipTitle
-                                  }, toDisplayString($options.formatChartDateRange(item) || $options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_25)
+                                  }, toDisplayString($options.formatChartDateRange(item) || $options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_28)
                                 ]),
                                 default: withCtx(() => [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
@@ -850,7 +889,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                               key: 0,
                                               size: 16
                                             }))
-                                          : (openBlock(), createElementBlock("span", _hoisted_26))
+                                          : (openBlock(), createElementBlock("span", _hoisted_29))
                                       ]),
                                       default: withCtx(() => [
                                         createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
@@ -880,13 +919,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             key: "0"
                           }
                         : undefined
-                    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "class", "title", "eyebrow", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "class", "title", "eyebrow", "subtitle", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                   : ($options.isStatsBlock(item))
                     ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
                         key: 5,
                         widgetId: item.widgetId,
                         title: $options.getWidgetTitle(item),
                         eyebrow: $options.getWidgetEyebrow(item),
+                        subtitle: $options.getWidgetSubtitle(item),
                         iconUrl: $options.getWidgetIconUrl(item),
                         iconClass: $options.getWidgetIconClass(item),
                         showTitle: $options.widgetShowTitle(item),
@@ -909,13 +949,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           }), null, 16 /* FULL_PROPS */, ["title", "data-source"])
                         ]),
                         _: 2 /* DYNAMIC */
-                      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "subtitle", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                     : ($options.isIntegration(item))
                       ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
                           key: 6,
                           widgetId: item.widgetId,
                           title: $options.getWidgetTitle(item),
                           eyebrow: $options.getWidgetEyebrow(item),
+                          subtitle: $options.getWidgetSubtitle(item),
                           iconUrl: $options.getWidgetIconUrl(item),
                           iconClass: $options.getWidgetIconClass(item),
                           showTitle: $options.widgetShowTitle(item),
@@ -946,16 +987,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     key: 1,
                                     ref_for: true
                                   }, $options.getIntegrationProps(item)), null, 16 /* FULL_PROPS */))
-                                : (openBlock(), createElementBlock("div", _hoisted_27, toDisplayString($props.unavailableLabel), 1 /* TEXT */))
+                                : (openBlock(), createElementBlock("div", _hoisted_30, toDisplayString($props.unavailableLabel), 1 /* TEXT */))
                           ]),
                           _: 2 /* DYNAMIC */
-                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "subtitle", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                       : ($options.isNcWidget(item))
                         ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
                             key: 7,
                             widgetId: item.widgetId,
                             title: $options.getWidgetTitle(item),
                             eyebrow: $options.getWidgetEyebrow(item),
+                            subtitle: $options.getWidgetSubtitle(item),
                             iconUrl: $options.getWidgetIconUrl(item),
                             iconClass: $options.getWidgetIconClass(item),
                             showTitle: $options.widgetShowTitle(item),
@@ -976,13 +1018,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               }, null, 8 /* PROPS */, ["widget", "unavailableText"])
                             ]),
                             _: 2 /* DYNAMIC */
-                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "iconUrl", "iconClass", "showTitle", "showActions", "buttons", "headerLink", "styleConfig", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "subtitle", "iconUrl", "iconClass", "showTitle", "showActions", "buttons", "headerLink", "styleConfig", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                         : ($options.registryRenderer(item))
                           ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
                               key: 8,
                               widgetId: item.widgetId,
                               title: $options.getWidgetTitle(item),
                               eyebrow: $options.getWidgetEyebrow(item),
+                              subtitle: $options.getWidgetSubtitle(item),
                               showTitle: $options.widgetShowTitle(item),
                               showActions: $options.widgetShowActions(item),
                               showRefresh: $options.getWidgetShowRefresh(item),
@@ -1015,7 +1058,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     name: "title-meta",
                                     fn: withCtx(() => [
                                       ($options.widgetHeaderCount(item) !== null)
-                                        ? (openBlock(), createElementBlock("span", _hoisted_28, toDisplayString($options.widgetHeaderCount(item)), 1 /* TEXT */))
+                                        ? (openBlock(), createElementBlock("span", _hoisted_31, toDisplayString($options.widgetHeaderCount(item)), 1 /* TEXT */))
                                         : createCommentVNode("v-if", true),
                                       ($options.dateRangeEnabled && item.dateChip === true)
                                         ? (openBlock(), createBlock(_component_NcActions, {
@@ -1031,7 +1074,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                               createElementVNode("span", {
                                                 class: "cn-dashboard-page__date-chip",
                                                 title: $data.dateChipTitle
-                                              }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_29)
+                                              }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_32)
                                             ]),
                                             default: withCtx(() => [
                                               (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
@@ -1046,7 +1089,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                           key: 0,
                                                           size: 16
                                                         }))
-                                                      : (openBlock(), createElementBlock("span", _hoisted_30))
+                                                      : (openBlock(), createElementBlock("span", _hoisted_33))
                                                   ]),
                                                   default: withCtx(() => [
                                                     createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
@@ -1082,7 +1125,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     name: "actions",
                                     fn: withCtx(() => [
                                       ($options.widgetHeaderNote(item))
-                                        ? (openBlock(), createElementBlock("span", _hoisted_31, toDisplayString($options.widgetHeaderNote(item)), 1 /* TEXT */))
+                                        ? (openBlock(), createElementBlock("span", _hoisted_34, toDisplayString($options.widgetHeaderNote(item)), 1 /* TEXT */))
                                         : createCommentVNode("v-if", true),
                                       ($options.widgetHeaderAction(item))
                                         ? (openBlock(), createElementBlock("button", {
@@ -1091,25 +1134,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                             class: "cn-dashboard-page__widget-action",
                                             "data-testid": "cn-dashboard-widget-header-action",
                                             onClick: $event => ($options.widgetHeaderAction(item).run())
-                                          }, toDisplayString($options.widgetHeaderAction(item).label), 9 /* TEXT, PROPS */, _hoisted_32))
+                                          }, toDisplayString($options.widgetHeaderAction(item).label), 9 /* TEXT, PROPS */, _hoisted_35))
                                         : createCommentVNode("v-if", true)
                                     ]),
                                     key: "1"
                                   }
                                 : undefined
-                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "showTitle", "showActions", "showRefresh", "borderless", "flush", "titleIconPosition", "titleIconColor", "titleIconVariant", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "eyebrow", "subtitle", "showTitle", "showActions", "showRefresh", "borderless", "flush", "titleIconPosition", "titleIconColor", "titleIconVariant", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
                           : (openBlock(), createBlock(_component_CnWidgetWrapper, {
                               key: 9,
                               title: $options.getWidgetTitle(item),
                               eyebrow: $options.getWidgetEyebrow(item),
+                              subtitle: $options.getWidgetSubtitle(item),
                               showTitle: $options.widgetShowTitle(item),
                               showRefresh: false
                             }, {
                               default: withCtx(() => [
-                                createElementVNode("div", _hoisted_33, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
+                                createElementVNode("div", _hoisted_36, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
                               ]),
                               _: 1 /* STABLE */
-                            }, 8 /* PROPS */, ["title", "eyebrow", "showTitle"]))
+                            }, 8 /* PROPS */, ["title", "eyebrow", "subtitle", "showTitle"]))
         ]),
         _: 3 /* FORWARDED */
       }, 16 /* FULL_PROPS */, ["layout", "editable", "columns", "columnOpts", "cellHeight", "margin", "float", "onLayoutChange"]))
@@ -1129,7 +1173,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1 /* STABLE */
           }, 8 /* PROPS */, ["description"])
-        ], 8 /* PROPS */, _hoisted_34))
+        ], 8 /* PROPS */, _hoisted_37))
       : createCommentVNode("v-if", true),
     ($options.hasBodyWidgets)
       ? (openBlock(), createBlock(_component_CnBodySections, {
@@ -1160,7 +1204,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onClose: _cache[10] || (_cache[10] = $event => ($data.showWidgetConfig = false))
         }, null, 8 /* PROPS */, ["show", "widget", "onSave", "onDelete"]))
       : createCommentVNode("v-if", true)
-  ], 2 /* CLASS */))
+  ], 6 /* CLASS, STYLE */))
 }
 
 export { render };