@nextcloud/vue 9.3.1 → 9.3.2

package/dist/chunks/{NcHeaderMenu-CdlSBOyC.mjs.map → NcHeaderMenu-CeJZT5-m.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-CdlSBOyC.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.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 component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\tariaLabel = undefined,\n\tdescription = undefined,\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainerElement = useTemplateRef('contentContainer')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenuElement = useTemplateRef<HTMLElement>('headerMenu')\n/** The menu trigger button */\nconst triggerButtonInstance = useTemplateRef('triggerButton')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(headerMenuElement, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// When component has its own custom focus management\n// The global focus trap stack should be paused\nuseTrapStackControl(isOpened, {\n\tdisabled: () => !isNav,\n})\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n *\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenuElement.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainerElement.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButtonInstance.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"triggerButton\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\t:aria-label\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"contentContainer\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__caret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","ariaLabel","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"NcHeaderMenu-CeJZT5-m.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.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 component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\tariaLabel = undefined,\n\tdescription = undefined,\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainerElement = useTemplateRef('contentContainer')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenuElement = useTemplateRef<HTMLElement>('headerMenu')\n/** The menu trigger button */\nconst triggerButtonInstance = useTemplateRef('triggerButton')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(headerMenuElement, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// When component has its own custom focus management\n// The global focus trap stack should be paused\nuseTrapStackControl(isOpened, {\n\tdisabled: () => !isNav,\n})\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n *\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenuElement.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainerElement.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButtonInstance.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"triggerButton\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\t:aria-label\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"contentContainer\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__caret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","ariaLabel","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}

package/dist/chunks/{NcHotkey-KGHPzHBJ.mjs → NcHotkey-BMbdzaIs.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcHotkey-4yi1Hobg.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
-import { N as NcKbd } from "./NcKbd-D3YSTteg.mjs";
+import { N as NcKbd } from "./NcKbd-CZdynD1d.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const NO_LABEL_WARNING = "⚠️ NcHotKey must have a label or slot content";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -58,4 +58,4 @@ const NcHotkey = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssMod
 export {
   NcHotkey as N
 };
-//# sourceMappingURL=NcHotkey-KGHPzHBJ.mjs.map
+//# sourceMappingURL=NcHotkey-BMbdzaIs.mjs.map

package/dist/chunks/{NcHotkey-KGHPzHBJ.mjs.map → NcHotkey-BMbdzaIs.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-KGHPzHBJ.mjs","sources":["../../src/components/NcHotkey/NcHotkey.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 } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkey-BMbdzaIs.mjs","sources":["../../src/components/NcHotkey/NcHotkey.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 } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-BBE5BqwB.mjs → NcHotkeyList-67NnF26Y.mjs}

@@ -1,9 +1,9 @@
 import '../assets/NcHotkeyList-gAZN0WIu.css';
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, unref, renderSlot } from "vue";
-import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
+import { r as register, p as t31, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register();
+register(t31);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHotkeyList",
   props: {
@@ -39,4 +39,4 @@ const NcHotkeyList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcHotkeyList as N
 };
-//# sourceMappingURL=NcHotkeyList-BBE5BqwB.mjs.map
+//# sourceMappingURL=NcHotkeyList-67NnF26Y.mjs.map

package/dist/chunks/{NcHotkeyList-BBE5BqwB.mjs.map → NcHotkeyList-67NnF26Y.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkeyList-BBE5BqwB.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkeyList-67NnF26Y.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/NcIconToggleSwitch-DNEYngCw.mjs

@@ -0,0 +1,50 @@
+import '../assets/NcIconToggleSwitch-C29S_5Rp.css';
+import { defineComponent, useCssVars, computed, createBlock, openBlock, normalizeClass } from "vue";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const svg = `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 12">
+	<path d="M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z" />
+	<circle
+		cy="6"
+		r="3"
+		fill="var(--color-main-background)" />
+</svg>`;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcIconToggleSwitch",
+  props: {
+    checked: { type: Boolean },
+    size: { default: 34 },
+    inline: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "6bd152af": color.value,
+      "16fd8ca9": cx.value
+    }));
+    const color = computed(() => __props.checked ? "var(--color-primary-element)" : "var(--color-text-maxcontrast)");
+    const cx = computed(() => __props.checked ? "calc(17 / 24 * 100%)" : "calc(7 / 24 * 100%)");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcIconSvgWrapper, {
+        class: normalizeClass(_ctx.$style.iconToggleSwitch),
+        svg,
+        size: _ctx.size,
+        inline: _ctx.inline
+      }, null, 8, ["class", "size", "inline"]);
+    };
+  }
+});
+const iconToggleSwitch = "_iconToggleSwitch_ixmnx_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_ixmnx_12",
+  iconToggleSwitch
+};
+const cssModules = {
+  "$style": style0
+};
+const NcIconToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcIconToggleSwitch as N
+};
+//# sourceMappingURL=NcIconToggleSwitch-DNEYngCw.mjs.map

package/dist/chunks/NcIconToggleSwitch-DNEYngCw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconToggleSwitch-DNEYngCw.mjs","sources":["../../src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nconst svg = `<svg\n\txmlns=\"http://www.w3.org/2000/svg\"\n\tviewBox=\"0 0 24 12\">\n\t<path d=\"M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z\" />\n\t<circle\n\t\tcy=\"6\"\n\t\tr=\"3\"\n\t\tfill=\"var(--color-main-background)\" />\n</svg>`\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nconst {\n\tchecked,\n\tsize = 34,\n\tinline = false,\n} = defineProps<{\n\t/** Whether the toggle switch is checked */\n\tchecked: boolean\n\t/** Size of the icon */\n\tsize?: number\n\t/** NcIconSvgWrapper's inline prop */\n\tinline?: boolean\n}>()\n\nconst color = computed(() => checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => checked ? 'calc(17 / 24 * 100%)' : 'calc(7 / 24 * 100%)')\n</script>\n\n<template>\n\t<NcIconSvgWrapper\n\t\t:class=\"$style.iconToggleSwitch\"\n\t\t:svg\n\t\t:size\n\t\t:inline />\n</template>\n\n<style module lang=\"scss\">\n.iconToggleSwitch {\n\tcolor: v-bind(color);\n\ttransition: color var(--animation-quick) ease;\n\n\tsvg {\n\t\t/* Unlike other icons, this icon is not a square */\n\t\theight: auto !important;\n\t}\n\n\tcircle {\n\t\tcx: v-bind(cx);\n\t\ttransition: cx var(--animation-quick) ease;\n\t}\n}\n</style>\n\n<docs>\nPrivate component\n</docs>\n"],"names":["_createBlock","_normalizeClass","$style","size","inline"],"mappings":";;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;AA4BZ,UAAM,QAAQ,SAAS,MAAM,kBAAU,iCAAiC,+BAA+B;AACvG,UAAM,KAAK,SAAS,MAAM,QAAA,UAAU,yBAAyB,qBAAqB;;0BAIjFA,YAIW,kBAAA;AAAA,QAHT,OAAKC,eAAEC,KAAAA,OAAO,gBAAgB;AAAA,QAC9B;AAAA,QACA,MAAAC,KAAAA;AAAAA,QACA,QAAAC,KAAAA;AAAAA,MAAAA;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputConfirmCancel-CSO9hp4z.mjs → NcInputConfirmCancel-DjMO3Xyv.mjs}

@@ -1,8 +1,8 @@
 import '../assets/NcInputConfirmCancel-BrdZEfr2.css';
 import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { r as register, g as t14, a as t } from "./_l10n-DrTiip5c.mjs";
-import { N as NcButton } from "./NcButton-Dc8V4Urj.mjs";
+import { r as register, k as t14, a as t } from "./_l10n-CgsPi8nC.mjs";
+import { N as NcButton } from "./NcButton-CzpKEx4V.mjs";
 import { resolveComponent, createElementBlock, openBlock, createElementVNode, withModifiers, withKeys, withDirectives, createVNode, vModelText, withCtx } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t14);
@@ -120,4 +120,4 @@ const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcInputConfirmCancel as N
 };
-//# sourceMappingURL=NcInputConfirmCancel-CSO9hp4z.mjs.map
+//# sourceMappingURL=NcInputConfirmCancel-DjMO3Xyv.mjs.map

package/dist/chunks/{NcInputConfirmCancel-CSO9hp4z.mjs.map → NcInputConfirmCancel-DjMO3Xyv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputConfirmCancel-CSO9hp4z.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}
+{"version":3,"file":"NcInputConfirmCancel-DjMO3Xyv.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}

package/dist/chunks/{NcInputField-Bwsh2aHY.mjs → NcInputField-D7Nv5QhT.mjs}

@@ -1,7 +1,7 @@
 import '../assets/NcInputField-B9DSDOEd.css';
 import { defineComponent, mergeModels, useModel, useAttrs, useTemplateRef, computed, warn, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, withDirectives, createBlock, mergeProps, toDisplayString, renderSlot, vShow, withCtx, createTextVNode } from "vue";
-import { d as mdiCheck, f as mdiAlertCircleOutline } from "./mdi-XFJRiRqJ.mjs";
-import { N as NcButton } from "./NcButton-Dc8V4Urj.mjs";
+import { d as mdiCheck, f as mdiAlertCircleOutline } from "./mdi-DvQxv1t7.mjs";
+import { N as NcButton } from "./NcButton-CzpKEx4V.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
@@ -171,4 +171,4 @@ const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 export {
   NcInputField as N
 };
-//# sourceMappingURL=NcInputField-Bwsh2aHY.mjs.map
+//# sourceMappingURL=NcInputField-D7Nv5QhT.mjs.map

package/dist/chunks/{NcInputField-Bwsh2aHY.mjs.map → NcInputField-D7Nv5QhT.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputField-Bwsh2aHY.mjs","sources":["../../src/components/NcInputField/NcInputField.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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport interface NcInputFieldProps {\n\t/**\n\t * Class to add to the root component.\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * HTML id of the input field\n\t */\n\tid?: string\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder unless the placeholder\n\t * prop is populated with a different string.\n\t *\n\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The type of the input element\n\t */\n\ttype?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number'\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before version 32 this would default to the `label` prop.\n\t * On Nextcloud 32 and on v9 of this library it will no longer have a default value.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Controls whether to display the trailing button.\n\t */\n\tshowTrailingButton?: boolean\n\n\t/**\n\t * Label of the trailing button\n\t *\n\t * Required when showTrailingButton is set\n\t */\n\ttrailingButtonLabel?: string\n\n\t/**\n\t * Toggles the success state of the component. Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n\n\t/**\n\t * Toggles the error state of the component. Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * Disable the input field\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t */\n\tpill?: boolean\n}\n\ndefineOptions({\n\tinheritAttrs: false,\n})\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string | number>({ required: true })\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Icon for the trailing button.\n\t */\n\t'trailing-button-icon'?: Slot\n}>()\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\nconst inputElement = useTemplateRef('input')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton || props.success)\n\nconst internalPlaceholder = computed(() => {\n\tif (props.placeholder) {\n\t\treturn props.placeholder\n\t}\n\tif (props.label) {\n\t\t// if there is a label we use it as fallback on legacy but on current we need\n\t\t// to pass at least an empty string as placeholder to make css `:placeholder-shown` work.\n\t\treturn isLegacy ? props.label : ''\n\t}\n\treturn undefined\n})\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label || props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n\treturn isValidLabel\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputElement.value!.select()\n}\n\n/**\n * Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--legacy': isLegacy,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div\n\t\t\t\tv-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircleOutline\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"input-field__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"input-field__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tpadding: var(--border-width-input-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t@include border.inputBorder('.input-field--legacy', var(--input-border-color));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--input-padding-start) var(--input-padding-end);\n\t\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"NcInputField-D7Nv5QhT.mjs","sources":["../../src/components/NcInputField/NcInputField.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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport interface NcInputFieldProps {\n\t/**\n\t * Class to add to the root component.\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * HTML id of the input field\n\t */\n\tid?: string\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder unless the placeholder\n\t * prop is populated with a different string.\n\t *\n\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The type of the input element\n\t */\n\ttype?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number'\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before version 32 this would default to the `label` prop.\n\t * On Nextcloud 32 and on v9 of this library it will no longer have a default value.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Controls whether to display the trailing button.\n\t */\n\tshowTrailingButton?: boolean\n\n\t/**\n\t * Label of the trailing button\n\t *\n\t * Required when showTrailingButton is set\n\t */\n\ttrailingButtonLabel?: string\n\n\t/**\n\t * Toggles the success state of the component. Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n\n\t/**\n\t * Toggles the error state of the component. Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * Disable the input field\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t */\n\tpill?: boolean\n}\n\ndefineOptions({\n\tinheritAttrs: false,\n})\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string | number>({ required: true })\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Icon for the trailing button.\n\t */\n\t'trailing-button-icon'?: Slot\n}>()\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\nconst inputElement = useTemplateRef('input')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton || props.success)\n\nconst internalPlaceholder = computed(() => {\n\tif (props.placeholder) {\n\t\treturn props.placeholder\n\t}\n\tif (props.label) {\n\t\t// if there is a label we use it as fallback on legacy but on current we need\n\t\t// to pass at least an empty string as placeholder to make css `:placeholder-shown` work.\n\t\treturn isLegacy ? props.label : ''\n\t}\n\treturn undefined\n})\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label || props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n\treturn isValidLabel\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputElement.value!.select()\n}\n\n/**\n * Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--legacy': isLegacy,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div\n\t\t\t\tv-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircleOutline\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"input-field__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"input-field__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tpadding: var(--border-width-input-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t@include border.inputBorder('.input-field--legacy', var(--input-border-color));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--input-padding-start) var(--input-padding-end);\n\t\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}

package/dist/chunks/{NcKbd-D3YSTteg.mjs → NcKbd-CZdynD1d.mjs}

@@ -1,9 +1,9 @@
 import '../assets/NcKbd-BGW1_Jb7.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
+import { r as register, o as t7, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { i as isMac } from "./platform-CC2ecGvV.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register();
+register(t7);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcKbd",
   props: {
@@ -50,4 +50,4 @@ const NcKbd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModule
 export {
   NcKbd as N
 };
-//# sourceMappingURL=NcKbd-D3YSTteg.mjs.map
+//# sourceMappingURL=NcKbd-CZdynD1d.mjs.map

package/dist/chunks/{NcKbd-D3YSTteg.mjs.map → NcKbd-CZdynD1d.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcKbd-D3YSTteg.mjs","sources":["../../src/components/NcKbd/NcKbd.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 } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { isMac } from '../../utils/platform.ts'\n\nconst {\n\tsymbol = undefined,\n\tmac = isMac,\n} = defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>()\n\ndefineSlots<{\n\tdefault?: Slot\n}>()\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (symbol && labels.value[symbol]) || symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;;;;AAsCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,QAAA,MACP,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,QAAA,UAAU,OAAO,MAAM,QAAA,MAAM,KAAM,QAAA,MAAM;;0BAItEA,mBAIM,OAAA;AAAA,QAJA,OAAKC,eAAEC,KAAAA,OAAO,GAAG;AAAA,MAAA;QACtBC,WAEO,4BAFP,MAEO;AAAA,0CADH,MAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcKbd-CZdynD1d.mjs","sources":["../../src/components/NcKbd/NcKbd.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 } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { isMac } from '../../utils/platform.ts'\n\nconst {\n\tsymbol = undefined,\n\tmac = isMac,\n} = defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>()\n\ndefineSlots<{\n\tdefault?: Slot\n}>()\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (symbol && labels.value[symbol]) || symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;;;;AAsCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,QAAA,MACP,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,QAAA,UAAU,OAAO,MAAM,QAAA,MAAM,KAAM,QAAA,MAAM;;0BAItEA,mBAIM,OAAA;AAAA,QAJA,OAAKC,eAAEC,KAAAA,OAAO,GAAG;AAAA,MAAA;QACtBC,WAEO,4BAFP,MAEO;AAAA,0CADH,MAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;"}

package/dist/chunks/{NcListItem-BHmdTInS.mjs → NcListItem-Bx93C7tP.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcListItem-CZnKmy9X.css';
-import { N as NcActions } from "./NcActions-DWmvh7-Y.mjs";
+import { N as NcActions } from "./NcActions-4R7icatI.mjs";
 import { N as NcCounterBubble } from "./NcCounterBubble-CxxHHh8i.mjs";
 import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, createElementBlock, createCommentVNode, withKeys, renderSlot, createTextVNode, toDisplayString, withDirectives, vShow, createVNode, createSlots } from "vue";
@@ -373,4 +373,4 @@ const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_rende
 export {
   NcListItem as N
 };
-//# sourceMappingURL=NcListItem-BHmdTInS.mjs.map
+//# sourceMappingURL=NcListItem-Bx93C7tP.mjs.map