@nextcloud/vue 9.3.3 → 9.5.0

package/dist/chunks/NcModal-DHryP_87.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcModal-DHryP_87.mjs","sources":["../../src/composables/useScopeIdAttrs.ts","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { ComponentInternalInstance } from 'vue'\n\nimport { getCurrentInstance, warn } from 'vue'\n\n/**\n * Get the parent instance of the instance only if the instance is the root node of the parent\n * - Parent > Child - same root node\n * - Parent > div > Child - different root node\n * - Parent > WrapperWithSlot > Child - different root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeParent(instance: ComponentInternalInstance): ComponentInternalInstance | null {\n\tif (!instance.parent) {\n\t\treturn null\n\t}\n\n\tif ('vapor' in instance || 'vapor' in instance.parent) {\n\t\twarn('Vapor instances are not supported in useScopeIdAttrs :(')\n\t\treturn null\n\t}\n\n\tif (instance.parent.subTree !== instance.vnode) {\n\t\treturn null\n\t}\n\n\treturn instance.parent\n}\n\n/**\n * Get all ancestor instances of the instance that are on the same root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeAncestors(instance: ComponentInternalInstance): ComponentInternalInstance[] {\n\tconst ancestors: ComponentInternalInstance[] = [instance]\n\tlet parent = getSameNodeParent(instance)\n\twhile (parent) {\n\t\tancestors.push(parent)\n\t\tparent = getSameNodeParent(parent)\n\t}\n\treturn ancestors\n}\n\n/**\n * Get a binding object for all data-v-scopeid attributes that are supposed to be on the root node.\n * It allows to have scoped styles from parents in edge cases not covered by Vue:\n * - Teleport on the root\n * - Fragments\n *\n * @todo Do we need to support slotScopeIds for `:slotted()`?\n *\n * @example\n * ```ts\n * <script setup>\n * import { useScopeIdAttrs } from './useScopeIdAttrs.ts'\n * const scopeIdAttrs = useScopeIdAttrs()\n * </script>\n * <template>\n *   <teleport to=\"body\">\n *     <div v-bind=\"scopeIdAttrs\" />\n *   </teleport>\n * </template>\n * ```\n */\nexport function useScopeIdAttrs() {\n\tconst instance = getCurrentInstance()\n\n\tif (!instance) {\n\t\tthrow new Error('useScopeId must be called within a setup context')\n\t}\n\n\tconst sameNodeAncestors = getSameNodeAncestors(instance)\n\tconst scopeIds = sameNodeAncestors.map((instance) => instance.vnode.scopeId).filter(Boolean)\n\tconst scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, '']))\n\treturn scopeIdAttrs\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { UseSwipeDirection } from '@vueuse/core'\nimport type { FocusTargetValueOrFalse, FocusTrap, Options as FocusTrapOptions } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { mdiChevronLeft, mdiChevronRight, mdiClose, mdiPause, mdiPlay } from '@mdi/js'\nimport { useIntervalFn, useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, onMounted, onUnmounted, ref, toRef, useTemplateRef, warn, watch, watchEffect } from 'vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useHotKey } from '../../composables/index.ts'\nimport { useScopeIdAttrs } from '../../composables/useScopeIdAttrs.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The show-state of the modal.\n */\nconst showModal = defineModel<boolean>('show', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Name to be shown with the modal\n\t */\n\tname?: string\n\n\t/**\n\t * Declare if a previous slide is available\n\t */\n\thasPrevious?: boolean\n\n\t/**\n\t * Declare if a next slide is available\n\t */\n\thasNext?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * Declare if the slideshow functionality should be enabled\n\t */\n\tenableSlideshow?: boolean\n\n\t/**\n\t * Declare the slide interval\n\t */\n\tslideshowDelay?: number\n\n\t/**\n\t * Allow to pause an ongoing slideshow\n\t */\n\tslideshowPaused?: boolean\n\n\t/**\n\t * Disable swipe between slides\n\t */\n\tdisableSwipe?: boolean\n\n\t/**\n\t * Enable spread navigation\n\t */\n\tspreadNavigation?: boolean\n\n\t/**\n\t * Defines the modal size.\n\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the modal if the user clicked outside the modal\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Makes the modal backdrop opaque if true\n\t * Will be overwritten if some buttons are shown outside\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Set light backdrop. Makes the modal header appear light.\n\t */\n\tlightBackdrop?: boolean\n\n\t/**\n\t * Selector for the modal container, pass `null` to prevent automatic container mounting\n\t */\n\tcontainer?: string | null\n\n\t/**\n\t * Pass in `true` if you want the modal 'close' button to be displayed\n\t * outside the modal boundaries, in the top right corner of the window.\n\t *\n\t * @since 8.25.0\n\t */\n\tcloseButtonOutside?: boolean\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Display x items inline\n\t *\n\t * @see NcActions component usage\n\t */\n\tinlineActions?: number\n\n\t/**\n\t * Id of the element that labels the dialog (the name)\n\t * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.\n\t */\n\tlabelId?: string\n\n\t/**\n\t * Set element to return focus to after focus trap deactivation\n\t */\n\tsetReturnFocus?: FocusTargetValueOrFalse\n}>(), {\n\tadditionalTrapElements: () => [],\n\tcontainer: 'body',\n\tinlineActions: 0,\n\tlabelId: '',\n\tslideshowDelay: 5000,\n\tsize: 'normal',\n\tname: '',\n\tsetReturnFocus: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Trigger showing the next slide.\n\t *\n\t * @param payload - The event that triggered showing the next slide\n\t */\n\tnext: [payload?: Event]\n\n\t/**\n\t * Trigger showing the previous slide.\n\t *\n\t * @param payload - The event that triggered showing the previous slide\n\t */\n\tprevious: [payload?: Event]\n\n\t/**\n\t * Emitted when the closing animation is finished\n\t *\n\t * @param payload - The event that triggered the close\n\t */\n\tclose: [payload?: Event]\n\n\t/**\n\t * @param payload - The new show-state\n\t */\n\t'update:show': [payload: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Actions to show (one or more NcAction* components)\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The modal content to show.\n\t */\n\tdefault?: Slot\n}>()\n\nconst scopeIdAttrs = useScopeIdAttrs()\n\nconst modalId = createElementId()\nconst maskElement = useTemplateRef('mask')\n\n// Set up the focus trap\nlet focusTrap: FocusTrap | undefined\nonMounted(() => useFocusTrap())\nonUnmounted(() => clearFocusTrap())\nwatch(() => props.additionalTrapElements, (elements) => {\n\tif (focusTrap) {\n\t\tfocusTrap.updateContainerElements([maskElement.value!, ...elements])\n\t}\n})\n\n// Set up the slideshow\nconst {\n\tisActive: isPlaying,\n\tpause: stopSlideshow,\n\tresume: startSlideshow,\n} = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false })\n\nconst animationKey = ref(0)\nconst runSlideshow = ref(false)\nwatchEffect(() => {\n\tif (runSlideshow.value && !props.slideshowPaused) {\n\t\tstartSlideshow()\n\t} else if (isPlaying.value) {\n\t\tstopSlideshow()\n\t}\n})\n\nconst cssSlideshowDelay = computed(() => `${props.slideshowDelay}ms`)\n\n// Setup swipe navigation\nconst { stop: stopSwipe } = useSwipe(maskElement, {\n\tonSwipeEnd: handleSwipe,\n})\nonUnmounted(stopSwipe)\n\n// Setup hotkeys (keyboard navigation)\nuseHotKey('Escape', () => {\n\tconst trapStack = getTrapStack()\n\t// Only close the most recent focus trap modal\n\tif (trapStack.at(-1) === focusTrap) {\n\t\tclose()\n\t}\n}, { allowInModal: true })\n\nuseHotKey(['ArrowLeft', 'ArrowRight'], (event) => {\n\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t// For example, when the focus is in Sidebar or NcActions' items,\n\t// arrow navigation should not be intercepted by modal slider\n\tif (document.activeElement && !maskElement.value!.contains(document.activeElement)) {\n\t\treturn\n\t}\n\n\tif ((event.key === 'ArrowLeft') !== isRtl) {\n\t\tpreviousSlide()\n\t} else {\n\t\tnextSlide()\n\t}\n}, { allowInModal: true })\n\n// for developers we should add a warning if used with invalid props combination\nonMounted(() => {\n\tif (!props.name && !props.labelId) {\n\t\twarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t}\n})\n\n/**\n * Trigger showing the next slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction nextSlide(event?: Event) {\n\tif (!props.hasNext) {\n\t\trunSlideshow.value = false\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('next', event)\n}\n\n/**\n * Trigger showing the previous slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction previousSlide(event?: Event) {\n\tif (!props.hasPrevious) {\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('previous', event)\n}\n\n/**\n * handle the swipe event\n *\n * @param e - The touch event\n * @param direction - Swipe direction\n */\nfunction handleSwipe(e: TouchEvent, direction: UseSwipeDirection) {\n\tif (!props.disableSwipe) {\n\t\tif (direction !== 'left' && direction !== 'right') {\n\t\t\treturn\n\t\t}\n\n\t\tif ((direction === 'left') !== isRtl) {\n\t\t\tnextSlide(e)\n\t\t} else {\n\t\t\tpreviousSlide(e)\n\t\t}\n\t}\n}\n\n/**\n * Reset the slideshow interval and animation\n */\nfunction restartSlideshow() {\n\tstopSlideshow()\n\tstartSlideshow()\n\tanimationKey.value++\n}\n\n/**\n * Handle closing the modal.\n *\n * @param event - The event that triggered closing the modal\n */\nfunction close(event?: Event) {\n\t// do not fire event if forbidden\n\tif (props.noClose) {\n\t\treturn\n\t}\n\n\tshowModal.value = false\n\n\t// delay closing for animation\n\tsetTimeout(() => {\n\t\temit('close', event)\n\t}, 300)\n}\n\n/**\n * Handle click on modal wrapper\n * If `closeOnClickOutside` is set the modal will be closed\n *\n * @param event - The click event\n */\nfunction handleClickModalWrapper(event: MouseEvent) {\n\tif (props.closeOnClickOutside) {\n\t\tclose(event)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n */\nasync function useFocusTrap() {\n\t// Don't do anything if the modal is hidden,\n\t// or we have a focus trap already\n\tif (!showModal.value || focusTrap) {\n\t\treturn\n\t}\n\n\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\tawait nextTick()\n\n\tconst options: FocusTrapOptions = {\n\t\tallowOutsideClick: true,\n\t\tfallbackFocus: maskElement.value!,\n\t\ttrapStack: getTrapStack(),\n\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap.\n\t\t// Focus trap is deactivated on modal close anyway.\n\t\tescapeDeactivates: false,\n\t\tsetReturnFocus: props.setReturnFocus,\n\t}\n\n\t// Init focus trap\n\tfocusTrap = createFocusTrap([maskElement.value!, ...props.additionalTrapElements], options)\n\tfocusTrap.activate()\n}\n\n/**\n * Deactivate the active focus trap - if any.\n */\nfunction clearFocusTrap() {\n\tif (!focusTrap) {\n\t\treturn\n\t}\n\tfocusTrap?.deactivate()\n\tfocusTrap = undefined\n}\n</script>\n\n<template>\n\t<Teleport :disabled=\"container === null\" :to=\"container\">\n\t\t<transition\n\t\t\tname=\"fade\"\n\t\t\tappear\n\t\t\t@afterEnter=\"useFocusTrap\"\n\t\t\t@beforeLeave=\"clearFocusTrap\">\n\t\t\t<div\n\t\t\t\tv-show=\"showModal\"\n\t\t\t\tv-bind=\"{ ...$attrs, ...scopeIdAttrs }\"\n\t\t\t\tref=\"mask\"\n\t\t\t\tclass=\"modal-mask\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'modal-mask--opaque': dark || closeButtonOutside || hasPrevious || hasNext,\n\t\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-labelledby=\"labelId || `modal-name-${modalId}`\"\n\t\t\t\t:aria-describedby=\"'modal-description-' + modalId\"\n\t\t\t\ttabindex=\"-1\">\n\t\t\t\t<!-- Header -->\n\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"modal-header\"\n\t\t\t\t\t\t:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tv-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t\t:id=\"'modal-name-' + modalId\"\n\t\t\t\t\t\t\tclass=\"modal-header__name\">\n\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\t\t:title=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t@click=\"runSlideshow = !runSlideshow\">\n\t\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tclass=\"play-pause-icons__icon\"\n\t\t\t\t\t\t\t\t\tinline\n\t\t\t\t\t\t\t\t\t:name=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\t\t:path=\"isPlaying ? mdiPause : mdiPlay\" />\n\n\t\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tv-if=\"isPlaying\"\n\t\t\t\t\t\t\t\t\t:key=\"`${modalId}-animation-${animationKey}`\"\n\t\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tclass=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\n\t\t\t\t<!-- Content wrapper -->\n\t\t\t\t<transition :name=\"`modal-${outTransition ? 'out' : 'in'}`\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t\t{ 'modal-wrapper--spread-navigation': spreadNavigation },\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasPrevious\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Previous')\"\n\t\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"previousSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronLeft\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t\t<div :id=\"'modal-description-' + modalId\" class=\"modal-container\">\n\t\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && !closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasNext\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Next')\"\n\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"nextSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronRight\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\t\t\t</div>\n\t\t</transition>\n\t</Teleport>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.modal-mask {\n\tposition: fixed;\n\tz-index: 9998;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\t--backdrop-color: 0, 0, 0;\n\tbackground-color: rgba(var(--backdrop-color), .5);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&--opaque {\n\t\tbackground-color: rgba(var(--backdrop-color), .92);\n\t}\n\t&--light {\n\t\t--backdrop-color: 255, 255, 255;\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tinset-inline: 0 0;\n\t// prevent vue show to use display:none and resetting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: var(--header-height);\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t&__name {\n\t\toverflow-x: hidden;\n\t\twidth: 100%;\n\t\tpadding: 0 calc(var(--default-clickable-area) * 3) 0 12px; // maximum actions is 3\n\t\ttransition: padding ease 100ms;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: $icon-size;\n\t\tmargin-block: 0;\n\t}\n\n\t// On wider screens the name can be centered\n\t@media only screen and (min-width: $breakpoint-mobile) {\n\t\t&__name {\n\t\t\tpadding-inline-start: calc(var(--default-clickable-area) * 3); // maximum actions is 3\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tposition: absolute;\n\t\tinset-inline-end: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\n\t\t.header-close {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.play-pause-icons {\n\t\t\tposition: relative;\n\t\t\twidth: var(--header-height);\n\t\t\theight: var(--header-height);\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\t.play-pause-icons__icon {\n\t\t\t\t\topacity: $opacity_full;\n\t\t\t\t\tborder-radius: calc(var(--default-clickable-area) / 2);\n\t\t\t\t\tbackground-color: $icon-focus-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__icon {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: $opacity_normal;\n\t\t\t}\n\t\t}\n\n\t\t&:deep() .action-item {\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\n\t\t\t&--single {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-size: 22px;\n\t\t\t}\n\t\t}\n\n\t\t// The modal ignores the color theme and adds a black backdrop\n\t\t// so we need to add custom color of the actions toggle\n\t\t.header-actions :deep(button:focus-visible) {\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid #fff !important;\n\t\t}\n\t}\n}\n\n.modal-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Navigation buttons */\n\t.prev,\n\t.next {\n\t\tz-index: 10000;\n\t\theight: 35vh;\n\t\tmin-height: 300px;\n\t\tposition: absolute;\n\t\ttransition: opacity 250ms;\n\t\t// hover the mask\n\t\tcolor: white;\n\n\t\t&:focus-visible {\n\t\t\t// Override NcButton focus styles\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-box-shadow);\n\t\t}\n\t}\n\n\t.prev {\n\t\tinset-inline-start: 2px;\n\t}\n\t.next {\n\t\tinset-inline-end: 2px;\n\t}\n\n\t/* Content */\n\t.modal-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t\ttransition: transform 300ms ease;\n\t\tborder-radius: var(--border-radius-container);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tbox-shadow: 0 0 40px rgba(0, 0, 0, .2);\n\t\toverflow: auto;\n\n\t\t&__close {\n\t\t\t// Ensure the close button is always on top of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tinset-inline-end: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__content {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 52px; // At least the close button shall fit in\n\t\t\toverflow: auto; // avoids unnecessary hacks if the content should be bigger than the modal\n\t\t}\n\t}\n\n\t// We allow 90% max-height, but we need to ensure the header does not overlap the modal\n\t// as the modal is centered, we need the space on top and bottom\n\t$max-modal-height: min(90%, calc(100% - 2 * var(--header-height) - 2 * var(--body-container-margin)));\n\n\t// Sizing\n\t&--small {\n\t\t& > .modal-container {\n\t\t\twidth: 400px;\n\t\t\tmax-width: 90%;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--normal {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 600px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--large {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 900px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--full {\n\t\t& > .modal-container {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--header-height);\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n\n\t// Make modal full screen on mobile\n\t@media only screen and ((max-width: $breakpoint-small-mobile) or (max-height: 400px)) {\n\t\t.modal-container {\n\t\t\tmax-width: initial;\n\t\t\twidth: 100%;\n\t\t\tmax-height: initial;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--header-height);\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n/* TRANSITIONS */\n.fade-enter-active,\n.fade-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter-from,\n.fade-visibility-leave-to {\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n.modal-in-enter-active,\n.modal-in-leave-active,\n.modal-out-enter-active,\n.modal-out-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.modal-in-enter-from,\n.modal-in-leave-to,\n.modal-out-enter-from,\n.modal-out-leave-to {\n\topacity: 0;\n}\n\n.modal-in-enter .modal-container,\n.modal-in-leave-to .modal-container {\n\ttransform: scale(.9);\n}\n\n.modal-out-enter .modal-container,\n.modal-out-leave-to .modal-container {\n\ttransform: scale(1.1);\n}\n\n// animated circle\n$radius: 15;\n$pi: 3.14159265358979;\n\n.modal-mask .play-pause-icons {\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\t\ttransform: rotate(-90deg);\n\t\t.progress-ring__circle {\n\t\t\ttransition: 100ms stroke-dashoffset;\n\t\t\ttransform-origin: 50% 50%; // axis compensation\n\t\t\tanimation: progressring linear v-bind('cssSlideshowDelay') infinite;\n\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t\t\tstroke-dasharray: $radius * 2 * $pi; // radius * 2 * PI\n\t\t}\n\t}\n\t&--paused {\n\t\t.play-pause-icons__icon {\n\t\t\tanimation: breath 2s cubic-bezier(.4, 0, .2, 1) infinite;\n\t\t}\n\t\t.progress-ring__circle {\n\t\t\tanimation-play-state: paused !important;\n\t\t}\n\t}\n}\n\n// keyframes get scoped too and break the animation name, we need them unscoped\n@keyframes progressring {\n\tfrom {\n\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n@keyframes breath {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<docs>\nThe `NcModel` is the base component used for modals and dialogs.\nWhile `NcDialog` should be used for general dialogs like confirmations or forms,\n`NcModal` allows for custom content like showing image multimedia.\n\nFor showing the modal you can use either `v-model:show=\"showModal\"` or `v-if` on the `NcModal`,\ndepending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-model:show=\"modal\"\n\t\t\t@close=\"closeModal\"\n\t\t\tsize=\"small\"\n\t\t\tname=\"Name\"\n\t\t\tout-transition>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionCaption name=\"Some action\" />\n\t\t\t</template>\n\t\t\t<div class=\"modal__content\">Hello world</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n\n### Modal with slideshow\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"isOpen = true\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"isOpen\"\n\t\t\tclose-button-outside\n\t\t\tenable-slideshow\n\t\t\t:has-next=\"page < lastPage\"\n\t\t\t:has-previous=\"page > 0\"\n\t\t\tname=\"Modal with slideshow\"\n\t\t\t@next=\"page++\"\n\t\t\t@previous=\"page--\"\n\t\t\t@close=\"isOpen = false\">\n\t\t\t<div class=\"modal__content\" :style=\"{ background: currentPage.background }\">\n\t\t\t\t<p class=\"model__content-text\">{{ currentPage.text }}</p>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nconst PAGES = [\n\t{ text: 'First page', background: 'linear-gradient(#e66465, #9198e5)' },\n\t{ text: 'Second page', background: 'linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)' },\n\t{ text: 'Third page', background: 'lightblue' },\n\t{ text: 'Last page', background: 'lightgrey' },\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisOpen: false,\n\t\t\tpage: 0,\n\t\t\tlastPage: PAGES.length - 1,\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentPage() {\n\t\t\treturn PAGES[this.page]\n\t\t},\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\theight: 100%;\n\tmin-height: 30vh;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.model__content-text {\n\tfont-size: 16px;\n\tfont-weight: bold;\n}\n</style>\n```\n\n### Usage of popover in modal\n\n* Set container property to .modal-mask to inject popover context of the modal:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-model:show=\"modal\"\n\t\t\tclass=\"emoji-modal\"\n\t\t\tname=\"Modal with popover\"\n\t\t\tsize=\"small\"\n\t\t\t@close=\"closeModal\">\n\t\t\t<div class=\"emoji-modal__content\">\n\t\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t\t</NcEmojiPicker>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temoji: '😛',\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t},\n\t\tselect(emoji) {\n\t\t\tthis.emoji = emoji\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n.emoji-modal__content {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin: 20px 0px 100px;\n}\n</style>\n```\n</docs>\n"],"names":["instance","_useModel","_createBlock","_Teleport","container","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","$attrs","_unref","dark","closeButtonOutside","hasPrevious","hasNext","lightBackdrop","labelId","name","_createElementBlock","enableSlideshow","_normalizeClass","slideshowPaused","inlineActions","_renderSlot","noClose","outTransition","size","spreadNavigation"],"mappings":"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"}

package/dist/chunks/{NcPasswordField-BOZlUwhr.mjs → NcPasswordField-uaMO2pdt.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcPasswordField-BCJ0LHSS.css';
+import '../assets/NcPasswordField-ftYon3Xm.css';
 import { defineComponent, mergeModels, useModel, watch, useTemplateRef, ref, computed, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, createVNode, renderSlot } from "vue";
 import { q as mdiEyeOff, r as mdiEye } from "./mdi-CpchYUUV.mjs";
 import axios from "@nextcloud/axios";
@@ -6,8 +6,8 @@ import { getCapabilities } from "@nextcloud/capabilities";
 import { generateOcsUrl } from "@nextcloud/router";
 import debounce from "debounce";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
-import { N as NcInputField } from "./NcInputField-Clm9jOGJ.mjs";
-import { r as register, n as t29, a as t } from "./_l10n-CgsPi8nC.mjs";
+import { N as NcInputField } from "./NcInputField-o5OFv3z6.mjs";
+import { r as register, n as t29, a as t } from "./_l10n-Dq_eYxz_.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t29);
@@ -97,11 +97,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         modelValue: modelValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
         error: _ctx.error || isValid.value === false,
-        "helper-text": _ctx.helperText || internalHelpMessage.value,
-        "input-class": [_ctx.inputClass, { "password-field__input--secure-text": !visible.value && _ctx.asText }],
+        helperText: _ctx.helperText || internalHelpMessage.value,
+        inputClass: [_ctx.inputClass, { "password-field__input--secure-text": !visible.value && _ctx.asText }],
         minlength: minLengthWithPolicy.value,
         success: _ctx.success || isValid.value === true,
-        "trailing-button-label": visible.value ? unref(t)("Hide password") : unref(t)("Show password"),
+        trailingButtonLabel: visible.value ? unref(t)("Hide password") : unref(t)("Show password"),
         type: visible.value || _ctx.asText ? "text" : "password",
         onTrailingButtonClick: toggleVisibility
       }), createSlots({
@@ -119,12 +119,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["modelValue", "error", "helper-text", "input-class", "minlength", "success", "trailing-button-label", "type"]);
+      ]), 1040, ["modelValue", "error", "helperText", "inputClass", "minlength", "success", "trailingButtonLabel", "type"]);
     };
   }
 });
-const NcPasswordField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b2684de6"]]);
+const NcPasswordField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-00e75248"]]);
 export {
   NcPasswordField as N
 };
-//# sourceMappingURL=NcPasswordField-BOZlUwhr.mjs.map
+//# sourceMappingURL=NcPasswordField-uaMO2pdt.mjs.map

package/dist/chunks/{NcPasswordField-BOZlUwhr.mjs.map → NcPasswordField-uaMO2pdt.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcPasswordField-BOZlUwhr.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text2\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text3\"\n\t\t\t\tid=\"textField2\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\">\n\t\t\t<template #icon>\n\t\t\t\t<IconLockOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcPasswordField>\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\n\t\t<NcPasswordField :value.sync=\"text6\"\n\t\t\tlabel=\"Secret token\"\n\t\t\tas-text />\n\t</div>\n</template>\n<script>\nimport IconLockOutline from 'vue-material-design-icons/LockOutline'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t\ttext6: 'secret-token',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tIconLockOutline,\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Writable } from '../../utils/VueTypes.ts'\nimport type { NcInputFieldProps } from '../NcInputField/NcInputField.vue'\n\nimport { mdiEye, mdiEyeOff } from '@mdi/js'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\n\nconst modelValue = defineModel<string>({ default: '' })\n\n/**\n * The visibility of the password.\n * If this is set to true then the password will not be obfuscated by the browser.\n */\nconst visible = defineModel<boolean>('visible', { default: false })\n\nconst props = withDefaults(defineProps<Omit<NcInputFieldProps, 'trailingButtonLabel' | 'type'> & {\n\t/**\n\t * Check if the user entered a valid password using the password_policy\n\t * app if available.\n\t *\n\t * Warning: this doesn't replace server side checking and will do nothing\n\t * if the password_policy app is disabled.\n\t */\n\tcheckPasswordStrength?: boolean\n\n\t/**\n\t * The minlength property defines the minimum number of characters\n\t * (as UTF-16 code units) the user can enter.\n\t */\n\tminlength?: number\n\n\t/**\n\t * Render as input[type=text] that looks like password field.\n\t * Allows to avoid unwanted password-specific browser behavior,\n\t * such as save or generate password prompt.\n\t * Useful for secret token fields.\n\t * Note: autocomplete=\"off\" is ignored by most browsers.\n\t */\n\tasText?: boolean\n}>(), {\n\tinputClass: '',\n\tminlength: undefined,\n\t// overwrite default\n\tshowTrailingButton: true,\n})\n\nconst emit = defineEmits<{\n\tvalid: []\n\tinvalid: []\n}>()\n\nwatch(modelValue, debounce(checkPassword, 500))\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\n// password policy\ninterface PasswordPolicy {\n\t/**\n\t * The URLs to the password_policy app methods\n\t */\n\tapi: {\n\t\t/**\n\t\t * The URL to the password generator\n\t\t */\n\t\tgenerate: string\n\n\t\t/**\n\t\t * The URL to the password validator\n\t\t */\n\t\tvalidate: string\n\t}\n\n\t/**\n\t * Whether to enforce non common passwords\n\t */\n\tenforceNonCommonPassword: boolean\n\n\t/**\n\t * Whether to enforce numeric characters\n\t */\n\tenforceNumericCharacters: boolean\n\n\t/**\n\t * Whether to enforce special characters\n\t */\n\tenforceSpecialCharacters: boolean\n\n\t/**\n\t * Whether to enforce upper and lower case\n\t */\n\tenforceUpperLowerCase: boolean\n\n\t/**\n\t * The minimum length of the password\n\t */\n\tminLength: number\n}\n\nconst { password_policy: passwordPolicy } = getCapabilities() as { password_policy?: PasswordPolicy }\n\n// internal state\nconst inputFieldInstance = useTemplateRef('inputField')\n\nconst internalHelpMessage = ref('')\nconst isValid = ref<boolean>()\n\nconst propsToForward = computed<Partial<NcInputFieldProps>>(() => {\n\tconst all = { ...props } as Partial<Writable<typeof props>>\n\t// our props\n\tdelete all.checkPasswordStrength\n\tdelete all.minlength\n\tdelete all.asText\n\t// other props already set in template\n\tdelete all.error\n\tdelete all.helperText\n\tdelete all.inputClass\n\tdelete all.success\n\n\treturn all satisfies Partial<NcInputFieldProps>\n})\n\nconst minLengthWithPolicy = computed(() => {\n\treturn props.minlength\n\t\t?? (props.checkPasswordStrength ? passwordPolicy?.minLength : undefined)\n\t\t?? undefined\n})\n\n/**\n * Validate the entered password.\n * If available this method will use the password-policy app API to validate the password.\n */\nasync function checkPassword() {\n\tif (!props.checkPasswordStrength) {\n\t\treturn\n\t}\n\n\ttry {\n\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password: modelValue.value })\n\t\tisValid.value = data.ocs.data.passed\n\t\tif (data.ocs.data.passed) {\n\t\t\tinternalHelpMessage.value = t('Password is secure')\n\t\t\t/**\n\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t * password entered is valid.\n\t\t\t */\n\t\t\temit('valid')\n\t\t\treturn\n\t\t}\n\n\t\tinternalHelpMessage.value = data.ocs.data.reason\n\t\t/**\n\t\t * Triggers when the internal password_policy detect that the\n\t\t * password entered is invalid.\n\t\t */\n\t\temit('invalid')\n\t} catch (error) {\n\t\tlogger.error('Password policy returned an error', { error })\n\t}\n}\n\n/**\n * Toggle the visibility of the password\n */\nfunction toggleVisibility() {\n\tvisible.value = !visible.value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.value!.select()\n}\n</script>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\tv-model=\"modelValue\"\n\t\t:error=\"error || isValid === false\"\n\t\t:helper-text=\"helperText || internalHelpMessage\"\n\t\t:input-class=\"[inputClass, { 'password-field__input--secure-text': !visible && asText }]\"\n\t\t:minlength=\"minLengthWithPolicy\"\n\t\t:success=\"success || isValid === true\"\n\t\t:trailing-button-label=\"visible ? t('Hide password') : t('Show password')\"\n\t\t:type=\"visible || asText ? 'text' : 'password'\"\n\t\t@trailing-button-click=\"toggleVisibility\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\t\t<template #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper :path=\"visible ? mdiEyeOff : mdiEye\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<style lang=\"scss\" scoped>\n:deep(.password-field__input--secure-text) {\n\t// Emulate password field look\n\t// This is not a part of the standard but well supported\n\t-webkit-text-security: disc;\n}\n</style>\n"],"names":["_useModel","_createBlock","_mergeProps","error","helperText","inputClass","asText","success","_unref","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,UAAM,aAAaA,SAAmB,SAAA,YAAgB;AAMtD,UAAM,UAAUA,SAAoB,SAAC,SAA6B;AAElE,UAAM,QAAQ;AA+Bd,UAAM,OAAO;AAKb,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAG9C,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AA6CD,UAAM,EAAE,iBAAiB,eAAA,IAAmB,gBAAA;AAG5C,UAAM,qBAAqB,eAAe,YAAY;AAEtD,UAAM,sBAAsB,IAAI,EAAE;AAClC,UAAM,UAAU,IAAA;AAEhB,UAAM,iBAAiB,SAAqC,MAAM;AACjE,YAAM,MAAM,EAAE,GAAG,MAAA;AAEjB,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO;AAAA,IACR,CAAC;AAED,UAAM,sBAAsB,SAAS,MAAM;AAC1C,aAAO,MAAM,cACR,MAAM,wBAAwB,gBAAgB,YAAY,WAC3D;AAAA,IACL,CAAC;AAMD,mBAAe,gBAAgB;AAC9B,UAAI,CAAC,MAAM,uBAAuB;AACjC;AAAA,MACD;AAEA,UAAI;AACH,cAAM,EAAE,KAAA,IAAS,MAAM,MAAM,KAAK,eAAe,sCAAsC,GAAG,EAAE,UAAU,WAAW,OAAO;AACxH,gBAAQ,QAAQ,KAAK,IAAI,KAAK;AAC9B,YAAI,KAAK,IAAI,KAAK,QAAQ;AACzB,8BAAoB,QAAQ,EAAE,oBAAoB;AAKlD,eAAK,OAAO;AACZ;AAAA,QACD;AAEA,4BAAoB,QAAQ,KAAK,IAAI,KAAK;AAK1C,aAAK,SAAS;AAAA,MACf,SAAS,OAAO;AACf,eAAO,MAAM,qCAAqC,EAAE,MAAA,CAAO;AAAA,MAC5D;AAAA,IACD;AAKA,aAAS,mBAAmB;AAC3B,cAAQ,QAAQ,CAAC,QAAQ;AAAA,IAC1B;AAQA,aAAS,MAAM,SAAwB;AACtC,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;0BAICC,YAmBe,cAnBfC,WAmBe,eAAA,OAlBQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,OAAOC,KAAAA,SAAS,QAAA,UAAO;AAAA,QACvB,eAAaC,KAAAA,cAAc,oBAAA;AAAA,QAC3B,eAAW,CAAGC,KAAAA,YAAU,EAAA,sCAAA,CAA2C,QAAA,SAAWC,KAAAA,QAAM;AAAA,QACpF,WAAW,oBAAA;AAAA,QACX,SAASC,KAAAA,WAAW,QAAA,UAAO;AAAA,QAC3B,yBAAuB,QAAA,QAAUC,MAAA,CAAA,qBAAqBA,MAAA,CAAA,EAAC,eAAA;AAAA,QACvD,MAAM,QAAA,SAAWF,KAAAA,SAAM,SAAA;AAAA,QACvB,uBAAuB;AAAA,MAAA;QAKb,gCACV,MAAyD;AAAA,UAAzDG,YAAyD,kBAAA;AAAA,YAAtC,MAAM,QAAA,QAAUD,MAAA,SAAA,IAAYA,MAAA,MAAA;AAAA,UAAA;;;;QAL9BE,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAE/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}
+{"version":3,"file":"NcPasswordField-uaMO2pdt.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text2\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text3\"\n\t\t\t\tid=\"textField2\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\">\n\t\t\t<template #icon>\n\t\t\t\t<IconLockOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcPasswordField>\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\n\t\t<NcPasswordField :value.sync=\"text6\"\n\t\t\tlabel=\"Secret token\"\n\t\t\tas-text />\n\t</div>\n</template>\n<script>\nimport IconLockOutline from 'vue-material-design-icons/LockOutline'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t\ttext6: 'secret-token',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tIconLockOutline,\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Writable } from '../../utils/VueTypes.ts'\nimport type { NcInputFieldProps } from '../NcInputField/NcInputField.vue'\n\nimport { mdiEye, mdiEyeOff } from '@mdi/js'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\n\nconst modelValue = defineModel<string>({ default: '' })\n\n/**\n * The visibility of the password.\n * If this is set to true then the password will not be obfuscated by the browser.\n */\nconst visible = defineModel<boolean>('visible', { default: false })\n\nconst props = withDefaults(defineProps<Omit<NcInputFieldProps, 'trailingButtonLabel' | 'type'> & {\n\t/**\n\t * Check if the user entered a valid password using the password_policy\n\t * app if available.\n\t *\n\t * Warning: this doesn't replace server side checking and will do nothing\n\t * if the password_policy app is disabled.\n\t */\n\tcheckPasswordStrength?: boolean\n\n\t/**\n\t * The minlength property defines the minimum number of characters\n\t * (as UTF-16 code units) the user can enter.\n\t */\n\tminlength?: number\n\n\t/**\n\t * Render as input[type=text] that looks like password field.\n\t * Allows to avoid unwanted password-specific browser behavior,\n\t * such as save or generate password prompt.\n\t * Useful for secret token fields.\n\t * Note: autocomplete=\"off\" is ignored by most browsers.\n\t */\n\tasText?: boolean\n}>(), {\n\tinputClass: '',\n\tminlength: undefined,\n\t// overwrite default\n\tshowTrailingButton: true,\n})\n\nconst emit = defineEmits<{\n\tvalid: []\n\tinvalid: []\n}>()\n\nwatch(modelValue, debounce(checkPassword, 500))\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\n// password policy\ninterface PasswordPolicy {\n\t/**\n\t * The URLs to the password_policy app methods\n\t */\n\tapi: {\n\t\t/**\n\t\t * The URL to the password generator\n\t\t */\n\t\tgenerate: string\n\n\t\t/**\n\t\t * The URL to the password validator\n\t\t */\n\t\tvalidate: string\n\t}\n\n\t/**\n\t * Whether to enforce non common passwords\n\t */\n\tenforceNonCommonPassword: boolean\n\n\t/**\n\t * Whether to enforce numeric characters\n\t */\n\tenforceNumericCharacters: boolean\n\n\t/**\n\t * Whether to enforce special characters\n\t */\n\tenforceSpecialCharacters: boolean\n\n\t/**\n\t * Whether to enforce upper and lower case\n\t */\n\tenforceUpperLowerCase: boolean\n\n\t/**\n\t * The minimum length of the password\n\t */\n\tminLength: number\n}\n\nconst { password_policy: passwordPolicy } = getCapabilities() as { password_policy?: PasswordPolicy }\n\n// internal state\nconst inputFieldInstance = useTemplateRef('inputField')\n\nconst internalHelpMessage = ref('')\nconst isValid = ref<boolean>()\n\nconst propsToForward = computed<Partial<NcInputFieldProps>>(() => {\n\tconst all = { ...props } as Partial<Writable<typeof props>>\n\t// our props\n\tdelete all.checkPasswordStrength\n\tdelete all.minlength\n\tdelete all.asText\n\t// other props already set in template\n\tdelete all.error\n\tdelete all.helperText\n\tdelete all.inputClass\n\tdelete all.success\n\n\treturn all satisfies Partial<NcInputFieldProps>\n})\n\nconst minLengthWithPolicy = computed(() => {\n\treturn props.minlength\n\t\t?? (props.checkPasswordStrength ? passwordPolicy?.minLength : undefined)\n\t\t?? undefined\n})\n\n/**\n * Validate the entered password.\n * If available this method will use the password-policy app API to validate the password.\n */\nasync function checkPassword() {\n\tif (!props.checkPasswordStrength) {\n\t\treturn\n\t}\n\n\ttry {\n\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password: modelValue.value })\n\t\tisValid.value = data.ocs.data.passed\n\t\tif (data.ocs.data.passed) {\n\t\t\tinternalHelpMessage.value = t('Password is secure')\n\t\t\t/**\n\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t * password entered is valid.\n\t\t\t */\n\t\t\temit('valid')\n\t\t\treturn\n\t\t}\n\n\t\tinternalHelpMessage.value = data.ocs.data.reason\n\t\t/**\n\t\t * Triggers when the internal password_policy detect that the\n\t\t * password entered is invalid.\n\t\t */\n\t\temit('invalid')\n\t} catch (error) {\n\t\tlogger.error('Password policy returned an error', { error })\n\t}\n}\n\n/**\n * Toggle the visibility of the password\n */\nfunction toggleVisibility() {\n\tvisible.value = !visible.value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.value!.select()\n}\n</script>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\tv-model=\"modelValue\"\n\t\t:error=\"error || isValid === false\"\n\t\t:helperText=\"helperText || internalHelpMessage\"\n\t\t:inputClass=\"[inputClass, { 'password-field__input--secure-text': !visible && asText }]\"\n\t\t:minlength=\"minLengthWithPolicy\"\n\t\t:success=\"success || isValid === true\"\n\t\t:trailingButtonLabel=\"visible ? t('Hide password') : t('Show password')\"\n\t\t:type=\"visible || asText ? 'text' : 'password'\"\n\t\t@trailingButtonClick=\"toggleVisibility\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- @slot Leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\t\t<template #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper :path=\"visible ? mdiEyeOff : mdiEye\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<style lang=\"scss\" scoped>\n:deep(.password-field__input--secure-text) {\n\t// Emulate password field look\n\t// This is not a part of the standard but well supported\n\t-webkit-text-security: disc;\n}\n</style>\n"],"names":["_useModel","_createBlock","_mergeProps","error","helperText","inputClass","asText","success","_unref","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,UAAM,aAAaA,SAAmB,SAAA,YAAgB;AAMtD,UAAM,UAAUA,SAAoB,SAAC,SAA6B;AAElE,UAAM,QAAQ;AA+Bd,UAAM,OAAO;AAKb,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAG9C,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AA6CD,UAAM,EAAE,iBAAiB,eAAA,IAAmB,gBAAA;AAG5C,UAAM,qBAAqB,eAAe,YAAY;AAEtD,UAAM,sBAAsB,IAAI,EAAE;AAClC,UAAM,UAAU,IAAA;AAEhB,UAAM,iBAAiB,SAAqC,MAAM;AACjE,YAAM,MAAM,EAAE,GAAG,MAAA;AAEjB,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO;AAAA,IACR,CAAC;AAED,UAAM,sBAAsB,SAAS,MAAM;AAC1C,aAAO,MAAM,cACR,MAAM,wBAAwB,gBAAgB,YAAY,WAC3D;AAAA,IACL,CAAC;AAMD,mBAAe,gBAAgB;AAC9B,UAAI,CAAC,MAAM,uBAAuB;AACjC;AAAA,MACD;AAEA,UAAI;AACH,cAAM,EAAE,KAAA,IAAS,MAAM,MAAM,KAAK,eAAe,sCAAsC,GAAG,EAAE,UAAU,WAAW,OAAO;AACxH,gBAAQ,QAAQ,KAAK,IAAI,KAAK;AAC9B,YAAI,KAAK,IAAI,KAAK,QAAQ;AACzB,8BAAoB,QAAQ,EAAE,oBAAoB;AAKlD,eAAK,OAAO;AACZ;AAAA,QACD;AAEA,4BAAoB,QAAQ,KAAK,IAAI,KAAK;AAK1C,aAAK,SAAS;AAAA,MACf,SAAS,OAAO;AACf,eAAO,MAAM,qCAAqC,EAAE,MAAA,CAAO;AAAA,MAC5D;AAAA,IACD;AAKA,aAAS,mBAAmB;AAC3B,cAAQ,QAAQ,CAAC,QAAQ;AAAA,IAC1B;AAQA,aAAS,MAAM,SAAwB;AACtC,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;0BAICC,YAmBe,cAnBfC,WAmBe,eAAA,OAlBQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,OAAOC,KAAAA,SAAS,QAAA,UAAO;AAAA,QACvB,YAAYC,KAAAA,cAAc,oBAAA;AAAA,QAC1B,YAAU,CAAGC,KAAAA,YAAU,EAAA,sCAAA,CAA2C,QAAA,SAAWC,KAAAA,QAAM;AAAA,QACnF,WAAW,oBAAA;AAAA,QACX,SAASC,KAAAA,WAAW,QAAA,UAAO;AAAA,QAC3B,qBAAqB,QAAA,QAAUC,MAAA,CAAA,qBAAqBA,MAAA,CAAA,EAAC,eAAA;AAAA,QACrD,MAAM,QAAA,SAAWF,KAAAA,SAAM,SAAA;AAAA,QACvB,uBAAqB;AAAA,MAAA;QAKX,gCACV,MAAyD;AAAA,UAAzDG,YAAyD,kBAAA;AAAA,YAAtC,MAAM,QAAA,QAAUD,MAAA,SAAA,IAAYA,MAAA,MAAA;AAAA,UAAA;;;;QAL9BE,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAE/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/{NcPopover-C-MTaPCs.mjs → NcPopover-OqcYrWOx.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcPopover-CZ3pMU6Y.css';
+import '../assets/NcPopover-P1fheee2.css';
 import { options, Dropdown } from "floating-vue";
 import { createFocusTrap } from "focus-trap";
 import { defineComponent, warn, resolveComponent, createBlock, openBlock, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
@@ -44,9 +44,9 @@ const _sfc_main$1 = defineComponent({
     });
   }
 });
-const ncPopover = "_ncPopover_wpltc_20";
+const ncPopover = "_ncPopover_HjJ88";
 const style0 = {
-  "material-design-icon": "_material-design-icon_wpltc_12",
+  "material-design-icon": "_material-design-icon_FKPyJ",
   ncPopover
 };
 const theme = "nc-popover-9";
@@ -387,23 +387,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _cache[0] || (_cache[0] = ($event) => $data.internalShown = $event),
       _cache[1] || (_cache[1] = ($event) => $data.internalShown = $event)
     ],
-    "arrow-padding": 10,
-    "auto-hide": !$props.noCloseOnClickOutside && $props.closeOnClickOutside,
+    arrowPadding: 10,
+    autoHide: !$props.noCloseOnClickOutside && $props.closeOnClickOutside,
     boundary: $props.boundary || void 0,
     container: $props.container,
     delay: $props.delay,
     distance: 10,
-    "handle-resize": "",
-    "no-auto-focus": true,
+    handleResize: "",
+    noAutoFocus: true,
     placement: $options.internalPlacement,
-    "popper-class": [_ctx.$style.ncPopover, $props.popoverBaseClass],
-    "popper-triggers": $options.popperTriggers,
-    "popper-hide-triggers": $options.popperHideTriggers,
-    "popper-show-triggers": $options.popperShowTriggers,
+    popperClass: [_ctx.$style.ncPopover, $props.popoverBaseClass],
+    popperTriggers: $options.popperTriggers,
+    popperHideTriggers: $options.popperHideTriggers,
+    popperShowTriggers: $options.popperShowTriggers,
     theme: $setup.theme,
     triggers: $options.internalTriggers,
-    "hide-triggers": $options.hideTriggers,
-    "show-triggers": $options.showTriggers,
+    hideTriggers: $options.hideTriggers,
+    showTriggers: $options.showTriggers,
     onApplyShow: $options.afterShow,
     onApplyHide: $options.afterHide
   }, {
@@ -413,16 +413,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       createVNode(_component_NcPopoverTriggerProvider, {
         shown: $data.internalShown,
-        "popup-role": $props.popupRole
+        popupRole: $props.popupRole
       }, {
         default: withCtx((slotProps) => [
           renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(slotProps)))
         ]),
         _: 3
-      }, 8, ["shown", "popup-role"])
+      }, 8, ["shown", "popupRole"])
     ]),
     _: 3
-  }, 8, ["shown", "auto-hide", "boundary", "container", "delay", "placement", "popper-class", "popper-triggers", "popper-hide-triggers", "popper-show-triggers", "theme", "triggers", "hide-triggers", "show-triggers", "onApplyShow", "onApplyHide"]);
+  }, 8, ["shown", "autoHide", "boundary", "container", "delay", "placement", "popperClass", "popperTriggers", "popperHideTriggers", "popperShowTriggers", "theme", "triggers", "hideTriggers", "showTriggers", "onApplyShow", "onApplyHide"]);
 }
 const cssModules = {
   "$style": style0
@@ -431,4 +431,4 @@ const NcPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render
 export {
   NcPopover as N
 };
-//# sourceMappingURL=NcPopover-C-MTaPCs.mjs.map
+//# sourceMappingURL=NcPopover-OqcYrWOx.mjs.map

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

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

package/dist/chunks/{NcProgressBar-DDMAo4h-.mjs → NcProgressBar-OIWW1Sei.mjs}

@@ -1,11 +1,19 @@
-import '../assets/NcProgressBar-BAPOXMAL.css';
-import { defineComponent, useCssVars, computed, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
+import '../assets/NcProgressBar-D1DYRrCN.css';
+import { defineComponent, useCssVars, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["aria-valuenow"];
 const _hoisted_2 = ["height", "width"];
 const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
 const _hoisted_4 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
-const _hoisted_5 = ["value"];
+const _hoisted_5 = {
+  key: 1,
+  class: "progress-bar-container"
+};
+const _hoisted_6 = ["value"];
+const _hoisted_7 = {
+  key: 0,
+  class: "progress-bar__value"
+};
 const gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
 const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-clickable-area"));
 const clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--clickable-area-small"));
@@ -16,12 +24,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     size: { default: "small" },
     error: { type: Boolean },
     type: { default: "linear" },
-    color: { default: "var(--color-primary-element)" }
+    color: { default: "var(--color-primary-element)" },
+    showValue: { type: Boolean, default: false }
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "0a7905e8": _ctx.color,
-      "d7eb5974": heightPx.value
+      "3a86fec2": _ctx.color,
+      "57442460": heightPx.value
     }));
     const props = __props;
     const normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100);
@@ -78,17 +87,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             cy: circleCenterPosition.value
           }, null, 8, _hoisted_4)
         ], 8, _hoisted_2))
-      ], 10, _hoisted_1)) : (openBlock(), createElementBlock("progress", {
-        key: 1,
-        class: normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": _ctx.error }]),
-        value: _ctx.value,
-        max: "100"
-      }, null, 10, _hoisted_5));
+      ], 10, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_5, [
+        createElementVNode("progress", {
+          class: normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": _ctx.error }]),
+          value: _ctx.value,
+          max: "100"
+        }, null, 10, _hoisted_6),
+        _ctx.showValue ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(_ctx.value) + "%", 1)) : createCommentVNode("", true)
+      ]));
     };
   }
 });
-const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38ba4aa1"]]);
+const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-353fa414"]]);
 export {
   NcProgressBar as N
 };
-//# sourceMappingURL=NcProgressBar-DDMAo4h-.mjs.map
+//# sourceMappingURL=NcProgressBar-OIWW1Sei.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar-OIWW1Sei.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\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t\t<br />\n\t\tCustom color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the progress bar height)\n\t\t<NcProgressBar :value=\"55\" :size=\"8\" showValue />\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=\"25\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"42\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"80\" error />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the diameter of the progress bar)\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" :size=\"42\" />\n\t</span>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * An integer between 0 and 100\n\t */\n\tvalue?: number\n\n\t/**\n\t * Determines the height of the progressbar.\n\t */\n\tsize?: 'small' | 'medium' | number\n\n\t/**\n\t * Applies an error color to the progressbar if true.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Progress bar variant\n\t */\n\ttype?: 'linear' | 'circular'\n\n\t/**\n\t * The color of the progress bar\n\t */\n\tcolor?: string\n\n\t/**\n\t * Show value at the end of progress bar (only for linear type)\n\t */\n\tshowValue?: boolean\n}>(), {\n\tvalue: 0,\n\tcolor: 'var(--color-primary-element)',\n\tsize: 'small',\n\ttype: 'linear',\n\tshowValue: false,\n})\n\nconst normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100)\n\nconst height = computed(() => {\n\tif (typeof props.size === 'number') {\n\t\treturn Math.round(props.size)\n\t}\n\n\t// circular type\n\tif (props.type === 'circular') {\n\t\tif (props.size === 'medium') {\n\t\t\treturn clickableArea\n\t\t} else {\n\t\t\treturn clickableAreaSmall\n\t\t}\n\t}\n\n\t// linear type\n\tif (props.size === 'medium') {\n\t\treturn 1.5 * gridBaseline\n\t}\n\treturn gridBaseline\n})\n\nconst heightPx = computed(() => `${height.value}px`)\n\n// Variables for the circlur progressbar\nconst strokeWidth = computed(() => Math.max(gridBaseline, height.value / clickableArea * gridBaseline))\nconst circleCenterPosition = computed(() => height.value / 2)\nconst circleRadius = computed(() => (height.value / 2) - strokeWidth.value)\nconst circumference = computed(() => circleRadius.value * 2 * Math.PI)\n</script>\n\n<script lang=\"ts\">\n// design constants\nconst gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--clickable-area-small'))\n</script>\n\n<template>\n\t<span\n\t\tv-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg\n\t\t\t:height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${normalizedProgress * circumference} ${(1 - normalizedProgress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t\t<circle\n\t\t\t\tstroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - normalizedProgress) * circumference} ${normalizedProgress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - normalizedProgress) * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t</svg>\n\t</span>\n\t<div v-else class=\"progress-bar-container\">\n\t\t<progress\n\t\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t\t:value\n\t\t\tmax=\"100\" />\n\n\t\t<span v-if=\"showValue\" class=\"progress-bar__value\">{{ value }}%</span>\n\t</div>\n</template>\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\t--progress-bar-height: v-bind(heightPx);\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);\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\t&-container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__value {\n\t\tfont-size: var(--font-size-small, 13px);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tmin-width: 4ch;\n\t\ttext-align: end;\n\t}\n}\n\n</style>\n"],"names":["type","_createElementBlock","value","_normalizeClass","error","_createElementVNode","_openBlock","showValue","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;AAiIA,MAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,MAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,MAAM,qBAAqB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,wBAAwB,CAAC;;;;;;;;;;;;;;;;AA1E5H,UAAM,QAAQ;AAsCd,UAAM,qBAAqB,SAAS,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG;AAEvF,UAAM,SAAS,SAAS,MAAM;AAC7B,UAAI,OAAO,MAAM,SAAS,UAAU;AACnC,eAAO,KAAK,MAAM,MAAM,IAAI;AAAA,MAC7B;AAGA,UAAI,MAAM,SAAS,YAAY;AAC9B,YAAI,MAAM,SAAS,UAAU;AAC5B,iBAAO;AAAA,QACR,OAAO;AACN,iBAAO;AAAA,QACR;AAAA,MACD;AAGA,UAAI,MAAM,SAAS,UAAU;AAC5B,eAAO,MAAM;AAAA,MACd;AACA,aAAO;AAAA,IACR,CAAC;AAED,UAAM,WAAW,SAAS,MAAM,GAAG,OAAO,KAAK,IAAI;AAGnD,UAAM,cAAc,SAAS,MAAM,KAAK,IAAI,cAAc,OAAO,QAAQ,gBAAgB,YAAY,CAAC;AACtG,UAAM,uBAAuB,SAAS,MAAM,OAAO,QAAQ,CAAC;AAC5D,UAAM,eAAe,SAAS,MAAO,OAAO,QAAQ,IAAK,YAAY,KAAK;AAC1E,UAAM,gBAAgB,SAAS,MAAM,aAAa,QAAQ,IAAI,KAAK,EAAE;;aAY7DA,KAAAA,SAAI,2BADXC,mBA4BO,QAAA;AAAA;QA1BN,MAAK;AAAA,QACJ,iBAAeC,KAAAA;AAAAA,QACf,OAAKC,eAAA,CAAA,EAAA,uBAA2BC,KAAAA,MAAAA,GAC3B,qCAAqC,CAAA;AAAA,MAAA;sBAC3CH,mBAqBM,OAAA;AAAA,UApBJ,QAAQ,OAAA;AAAA,UACR,OAAO,OAAA;AAAA,QAAA;UACRI,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,uBAAqB,mBAAA,QAAqB,mBAAa,KAAA,IAAS,mBAAA,SAAsB,cAAA,KAAa;AAAA,YACnG,4BAA0B,cAAA;AAAA,YAC1B,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;UACNA,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,4BAA0B,mBAAA,SAAsB,mBAAa,IAAI,mBAAA,QAAqB,cAAA,KAAa;AAAA,YACnG,sBAAiB,OAAU,mBAAA,SAAsB,cAAA;AAAA,YACjD,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;;6BAGRC,aAAAL,mBAQM,OARN,YAQM;AAAA,QAPLI,mBAIa,YAAA;AAAA,UAHZ,OAAKF,eAAA,CAAC,yCAAuC,EAAA,uBACZC,KAAAA,MAAAA,CAAK,CAAA;AAAA,UACrC,OAAAF,KAAAA;AAAAA,UACD,KAAI;AAAA,QAAA;QAEOK,KAAAA,aAAZD,UAAA,GAAAL,mBAAsE,QAAtE,YAAsEO,gBAAhBN,KAAAA,KAAK,IAAG,KAAC,CAAA;;;;;;"}

package/dist/chunks/{NcRadioGroup-HorQ2m39.mjs → NcRadioGroup-Bjl3n_1z.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcRadioGroup-1zpSX8V5.css';
+import '../assets/NcRadioGroup-BoFb0R8S.css';
 import { defineComponent, mergeModels, useModel, ref, provide, computed, warn, createBlock, openBlock, withCtx, createElementBlock, renderSlot, normalizeClass } from "vue";
-import { N as NcFormBox } from "./NcFormBox-CkgY7Tif.mjs";
-import { N as NcFormGroup } from "./NcFormGroup-CnSfPFey.mjs";
+import { N as NcFormBox } from "./NcFormBox-BYjllt0m.mjs";
+import { N as NcFormGroup } from "./NcFormGroup-Bf8Mme1o.mjs";
 import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup-D6llQmAl.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(NcFormGroup, {
         label: _ctx.label,
         description: _ctx.description,
-        "hide-label": _ctx.labelHidden || _ctx.hideLabel
+        hideLabel: _ctx.labelHidden || _ctx.hideLabel
       }, {
         default: withCtx(() => [
           buttonVariant.value ? (openBlock(), createBlock(NcFormBox, {
@@ -56,13 +56,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 2))
         ]),
         _: 3
-      }, 8, ["label", "description", "hide-label"]);
+      }, 8, ["label", "description", "hideLabel"]);
     };
   }
 });
-const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_14z4o_20";
+const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_XfI2u";
 const style0 = {
-  "material-design-icon": "_material-design-icon_14z4o_12",
+  "material-design-icon": "_material-design-icon_Sx-eY",
   radioGroup_checkboxRadioContainer
 };
 const cssModules = {
@@ -72,4 +72,4 @@ const NcRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcRadioGroup as N
 };
-//# sourceMappingURL=NcRadioGroup-HorQ2m39.mjs.map
+//# sourceMappingURL=NcRadioGroup-Bjl3n_1z.mjs.map

package/dist/chunks/NcRadioGroup-Bjl3n_1z.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroup-Bjl3n_1z.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 type { Slot } from 'vue'\n\nimport { computed, provide, ref, warn } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst modelValue = defineModel<string>({ required: false, default: '' })\n\ndefineProps<{\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\ndefineSlots<{\n\t/**\n\t * Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t * The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t *\n\t * If you want the button variant, then you have to use `NcRadioGroupButton`.\n\t */\n\tdefault?: Slot\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tregister,\n\tmodelValue: modelValue.value,\n\tonUpdate,\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\twarn('[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\tmodelValue.value = value\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label\n\t\t:description\n\t\t:hideLabel=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\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":["_useModel","_createBlock","label","description","labelHidden","hideLabel","_renderSlot","_createElementBlock","_normalizeClass","$style"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,UAAM,aAAaA,SAAmB,SAAA,YAAiC;AAqCvE,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C;AAAA,MACA,YAAY,WAAW;AAAA,MACvB;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,aAAK,qFAAqF;AAAA,MAC3F;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,iBAAW,QAAQ;AAAA,IACpB;;0BAICC,YAUc,aAAA;AAAA,QATZ,OAAAC,KAAAA;AAAAA,QACA,aAAAC,KAAAA;AAAAA,QACA,WAAWC,KAAAA,eAAeC,KAAAA;AAAAA,MAAAA;yBAC3B,MAEY;AAAA,UAFK,cAAA,sBAAjBJ,YAEY,WAAA;AAAA;YAFoB,KAAA;AAAA,UAAA;6BAC/B,MAAQ;AAAA,cAARK,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;8BAETC,mBAEO,QAAA;AAAA;YAFO,OAAKC,eAAEC,KAAAA,OAAO,iCAAiC;AAAA,UAAA;YAC5DH,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroupButton-CAisx7g4.mjs → NcRadioGroupButton-BWPOKDMR.mjs}

@@ -1,17 +1,18 @@
-import '../assets/NcRadioGroupButton-DRZ1_-yY.css';
+import '../assets/NcRadioGroupButton-xGU7fVa3.css';
 import { defineComponent, onMounted, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, renderSlot, toDisplayString } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
 import { u as useInsideRadioGroup } from "./useNcRadioGroup-D6llQmAl.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
-const _hoisted_2 = ["aria-labelledby", "aria-label", "checked", "value"];
+const _hoisted_2 = ["aria-labelledby", "aria-label", "checked", "disabled", "value"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcRadioGroupButton",
   props: {
     ariaLabel: {},
     label: {},
-    value: {}
+    value: {},
+    disabled: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -21,12 +22,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => radioGroup.value.register(true));
     const isChecked = computed(() => radioGroup?.value.modelValue === props.value);
     function onUpdate() {
+      if (props.disabled) {
+        return;
+      }
       radioGroup.value.onUpdate(props.value);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([{
-          [_ctx.$style.radioGroupButton_active]: isChecked.value
+          [_ctx.$style.radioGroupButton_active]: isChecked.value,
+          [_ctx.$style.radioGroupButton_disabled]: _ctx.disabled
         }, _ctx.$style.radioGroupButton, unref(formBoxItemClass)]),
         onClick: onUpdate
       }, [
@@ -47,6 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "hidden-visually",
           checked: isChecked.value,
           type: "radio",
+          disabled: _ctx.disabled,
           value: _ctx.value,
           onInput: onUpdate
         }, null, 40, _hoisted_2)
@@ -54,15 +60,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroupButton = "_radioGroupButton_1euqq_20";
-const radioGroupButton__label = "_radioGroupButton__label_1euqq_46";
-const radioGroupButton__icon = "_radioGroupButton__icon_1euqq_49";
-const radioGroupButton_active = "_radioGroupButton_active_1euqq_62";
+const radioGroupButton = "_radioGroupButton_FB-C-";
+const radioGroupButton__label = "_radioGroupButton__label_gjGCq";
+const radioGroupButton__icon = "_radioGroupButton__icon_lWzM4";
+const radioGroupButton_disabled = "_radioGroupButton_disabled_08iwH";
+const radioGroupButton_active = "_radioGroupButton_active_KS1Ru";
 const style0 = {
-  "material-design-icon": "_material-design-icon_1euqq_12",
+  "material-design-icon": "_material-design-icon_q-qLD",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,
+  radioGroupButton_disabled,
   radioGroupButton_active
 };
 const cssModules = {
@@ -72,4 +80,4 @@ const NcRadioGroupButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModule
 export {
   NcRadioGroupButton as N
 };
-//# sourceMappingURL=NcRadioGroupButton-CAisx7g4.mjs.map
+//# sourceMappingURL=NcRadioGroupButton-BWPOKDMR.mjs.map

package/dist/chunks/NcRadioGroupButton-BWPOKDMR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroupButton-BWPOKDMR.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 type { Slot } from 'vue'\n\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\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\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=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\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\n\t\t\t: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: 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":["_createElementBlock","_normalizeClass","$style","disabled","_unref","$slots","_renderSlot","label","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AA6Bd,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;;0BAICA,mBAuBM,OAAA;AAAA,QAtBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,WAAeA,KAAAA,OAAO,yBAAyB,GAAGC,KAAAA;AAAAA,QAAAA,GAAeD,KAAAA,OAAO,kBAAkBE,MAAA,gBAAA,CAAgB,CAAA;AAAA,QAIzJ,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBL,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DI,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXP,mBAEM,OAAA;AAAA;UAFa,IAAII,MAAA,OAAA;AAAA,UAAU,OAAKH,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEK,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTC,mBAQmB,SAAA;AAAA,UAPjB,mBAAiBD,KAAAA,QAAQH,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYG,KAAAA,QAAQ,SAAYE,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,UAAAN,KAAAA;AAAAA,UACA,OAAAO,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;"}