@conduction/nextcloud-vue 2.58.0 → 2.60.0

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

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createElementVNode, createBlock, createVNode, withCtx, createTextVNode, createSlots, Fragment, renderList, normalizeClass } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createElementVNode, createBlock, Fragment, renderList, createVNode, withCtx, createTextVNode, createSlots } from 'vue';
 
 const _hoisted_1 = ["href"];
 const _hoisted_2 = {
@@ -10,101 +10,109 @@ const _hoisted_3 = { class: "cn-detail-page__header-left" };
 const _hoisted_4 = { class: "cn-detail-page__header-text" };
 const _hoisted_5 = {
   key: 0,
-  class: "cn-detail-page__type-eyebrow",
-  "data-testid": "cn-detail-page-type-eyebrow"
+  class: "cn-detail-page__pills",
+  "data-testid": "cn-detail-page-pills"
 };
 const _hoisted_6 = {
   key: 1,
-  class: "cn-detail-page__title"
+  class: "cn-detail-page__type-eyebrow",
+  "data-testid": "cn-detail-page-type-eyebrow"
 };
 const _hoisted_7 = {
   key: 2,
+  class: "cn-detail-page__title"
+};
+const _hoisted_8 = {
+  key: 3,
   class: "cn-detail-page__description"
 };
-const _hoisted_8 = { class: "cn-detail-page__header-actions" };
-const _hoisted_9 = {
+const _hoisted_9 = { class: "cn-detail-page__header-actions" };
+const _hoisted_10 = {
   key: 0,
   class: "cn-detail-page__list-nav",
   "data-testid": "cn-detail-page-list-nav"
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   class: "cn-detail-page__list-nav-position",
   "data-testid": "cn-detail-page-list-position"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
   key: 3,
   class: "cn-detail-page__lock-refusal",
   role: "alert",
   "data-testid": "cn-detail-page-lock-refusal"
 };
-const _hoisted_12 = {
-  key: 4,
-  class: "cn-detail-page__not-found",
-  "data-testid": "cn-detail-page-not-found"
-};
 const _hoisted_13 = {
   key: 5,
-  class: "cn-detail-page__loading"
+  class: "cn-detail-page__not-found",
+  "data-testid": "cn-detail-page-not-found"
 };
 const _hoisted_14 = {
   key: 6,
-  class: "cn-detail-page__error"
+  class: "cn-detail-page__loading"
 };
 const _hoisted_15 = {
   key: 7,
-  class: "cn-detail-page__empty"
+  class: "cn-detail-page__error"
 };
 const _hoisted_16 = {
   key: 8,
-  class: "cn-detail-page__body"
+  class: "cn-detail-page__empty"
 };
 const _hoisted_17 = {
+  key: 9,
+  class: "cn-detail-page__body"
+};
+const _hoisted_18 = {
   key: 0,
   class: "cn-detail-page__before-body"
 };
-const _hoisted_18 = ["aria-labelledby"];
-const _hoisted_19 = {
+const _hoisted_19 = ["aria-labelledby"];
+const _hoisted_20 = {
   key: 0,
   class: "cn-detail-page__widget-edit"
 };
-const _hoisted_20 = ["id"];
-const _hoisted_21 = {
+const _hoisted_21 = ["id"];
+const _hoisted_22 = {
   key: 3,
   class: "cn-detail-page__stats"
 };
-const _hoisted_22 = {
+const _hoisted_23 = {
   key: 0,
   class: "cn-detail-page__section-title"
 };
-const _hoisted_23 = { class: "cn-detail-page__stats-table" };
-const _hoisted_24 = { key: 0 };
-const _hoisted_25 = {
+const _hoisted_24 = { class: "cn-detail-page__stats-table" };
+const _hoisted_25 = { key: 0 };
+const _hoisted_26 = {
   key: 4,
   class: "cn-detail-page__content"
 };
-const _hoisted_26 = {
+const _hoisted_27 = {
   key: 0,
   class: "cn-detail-page__content"
 };
-const _hoisted_27 = {
+const _hoisted_28 = {
   key: 1,
   class: "cn-detail-page__sections"
 };
-const _hoisted_28 = {
+const _hoisted_29 = {
   key: 6,
   class: "cn-detail-page__related-collections"
 };
-const _hoisted_29 = {
+const _hoisted_30 = {
   key: 0,
   class: "cn-detail-page__relation-links"
 };
-const _hoisted_30 = {
+const _hoisted_31 = {
   key: 9,
   class: "cn-detail-page__footer"
 };
+const _hoisted_32 = ["aria-label"];
+const _hoisted_33 = ["data-testid"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CnIcon = resolveComponent("CnIcon");
+  const _component_CnStatusBadge = resolveComponent("CnStatusBadge");
   const _component_CnTranslatedBadge = resolveComponent("CnTranslatedBadge");
   const _component_CnSummaryAggregates = resolveComponent("CnSummaryAggregates");
   const _component_ChevronLeft = resolveComponent("ChevronLeft");
@@ -114,11 +122,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CnActionButtons = resolveComponent("CnActionButtons");
   const _component_Pencil = resolveComponent("Pencil");
   const _component_CnBuildiqEditButton = resolveComponent("CnBuildiqEditButton");
+  const _component_NcActionSeparator = resolveComponent("NcActionSeparator");
+  const _component_NcActionCaption = resolveComponent("NcActionCaption");
   const _component_NcActionLink = resolveComponent("NcActionLink");
   const _component_NcActionButton = resolveComponent("NcActionButton");
-  const _component_NcActionSeparator = resolveComponent("NcActionSeparator");
   const _component_CnActionsMenu = resolveComponent("CnActionsMenu");
   const _component_CnLockedBanner = resolveComponent("CnLockedBanner");
+  const _component_CnNextStepCard = resolveComponent("CnNextStepCard");
   const _component_FileQuestionOutline = resolveComponent("FileQuestionOutline");
   const _component_ArrowLeft = resolveComponent("ArrowLeft");
   const _component_NcEmptyContent = resolveComponent("NcEmptyContent");
@@ -137,11 +147,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CnRelationLinkModal = resolveComponent("CnRelationLinkModal");
 
   return (openBlock(), createElementBlock("div", {
-    class: "cn-detail-page",
+    class: normalizeClass(["cn-detail-page", { 'cn-detail-page--with-side': $options.showsSideColumn }]),
     "data-testid": "cn-detail-page",
     style: normalizeStyle({ maxWidth: $props.maxWidth })
   }, [
-    ($options.primaryActionLabel && !$data.objectNotFound)
+    ($options.effectivePrimaryLabel && !$data.objectNotFound)
       ? (openBlock(), createElementBlock("a", {
           key: 0,
           href: `#${$options.primaryActionAnchorId}`,
@@ -170,11 +180,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   : createCommentVNode("v-if", true)
               ]),
               createElementVNode("div", _hoisted_4, [
+                ($options.headerPills.length > 0)
+                  ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList($options.headerPills, (pill) => {
+                        return (openBlock(), createBlock(_component_CnStatusBadge, {
+                          key: pill.key,
+                          label: pill.label,
+                          colorKey: pill.colorKey,
+                          colorMap: pill.colorMap,
+                          variant: pill.variant,
+                          "data-testid": `cn-detail-page-pill-${pill.key}`
+                        }, null, 8 /* PROPS */, ["label", "colorKey", "colorMap", "variant", "data-testid"]))
+                      }), 128 /* KEYED_FRAGMENT */))
+                    ]))
+                  : createCommentVNode("v-if", true),
                 ($options.typeEyebrow)
-                  ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($options.typeEyebrow), 1 /* TEXT */))
+                  ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString($options.typeEyebrow), 1 /* TEXT */))
                   : createCommentVNode("v-if", true),
                 ($options.displayTitle)
-                  ? (openBlock(), createElementBlock("h2", _hoisted_6, toDisplayString($options.displayTitle), 1 /* TEXT */))
+                  ? (openBlock(), createElementBlock("h2", _hoisted_7, toDisplayString($options.displayTitle), 1 /* TEXT */))
                   : createCommentVNode("v-if", true),
                 renderSlot(_ctx.$slots, "translation-badge", { object: $options.resolvedObject }, () => [
                   ($options.resolvedObject)
@@ -185,20 +209,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     : createCommentVNode("v-if", true)
                 ]),
                 ($props.description)
-                  ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString($options.resolvedDescription), 1 /* TEXT */))
+                  ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString($options.resolvedDescription), 1 /* TEXT */))
                   : createCommentVNode("v-if", true),
                 ($props.summaryAggregates && $props.summaryAggregates.length > 0)
                   ? (openBlock(), createBlock(_component_CnSummaryAggregates, {
-                      key: 3,
+                      key: 4,
                       aggregates: $props.summaryAggregates
                     }, null, 8 /* PROPS */, ["aggregates"]))
                   : createCommentVNode("v-if", true)
               ])
             ])
           ]),
-          createElementVNode("div", _hoisted_8, [
+          createElementVNode("div", _hoisted_9, [
             ($props.listNavigation && $props.listNavigation.available)
-              ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              ? (openBlock(), createElementBlock("div", _hoisted_10, [
                   createVNode(_component_NcButton, {
                     variant: "tertiary",
                     disabled: $props.listNavigation.isFirst,
@@ -213,7 +237,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     ]),
                     _: 1 /* STABLE */
                   }, 8 /* PROPS */, ["disabled", "to", "aria-label", "title"]),
-                  createElementVNode("span", _hoisted_10, toDisplayString($options.listPositionLabel), 1 /* TEXT */),
+                  createElementVNode("span", _hoisted_11, toDisplayString($options.listPositionLabel), 1 /* TEXT */),
                   createVNode(_component_NcButton, {
                     variant: "tertiary",
                     disabled: $props.listNavigation.isLast,
@@ -230,21 +254,53 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   }, 8 /* PROPS */, ["disabled", "to", "aria-label", "title"])
                 ]))
               : createCommentVNode("v-if", true),
-            ($options.primaryActionLabel)
+            ($options.effectivePrimaryLabel && !$options.showsNextStepCard)
               ? (openBlock(), createBlock(_component_NcButton, {
                   key: 1,
                   id: $options.primaryActionAnchorId,
                   ref: "primaryActionButton",
                   variant: "primary",
+                  href: $options.primaryActionHref || undefined,
+                  target: $options.primaryActionHref ? $options.primaryActionTarget : undefined,
+                  disabled: $options.primaryActionDisabled,
                   "data-testid": "cn-detail-page-primary-action",
-                  onClick: _cache[3] || (_cache[3] = $event => (_ctx.$emit('primary-action', $props.primaryAction)))
+                  onClick: $options.onPrimaryActionClick
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString($options.primaryActionLabel), 1 /* TEXT */)
+                    createTextVNode(toDisplayString($options.effectivePrimaryLabel), 1 /* TEXT */)
                   ]),
                   _: 1 /* STABLE */
-                }, 8 /* PROPS */, ["id"]))
+                }, 8 /* PROPS */, ["id", "href", "target", "disabled", "onClick"]))
               : createCommentVNode("v-if", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList($options.quickActionEntries, (entry) => {
+              return (openBlock(), createBlock(_component_NcButton, {
+                key: `quick-${entry.id}`,
+                variant: "secondary",
+                href: entry.href || undefined,
+                target: entry.href ? (entry.linkTarget || undefined) : undefined,
+                disabled: entry.disabled,
+                "data-testid": `cn-detail-page-quick-${entry.id}`,
+                onClick: $event => ($options.onPinnedActionClick(entry))
+              }, createSlots({
+                default: withCtx(() => [
+                  createTextVNode(" " + toDisplayString(entry.label), 1 /* TEXT */)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, [
+                (entry.iconName)
+                  ? {
+                      name: "icon",
+                      fn: withCtx(() => [
+                        createVNode(_component_CnIcon, {
+                          name: entry.iconName,
+                          size: 20
+                        }, null, 8 /* PROPS */, ["name"])
+                      ]),
+                      key: "0"
+                    }
+                  : undefined
+              ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["href", "target", "disabled", "data-testid", "onClick"]))
+            }), 128 /* KEYED_FRAGMENT */)),
             ($options.showsLifecycleActions)
               ? (openBlock(), createBlock(_component_CnLifecycleActions, {
                   key: 2,
@@ -253,7 +309,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   config: $props.lifecycleActions,
                   schema: $options.currentSchema,
                   display: "menu",
-                  onEntries: _cache[4] || (_cache[4] = $event => ($data.lifecycleMenuEntries = $event)),
+                  onEntries: _cache[3] || (_cache[3] = $event => ($data.lifecycleMenuEntries = $event)),
                   onTransitioned: $options.onTransitioned,
                   onReload: $options.onLifecycleReload
                 }, null, 8 /* PROPS */, ["objectId", "object", "config", "schema", "onTransitioned", "onReload"]))
@@ -264,7 +320,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   actions: $options.effectiveHeaderActions,
                   display: "menu",
                   "data-testid": "cn-detail-page-header-actions",
-                  onEntries: _cache[5] || (_cache[5] = $event => ($data.menuHeaderActions = $event)),
+                  onEntries: _cache[4] || (_cache[4] = $event => ($data.menuHeaderActions = $event)),
                   onCreated: $options.onLifecycleReload
                 }, null, 8 /* PROPS */, ["actions", "onCreated"]))
               : createCommentVNode("v-if", true),
@@ -296,11 +352,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("v-if", true),
             createVNode(_component_CnBuildiqEditButton),
             createVNode(_component_CnActionsMenu, {
-              showRefresh: $options.effectiveHeaderShowRefresh,
+              showRefresh: $options.menuShowsRefresh,
               refreshing: $options.effectiveRefreshing,
-              showRequestFeature: $props.showRequestFeature,
-              showReportBug: $props.showReportBug,
-              showDocumentation: $props.showDocumentation,
+              showRequestFeature: $props.showRequestFeature && $options.menuShowsHelpLinks,
+              showReportBug: $props.showReportBug && $options.menuShowsHelpLinks,
+              showDocumentation: $props.showDocumentation && $options.menuShowsHelpLinks,
+              actionsMenuLabel: $options.actionsMenuName,
+              hasPrimaryItems: $options.headerMenuGroups.length > 0,
               documentationUrl: $props.documentationUrl,
               docsAnchor: $options.resolvedPageId,
               documentationLabel: $props.documentationLabel || undefined,
@@ -312,83 +370,101 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onRefresh: $options.onHeaderRefresh,
               onRequestFeature: $options.onHeaderRequestFeature
             }, createSlots({ _: 2 /* DYNAMIC */ }, [
-              ($options.headerMenuEntries.length)
+              ($options.headerMenuGroups.length)
                 ? {
                     name: "primary-items",
                     fn: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList($options.headerMenuEntries, (entry) => {
+                      (openBlock(true), createElementBlock(Fragment, null, renderList($options.headerMenuGroups, (group, groupIndex) => {
                         return (openBlock(), createElementBlock(Fragment, null, [
-                          (entry.href)
-                            ? (openBlock(), createBlock(_component_NcActionLink, {
-                                key: `${entry.id}-link`,
-                                href: entry.href,
-                                target: entry.linkTarget || undefined,
-                                "data-testid": entry.testid
-                              }, createSlots({
-                                default: withCtx(() => [
-                                  createTextVNode(" " + toDisplayString(entry.label), 1 /* TEXT */)
-                                ]),
-                                _: 2 /* DYNAMIC */
-                              }, [
-                                (entry.iconName || entry.iconClass)
-                                  ? {
-                                      name: "icon",
-                                      fn: withCtx(() => [
-                                        (entry.iconName)
-                                          ? (openBlock(), createBlock(_component_CnIcon, {
-                                              key: 0,
-                                              name: entry.iconName,
-                                              size: 20
-                                            }, null, 8 /* PROPS */, ["name"]))
-                                          : (openBlock(), createElementBlock("span", {
-                                              key: 1,
-                                              class: normalizeClass(entry.iconClass)
-                                            }, null, 2 /* CLASS */))
-                                      ]),
-                                      key: "0"
-                                    }
-                                  : undefined
-                              ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["href", "target", "data-testid"]))
-                            : (openBlock(), createBlock(_component_NcActionButton, {
-                                key: entry.id,
-                                "data-testid": entry.testid,
-                                disabled: entry.disabled,
-                                "aria-pressed": entry.pressed === null ? null : String(entry.pressed),
-                                closeAfterClick: true,
-                                onClick: $event => (entry.run())
-                              }, createSlots({
-                                default: withCtx(() => [
-                                  createTextVNode(" " + toDisplayString(entry.label), 1 /* TEXT */)
-                                ]),
-                                _: 2 /* DYNAMIC */
-                              }, [
-                                (entry.iconName || entry.iconClass)
-                                  ? {
-                                      name: "icon",
-                                      fn: withCtx(() => [
-                                        (entry.iconName)
-                                          ? (openBlock(), createBlock(_component_CnIcon, {
-                                              key: 0,
-                                              name: entry.iconName,
-                                              size: 20
-                                            }, null, 8 /* PROPS */, ["name"]))
-                                          : (openBlock(), createElementBlock("span", {
-                                              key: 1,
-                                              class: normalizeClass(entry.iconClass)
-                                            }, null, 2 /* CLASS */))
-                                      ]),
-                                      key: "0"
-                                    }
-                                  : undefined
-                              ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["data-testid", "disabled", "aria-pressed", "onClick"]))
+                          (groupIndex > 0)
+                            ? (openBlock(), createBlock(_component_NcActionSeparator, {
+                                key: `${group.key}-separator`
+                              }))
+                            : createCommentVNode("v-if", true),
+                          (group.label)
+                            ? (openBlock(), createBlock(_component_NcActionCaption, {
+                                key: `${group.key}-caption`,
+                                name: group.label,
+                                "data-testid": `cn-detail-page-action-group-${group.key}`
+                              }, null, 8 /* PROPS */, ["name", "data-testid"]))
+                            : createCommentVNode("v-if", true),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(group.entries, (entry) => {
+                            return (openBlock(), createElementBlock(Fragment, null, [
+                              (entry.href)
+                                ? (openBlock(), createBlock(_component_NcActionLink, {
+                                    key: `${entry.id}-link`,
+                                    href: entry.href,
+                                    target: entry.linkTarget || undefined,
+                                    "data-testid": entry.testid
+                                  }, createSlots({
+                                    default: withCtx(() => [
+                                      createTextVNode(" " + toDisplayString(entry.label), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, [
+                                    (entry.iconName || entry.iconClass)
+                                      ? {
+                                          name: "icon",
+                                          fn: withCtx(() => [
+                                            (entry.iconName)
+                                              ? (openBlock(), createBlock(_component_CnIcon, {
+                                                  key: 0,
+                                                  name: entry.iconName,
+                                                  size: 20
+                                                }, null, 8 /* PROPS */, ["name"]))
+                                              : (openBlock(), createElementBlock("span", {
+                                                  key: 1,
+                                                  class: normalizeClass(entry.iconClass)
+                                                }, null, 2 /* CLASS */))
+                                          ]),
+                                          key: "0"
+                                        }
+                                      : undefined
+                                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["href", "target", "data-testid"]))
+                                : (openBlock(), createBlock(_component_NcActionButton, {
+                                    key: entry.id,
+                                    "data-testid": entry.testid,
+                                    disabled: entry.disabled,
+                                    "aria-pressed": entry.pressed === null ? null : String(entry.pressed),
+                                    closeAfterClick: true,
+                                    onClick: $event => (entry.run())
+                                  }, createSlots({
+                                    default: withCtx(() => [
+                                      createTextVNode(" " + toDisplayString(entry.label), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, [
+                                    (entry.iconName || entry.iconClass)
+                                      ? {
+                                          name: "icon",
+                                          fn: withCtx(() => [
+                                            (entry.iconName)
+                                              ? (openBlock(), createBlock(_component_CnIcon, {
+                                                  key: 0,
+                                                  name: entry.iconName,
+                                                  size: 20
+                                                }, null, 8 /* PROPS */, ["name"]))
+                                              : (openBlock(), createElementBlock("span", {
+                                                  key: 1,
+                                                  class: normalizeClass(entry.iconClass)
+                                                }, null, 2 /* CLASS */))
+                                          ]),
+                                          key: "0"
+                                        }
+                                      : undefined
+                                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["data-testid", "disabled", "aria-pressed", "onClick"]))
+                            ], 64 /* STABLE_FRAGMENT */))
+                          }), 256 /* UNKEYED_FRAGMENT */))
                         ], 64 /* STABLE_FRAGMENT */))
                       }), 256 /* UNKEYED_FRAGMENT */)),
-                      createVNode(_component_NcActionSeparator)
+                      ($options.menuShowsHelpLinks)
+                        ? (openBlock(), createBlock(_component_NcActionSeparator, { key: 0 }))
+                        : createCommentVNode("v-if", true)
                     ]),
                     key: "0"
                   }
                 : undefined
-            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["showRefresh", "refreshing", "showRequestFeature", "showReportBug", "showDocumentation", "documentationUrl", "docsAnchor", "documentationLabel", "widgetId", "title", "surface", "onRefresh", "onRequestFeature"])
+            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["showRefresh", "refreshing", "showRequestFeature", "showReportBug", "showDocumentation", "actionsMenuLabel", "hasPrimaryItems", "documentationUrl", "docsAnchor", "documentationLabel", "widgetId", "title", "surface", "onRefresh", "onRequestFeature"])
           ])
         ]))
       : createCommentVNode("v-if", true),
@@ -403,10 +479,45 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["lockedBy", "lockedByMe", "expiresAt", "unlocking", "onUnlock"]))
       : createCommentVNode("v-if", true),
     ($data.editLockRefusal)
-      ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString($data.editLockRefusal), 1 /* TEXT */))
+      ? (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString($data.editLockRefusal), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    ($options.showsNextStepCard)
+      ? (openBlock(), createBlock(_component_CnNextStepCard, {
+          key: 4,
+          class: "cn-detail-page__next-step",
+          title: $options.nextStepCard.title,
+          titleTag: "h3",
+          items: $options.nextStepCard.items,
+          after: $options.nextStepCard.after,
+          "data-testid": "cn-detail-page-next-step"
+        }, createSlots({ _: 2 /* DYNAMIC */ }, [
+          ($options.effectivePrimaryLabel)
+            ? {
+                name: "action",
+                fn: withCtx(() => [
+                  createVNode(_component_NcButton, {
+                    id: $options.primaryActionAnchorId,
+                    ref: "primaryActionButton",
+                    variant: "primary",
+                    href: $options.primaryActionHref || undefined,
+                    target: $options.primaryActionHref ? $options.primaryActionTarget : undefined,
+                    disabled: $options.primaryActionDisabled,
+                    "data-testid": "cn-detail-page-primary-action",
+                    onClick: $options.onPrimaryActionClick
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString($options.effectivePrimaryLabel), 1 /* TEXT */)
+                    ]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["id", "href", "target", "disabled", "onClick"])
+                ]),
+                key: "0"
+              }
+            : undefined
+        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "items", "after"]))
       : createCommentVNode("v-if", true),
     ($data.objectNotFound)
-      ? (openBlock(), createElementBlock("div", _hoisted_12, [
+      ? (openBlock(), createElementBlock("div", _hoisted_13, [
           renderSlot(_ctx.$slots, "not-found", { target: $options.notFoundTarget }, () => [
             createVNode(_component_NcEmptyContent, {
               name: $options.notFoundLabels.name,
@@ -442,12 +553,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]))
       : ($options.showLoadingState)
-        ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        ? (openBlock(), createElementBlock("div", _hoisted_14, [
             createVNode(_component_NcLoadingIcon, { size: 32 }),
             createElementVNode("span", null, toDisplayString($props.loadingLabel), 1 /* TEXT */)
           ]))
         : ($props.error)
-          ? (openBlock(), createElementBlock("div", _hoisted_14, [
+          ? (openBlock(), createElementBlock("div", _hoisted_15, [
               renderSlot(_ctx.$slots, "error", {}, () => [
                 createVNode(_component_NcEmptyContent, { name: $props.errorMessage }, {
                   icon: withCtx(() => [
@@ -476,7 +587,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ]))
           : ($props.empty)
-            ? (openBlock(), createElementBlock("div", _hoisted_15, [
+            ? (openBlock(), createElementBlock("div", _hoisted_16, [
                 renderSlot(_ctx.$slots, "empty", {}, () => [
                   createVNode(_component_NcEmptyContent, { name: $props.emptyLabel }, {
                     icon: withCtx(() => [
@@ -489,9 +600,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   }, 8 /* PROPS */, ["name"])
                 ])
               ]))
-            : (openBlock(), createElementBlock("div", _hoisted_16, [
+            : (openBlock(), createElementBlock("div", _hoisted_17, [
                 (_ctx.$slots['before-body'] || _ctx.$slots['before-body'])
-                  ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                  ? (openBlock(), createElementBlock("div", _hoisted_18, [
                       renderSlot(_ctx.$slots, "before-body", {
                         object: $options.resolvedObject,
                         schema: $options.currentSchema,
@@ -526,7 +637,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           "aria-labelledby": $options.showGridTitle(item) ? `widget-title-${item.id}` : undefined
                         }, [
                           ($options.showsCog(item))
-                            ? (openBlock(), createElementBlock("div", _hoisted_19, [
+                            ? (openBlock(), createElementBlock("div", _hoisted_20, [
                                 createVNode(_component_NcButton, {
                                   variant: "tertiary",
                                   "aria-label": _ctx.t('nextcloud-vue', 'Configure widget'),
@@ -544,7 +655,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 key: 1,
                                 id: `widget-title-${item.id}`,
                                 class: "cn-detail-page__widget-title"
-                              }, toDisplayString($options.gridTitle(item)), 9 /* TEXT, PROPS */, _hoisted_20))
+                              }, toDisplayString($options.gridTitle(item)), 9 /* TEXT, PROPS */, _hoisted_21))
                             : createCommentVNode("v-if", true),
                           renderSlot(_ctx.$slots, `widget-${item.widgetId}`, {
                             item: item,
@@ -576,21 +687,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               onOpenIntegration: $options.onAutoBodyOpenIntegration
                             }, null, 8 /* PROPS */, ["widget", "showCardTitle", "objectId", "object", "objectType", "schemaObject", "register", "schema", "store", "surface", "integrationContext", "hideEmpty", "cnRegistry", "availableWidgets", "onGeoSaved", "onOpenIntegration"])
                           ])
-                        ], 10 /* CLASS, PROPS */, _hoisted_18)
+                        ], 10 /* CLASS, PROPS */, _hoisted_19)
                       ]),
                       _: 3 /* FORWARDED */
                     }, 8 /* PROPS */, ["layout", "editable", "columnOpts", "onLayoutChange"]))
                   : createCommentVNode("v-if", true),
                 ($options.hasStats)
-                  ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                  ? (openBlock(), createElementBlock("div", _hoisted_22, [
                       renderSlot(_ctx.$slots, "stats-header", {}, () => [
                         ($props.statsTitle)
-                          ? (openBlock(), createElementBlock("h3", _hoisted_22, toDisplayString($options.resolvedStatsTitle), 1 /* TEXT */))
+                          ? (openBlock(), createElementBlock("h3", _hoisted_23, toDisplayString($options.resolvedStatsTitle), 1 /* TEXT */))
                           : createCommentVNode("v-if", true)
                       ]),
-                      createElementVNode("table", _hoisted_23, [
+                      createElementVNode("table", _hoisted_24, [
                         ($props.statsColumns.length > 0)
-                          ? (openBlock(), createElementBlock("thead", _hoisted_24, [
+                          ? (openBlock(), createElementBlock("thead", _hoisted_25, [
                               createElementVNode("tr", null, [
                                 (openBlock(true), createElementBlock(Fragment, null, renderList($props.statsColumns, (col) => {
                                   return (openBlock(), createElementBlock("th", {
@@ -621,14 +732,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                       ])
                     ]))
-                  : (openBlock(), createElementBlock("div", _hoisted_25, [
+                  : (openBlock(), createElementBlock("div", _hoisted_26, [
                       (!$options.hasBodyGrid)
-                        ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                        ? (openBlock(), createElementBlock("div", _hoisted_27, [
                             renderSlot(_ctx.$slots, "default")
                           ]))
                         : createCommentVNode("v-if", true),
                       (_ctx.$slots.sections)
-                        ? (openBlock(), createElementBlock("div", _hoisted_27, [
+                        ? (openBlock(), createElementBlock("div", _hoisted_28, [
                             renderSlot(_ctx.$slots, "sections")
                           ]))
                         : createCommentVNode("v-if", true)
@@ -643,9 +754,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     }, null, 8 /* PROPS */, ["sections", "context"]))
                   : createCommentVNode("v-if", true),
                 (($props.relatedCollections && $props.relatedCollections.length > 0) || ($props.relationLinks && $props.relationLinks.length > 0))
-                  ? (openBlock(), createElementBlock("div", _hoisted_28, [
+                  ? (openBlock(), createElementBlock("div", _hoisted_29, [
                       ($props.relationLinks && $props.relationLinks.length > 0)
-                        ? (openBlock(), createElementBlock("div", _hoisted_29, [
+                        ? (openBlock(), createElementBlock("div", _hoisted_30, [
                             (openBlock(true), createElementBlock(Fragment, null, renderList($props.relationLinks, (link, li) => {
                               return (openBlock(), createBlock(_component_NcButton, {
                                 key: li,
@@ -692,20 +803,67 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     }, null, 8 /* PROPS */, ["sections", "context"]))
                   : createCommentVNode("v-if", true),
                 (_ctx.$slots.footer)
-                  ? (openBlock(), createElementBlock("div", _hoisted_30, [
+                  ? (openBlock(), createElementBlock("div", _hoisted_31, [
                       renderSlot(_ctx.$slots, "footer")
                     ]))
                   : createCommentVNode("v-if", true)
               ])),
+    ($options.showsSideColumn)
+      ? (openBlock(), createElementBlock("aside", {
+          key: 10,
+          class: "cn-detail-page__side",
+          "aria-label": $options.sideColumnLabel,
+          "data-testid": "cn-detail-page-side"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.sideColumnWidgets, (widget) => {
+            return (openBlock(), createElementBlock("div", {
+              key: `side-${widget.id}`,
+              class: "cn-detail-page__side-item",
+              "data-testid": `cn-detail-page-side-${widget.id}`
+            }, [
+              renderSlot(_ctx.$slots, `widget-${widget.id}`, {
+                item: { id: widget.id, widgetId: widget.id },
+                widget: widget,
+                objectId: $props.objectId,
+                object: $options.resolvedObject,
+                objectData: $options.resolvedObject,
+                objectType: $options.resolvedObjectType,
+                register: $props.register,
+                schema: $props.schema
+              }, () => [
+                createVNode(_component_CnDetailWidgetHost, {
+                  widget: widget,
+                  chrome: "card",
+                  showCardTitle: true,
+                  objectId: $props.objectId,
+                  object: $options.currentObject,
+                  objectType: $options.resolvedObjectType,
+                  schemaObject: $options.currentSchema,
+                  register: $props.register,
+                  schema: $props.schema,
+                  store: $options.effectiveObjectStore,
+                  surface: $props.surface,
+                  integrationContext: $options.effectiveIntegrationContext,
+                  hideEmpty: $props.hideEmpty,
+                  cnRegistry: $options.cnRegistry,
+                  availableWidgets: _ctx.widgets,
+                  onGeoSaved: $options.onGeoSaved,
+                  onOpenIntegration: $options.onAutoBodyOpenIntegration
+                }, null, 8 /* PROPS */, ["widget", "objectId", "object", "objectType", "schemaObject", "register", "schema", "store", "surface", "integrationContext", "hideEmpty", "cnRegistry", "availableWidgets", "onGeoSaved", "onOpenIntegration"])
+              ])
+            ], 8 /* PROPS */, _hoisted_33))
+          }), 128 /* KEYED_FRAGMENT */))
+        ], 8 /* PROPS */, _hoisted_32))
+      : createCommentVNode("v-if", true),
     ($data.showWidgetConfig)
       ? (openBlock(), createBlock(_component_CnWidgetStyleEditorModal, {
-          key: 9,
+          key: 11,
           show: $data.showWidgetConfig,
           widget: $options.configWidget,
           deletable: true,
           onSave: $options.onWidgetConfigSave,
           onDelete: $options.onWidgetConfigDelete,
-          onClose: _cache[6] || (_cache[6] = $event => ($data.showWidgetConfig = false))
+          onClose: _cache[5] || (_cache[5] = $event => ($data.showWidgetConfig = false))
         }, null, 8 /* PROPS */, ["show", "widget", "onSave", "onDelete"]))
       : createCommentVNode("v-if", true),
     renderSlot(_ctx.$slots, "form-dialog", {
@@ -752,7 +910,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     ($data.activeRelationLink)
       ? (openBlock(), createBlock(_component_CnRelationLinkModal, {
-          key: 10,
+          key: 12,
           title: $data.activeRelationLink.title || undefined,
           selectLabel: $data.activeRelationLink.selectLabel || undefined,
           register: $data.activeRelationLink.register,
@@ -763,10 +921,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           currentObject: $options.currentObject || {},
           fkField: $data.activeRelationLink.fkField,
           onLinked: $options.onRelationLinked,
-          onClose: _cache[7] || (_cache[7] = $event => ($data.activeRelationLink = null))
+          onClose: _cache[6] || (_cache[6] = $event => ($data.activeRelationLink = null))
         }, null, 8 /* PROPS */, ["title", "selectLabel", "register", "schema", "labelField", "allowCreate", "currentType", "currentObject", "fkField", "onLinked"]))
       : createCommentVNode("v-if", true)
-  ], 4 /* STYLE */))
+  ], 6 /* CLASS, STYLE */))
 }
 
 export { render };