@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcPopover-DjeDGPXc.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcPopover-DjeDGPXc.cjs","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\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\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\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.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 component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\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>\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 `:focus-trap=\"false\"` 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 :focus-trap=\"false\">\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>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" 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<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\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 ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"[$style.ncPopover, popoverBaseClass]\"\n\t\t:theme=\"THEME\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"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 Vue from 'vue'\nimport { options, Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nconst THEME = 'nc-popover-8'\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 */\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\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 * Popup role\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\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t *\n\t\t * @deprecated use noFocusTrap instead\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\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 * 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: [HTMLElement, SVGElement, String, Boolean, Function],\n\t\t},\n\n\t\t/**\n\t\t * When there is no setReturnFocus, NcPopover will try to return focus to the trigger button.\n\t\t * Use this prop to disable this behavior.\n\t\t */\n\t\tnoAutoReturnFocus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\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\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\tbeforeDestroy() {\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 triggerButton = this.getPopoverTriggerButtonElement()\n\t\t\t\tif (!triggerButton || !triggerButton.hasAttributes('aria-expanded', 'aria-haspopup')) {\n\t\t\t\t\tVue.util.warn('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 * @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\tgetPopoverTriggerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerButtonElement() {\n\t\t\tconst triggerContainer = this.getPopoverTriggerElement()\n\t\t\treturn triggerContainer && tabbable(triggerContainer)[0]\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 || !this.focusTrap) {\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 || (!this.noAutoReturnFocus && this.getPopoverTriggerButtonElement()),\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 (err) {\n\t\t\t\tconsole.warn(err)\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('after-show')\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\t\tafterHide() {\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('after-hide')\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$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Class is built by floating-vue as \"v-popper--theme-{THEME}\"\n.ncPopover:global(.v-popper--theme-nc-popover-8) {\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-large);\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-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t:global(.v-popper__arrow-container) {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] :global(.v-popper__arrow-container) {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] :global(.v-popper__arrow-container) {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\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\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\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","defineComponent","options","Dropdown","Vue","tabbable","createFocusTrap","getTrapStack"],"mappings":";;;;;;;;;AAQA,MAAAA,cAAAC,IAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,2BAAA,MAAA,KAAA;AAAA,MACA,2BAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA;AAAA,QACA,iBAAA,KAAA;AAAA,QACA,iBAAA,KAAA,MAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAEA,WAAA,KAAA,aAAA,UAAA;AAAA,MACA,OAAA,KAAA;AAAA,IACA,CAAA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;ACkIA,MAAA,QAAA;AAGAC,YAAAA,QAAA,OAAA,KAAA,IAAA,gBAAAA,YAAA,QAAA,OAAA,QAAA;AAOA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,CAAA,QAAA,WAAA,QAAA,QAAA,UAAA,MAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,CAAA,aAAA,YAAA,QAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA,OAAA;AACA,WAAA,MAAA,gBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,SAAA,eAAA;AACA,SAAA,2BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,UAAA,OAAA,IAAA,OAAA;AACA,cAAA,gBAAA,KAAA,+BAAA;AACA,YAAA,CAAA,iBAAA,CAAA,cAAA,cAAA,iBAAA,eAAA,GAAA;AACAC,+BAAA,KAAA,KAAA,uPAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mCAAA;AAEA,YAAA,mBAAA,KAAA,kCAAA;AACA,YAAA,kBAAA,iBAAA,iBAAA,qBAAA;AACA,iBAAA,MAAA,iBAAA;AACA,WAAA,gBAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,2BAAA;AACA,aAAA,KAAA,MAAA,SAAA,MAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,2BAAA;AAGA,aAAA,KAAA,MAAA,QAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iCAAA;AACA,YAAA,mBAAA,KAAA,yBAAA;AACA,aAAA,oBAAAC,SAAAA,SAAA,gBAAA,EAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA,eAAA;AACA,YAAA,KAAA,UAAA;AAEA,UAAA,KAAA,eAAA,CAAA,KAAA,WAAA;AACA;AAAA,MACA;AAEA,YAAA,KAAA,KAAA,yBAAA;AACA,SAAA,WAAA;AAEA,UAAA,CAAA,IAAA;AACA;AAAA,MACA;AAGA,WAAA,aAAAC,UAAA,gBAAA,IAAA;AAAA;AAAA;AAAA,QAGA,mBAAA;AAAA,QACA,mBAAA;AAAA,QACA,gBAAA,KAAA,kBAAA,CAAA,KAAA,qBAAA,KAAA;QACA,WAAAC,YAAAA,aAAA;AAAA,QACA,eAAA;AAAA,MACA,CAAA;AACA,WAAA,WAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA,UAAA,IAAA;AACA,UAAA;AACA,aAAA,YAAA,WAAA,OAAA;AACA,aAAA,aAAA;AAAA,MACA,SAAA,KAAA;AACA,gBAAA,KAAA,GAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,2BAAA;AACA,YAAA,KAAA,KAAA,yBAAA;AACA,UAAA,iBAAA,WAAA,KAAA,wBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,6BAAA;AACA,YAAA,KAAA,KAAA,yBAAA;AACA,UAAA,oBAAA,WAAA,KAAA,wBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA,OAAA;AACA,UAAA,MAAA,SAAA,aAAA,MAAA,QAAA,UAAA;AACA,cAAA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,MAAA,YAAA;AACA,WAAA,yBAAA,EAAA,iBAAA,iBAAA,MAAA;AAQA,aAAA,MAAA,YAAA;AAAA,MACA,GAAA,EAAA,MAAA,MAAA,SAAA,KAAA,CAAA;AAEA,WAAA,iCAAA;AAEA,YAAA,KAAA,UAAA;AACA,YAAA,KAAA,aAAA;AACA,WAAA,yBAAA;AAAA,IACA;AAAA,IACA,YAAA;AACA,WAAA,yBAAA,EAAA,iBAAA,iBAAA,MAAA;AAQA,aAAA,MAAA,YAAA;AAAA,MACA,GAAA,EAAA,MAAA,MAAA,SAAA,KAAA,CAAA;AAEA,WAAA,eAAA;AACA,WAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcPopover-DxTXnL3u.mjs

@@ -1,309 +0,0 @@
-import '../assets/NcPopover--XoXIhLx.css';
-import Vue, { defineComponent } from "vue";
-import { options, Dropdown } from "floating-vue";
-import { createFocusTrap } from "focus-trap";
-import { tabbable } from "tabbable";
-import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-const _sfc_main$1 = defineComponent({
-  name: "NcPopoverTriggerProvider",
-  provide() {
-    return {
-      "NcPopover:trigger:shown": () => this.shown,
-      "NcPopover:trigger:attrs": () => this.triggerAttrs
-    };
-  },
-  props: {
-    shown: {
-      type: Boolean,
-      required: true
-    },
-    popupRole: {
-      type: String,
-      default: void 0
-    }
-  },
-  computed: {
-    triggerAttrs() {
-      return {
-        "aria-haspopup": this.popupRole,
-        "aria-expanded": this.shown.toString()
-      };
-    }
-  },
-  render() {
-    return this.$scopedSlots.default?.({
-      attrs: this.triggerAttrs
-    });
-  }
-});
-const _sfc_render$1 = null;
-const _sfc_staticRenderFns$1 = null;
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null
-);
-const NcPopoverTriggerProvider = __component__$1.exports;
-const ncPopover = "_ncPopover_hdy45_20";
-const style0 = {
-  "material-design-icon": "_material-design-icon_hdy45_12",
-  ncPopover
-};
-const THEME = "nc-popover-8";
-options.themes[THEME] = structuredClone(options.themes.dropdown);
-const _sfc_main = {
-  name: "NcPopover",
-  components: {
-    Dropdown,
-    NcPopoverTriggerProvider
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * Show or hide the popper
-     * @see https://floating-vue.starpad.dev/api/#shown
-     */
-    shown: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Popup role
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values
-     */
-    popupRole: {
-      type: String,
-      default: void 0,
-      validator: (value) => ["menu", "listbox", "tree", "grid", "dialog", "true"].includes(value)
-    },
-    popoverBaseClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Enable popover focus trap
-     *
-     * @deprecated use noFocusTrap instead
-     */
-    focusTrap: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Disable the popover focus trap.
-     */
-    noFocusTrap: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Set element to return focus to after focus trap deactivation
-     *
-     * @type {SetReturnFocus}
-     */
-    setReturnFocus: {
-      default: void 0,
-      type: [HTMLElement, SVGElement, String, Boolean, Function]
-    },
-    /**
-     * When there is no setReturnFocus, NcPopover will try to return focus to the trigger button.
-     * Use this prop to disable this behavior.
-     */
-    noAutoReturnFocus: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    "after-show",
-    "after-hide",
-    /**
-     * @see https://floating-vue.starpad.dev/api/#update-shown
-     */
-    "update:shown"
-  ],
-  setup() {
-    return {
-      THEME
-    };
-  },
-  data() {
-    return {
-      internalShown: this.shown
-    };
-  },
-  watch: {
-    shown(value) {
-      this.internalShown = value;
-    },
-    internalShown(value) {
-      this.$emit("update:shown", value);
-    }
-  },
-  mounted() {
-    this.checkTriggerA11y();
-  },
-  beforeDestroy() {
-    this.clearFocusTrap();
-    this.clearEscapeStopPropagation();
-  },
-  methods: {
-    /**
-     * Check if the trigger has all required a11y attributes.
-     * Important to check custom trigger button.
-     */
-    checkTriggerA11y() {
-      if (window.OC?.debug) {
-        const triggerButton = this.getPopoverTriggerButtonElement();
-        if (!triggerButton || !triggerButton.hasAttributes("aria-expanded", "aria-haspopup")) {
-          Vue.util.warn("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.");
-        }
-      }
-    },
-    /**
-     * Remove incorrect aria-describedby attribute from the trigger.
-     * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734
-     */
-    removeFloatingVueAriaDescribedBy() {
-      const triggerContainer = this.getPopoverTriggerContainerElement();
-      const triggerElements = triggerContainer.querySelectorAll("[data-popper-shown]");
-      for (const el of triggerElements) {
-        el.removeAttribute("aria-describedby");
-      }
-    },
-    /**
-     * @return {HTMLElement|undefined}
-     */
-    getPopoverContentElement() {
-      return this.$refs.popover?.$refs.popperContent?.$el;
-    },
-    /**
-     * @return {HTMLElement|undefined}
-     */
-    getPopoverTriggerElement() {
-      return this.$refs.popover.$refs.reference;
-    },
-    /**
-     * @return {HTMLElement|undefined}
-     */
-    getPopoverTriggerButtonElement() {
-      const triggerContainer = this.getPopoverTriggerElement();
-      return triggerContainer && tabbable(triggerContainer)[0];
-    },
-    /**
-     * Add focus trap for accessibility.
-     */
-    async useFocusTrap() {
-      await this.$nextTick();
-      if (this.noFocusTrap || !this.focusTrap) {
-        return;
-      }
-      const el = this.getPopoverContentElement();
-      el.tabIndex = -1;
-      if (!el) {
-        return;
-      }
-      this.$focusTrap = createFocusTrap(el, {
-        // Prevents to lose focus using esc key
-        // Focus will be release when popover be hide
-        escapeDeactivates: false,
-        allowOutsideClick: true,
-        setReturnFocus: this.setReturnFocus || !this.noAutoReturnFocus && this.getPopoverTriggerButtonElement(),
-        trapStack: getTrapStack(),
-        fallBackFocus: el
-      });
-      this.$focusTrap.activate();
-    },
-    /**
-     * Remove focus trap
-     *
-     * @param {object} options The configuration options for focusTrap
-     */
-    clearFocusTrap(options2 = {}) {
-      try {
-        this.$focusTrap?.deactivate(options2);
-        this.$focusTrap = null;
-      } catch (err) {
-        console.warn(err);
-      }
-    },
-    /**
-     * Add stopPropagation for Escape.
-     * It prevents global Escape handling after closing popover.
-     *
-     * Manual event handling is used here instead of v-on because there is no direct access to the node.
-     * Alternative - wrap <template #popover> in a div wrapper.
-     */
-    addEscapeStopPropagation() {
-      const el = this.getPopoverContentElement();
-      el?.addEventListener("keydown", this.stopKeydownEscapeHandler);
-    },
-    /**
-     * Remove stop Escape handler
-     */
-    clearEscapeStopPropagation() {
-      const el = this.getPopoverContentElement();
-      el?.removeEventListener("keydown", this.stopKeydownEscapeHandler);
-    },
-    /**
-     * @param {KeyboardEvent} event - native keydown event
-     */
-    stopKeydownEscapeHandler(event) {
-      if (event.type === "keydown" && event.key === "Escape") {
-        event.stopPropagation();
-      }
-    },
-    async afterShow() {
-      this.getPopoverContentElement().addEventListener("transitionend", () => {
-        this.$emit("after-show");
-      }, { once: true, passive: true });
-      this.removeFloatingVueAriaDescribedBy();
-      await this.$nextTick();
-      await this.useFocusTrap();
-      this.addEscapeStopPropagation();
-    },
-    afterHide() {
-      this.getPopoverContentElement().addEventListener("transitionend", () => {
-        this.$emit("after-hide");
-      }, { once: true, passive: true });
-      this.clearFocusTrap();
-      this.clearEscapeStopPropagation();
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("Dropdown", _vm._g(_vm._b({ ref: "popover", attrs: { "distance": 10, "arrow-padding": 10, "no-auto-focus": true, "popper-class": [_vm.$style.ncPopover, _vm.popoverBaseClass], "theme": _vm.THEME, "shown": _vm.internalShown }, on: { "update:shown": function($event) {
-    _vm.internalShown = $event;
-  }, "apply-show": _vm.afterShow, "apply-hide": _vm.afterHide }, scopedSlots: _vm._u([{ key: "popper", fn: function(slotProps) {
-    return [_vm._t("default", null, null, slotProps)];
-  } }], null, true) }, "Dropdown", _vm.$attrs, false), _vm.$listeners), [_c("NcPopoverTriggerProvider", { attrs: { "shown": _vm.internalShown, "popup-role": _vm.popupRole }, scopedSlots: _vm._u([{ key: "default", fn: function(slotProps) {
-    return [_vm._t("trigger", null, null, slotProps)];
-  } }], null, true) })], 1);
-};
-var _sfc_staticRenderFns = [];
-const __cssModules = {
-  "$style": style0
-};
-function _sfc_injectStyles(ctx) {
-  for (var key in __cssModules) {
-    this[key] = __cssModules[key];
-  }
-}
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  _sfc_injectStyles,
-  null
-);
-const NcPopover = __component__.exports;
-export {
-  NcPopover as N
-};
-//# sourceMappingURL=NcPopover-DxTXnL3u.mjs.map

package/dist/chunks/NcPopover-DxTXnL3u.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcPopover-DxTXnL3u.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\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\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\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.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 component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\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>\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 `:focus-trap=\"false\"` 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 :focus-trap=\"false\">\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>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" 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<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\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 ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"[$style.ncPopover, popoverBaseClass]\"\n\t\t:theme=\"THEME\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"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 Vue from 'vue'\nimport { options, Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nconst THEME = 'nc-popover-8'\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 */\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\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 * Popup role\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\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t *\n\t\t * @deprecated use noFocusTrap instead\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\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 * 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: [HTMLElement, SVGElement, String, Boolean, Function],\n\t\t},\n\n\t\t/**\n\t\t * When there is no setReturnFocus, NcPopover will try to return focus to the trigger button.\n\t\t * Use this prop to disable this behavior.\n\t\t */\n\t\tnoAutoReturnFocus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\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\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\tbeforeDestroy() {\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 triggerButton = this.getPopoverTriggerButtonElement()\n\t\t\t\tif (!triggerButton || !triggerButton.hasAttributes('aria-expanded', 'aria-haspopup')) {\n\t\t\t\t\tVue.util.warn('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 * @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\tgetPopoverTriggerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerButtonElement() {\n\t\t\tconst triggerContainer = this.getPopoverTriggerElement()\n\t\t\treturn triggerContainer && tabbable(triggerContainer)[0]\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 || !this.focusTrap) {\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 || (!this.noAutoReturnFocus && this.getPopoverTriggerButtonElement()),\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 (err) {\n\t\t\t\tconsole.warn(err)\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('after-show')\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\t\tafterHide() {\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('after-hide')\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$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Class is built by floating-vue as \"v-popper--theme-{THEME}\"\n.ncPopover:global(.v-popper--theme-nc-popover-8) {\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-large);\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-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t:global(.v-popper__arrow-container) {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] :global(.v-popper__arrow-container) {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] :global(.v-popper__arrow-container) {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\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\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\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","options"],"mappings":"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"}

package/dist/chunks/NcProgressBar-CI_nOrPg.mjs

@@ -1,116 +0,0 @@
-import '../assets/NcProgressBar-DTCznR-m.css';
-import { useCssVars } from "vue";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-const __default__ = {
-  name: "NcProgressBar",
-  props: {
-    /**
-     * An integer between 1 and 100
-     */
-    value: {
-      type: Number,
-      default: 0,
-      validator(value) {
-        return value >= 0 && value <= 100;
-      }
-    },
-    /**
-     * Determines the height of the progressbar.
-     * Possible values:
-     * - 'small' (default)
-     * - 'medium'
-     * - Number
-     * @type {'small'|'medium'|number}
-     */
-    size: {
-      type: [String, Number],
-      default: "small",
-      validator(value) {
-        return ["small", "medium"].includes(value) || typeof value === "number";
-      }
-    },
-    /**
-     * Applies an error color to the progressbar if true.
-     */
-    error: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * ProgressBar type
-     */
-    type: {
-      type: String,
-      default: "linear",
-      validator(value) {
-        return ["linear", "circular"].includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    return {
-      stroke: 4
-    };
-  },
-  computed: {
-    height() {
-      if (this.type === "circular") {
-        if (Number.isInteger(this.size)) {
-          return this.size;
-        }
-        return 44;
-      }
-      if (this.size === "small") {
-        return 4;
-      } else if (this.size === "medium") {
-        return 6;
-      }
-      return this.size;
-    },
-    progress() {
-      return this.value / 100;
-    },
-    radius() {
-      return this.height / 2;
-    },
-    radiusNormalized() {
-      return this.radius - 3 * this.stroke;
-    },
-    circumference() {
-      return this.radiusNormalized * 2 * Math.PI;
-    }
-  }
-};
-const __injectCSSVars__ = () => {
-  useCssVars((_vm, _setup) => ({
-    "efbac356": _vm.color
-  }));
-};
-const __setup__ = __default__.setup;
-__default__.setup = __setup__ ? (props, ctx) => {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-const _sfc_main = __default__;
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _vm.type === "circular" ? _c("span", { staticClass: "progress-bar progress-bar--circular", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "role": "progressbar", "aria-valuenow": _vm.value } }, [_c("svg", { attrs: { "height": _vm.height, "width": _vm.height } }, [_c("circle", { attrs: { "stroke": "currentColor", "fill": "transparent", "stroke-dasharray": `${_vm.progress * _vm.circumference} ${(1 - _vm.progress) * _vm.circumference}`, "stroke-dashoffset": 0.25 * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } }), _c("circle", { attrs: { "stroke": "var(--color-background-darker)", "fill": "transparent", "stroke-dasharray": `${(1 - _vm.progress) * _vm.circumference} ${_vm.progress * _vm.circumference}`, "stroke-dashoffset": (0.25 - _vm.progress) * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } })])]) : _c("progress", { staticClass: "progress-bar progress-bar--linear vue", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "max": "100" }, domProps: { "value": _vm.value } });
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "8e8087c7"
-);
-const NcProgressBar = __component__.exports;
-export {
-  NcProgressBar as N
-};
-//# sourceMappingURL=NcProgressBar-CI_nOrPg.mjs.map

package/dist/chunks/NcProgressBar-CI_nOrPg.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcProgressBar-CI_nOrPg.mjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br>\n\t\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\n\n<template>\n\t<span v-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg :height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle stroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25*circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t\t<circle stroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t</svg>\n\t</span>\n\t<progress v-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:style=\"{'--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color, var(--color-primary-element));\n\t}\n\t&--error {\n\t\tcolor: var(--color-text-error, var(--color-error)) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;AAiFA,MAAA,cAAA;AAAA,EAEA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,SAAA,KACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,SAAA,QAAA,EAAA,SAAA,KAAA,KAAA,OAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,UAAA,UAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,SAAA;AACA,UAAA,KAAA,SAAA,YAAA;AACA,YAAA,OAAA,UAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,SAAA,UAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,QAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA,IACA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcProgressBar-lh4Gtdfr.cjs

@@ -1,115 +0,0 @@
-require('../assets/NcProgressBar-DTCznR-m.css');
-"use strict";
-const Vue = require("vue");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const __default__ = {
-  name: "NcProgressBar",
-  props: {
-    /**
-     * An integer between 1 and 100
-     */
-    value: {
-      type: Number,
-      default: 0,
-      validator(value) {
-        return value >= 0 && value <= 100;
-      }
-    },
-    /**
-     * Determines the height of the progressbar.
-     * Possible values:
-     * - 'small' (default)
-     * - 'medium'
-     * - Number
-     * @type {'small'|'medium'|number}
-     */
-    size: {
-      type: [String, Number],
-      default: "small",
-      validator(value) {
-        return ["small", "medium"].includes(value) || typeof value === "number";
-      }
-    },
-    /**
-     * Applies an error color to the progressbar if true.
-     */
-    error: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * ProgressBar type
-     */
-    type: {
-      type: String,
-      default: "linear",
-      validator(value) {
-        return ["linear", "circular"].includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    return {
-      stroke: 4
-    };
-  },
-  computed: {
-    height() {
-      if (this.type === "circular") {
-        if (Number.isInteger(this.size)) {
-          return this.size;
-        }
-        return 44;
-      }
-      if (this.size === "small") {
-        return 4;
-      } else if (this.size === "medium") {
-        return 6;
-      }
-      return this.size;
-    },
-    progress() {
-      return this.value / 100;
-    },
-    radius() {
-      return this.height / 2;
-    },
-    radiusNormalized() {
-      return this.radius - 3 * this.stroke;
-    },
-    circumference() {
-      return this.radiusNormalized * 2 * Math.PI;
-    }
-  }
-};
-const __injectCSSVars__ = () => {
-  Vue.useCssVars((_vm, _setup) => ({
-    "efbac356": _vm.color
-  }));
-};
-const __setup__ = __default__.setup;
-__default__.setup = __setup__ ? (props, ctx) => {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-const _sfc_main = __default__;
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _vm.type === "circular" ? _c("span", { staticClass: "progress-bar progress-bar--circular", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "role": "progressbar", "aria-valuenow": _vm.value } }, [_c("svg", { attrs: { "height": _vm.height, "width": _vm.height } }, [_c("circle", { attrs: { "stroke": "currentColor", "fill": "transparent", "stroke-dasharray": `${_vm.progress * _vm.circumference} ${(1 - _vm.progress) * _vm.circumference}`, "stroke-dashoffset": 0.25 * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } }), _c("circle", { attrs: { "stroke": "var(--color-background-darker)", "fill": "transparent", "stroke-dasharray": `${(1 - _vm.progress) * _vm.circumference} ${_vm.progress * _vm.circumference}`, "stroke-dashoffset": (0.25 - _vm.progress) * _vm.circumference, "stroke-width": _vm.stroke, "r": _vm.radiusNormalized, "cx": _vm.radius, "cy": _vm.radius } })])]) : _c("progress", { staticClass: "progress-bar progress-bar--linear vue", class: { "progress-bar--error": _vm.error }, style: { "--progress-bar-height": _vm.height + "px" }, attrs: { "max": "100" }, domProps: { "value": _vm.value } });
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "8e8087c7"
-);
-const NcProgressBar = __component__.exports;
-exports.NcProgressBar = NcProgressBar;
-//# sourceMappingURL=NcProgressBar-lh4Gtdfr.cjs.map