@nextcloud/vue 9.12.0 → 9.13.1

package/dist/chunks/NcPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcPopover.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Is the popover currently shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * ARIA Role of the popup\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `no-focus-trap` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover no-focus-trap>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With logical placement\n\nIf the text flow is language specific (e.g. UI is shown for right-to-left language),\nalso the popover often needs to be adjusted when not rendered on top or bottom (default).\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"ltr\">\n\t\t\t\tLTR\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"rtl\">\n\t\t\t\tRTL\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<div class=\"content\" :dir>\n\t\t\t<NcPopover :key=\"dir\"\n\t\t\t\tplacement=\"end\"\n\t\t\t\t:triggers=\"['hover']\">\n\t\t\t\t<template #trigger>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\tHover me\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\tThis will be shown on the logical end of the button.\n\t\t\t\t</template>\n\t\t\t</NcPopover>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdir: 'ltr',\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.content {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-around;\n}\n\nfieldset {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n}\n</style>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown\n\t\tref=\"popover\"\n\t\tv-model:shown=\"internalShown\"\n\t\t:autoHide=\"!noCloseOnClickOutside && closeOnClickOutside\"\n\t\t:boundary=\"boundary || undefined\"\n\t\t:container\n\t\t:delay\n\t\t:distance=\"4 /* One --default-grid-baseline (4px). No arrow to bridge a larger gap anymore. */\"\n\t\thandleResize\n\t\t:noAutoFocus=\"true /* Handled by the focus trap */\"\n\t\t:placement=\"internalPlacement\"\n\t\t:popperClass=\"[$style.ncPopover, popoverBaseClass]\"\n\t\t:popperTriggers\n\t\t:popperHideTriggers\n\t\t:popperShowTriggers\n\t\t:theme\n\t\t:triggers=\"internalTriggers\"\n\t\t:hideTriggers\n\t\t:showTriggers\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@applyShow=\"afterShow\"\n\t\t@applyHide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popupRole=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown, options } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn } from 'vue'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nconst theme = 'nc-popover-9'\n\n// NcPopover has a custom theme to have a custom name but same as the default \"dropdown\" theme\noptions.themes[theme] = structuredClone(options.themes.dropdown)\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Element to use for calculating the popper boundary (size and position).\n\t\t * Either a query string or the actual HTMLElement.\n\t\t */\n\t\tboundary: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Automatically hide the popover on click outside.\n\t\t *\n\t\t * @deprecated Use `no-close-on-click-outside` instead (inverted value)\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the automatic popover hide on click outside.\n\t\t */\n\t\tnoCloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Container where to mount the popover.\n\t\t * Either a select query or `false` to mount to the parent node.\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Delay for showing or hiding the popover.\n\t\t *\n\t\t * Can either be a number or an object to configure different delays (`{ show: number, hide: number }`).\n\t\t */\n\t\tdelay: {\n\t\t\ttype: [Number, Object],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Where to place the popover.\n\t\t *\n\t\t * This consists of the vertical placement and the horizontal placement.\n\t\t * E.g. `bottom` will place the popover on the bottom of the trigger (horizontally centered),\n\t\t * while `buttom-start` will horizontally align the popover on the logical start (e.g. for LTR layout on the left.).\n\t\t * The `start` or `end` placement will align the popover on the left or right side or the trigger element.\n\t\t *\n\t\t * @type {'auto'|'auto-start'|'auto-end'|'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'start'|'end'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Class to be applied to the popover base\n\t\t */\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover on the popover container itself.\n\t\t * This is useful if you set `triggers` to `hover` and also want the popover to stay open while hovering the popover itself.\n\t\t *\n\t\t * It is possible to also pass an object to define different triggers for hide and show `{ show: ['hover'], hide: ['click'] }`.\n\t\t */\n\t\tpopoverTriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [Boolean, HTMLElement, SVGElement, String, Function],\n\t\t},\n\n\t\t/**\n\t\t * Show or hide the popper\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover.\n\t\t *\n\t\t * If you pass an empty array then only the `shown` prop can control the popover state.\n\t\t * Following events are available:\n\t\t * - `'hover'`\n\t\t * - `'click'`\n\t\t * - `'focus'`\n\t\t * - `'touch'`\n\t\t *\n\t\t * It is also possible to pass an object to have different events for show and hide:\n\t\t * `{ hide: ['click'], show: ['click', 'hover'] }`\n\t\t */\n\t\ttriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: () => ['click'],\n\t\t},\n\t},\n\n\temits: [\n\t\t'afterShow',\n\t\t'afterHide',\n\t\t'update:shown',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpopperTriggers() {\n\t\t\tif (this.popoverTriggers && Array.isArray(this.popoverTriggers)) {\n\t\t\t\treturn this.popoverTriggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperHideTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperShowTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalTriggers() {\n\t\t\tif (this.triggers && Array.isArray(this.triggers)) {\n\t\t\t\treturn this.triggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\thideTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tshowTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalPlacement() {\n\t\t\tif (this.placement === 'start') {\n\t\t\t\treturn isRtl ? 'right' : 'left'\n\t\t\t} else if (this.placement === 'end') {\n\t\t\t\treturn isRtl ? 'left' : 'right'\n\t\t\t}\n\t\t\treturn this.placement\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t *\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\treturn this.$refs.popover?.$refs.popper?.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (error) {\n\t\t\t\tlogger.warn('[NcPopover] Failed to clear focus trap', { error })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterShow')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * On component unmounting Vue:\n\t\t\t * 1. Resets the template ref to null\n\t\t\t * 2. Triggers <Dropdown> `beforeUnmount` - it emits `apply-hide` event\n\t\t\t *   2.1. At that moment this.$refs.popover is null already, and we cannot use `this.getPopoverContentElement()`\n\t\t\t *   2.2. We can ignore emitting `after-hide` event (was also not the case on stable8)\n\t\t\t * 3. Actually removes <Dropdown> node\n\t\t\t * 4. Triggers <Dropdown> `unmounted`\n\t\t\t */\n\t\t\tthis.getPopoverContentElement()?.addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterHide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" module>\n// Class is built by floating-vue as \"v-popper--theme-{THEME}\"\n.ncPopover:global(.v-popper--theme-nc-popover-9) {\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t// Size class comes from the floating-vue library we use\n\t:global(.resize-observer) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tz-index: -1;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\topacity: 0;\n\n\t\tobject {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: 0;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\tpointer-events: none;\n\t\t\tz-index: -1;\n\t\t}\n\t}\n\n\t&:global(.v-popper__popper) {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t:global(.v-popper__wrapper) {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t// Scale from where the arrow used to point (towards the trigger)\n\t\t\ttransition: transform var(--animation-quick);\n\t\t}\n\n\t\t:global(.v-popper__inner) {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t// The arrow is removed in favour of the open/close scale animation\n\t\t:global(.v-popper__arrow-container) {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// Scale the popover from the edge facing the trigger (where the arrow used to be)\n\t\t&[data-popper-placement^='top'] :global(.v-popper__wrapper) {\n\t\t\ttransform-origin: bottom center;\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] :global(.v-popper__wrapper) {\n\t\t\ttransform-origin: top center;\n\t\t}\n\n\t\t&[data-popper-placement^='right'] :global(.v-popper__wrapper) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */\n\t\t\ttransform-origin: left center;\n\t\t}\n\n\t\t&[data-popper-placement^='left'] :global(.v-popper__wrapper) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */\n\t\t\ttransform-origin: right center;\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\n\t\t\t:global(.v-popper__wrapper) {\n\t\t\t\ttransform: scale(0.96);\n\t\t\t}\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\n\t\t\t:global(.v-popper__wrapper) {\n\t\t\t\ttransform: scale(1);\n\t\t\t}\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcPopoverTriggerProvider","options","_createBlock","_withCtx","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"NcPopover.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Is the popover currently shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * ARIA Role of the popup\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `no-focus-trap` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover no-focus-trap>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With logical placement\n\nIf the text flow is language specific (e.g. UI is shown for right-to-left language),\nalso the popover often needs to be adjusted when not rendered on top or bottom (default).\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"ltr\">\n\t\t\t\tLTR\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"rtl\">\n\t\t\t\tRTL\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<div class=\"content\" :dir>\n\t\t\t<NcPopover :key=\"dir\"\n\t\t\t\tplacement=\"end\"\n\t\t\t\t:triggers=\"['hover']\">\n\t\t\t\t<template #trigger>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\tHover me\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\tThis will be shown on the logical end of the button.\n\t\t\t\t</template>\n\t\t\t</NcPopover>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdir: 'ltr',\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.content {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-around;\n}\n\nfieldset {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n}\n</style>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown\n\t\tref=\"popover\"\n\t\tv-model:shown=\"internalShown\"\n\t\t:autoHide=\"!noCloseOnClickOutside && closeOnClickOutside\"\n\t\t:boundary=\"boundary || undefined\"\n\t\t:container\n\t\t:delay\n\t\t:distance=\"4 /* One --default-grid-baseline (4px). No arrow to bridge a larger gap anymore. */\"\n\t\thandleResize\n\t\t:noAutoFocus=\"true /* Handled by the focus trap */\"\n\t\t:placement=\"internalPlacement\"\n\t\t:popperClass=\"[$style.ncPopover, popoverBaseClass]\"\n\t\t:popperTriggers\n\t\t:popperHideTriggers\n\t\t:popperShowTriggers\n\t\t:theme\n\t\t:triggers=\"internalTriggers\"\n\t\t:hideTriggers\n\t\t:showTriggers\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@applyShow=\"afterShow\"\n\t\t@applyHide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popupRole=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown, options } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn } from 'vue'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nconst theme = 'nc-popover-9'\n\n// NcPopover has a custom theme to have a custom name but same as the default \"dropdown\" theme\noptions.themes[theme] = structuredClone(options.themes.dropdown)\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Element to use for calculating the popper boundary (size and position).\n\t\t * Either a query string or the actual HTMLElement.\n\t\t */\n\t\tboundary: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Automatically hide the popover on click outside.\n\t\t *\n\t\t * @deprecated Use `no-close-on-click-outside` instead (inverted value)\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the automatic popover hide on click outside.\n\t\t */\n\t\tnoCloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Container where to mount the popover.\n\t\t * Either a select query or `false` to mount to the parent node.\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Delay for showing or hiding the popover.\n\t\t *\n\t\t * Can either be a number or an object to configure different delays (`{ show: number, hide: number }`).\n\t\t */\n\t\tdelay: {\n\t\t\ttype: [Number, Object],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Where to place the popover.\n\t\t *\n\t\t * This consists of the vertical placement and the horizontal placement.\n\t\t * E.g. `bottom` will place the popover on the bottom of the trigger (horizontally centered),\n\t\t * while `buttom-start` will horizontally align the popover on the logical start (e.g. for LTR layout on the left.).\n\t\t * The `start` or `end` placement will align the popover on the left or right side or the trigger element.\n\t\t *\n\t\t * @type {'auto'|'auto-start'|'auto-end'|'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'start'|'end'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Class to be applied to the popover base\n\t\t */\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover on the popover container itself.\n\t\t * This is useful if you set `triggers` to `hover` and also want the popover to stay open while hovering the popover itself.\n\t\t *\n\t\t * It is possible to also pass an object to define different triggers for hide and show `{ show: ['hover'], hide: ['click'] }`.\n\t\t */\n\t\tpopoverTriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [Boolean, HTMLElement, SVGElement, String, Function],\n\t\t},\n\n\t\t/**\n\t\t * Show or hide the popper\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover.\n\t\t *\n\t\t * If you pass an empty array then only the `shown` prop can control the popover state.\n\t\t * Following events are available:\n\t\t * - `'hover'`\n\t\t * - `'click'`\n\t\t * - `'focus'`\n\t\t * - `'touch'`\n\t\t *\n\t\t * It is also possible to pass an object to have different events for show and hide:\n\t\t * `{ hide: ['click'], show: ['click', 'hover'] }`\n\t\t */\n\t\ttriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: () => ['click'],\n\t\t},\n\t},\n\n\temits: [\n\t\t'afterShow',\n\t\t'afterHide',\n\t\t'update:shown',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpopperTriggers() {\n\t\t\tif (this.popoverTriggers && Array.isArray(this.popoverTriggers)) {\n\t\t\t\treturn this.popoverTriggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperHideTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperShowTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalTriggers() {\n\t\t\tif (this.triggers && Array.isArray(this.triggers)) {\n\t\t\t\treturn this.triggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\thideTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tshowTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalPlacement() {\n\t\t\tif (this.placement === 'start') {\n\t\t\t\treturn isRtl ? 'right' : 'left'\n\t\t\t} else if (this.placement === 'end') {\n\t\t\t\treturn isRtl ? 'left' : 'right'\n\t\t\t}\n\t\t\treturn this.placement\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t *\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\treturn this.$refs.popover?.$refs.popper?.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (error) {\n\t\t\t\tlogger.warn('[NcPopover] Failed to clear focus trap', { error })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterShow')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * On component unmounting Vue:\n\t\t\t * 1. Resets the template ref to null\n\t\t\t * 2. Triggers <Dropdown> `beforeUnmount` - it emits `apply-hide` event\n\t\t\t *   2.1. At that moment this.$refs.popover is null already, and we cannot use `this.getPopoverContentElement()`\n\t\t\t *   2.2. We can ignore emitting `after-hide` event (was also not the case on stable8)\n\t\t\t * 3. Actually removes <Dropdown> node\n\t\t\t * 4. Triggers <Dropdown> `unmounted`\n\t\t\t */\n\t\t\tthis.getPopoverContentElement()?.addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterHide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" module>\n// Class is built by floating-vue as \"v-popper--theme-{THEME}\"\n.ncPopover:global(.v-popper--theme-nc-popover-9) {\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t// Size class comes from the floating-vue library we use\n\t:global(.resize-observer) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tz-index: -1;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\topacity: 0;\n\n\t\tobject {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: 0;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\tpointer-events: none;\n\t\t\tz-index: -1;\n\t\t}\n\t}\n\n\t&:global(.v-popper__popper) {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t:global(.v-popper__wrapper) {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t// Scale from where the arrow used to point (towards the trigger)\n\t\t\ttransition: transform var(--animation-quick);\n\t\t}\n\n\t\t:global(.v-popper__inner) {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t// The arrow is removed in favour of the open/close scale animation\n\t\t:global(.v-popper__arrow-container) {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// Scale the popover from the edge facing the trigger (where the arrow used to be)\n\t\t&[data-popper-placement^='top'] :global(.v-popper__wrapper) {\n\t\t\ttransform-origin: bottom center;\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] :global(.v-popper__wrapper) {\n\t\t\ttransform-origin: top center;\n\t\t}\n\n\t\t&[data-popper-placement^='right'] :global(.v-popper__wrapper) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */\n\t\t\ttransform-origin: left center;\n\t\t}\n\n\t\t&[data-popper-placement^='left'] :global(.v-popper__wrapper) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */\n\t\t\ttransform-origin: right center;\n\t\t}\n\n\t\t&:global(.v-popper__popper--hidden) {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\n\t\t\t:global(.v-popper__wrapper) {\n\t\t\t\ttransform: scale(0.96);\n\t\t\t}\n\t\t}\n\n\t\t&:global(.v-popper__popper--shown) {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\n\t\t\t:global(.v-popper__wrapper) {\n\t\t\t\ttransform: scale(1);\n\t\t\t}\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcPopoverTriggerProvider","options","_createBlock","_withCtx","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/chunks/NcRadioGroup.mjs

@@ -60,9 +60,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_yHVcN";
+const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_JW-uf";
 const style0 = {
-  "material-design-icon": "_material-design-icon_-FH6E",
+  "material-design-icon": "_material-design-icon_KFY-h",
   radioGroup_checkboxRadioContainer
 };
 const cssModules = {

package/dist/chunks/NcRadioGroupButton.mjs

@@ -60,13 +60,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroupButton = "_radioGroupButton_QcVyU";
-const radioGroupButton__label = "_radioGroupButton__label_QupyB";
-const radioGroupButton__icon = "_radioGroupButton__icon_FNlLj";
-const radioGroupButton_disabled = "_radioGroupButton_disabled_t8I3Z";
-const radioGroupButton_active = "_radioGroupButton_active_ZblnM";
+const radioGroupButton = "_radioGroupButton_zvINB";
+const radioGroupButton__label = "_radioGroupButton__label_bAKze";
+const radioGroupButton__icon = "_radioGroupButton__icon_DB-zg";
+const radioGroupButton_disabled = "_radioGroupButton_disabled_Acqgc";
+const radioGroupButton_active = "_radioGroupButton_active_EEJX-";
 const style0 = {
-  "material-design-icon": "_material-design-icon_kNZhO",
+  "material-design-icon": "_material-design-icon_WI1tJ",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,

package/dist/chunks/NcReferenceWidget.mjs

@@ -75,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return !props.reference.accessible;
     });
     const numberOfLines = computed(() => {
-      const lineCountOffsets = [450, 550, 650, Infinity];
+      const lineCountOffsets = [250, 550, 650, Infinity];
       return lineCountOffsets.findIndex((max) => width.value < max);
     });
     const descriptionStyle = computed(() => {
@@ -285,7 +285,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcReferenceWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b144346"]]);
+const NcReferenceWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f8edbaf7"]]);
 export {
   NcReferenceWidget as N
 };

package/dist/chunks/NcReferenceWidget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcReferenceWidget.mjs","sources":["../../src/components/NcRichText/NcReferenceWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ReferenceWidgetObject } from './../../functions/reference/widgets.ts'\n\nimport { useElementSize, useIntersectionObserver } from '@vueuse/core'\nimport { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'\nimport { routerKey, RouterLink } from 'vue-router'\nimport NcButton from '../../components/NcButton/NcButton.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { destroyWidget, hasFullWidth, hasInteractiveView, isResizable, isWidgetRegistered, renderWidget } from './../../functions/reference/widgets.ts'\nimport { getRoute } from './autolink.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * A reference object as returned by the ReferenceProvider\n\t */\n\treference: ReferenceWidgetObject\n\t/**\n\t * Whether to render the widget in interactive mode (if available)\n\t */\n\tinteractive?: boolean\n\t/**\n\t * Whether to show user an option to enable to interactive mode (if available)\n\t */\n\tinteractiveOptIn?: boolean\n}>(), {\n\tinteractive: true,\n\tinteractiveOptIn: false,\n})\n\n/* 3 minutes outside of viewport before widget is removed from the DOM */\nconst IDLE_TIMEOUT = 3 * 60 * 1000\nconst RESIZE_KEYBOARD_STEP = 10\n\nconst router = inject(routerKey, null)\n\nconst widgetId = `nc-reference-widget-${createElementId()}`\n\nconst isVisible = ref(false)\nconst customWidget = useTemplateRef('customWidget')\nconst customWidgetContent = useTemplateRef('customWidgetContent')\nconst widgetRoot = useTemplateRef('widgetRoot')\nconst { width } = useElementSize(widgetRoot)\nconst { height: customWidgetHeight } = useElementSize(customWidget)\n\nuseIntersectionObserver(widgetRoot, ([entry]) => {\n\tnextTick(() => {\n\t\tisVisible.value = entry!.isIntersecting\n\t})\n})\n\nconst showInteractive = ref(false)\nconst rendered = ref(false)\nlet idleTimeout: NodeJS.Timeout | null = null\nconst isResizing = ref(false)\nconst resizedHeight: Ref<number | null> = ref(null)\nconst resizeStartY = ref(0)\nconst resizeStartHeight = ref(0)\nconst resizeMinHeight = ref(100)\nconst resizeMaxHeight = ref(window.innerHeight - 120)\n\nconst isInteractive = computed(() => {\n\treturn (!props.interactiveOptIn && props.interactive) || showInteractive.value\n})\n\nconst referenceHasFullWidth = computed(() => {\n\treturn hasFullWidth(props.reference.richObjectType)\n})\n\nconst isWidgetResizable = computed(() => {\n\treturn isResizable(props.reference.richObjectType)\n})\n\nconst hasCustomWidget = computed(() => {\n\treturn isWidgetRegistered(props.reference.richObjectType)\n})\n\nconst customWidgetStyle = computed(() => {\n\tif (!resizedHeight.value) {\n\t\treturn null\n\t}\n\treturn { height: `${resizedHeight.value}px !important` }\n})\n\nconst ariaValueNow = computed(() => {\n\treturn Math.round(resizedHeight.value ?? customWidgetHeight.value)\n})\n\nconst referenceHasInteractiveView = computed(() => {\n\treturn hasCustomWidget.value && hasInteractiveView(props.reference.richObjectType)\n})\n\nconst noAccess = computed(() => {\n\treturn !props.reference.accessible\n})\n\nconst numberOfLines = computed(() => {\n\t// no description for width < 450, one line until 550 and so on\n\tconst lineCountOffsets = [450, 550, 650, Infinity]\n\treturn lineCountOffsets.findIndex((max) => width.value < max)\n})\n\nconst descriptionStyle = computed(() => {\n\tif (numberOfLines.value === 0) {\n\t\treturn {\n\t\t\tdisplay: 'none',\n\t\t}\n\t}\n\tconst lineClamp = numberOfLines.value\n\treturn {\n\t\tlineClamp,\n\t\twebkitLineClamp: lineClamp,\n\t}\n})\n\nconst compactLink = computed(() => {\n\tconst link = props.reference.openGraphObject.link\n\tif (!link) {\n\t\treturn ''\n\t}\n\n\tif (link.startsWith('https://')) {\n\t\treturn link.substring(8)\n\t}\n\tif (link.startsWith('http://')) {\n\t\treturn link.substring(7)\n\t}\n\treturn link\n})\n\nconst route = computed(() => {\n\treturn getRoute(router, props.reference.openGraphObject.link)\n})\n\nconst referenceWidgetLinkComponent = computed(() => {\n\treturn route.value ? RouterLink : 'a'\n})\n\nconst referenceWidgetLinkProps = computed(() => {\n\treturn route.value\n\t\t? { to: route.value }\n\t\t: { href: props.reference.openGraphObject.link, target: '_blank' }\n})\n\nwatch(isVisible, (val) => {\n\tif (!val) {\n\t\tidleTimeout = setTimeout(() => {\n\t\t\t// If the widget is still outside of viewport after timeout, destroy it\n\t\t\tif (!isVisible.value) {\n\t\t\t\tdestroyReferenceWidget()\n\t\t\t}\n\t\t}, IDLE_TIMEOUT)\n\t\treturn\n\t}\n\n\tif (idleTimeout) {\n\t\tclearTimeout(idleTimeout)\n\t\tidleTimeout = null\n\t}\n\n\tif (!rendered.value) {\n\t\trenderReferenceWidget()\n\t}\n}, { immediate: true })\n\nonBeforeUnmount(() => {\n\tif (idleTimeout) {\n\t\tclearTimeout(idleTimeout)\n\t\tidleTimeout = null\n\t}\n\tstopResize()\n\tdestroyReferenceWidget()\n})\n\n/**\n * Enable interactive view of the widget, if available\n */\nfunction enableInteractive() {\n\tshowInteractive.value = true\n\trenderReferenceWidget()\n}\n\n/**\n * Render the reference widget\n */\nfunction renderReferenceWidget() {\n\tif (!customWidgetContent.value) {\n\t\treturn\n\t}\n\n\tif (props.reference.richObjectType === 'open-graph') {\n\t\treturn\n\t}\n\n\tcustomWidgetContent.value.innerHTML = ''\n\n\t// create a separate element so we can rerender on the ref again\n\tconst widget = document.createElement('div')\n\twidget.style.width = '100%'\n\tcustomWidgetContent.value.appendChild(widget)\n\tnextTick(() => {\n\t\t// Waiting for the ref to become available\n\t\trenderWidget(widget, {\n\t\t\t...props.reference,\n\t\t\tinteractive: isInteractive.value,\n\t\t})\n\t\trendered.value = true\n\t})\n}\n\n/**\n * Destroy the reference widget\n */\nfunction destroyReferenceWidget() {\n\tif (rendered.value && widgetRoot.value) {\n\t\tdestroyWidget(props.reference.richObjectType, widgetRoot.value)\n\t\trendered.value = false\n\t}\n}\n\n/**\n * Initialize resize limits\n */\nfunction initResizeLimits() {\n\t// Use min/max height from rendered widget element if set\n\tconst widgetEl = customWidgetContent.value?.firstElementChild\n\tif (widgetEl) {\n\t\tconst computedStyle = window.getComputedStyle(widgetEl)\n\t\tconst parsedMin = parseFloat(computedStyle.minHeight)\n\t\tconst parsedMax = parseFloat(computedStyle.maxHeight)\n\t\tresizeMinHeight.value = parsedMin > 0 ? parsedMin : 100\n\t\tresizeMaxHeight.value = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : (window.innerHeight - 120)\n\t} else {\n\t\tresizeMinHeight.value = 100\n\t\tresizeMaxHeight.value = window.innerHeight - 120\n\t}\n}\n\n/**\n * Start resize via dragging\n *\n * @param event - the pointer event\n */\nfunction startResize(event: PointerEvent) {\n\tif (!isWidgetResizable.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\tinitResizeLimits()\n\tisResizing.value = true\n\tresizeStartY.value = event.clientY\n\tresizeStartHeight.value = customWidget.value.getBoundingClientRect().height\n\n\twindow.addEventListener('pointermove', onResize)\n\twindow.addEventListener('pointerup', stopResize)\n}\n\n/**\n * Resize via keydown\n *\n * @param delta - the resize delta\n */\nfunction onResizeKeydown(delta: number) {\n\tif (!isWidgetResizable.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\t// Establish limits once per interaction\n\tinitResizeLimits()\n\n\tconst currentHeight = resizedHeight.value ?? resizeStartHeight.value\n\tconst next = currentHeight + delta\n\tresizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, next))\n}\n\n/**\n * Resize via dragging\n *\n * @param event - the pointer event\n */\nfunction onResize(event: PointerEvent) {\n\tif (!isResizing.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\tconst deltaY = event.clientY - resizeStartY.value\n\tresizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, resizeStartHeight.value + deltaY))\n}\n\n/**\n * Stop resize via dragging\n */\nfunction stopResize() {\n\tif (!isResizing.value) {\n\t\treturn\n\t}\n\n\tisResizing.value = false\n\twindow.removeEventListener('pointermove', onResize)\n\twindow.removeEventListener('pointerup', stopResize)\n}\n</script>\n\n<template>\n\t<div ref=\"widgetRoot\" :class=\"{ 'toggle-interactive': referenceHasInteractiveView && !isInteractive }\">\n\t\t<div\n\t\t\tv-if=\"reference && hasCustomWidget\"\n\t\t\t:id=\"widgetId\"\n\t\t\tref=\"customWidget\"\n\t\t\tclass=\"widget-custom\"\n\t\t\t:class=\"{ 'full-width': referenceHasFullWidth }\"\n\t\t\t:style=\"customWidgetStyle\">\n\t\t\t<div ref=\"customWidgetContent\" class=\"widget-custom__content\" />\n\t\t\t<div\n\t\t\t\tv-if=\"isWidgetResizable\"\n\t\t\t\tclass=\"widget-custom__resize-handle\"\n\t\t\t\trole=\"slider\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t:aria-label=\"t('Widget height')\"\n\t\t\t\t:aria-valuenow=\"ariaValueNow\"\n\t\t\t\t:aria-valuemin=\"resizeMinHeight\"\n\t\t\t\t:aria-valuemax=\"resizeMaxHeight\"\n\t\t\t\t:aria-controls=\"widgetId\"\n\t\t\t\t@pointerdown.stop.prevent=\"startResize\"\n\t\t\t\t@keydown.up.stop.prevent=\"onResizeKeydown(-RESIZE_KEYBOARD_STEP)\"\n\t\t\t\t@keydown.down.stop.prevent=\"onResizeKeydown(RESIZE_KEYBOARD_STEP)\" />\n\t\t</div>\n\n\t\t<component\n\t\t\t:is=\"referenceWidgetLinkComponent\"\n\t\t\tv-else-if=\"!noAccess && reference && reference.openGraphObject && !hasCustomWidget\"\n\t\t\tv-bind=\"referenceWidgetLinkProps\"\n\t\t\trel=\"noopener noreferrer\"\n\t\t\tclass=\"widget-default\">\n\t\t\t<img v-if=\"reference.openGraphObject.thumb\" class=\"widget-default--image\" :src=\"reference.openGraphObject.thumb\">\n\t\t\t<div class=\"widget-default--details\">\n\t\t\t\t<p class=\"widget-default--name\">\n\t\t\t\t\t{{ reference.openGraphObject.name }}\n\t\t\t\t</p>\n\t\t\t\t<p class=\"widget-default--description\" :style=\"descriptionStyle\">\n\t\t\t\t\t{{ reference.openGraphObject.description }}\n\t\t\t\t</p>\n\t\t\t\t<p class=\"widget-default--link\">\n\t\t\t\t\t{{ compactLink }}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</component>\n\t\t<NcButton v-if=\"interactiveOptIn && referenceHasInteractiveView && !isInteractive\" class=\"toggle-interactive--button\" @click=\"enableInteractive\">\n\t\t\t{{ t('Enable interactive view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n@mixin widget {\n\twidth: 100%;\n\tmargin: auto;\n\tmargin-bottom: calc(var(--default-grid-baseline, 4px) * 3);\n\tmargin-top: calc(var(--default-grid-baseline, 4px) * 3);\n\toverflow: hidden;\n\tborder: 2px solid var(--color-border);\n\tborder-radius: var(--border-radius-container);\n\tbackground-color: transparent;\n\tdisplay: flex;\n}\n\n.widget-custom {\n\t@include widget;\n\tposition: relative;\n\n\t&.full-width {\n\t\twidth: var(--widget-full-width, 100%) !important;\n\t\tinset-inline-start: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);\n\t\tposition: relative;\n\t}\n\n\t&__content {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t&__resize-handle {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tinset-inline-start: 0;\n\t\twidth: 100%;\n\t\theight: calc(var(--default-grid-baseline) * 2);\n\t\tborder-top: 1px solid var(--color-border);\n\t\tmargin-top: -1px;\n\t\tcursor: row-resize;\n\t\ttouch-action: none;\n\n\t\t&::before, &::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\tbackground-color: var(--color-border);\n\t\t\tmargin-top: 1px;\n\t\t\ttransform: translateX(-50%);\n\t\t\twidth: 30px;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t&::before {\n\t\t\tmargin-top: -2px;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\toutline-offset: -4px;\n\t\t}\n\t}\n}\n\n.widget-access {\n\t@include widget;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 3);\n}\n\n.widget-default {\n\t@include widget;\n\n\t&--compact {\n\t\tflex-direction: column;\n\n\t\t.widget-default--image {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t}\n\n\t\t.widget-default--details {\n\t\t\twidth: 100%;\n\t\t\tpadding-top: calc(var(--default-grid-baseline, 4px) * 2);\n\t\t\tpadding-bottom: calc(var(--default-grid-baseline, 4px) * 2);\n\t\t}\n\n\t\t.widget-default--description {\n\t\t\tdisplay: none;\n\t\t}\n\n\t}\n\n\t&--image {\n\t\twidth: 40%;\n\t\tbackground-position: center;\n\t\tbackground-size: cover;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t&--name {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tfont-weight: var(--font-weight-heading, bold);\n\t}\n\n\t&--details {\n\t\tpadding: calc(var(--default-grid-baseline, 4px) * 3);\n\t\twidth: 60%;\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&--description {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\tline-clamp: 3; /* stylelint-disable-line property-no-unknown */\n\t\t-webkit-box-orient: vertical;\n\t}\n\n\t&--link {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n}\n\n.toggle-interactive {\n\tposition: relative;\n\t.toggle-interactive--button {\n\t\tposition: absolute;\n\t\tbottom: var(--default-grid-baseline);\n\t\tinset-inline-end: var(--default-grid-baseline);\n\t\tz-index: 10000;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_unref","_withKeys","_withModifiers","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,eAAe,IAAI,KAAK;AAC9B,MAAM,uBAAuB;;;;;;;;;AApB7B,UAAM,QAAQ;AAsBd,UAAM,SAAS,OAAO,WAAW,IAAI;AAErC,UAAM,WAAW,uBAAuB,gBAAA,CAAiB;AAEzD,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,eAAe,eAAe,cAAc;AAClD,UAAM,sBAAsB,eAAe,qBAAqB;AAChE,UAAM,aAAa,eAAe,YAAY;AAC9C,UAAM,EAAE,MAAA,IAAU,eAAe,UAAU;AAC3C,UAAM,EAAE,QAAQ,uBAAuB,eAAe,YAAY;AAElE,4BAAwB,YAAY,CAAC,CAAC,KAAK,MAAM;AAChD,eAAS,MAAM;AACd,kBAAU,QAAQ,MAAO;AAAA,MAC1B,CAAC;AAAA,IACF,CAAC;AAED,UAAM,kBAAkB,IAAI,KAAK;AACjC,UAAM,WAAW,IAAI,KAAK;AAC1B,QAAI,cAAqC;AACzC,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,gBAAoC,IAAI,IAAI;AAClD,UAAM,eAAe,IAAI,CAAC;AAC1B,UAAM,oBAAoB,IAAI,CAAC;AAC/B,UAAM,kBAAkB,IAAI,GAAG;AAC/B,UAAM,kBAAkB,IAAI,OAAO,cAAc,GAAG;AAEpD,UAAM,gBAAgB,SAAS,MAAM;AACpC,aAAQ,CAAC,MAAM,oBAAoB,MAAM,eAAgB,gBAAgB;AAAA,IAC1E,CAAC;AAED,UAAM,wBAAwB,SAAS,MAAM;AAC5C,aAAO,aAAa,MAAM,UAAU,cAAc;AAAA,IACnD,CAAC;AAED,UAAM,oBAAoB,SAAS,MAAM;AACxC,aAAO,YAAY,MAAM,UAAU,cAAc;AAAA,IAClD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACtC,aAAO,mBAAmB,MAAM,UAAU,cAAc;AAAA,IACzD,CAAC;AAED,UAAM,oBAAoB,SAAS,MAAM;AACxC,UAAI,CAAC,cAAc,OAAO;AACzB,eAAO;AAAA,MACR;AACA,aAAO,EAAE,QAAQ,GAAG,cAAc,KAAK,gBAAA;AAAA,IACxC,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AACnC,aAAO,KAAK,MAAM,cAAc,SAAS,mBAAmB,KAAK;AAAA,IAClE,CAAC;AAED,UAAM,8BAA8B,SAAS,MAAM;AAClD,aAAO,gBAAgB,SAAS,mBAAmB,MAAM,UAAU,cAAc;AAAA,IAClF,CAAC;AAED,UAAM,WAAW,SAAS,MAAM;AAC/B,aAAO,CAAC,MAAM,UAAU;AAAA,IACzB,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AAEpC,YAAM,mBAAmB,CAAC,KAAK,KAAK,KAAK,QAAQ;AACjD,aAAO,iBAAiB,UAAU,CAAC,QAAQ,MAAM,QAAQ,GAAG;AAAA,IAC7D,CAAC;AAED,UAAM,mBAAmB,SAAS,MAAM;AACvC,UAAI,cAAc,UAAU,GAAG;AAC9B,eAAO;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAEX;AACA,YAAM,YAAY,cAAc;AAChC,aAAO;AAAA,QACN;AAAA,QACA,iBAAiB;AAAA,MAAA;AAAA,IAEnB,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AAClC,YAAM,OAAO,MAAM,UAAU,gBAAgB;AAC7C,UAAI,CAAC,MAAM;AACV,eAAO;AAAA,MACR;AAEA,UAAI,KAAK,WAAW,UAAU,GAAG;AAChC,eAAO,KAAK,UAAU,CAAC;AAAA,MACxB;AACA,UAAI,KAAK,WAAW,SAAS,GAAG;AAC/B,eAAO,KAAK,UAAU,CAAC;AAAA,MACxB;AACA,aAAO;AAAA,IACR,CAAC;AAED,UAAM,QAAQ,SAAS,MAAM;AAC5B,aAAO,SAAS,QAAQ,MAAM,UAAU,gBAAgB,IAAI;AAAA,IAC7D,CAAC;AAED,UAAM,+BAA+B,SAAS,MAAM;AACnD,aAAO,MAAM,QAAQ,aAAa;AAAA,IACnC,CAAC;AAED,UAAM,2BAA2B,SAAS,MAAM;AAC/C,aAAO,MAAM,QACV,EAAE,IAAI,MAAM,MAAA,IACZ,EAAE,MAAM,MAAM,UAAU,gBAAgB,MAAM,QAAQ,SAAA;AAAA,IAC1D,CAAC;AAED,UAAM,WAAW,CAAC,QAAQ;AACzB,UAAI,CAAC,KAAK;AACT,sBAAc,WAAW,MAAM;AAE9B,cAAI,CAAC,UAAU,OAAO;AACrB,mCAAA;AAAA,UACD;AAAA,QACD,GAAG,YAAY;AACf;AAAA,MACD;AAEA,UAAI,aAAa;AAChB,qBAAa,WAAW;AACxB,sBAAc;AAAA,MACf;AAEA,UAAI,CAAC,SAAS,OAAO;AACpB,8BAAA;AAAA,MACD;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAEtB,oBAAgB,MAAM;AACrB,UAAI,aAAa;AAChB,qBAAa,WAAW;AACxB,sBAAc;AAAA,MACf;AACA,iBAAA;AACA,6BAAA;AAAA,IACD,CAAC;AAKD,aAAS,oBAAoB;AAC5B,sBAAgB,QAAQ;AACxB,4BAAA;AAAA,IACD;AAKA,aAAS,wBAAwB;AAChC,UAAI,CAAC,oBAAoB,OAAO;AAC/B;AAAA,MACD;AAEA,UAAI,MAAM,UAAU,mBAAmB,cAAc;AACpD;AAAA,MACD;AAEA,0BAAoB,MAAM,YAAY;AAGtC,YAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,aAAO,MAAM,QAAQ;AACrB,0BAAoB,MAAM,YAAY,MAAM;AAC5C,eAAS,MAAM;AAEd,qBAAa,QAAQ;AAAA,UACpB,GAAG,MAAM;AAAA,UACT,aAAa,cAAc;AAAA,QAAA,CAC3B;AACD,iBAAS,QAAQ;AAAA,MAClB,CAAC;AAAA,IACF;AAKA,aAAS,yBAAyB;AACjC,UAAI,SAAS,SAAS,WAAW,OAAO;AACvC,sBAAc,MAAM,UAAU,gBAAgB,WAAW,KAAK;AAC9D,iBAAS,QAAQ;AAAA,MAClB;AAAA,IACD;AAKA,aAAS,mBAAmB;AAE3B,YAAM,WAAW,oBAAoB,OAAO;AAC5C,UAAI,UAAU;AACb,cAAM,gBAAgB,OAAO,iBAAiB,QAAQ;AACtD,cAAM,YAAY,WAAW,cAAc,SAAS;AACpD,cAAM,YAAY,WAAW,cAAc,SAAS;AACpD,wBAAgB,QAAQ,YAAY,IAAI,YAAY;AACpD,wBAAgB,QAAQ,OAAO,SAAS,SAAS,KAAK,YAAY,IAAI,YAAa,OAAO,cAAc;AAAA,MACzG,OAAO;AACN,wBAAgB,QAAQ;AACxB,wBAAgB,QAAQ,OAAO,cAAc;AAAA,MAC9C;AAAA,IACD;AAOA,aAAS,YAAY,OAAqB;AACzC,UAAI,CAAC,kBAAkB,SAAS,CAAC,aAAa,OAAO;AACpD;AAAA,MACD;AAEA,uBAAA;AACA,iBAAW,QAAQ;AACnB,mBAAa,QAAQ,MAAM;AAC3B,wBAAkB,QAAQ,aAAa,MAAM,sBAAA,EAAwB;AAErE,aAAO,iBAAiB,eAAe,QAAQ;AAC/C,aAAO,iBAAiB,aAAa,UAAU;AAAA,IAChD;AAOA,aAAS,gBAAgB,OAAe;AACvC,UAAI,CAAC,kBAAkB,SAAS,CAAC,aAAa,OAAO;AACpD;AAAA,MACD;AAGA,uBAAA;AAEA,YAAM,gBAAgB,cAAc,SAAS,kBAAkB;AAC/D,YAAM,OAAO,gBAAgB;AAC7B,oBAAc,QAAQ,KAAK,IAAI,gBAAgB,OAAO,KAAK,IAAI,gBAAgB,OAAO,IAAI,CAAC;AAAA,IAC5F;AAOA,aAAS,SAAS,OAAqB;AACtC,UAAI,CAAC,WAAW,SAAS,CAAC,aAAa,OAAO;AAC7C;AAAA,MACD;AAEA,YAAM,SAAS,MAAM,UAAU,aAAa;AAC5C,oBAAc,QAAQ,KAAK,IAAI,gBAAgB,OAAO,KAAK,IAAI,gBAAgB,OAAO,kBAAkB,QAAQ,MAAM,CAAC;AAAA,IACxH;AAKA,aAAS,aAAa;AACrB,UAAI,CAAC,WAAW,OAAO;AACtB;AAAA,MACD;AAEA,iBAAW,QAAQ;AACnB,aAAO,oBAAoB,eAAe,QAAQ;AAClD,aAAO,oBAAoB,aAAa,UAAU;AAAA,IACnD;;0BAICA,mBA+CM,OAAA;AAAA,iBA/CG;AAAA,QAAJ,KAAI;AAAA,QAAc,OAAKC,eAAA,EAAA,sBAA0B,4BAAA,SAA2B,CAAK,cAAA,MAAA,CAAa;AAAA,MAAA;QAE3F,QAAA,aAAa,gBAAA,sBADpBD,mBAsBM,OAAA;AAAA;UApBJ,IAAI;AAAA,mBACD;AAAA,UAAJ,KAAI;AAAA,UACJ,OAAKC,eAAA,CAAC,iBAAe,EAAA,cACG,sBAAA,MAAA,CAAqB,CAAA;AAAA,UAC5C,sBAAO,kBAAA,KAAiB;AAAA,QAAA;UACzBC,mBAAgE,OAAA;AAAA,qBAAvD;AAAA,YAAJ,KAAI;AAAA,YAAsB,OAAM;AAAA,UAAA;UAE9B,kBAAA,sBADPF,mBAasE,OAAA;AAAA;YAXrE,OAAM;AAAA,YACN,MAAK;AAAA,YACL,UAAS;AAAA,YACT,oBAAiB;AAAA,YAChB,cAAYG,MAAA,CAAA,EAAC,eAAA;AAAA,YACb,iBAAe,aAAA;AAAA,YACf,iBAAe,gBAAA;AAAA,YACf,iBAAe,gBAAA;AAAA,YACf,iBAAe;AAAA,YACf,6BAA0B,aAAW,CAAA,QAAA,SAAA,CAAA;AAAA,YACrC,WAAO;AAAA,cAAkB,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAC,SAAAC,cAAA,CAAA,WAAA,iBAAiB,oBAAoB,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAAA,cACnC,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,cAAA,CAAA,WAAA,gBAAgB,oBAAoB,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;AAAA;iBAKrD,CAAA,SAAA,SAAY,QAAA,aAAa,kBAAU,oBAAoB,gBAAA,SAFpEC,UAAA,GAAAC,YAkBYC,wBAjBN,6BAAA,KAA4B,GADlCC,WAkBY,YAfH,yBAAA,OAAwB;AAAA,UAChC,KAAI;AAAA,UACJ,OAAM;AAAA,QAAA;2BACN,MAAiH;AAAA,YAAtG,QAAA,UAAU,gBAAgB,sBAArCT,mBAAiH,OAAA;AAAA;cAArE,OAAM;AAAA,cAAyB,KAAK,QAAA,UAAU,gBAAgB;AAAA,YAAA;YAC1GE,mBAUM,OAVN,YAUM;AAAA,cATLA,mBAEI,KAFJ,YAEIQ,gBADA,kBAAU,gBAAgB,IAAI,GAAA,CAAA;AAAA,cAElCR,mBAEI,KAAA;AAAA,gBAFD,OAAM;AAAA,gBAA+B,sBAAO,iBAAA,KAAgB;AAAA,cAAA,mBAC3D,QAAA,UAAU,gBAAgB,WAAW,GAAA,CAAA;AAAA,cAEzCA,mBAEI,KAFJ,YAEIQ,gBADA,YAAA,KAAW,GAAA,CAAA;AAAA,YAAA;;;;QAID,QAAA,oBAAoB,4BAAA,SAA2B,CAAK,cAAA,sBAApEH,YAEW,UAAA;AAAA;UAFwE,OAAM;AAAA,UAA8B,SAAO;AAAA,QAAA;2BAC7H,MAAkC;AAAA,4CAA/BJ,MAAA,CAAA,EAAC,yBAAA,CAAA,GAAA,CAAA;AAAA,UAAA;;;;;;;;"}
+{"version":3,"file":"NcReferenceWidget.mjs","sources":["../../src/components/NcRichText/NcReferenceWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ReferenceWidgetObject } from './../../functions/reference/widgets.ts'\n\nimport { useElementSize, useIntersectionObserver } from '@vueuse/core'\nimport { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'\nimport { routerKey, RouterLink } from 'vue-router'\nimport NcButton from '../../components/NcButton/NcButton.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { destroyWidget, hasFullWidth, hasInteractiveView, isResizable, isWidgetRegistered, renderWidget } from './../../functions/reference/widgets.ts'\nimport { getRoute } from './autolink.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * A reference object as returned by the ReferenceProvider\n\t */\n\treference: ReferenceWidgetObject\n\t/**\n\t * Whether to render the widget in interactive mode (if available)\n\t */\n\tinteractive?: boolean\n\t/**\n\t * Whether to show user an option to enable to interactive mode (if available)\n\t */\n\tinteractiveOptIn?: boolean\n}>(), {\n\tinteractive: true,\n\tinteractiveOptIn: false,\n})\n\n/* 3 minutes outside of viewport before widget is removed from the DOM */\nconst IDLE_TIMEOUT = 3 * 60 * 1000\nconst RESIZE_KEYBOARD_STEP = 10\n\nconst router = inject(routerKey, null)\n\nconst widgetId = `nc-reference-widget-${createElementId()}`\n\nconst isVisible = ref(false)\nconst customWidget = useTemplateRef('customWidget')\nconst customWidgetContent = useTemplateRef('customWidgetContent')\nconst widgetRoot = useTemplateRef('widgetRoot')\nconst { width } = useElementSize(widgetRoot)\nconst { height: customWidgetHeight } = useElementSize(customWidget)\n\nuseIntersectionObserver(widgetRoot, ([entry]) => {\n\tnextTick(() => {\n\t\tisVisible.value = entry!.isIntersecting\n\t})\n})\n\nconst showInteractive = ref(false)\nconst rendered = ref(false)\nlet idleTimeout: NodeJS.Timeout | null = null\nconst isResizing = ref(false)\nconst resizedHeight: Ref<number | null> = ref(null)\nconst resizeStartY = ref(0)\nconst resizeStartHeight = ref(0)\nconst resizeMinHeight = ref(100)\nconst resizeMaxHeight = ref(window.innerHeight - 120)\n\nconst isInteractive = computed(() => {\n\treturn (!props.interactiveOptIn && props.interactive) || showInteractive.value\n})\n\nconst referenceHasFullWidth = computed(() => {\n\treturn hasFullWidth(props.reference.richObjectType)\n})\n\nconst isWidgetResizable = computed(() => {\n\treturn isResizable(props.reference.richObjectType)\n})\n\nconst hasCustomWidget = computed(() => {\n\treturn isWidgetRegistered(props.reference.richObjectType)\n})\n\nconst customWidgetStyle = computed(() => {\n\tif (!resizedHeight.value) {\n\t\treturn null\n\t}\n\treturn { height: `${resizedHeight.value}px !important` }\n})\n\nconst ariaValueNow = computed(() => {\n\treturn Math.round(resizedHeight.value ?? customWidgetHeight.value)\n})\n\nconst referenceHasInteractiveView = computed(() => {\n\treturn hasCustomWidget.value && hasInteractiveView(props.reference.richObjectType)\n})\n\nconst noAccess = computed(() => {\n\treturn !props.reference.accessible\n})\n\nconst numberOfLines = computed(() => {\n\t// no description for width < 250, one line until 550 and so on\n\tconst lineCountOffsets = [250, 550, 650, Infinity]\n\treturn lineCountOffsets.findIndex((max) => width.value < max)\n})\n\nconst descriptionStyle = computed(() => {\n\tif (numberOfLines.value === 0) {\n\t\treturn {\n\t\t\tdisplay: 'none',\n\t\t}\n\t}\n\tconst lineClamp = numberOfLines.value\n\treturn {\n\t\tlineClamp,\n\t\twebkitLineClamp: lineClamp,\n\t}\n})\n\nconst compactLink = computed(() => {\n\tconst link = props.reference.openGraphObject.link\n\tif (!link) {\n\t\treturn ''\n\t}\n\n\tif (link.startsWith('https://')) {\n\t\treturn link.substring(8)\n\t}\n\tif (link.startsWith('http://')) {\n\t\treturn link.substring(7)\n\t}\n\treturn link\n})\n\nconst route = computed(() => {\n\treturn getRoute(router, props.reference.openGraphObject.link)\n})\n\nconst referenceWidgetLinkComponent = computed(() => {\n\treturn route.value ? RouterLink : 'a'\n})\n\nconst referenceWidgetLinkProps = computed(() => {\n\treturn route.value\n\t\t? { to: route.value }\n\t\t: { href: props.reference.openGraphObject.link, target: '_blank' }\n})\n\nwatch(isVisible, (val) => {\n\tif (!val) {\n\t\tidleTimeout = setTimeout(() => {\n\t\t\t// If the widget is still outside of viewport after timeout, destroy it\n\t\t\tif (!isVisible.value) {\n\t\t\t\tdestroyReferenceWidget()\n\t\t\t}\n\t\t}, IDLE_TIMEOUT)\n\t\treturn\n\t}\n\n\tif (idleTimeout) {\n\t\tclearTimeout(idleTimeout)\n\t\tidleTimeout = null\n\t}\n\n\tif (!rendered.value) {\n\t\trenderReferenceWidget()\n\t}\n}, { immediate: true })\n\nonBeforeUnmount(() => {\n\tif (idleTimeout) {\n\t\tclearTimeout(idleTimeout)\n\t\tidleTimeout = null\n\t}\n\tstopResize()\n\tdestroyReferenceWidget()\n})\n\n/**\n * Enable interactive view of the widget, if available\n */\nfunction enableInteractive() {\n\tshowInteractive.value = true\n\trenderReferenceWidget()\n}\n\n/**\n * Render the reference widget\n */\nfunction renderReferenceWidget() {\n\tif (!customWidgetContent.value) {\n\t\treturn\n\t}\n\n\tif (props.reference.richObjectType === 'open-graph') {\n\t\treturn\n\t}\n\n\tcustomWidgetContent.value.innerHTML = ''\n\n\t// create a separate element so we can rerender on the ref again\n\tconst widget = document.createElement('div')\n\twidget.style.width = '100%'\n\tcustomWidgetContent.value.appendChild(widget)\n\tnextTick(() => {\n\t\t// Waiting for the ref to become available\n\t\trenderWidget(widget, {\n\t\t\t...props.reference,\n\t\t\tinteractive: isInteractive.value,\n\t\t})\n\t\trendered.value = true\n\t})\n}\n\n/**\n * Destroy the reference widget\n */\nfunction destroyReferenceWidget() {\n\tif (rendered.value && widgetRoot.value) {\n\t\tdestroyWidget(props.reference.richObjectType, widgetRoot.value)\n\t\trendered.value = false\n\t}\n}\n\n/**\n * Initialize resize limits\n */\nfunction initResizeLimits() {\n\t// Use min/max height from rendered widget element if set\n\tconst widgetEl = customWidgetContent.value?.firstElementChild\n\tif (widgetEl) {\n\t\tconst computedStyle = window.getComputedStyle(widgetEl)\n\t\tconst parsedMin = parseFloat(computedStyle.minHeight)\n\t\tconst parsedMax = parseFloat(computedStyle.maxHeight)\n\t\tresizeMinHeight.value = parsedMin > 0 ? parsedMin : 100\n\t\tresizeMaxHeight.value = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : (window.innerHeight - 120)\n\t} else {\n\t\tresizeMinHeight.value = 100\n\t\tresizeMaxHeight.value = window.innerHeight - 120\n\t}\n}\n\n/**\n * Start resize via dragging\n *\n * @param event - the pointer event\n */\nfunction startResize(event: PointerEvent) {\n\tif (!isWidgetResizable.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\tinitResizeLimits()\n\tisResizing.value = true\n\tresizeStartY.value = event.clientY\n\tresizeStartHeight.value = customWidget.value.getBoundingClientRect().height\n\n\twindow.addEventListener('pointermove', onResize)\n\twindow.addEventListener('pointerup', stopResize)\n}\n\n/**\n * Resize via keydown\n *\n * @param delta - the resize delta\n */\nfunction onResizeKeydown(delta: number) {\n\tif (!isWidgetResizable.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\t// Establish limits once per interaction\n\tinitResizeLimits()\n\n\tconst currentHeight = resizedHeight.value ?? resizeStartHeight.value\n\tconst next = currentHeight + delta\n\tresizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, next))\n}\n\n/**\n * Resize via dragging\n *\n * @param event - the pointer event\n */\nfunction onResize(event: PointerEvent) {\n\tif (!isResizing.value || !customWidget.value) {\n\t\treturn\n\t}\n\n\tconst deltaY = event.clientY - resizeStartY.value\n\tresizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, resizeStartHeight.value + deltaY))\n}\n\n/**\n * Stop resize via dragging\n */\nfunction stopResize() {\n\tif (!isResizing.value) {\n\t\treturn\n\t}\n\n\tisResizing.value = false\n\twindow.removeEventListener('pointermove', onResize)\n\twindow.removeEventListener('pointerup', stopResize)\n}\n</script>\n\n<template>\n\t<div ref=\"widgetRoot\" :class=\"{ 'toggle-interactive': referenceHasInteractiveView && !isInteractive }\">\n\t\t<div\n\t\t\tv-if=\"reference && hasCustomWidget\"\n\t\t\t:id=\"widgetId\"\n\t\t\tref=\"customWidget\"\n\t\t\tclass=\"widget-custom\"\n\t\t\t:class=\"{ 'full-width': referenceHasFullWidth }\"\n\t\t\t:style=\"customWidgetStyle\">\n\t\t\t<div ref=\"customWidgetContent\" class=\"widget-custom__content\" />\n\t\t\t<div\n\t\t\t\tv-if=\"isWidgetResizable\"\n\t\t\t\tclass=\"widget-custom__resize-handle\"\n\t\t\t\trole=\"slider\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t:aria-label=\"t('Widget height')\"\n\t\t\t\t:aria-valuenow=\"ariaValueNow\"\n\t\t\t\t:aria-valuemin=\"resizeMinHeight\"\n\t\t\t\t:aria-valuemax=\"resizeMaxHeight\"\n\t\t\t\t:aria-controls=\"widgetId\"\n\t\t\t\t@pointerdown.stop.prevent=\"startResize\"\n\t\t\t\t@keydown.up.stop.prevent=\"onResizeKeydown(-RESIZE_KEYBOARD_STEP)\"\n\t\t\t\t@keydown.down.stop.prevent=\"onResizeKeydown(RESIZE_KEYBOARD_STEP)\" />\n\t\t</div>\n\n\t\t<component\n\t\t\t:is=\"referenceWidgetLinkComponent\"\n\t\t\tv-else-if=\"!noAccess && reference && reference.openGraphObject && !hasCustomWidget\"\n\t\t\tv-bind=\"referenceWidgetLinkProps\"\n\t\t\trel=\"noopener noreferrer\"\n\t\t\tclass=\"widget-default\">\n\t\t\t<img v-if=\"reference.openGraphObject.thumb\" class=\"widget-default--image\" :src=\"reference.openGraphObject.thumb\">\n\t\t\t<div class=\"widget-default--details\">\n\t\t\t\t<p class=\"widget-default--name\">\n\t\t\t\t\t{{ reference.openGraphObject.name }}\n\t\t\t\t</p>\n\t\t\t\t<p class=\"widget-default--description\" :style=\"descriptionStyle\">\n\t\t\t\t\t{{ reference.openGraphObject.description }}\n\t\t\t\t</p>\n\t\t\t\t<p class=\"widget-default--link\">\n\t\t\t\t\t{{ compactLink }}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</component>\n\t\t<NcButton v-if=\"interactiveOptIn && referenceHasInteractiveView && !isInteractive\" class=\"toggle-interactive--button\" @click=\"enableInteractive\">\n\t\t\t{{ t('Enable interactive view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n@mixin widget {\n\twidth: 100%;\n\tmargin: auto;\n\tmargin-bottom: calc(var(--default-grid-baseline, 4px) * 3);\n\tmargin-top: calc(var(--default-grid-baseline, 4px) * 3);\n\toverflow: hidden;\n\tborder: 2px solid var(--color-border);\n\tborder-radius: var(--border-radius-container);\n\tbackground-color: transparent;\n\tdisplay: flex;\n}\n\n.widget-custom {\n\t@include widget;\n\tposition: relative;\n\n\t&.full-width {\n\t\twidth: var(--widget-full-width, 100%) !important;\n\t\tinset-inline-start: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);\n\t\tposition: relative;\n\t}\n\n\t&__content {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t&__resize-handle {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tinset-inline-start: 0;\n\t\twidth: 100%;\n\t\theight: calc(var(--default-grid-baseline) * 2);\n\t\tborder-top: 1px solid var(--color-border);\n\t\tmargin-top: -1px;\n\t\tcursor: row-resize;\n\t\ttouch-action: none;\n\n\t\t&::before, &::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\tbackground-color: var(--color-border);\n\t\t\tmargin-top: 1px;\n\t\t\ttransform: translateX(-50%);\n\t\t\twidth: 30px;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t&::before {\n\t\t\tmargin-top: -2px;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\toutline-offset: -4px;\n\t\t}\n\t}\n}\n\n.widget-access {\n\t@include widget;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 3);\n}\n\n.widget-default {\n\t@include widget;\n\n\t&--compact {\n\t\tflex-direction: column;\n\n\t\t.widget-default--image {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t}\n\n\t\t.widget-default--details {\n\t\t\twidth: 100%;\n\t\t\tpadding-top: calc(var(--default-grid-baseline, 4px) * 2);\n\t\t\tpadding-bottom: calc(var(--default-grid-baseline, 4px) * 2);\n\t\t}\n\n\t\t.widget-default--description {\n\t\t\tdisplay: none;\n\t\t}\n\n\t}\n\n\t&--image {\n\t\twidth: 40%;\n\t\tbackground-position: center;\n\t\tbackground-size: cover;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t&--name {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tfont-weight: var(--font-weight-heading, bold);\n\t}\n\n\t&--details {\n\t\tpadding: calc(var(--default-grid-baseline, 4px) * 3);\n\t\twidth: 0;\n\t\tflex-grow: 1;\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&--description {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\tline-clamp: 3; /* stylelint-disable-line property-no-unknown */\n\t\t-webkit-box-orient: vertical;\n\t}\n\n\t&--link {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n}\n\n.toggle-interactive {\n\tposition: relative;\n\t.toggle-interactive--button {\n\t\tposition: absolute;\n\t\tbottom: var(--default-grid-baseline);\n\t\tinset-inline-end: var(--default-grid-baseline);\n\t\tz-index: 10000;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_unref","_withKeys","_withModifiers","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcRichContenteditable.mjs

@@ -335,16 +335,16 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 const NcAutoCompleteResult = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-ed88a5f1"]]);
 register(t36, t39);
 const style1 = {
-  "material-design-icon": "_material-design-icon_Zj1Q3",
-  "tribute-container": "_tribute-container_DlTKg",
-  "tribute-container__item": "_tribute-container__item_j0Jfz",
-  "tribute-container--focus-visible": "_tribute-container--focus-visible_bexBy",
-  "tribute-container-autocomplete": "_tribute-container-autocomplete_qEbF-",
-  "tribute-container-emoji": "_tribute-container-emoji_Pe4yR",
-  "tribute-container-link": "_tribute-container-link_fVL9D",
-  "tribute-item": "_tribute-item_-NwTy",
-  "tribute-item__title": "_tribute-item__title_twscI",
-  "tribute-item__icon": "_tribute-item__icon_kMB-F"
+  "material-design-icon": "_material-design-icon_GKvku",
+  "tribute-container": "_tribute-container_hX6n7",
+  "tribute-container__item": "_tribute-container__item_okiJn",
+  "tribute-container--focus-visible": "_tribute-container--focus-visible_x0aUZ",
+  "tribute-container-autocomplete": "_tribute-container-autocomplete_ersEF",
+  "tribute-container-emoji": "_tribute-container-emoji_d9cIo",
+  "tribute-container-link": "_tribute-container-link_nJUJo",
+  "tribute-item": "_tribute-item_CEjO6",
+  "tribute-item__title": "_tribute-item__title_lwK2r",
+  "tribute-item__icon": "_tribute-item__icon_FlDIT"
 };
 const smilesCharacters = ["d", "D", "p", "P", "s", "S", "x", "X", ")", "(", "|", "/"];
 const textSmiles = [];