@nextcloud/vue 8.40.0 → 8.41.0

package/dist/chunks/{NcRadioGroup-BbMUIkWl.cjs.map → NcRadioGroup-C2lG1kIj.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcRadioGroup-BbMUIkWl.cjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport Vue, { computed, provide, ref } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(event: 'update:modelValue', value: string): void\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label=\"label\"\n\t\t:description=\"description\"\n\t\t:hide-label=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\" disabled>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["ref","provide","INSIDE_RADIO_GROUP_KEY","computed","Vue"],"mappings":";;;;;;;;AA4EA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;;AApCA,UAAM,gBAAgBA,IAAAA,IAAA;AAEtBC,gBAAQC,gBAAAA,wBAAwBC,IAAAA,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1EC,6BAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcRadioGroup-C2lG1kIj.cjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport Vue, { computed, provide, ref } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(event: 'update:modelValue', value: string): void\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label=\"label\"\n\t\t:description=\"description\"\n\t\t:hide-label=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\" disabled>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["ref","provide","INSIDE_RADIO_GROUP_KEY","computed","Vue"],"mappings":";;;;;;;;AA4EA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;;AApCA,UAAM,gBAAgBA,IAAAA,IAAA;AAEtBC,gBAAQC,gBAAAA,wBAAwBC,IAAAA,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1EC,6BAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroup-D4kc6Jjr.mjs → NcRadioGroup-D_7OAyQ4.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcRadioGroup-DQde-Yd1.css';
+import '../assets/NcRadioGroup-Bq7x-xEK.css';
 import Vue, { defineComponent, ref, provide, computed } from "vue";
-import { N as NcFormBox } from "./NcFormBox-Bd7m8ffs.mjs";
-import { N as NcFormGroup } from "./NcFormGroup-tW-MwPUj.mjs";
+import { N as NcFormBox } from "./NcFormBox-C38-8CH6.mjs";
+import { N as NcFormGroup } from "./NcFormGroup-geUvdoIG.mjs";
 import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup-D6llQmAl.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const __default__ = {
@@ -41,9 +41,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, props, emit, buttonVariant, register, onUpdate, NcFormBox, NcFormGroup };
   }
 });
-const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_amoAo";
+const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_C6Uum";
 const style0 = {
-  "material-design-icon": "_material-design-icon_hB6fD",
+  "material-design-icon": "_material-design-icon_A8sTh",
   radioGroup_checkboxRadioContainer
 };
 var _sfc_render = function render() {
@@ -71,4 +71,4 @@ const NcRadioGroup = __component__.exports;
 export {
   NcRadioGroup as N
 };
-//# sourceMappingURL=NcRadioGroup-D4kc6Jjr.mjs.map
+//# sourceMappingURL=NcRadioGroup-D_7OAyQ4.mjs.map

package/dist/chunks/{NcRadioGroup-D4kc6Jjr.mjs.map → NcRadioGroup-D_7OAyQ4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcRadioGroup-D4kc6Jjr.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport Vue, { computed, provide, ref } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(event: 'update:modelValue', value: string): void\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label=\"label\"\n\t\t:description=\"description\"\n\t\t:hide-label=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\" disabled>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA4EA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;;AApCA,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,YAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcRadioGroup-D_7OAyQ4.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport Vue, { computed, provide, ref } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n\n\t/**\n\t * The currently selected value\n\t */\n\tmodelValue?: string\n}>()\n\nconst emit = defineEmits<{\n\t(event: 'update:modelValue', value: string): void\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tmodelValue: props.modelValue,\n\tonUpdate,\n\tregister,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\tVue.util.warn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\temit('update:modelValue', value)\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label=\"label\"\n\t\t:description=\"description\"\n\t\t:hide-label=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<!-- @slot Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t\t\t\t The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t\t\t\t If you want the button variant, then you have to use `NcRadioGroupButton`.-->\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\" disabled>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA4EA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;;AApCA,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C,YAAY,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,YAAI,KAAK,KAAK,qFAAqF;AAAA,MACpG;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,WAAK,qBAAqB,KAAK;AAAA,IAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroupButton-B8a5TW2l.mjs → NcRadioGroupButton-CkpB4myv.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcRadioGroupButton-Dwpy1m0F.css';
+import '../assets/NcRadioGroupButton-i11p0wHX.css';
 import { defineComponent, onMounted, computed } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
@@ -28,13 +28,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, props, labelId, radioGroup, formBoxItemClass, isChecked, onUpdate };
   }
 });
-const radioGroupButton = "_radioGroupButton_7L9nl";
-const radioGroupButton__label = "_radioGroupButton__label_u1VfE";
-const radioGroupButton__icon = "_radioGroupButton__icon_w45z4";
-const radioGroupButton_disabled = "_radioGroupButton_disabled_6HMWB";
-const radioGroupButton_active = "_radioGroupButton_active_sPnCq";
+const radioGroupButton = "_radioGroupButton_3Dqzj";
+const radioGroupButton__label = "_radioGroupButton__label_l-dql";
+const radioGroupButton__icon = "_radioGroupButton__icon_78UAr";
+const radioGroupButton_disabled = "_radioGroupButton_disabled_1iFko";
+const radioGroupButton_active = "_radioGroupButton_active_sqEAl";
 const style0 = {
-  "material-design-icon": "_material-design-icon_7ahcn",
+  "material-design-icon": "_material-design-icon_obCV-",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,
@@ -69,4 +69,4 @@ const NcRadioGroupButton = __component__.exports;
 export {
   NcRadioGroupButton as N
 };
-//# sourceMappingURL=NcRadioGroupButton-B8a5TW2l.mjs.map
+//# sourceMappingURL=NcRadioGroupButton-CkpB4myv.mjs.map

package/dist/chunks/{NcRadioGroupButton-B8a5TW2l.mjs.map → NcRadioGroupButton-CkpB4myv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcRadioGroupButton-B8a5TW2l.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n\n\t/**\n\t * Disabled state of the radio button\n\t */\n\tdisabled?: boolean\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tif (props.disabled) {\n\t\treturn\n\t}\n\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t\t[$style.radioGroupButton_disabled]: disabled,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$scopedSlots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover:not(.radioGroupButton_disabled) {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: var(--font-weight-element, bold);\n}\n\n.radioGroupButton_disabled {\n\tfilter: saturate($opacity_normal);\n\topacity: $opacity_disabled;\n\n\t// Reset the cursor\n\tcursor: default;\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCA,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,UAAI,MAAM,UAAU;AACnB;AAAA,MACD;AAEA,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcRadioGroupButton-CkpB4myv.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n\n\t/**\n\t * Disabled state of the radio button\n\t */\n\tdisabled?: boolean\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tif (props.disabled) {\n\t\treturn\n\t}\n\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t\t[$style.radioGroupButton_disabled]: disabled,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$scopedSlots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover:not(.radioGroupButton_disabled) {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: var(--font-weight-element, bold);\n}\n\n.radioGroupButton_disabled {\n\tfilter: saturate($opacity_normal);\n\topacity: $opacity_disabled;\n\n\t// Reset the cursor\n\tcursor: default;\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCA,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,UAAI,MAAM,UAAU;AACnB;AAAA,MACD;AAEA,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroupButton-7ImC11aP.cjs → NcRadioGroupButton-DcU_Yagn.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcRadioGroupButton-Dwpy1m0F.css');
+require('../assets/NcRadioGroupButton-i11p0wHX.css');
 "use strict";
 const Vue = require("vue");
 const createElementId = require("./createElementId-lalylSCf.cjs");
@@ -29,13 +29,13 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, props, labelId, radioGroup, formBoxItemClass, isChecked, onUpdate };
   }
 });
-const radioGroupButton = "_radioGroupButton_7L9nl";
-const radioGroupButton__label = "_radioGroupButton__label_u1VfE";
-const radioGroupButton__icon = "_radioGroupButton__icon_w45z4";
-const radioGroupButton_disabled = "_radioGroupButton_disabled_6HMWB";
-const radioGroupButton_active = "_radioGroupButton_active_sPnCq";
+const radioGroupButton = "_radioGroupButton_3Dqzj";
+const radioGroupButton__label = "_radioGroupButton__label_l-dql";
+const radioGroupButton__icon = "_radioGroupButton__icon_78UAr";
+const radioGroupButton_disabled = "_radioGroupButton_disabled_1iFko";
+const radioGroupButton_active = "_radioGroupButton_active_sqEAl";
 const style0 = {
-  "material-design-icon": "_material-design-icon_7ahcn",
+  "material-design-icon": "_material-design-icon_obCV-",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,
@@ -68,4 +68,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcRadioGroupButton = __component__.exports;
 exports.NcRadioGroupButton = NcRadioGroupButton;
-//# sourceMappingURL=NcRadioGroupButton-7ImC11aP.cjs.map
+//# sourceMappingURL=NcRadioGroupButton-DcU_Yagn.cjs.map

package/dist/chunks/{NcRadioGroupButton-7ImC11aP.cjs.map → NcRadioGroupButton-DcU_Yagn.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcRadioGroupButton-7ImC11aP.cjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n\n\t/**\n\t * Disabled state of the radio button\n\t */\n\tdisabled?: boolean\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tif (props.disabled) {\n\t\treturn\n\t}\n\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t\t[$style.radioGroupButton_disabled]: disabled,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$scopedSlots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover:not(.radioGroupButton_disabled) {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: var(--font-weight-element, bold);\n}\n\n.radioGroupButton_disabled {\n\tfilter: saturate($opacity_normal);\n\topacity: $opacity_disabled;\n\n\t// Reset the cursor\n\tcursor: default;\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["createElementId","useInsideRadioGroup","useNcFormBox","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;;AAiCA,UAAM,UAAUA,gBAAAA,gBAAA;AAChB,UAAM,aAAaC,gBAAAA,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqBC,0BAAA;AAE7BC,QAAAA,UAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAYC,IAAAA,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,UAAI,MAAM,UAAU;AACnB;AAAA,MACD;AAEA,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcRadioGroupButton-DcU_Yagn.cjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n\n\t/**\n\t * Disabled state of the radio button\n\t */\n\tdisabled?: boolean\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tif (props.disabled) {\n\t\treturn\n\t}\n\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t\t[$style.radioGroupButton_disabled]: disabled,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$scopedSlots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<!-- @slot Optional icon slot -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:value=\"value\"\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover:not(.radioGroupButton_disabled) {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: var(--font-weight-element, bold);\n}\n\n.radioGroupButton_disabled {\n\tfilter: saturate($opacity_normal);\n\topacity: $opacity_disabled;\n\n\t// Reset the cursor\n\tcursor: default;\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["createElementId","useInsideRadioGroup","useNcFormBox","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;;AAiCA,UAAM,UAAUA,gBAAAA,gBAAA;AAChB,UAAM,aAAaC,gBAAAA,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqBC,0BAAA;AAE7BC,QAAAA,UAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAYC,IAAAA,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,UAAI,MAAM,UAAU;AACnB;AAAA,MACD;AAEA,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcReferenceWidget-Br8ecSQw.cjs

@@ -0,0 +1,280 @@
+require('../assets/NcReferenceWidget-Cg4xOL_8.css');
+"use strict";
+const core = require("@vueuse/core");
+const Vue = require("vue");
+const vueRouter = require("vue-router");
+const NcButton = require("./NcButton-W3wDpCdX.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const widgets = require("./widgets-DoYhefYe.cjs");
+const autolink = require("./autolink-BHlqTULT.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register(_l10n.t24);
+const IDLE_TIMEOUT = 3 * 60 * 1e3;
+const RESIZE_KEYBOARD_STEP = 10;
+const _sfc_main = {
+  name: "NcReferenceWidget",
+  components: {
+    NcButton: NcButton.NcButton
+  },
+  /* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */
+  props: {
+    reference: {
+      type: Object,
+      required: true
+    },
+    interactive: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    interactiveOptIn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {
+    const widgetId = `nc-reference-widget-${createElementId.createElementId()}`;
+    const isVisible = Vue.ref(false);
+    const widgetRoot = Vue.ref();
+    const customWidget = Vue.ref();
+    const { width } = core.useElementSize(widgetRoot);
+    const { height: customWidgetHeight } = core.useElementSize(customWidget);
+    core.useIntersectionObserver(widgetRoot, ([entry]) => {
+      Vue.nextTick(() => {
+        isVisible.value = entry.isIntersecting;
+      });
+    });
+    return {
+      width,
+      isVisible,
+      widgetRoot,
+      customWidget,
+      customWidgetHeight,
+      widgetId,
+      RESIZE_KEYBOARD_STEP
+    };
+  },
+  data() {
+    return {
+      showInteractive: false,
+      rendered: false,
+      idleTimeout: null,
+      isResizing: false,
+      resizedHeight: null,
+      resizeStartY: 0,
+      resizeStartHeight: 0,
+      resizeMinHeight: 100,
+      resizeMaxHeight: window.innerHeight - 120
+    };
+  },
+  computed: {
+    isInteractive() {
+      return !this.interactiveOptIn && this.interactive || this.showInteractive;
+    },
+    hasFullWidth() {
+      return widgets.hasFullWidth(this.reference.richObjectType);
+    },
+    isResizable() {
+      return widgets.isResizable(this.reference.richObjectType);
+    },
+    hasCustomWidget() {
+      return widgets.isWidgetRegistered(this.reference.richObjectType);
+    },
+    customWidgetStyle() {
+      if (!this.resizedHeight) {
+        return null;
+      }
+      return { height: `${this.resizedHeight}px !important` };
+    },
+    ariaValueNow() {
+      return Math.round(this.resizedHeight ?? this.customWidgetHeight);
+    },
+    hasInteractiveView() {
+      return widgets.isWidgetRegistered(this.reference.richObjectType) && widgets.hasInteractiveView(this.reference.richObjectType);
+    },
+    noAccess() {
+      return this.reference && !this.reference.accessible;
+    },
+    descriptionStyle() {
+      if (this.numberOfLines === 0) {
+        return {
+          display: "none"
+        };
+      }
+      const lineClamp = this.numberOfLines;
+      return {
+        lineClamp,
+        webkitLineClamp: lineClamp
+      };
+    },
+    numberOfLines() {
+      const lineCountOffsets = [450, 550, 650, Infinity];
+      return lineCountOffsets.findIndex((max) => this.width < max);
+    },
+    compactLink() {
+      const link = this.reference.openGraphObject.link;
+      if (!link) {
+        return "";
+      }
+      if (link.startsWith("https://")) {
+        return link.substring(8);
+      }
+      if (link.startsWith("http://")) {
+        return link.substring(7);
+      }
+      return link;
+    },
+    route() {
+      return autolink.getRoute(this.$router, this.reference.openGraphObject.link);
+    },
+    referenceWidgetLinkComponent() {
+      return this.route ? vueRouter.RouterLink : "a";
+    },
+    referenceWidgetLinkProps() {
+      return this.route ? { to: this.route } : { href: this.reference.openGraphObject.link, target: "_blank" };
+    }
+  },
+  watch: {
+    isVisible: {
+      handler(val) {
+        if (!val) {
+          this.idleTimeout = setTimeout(() => {
+            if (!this.isVisible) {
+              this.destroyWidget();
+            }
+          }, IDLE_TIMEOUT);
+          return;
+        }
+        if (this.idleTimeout) {
+          clearTimeout(this.idleTimeout);
+          this.idleTimeout = null;
+        }
+        if (!this.rendered) {
+          this.renderWidget();
+        }
+      },
+      immediate: true
+    }
+  },
+  beforeDestroy() {
+    if (this.idleTimeout) {
+      clearTimeout(this.idleTimeout);
+      this.idleTimout = null;
+    }
+    this.stopResize();
+    this.destroyWidget();
+  },
+  methods: {
+    t: _l10n.t,
+    enableInteractive() {
+      this.showInteractive = true;
+      this.renderWidget();
+    },
+    renderWidget() {
+      if (!this.$refs.customWidgetContent) {
+        return;
+      }
+      if (this?.reference?.richObjectType === "open-graph") {
+        return;
+      }
+      this.$refs.customWidgetContent.innerHTML = "";
+      const widget = document.createElement("div");
+      widget.style = "width: 100%;";
+      this.$refs.customWidgetContent.appendChild(widget);
+      this.$nextTick(() => {
+        widgets.renderWidget(widget, {
+          ...this.reference,
+          interactive: this.isInteractive
+        });
+        this.rendered = true;
+      });
+    },
+    destroyWidget() {
+      if (this.rendered) {
+        widgets.destroyWidget(this.reference.richObjectType, this.$el);
+        this.rendered = false;
+      }
+    },
+    initResizeLimits() {
+      const widgetEl = this.$refs.customWidgetContent?.firstElementChild;
+      if (widgetEl) {
+        const computedStyle = window.getComputedStyle(widgetEl);
+        const parsedMin = parseFloat(computedStyle.minHeight);
+        const parsedMax = parseFloat(computedStyle.maxHeight);
+        this.resizeMinHeight = parsedMin > 0 ? parsedMin : 100;
+        this.resizeMaxHeight = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : window.innerHeight - 120;
+      } else {
+        this.resizeMinHeight = 100;
+        this.resizeMaxHeight = window.innerHeight - 120;
+      }
+    },
+    startResize(event) {
+      if (!this.isResizable || !this.$refs.customWidget) {
+        return;
+      }
+      this.initResizeLimits();
+      this.isResizing = true;
+      this.resizeStartY = event.clientY;
+      this.resizeStartHeight = this.$refs.customWidget.getBoundingClientRect().height;
+      window.addEventListener("pointermove", this.onResize);
+      window.addEventListener("pointerup", this.stopResize);
+    },
+    onResizeKeydown(delta) {
+      if (!this.isResizable || !this.$refs.customWidget) {
+        return;
+      }
+      this.initResizeLimits();
+      const currentHeight = this.resizedHeight ?? this.resizeStartHeight;
+      const next = currentHeight + delta;
+      this.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, next));
+    },
+    onResize(event) {
+      if (!this.isResizing || !this.$refs.customWidget) {
+        return;
+      }
+      const deltaY = event.clientY - this.resizeStartY;
+      this.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, this.resizeStartHeight + deltaY));
+    },
+    stopResize() {
+      if (!this.isResizing) {
+        return;
+      }
+      this.isResizing = false;
+      window.removeEventListener("pointermove", this.onResize);
+      window.removeEventListener("pointerup", this.stopResize);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { ref: "widgetRoot", class: { "toggle-interactive": _vm.hasInteractiveView && !_vm.isInteractive } }, [_vm.reference && _vm.hasCustomWidget ? _c("div", { ref: "customWidget", staticClass: "widget-custom", class: {
+    "full-width": _vm.hasFullWidth
+  }, style: _vm.customWidgetStyle, attrs: { "id": _vm.widgetId } }, [_c("div", { ref: "customWidgetContent", staticClass: "widget-custom__content" }), _vm.isResizable ? _c("div", { staticClass: "widget-custom__resize-handle", attrs: { "role": "slider", "tabindex": "0", "aria-orientation": "vertical", "aria-label": _vm.t("Widget height"), "aria-valuenow": _vm.ariaValueNow, "aria-valuemin": _vm.resizeMinHeight, "aria-valuemax": _vm.resizeMaxHeight, "aria-controls": _vm.widgetId }, on: { "pointerdown": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.startResize.apply(null, arguments);
+  }, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.onResizeKeydown(-_vm.RESIZE_KEYBOARD_STEP);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.onResizeKeydown(_vm.RESIZE_KEYBOARD_STEP);
+  }] } }) : _vm._e()]) : !_vm.noAccess && _vm.reference && _vm.reference.openGraphObject && !_vm.hasCustomWidget ? _c(_vm.referenceWidgetLinkComponent, _vm._b({ tag: "component", staticClass: "widget-default", attrs: { "rel": "noopener noreferrer" } }, "component", _vm.referenceWidgetLinkProps, false), [_vm.reference.openGraphObject.thumb ? _c("img", { staticClass: "widget-default--image", attrs: { "src": _vm.reference.openGraphObject.thumb } }) : _vm._e(), _c("div", { staticClass: "widget-default--details" }, [_c("p", { staticClass: "widget-default--name" }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.name) + " ")]), _c("p", { staticClass: "widget-default--description", style: _vm.descriptionStyle }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.description) + " ")]), _c("p", { staticClass: "widget-default--link" }, [_vm._v(" " + _vm._s(_vm.compactLink) + " ")])])]) : _vm._e(), _vm.interactiveOptIn && _vm.hasInteractiveView && !_vm.isInteractive ? _c("NcButton", { staticClass: "toggle-interactive--button", on: { "click": _vm.enableInteractive } }, [_vm._v(" " + _vm._s(_vm.t("Enable interactive view")) + " ")]) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "96e3ab0e"
+);
+const NcReferenceWidget = __component__.exports;
+exports.NcReferenceWidget = NcReferenceWidget;
+//# sourceMappingURL=NcReferenceWidget-Br8ecSQw.cjs.map

package/dist/chunks/NcReferenceWidget-Br8ecSQw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcReferenceWidget-Br8ecSQw.cjs","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<template>\n\t<div ref=\"widgetRoot\" :class=\"{ 'toggle-interactive': hasInteractiveView && !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=\"{\n\t\t\t\t'full-width': hasFullWidth,\n\t\t\t}\"\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=\"isResizable\"\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 && hasInteractiveView && !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<script>\nimport { useElementSize, useIntersectionObserver } from '@vueuse/core'\nimport { nextTick, ref } from 'vue'\nimport { RouterLink } from 'vue-router'\nimport NcButton from '../../components/NcButton/index.js'\nimport { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { destroyWidget, hasFullWidth, hasInteractiveView, isResizable, isWidgetRegistered, renderWidget } from './../../functions/reference/widgets.ts'\nimport { getRoute } from './autolink.js'\n\nconst IDLE_TIMEOUT = 3 * 60 * 1000 // 3 minutes outside of viewport before widget is removed from the DOM\nconst RESIZE_KEYBOARD_STEP = 10\n\nexport default {\n\tname: 'NcReferenceWidget',\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\treference: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\tinteractive: {\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\tinteractiveOptIn: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst widgetId = `nc-reference-widget-${createElementId()}`\n\n\t\tconst isVisible = ref(false)\n\t\t// This is the widget root node\n\t\tconst widgetRoot = ref()\n\t\tconst customWidget = ref()\n\t\tconst { width } = useElementSize(widgetRoot)\n\t\tconst { height: customWidgetHeight } = useElementSize(customWidget)\n\n\t\tuseIntersectionObserver(widgetRoot, ([entry]) => {\n\t\t\tnextTick(() => {\n\t\t\t\tisVisible.value = entry.isIntersecting\n\t\t\t})\n\t\t})\n\n\t\treturn {\n\t\t\twidth,\n\t\t\tisVisible,\n\t\t\twidgetRoot,\n\t\t\tcustomWidget,\n\t\t\tcustomWidgetHeight,\n\t\t\twidgetId,\n\t\t\tRESIZE_KEYBOARD_STEP,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowInteractive: false,\n\t\t\trendered: false,\n\t\t\tidleTimeout: null,\n\t\t\tisResizing: false,\n\t\t\tresizedHeight: null,\n\t\t\tresizeStartY: 0,\n\t\t\tresizeStartHeight: 0,\n\t\t\tresizeMinHeight: 100,\n\t\t\tresizeMaxHeight: window.innerHeight - 120,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisInteractive() {\n\t\t\treturn (!this.interactiveOptIn && this.interactive) || this.showInteractive\n\t\t},\n\n\t\thasFullWidth() {\n\t\t\treturn hasFullWidth(this.reference.richObjectType)\n\t\t},\n\n\t\tisResizable() {\n\t\t\treturn isResizable(this.reference.richObjectType)\n\t\t},\n\n\t\thasCustomWidget() {\n\t\t\treturn isWidgetRegistered(this.reference.richObjectType)\n\t\t},\n\n\t\tcustomWidgetStyle() {\n\t\t\tif (!this.resizedHeight) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn { height: `${this.resizedHeight}px !important` }\n\t\t},\n\n\t\tariaValueNow() {\n\t\t\treturn Math.round(this.resizedHeight ?? this.customWidgetHeight)\n\t\t},\n\n\t\thasInteractiveView() {\n\t\t\treturn isWidgetRegistered(this.reference.richObjectType) && hasInteractiveView(this.reference.richObjectType)\n\t\t},\n\n\t\tnoAccess() {\n\t\t\treturn this.reference && !this.reference.accessible\n\t\t},\n\n\t\tdescriptionStyle() {\n\t\t\tif (this.numberOfLines === 0) {\n\t\t\t\treturn {\n\t\t\t\t\tdisplay: 'none',\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst lineClamp = this.numberOfLines\n\t\t\treturn {\n\t\t\t\tlineClamp,\n\t\t\t\twebkitLineClamp: lineClamp,\n\t\t\t}\n\t\t},\n\n\t\tnumberOfLines() {\n\t\t\t// no description for width < 450, one line until 550 and so on\n\t\t\tconst lineCountOffsets = [450, 550, 650, Infinity]\n\t\t\treturn lineCountOffsets.findIndex((max) => this.width < max)\n\t\t},\n\n\t\tcompactLink() {\n\t\t\tconst link = this.reference.openGraphObject.link\n\t\t\tif (!link) {\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (link.startsWith('https://')) {\n\t\t\t\treturn link.substring(8)\n\t\t\t}\n\t\t\tif (link.startsWith('http://')) {\n\t\t\t\treturn link.substring(7)\n\t\t\t}\n\t\t\treturn link\n\t\t},\n\n\t\troute() {\n\t\t\treturn getRoute(this.$router, this.reference.openGraphObject.link)\n\t\t},\n\n\t\treferenceWidgetLinkComponent() {\n\t\t\treturn this.route ? RouterLink : 'a'\n\t\t},\n\n\t\treferenceWidgetLinkProps() {\n\t\t\treturn this.route\n\t\t\t\t? { to: this.route }\n\t\t\t\t: { href: this.reference.openGraphObject.link, target: '_blank' }\n\t\t},\n\t},\n\n\twatch: {\n\t\tisVisible: {\n\t\t\thandler(val) {\n\t\t\t\tif (!val) {\n\t\t\t\t\tthis.idleTimeout = setTimeout(() => {\n\t\t\t\t\t\t// If the widget is still outside of viewport after timeout, destroy it\n\t\t\t\t\t\tif (!this.isVisible) {\n\t\t\t\t\t\t\tthis.destroyWidget()\n\t\t\t\t\t\t}\n\t\t\t\t\t}, IDLE_TIMEOUT)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (this.idleTimeout) {\n\t\t\t\t\tclearTimeout(this.idleTimeout)\n\t\t\t\t\tthis.idleTimeout = null\n\t\t\t\t}\n\n\t\t\t\tif (!this.rendered) {\n\t\t\t\t\tthis.renderWidget()\n\t\t\t\t}\n\t\t\t},\n\n\t\t\timmediate: true,\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.idleTimeout) {\n\t\t\tclearTimeout(this.idleTimeout)\n\t\t\tthis.idleTimout = null\n\t\t}\n\t\tthis.stopResize()\n\t\tthis.destroyWidget()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tenableInteractive() {\n\t\t\tthis.showInteractive = true\n\t\t\tthis.renderWidget()\n\t\t},\n\n\t\trenderWidget() {\n\t\t\tif (!this.$refs.customWidgetContent) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this?.reference?.richObjectType === 'open-graph') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$refs.customWidgetContent.innerHTML = ''\n\n\t\t\t// create a separate element so we can rerender on the ref again\n\t\t\tconst widget = document.createElement('div')\n\t\t\twidget.style = 'width: 100%;'\n\t\t\tthis.$refs.customWidgetContent.appendChild(widget)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\t// Waiting for the ref to become available\n\t\t\t\trenderWidget(widget, {\n\t\t\t\t\t...this.reference,\n\t\t\t\t\tinteractive: this.isInteractive,\n\t\t\t\t})\n\t\t\t\tthis.rendered = true\n\t\t\t})\n\t\t},\n\n\t\tdestroyWidget() {\n\t\t\tif (this.rendered) {\n\t\t\t\tdestroyWidget(this.reference.richObjectType, this.$el)\n\t\t\t\tthis.rendered = false\n\t\t\t}\n\t\t},\n\n\t\tinitResizeLimits() {\n\t\t\t// Use min/max height from rendered widget element if set\n\t\t\tconst widgetEl = this.$refs.customWidgetContent?.firstElementChild\n\t\t\tif (widgetEl) {\n\t\t\t\tconst computedStyle = window.getComputedStyle(widgetEl)\n\t\t\t\tconst parsedMin = parseFloat(computedStyle.minHeight)\n\t\t\t\tconst parsedMax = parseFloat(computedStyle.maxHeight)\n\t\t\t\tthis.resizeMinHeight = parsedMin > 0 ? parsedMin : 100\n\t\t\t\tthis.resizeMaxHeight = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : (window.innerHeight - 120)\n\t\t\t} else {\n\t\t\t\tthis.resizeMinHeight = 100\n\t\t\t\tthis.resizeMaxHeight = window.innerHeight - 120\n\t\t\t}\n\t\t},\n\n\t\tstartResize(event) {\n\t\t\tif (!this.isResizable || !this.$refs.customWidget) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.initResizeLimits()\n\t\t\tthis.isResizing = true\n\t\t\tthis.resizeStartY = event.clientY\n\t\t\tthis.resizeStartHeight = this.$refs.customWidget.getBoundingClientRect().height\n\n\t\t\twindow.addEventListener('pointermove', this.onResize)\n\t\t\twindow.addEventListener('pointerup', this.stopResize)\n\t\t},\n\n\t\tonResizeKeydown(delta) {\n\t\t\tif (!this.isResizable || !this.$refs.customWidget) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Establish limits once per interaction\n\t\t\tthis.initResizeLimits()\n\n\t\t\tconst currentHeight = this.resizedHeight ?? this.resizeStartHeight\n\t\t\tconst next = currentHeight + delta\n\t\t\tthis.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, next))\n\t\t},\n\n\t\tonResize(event) {\n\t\t\tif (!this.isResizing || !this.$refs.customWidget) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst deltaY = event.clientY - this.resizeStartY\n\t\t\tthis.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, this.resizeStartHeight + deltaY))\n\t\t},\n\n\t\tstopResize() {\n\t\t\tif (!this.isResizing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.isResizing = false\n\t\t\twindow.removeEventListener('pointermove', this.onResize)\n\t\t\twindow.removeEventListener('pointerup', this.stopResize)\n\t\t},\n\t},\n}\n</script>\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;\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":["NcButton","createElementId","ref","useElementSize","useIntersectionObserver","nextTick","hasFullWidth","isResizable","isWidgetRegistered","hasInteractiveView","getRoute","RouterLink","t","renderWidget","destroyWidget"],"mappings":"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"}