@conduction/nextcloud-vue 2.79.0 → 2.80.0

package/dist/esm/components/CnRecordListWidget/CnRecordListWidget.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnRecordListWidget.vue3.js","sources":["../../../../src/components/CnRecordListWidget/CnRecordListWidget.vue?vue&type=template&id=7073b362&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-record-list\"\n\t\t:class=\"`cn-record-list--${presentation}`\"\n\t\tdata-testid=\"cn-record-list\">\n\t\t<p v-if=\"error\" class=\"cn-record-list__error\" data-testid=\"cn-record-list-error\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<div v-else-if=\"loading && rows.length === 0\" class=\"cn-record-list__loading\">\n\t\t\t<NcLoadingIcon :size=\"20\" :name=\"loadingLabel\" />\n\t\t</div>\n\t\t<p v-else-if=\"rows.length === 0\" class=\"cn-record-list__empty\" data-testid=\"cn-record-list-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<ul v-else class=\"cn-record-list__list\">\n\t\t\t<li\n\t\t\t\tv-for=\"item in items\"\n\t\t\t\t:key=\"item.key\"\n\t\t\t\tclass=\"cn-record-list__item\"\n\t\t\t\tdata-testid=\"cn-record-list-item\">\n\t\t\t\t<!-- rows: title and meta, then the pill, the date and a chevron. -->\n\t\t\t\t<component\n\t\t\t\t\t:is=\"item.tag\"\n\t\t\t\t\tv-if=\"presentation === 'rows'\"\n\t\t\t\t\tclass=\"cn-record-list__row\"\n\t\t\t\t\t:class=\"{ 'cn-record-list__row--link': item.tag !== 'div' }\"\n\t\t\t\t\tv-bind=\"item.attrs\">\n\t\t\t\t\t<span class=\"cn-record-list__main\">\n\t\t\t\t\t\t<span v-if=\"item.title\" class=\"cn-record-list__title\">{{ item.title }}</span>\n\t\t\t\t\t\t<span v-if=\"item.meta\" class=\"cn-record-list__meta\">{{ item.meta }}</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span v-if=\"item.pill || item.trailing\" class=\"cn-record-list__aside\">\n\t\t\t\t\t\t<CnStatusBadge\n\t\t\t\t\t\t\tv-if=\"item.pill\"\n\t\t\t\t\t\t\t:label=\"item.pill.label\"\n\t\t\t\t\t\t\t:variant=\"item.pill.variant\"\n\t\t\t\t\t\t\tsize=\"small\" />\n\t\t\t\t\t\t<span v-if=\"item.trailing\" class=\"cn-record-list__trailing\">{{ item.trailing }}</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\tv-if=\"item.tag !== 'div'\"\n\t\t\t\t\t\tclass=\"cn-record-list__chevron\"\n\t\t\t\t\t\t:size=\"18\"\n\t\t\t\t\t\taria-hidden=\"true\" />\n\t\t\t\t</component>\n\n\t\t\t\t<!-- feed: a round icon, a meta line and the text. -->\n\t\t\t\t<div v-else-if=\"presentation === 'feed'\" class=\"cn-record-list__feed-row\">\n\t\t\t\t\t<span class=\"cn-record-list__feed-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t<CnIcon :name=\"item.icon\" :size=\"18\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<component :is=\"item.tag\" class=\"cn-record-list__main\" v-bind=\"item.attrs\">\n\t\t\t\t\t\t<span v-if=\"item.meta\" class=\"cn-record-list__meta\">{{ item.meta }}</span>\n\t\t\t\t\t\t<span v-if=\"item.text\" class=\"cn-record-list__text\">{{ item.text }}</span>\n\t\t\t\t\t</component>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- inline: a label and the title, the title a link. -->\n\t\t\t\t<div v-else class=\"cn-record-list__inline-row\">\n\t\t\t\t\t<span v-if=\"item.label\" class=\"cn-record-list__label\">{{ item.label }}</span>\n\t\t\t\t\t<component :is=\"item.tag\" class=\"cn-record-list__inline-title\" v-bind=\"item.attrs\">\n\t\t\t\t\t\t{{ item.title }}\n\t\t\t\t\t</component>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n\n<script>\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\nimport CnIcon from '../CnIcon/CnIcon.vue'\nimport CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'\nimport { isBadgeVariant } from '../../utils/badgeVariants.js'\nimport { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'\n\nconst PAGE_REFRESH_CHANNEL = 'cn:page:refresh'\nconst PRESENTATIONS = ['rows', 'feed', 'inline']\n\n/**\n * Unwrap a value that may be a ref.\n *\n * @param {unknown} value The value.\n * @return {unknown} The plain value.\n */\nfunction unwrap(value) {\n\treturn value && typeof value === 'object' && 'value' in value ? value.value : value\n}\n\n/**\n * CnRecordListWidget — the objects of another schema that point at this\n * record, drawn as the boards draw them (screens-relation-pages).\n *\n * A person page lists its open cases (\"Verlichting fietspad Lindelaan,\n * 2026-0082 · Woo-verzoek, In behandeling, Termijn 1 nov\"), its latest contact\n * moments (an icon by channel, a meta line, the summary) and its relations\n * (\"Secretaris van Buurtvereniging Oost\"). Each is a list of another schema's\n * objects filtered on a reference to this record. The source keys are those of\n * `object-list` (`register`, `schema`, `filter` with the `@objectId` /\n * `@object.<field>` / `@workspace.<key>` tokens, `sort`, `limit`, `extend`,\n * `rowRoute`); what differs is the drawing: `presentation` is `rows`, `feed`\n * or `inline`, and each line is a template (`\"{identifier} · {caseTypeName}\"`,\n * `\"Termijn {deadline|date}\"`).\n *\n * A content-only catalog type: on a card surface the detail host draws the\n * titled card. The widget emits `header` with `{ link, note }` (the\n * `headerLink` and `headerNote` with `{total}` filled in) for that card's\n * header.\n */\nexport default {\n\tname: 'CnRecordListWidget',\n\n\tcomponents: { ChevronRight, CnIcon, CnStatusBadge, NcLoadingIcon },\n\n\tinject: {\n\t\t/** Detail-page object context (`{ objectId, object, register, schema }`). */\n\t\tcnObjectContext: { default: null },\n\t\t/** Page workspace bag, for `@workspace.<key>` tokens. */\n\t\tcnWorkspaceContext: { default: null },\n\t\t/** The host app's translate function. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The list config: `{ register, schema, filter?, sort?, limit?, extend?,\n\t\t * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,\n\t\t * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText? }`.\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/** The current record's id, for the `@objectId` token. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The current record, for `@object.<field>` tokens. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['header'],\n\n\tdata() {\n\t\treturn {\n\t\t\trows: [],\n\t\t\ttotal: 0,\n\t\t\tloading: false,\n\t\t\terror: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {string} `rows`, `feed` or `inline`. */\n\t\tpresentation() {\n\t\t\tconst value = this.content?.presentation\n\t\t\treturn PRESENTATIONS.includes(value) ? value : 'rows'\n\t\t},\n\n\t\t/** @return {object} The token context: record, id and workspace. */\n\t\ttokenCtx() {\n\t\t\tconst injected = unwrap(this.cnObjectContext) || {}\n\t\t\treturn {\n\t\t\t\t...injected,\n\t\t\t\tobjectId: this.objectId ?? injected.objectId ?? this.objectData?.id ?? null,\n\t\t\t\tobject: this.objectData || injected.object || null,\n\t\t\t\tworkspace: unwrap(this.cnWorkspaceContext) || {},\n\t\t\t}\n\t\t},\n\n\t\t/** @return {object} The filter with its tokens resolved. */\n\t\tresolvedFilter() {\n\t\t\tconst filter = this.content?.filter\n\t\t\treturn dropOptionalUnresolved(resolveFilterTokens(filter && typeof filter === 'object' ? filter : {}, this.tokenCtx))\n\t\t},\n\n\t\t/** @return {boolean} A required token (the record id, say) has no value yet. */\n\t\twaiting() {\n\t\t\treturn hasUnresolvedTokens(this.resolvedFilter)\n\t\t},\n\n\t\t/** @return {number} The fetch cap. */\n\t\tlimit() {\n\t\t\tconst value = Number(this.content?.limit)\n\t\t\treturn Number.isFinite(value) && value > 0 ? Math.floor(value) : 5\n\t\t},\n\n\t\t/** @return {string} What a fetch depends on; a change fetches again. */\n\t\trequestKey() {\n\t\t\tconst c = this.content || {}\n\t\t\treturn JSON.stringify([c.register, c.schema, this.resolvedFilter, c.sort, this.limit, c.extend, this.waiting])\n\t\t},\n\n\t\t/** @return {Array<object>} The rows ready to draw. */\n\t\titems() {\n\t\t\tconst c = this.content || {}\n\t\t\treturn this.rows.slice(0, this.limit).map((row, index) => {\n\t\t\t\tconst link = this.rowLink(row)\n\t\t\t\treturn {\n\t\t\t\t\tkey: (row && (row.id || row['@self']?.id)) || `row-${index}`,\n\t\t\t\t\ttag: link ? 'router-link' : 'div',\n\t\t\t\t\tattrs: link ? { to: link } : {},\n\t\t\t\t\ttitle: this.fill(c.title, row),\n\t\t\t\t\tmeta: this.fill(c.meta, row),\n\t\t\t\t\ttext: this.fill(c.text, row),\n\t\t\t\t\tlabel: this.fill(c.label, row),\n\t\t\t\t\ttrailing: c.trailing ? firstFilled(c.trailing, row, this.translate) : '',\n\t\t\t\t\tpill: this.pillOf(row),\n\t\t\t\t\ticon: this.iconOf(row),\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/** @return {object|null} The header link with `{total}` filled and tokens resolved. */\n\t\theaderLink() {\n\t\t\tconst link = this.content?.headerLink\n\t\t\tif (!link || typeof link !== 'object' || typeof link.label !== 'string' || link.label === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst resolved = { label: this.withTotal(link.label) }\n\t\t\tif (link.route) {\n\t\t\t\tresolved.route = link.route\n\t\t\t\tif (link.params && typeof link.params === 'object') {\n\t\t\t\t\tresolved.params = resolveFilterTokens(link.params, this.tokenCtx)\n\t\t\t\t}\n\t\t\t\tif (link.query && typeof link.query === 'object') {\n\t\t\t\t\tresolved.query = resolveFilterTokens(link.query, this.tokenCtx)\n\t\t\t\t}\n\t\t\t} else if (typeof link.href === 'string') {\n\t\t\t\tresolved.href = link.href\n\t\t\t}\n\t\t\treturn resolved\n\t\t},\n\n\t\t/** @return {string} The header note with `{total}` filled. */\n\t\theaderNote() {\n\t\t\tconst note = this.content?.headerNote\n\t\t\treturn typeof note === 'string' && note !== '' ? this.withTotal(note) : ''\n\t\t},\n\n\t\t/** @return {string} The empty line. */\n\t\temptyLabel() {\n\t\t\treturn this.content?.emptyText ? this.translate(this.content.emptyText) : t('nextcloud-vue', 'Nothing here yet')\n\t\t},\n\n\t\t/** @return {string} The error line. */\n\t\terrorLabel() {\n\t\t\treturn this.content?.errorText ? this.translate(this.content.errorText) : t('nextcloud-vue', 'This list could not be loaded.')\n\t\t},\n\n\t\t/** @return {string} The spinner's accessible name. */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading …')\n\t\t},\n\t},\n\n\twatch: {\n\t\trequestKey() {\n\t\t\tthis.fetchRows()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.onRefresh = () => this.fetchRows()\n\t\tsubscribe(PAGE_REFRESH_CHANNEL, this.onRefresh)\n\t\tthis.fetchRows()\n\t},\n\n\tbeforeUnmount() {\n\t\tunsubscribe(PAGE_REFRESH_CHANNEL, this.onRefresh)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a manifest string through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string} The translation.\n\t\t */\n\t\ttranslate(text) {\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * Fill a template from a row, after translating it.\n\t\t *\n\t\t * @param {string} template The template.\n\t\t * @param {object} row The row.\n\t\t * @return {string} The text, '' when a token is empty.\n\t\t */\n\t\tfill(template, row) {\n\t\t\treturn typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), row) : ''\n\t\t},\n\n\t\t/**\n\t\t * Replace `{total}` in a translated label.\n\t\t *\n\t\t * @param {string} label The label.\n\t\t * @return {string} The text.\n\t\t */\n\t\twithTotal(label) {\n\t\t\treturn this.translate(label).replace(/\\{total\\}/g, String(this.total))\n\t\t},\n\n\t\t/**\n\t\t * The route a row opens: `rowRoute` with the id at `rowIdField`.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {object|null} The router location, or null.\n\t\t */\n\t\trowLink(row) {\n\t\t\tconst route = this.content?.rowRoute\n\t\t\tif (!route || !this.$router || !row) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst field = this.content?.rowIdField\n\t\t\tconst id = field ? readPath(row, field) : (row.id || row['@self']?.id)\n\t\t\tif (id === null || id === undefined || id === '' || typeof id === 'object') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn { name: route, params: { id: String(id) } }\n\t\t},\n\n\t\t/**\n\t\t * The row's pill: `{ field, labels?, colorMap?, variant? }`.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {{label: string, variant: string}|null} The pill, or null.\n\t\t */\n\t\tpillOf(row) {\n\t\t\tconst pill = this.content?.pill\n\t\t\tif (!pill || typeof pill !== 'object' || !pill.field) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst raw = readPath(row, pill.field)\n\t\t\tif (raw === null || raw === undefined || raw === '' || typeof raw === 'object') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst key = String(raw)\n\t\t\tconst labels = pill.labels && typeof pill.labels === 'object' ? pill.labels : {}\n\t\t\tconst map = pill.colorMap && typeof pill.colorMap === 'object' ? pill.colorMap : {}\n\t\t\tconst found = Object.keys(map).find((k) => k.toLowerCase() === key.toLowerCase())\n\t\t\tconst variant = found ? map[found] : pill.variant\n\t\t\treturn {\n\t\t\t\tlabel: labels[key] ? this.translate(labels[key]) : key,\n\t\t\t\tvariant: isBadgeVariant(variant) ? variant : 'default',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The feed icon: an icon name, or `{ field, map, default }`.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} The MDI icon name.\n\t\t */\n\t\ticonOf(row) {\n\t\t\tconst icon = this.content?.icon\n\t\t\tif (typeof icon === 'string' && icon !== '') {\n\t\t\t\treturn icon\n\t\t\t}\n\t\t\tif (icon && typeof icon === 'object') {\n\t\t\t\tconst raw = icon.field ? readPath(row, icon.field) : undefined\n\t\t\t\tconst map = icon.map && typeof icon.map === 'object' ? icon.map : {}\n\t\t\t\tif (raw !== null && raw !== undefined && map[String(raw)]) {\n\t\t\t\t\treturn map[String(raw)]\n\t\t\t\t}\n\t\t\t\tif (typeof icon.default === 'string' && icon.default !== '') {\n\t\t\t\t\treturn icon.default\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'CircleSmall'\n\t\t},\n\n\t\t/** Tell the card around this list what its header shows. */\n\t\temitHeader() {\n\t\t\t/**\n\t\t\t * @event header Emitted after every read with the card header's parts.\n\t\t\t * @type {{link: (object|null), note: string}} The header link (resolved, with `{total}` filled) and the note.\n\t\t\t */\n\t\t\tthis.$emit('header', { link: this.headerLink, note: this.headerNote })\n\t\t},\n\n\t\t/**\n\t\t * Fetch the list. Sends nothing while a required token is unresolved\n\t\t * or the source is incomplete.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchRows() {\n\t\t\tconst c = this.content || {}\n\t\t\tif (!c.register || !c.schema || this.waiting) {\n\t\t\t\tthis.rows = []\n\t\t\t\tthis.total = 0\n\t\t\t\tthis.error = false\n\t\t\t\tthis.emitHeader()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.loading = true\n\t\t\tthis.error = false\n\t\t\ttry {\n\t\t\t\tconst [{ default: axios }, { generateUrl }] = await Promise.all([\n\t\t\t\t\timport('@nextcloud/axios'),\n\t\t\t\t\timport('@nextcloud/router'),\n\t\t\t\t])\n\t\t\t\tconst url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: c.register, schema: c.schema })\n\t\t\t\tconst params = { _limit: this.limit }\n\t\t\t\tif (c.sort && typeof c.sort === 'object' && c.sort.field) {\n\t\t\t\t\tparams[`_order[${c.sort.field}]`] = c.sort.dir === 'desc' ? 'desc' : 'asc'\n\t\t\t\t}\n\t\t\t\tif (Array.isArray(c.extend)) {\n\t\t\t\t\tconst extend = c.extend.filter((e) => typeof e === 'string' && e !== '')\n\t\t\t\t\tif (extend.length > 0) {\n\t\t\t\t\t\tparams._extend = extend\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tfor (const [key, value] of Object.entries(this.resolvedFilter)) {\n\t\t\t\t\tif (value && typeof value === 'object' && !Array.isArray(value)) {\n\t\t\t\t\t\tfor (const [op, operand] of Object.entries(value)) {\n\t\t\t\t\t\t\tparams[`${key}[${op}]`] = operand\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (value !== '' && value !== null && value !== undefined) {\n\t\t\t\t\t\tparams[key] = value\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst response = await axios.get(url, { params })\n\t\t\t\tconst data = response && response.data ? response.data : {}\n\t\t\t\tthis.rows = Array.isArray(data.results) ? data.results : []\n\t\t\t\tthis.total = typeof data.total === 'number' ? data.total : this.rows.length\n\t\t\t} catch (e) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn('[CnRecordListWidget] failed to load objects:', e)\n\t\t\t\tthis.rows = []\n\t\t\t\tthis.total = 0\n\t\t\t\tthis.error = true\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.emitHeader()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-record-list__list {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-record-list__empty,\n.cn-record-list__error {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin: 0;\n}\n\n.cn-record-list__loading {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 8px 0;\n}\n\n/* rows */\n.cn-record-list--rows .cn-record-list__item + .cn-record-list__item {\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-record-list__row {\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\tgap: 16px;\n\tpadding: 12px 0;\n\ttext-decoration: none;\n}\n\n.cn-record-list__row--link:hover .cn-record-list__title,\n.cn-record-list__row--link:focus-visible .cn-record-list__title {\n\ttext-decoration: underline;\n}\n\n.cn-record-list__main {\n\tdisplay: flex;\n\tflex: 1 1 auto;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-record-list__title {\n\tfont-size: 15px;\n\tfont-weight: 700;\n}\n\n.cn-record-list__meta {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n.cn-record-list__aside {\n\talign-items: center;\n\tdisplay: flex;\n\tflex: none;\n\tgap: 16px;\n}\n\n.cn-record-list__trailing {\n\tfont-size: 14px;\n\twhite-space: nowrap;\n}\n\n.cn-record-list__chevron {\n\tcolor: var(--color-text-maxcontrast);\n\tflex: none;\n}\n\n/* feed */\n.cn-record-list--feed .cn-record-list__item + .cn-record-list__item {\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-record-list__feed-row {\n\talign-items: flex-start;\n\tdisplay: flex;\n\tgap: 14px;\n\tpadding: 12px 0;\n}\n\n.cn-record-list__feed-icon {\n\talign-items: center;\n\tbackground: var(--color-primary-element-light);\n\tborder-radius: 50%;\n\tcolor: var(--color-primary-element-light-text, var(--color-primary-element));\n\tdisplay: flex;\n\tflex: none;\n\theight: 36px;\n\tjustify-content: center;\n\twidth: 36px;\n}\n\n.cn-record-list__text {\n\tfont-size: 15px;\n}\n\n.cn-record-list--feed .cn-record-list__main {\n\tcolor: var(--color-main-text);\n\ttext-decoration: none;\n}\n\n/* inline */\n.cn-record-list__inline-row {\n\tpadding: 4px 0;\n}\n\n.cn-record-list__label {\n\tmargin-inline-end: 4px;\n}\n\n.cn-record-list__inline-title {\n\tcolor: var(--color-main-text);\n}\n\na.cn-record-list__inline-title {\n\tcolor: var(--color-primary-element);\n\ttext-decoration: underline;\n}\n</style>\n\n<style>\n/* In a narrow side column a row stacks: title, meta, then pill and date. */\n.cn-detail-page__side .cn-record-list__row {\n\talign-items: flex-start;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.cn-detail-page__side .cn-record-list__row .cn-record-list__title {\n\tcolor: var(--color-primary-element);\n\ttext-decoration: underline;\n}\n\n.cn-detail-page__side .cn-record-list__chevron {\n\tdisplay: none;\n}\n</style>\n"],"names":["_normalizeClass","_createElementBlock","_toDisplayString","_openBlock","_createVNode","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_createTextVNode"],"mappings":"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"}

package/dist/esm/components/CnRecordListWidget/index.js

@@ -0,0 +1,31 @@
+import __sfc_main from './CnRecordListWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnRecordListWidget — self-registers the `record-list` widget type (the
+ * objects of another schema that point at this record, as board rows, a feed
+ * or inline links) into the shared dashboardWidgetRegistry at module load.
+ * Renderer only: the list is declared in the manifest.
+ */
+
+
+registerDashboardWidget('record-list', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		register: '',
+		schema: '',
+		filter: {},
+		presentation: 'rows',
+		limit: 5,
+	},
+	displayName: 'Record list',
+	icon: 'FormatListBulleted',
+	surfaces: ['detail-page', 'app-dashboard'],
+});
+
+export { __sfc_main as CnRecordListWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/CnRecordListWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnRecordListWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnRecordListWidget — self-registers the `record-list` widget type (the\n * objects of another schema that point at this record, as board rows, a feed\n * or inline links) into the shared dashboardWidgetRegistry at module load.\n * Renderer only: the list is declared in the manifest.\n */\n\nimport CnRecordListWidget from './CnRecordListWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('record-list', {\n\trenderer: CnRecordListWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tregister: '',\n\t\tschema: '',\n\t\tfilter: {},\n\t\tpresentation: 'rows',\n\t\tlimit: 5,\n\t},\n\tdisplayName: 'Record list',\n\ticon: 'FormatListBulleted',\n\tsurfaces: ['detail-page', 'app-dashboard'],\n})\n\nexport { CnRecordListWidget }\nexport default CnRecordListWidget\n"],"names":["CnRecordListWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,aAAa,EAAE;AACvC,CAAC,QAAQ,EAAEA,UAAkB;AAC7B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,QAAQ,EAAE,EAAE;AACd,EAAE,MAAM,EAAE,EAAE;AACZ,EAAE,MAAM,EAAE,EAAE;AACZ,EAAE,YAAY,EAAE,MAAM;AACtB,EAAE,KAAK,EAAE,CAAC;AACV,EAAE;AACF,CAAC,WAAW,EAAE,aAAa;AAC3B,CAAC,IAAI,EAAE,oBAAoB;AAC3B,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,eAAe,CAAC;AAC3C,CAAC;;;;"}

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue.js

@@ -0,0 +1,10 @@
+import script from './CnSectionsWidget.vue2.js';
+import { render } from './CnSectionsWidget.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-ea4f8722";
+script.__file = "src/components/CnSectionsWidget/CnSectionsWidget.vue";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnSectionsWidget.vue.js.map

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnSectionsWidget.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js

@@ -0,0 +1,351 @@
+import __sfc_main from '../CnDetailWidgetHost/CnDetailWidgetHost.vue.js';
+
+/** Counter for unique heading ids across instances. */
+let instanceCounter = 0;
+
+/**
+ * CnSectionsWidget — the `sections` widget: several widgets in one place,
+ * each under its own heading.
+ *
+ * A tab strip binds one widget per tab, and a tab often holds more than one
+ * thing: the documents list and the case folder (DqZaak), a portal's details
+ * form, house style and sign-in (PtPortalInstellingen). This widget stacks
+ * them as sections under headings with a rule between them (the default), or
+ * as one card per section (`cards: true`), optionally in a main and a side
+ * column (`column: "side"` on a section). A single column of separate titled
+ * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is
+ * for headed sections, and for the two-column card grid a settings tab draws.
+ *
+ * ```json
+ * {
+ *   "type": "sections",
+ *   "content": {
+ *     "sections": [
+ *       { "title": "Documenten", "widgetId": "case-documents" },
+ *       { "title": "Zaakmap", "widget": { "type": "files" } }
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * A section names its widget inline (`widget`) or by id (`widgetId`, a
+ * sibling definition on the same surface). Children render through
+ * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child
+ * behaves here as it does in a tab. A section whose widget draws nothing
+ * shows no heading and takes no space (`hideEmpty`, default true). Stacked
+ * children share one cell, so an object list in a section renders every
+ * fetched row (`content.fit: false`) unless its definition says otherwise.
+ *
+ * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md
+ */
+var script = {
+	name: 'CnSectionsWidget',
+
+	components: { CnDetailWidgetHost: __sfc_main },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.
+		 *   `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.
+		 * - `cards` — draw each section as its own card (default false: headings and a rule between sections).
+		 * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).
+		 *
+		 * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** Sibling widget definitions on the surface, for `widgetId` sections. */
+		availableWidgets: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The bound record's id. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** The loaded record, or null while it is still being fetched. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The resolved object-type slug. */
+		objectType: {
+			type: String,
+			default: '',
+		},
+
+		/** The resolved JSON Schema object, needed by a `data` child. */
+		schemaObject: {
+			type: Object,
+			default: null,
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** The effective object store. */
+		store: {
+			type: Object,
+			default: null,
+		},
+
+		/** Rendering surface forwarded to the children. */
+		surface: {
+			type: String,
+			default: 'detail-page',
+		},
+
+		/** Object context forwarded to integration children. */
+		integrationContext: {
+			type: Object,
+			default: null,
+		},
+
+		/** The consumer's component registry, for custom child widget types. */
+		cnRegistry: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		instanceCounter += 1;
+		return {
+			uid: instanceCounter,
+			/**
+			 * Section key to "has this section rendered anything".
+			 *
+			 * @type {Record<string, boolean>}
+			 */
+			filled: {},
+		}
+	},
+
+	computed: {
+		/**
+		 * Whether each section is its own card.
+		 *
+		 * @return {boolean}
+		 */
+		cards() {
+			return this.content?.cards === true
+		},
+
+		/**
+		 * Whether an empty section hides.
+		 *
+		 * @return {boolean}
+		 */
+		hideEmpty() {
+			return this.content?.hideEmpty !== false
+		},
+
+		/**
+		 * The sections to render: a stable key, a translated title, the column
+		 * and the widget definition. A section whose widget cannot be found is
+		 * dropped (with a development warning for an unknown id).
+		 *
+		 * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings
+		 */
+		sections() {
+			const raw = Array.isArray(this.content?.sections) ? this.content.sections : [];
+			const out = [];
+			raw.forEach((entry, index) => {
+				if (!entry || typeof entry !== 'object') {
+					return
+				}
+				let widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null;
+				if (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {
+					widget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null;
+					if (!widget) {
+						// eslint-disable-next-line no-console
+						console.warn(`[CnSectionsWidget] section widgetId "${entry.widgetId}" names no widget on this surface; section skipped.`);
+					}
+				}
+				if (!widget || !widget.type) {
+					return
+				}
+				out.push({
+					key: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),
+					title: this.tr(entry.title || entry.label || ''),
+					description: this.tr(entry.description || ''),
+					column: entry.column === 'side' ? 'side' : 'main',
+					widget: this.shared(widget),
+				});
+			});
+			return out
+		},
+
+		/**
+		 * Whether any section sits in the side column.
+		 *
+		 * @return {boolean}
+		 */
+		twoColumn() {
+			return this.sections.some((section) => section.column === 'side')
+		},
+
+		/**
+		 * The columns to draw, each with its sections in order.
+		 *
+		 * @return {Array<{id: string, sections: Array<object>}>}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column
+		 */
+		columns() {
+			if (!this.twoColumn) {
+				return [{ id: 'main', sections: this.sections }]
+			}
+			return [
+				{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },
+				{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },
+			]
+		},
+	},
+
+	beforeUnmount() {
+		this.stopObserving();
+	},
+
+	methods: {
+		/**
+		 * Translate through the host app.
+		 *
+		 * @param {string} text The text.
+		 * @return {string}
+		 */
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The heading id of a section.
+		 *
+		 * @param {string} key The section key.
+		 * @return {string}
+		 */
+		headingId(key) {
+			return `cn-sections-${this.uid}-${key}`.replace(/[^\w-]/g, '-')
+		},
+
+		/**
+		 * A child definition with the cell budget off: stacked children share
+		 * one cell, so an object list must not size itself to that cell.
+		 *
+		 * @param {object} widget The definition.
+		 * @return {object}
+		 */
+		shared(widget) {
+			const content = widget.content || {};
+			if (Object.hasOwn(content, 'fit')) {
+				return widget
+			}
+			return { ...widget, content: { ...content, fit: false } }
+		},
+
+		/**
+		 * Whether a section shows its heading and takes space.
+		 *
+		 * @param {string} key The section key.
+		 * @return {boolean}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent
+		 */
+		isShown(key) {
+			return !this.hideEmpty || this.filled[key] === true
+		},
+
+		/**
+		 * Watch one section's host for content, so its heading appears when
+		 * the widget renders and stays away when it never does. A
+		 * MutationObserver, because most widgets mount empty and fill after a
+		 * fetch.
+		 *
+		 * @param {string} key The section key.
+		 * @param {HTMLElement|null} el The host wrapper, or null on teardown.
+		 * @return {void}
+		 */
+		setHostRef(key, el) {
+			this.observers = this.observers || {};
+			if (this.observers[key]) {
+				this.observers[key].disconnect();
+				delete this.observers[key];
+			}
+			if (!el) {
+				return
+			}
+			// Assign only on a change: `filled` drives the template, so an
+			// unconditional write re-renders, mutates, and fires again.
+			const measure = () => {
+				const next = this.hasContent(el);
+				if (this.filled[key] === next) {
+					return
+				}
+				this.filled = { ...this.filled, [key]: next };
+			};
+			if (typeof MutationObserver === 'function') {
+				const observer = new MutationObserver(measure);
+				observer.observe(el, { childList: true, subtree: true, characterData: true });
+				this.observers[key] = observer;
+			}
+			// Not synchronously: a ref callback runs during the patch.
+			this.$nextTick(measure);
+		},
+
+		/**
+		 * Whether a host rendered anything a reader would see: text (an empty
+		 * state counts), or a graphical or interactive element.
+		 *
+		 * @param {HTMLElement} el The host wrapper.
+		 * @return {boolean}
+		 */
+		hasContent(el) {
+			if (!el) {
+				return false
+			}
+			if (el.textContent && el.textContent.trim().length > 0) {
+				return true
+			}
+			return el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null
+		},
+
+		/**
+		 * Drop every observer.
+		 *
+		 * @return {void}
+		 */
+		stopObserving() {
+			for (const observer of Object.values(this.observers || {})) {
+				observer.disconnect();
+			}
+			this.observers = {};
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnSectionsWidget.vue2.js.map

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnSectionsWidget.vue2.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t     resolve renders nothing, and a heading over nothing is a\n\t\t\t\t     label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t     empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t     could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n *   \"type\": \"sections\",\n *   \"content\": {\n *     \"sections\": [\n *       { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n *       { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n *     ]\n *   }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t *   `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["CnDetailWidgetHost"],"mappings":";;AAkEA;AACA,IAAI,kBAAkB,EAAA;;AAEtB;AACC;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;;;AAIA;;;;AAIA;AACA;;;AAGA;;AAEA;;AAEA;AACA;AACA;;AAED,aAAe;CACd,IAAI,EAAE,kBAAkB;;AAExB,CAAA,UAAU,EAAE,sBAAEA,YAAoB;;AAElC,CAAA,MAAM,EAAE;AACP,EAAA,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,KAAK,KAAK;EAC5C;;AAED,CAAA,KAAK,EAAE;AACN;;AAEC;AACA;AACA;AACA;AACA;AACA;AACA;;AAED,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;;AAED;AACA,EAAA,gBAAgB,EAAE;GACjB,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;;AAGD,EAAA,QAAQ,EAAE;AACT,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;EACA,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;EAGD,YAAY,EAAE;GACb,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,QAAQ,EAAE;AACT,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,MAAM,EAAE;AACP,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,aAAa;GACtB;;;AAGD,EAAA,kBAAkB,EAAE;GACnB,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;EACD;;AAED,CAAA,IAAI,GAAG;AACN,EAAA,eAAc,IAAK,EAAA;AACnB,EAAA,OAAO;AACN,GAAA,GAAG,EAAE,eAAe;AACpB;AACC;AACA;;;AAGD,GAAA,MAAM,EAAE,EAAE;AACX,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;;AAED,EAAA,KAAK,GAAG;AACP,GAAA,OAAO,IAAI,CAAC,OAAO,EAAE,KAAI,KAAM,IAAG;GAClC;;AAED;;AAEC;AACA;;EAED,SAAS,GAAG;AACX,GAAA,OAAO,IAAI,CAAC,OAAO,EAAE,SAAQ,KAAM,KAAI;GACvC;;AAED;;;;AAIC;AACA;AACA;;EAED,QAAQ,GAAG;AACV,GAAA,MAAM,GAAE,GAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAA,GAAI,IAAI,CAAC,OAAO,CAAC,QAAO,GAAI,GAAC;GAC7E,MAAM,GAAE,GAAI,GAAC;GACb,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK;AAC7B,IAAA,IAAI,CAAC,KAAM,IAAG,OAAO,KAAM,KAAI,QAAQ,EAAE;KACxC,MAAK;AACN,KAAA;AACA,IAAA,IAAI,MAAO,GAAE,KAAK,CAAC,MAAO,IAAG,OAAO,KAAK,CAAC,WAAW,QAAO,GAAI,KAAK,CAAC,MAAK,GAAI,KAAG;AAClF,IAAA,IAAI,CAAC,MAAO,IAAG,OAAO,KAAK,CAAC,QAAO,KAAM,QAAS,IAAG,KAAK,CAAC,QAAO,KAAM,EAAE,EAAE;AAC3E,KAAA,MAAO,GAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA,IAAK,CAAC,CAAC,EAAG,KAAI,KAAK,CAAC,QAAQ,CAAE,IAAG,KAAG;KAC/E,IAAI,CAAC,MAAM,EAAE;AACZ;MACA,OAAO,CAAC,IAAI,CAAC,CAAC,qCAAqC,EAAE,KAAK,CAAC,QAAQ,CAAC,mDAAmD,CAAC,EAAA;AACzH,MAAA;AACD,KAAA;IACA,IAAI,CAAC,MAAK,IAAK,CAAC,MAAM,CAAC,IAAI,EAAE;KAC5B,MAAK;AACN,KAAA;AACA,IAAA,GAAG,CAAC,IAAI,CAAC;AACR,KAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAE,IAAK,MAAM,CAAC,EAAG,IAAG,KAAK,CAAC,QAAS,IAAG,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAClF,KAAA,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,IAAG,KAAK,CAAC,KAAI,IAAK,EAAE,CAAC;AAChD,KAAA,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAU,IAAK,EAAE,CAAC;AAC7C,KAAA,MAAM,EAAE,KAAK,CAAC,WAAW,MAAO,GAAE,SAAS,MAAM;KACjD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;KAC3B,EAAA;IACD,EAAA;AACD,GAAA,OAAO,GAAE;GACT;;AAED;AACC;AACA;AACA;;EAED,SAAS,GAAG;GACX,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,MAAK,KAAM,MAAM,CAAA;GAChE;;AAED;AACC;AACA;;AAEA;;AAED,EAAA,OAAO,GAAG;AACT,GAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACpB,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAA;AAChD,IAAA;AACA,GAAA,OAAO;AACN,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,MAAM,GAAG;AACtF,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,MAAM,GAAG;AACvF,IAAA;GACA;EACD;;AAED,CAAA,aAAa,GAAG;AACf,EAAA,IAAI,CAAC,aAAa,GAAC;EACnB;;AAED,CAAA,OAAO,EAAE;AACR;;AAEC;;AAEA;;AAED,EAAA,EAAE,CAAC,IAAI,EAAE;AACR,GAAA,IAAI,OAAO,IAAG,KAAM,QAAO,IAAK,SAAS,EAAE,EAAE;AAC5C,IAAA,OAAO,EAAC;AACT,IAAA;AACA,GAAA,OAAO,OAAO,IAAI,CAAC,WAAY,KAAI,UAAW,GAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAA,GAAI,IAAG;GAC5E;;AAED;;AAEC;AACA;AACA;;AAED,EAAA,SAAS,CAAC,GAAG,EAAE;GACd,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAA;GAC9D;;AAED;;;AAGC;AACA;AACA;;AAED,EAAA,MAAM,CAAC,MAAM,EAAE;AACd,GAAA,MAAM,OAAQ,GAAE,MAAM,CAAC,OAAM,IAAK,GAAC;AACnC,GAAA,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;IAClC,OAAO,MAAK;AACb,IAAA;GACA,OAAO,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,KAAI,EAAI,EAAA;GACxD;;AAED;AACC;AACA;AACA;AACA;AACA;;EAED,OAAO,CAAC,GAAG,EAAE;AACZ,GAAA,OAAO,CAAC,IAAI,CAAC,SAAU,IAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAI,IAAG;GAClD;;AAED;;AAEC;;AAEA;AACA;AACA;;;;AAID,EAAA,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE;AACnB,GAAA,IAAI,CAAC,YAAY,IAAI,CAAC,SAAU,IAAG,GAAC;GACpC,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;AACxB,IAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU,GAAC;IAC/B,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,EAAA;AAC1B,IAAA;AACA,GAAA,IAAI,CAAC,EAAE,EAAE;IACR,MAAK;AACN,IAAA;;;AAGA,GAAA,MAAM,OAAQ,GAAE,MAAM;IACrB,MAAM,IAAK,GAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAAA;IAC/B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAI,IAAI,EAAE;KAC9B,MAAK;AACN,KAAA;AACA,IAAA,IAAI,CAAC,MAAK,GAAI,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,IAAK,GAAA;AAC7C,KAAA;AACA,GAAA,IAAI,OAAO,gBAAiB,KAAI,UAAU,EAAE;AAC3C,IAAA,MAAM,QAAS,GAAE,IAAI,gBAAgB,CAAC,OAAO,EAAA;AAC7C,IAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAA;IAC5E,IAAI,CAAC,SAAS,CAAC,GAAG,CAAE,GAAE,SAAO;AAC9B,IAAA;;GAEA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAA;GACtB;;AAED;;;AAGC;AACA;AACA;;AAED,EAAA,UAAU,CAAC,EAAE,EAAE;AACd,GAAA,IAAI,CAAC,EAAE,EAAE;IACR,OAAO,KAAI;AACZ,IAAA;GACA,IAAI,EAAE,CAAC,WAAY,IAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAK,GAAI,CAAC,EAAE;AACvD,IAAA,OAAO,IAAG;AACX,IAAA;AACA,GAAA,OAAO,EAAE,CAAC,aAAa,CAAC,0DAA0D,CAAE,KAAI,IAAG;GAC3F;;AAED;AACC;AACA;;;AAGD,EAAA,aAAa,GAAG;GACf,KAAK,MAAM,QAAO,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAQ,IAAK,EAAE,CAAC,EAAE;AAC3D,IAAA,QAAQ,CAAC,UAAU,GAAC;AACrB,IAAA;AACA,GAAA,IAAI,CAAC,SAAQ,GAAI,GAAC;GAClB;EACD;AACF;;;;"}

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

@@ -0,0 +1,71 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString, createCommentVNode, createElementVNode, createVNode } from 'vue';
+
+const _hoisted_1 = ["aria-labelledby", "data-testid"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-sections-widget__description"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnDetailWidgetHost = resolveComponent("CnDetailWidgetHost");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["cn-sections-widget", {
+			'cn-sections-widget--cards': $options.cards,
+			'cn-sections-widget--two-column': $options.twoColumn,
+		}]),
+    "data-testid": "cn-sections-widget"
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (column) => {
+      return (openBlock(), createElementBlock("div", {
+        key: column.id,
+        class: normalizeClass(["cn-sections-widget__column", `cn-sections-widget__column--${column.id}`])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(column.sections, (section) => {
+          return (openBlock(), createElementBlock("section", {
+            key: section.key,
+            class: normalizeClass(["cn-sections-widget__section", { 'cn-sections-widget__section--empty': !$options.isShown(section.key) }]),
+            "aria-labelledby": section.title && $options.isShown(section.key) ? $options.headingId(section.key) : undefined,
+            "data-testid": `cn-section-${section.key}`
+          }, [
+            (section.title && $options.isShown(section.key))
+              ? (openBlock(), createElementBlock("h3", {
+                  key: 0,
+                  id: $options.headingId(section.key),
+                  class: "cn-sections-widget__heading"
+                }, toDisplayString(section.title), 9 /* TEXT, PROPS */, _hoisted_2))
+              : createCommentVNode("v-if", true),
+            (section.description && $options.isShown(section.key))
+              ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(section.description), 1 /* TEXT */))
+              : createCommentVNode("v-if", true),
+            createElementVNode("div", {
+              ref_for: true,
+              ref: (el) => $options.setHostRef(section.key, el),
+              class: "cn-sections-widget__body"
+            }, [
+              createVNode(_component_CnDetailWidgetHost, {
+                widget: section.widget,
+                chrome: "bare",
+                objectId: $props.objectId,
+                object: $props.objectData,
+                objectType: $props.objectType,
+                schemaObject: $props.schemaObject,
+                register: $props.register,
+                schema: $props.schema,
+                store: $props.store,
+                surface: $props.surface,
+                integrationContext: $props.integrationContext,
+                cnRegistry: $props.cnRegistry,
+                availableWidgets: $props.availableWidgets
+              }, null, 8 /* PROPS */, ["widget", "objectId", "object", "objectType", "schemaObject", "register", "schema", "store", "surface", "integrationContext", "cnRegistry", "availableWidgets"])
+            ], 512 /* NEED_PATCH */)
+          ], 10 /* CLASS, PROPS */, _hoisted_1))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 2 /* CLASS */))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 2 /* CLASS */))
+}
+
+export { render };
+//# sourceMappingURL=CnSectionsWidget.vue3.js.map

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnSectionsWidget.vue3.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue?vue&type=template&id=ea4f8722&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t     resolve renders nothing, and a heading over nothing is a\n\t\t\t\t     label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t     empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t     could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n *   \"type\": \"sections\",\n *   \"content\": {\n *     \"sections\": [\n *       { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n *       { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n *     ]\n *   }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t *   `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_renderList","_toDisplayString","_createElementVNode"],"mappings":";;;;;;AAyCS,EAAA,KAAC,EAAC,iCAAiC;;;;;;;AA7B1C,IAAA,KAAK,kBAAC,oBAAoB,EAAA;gCACvB,QAAA,CAAA,KAAA;qCAAA,QAAA,CAAA,SAAA;;iBAIQ,EAAC,oBAAoB;;sBAC/BA,8CACiB,QAAO,CAAA,OAAA,EAAA,CAAjB,MAAM,KAAA;2BADbA;QAEC,GAAG,EAAE,MAAM,CAAC,EAAE;AACd,QAAA,KAAI,EAACC,cAAA,CAAA,CAAA,4BAA4B,EACK,CAAA,4BAAA,EAAA,MAAM,CAAC,EAAC,CAAA,CAAA,CAAA,CAAA;;AAC9C,SAAAC,SAAA,CAAA,IAAA,CAAA,EAAAF,kBAAA,SACkB,EAAA,IAAA,EAAAG,UAAA,CAAA,MAAM,CAAC,QAAQ,GAA1B,OAAO,KAAA;+BADdH;YAEC,GAAI,EAAC,OAAO,CAAC,GAAG;iBACZ,kBAAC,6BAA4B,EAAA,EAAA,oCAAA,EAAA,CACV,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AACvB,YAAA,iBAAC,EAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,IAAA,QAAA,CAAA,SAAA,CAAA,OAAA,CAAA,GAAA,IAAA,SAAA;YACD,aAAW,EAAA,CAAA,WAAA,EAAgB,OAAO,CAAC,GAAG,CAAA,CAAA;;AAKtC,YAAA,CAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA;8BADDA,kBAKG,CAAA,IAAA,EAAA;;AAHD,kBAAA,EAAE,EAAE,QAAA,CAAA,SAAS,CAAC,OAAO,CAAC,GAAG,CAAA;AAC1B,kBAAA,KAAK,EAAC,6BAA6B;AAChC,iBAAA,EAAAI,eAAA,CAAA,OAAO,CAAC,KAAK,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;;AAGV,YAAA,CAAA,OAAO,CAAC,WAAW,IAAI,gBAAO,CAAC,OAAO,CAAC,GAAG,CAAA;AADjD,iBAAAF,SAAA,EAAA,EAAAF,kBAAA,CAII,GAJJ,EAAA,UAII,EADCI,eAAA,CAAA,OAAM,CAAC,WAAW,CAAA,EAAA,CAAA,YAAA;;YAKrBC;;cAAI,GAAG,EAAA,CAAG,EAAE,KAAK,QAAA,CAAA,UAAE,CAAA,OAAA,CAAA,GAAA,EAAA,EAAA,CAAA;AAAA,cAAA,KAAA,EAAA,0BAAA;;;gBAElB,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,gBAAA,MAAM,EAAC,MAAM;AACZ,gBAAA,QAAQ,EAAE,MAAI,CAAA,QAAA;AACd,gBAAA,MAAM,EAAE,MAAI,CAAA,UAAA;AACZ,gBAAA,UAAU,EAAE,MAAI,CAAA,UAAA;AAChB,gBAAA,YAAY,EAAE,MAAY,CAAA,YAAA;AAC1B,gBAAA,QAAQ,EAAE,MAAQ,CAAA,QAAA;AAClB,gBAAA,MAAM,EAAE,MAAM,CAAA,MAAA;AACd,gBAAA,KAAE,EAAA,MAAA,CAAA,KAAA;AACF,gBAAA,OAAK,EAAA,MAAA,CAAA,OAAA;AACL,gBAAA,kBAAA,EAAA,MAAA,CAAA,kBAAA;AACD,gBAAA,UAAA,EAAA,MAAA,CAAA,UAAA;;;;;;;;;;;;;"}