npm - @conduction/nextcloud-vue - Versions diffs - 2.69.0 → 2.71.0 - Mend

@conduction/nextcloud-vue 2.69.0 → 2.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/esm/components/CnHeaderWidget/CnHeaderWidget.vue3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnHeaderWidget.vue3.js","sources":["../../../../src/components/CnHeaderWidget/CnHeaderWidget.vue?vue&type=template&id=1b97430f&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-header-widget\" :class=\"{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }\" :style=\"wrapperStyle\">\n\t\t<div\n\t\t\tv-if=\"hasOverlay\"\n\t\t\tclass=\"cn-header-widget__overlay\"\n\t\t\t:style=\"overlayStyle\"\n\t\t\taria-hidden=\"true\" />\n\t\t<div class=\"cn-header-widget__content\" :style=\"contentStyle\">\n\t\t\t<p\n\t\t\t\tv-if=\"dateLine\"\n\t\t\t\tclass=\"cn-header-widget__date\"\n\t\t\t\t:style=\"dateStyle\"\n\t\t\t\tdata-testid=\"cn-header-widget-date\">\n\t\t\t\t{{ dateLine }}\n\t\t\t</p>\n\t\t\t<h2 v-if=\"hasTitle\" class=\"cn-header-widget__title\" :style=\"textStyle\">\n\t\t\t\t{{ headingText }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"hasSubtitle\" class=\"cn-header-widget__subtitle\" :style=\"textStyle\">\n\t\t\t\t{{ subtitle }}\n\t\t\t</p>\n\t\t\t<a\n\t\t\t\tv-if=\"hasCta\"\n\t\t\t\t:href=\"ctaUrl\"\n\t\t\t\t:class=\"ctaClasses\"\n\t\t\t\t:target=\"ctaTarget\"\n\t\t\t\t:rel=\"ctaRel\"\n\t\t\t\t:aria-label=\"ctaAriaLabel\">\n\t\t\t\t{{ ctaLabel }}\n\t\t\t</a>\n\t\t</div>\n\t\t<!-- A view switch at the right of the heading (`content.views`): \"My\n\t\t work / My team\" as a segmented control whose options are routes,\n\t\t or views of the page the widget sits on (`option.view`); a view\n\t\t option controls the page's view region. -->\n\t\t<div v-if=\"viewOptions.length > 0\" class=\"cn-header-widget__views\">\n\t\t\t<CnSegmentedControl\n\t\t\t\t:options=\"viewOptions\"\n\t\t\t\t:modelValue=\"activeView\"\n\t\t\t\t:ariaLabel=\"viewsLabel\"\n\t\t\t\t:controls=\"viewsRegionId\"\n\t\t\t\tdata-testid=\"cn-header-widget-views\"\n\t\t\t\t@update:modelValue=\"onViewChange\" />\n\t\t</div>\n\t\t<img\n\t\t\tv-if=\"hasBackgroundImage\"\n\t\t\tclass=\"cn-header-widget__probe\"\n\t\t\t:src=\"backgroundImageUrl\"\n\t\t\talt=\"\"\n\t\t\taria-hidden=\"true\"\n\t\t\t@error=\"onImageError\">\n\t</div>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { getCanonicalLocale, translate as t } from '@nextcloud/l10n'\nimport CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\n\nconst ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']\nconst ALLOWED_HEIGHTS = ['small', 'medium', 'large', 'xlarge']\nconst ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']\nconst ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']\nconst ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']\n\n/** Marks a switch option that selects a page view rather than a route. /\nconst VIEW_OPTION_PREFIX = 'view:'\n\nconst HEIGHT_PIXELS = Object.freeze({\n\tsmall: 120,\n\tmedium: 200,\n\tlarge: 320,\n\txlarge: 480,\n})\n\nconst VERTICAL_ALIGN_FLEX = Object.freeze({\n\ttop: 'flex-start',\n\tmiddle: 'center',\n\tbottom: 'flex-end',\n})\n\n/\n CnHeaderWidget — full-width banner widget for dashboards. Renders a\n * configurable header with title, optional subtitle, optional background\n * image, optional colour overlay, and optional call-to-action button.\n \n Image source precedence: `backgroundImageFileId` takes priority over\n * `backgroundImageUrl` (resolved via the Nextcloud core preview route). When\n * the image fails to load the renderer silently falls back to the solid\n * `backgroundColor`; no error UI is shown.\n \n Height presets map to fixed pixels: small=120, medium=200, large=320,\n * xlarge=480. Title is `<h2>`, subtitle `<p>`, CTA `<a>` — all semantic HTML.\n * External CTA URLs (http/https) open in a new tab with\n * `rel=\"noopener noreferrer\"`; relative / anchor URLs stay in the current tab.\n \n Optional greeting: `greeting: true` makes the heading greet the signed-in\n * user by time of day and first name (\"Good afternoon, Pieter\"; `\"full\"` uses\n * the whole display name), and `showDate: true` adds a line with today's\n * date above it. `plain: true` drops the coloured background and aligns the\n * text to the start, which is how a greeting usually sits on a dashboard.\n \n ```json\n * { \"widgetKey\": \"header\", \"props\": { \"content\": { \"greeting\": true, \"showDate\": true, \"plain\": true } } }\n * ```\n \n Registered as the `header` dashboard widget type via the renderer's\n * `index.js`.\n /\nexport default {\n\tname: 'CnHeaderWidget',\n\n\tcomponents: { CnSegmentedControl },\n\n\tinject: {\n\t\t/\n\t\t Host translate function provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). The\n\t\t * manifest-authored `content.title` / `content.subtitle` / CTA label\n\t\t * are run through it. Defaults to an identity function so an\n\t\t * untranslated key renders as itself.\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/\n\t\t The views of the page this widget sits on, provided by\n\t\t * CnDashboardPage / CnDetailPage (`views`). An option with a `view`\n\t\t * selects one of them. Null outside such a page.\n\t\t /\n\t\tcnPageViews: { default: null },\n\t},\n\n\tprops: {\n\t\t/\n\t\t Persisted widget content: `{title, subtitle, backgroundImageUrl,\n\t\t * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,\n\t\t * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,\n\t\t * greeting, showDate, plain, ground, views}`. All fields are optional except\n\t\t * `title` (or `greeting`); unknown enum values collapse to documented\n\t\t * defaults and the renderer never throws. `views` is\n\t\t * `{ ariaLabel?, options: [{ label, route, params? } \| { label, view }] }`:\n\t\t * a segmented control at the right of the heading whose checked option\n\t\t * is the current route; choosing another pushes its route. An option\n\t\t * with `view` selects that view of the page the widget sits on (the\n\t\t * page's `views`) instead, and the page then draws no switch of its\n\t\t * own. `ground: true`\n\t\t * draws the greeting on the page ground: the plain look with no\n\t\t * padding, a 32px heading and the date line 6px above it (a dashboard\n\t\t * also drops the widget's card for it).\n\t\t \n\t\t @type {object}\n\t\t /\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/ eslint-disable vue/no-unused-properties -- part of the widget contract: CnContainerChild and the dashboard pages bind :placement on every widget, so declaring it keeps it out of $attrs /\n\t\t/\n\t\t Placement entity — reserved to match the renderer contract.\n\t\t \n\t\t @type {object}\n\t\t /\n\t\tplacement: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\t/ eslint-enable vue/no-unused-properties /\n\n\t\t/\n\t\t The moment the greeting and the date line are computed for. Leave\n\t\t * empty for the current time.\n\t\t \n\t\t @type {Date\|null}\n\t\t /\n\t\tnow: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t// Set true once the background image fires a DOM `error` so\n\t\t\t// subsequent renders fall back to `backgroundColor` only. The\n\t\t\t// probe `<img>` is invisible — its only job is load-failure\n\t\t\t// detection for the CSS background.\n\t\t\timageFailed: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Effective translate function: the injected `cnTranslate` (the host\n\t\t * app's bound `t()`), identity by default.\n\t\t \n\t\t @return {(key: string) => string}\n\t\t /\n\t\teffectiveTranslate() {\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key\n\t\t},\n\n\t\t/* The header title, translated, or '' when absent. /\n\t\ttitle() {\n\t\t\tconst value = this.content && this.content.title\n\t\t\treturn typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''\n\t\t},\n\n\t\t/* The header subtitle, translated, or '' when absent. /\n\t\tsubtitle() {\n\t\t\tconst value = this.content && this.content.subtitle\n\t\t\treturn typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''\n\t\t},\n\n\t\t/* Whether a heading renders: a non-empty title or a greeting. /\n\t\thasTitle() {\n\t\t\treturn this.headingText !== ''\n\t\t},\n\n\t\t/\n\t\t The moment the greeting and date line are computed for.\n\t\t \n\t\t @return {Date}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\treference() {\n\t\t\treturn this.now instanceof Date ? this.now : new Date()\n\t\t},\n\n\t\t/\n\t\t The view switch's options from `content.views.options`: each\n\t\t * `{ label, route, params? }` with a non-empty label and route becomes\n\t\t * a segmented-control option keyed on its route name (the label goes\n\t\t * through the host translate function). Empty without a router, so\n\t\t * the switch cannot offer routes it cannot follow.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {Array<{value: string, label: string}>}\n\t\t /\n\t\tviewOptions() {\n\t\t\tconst raw = this.content && this.content.views && this.content.views.options\n\t\t\tif (!Array.isArray(raw)) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tconst pageViewIds = this.pageViewIds\n\t\t\treturn raw\n\t\t\t\t.filter((o) => o && typeof o.label === 'string' && o.label !== '')\n\t\t\t\t.map((o) => {\n\t\t\t\t\tif (typeof o.view === 'string' && o.view !== '') {\n\t\t\t\t\t\treturn pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof o.route === 'string' && o.route !== '' && this.$router) {\n\t\t\t\t\t\treturn { value: o.route, label: this.cnTranslate(o.label) }\n\t\t\t\t\t}\n\t\t\t\t\treturn null\n\t\t\t\t})\n\t\t\t\t.filter(Boolean)\n\t\t},\n\n\t\t/\n\t\t The ids of the page's views, empty outside a page with views.\n\t\t \n\t\t @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views\n\t\t * @return {string[]}\n\t\t /\n\t\tpageViewIds() {\n\t\t\tconst views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []\n\t\t\treturn views.map((view) => view.id)\n\t\t},\n\n\t\t/\n\t\t The id of the page's view region when an option selects a view,\n\t\t * for the options' `aria-controls`; '' otherwise.\n\t\t \n\t\t @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible\n\t\t * @return {string}\n\t\t /\n\t\tviewsRegionId() {\n\t\t\tconst hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))\n\t\t\treturn hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId \|\| '') : ''\n\t\t},\n\n\t\t/\n\t\t The checked view: the option whose route is the current route, else\n\t\t * the first option (a switch always has one checked option).\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {string\|null}\n\t\t /\n\t\tactiveView() {\n\t\t\tconst options = this.viewOptions\n\t\t\tif (options.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst activeView = this.cnPageViews ? this.cnPageViews.activeId : null\n\t\t\tconst viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null\n\t\t\tif (viewMatch) {\n\t\t\t\treturn viewMatch.value\n\t\t\t}\n\t\t\tconst current = this.$route && this.$route.name\n\t\t\tconst match = options.find((o) => o.value === current)\n\t\t\treturn match ? match.value : options[0].value\n\t\t},\n\n\t\t/\n\t\t Accessible name of the view switch: `content.views.ariaLabel`\n\t\t * through the host translate function, else \"View\".\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {string}\n\t\t /\n\t\tviewsLabel() {\n\t\t\tconst label = this.content && this.content.views && this.content.views.ariaLabel\n\t\t\treturn label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')\n\t\t},\n\n\t\t/\n\t\t Whether the plain presentation is on (no coloured background).\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisPlain() {\n\t\t\treturn Boolean(this.content && (this.content.plain === true \|\| this.content.ground === true))\n\t\t},\n\n\t\t/\n\t\t Whether the greeting sits on the page ground (`content.ground`):\n\t\t * the plain look without the card padding, so the date line and the\n\t\t * heading align with the page edge as the board draws them. Off by\n\t\t * default.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground\n\t\t * @return {boolean}\n\t\t /\n\t\tisGround() {\n\t\t\treturn Boolean(this.content && this.content.ground === true)\n\t\t},\n\n\t\t/\n\t\t The name the greeting uses: the first word of the display name, or\n\t\t * the whole display name for `greeting: \"full\"`. '' when unknown.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tgreetingName() {\n\t\t\tlet user\n\t\t\ttry {\n\t\t\t\tuser = getCurrentUser()\n\t\t\t} catch {\n\t\t\t\tuser = null\n\t\t\t}\n\t\t\tconst displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''\n\t\t\tif (displayName === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn this.content.greeting === 'full' ? displayName : displayName.split(/\\s+/)[0]\n\t\t},\n\n\t\t/\n\t\t The greeting for the time of day, with the user's name when known,\n\t\t * or '' when the greeting is off.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tgreetingText() {\n\t\t\tconst greeting = this.content && this.content.greeting\n\t\t\tif (greeting !== true && greeting !== 'full' && greeting !== 'first') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst hour = this.reference.getHours()\n\t\t\tconst name = this.greetingName\n\t\t\tif (hour < 12) {\n\t\t\t\treturn name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')\n\t\t\t}\n\t\t\tif (hour < 18) {\n\t\t\t\treturn name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')\n\t\t\t}\n\t\t\treturn name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')\n\t\t},\n\n\t\t/\n\t\t The heading: the greeting when it is on, else the title.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\theadingText() {\n\t\t\treturn this.greetingText \|\| this.title\n\t\t},\n\n\t\t/\n\t\t Today's date written out (\"Monday 5 October 2026\"), or '' when\n\t\t * `showDate` is off.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tdateLine() {\n\t\t\tif (!this.content \|\| this.content.showDate !== true) {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }\n\t\t\tlet locale\n\t\t\ttry {\n\t\t\t\tlocale = getCanonicalLocale()\n\t\t\t} catch {\n\t\t\t\tlocale = undefined\n\t\t\t}\n\t\t\ttry {\n\t\t\t\treturn new Intl.DateTimeFormat(locale \|\| undefined, options).format(this.reference)\n\t\t\t} catch {\n\t\t\t\treturn new Intl.DateTimeFormat(undefined, options).format(this.reference)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Inline style of the date line: the heading's colour, or the muted\n\t\t * text colour on a plain header.\n\t\t \n\t\t @return {object}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tdateStyle() {\n\t\t\treturn {\n\t\t\t\tcolor: this.isPlain && !(this.content && this.content.textColor) ? 'var(--color-text-maxcontrast)' : this.textColor,\n\t\t\t\tmargin: 0,\n\t\t\t}\n\t\t},\n\n\t\t/* Whether a non-empty subtitle is set. /\n\t\thasSubtitle() {\n\t\t\treturn this.subtitle !== ''\n\t\t},\n\n\t\t/* Resolved background image URL (file id wins over URL). /\n\t\tbackgroundImageUrl() {\n\t\t\tconst fileId = this.content && this.content.backgroundImageFileId\n\t\t\tif (typeof fileId === 'number' && Number.isFinite(fileId) && fileId > 0) {\n\t\t\t\treturn `/index.php/core/preview?fileId=${fileId}&x=1024&y=512&a=1`\n\t\t\t}\n\t\t\tconst url = this.content && this.content.backgroundImageUrl\n\t\t\t// Accept http(s) plus uploaded/same-origin sources: data: and blob:\n\t\t\t// (from the form's upload) and root-relative paths (NC files/preview).\n\t\t\t// External http(s) images may still be blocked by the instance CSP —\n\t\t\t// uploading is the reliable, same-origin path. resolveImageUrl() adds\n\t\t\t// the webroot + /index.php to `/apps/...` resource paths so they load\n\t\t\t// on index.php-routed instances (other shapes pass through).\n\t\t\tif (typeof url === 'string' && /^(https?:\\/\\/\|data:\|blob:\|\\/)/i.test(url)) {\n\t\t\t\treturn resolveImageUrl(url)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\n\t\t/* Whether a usable, non-errored background image is present. /\n\t\thasBackgroundImage() {\n\t\t\treturn this.backgroundImageUrl !== '' && this.imageFailed === false\n\t\t},\n\n\t\t/\n\t\t Resolved background colour (default theme primary).\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tbackgroundColor() {\n\t\t\tconst value = this.content && this.content.backgroundColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tif (this.isPlain) {\n\t\t\t\treturn 'transparent'\n\t\t\t}\n\t\t\treturn 'var(--color-primary, #0070c0)'\n\t\t},\n\n\t\t/* Resolved overlay mode (`tint` when an image is present, else `none`). /\n\t\toverlayMode() {\n\t\t\tconst declared = this.content && this.content.overlayMode\n\t\t\tif (typeof declared === 'string' && ALLOWED_OVERLAY_MODES.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn this.hasBackgroundImage ? 'tint' : 'none'\n\t\t},\n\n\t\t/* Whether an overlay should render. /\n\t\thasOverlay() {\n\t\t\treturn this.overlayMode !== 'none'\n\t\t},\n\n\t\t/* Resolved overlay colour. /\n\t\toverlayColor() {\n\t\t\tconst value = this.content && this.content.overlayColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tconst bg = this.content && this.content.backgroundColor\n\t\t\treturn (typeof bg === 'string' && bg !== '') ? bg : '#000000'\n\t\t},\n\n\t\t/* Resolved overlay opacity, clamped to 0..1 (default 0.4). /\n\t\toverlayOpacity() {\n\t\t\tconst raw = this.content && this.content.overlayOpacity\n\t\t\tconst value = typeof raw === 'number' ? raw : Number.parseFloat(raw)\n\t\t\tif (Number.isFinite(value) === false) {\n\t\t\t\treturn 0.4\n\t\t\t}\n\t\t\tif (value < 0) {\n\t\t\t\treturn 0\n\t\t\t}\n\t\t\tif (value > 1) {\n\t\t\t\treturn 1\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\n\t\t/* Resolved height preset key (default `medium`). /\n\t\theight() {\n\t\t\tconst declared = this.content && this.content.height\n\t\t\tif (typeof declared === 'string' && ALLOWED_HEIGHTS.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn 'medium'\n\t\t},\n\n\t\t/* The pixel height for the active preset. /\n\t\theightPixels() {\n\t\t\treturn HEIGHT_PIXELS[this.height]\n\t\t},\n\n\t\t/\n\t\t Resolved text alignment (default `center`).\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\ttextAlign() {\n\t\t\tconst declared = this.content && this.content.textAlign\n\t\t\tif (typeof declared === 'string' && ALLOWED_TEXT_ALIGN.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn this.isPlain ? 'left' : 'center'\n\t\t},\n\n\t\t/* Resolved vertical alignment (default `middle`). /\n\t\tverticalAlign() {\n\t\t\tconst declared = this.content && this.content.verticalAlign\n\t\t\tif (typeof declared === 'string' && ALLOWED_VERTICAL_ALIGN.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn 'middle'\n\t\t},\n\n\t\t/\n\t\t Resolved text colour with an auto-contrast fallback.\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\ttextColor() {\n\t\t\tconst value = this.content && this.content.textColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tif (this.hasBackgroundImage) {\n\t\t\t\treturn '#ffffff'\n\t\t\t}\n\t\t\tif (this.isPlain && !(this.content && this.content.backgroundColor)) {\n\t\t\t\treturn 'var(--color-main-text)'\n\t\t\t}\n\t\t\treturn this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'\n\t\t},\n\n\t\t/* Inline style for the banner wrapper. /\n\t\twrapperStyle() {\n\t\t\tconst style = {\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: '100%',\n\t\t\t\t// Fill the dashboard grid cell so the banner resizes with the\n\t\t\t\t// widget. A fixed pixel height ignored the cell, which made the\n\t\t\t\t// banner un-resizable and made it overflow/scroll inside a\n\t\t\t\t// smaller cell. The grid controls the size now.\n\t\t\t\theight: '100%',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\t'background-color': this.backgroundColor,\n\t\t\t}\n\t\t\tif (this.hasBackgroundImage) {\n\t\t\t\tstyle['background-image'] = `url(\"${this.backgroundImageUrl}\")`\n\t\t\t\tstyle['background-size'] = 'cover'\n\t\t\t\tstyle['background-position'] = 'center center'\n\t\t\t\tstyle['background-repeat'] = 'no-repeat'\n\t\t\t}\n\t\t\treturn style\n\t\t},\n\n\t\t/* Inline style for the overlay layer. /\n\t\toverlayStyle() {\n\t\t\tif (this.overlayMode === 'gradient-bottom') {\n\t\t\t\treturn {\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tinset: 0,\n\t\t\t\t\t'background-image': `linear-gradient(to bottom, transparent 50%, ${this.overlayColor} 100%)`,\n\t\t\t\t\t'pointer-events': 'none',\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tposition: 'absolute',\n\t\t\t\tinset: 0,\n\t\t\t\t'background-color': this.overlayColor,\n\t\t\t\topacity: String(this.overlayOpacity),\n\t\t\t\t'pointer-events': 'none',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Inline style for the content flex container.\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tcontentStyle() {\n\t\t\treturn {\n\t\t\t\tposition: 'relative',\n\t\t\t\t'z-index': 1,\n\t\t\t\t// Beside a view switch the content shares the row instead of\n\t\t\t\t// taking the whole width (see .cn-header-widget--with-views).\n\t\t\t\twidth: this.viewOptions.length > 0 ? 'auto' : '100%',\n\t\t\t\theight: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\t'flex-direction': 'column',\n\t\t\t\t'align-items': this.flexAlignFromTextAlign,\n\t\t\t\t'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],\n\t\t\t\t// Plain drops the coloured background, not the card padding:\n\t\t\t\t// at 0 the greeting sat flush against the card's left edge.\n\t\t\t\t// Ground has no card, so it has no padding either.\n\t\t\t\tpadding: this.isGround ? '0' : (this.isPlain ? '16px' : '16px 24px'),\n\t\t\t\t'box-sizing': 'border-box',\n\t\t\t\tgap: this.isGround ? '6px' : '8px',\n\t\t\t\t'text-align': this.textAlign,\n\t\t\t}\n\t\t},\n\n\t\t/* Flex cross-axis alignment derived from the text alignment. /\n\t\tflexAlignFromTextAlign() {\n\t\t\tif (this.textAlign === 'left') {\n\t\t\t\treturn 'flex-start'\n\t\t\t}\n\t\t\tif (this.textAlign === 'right') {\n\t\t\t\treturn 'flex-end'\n\t\t\t}\n\t\t\treturn 'center'\n\t\t},\n\n\t\t/* Inline style applying the resolved text colour. /\n\t\ttextStyle() {\n\t\t\treturn {\n\t\t\t\tcolor: this.textColor,\n\t\t\t\tmargin: 0,\n\t\t\t}\n\t\t},\n\n\t\t/* The validated CTA object, or null when incomplete. /\n\t\tcta() {\n\t\t\tconst raw = this.content && this.content.cta\n\t\t\tif (raw === null \|\| typeof raw !== 'object') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst label = typeof raw.label === 'string' ? raw.label.trim() : ''\n\t\t\tconst url = typeof raw.url === 'string' ? raw.url.trim() : ''\n\t\t\tif (label === '' \|\| url === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tlet style = raw.style\n\t\t\tif (typeof style !== 'string' \|\| ALLOWED_CTA_STYLES.includes(style) === false) {\n\t\t\t\tstyle = 'primary'\n\t\t\t}\n\t\t\treturn { label, url, style }\n\t\t},\n\n\t\t/* Whether a complete CTA is present. /\n\t\thasCta() {\n\t\t\treturn this.cta !== null\n\t\t},\n\n\t\t/* The CTA label, translated. /\n\t\tctaLabel() {\n\t\t\treturn this.hasCta && this.cta.label ? this.effectiveTranslate(this.cta.label) : ''\n\t\t},\n\n\t\t/* The CTA URL. /\n\t\tctaUrl() {\n\t\t\treturn this.hasCta ? this.cta.url : ''\n\t\t},\n\n\t\t/* Whether the CTA URL is an external http(s) link. /\n\t\tctaIsExternal() {\n\t\t\treturn this.hasCta && /^https?:\\/\\//i.test(this.ctaUrl)\n\t\t},\n\n\t\t/* The CTA anchor target (`_blank` for external links). /\n\t\tctaTarget() {\n\t\t\treturn this.ctaIsExternal ? '_blank' : null\n\t\t},\n\n\t\t/* The CTA anchor rel for external links. /\n\t\tctaRel() {\n\t\t\treturn this.ctaIsExternal ? 'noopener noreferrer' : null\n\t\t},\n\n\t\t/* The accessible CTA label, annotating external links. /\n\t\tctaAriaLabel() {\n\t\t\tif (this.hasCta === false) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.ctaIsExternal) {\n\t\t\t\treturn `${this.ctaLabel} (${t('nextcloud-vue', 'opens in new tab')})`\n\t\t\t}\n\t\t\treturn this.ctaLabel\n\t\t},\n\n\t\t/* The CTA class list (base + style modifier). /\n\t\tctaClasses() {\n\t\t\tif (this.hasCta === false) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t'cn-header-widget__cta',\n\t\t\t\t`cn-header-widget__cta--${this.cta.style}`,\n\t\t\t]\n\t\t},\n\t},\n\n\twatch: {\n\t\tbackgroundImageUrl() {\n\t\t\t// Re-arm the probe so a previously failing URL can recover when\n\t\t\t// the user edits the placement.\n\t\t\tthis.imageFailed = false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Follow the chosen view: push its route (with the option's `params`\n\t\t * when declared). Nothing happens for the route already shown.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @param {string} route The chosen option's route name.\n\t\t * @return {void}\n\t\t /\n\t\tonViewChange(route) {\n\t\t\tif (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {\n\t\t\t\tif (this.cnPageViews && typeof this.cnPageViews.select === 'function') {\n\t\t\t\t\tthis.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.$router \|\| !route \|\| route === (this.$route && this.$route.name)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst declared = (this.content.views.options \|\| []).find((o) => o && o.route === route) \|\| {}\n\t\t\tconst target = { name: route }\n\t\t\tif (declared.params && typeof declared.params === 'object') {\n\t\t\t\ttarget.params = declared.params\n\t\t\t}\n\t\t\tthis.$router.push(target)\n\t\t},\n\n\t\t/\n\t\t Mark the background image as broken so the renderer falls back to\n\t\t * the solid colour.\n\t\t \n\t\t @return {void}\n\t\t /\n\t\tonImageError() {\n\t\t\tthis.imageFailed = true\n\t\t},\n\n\t\t/\n\t\t Quick perceived-luminance check on a CSS hex colour. Returns true\n\t\t * for \"light\" (white text would be illegible). Non-hex colours\n\t\t * collapse to false (assume dark) — the safer default.\n\t\t \n\t\t @param {string} color the CSS colour value.\n\t\t * @return {boolean} true when the colour is perceived as light.\n\t\t /\n\t\tisLightColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tconst match = color.trim().match(/^#([0-9a-f]{6})$/i)\n\t\t\tif (!match) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tconst hex = match[1]\n\t\t\tconst r = Number.parseInt(hex.slice(0, 2), 16)\n\t\t\tconst g = Number.parseInt(hex.slice(2, 4), 16)\n\t\t\tconst b = Number.parseInt(hex.slice(4, 6), 16)\n\t\t\tconst luma = (0.299 r + 0.587 * g + 0.114 * b) / 255\n\t\t\treturn luma > 0.6\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-header-widget {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 120px;\n\tborder-radius: var(--border-radius-large, 8px);\n\toverflow: hidden;\n}\n\n.cn-header-widget--plain {\n\tmin-height: 0;\n\tborder-radius: 0;\n}\n\n/* With a view switch the heading and the switch share one row, the switch\n at the right and bottom-aligned with the heading; on a narrow card the\n switch wraps under it. /\n.cn-header-widget--with-views {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: calc(2 var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));\n}\n\n.cn-header-widget--with-views .cn-header-widget__content {\n\tflex: 1 1 320px;\n\twidth: auto;\n}\n\n.cn-header-widget__views {\n\tposition: relative;\n\tz-index: 1;\n\tflex: 0 0 auto;\n\tpadding: 16px;\n}\n\n/* On the page ground (`content.ground`): no card, so no inset around the\n view switch, and the heading at the board's 32px. */\n.cn-header-widget--ground .cn-header-widget__views {\n\tpadding: 0;\n}\n\n.cn-header-widget--ground .cn-header-widget__title {\n\tfont-size: var(--cn-header-ground-title-size, 32px);\n\tletter-spacing: -0.01em;\n}\n\n.cn-header-widget__date {\n\tfont-size: 14px;\n\tline-height: 1.4;\n\tmargin: 0;\n}\n\n.cn-header-widget__overlay {\n\tposition: absolute;\n\tinset: 0;\n}\n\n.cn-header-widget__content {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.cn-header-widget__title {\n\tfont-size: 28px;\n\tfont-weight: 700;\n\tline-height: 1.2;\n\tmargin: 0;\n}\n\n.cn-header-widget__subtitle {\n\tfont-size: 16px;\n\tline-height: 1.4;\n\tmargin: 0;\n\topacity: 0.95;\n}\n\n.cn-header-widget__cta {\n\tdisplay: inline-block;\n\tmargin-top: 8px;\n\tpadding: 10px 18px;\n\tborder-radius: var(--border-radius, 4px);\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-decoration: none;\n\tcursor: pointer;\n\ttransition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.cn-header-widget__cta:hover {\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.cn-header-widget__cta--primary {\n\tbackground-color: var(--color-primary, #0070c0);\n\tcolor: var(--color-primary-text, #ffffff);\n\tborder: 1px solid var(--color-primary, #0070c0);\n}\n\n.cn-header-widget__cta--secondary {\n\tbackground-color: var(--color-background-hover, rgba(255, 255, 255, 0.85));\n\tcolor: var(--color-main-text, #000000);\n\tborder: 1px solid var(--color-border, #cccccc);\n}\n\n.cn-header-widget__cta--ghost {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\tborder: 1px solid currentColor;\n}\n\n.cn-header-widget__probe {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\topacity: 0;\n\tpointer-events: none;\n\tinset-inline-start: -9999px;\n\ttop: -9999px;\n}\n\n@media print {\n\t.cn-header-widget {\n\t\tprint-color-adjust: exact;\n\t\t-webkit-print-color-adjust: exact;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode"],"mappings":";;;;;AA6C4B,EAAA,KAAA,EAAA,yBAAA;;;;;;;uBAlCzBA;IAAG,KAAK,EAAAC,cAAA,CAAA,CAAC,kBAAW,EAAA,EAAA,yBAAA,EAAA,QAAA,CAAA,OAAA,8BAAA,QAAA,CAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,CAAA,WAAA,CAAA,MAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAAA,IAAA,KAAA,iBAAA,QAAA,CAAA,YAAA,CAAA;;KAEnB,QAAA,CAAA,UAAA;sBADFD,kBAImB,CAAA,KAAA,EAAA;;AAFjB,UAAA,KAAI,EAAC,2BAAS;AACd,UAAA,KAAK,iBAAE,QAAY,CAAA,YAAA,CAAA;AACnB,UAAA,aAAU,EAAC,MAAM;;;IACjBE,kBAuBI,CAAA,KAAA,EAAA;AAvBD,MAAA,KAAK,EAAC,2BAA0B;AAAA,MAAA,KAAA,iBAAA,QAAA,CAAA,YAAA,CAAA;;OAEjC,QAAA,CAAA,QAAA;0CAKC,CAAA,GAAA,EAAA;;AAJH,YAAA,KAAK,EAAC,wBAAwB;AAC7B,YAAA,KAAK,iBAAE,QAAQ,CAAA,SAAA,CAAA;AAChB,YAAA,aAAG,EAAA,uBAAA;6BACA,QAAQ,CAAA,QAAA,CAAA,EAAA,CAAA,mBAAA;;OAET,QAAA,CAAA,QAAA;wBAAHF,kBAEK,CAAA,IAAA,EAAA;;AAFF,YAAA,KAAA,EAAA,yBAAA;AAAA,YAAA,KAAA,iBAAA,QAAA,CAAA,SAAA,CAAA;6BACF,QAAA,CAAA,WAAA,CAAA,EAAA,CAAA,mBAAA;;OAEQ,QAAK,CAAA,WAAA;0CAEV,CAAA,GAAA,EAAA;;AAFU,YAAA,KAAA,EAAA,4BAAA;AAAA,YAAA,KAAA,iBAAA,QAAA,CAAA,SAAA,CAAA;6BACV,QAAQ,CAAA,QAAA,CAAA,EAAA,CAAA,mBAAA;;OAGL,QAAM,CAAA,MAAA;0CAOT,CAAA,GAAA,EAAA;;AANF,YAAA,IAAI,EAAE,QAAM,CAAA,MAAA;AACZ,YAAA,KAAC,iBAAA,QAAA,CAAA,UAAA,CAAA;AACD,YAAA,MAAE,EAAA,QAAA,CAAA,SAAA;AACF,YAAA,GAAI,EAAC,QAAM,CAAA,MAAA;wBACD,EAAE,QAAY,CAAA,YAAA;6BACtB,QAAS,CAAA,QAAA,CAAA,EAAA,EAAA,2BAAA,UAAA,CAAA;;;AAOH,IAAA,CAAA,QAAA,CAAA,WAAW,CAAC,MAAG,GAAA,CAAA;yCAQpB,iBAAA,EAAA;UAPJG,WAMuB,CAAA,6BAAA,EAAA;AALtB,YAAA,OAAO,EAAE,QAAW,CAAA,WAAA;AACpB,YAAA,UAAE,EAAA,QAAA,CAAA,UAAA;AACF,YAAA,SAAA,EAAA,QAAA,CAAA,UAAA;AACA,YAAA,QAAQ,EAAE,QAAY,CAAA,aAAA;AACvB,YAAA,aAAW,EAAC,wBAAiB;AAC5B,YAAA,qBAAiB,EAAE,QAAG,CAAA,YAAA;;;;KAGlB,QAAe,CAAA,kBAAA;sBADrBH;;AAEA,UAAA,KAAG,EAAA,yBAAA;;;;;;;;;;;;"}
1	+ {"version":3,"file":"CnHeaderWidget.vue3.js","sources":["../../../../src/components/CnHeaderWidget/CnHeaderWidget.vue?vue&type=template&id=1b97430f&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-header-widget\" :class=\"{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0, 'cn-header-widget--with-emblem': emblem !== null }\" :style=\"wrapperStyle\">\n\t\t<div\n\t\t\tv-if=\"hasOverlay\"\n\t\t\tclass=\"cn-header-widget__overlay\"\n\t\t\t:style=\"overlayStyle\"\n\t\t\taria-hidden=\"true\" />\n\t\t<!-- The emblem beside the greeting (`content.emblem`): a URL, or\n\t\t `true` for the theme's emblem (--nldesign-emblem-url). Decoration. -->\n\t\t<img\n\t\t\tv-if=\"emblem && emblem !== true\"\n\t\t\tclass=\"cn-header-widget__emblem\"\n\t\t\t:src=\"emblem\"\n\t\t\talt=\"\"\n\t\t\tdata-testid=\"cn-header-widget-emblem\">\n\t\t<span\n\t\t\tv-else-if=\"emblem === true\"\n\t\t\tclass=\"cn-header-widget__emblem cn-header-widget__emblem--theme\"\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-testid=\"cn-header-widget-emblem\" />\n\t\t<div class=\"cn-header-widget__content\" :style=\"contentStyle\">\n\t\t\t<p\n\t\t\t\tv-if=\"dateLine\"\n\t\t\t\tclass=\"cn-header-widget__date\"\n\t\t\t\t:style=\"dateStyle\"\n\t\t\t\tdata-testid=\"cn-header-widget-date\">\n\t\t\t\t{{ dateLine }}\n\t\t\t</p>\n\t\t\t<h2 v-if=\"hasTitle\" class=\"cn-header-widget__title\" :style=\"textStyle\">\n\t\t\t\t{{ headingText }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"hasSubtitle\" class=\"cn-header-widget__subtitle\" :style=\"textStyle\">\n\t\t\t\t{{ subtitle }}\n\t\t\t</p>\n\t\t\t<a\n\t\t\t\tv-if=\"hasCta\"\n\t\t\t\t:href=\"ctaUrl\"\n\t\t\t\t:class=\"ctaClasses\"\n\t\t\t\t:target=\"ctaTarget\"\n\t\t\t\t:rel=\"ctaRel\"\n\t\t\t\t:aria-label=\"ctaAriaLabel\">\n\t\t\t\t{{ ctaLabel }}\n\t\t\t</a>\n\t\t</div>\n\t\t<!-- A view switch at the right of the heading (`content.views`): \"My\n\t\t work / My team\" as a segmented control whose options are routes,\n\t\t or views of the page the widget sits on (`option.view`); a view\n\t\t option controls the page's view region. -->\n\t\t<div v-if=\"viewOptions.length > 0\" class=\"cn-header-widget__views\">\n\t\t\t<CnSegmentedControl\n\t\t\t\t:options=\"viewOptions\"\n\t\t\t\t:modelValue=\"activeView\"\n\t\t\t\t:ariaLabel=\"viewsLabel\"\n\t\t\t\t:controls=\"viewsRegionId\"\n\t\t\t\tdata-testid=\"cn-header-widget-views\"\n\t\t\t\t@update:modelValue=\"onViewChange\" />\n\t\t</div>\n\t\t<img\n\t\t\tv-if=\"hasBackgroundImage\"\n\t\t\tclass=\"cn-header-widget__probe\"\n\t\t\t:src=\"backgroundImageUrl\"\n\t\t\talt=\"\"\n\t\t\taria-hidden=\"true\"\n\t\t\t@error=\"onImageError\">\n\t</div>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { getCanonicalLocale, translate as t } from '@nextcloud/l10n'\nimport CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\n\nconst ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']\nconst ALLOWED_HEIGHTS = ['small', 'medium', 'large', 'xlarge']\nconst ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']\nconst ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']\nconst ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']\n\n/** Marks a switch option that selects a page view rather than a route. /\nconst VIEW_OPTION_PREFIX = 'view:'\n\nconst HEIGHT_PIXELS = Object.freeze({\n\tsmall: 120,\n\tmedium: 200,\n\tlarge: 320,\n\txlarge: 480,\n})\n\nconst VERTICAL_ALIGN_FLEX = Object.freeze({\n\ttop: 'flex-start',\n\tmiddle: 'center',\n\tbottom: 'flex-end',\n})\n\n/\n CnHeaderWidget — full-width banner widget for dashboards. Renders a\n * configurable header with title, optional subtitle, optional background\n * image, optional colour overlay, and optional call-to-action button.\n \n Image source precedence: `backgroundImageFileId` takes priority over\n * `backgroundImageUrl` (resolved via the Nextcloud core preview route). When\n * the image fails to load the renderer silently falls back to the solid\n * `backgroundColor`; no error UI is shown.\n \n Height presets map to fixed pixels: small=120, medium=200, large=320,\n * xlarge=480. Title is `<h2>`, subtitle `<p>`, CTA `<a>` — all semantic HTML.\n * External CTA URLs (http/https) open in a new tab with\n * `rel=\"noopener noreferrer\"`; relative / anchor URLs stay in the current tab.\n \n Optional greeting: `greeting: true` makes the heading greet the signed-in\n * user by time of day and first name (\"Good afternoon, Pieter\"; `\"full\"` uses\n * the whole display name), and `showDate: true` adds a line with today's\n * date above it. `plain: true` drops the coloured background and aligns the\n * text to the start, which is how a greeting usually sits on a dashboard.\n \n ```json\n * { \"widgetKey\": \"header\", \"props\": { \"content\": { \"greeting\": true, \"showDate\": true, \"plain\": true } } }\n * ```\n \n Registered as the `header` dashboard widget type via the renderer's\n * `index.js`.\n /\nexport default {\n\tname: 'CnHeaderWidget',\n\n\tcomponents: { CnSegmentedControl },\n\n\tinject: {\n\t\t/\n\t\t Host translate function provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). The\n\t\t * manifest-authored `content.title` / `content.subtitle` / CTA label\n\t\t * are run through it. Defaults to an identity function so an\n\t\t * untranslated key renders as itself.\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/\n\t\t The views of the page this widget sits on, provided by\n\t\t * CnDashboardPage / CnDetailPage (`views`). An option with a `view`\n\t\t * selects one of them. Null outside such a page.\n\t\t /\n\t\tcnPageViews: { default: null },\n\t},\n\n\tprops: {\n\t\t/\n\t\t Persisted widget content: `{title, subtitle, backgroundImageUrl,\n\t\t * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,\n\t\t * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,\n\t\t * greeting, showDate, kicker, emblem, plain, ground, views}`. All fields are optional except\n\t\t * `title` (or `greeting`); unknown enum values collapse to documented\n\t\t * defaults and the renderer never throws. `views` is\n\t\t * `{ ariaLabel?, options: [{ label, route, params? } \| { label, view }] }`:\n\t\t * a segmented control at the right of the heading whose checked option\n\t\t * is the current route; choosing another pushes its route. An option\n\t\t * with `view` selects that view of the page the widget sits on (the\n\t\t * page's `views`) instead, and the page then draws no switch of its\n\t\t * own. `ground: true`\n\t\t * draws the greeting on the page ground: the plain look with no\n\t\t * padding, a 32px heading and the date line 6px above it (a dashboard\n\t\t * also drops the widget's card for it). A ground greeting takes its\n\t\t * own height rather than its grid cell's, so a view switch sits on\n\t\t * the heading's line. `kicker` (an i18n key) prefixes the date line, as\n\t\t * \"Customer contact · Tuesday 6 October\". `emblem` (a URL, or `true`\n\t\t * for the theme's `--nldesign-emblem-url`) draws the emblem beside the\n\t\t * date line and heading, 52px high (`--cn-header-emblem-size`).\n\t\t \n\t\t @type {object}\n\t\t /\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/ eslint-disable vue/no-unused-properties -- part of the widget contract: CnContainerChild and the dashboard pages bind :placement on every widget, so declaring it keeps it out of $attrs /\n\t\t/\n\t\t Placement entity — reserved to match the renderer contract.\n\t\t \n\t\t @type {object}\n\t\t /\n\t\tplacement: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\t/ eslint-enable vue/no-unused-properties /\n\n\t\t/\n\t\t The moment the greeting and the date line are computed for. Leave\n\t\t * empty for the current time.\n\t\t \n\t\t @type {Date\|null}\n\t\t /\n\t\tnow: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t// Set true once the background image fires a DOM `error` so\n\t\t\t// subsequent renders fall back to `backgroundColor` only. The\n\t\t\t// probe `<img>` is invisible — its only job is load-failure\n\t\t\t// detection for the CSS background.\n\t\t\timageFailed: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Effective translate function: the injected `cnTranslate` (the host\n\t\t * app's bound `t()`), identity by default.\n\t\t \n\t\t @return {(key: string) => string}\n\t\t /\n\t\teffectiveTranslate() {\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key\n\t\t},\n\n\t\t/* The header title, translated, or '' when absent. /\n\t\ttitle() {\n\t\t\tconst value = this.content && this.content.title\n\t\t\treturn typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''\n\t\t},\n\n\t\t/* The header subtitle, translated, or '' when absent. /\n\t\tsubtitle() {\n\t\t\tconst value = this.content && this.content.subtitle\n\t\t\treturn typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''\n\t\t},\n\n\t\t/* Whether a heading renders: a non-empty title or a greeting. /\n\t\thasTitle() {\n\t\t\treturn this.headingText !== ''\n\t\t},\n\n\t\t/\n\t\t The moment the greeting and date line are computed for.\n\t\t \n\t\t @return {Date}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\treference() {\n\t\t\treturn this.now instanceof Date ? this.now : new Date()\n\t\t},\n\n\t\t/\n\t\t The view switch's options from `content.views.options`: each\n\t\t * `{ label, route, params? }` with a non-empty label and route becomes\n\t\t * a segmented-control option keyed on its route name (the label goes\n\t\t * through the host translate function). Empty without a router, so\n\t\t * the switch cannot offer routes it cannot follow.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {Array<{value: string, label: string}>}\n\t\t /\n\t\tviewOptions() {\n\t\t\tconst raw = this.content && this.content.views && this.content.views.options\n\t\t\tif (!Array.isArray(raw)) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tconst pageViewIds = this.pageViewIds\n\t\t\treturn raw\n\t\t\t\t.filter((o) => o && typeof o.label === 'string' && o.label !== '')\n\t\t\t\t.map((o) => {\n\t\t\t\t\tif (typeof o.view === 'string' && o.view !== '') {\n\t\t\t\t\t\treturn pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof o.route === 'string' && o.route !== '' && this.$router) {\n\t\t\t\t\t\treturn { value: o.route, label: this.cnTranslate(o.label) }\n\t\t\t\t\t}\n\t\t\t\t\treturn null\n\t\t\t\t})\n\t\t\t\t.filter(Boolean)\n\t\t},\n\n\t\t/\n\t\t The ids of the page's views, empty outside a page with views.\n\t\t \n\t\t @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views\n\t\t * @return {string[]}\n\t\t /\n\t\tpageViewIds() {\n\t\t\tconst views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []\n\t\t\treturn views.map((view) => view.id)\n\t\t},\n\n\t\t/\n\t\t The id of the page's view region when an option selects a view,\n\t\t * for the options' `aria-controls`; '' otherwise.\n\t\t \n\t\t @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible\n\t\t * @return {string}\n\t\t /\n\t\tviewsRegionId() {\n\t\t\tconst hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))\n\t\t\treturn hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId \|\| '') : ''\n\t\t},\n\n\t\t/\n\t\t The checked view: the option whose route is the current route, else\n\t\t * the first option (a switch always has one checked option).\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {string\|null}\n\t\t /\n\t\tactiveView() {\n\t\t\tconst options = this.viewOptions\n\t\t\tif (options.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst activeView = this.cnPageViews ? this.cnPageViews.activeId : null\n\t\t\tconst viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null\n\t\t\tif (viewMatch) {\n\t\t\t\treturn viewMatch.value\n\t\t\t}\n\t\t\tconst current = this.$route && this.$route.name\n\t\t\tconst match = options.find((o) => o.value === current)\n\t\t\treturn match ? match.value : options[0].value\n\t\t},\n\n\t\t/\n\t\t Accessible name of the view switch: `content.views.ariaLabel`\n\t\t * through the host translate function, else \"View\".\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @return {string}\n\t\t /\n\t\tviewsLabel() {\n\t\t\tconst label = this.content && this.content.views && this.content.views.ariaLabel\n\t\t\treturn label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')\n\t\t},\n\n\t\t/\n\t\t Whether the plain presentation is on (no coloured background).\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisPlain() {\n\t\t\treturn Boolean(this.content && (this.content.plain === true \|\| this.content.ground === true))\n\t\t},\n\n\t\t/\n\t\t Whether the greeting sits on the page ground (`content.ground`):\n\t\t * the plain look without the card padding, so the date line and the\n\t\t * heading align with the page edge as the board draws them. Off by\n\t\t * default.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground\n\t\t * @return {boolean}\n\t\t /\n\t\tisGround() {\n\t\t\treturn Boolean(this.content && this.content.ground === true)\n\t\t},\n\n\t\t/\n\t\t The name the greeting uses: the first word of the display name, or\n\t\t * the whole display name for `greeting: \"full\"`. '' when unknown.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tgreetingName() {\n\t\t\tlet user\n\t\t\ttry {\n\t\t\t\tuser = getCurrentUser()\n\t\t\t} catch {\n\t\t\t\tuser = null\n\t\t\t}\n\t\t\tconst displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''\n\t\t\tif (displayName === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn this.content.greeting === 'full' ? displayName : displayName.split(/\\s+/)[0]\n\t\t},\n\n\t\t/\n\t\t The greeting for the time of day, with the user's name when known,\n\t\t * or '' when the greeting is off.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tgreetingText() {\n\t\t\tconst greeting = this.content && this.content.greeting\n\t\t\tif (greeting !== true && greeting !== 'full' && greeting !== 'first') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst hour = this.reference.getHours()\n\t\t\tconst name = this.greetingName\n\t\t\tif (hour < 12) {\n\t\t\t\treturn name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')\n\t\t\t}\n\t\t\tif (hour < 18) {\n\t\t\t\treturn name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')\n\t\t\t}\n\t\t\treturn name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')\n\t\t},\n\n\t\t/\n\t\t The heading: the greeting when it is on, else the title.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\theadingText() {\n\t\t\treturn this.greetingText \|\| this.title\n\t\t},\n\n\t\t/\n\t\t The kicker line above the heading: `content.kicker` (through the\n\t\t * host translate function, e.g. \"Customer contact\") and today's date\n\t\t * written out (\"Monday 5 October 2026\") when `showDate` is on, joined\n\t\t * by \" · \". '' when neither is set. Without `kicker` this is the date\n\t\t * line as before.\n\t\t \n\t\t @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tdateLine() {\n\t\t\tconst kicker = this.content && typeof this.content.kicker === 'string' && this.content.kicker !== ''\n\t\t\t\t? this.effectiveTranslate(this.content.kicker)\n\t\t\t\t: ''\n\t\t\tconst date = this.dateText\n\t\t\treturn [kicker, date].filter((part) => part !== '').join(' · ')\n\t\t},\n\n\t\t/\n\t\t Today's date written out, or '' when `showDate` is off.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-kicker-can-carry-a-prefix\n\t\t * @return {string}\n\t\t /\n\t\tdateText() {\n\t\t\tif (!this.content \|\| this.content.showDate !== true) {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }\n\t\t\tlet locale\n\t\t\ttry {\n\t\t\t\tlocale = getCanonicalLocale()\n\t\t\t} catch {\n\t\t\t\tlocale = undefined\n\t\t\t}\n\t\t\ttry {\n\t\t\t\treturn new Intl.DateTimeFormat(locale \|\| undefined, options).format(this.reference)\n\t\t\t} catch {\n\t\t\t\treturn new Intl.DateTimeFormat(undefined, options).format(this.reference)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Inline style of the date line: the heading's colour, or the muted\n\t\t * text colour on a plain header.\n\t\t \n\t\t @return {object}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tdateStyle() {\n\t\t\treturn {\n\t\t\t\tcolor: this.isPlain && !(this.content && this.content.textColor) ? 'var(--color-text-maxcontrast)' : this.textColor,\n\t\t\t\tmargin: 0,\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t The emblem beside the greeting: the URL `content.emblem` names,\n\t\t * `true` for the theme's emblem, or null without the key.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-can-carry-the-emblem\n\t\t * @return {string\|true\|null}\n\t\t /\n\t\temblem() {\n\t\t\tconst value = this.content && this.content.emblem\n\t\t\tif (value === true) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn typeof value === 'string' && value !== '' ? resolveImageUrl(value) : null\n\t\t},\n\n\t\t/* Whether a non-empty subtitle is set. /\n\t\thasSubtitle() {\n\t\t\treturn this.subtitle !== ''\n\t\t},\n\n\t\t/* Resolved background image URL (file id wins over URL). /\n\t\tbackgroundImageUrl() {\n\t\t\tconst fileId = this.content && this.content.backgroundImageFileId\n\t\t\tif (typeof fileId === 'number' && Number.isFinite(fileId) && fileId > 0) {\n\t\t\t\treturn `/index.php/core/preview?fileId=${fileId}&x=1024&y=512&a=1`\n\t\t\t}\n\t\t\tconst url = this.content && this.content.backgroundImageUrl\n\t\t\t// Accept http(s) plus uploaded/same-origin sources: data: and blob:\n\t\t\t// (from the form's upload) and root-relative paths (NC files/preview).\n\t\t\t// External http(s) images may still be blocked by the instance CSP —\n\t\t\t// uploading is the reliable, same-origin path. resolveImageUrl() adds\n\t\t\t// the webroot + /index.php to `/apps/...` resource paths so they load\n\t\t\t// on index.php-routed instances (other shapes pass through).\n\t\t\tif (typeof url === 'string' && /^(https?:\\/\\/\|data:\|blob:\|\\/)/i.test(url)) {\n\t\t\t\treturn resolveImageUrl(url)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\n\t\t/* Whether a usable, non-errored background image is present. /\n\t\thasBackgroundImage() {\n\t\t\treturn this.backgroundImageUrl !== '' && this.imageFailed === false\n\t\t},\n\n\t\t/\n\t\t Resolved background colour (default theme primary).\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\tbackgroundColor() {\n\t\t\tconst value = this.content && this.content.backgroundColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tif (this.isPlain) {\n\t\t\t\treturn 'transparent'\n\t\t\t}\n\t\t\treturn 'var(--color-primary, #0070c0)'\n\t\t},\n\n\t\t/* Resolved overlay mode (`tint` when an image is present, else `none`). /\n\t\toverlayMode() {\n\t\t\tconst declared = this.content && this.content.overlayMode\n\t\t\tif (typeof declared === 'string' && ALLOWED_OVERLAY_MODES.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn this.hasBackgroundImage ? 'tint' : 'none'\n\t\t},\n\n\t\t/* Whether an overlay should render. /\n\t\thasOverlay() {\n\t\t\treturn this.overlayMode !== 'none'\n\t\t},\n\n\t\t/* Resolved overlay colour. /\n\t\toverlayColor() {\n\t\t\tconst value = this.content && this.content.overlayColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tconst bg = this.content && this.content.backgroundColor\n\t\t\treturn (typeof bg === 'string' && bg !== '') ? bg : '#000000'\n\t\t},\n\n\t\t/* Resolved overlay opacity, clamped to 0..1 (default 0.4). /\n\t\toverlayOpacity() {\n\t\t\tconst raw = this.content && this.content.overlayOpacity\n\t\t\tconst value = typeof raw === 'number' ? raw : Number.parseFloat(raw)\n\t\t\tif (Number.isFinite(value) === false) {\n\t\t\t\treturn 0.4\n\t\t\t}\n\t\t\tif (value < 0) {\n\t\t\t\treturn 0\n\t\t\t}\n\t\t\tif (value > 1) {\n\t\t\t\treturn 1\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\n\t\t/* Resolved height preset key (default `medium`). /\n\t\theight() {\n\t\t\tconst declared = this.content && this.content.height\n\t\t\tif (typeof declared === 'string' && ALLOWED_HEIGHTS.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn 'medium'\n\t\t},\n\n\t\t/* The pixel height for the active preset. /\n\t\theightPixels() {\n\t\t\treturn HEIGHT_PIXELS[this.height]\n\t\t},\n\n\t\t/\n\t\t Resolved text alignment (default `center`).\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\ttextAlign() {\n\t\t\tconst declared = this.content && this.content.textAlign\n\t\t\tif (typeof declared === 'string' && ALLOWED_TEXT_ALIGN.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn this.isPlain ? 'left' : 'center'\n\t\t},\n\n\t\t/* Resolved vertical alignment (default `middle`). /\n\t\tverticalAlign() {\n\t\t\tconst declared = this.content && this.content.verticalAlign\n\t\t\tif (typeof declared === 'string' && ALLOWED_VERTICAL_ALIGN.includes(declared)) {\n\t\t\t\treturn declared\n\t\t\t}\n\t\t\treturn 'middle'\n\t\t},\n\n\t\t/\n\t\t Resolved text colour with an auto-contrast fallback.\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t /\n\t\ttextColor() {\n\t\t\tconst value = this.content && this.content.textColor\n\t\t\tif (typeof value === 'string' && value !== '') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\tif (this.hasBackgroundImage) {\n\t\t\t\treturn '#ffffff'\n\t\t\t}\n\t\t\tif (this.isPlain && !(this.content && this.content.backgroundColor)) {\n\t\t\t\treturn 'var(--color-main-text)'\n\t\t\t}\n\t\t\treturn this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'\n\t\t},\n\n\t\t/\n\t\t Inline style for the banner wrapper.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading\n\t\t * @return {object}\n\t\t /\n\t\twrapperStyle() {\n\t\t\tconst style = {\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: '100%',\n\t\t\t\t// Fill the dashboard grid cell so the banner resizes with the\n\t\t\t\t// widget. A fixed pixel height ignored the cell, which made the\n\t\t\t\t// banner un-resizable and made it overflow/scroll inside a\n\t\t\t\t// smaller cell. The grid controls the size now.\n\t\t\t\t// On the page ground there is no banner to fill the cell with:\n\t\t\t\t// the greeting takes its own height, so the view switch lines\n\t\t\t\t// up with the heading instead of the bottom of a taller cell,\n\t\t\t\t// and a size-to-content cell can shrink to it.\n\t\t\t\theight: this.isGround ? 'auto' : '100%',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\t'background-color': this.backgroundColor,\n\t\t\t}\n\t\t\tif (this.hasBackgroundImage) {\n\t\t\t\tstyle['background-image'] = `url(\"${this.backgroundImageUrl}\")`\n\t\t\t\tstyle['background-size'] = 'cover'\n\t\t\t\tstyle['background-position'] = 'center center'\n\t\t\t\tstyle['background-repeat'] = 'no-repeat'\n\t\t\t}\n\t\t\treturn style\n\t\t},\n\n\t\t/* Inline style for the overlay layer. /\n\t\toverlayStyle() {\n\t\t\tif (this.overlayMode === 'gradient-bottom') {\n\t\t\t\treturn {\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tinset: 0,\n\t\t\t\t\t'background-image': `linear-gradient(to bottom, transparent 50%, ${this.overlayColor} 100%)`,\n\t\t\t\t\t'pointer-events': 'none',\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tposition: 'absolute',\n\t\t\t\tinset: 0,\n\t\t\t\t'background-color': this.overlayColor,\n\t\t\t\topacity: String(this.overlayOpacity),\n\t\t\t\t'pointer-events': 'none',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Inline style for the content flex container.\n\t\t \n\t\t @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header\n\t\t * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading\n\t\t /\n\t\tcontentStyle() {\n\t\t\treturn {\n\t\t\t\tposition: 'relative',\n\t\t\t\t'z-index': 1,\n\t\t\t\t// Beside a view switch the content shares the row instead of\n\t\t\t\t// taking the whole width (see .cn-header-widget--with-views).\n\t\t\t\twidth: this.viewOptions.length > 0 ? 'auto' : '100%',\n\t\t\t\theight: this.isGround ? 'auto' : '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\t'flex-direction': 'column',\n\t\t\t\t'align-items': this.flexAlignFromTextAlign,\n\t\t\t\t'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],\n\t\t\t\t// Plain drops the coloured background, not the card padding:\n\t\t\t\t// at 0 the greeting sat flush against the card's left edge.\n\t\t\t\t// Ground has no card, so it has no padding either.\n\t\t\t\tpadding: this.isGround ? '0' : (this.isPlain ? '16px' : '16px 24px'),\n\t\t\t\t'box-sizing': 'border-box',\n\t\t\t\tgap: this.isGround ? '6px' : '8px',\n\t\t\t\t'text-align': this.textAlign,\n\t\t\t}\n\t\t},\n\n\t\t/* Flex cross-axis alignment derived from the text alignment. /\n\t\tflexAlignFromTextAlign() {\n\t\t\tif (this.textAlign === 'left') {\n\t\t\t\treturn 'flex-start'\n\t\t\t}\n\t\t\tif (this.textAlign === 'right') {\n\t\t\t\treturn 'flex-end'\n\t\t\t}\n\t\t\treturn 'center'\n\t\t},\n\n\t\t/* Inline style applying the resolved text colour. /\n\t\ttextStyle() {\n\t\t\treturn {\n\t\t\t\tcolor: this.textColor,\n\t\t\t\tmargin: 0,\n\t\t\t}\n\t\t},\n\n\t\t/* The validated CTA object, or null when incomplete. /\n\t\tcta() {\n\t\t\tconst raw = this.content && this.content.cta\n\t\t\tif (raw === null \|\| typeof raw !== 'object') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst label = typeof raw.label === 'string' ? raw.label.trim() : ''\n\t\t\tconst url = typeof raw.url === 'string' ? raw.url.trim() : ''\n\t\t\tif (label === '' \|\| url === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tlet style = raw.style\n\t\t\tif (typeof style !== 'string' \|\| ALLOWED_CTA_STYLES.includes(style) === false) {\n\t\t\t\tstyle = 'primary'\n\t\t\t}\n\t\t\treturn { label, url, style }\n\t\t},\n\n\t\t/* Whether a complete CTA is present. /\n\t\thasCta() {\n\t\t\treturn this.cta !== null\n\t\t},\n\n\t\t/* The CTA label, translated. /\n\t\tctaLabel() {\n\t\t\treturn this.hasCta && this.cta.label ? this.effectiveTranslate(this.cta.label) : ''\n\t\t},\n\n\t\t/* The CTA URL. /\n\t\tctaUrl() {\n\t\t\treturn this.hasCta ? this.cta.url : ''\n\t\t},\n\n\t\t/* Whether the CTA URL is an external http(s) link. /\n\t\tctaIsExternal() {\n\t\t\treturn this.hasCta && /^https?:\\/\\//i.test(this.ctaUrl)\n\t\t},\n\n\t\t/* The CTA anchor target (`_blank` for external links). /\n\t\tctaTarget() {\n\t\t\treturn this.ctaIsExternal ? '_blank' : null\n\t\t},\n\n\t\t/* The CTA anchor rel for external links. /\n\t\tctaRel() {\n\t\t\treturn this.ctaIsExternal ? 'noopener noreferrer' : null\n\t\t},\n\n\t\t/* The accessible CTA label, annotating external links. /\n\t\tctaAriaLabel() {\n\t\t\tif (this.hasCta === false) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.ctaIsExternal) {\n\t\t\t\treturn `${this.ctaLabel} (${t('nextcloud-vue', 'opens in new tab')})`\n\t\t\t}\n\t\t\treturn this.ctaLabel\n\t\t},\n\n\t\t/* The CTA class list (base + style modifier). /\n\t\tctaClasses() {\n\t\t\tif (this.hasCta === false) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t'cn-header-widget__cta',\n\t\t\t\t`cn-header-widget__cta--${this.cta.style}`,\n\t\t\t]\n\t\t},\n\t},\n\n\twatch: {\n\t\tbackgroundImageUrl() {\n\t\t\t// Re-arm the probe so a previously failing URL can recover when\n\t\t\t// the user edits the placement.\n\t\t\tthis.imageFailed = false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Follow the chosen view: push its route (with the option's `params`\n\t\t * when declared). Nothing happens for the route already shown.\n\t\t \n\t\t @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views\n\t\t * @param {string} route The chosen option's route name.\n\t\t * @return {void}\n\t\t /\n\t\tonViewChange(route) {\n\t\t\tif (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {\n\t\t\t\tif (this.cnPageViews && typeof this.cnPageViews.select === 'function') {\n\t\t\t\t\tthis.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.$router \|\| !route \|\| route === (this.$route && this.$route.name)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst declared = (this.content.views.options \|\| []).find((o) => o && o.route === route) \|\| {}\n\t\t\tconst target = { name: route }\n\t\t\tif (declared.params && typeof declared.params === 'object') {\n\t\t\t\ttarget.params = declared.params\n\t\t\t}\n\t\t\tthis.$router.push(target)\n\t\t},\n\n\t\t/\n\t\t Mark the background image as broken so the renderer falls back to\n\t\t * the solid colour.\n\t\t \n\t\t @return {void}\n\t\t /\n\t\tonImageError() {\n\t\t\tthis.imageFailed = true\n\t\t},\n\n\t\t/\n\t\t Quick perceived-luminance check on a CSS hex colour. Returns true\n\t\t * for \"light\" (white text would be illegible). Non-hex colours\n\t\t * collapse to false (assume dark) — the safer default.\n\t\t \n\t\t @param {string} color the CSS colour value.\n\t\t * @return {boolean} true when the colour is perceived as light.\n\t\t /\n\t\tisLightColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tconst match = color.trim().match(/^#([0-9a-f]{6})$/i)\n\t\t\tif (!match) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tconst hex = match[1]\n\t\t\tconst r = Number.parseInt(hex.slice(0, 2), 16)\n\t\t\tconst g = Number.parseInt(hex.slice(2, 4), 16)\n\t\t\tconst b = Number.parseInt(hex.slice(4, 6), 16)\n\t\t\tconst luma = (0.299 r + 0.587 * g + 0.114 * b) / 255\n\t\t\treturn luma > 0.6\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-header-widget {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 120px;\n\tborder-radius: var(--border-radius-large, 8px);\n\toverflow: hidden;\n}\n\n.cn-header-widget--plain {\n\tmin-height: 0;\n\tborder-radius: 0;\n}\n\n/* With a view switch the heading and the switch share one row, the switch\n at the right and bottom-aligned with the heading; on a narrow card the\n switch wraps under it. /\n.cn-header-widget--with-views {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: calc(2 var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));\n}\n\n.cn-header-widget--with-views .cn-header-widget__content {\n\tflex: 1 1 320px;\n\twidth: auto;\n}\n\n/* The emblem beside the greeting (`content.emblem`): on one row with the\n date line and heading, centred on them, as LpStart draws it. /\n.cn-header-widget--with-emblem {\n\tdisplay: flex;\n\tcolumn-gap: var(--cn-header-emblem-gap, 16px);\n}\n\n.cn-header-widget--with-emblem .cn-header-widget__content {\n\tflex: 1 1 auto;\n\twidth: auto;\n\tmin-width: 0;\n}\n\n.cn-header-widget__emblem {\n\tposition: relative;\n\tz-index: 1;\n\tflex: none;\n\talign-self: center;\n\theight: var(--cn-header-emblem-size, 52px);\n\twidth: auto;\n}\n\n.cn-header-widget__emblem--theme {\n\twidth: var(--cn-header-emblem-size, 52px);\n\tbackground: var(--nldesign-emblem-url) center / contain no-repeat;\n}\n\n.cn-header-widget__views {\n\tposition: relative;\n\tz-index: 1;\n\tflex: 0 0 auto;\n\tpadding: 16px;\n}\n\n/ On the page ground (`content.ground`): no card, so no inset around the\n view switch, and the heading at the board's 32px. */\n.cn-header-widget--ground .cn-header-widget__views {\n\tpadding: 0;\n}\n\n.cn-header-widget--ground .cn-header-widget__title {\n\tfont-size: var(--cn-header-ground-title-size, 32px);\n\tletter-spacing: -0.01em;\n}\n\n.cn-header-widget__date {\n\tfont-size: 14px;\n\tline-height: 1.4;\n\tmargin: 0;\n}\n\n.cn-header-widget__overlay {\n\tposition: absolute;\n\tinset: 0;\n}\n\n.cn-header-widget__content {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.cn-header-widget__title {\n\tfont-size: 28px;\n\tfont-weight: 700;\n\tline-height: 1.2;\n\tmargin: 0;\n}\n\n.cn-header-widget__subtitle {\n\tfont-size: 16px;\n\tline-height: 1.4;\n\tmargin: 0;\n\topacity: 0.95;\n}\n\n.cn-header-widget__cta {\n\tdisplay: inline-block;\n\tmargin-top: 8px;\n\tpadding: 10px 18px;\n\tborder-radius: var(--border-radius, 4px);\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-decoration: none;\n\tcursor: pointer;\n\ttransition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.cn-header-widget__cta:hover {\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.cn-header-widget__cta--primary {\n\tbackground-color: var(--color-primary, #0070c0);\n\tcolor: var(--color-primary-text, #ffffff);\n\tborder: 1px solid var(--color-primary, #0070c0);\n}\n\n.cn-header-widget__cta--secondary {\n\tbackground-color: var(--color-background-hover, rgba(255, 255, 255, 0.85));\n\tcolor: var(--color-main-text, #000000);\n\tborder: 1px solid var(--color-border, #cccccc);\n}\n\n.cn-header-widget__cta--ghost {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\tborder: 1px solid currentColor;\n}\n\n.cn-header-widget__probe {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\topacity: 0;\n\tpointer-events: none;\n\tinset-inline-start: -9999px;\n\ttop: -9999px;\n}\n\n@media print {\n\t.cn-header-widget {\n\t\tprint-color-adjust: exact;\n\t\t-webkit-print-color-adjust: exact;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createElementVNode","_createVNode"],"mappings":";;;;;AA2BI,EAAA,KAAI,EAAC,0DAAS;eACJ,EAAC,MAAM;AACjB,EAAA,aAAU,EAAC,yBAAM;;;;;AA6BO,EAAA,KAAA,EAAA,yBAAA;;;;;;;uBA/CzBA;IAAG,KAAK,EAAAC,cAAA,CAAA,CAAC,kBAAW,EAAA,EAAA,yBAAA,EAAA,QAAA,CAAA,OAAA,EAAA,0BAAA,EAAA,QAAA,CAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,CAAA,WAAA,CAAA,MAAA,GAAA,CAAA,EAAA,+BAAA,EAAA,QAAA,CAAA,MAAA,KAAA,IAAA,EAAA,CAAA,CAAA;AAAA,IAAA,KAAA,iBAAA,QAAA,CAAA,YAAA,CAAA;;KAEd,QAAU,CAAA,UAAA;sBADjBD,kBAIsB,CAAA,KAAA,EAAA;;AAFrB,UAAA,KAAE,EAAA,2BAAA;AACD,UAAA,KAAK,iBAAE,QAAY,CAAA,YAAA,CAAA;AACpB,UAAA,aAAW,EAAC,MAAM;;;AAIf,IAAA,CAAA,QAAA,CAAA,MAAA,IAAA,QAAA,CAAA,MAAA,KAAA,IAAA;sBADHA,kBAKsC,CAAA,KAAA,EAAA;;AAHtC,UAAA,KAAK,EAAC,0BAAoB;AACzB,UAAA,GAAG,EAAE,QAAM,CAAA,MAAA;AACZ,UAAA,GAAG,EAAC,EAAE;AACN,UAAA,aAAW,EAAC;;SAEX,QAAA,CAAA,MAAA,KAAA,IAAA;AADF,WAAAE,SAAA,EAAA,EAAAF,kBAAA,CAImB,QAJnB,UAImB,CAAA;;IACjBG,kBAuBI,CAAA,KAAA,EAAA;AAvBD,MAAA,KAAK,EAAC,2BAA0B;AAAA,MAAA,KAAA,iBAAA,QAAA,CAAA,YAAA,CAAA;;OAEjC,QAAA,CAAA,QAAA;0CAKC,CAAA,GAAA,EAAA;;AAJH,YAAA,KAAK,EAAC,wBAAwB;AAC7B,YAAA,KAAK,iBAAE,QAAQ,CAAA,SAAA,CAAA;AAChB,YAAA,aAAG,EAAA,uBAAA;6BACA,QAAQ,CAAA,QAAA,CAAA,EAAA,CAAA,mBAAA;;OAET,QAAA,CAAA,QAAA;wBAAHH,kBAEK,CAAA,IAAA,EAAA;;AAFF,YAAA,KAAA,EAAA,yBAAA;AAAA,YAAA,KAAA,iBAAA,QAAA,CAAA,SAAA,CAAA;6BACF,QAAA,CAAA,WAAA,CAAA,EAAA,CAAA,mBAAA;;OAEQ,QAAK,CAAA,WAAA;0CAEV,CAAA,GAAA,EAAA;;AAFU,YAAA,KAAA,EAAA,4BAAA;AAAA,YAAA,KAAA,iBAAA,QAAA,CAAA,SAAA,CAAA;6BACV,QAAQ,CAAA,QAAA,CAAA,EAAA,CAAA,mBAAA;;OAGL,QAAM,CAAA,MAAA;0CAOT,CAAA,GAAA,EAAA;;AANF,YAAA,IAAI,EAAE,QAAM,CAAA,MAAA;AACZ,YAAA,KAAC,iBAAA,QAAA,CAAA,UAAA,CAAA;AACD,YAAA,MAAE,EAAA,QAAA,CAAA,SAAA;AACF,YAAA,GAAI,EAAC,QAAM,CAAA,MAAA;wBACD,EAAE,QAAY,CAAA,YAAA;6BACtB,QAAS,CAAA,QAAA,CAAA,EAAA,EAAA,2BAAA,UAAA,CAAA;;;AAOH,IAAA,CAAA,QAAA,CAAA,WAAW,CAAC,MAAG,GAAA,CAAA;yCAQpB,iBAAA,EAAA;UAPJI,WAMuB,CAAA,6BAAA,EAAA;AALtB,YAAA,OAAO,EAAE,QAAW,CAAA,WAAA;AACpB,YAAA,UAAE,EAAA,QAAA,CAAA,UAAA;AACF,YAAA,SAAA,EAAA,QAAA,CAAA,UAAA;AACA,YAAA,QAAQ,EAAE,QAAY,CAAA,aAAA;AACvB,YAAA,aAAW,EAAC,wBAAiB;AAC5B,YAAA,qBAAiB,EAAE,QAAG,CAAA,YAAA;;;;KAGlB,QAAe,CAAA,kBAAA;sBADrBJ;;AAEA,UAAA,KAAG,EAAA,yBAAA;;;;;;;;;;;;"}

package/dist/esm/components/CnIndexPage/CnIndexPage.vue2.js CHANGED Viewed

@@ -440,6 +440,51 @@ var script = {
 			default: false,
 		},
+		/**
+		 * Whether the page header draws its icon before the title. `false`
+		 * (manifest `config.showTitleIcon: false`) drops it, for a title that
+		 * stands alone as the board draws it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showTitleIcon: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Whether the actions bar shows its "Showing 20 of 258" line.
+		 * `false` (manifest `config.showCount: false`) drops it, for a page
+		 * whose title line already gives the total (`countSubtitle`). True by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showCount: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Buttons beside the page title, as the board's "Export" and "New
+		 * case" (manifest `config.headerButtons`). Each is `{ label?, action,
+		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
+		 * its label defaults to the Add label), `export` (the export leaf in
+		 * `format`, `csv` by default, else the export dialog), `import`,
+		 * `refresh`, or the id of a `headerActions` entry; `variant` is
+		 * `primary` or `secondary` (the default). Shown only with
+		 * `showTitle`. When they show, the actions bar drops its Views and
+		 * Actions menus, and the Add button and Export menu when a button
+		 * takes their action. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string}>}
+		 */
+		headerButtons: {
+			type: Array,
+			default: () => [],
+		},
 		/** Optional MDI icon name. Defaults to schema.icon when a schema is provided. */
 		icon: {
 			type: String,
@@ -3021,6 +3066,28 @@ var script = {
 		},
 		/** Resolved schema OBJECT (for column generation / icons / labels). */
+		/**
+		 * Whether the table shows its header filters. A self-fetching page
+		 * applies them itself, with or without a resolved schema (the columns
+		 * then say how each one filters, else a text filter on contains). A
+		 * host-fed table shows them when a schema came along, as before, or
+		 * when the host listens for `filter-change`; a filter nobody applies
+		 * would be a control that does nothing.
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-data-table/spec.md
+		 * @return {boolean} True when header filters show.
+		 */
+		tableHeaderFilters() {
+			if (!this.headerFilters) {
+				return false
+			}
+			if (this.effectiveSchema || this.isSelfFetchMode) {
+				return true
+			}
+			const vnodeProps = (this.$ && this.$.vnode && this.$.vnode.props) || {};
+			return typeof vnodeProps.onFilterChange === 'function' || Array.isArray(vnodeProps.onFilterChange)
+		},
 		effectiveSchema() {
 			if (this.isSelfFetchMode) {
 				return this.list.schema.value
@@ -3499,6 +3566,67 @@ var script = {
 			return resolveDeepTokens(seed, {})
 		},
+		/**
+		 * The declared header buttons with a label, translated, each with a
+		 * stable key and a variant.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.headerButtons) ? this.headerButtons : [];
+			return declared
+				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
+				.map((button, index) => {
+					let label = typeof button.label === 'string' && button.label !== '' ? this.cnTranslate(button.label) : '';
+					if (label === '' && button.action === 'add') {
+						label = this.resolvedAddLabel;
+					}
+					return {
+						key: String(button.id || button.action || index),
+						label,
+						action: button.action,
+						variant: button.variant === 'primary' ? 'primary' : 'secondary',
+						icon: typeof button.icon === 'string' ? button.icon : '',
+						format: button.format === 'excel' ? 'excel' : 'csv',
+					}
+				})
+				.filter((button) => button.label !== '')
+		},
+		/**
+		 * Whether the header buttons render: there are some, the title shows
+		 * (they sit beside it) and no `#header` slot replaces the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		headerButtonsShown() {
+			return this.showTitle && !this.$slots.header && this.resolvedHeaderButtons.length > 0
+		},
+		/**
+		 * Whether the actions bar shows the saved-views control: opted in
+		 * with `allowSavedViews` and not given up for header buttons.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsSavedViews() {
+			return Boolean(this.allowSavedViews) && !this.headerButtonsShown
+		},
+		/**
+		 * Whether the actions bar shows the Export menu: `showExportMenu`,
+		 * unless a header button took the export over.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsExportMenu() {
+			return this.showExportMenu && !this.headerButtonTakes('export')
+		},
 		/**
 		 * The header's description line: `countSubtitle` with the total
 		 * filled in when one is known, else `description`.
@@ -4301,6 +4429,43 @@ var script = {
 			this.$emit('open-modal', { target, props: { selectedIds, count, ...own } });
 		},
+		/**
+		 * Whether a shown header button takes `action` over from the bar.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {string} action The action, e.g. `add`.
+		 * @return {boolean}
+		 */
+		headerButtonTakes(action) {
+			return this.headerButtonsShown && this.resolvedHeaderButtons.some((button) => button.action === action)
+		},
+		/**
+		 * A header button was clicked: run its built-in action, or dispatch
+		 * it as the `headerActions` entry with that id.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {{action: string, format: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			if (button.action === 'add') {
+				this.onAddClick();
+			} else if (button.action === 'export') {
+				if (this.register && this.exportSchemaSlug) {
+					this.onExportClick(button.format);
+				} else {
+					this.showExportDialog = true;
+				}
+			} else if (button.action === 'import') {
+				this.showImportDialog = true;
+			} else if (button.action === 'refresh') {
+				this.onRefreshEvent();
+			} else {
+				this.onHeaderAction({ action: button.action, id: button.action });
+			}
+		},
 		/**
 		 * Click dispatch from CnActionsBar's `@header-action`. Looks
 		 * up the resolved entry by id, invokes its handler if any,